1 files changed, 27 insertions, 6 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index d5e21ce0e..70fed91ef 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -97,17 +97,38 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     selectAxes = (axes: string[]) => (this.layoutDoc.data_vizAxes = new List<string>(axes));
 
-    @computed get selectView() {
+    @computed get table(){
+        if (!this.pairs) return 'no data';
+        return <TableBox pairs={this.pairs} axes={this.axes} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
+    }
+    @computed get lineChart(){
+        const width = this.props.PanelWidth() * 0.9;
+        const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
+        const margin = { top: 10, right: 25, bottom: 50, left: 25 };
+        if (!this.pairs) return 'no data';
+        return <LineChart 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} />;
+    }
+    @computed get histogram(){
         const width = this.props.PanelWidth() * 0.9;
         const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
         const margin = { top: 10, right: 25, bottom: 50, left: 25 };
         if (!this.pairs) return 'no data';
-        // prettier-ignore
+        return <Histogram height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
+    }
+    @computed get pieChart(){
+        const width = this.props.PanelWidth() * 0.9;
+        const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
+        const margin = { top: 10, right: 25, bottom: 50, left: 25 };
+        if (!this.pairs) return 'no data';
+        console.log('new pie')
+        return <PieChart height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
+    }
+    @computed get selectView() {
         switch (this.dataVizView) {
-            case DataVizView.TABLE:     return <TableBox pairs={this.pairs} axes={this.axes} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
-            case DataVizView.LINECHART: return <LineChart 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 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 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 this.table;
+            case DataVizView.LINECHART: return this.lineChart;
+            case DataVizView.HISTOGRAM: return this.histogram;
+            case DataVizView.PIECHART: return this.pieChart;
         }
     }
     @computed get dataUrl() {