added support for line graph

1 files changed, 42 insertions, 3 deletions

diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx
index 26ccd1c12..1a084cf55 100644
--- a/src/client/views/nodes/DataVizBox/ChartBox.tsx
+++ b/src/client/views/nodes/DataVizBox/ChartBox.tsx
@@ -10,8 +10,10 @@ import {
     Tooltip,
     Legend,
     InteractionItem,
+    PointElement,
+    LineElement,
   } from 'chart.js';
-  import { Bar, getDatasetAtEvent, getElementAtEvent } from 'react-chartjs-2';
+  import { Bar, getDatasetAtEvent, getElementAtEvent, Line } from 'react-chartjs-2';
 import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
 import { action, computed, observable } from "mobx";
 import { Cast, StrCast } from "../../../../fields/Types";
@@ -37,7 +39,9 @@ ChartJS.register(
     BarElement,
     Title,
     Tooltip,
-    Legend
+    Legend,
+    PointElement,
+    LineElement
   );
   
 const primaryColor = 'rgba(53, 162, 235, 0.5)';
@@ -51,6 +55,22 @@ export class ChartBox extends React.Component<ChartBoxProps> {
     @observable private _prevIndex: { dIndex: number, index: number} | undefined = undefined;
     @observable private _chartJsData: ChartJsData | undefined= undefined;
 
+    @computed get currView() {
+        if (this.props.rootDoc._dataVizView) {
+            return StrCast(this.props.rootDoc._currChartView);
+        } else {
+            return "table";
+        }
+    }
+
+    constructor(props: any) {
+        super(props);
+        if (!this.props.rootDoc._currChartView) {
+            // TODO: nda - this might not always want to default to "table"
+            this.props.rootDoc._currChartView = "bar";
+        }
+    }
+
     @computed get options() {
         return {
             responsive: true,
@@ -93,6 +113,14 @@ export class ChartBox extends React.Component<ChartBoxProps> {
     }
 
     @action
+    onClickChangeChart = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        console.log(e.currentTarget.value);
+        this.props.rootDoc._currChartView = e.currentTarget.value.toLowerCase();
+    }
+
+    @action
     onClick = (e: any) => {
         e.preventDefault();
         if (getDatasetAtEvent(this._chartRef.current, e).length == 0) return;
@@ -116,7 +144,18 @@ export class ChartBox extends React.Component<ChartBoxProps> {
 
     render() {
         if (this.props.pairs && this._chartJsData) {
-            return <Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={(e) => this.onClick(e)} />
+            return (
+                <div>
+                    <div>
+                        {this.props.rootDoc._currChartView == "line" ? 
+                            (<Line ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={(e) => this.onClick(e)} />) : 
+                            (<Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={(e) => this.onClick(e)} />)
+                        }
+                    </div>
+                    <button onClick={(e) => this.onClickChangeChart(e)} value="line">Line</button>
+                    <button onClick={(e) => this.onClickChangeChart(e)} value="bar">Bar</button>
+                </div>
+            )
         } else {
             return <div></div>
         }