aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/DataVizBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DataVizBox.tsx')
-rw-r--r--src/client/views/nodes/DataVizBox/DataVizBox.tsx109
1 files changed, 70 insertions, 39 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 220a082d1..9c59fcd13 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -20,7 +20,7 @@ export enum DataVizView {
TABLE = 'table',
LINECHART = 'lineChart',
HISTOGRAM = 'histogram',
- PIECHART = 'pieChart'
+ PIECHART = 'pieChart',
}
@observer
@@ -39,20 +39,22 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
// current displayed chart type
@computed get dataVizView(): DataVizView {
- return StrCast(this.layoutDoc._dataVizView, 'table') as DataVizView;
+ return StrCast(this.layoutDoc._dataViz, 'table') as DataVizView;
}
@action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
restoreView = (data: Doc) => {
- const changedView = this.dataVizView !== data.presDataVizView && (this.layoutDoc._dataVizView = data.presDataVizView);
- const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._data_vizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
- this.layoutDoc.selected = Field.Copy(data.selected);
+ const changedView = this.dataVizView !== data.config_dataViz && (this.layoutDoc._dataViz = data.config_dataViz);
+ const changedAxes = this.axes.join('') !== StrListCast(data.config_dataVizAxes).join('') && (this.layoutDoc._dataViz_axes = new List<string>(StrListCast(data.config_dataVizAxes)));
+ this.layoutDoc.dataViz_selectedRows = Field.Copy(data.dataViz_selectedRows);
this.layoutDoc.histogramBarColors = Field.Copy(data.histogramBarColors);
this.layoutDoc.defaultHistogramColor = data.defaultHistogramColor;
this.layoutDoc.pieSliceColors = Field.Copy(data.pieSliceColors);
Object.keys(this.layoutDoc).map(key => {
- if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ this.layoutDoc['_'+key] = data[key]; }
- })
+ if (key.startsWith('histogram_title') || key.startsWith('lineChart_title') || key.startsWith('pieChart_title')) {
+ this.layoutDoc['_' + key] = data[key];
+ }
+ });
const func = () => this._chartRenderer?.restoreView(data);
if (changedView || changedAxes) {
setTimeout(func, 100);
@@ -69,23 +71,25 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
// this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker)
/*put in some options*/
});
- anchor.presDataVizView = this.dataVizView;
- anchor.presDataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined;
- anchor.selected = Field.Copy(this.layoutDoc.selected);
+ anchor.config_dataViz = this.dataVizView;
+ anchor.config_dataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined;
+ anchor.dataViz_selectedRows = Field.Copy(this.layoutDoc.dataViz_selectedRows);
anchor.histogramBarColors = Field.Copy(this.layoutDoc.histogramBarColors);
anchor.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
anchor.pieSliceColors = Field.Copy(this.layoutDoc.pieSliceColors);
Object.keys(this.layoutDoc).map(key => {
- if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ anchor[key] = this.layoutDoc[key]; }
- })
+ if (key.startsWith('histogram_title') || key.startsWith('lineChart_title') || key.startsWith('pieChart_title')) {
+ anchor[key] = this.layoutDoc[key];
+ }
+ });
this.addDocument(anchor);
return anchor;
};
@computed.struct get axes() {
- return StrListCast(this.layoutDoc.data_vizAxes);
+ return StrListCast(this.layoutDoc.dataViz_axes);
}
- selectAxes = (axes: string[]) => (this.layoutDoc.data_vizAxes = new List<string>(axes));
+ selectAxes = (axes: string[]) => (this.layoutDoc.dataViz_axes = new List<string>(axes));
// toggles for user to decide which chart type to view the data in
@computed get selectView() {
@@ -94,10 +98,53 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
const margin = { top: 10, right: 25, bottom: 75, left: 45 };
if (!this.pairs) return 'no data';
switch (this.dataVizView) {
- case DataVizView.TABLE: return <TableBox layoutDoc={this.layoutDoc} pairs={this.pairs} axes={this.axes} height={height} width={width} margin={margin} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
- case DataVizView.LINECHART: return <LineChart layoutDoc={this.layoutDoc} ref={r => (this._chartRenderer = r ?? undefined)} height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
- case DataVizView.HISTOGRAM: return <Histogram layoutDoc={this.layoutDoc} ref={r => (this._chartRenderer = r ?? undefined)} height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
- case DataVizView.PIECHART: return <PieChart layoutDoc={this.layoutDoc} ref={r => (this._chartRenderer = r ?? undefined)} height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
+ case DataVizView.TABLE:
+ return <TableBox layoutDoc={this.layoutDoc} pairs={this.pairs} axes={this.axes} height={height} width={width} margin={margin} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes} />;
+ case DataVizView.LINECHART:
+ return (
+ <LineChart
+ layoutDoc={this.layoutDoc}
+ ref={r => (this._chartRenderer = r ?? undefined)}
+ height={height}
+ width={width}
+ fieldKey={this.fieldKey}
+ margin={margin}
+ rootDoc={this.rootDoc}
+ axes={this.axes}
+ pairs={this.pairs}
+ dataDoc={this.dataDoc}
+ />
+ );
+ case DataVizView.HISTOGRAM:
+ return (
+ <Histogram
+ layoutDoc={this.layoutDoc}
+ ref={r => (this._chartRenderer = r ?? undefined)}
+ height={height}
+ width={width}
+ fieldKey={this.fieldKey}
+ margin={margin}
+ rootDoc={this.rootDoc}
+ axes={this.axes}
+ pairs={this.pairs}
+ dataDoc={this.dataDoc}
+ />
+ );
+ case DataVizView.PIECHART:
+ return (
+ <PieChart
+ layoutDoc={this.layoutDoc}
+ ref={r => (this._chartRenderer = r ?? undefined)}
+ height={height}
+ width={width}
+ fieldKey={this.fieldKey}
+ margin={margin}
+ rootDoc={this.rootDoc}
+ axes={this.axes}
+ pairs={this.pairs}
+ dataDoc={this.dataDoc}
+ />
+ );
}
}
@@ -121,11 +168,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
render() {
return !this.pairs?.length ? (
// displays how to get data into the DataVizBox if its empty
- <div className="start-message">
- To create a DataViz box, either import / drag a CSV file into your canvas
- or copy a data table and use the command 'ctrl + p' to bring the data table
- to your canvas.
- </div>
+ <div className="start-message">To create a DataViz box, either import / drag a CSV file into your canvas or copy a data table and use the command 'ctrl + p' to bring the data table to your canvas.</div>
) : (
<div
className="dataViz"
@@ -141,22 +184,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
)
}>
<div className={'datatype-button'}>
- <Toggle text={"TABLE"} toggleType={ToggleType.BUTTON} type={Type.SEC} color={"black"}
- onClick={e => this.layoutDoc._dataVizView = DataVizView.TABLE}
- toggleStatus={this.layoutDoc._dataVizView == DataVizView.TABLE}
- />
- <Toggle text={"LINECHART"} toggleType={ToggleType.BUTTON} type={Type.SEC} color={"black"}
- onClick={e => this.layoutDoc._dataVizView = DataVizView.LINECHART}
- toggleStatus={this.layoutDoc._dataVizView == DataVizView.LINECHART}
- />
- <Toggle text={"HISTOGRAM"} toggleType={ToggleType.BUTTON} type={Type.SEC} color={"black"}
- onClick={e => this.layoutDoc._dataVizView = DataVizView.HISTOGRAM}
- toggleStatus={this.layoutDoc._dataVizView == DataVizView.HISTOGRAM}
- />
- <Toggle text={"PIE CHART"} toggleType={ToggleType.BUTTON} type={Type.SEC} color={"black"}
- onClick={e => this.layoutDoc._dataVizView = DataVizView.PIECHART}
- toggleStatus={this.layoutDoc._dataVizView == DataVizView.PIECHART}
- />
+ <Toggle text={'TABLE'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.TABLE)} toggleStatus={this.layoutDoc._dataViz == DataVizView.TABLE} />
+ <Toggle text={'LINECHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.LINECHART)} toggleStatus={this.layoutDoc._dataViz == DataVizView.LINECHART} />
+ <Toggle text={'HISTOGRAM'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.HISTOGRAM)} toggleStatus={this.layoutDoc._dataViz == DataVizView.HISTOGRAM} />
+ <Toggle text={'PIE CHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.PIECHART)} toggleStatus={this.layoutDoc._dataViz == DataVizView.PIECHART} />
</div>
{this.selectView}
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 03:10:50 +0000