1 files changed, 165 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx
new file mode 100644
index 000000000..c5ec1716d
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/ChartBox.tsx
@@ -0,0 +1,165 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Doc } from "../../../../fields/Doc";
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+    InteractionItem,
+  } from 'chart.js';
+  import { Bar, getDatasetAtEvent, getElementAtEvent } from 'react-chartjs-2';
+import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
+import { action, computed, observable } from "mobx";
+
+
+export interface ChartBoxProps {
+    rootDoc: Doc;
+    pairs: {x: number, y:number}[];
+}
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend
+  );
+  
+//   export const options = {
+//     responsive: true,
+//     plugins: {
+//       legend: {
+//         position: 'top' as const,
+//       },
+//       title: {
+//         display: true,
+//         text: 'Chart.js Bar Chart',
+//       },
+//     },
+//   };
+  
+//   const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+  
+//   export const data = {
+//     labels,
+//     datasets: [
+//       {
+//         label: 'Dataset 1',
+//         data: [100, 200, 300, 400, 500, 600, 700],
+//         backgroundColor: 'rgba(255, 99, 132, 0.5)',
+//       },
+//       {
+//         label: 'Dataset 2',
+//         data: [700, 600, 500, 400, 300, 200, 100],
+//         backgroundColor: 'rgba(53, 162, 235, 0.5)',
+//       },
+//     ],
+//   };
+
+const primaryColor = 'rgba(53, 162, 235, 0.5)';
+const selectedColor = 'rgba(255, 99, 132, 0.5)';
+
+@observer
+export class ChartBox extends React.Component<ChartBoxProps> {
+    private _chartRef: any = React.createRef<ChartJSOrUndefined<"bar", number[], string>>();
+
+    // TODO: add alternate | undefined to all these variables
+    @observable private _prevColor: string = undefined;
+    @observable private _prevIndex: { dIndex: number, index: number} = undefined;
+    // @observable private _chartJsData: {
+    //     labels: number[];
+    //     datasets: {
+    //         label: string;
+    //         data: number[];
+    //         backgroundColor: string;
+    //     }[];
+    // } = undefined;
+    @observable private _chartJsData: any = null;
+
+    @computed get options() {
+        return {
+            responsive: true,
+            plugins: {
+                legend: {
+                        position: 'top' as const,
+                    },
+                    title: {
+                        display: true,
+                        text: 'Bar Chart',
+                    },
+            },
+        }
+    }
+
+    @action
+    generateChartJsData() {
+        const labels = this.props.pairs.map(p => p.x);
+        const dataset = {
+            label: 'Dataset 1',
+            data: this.props.pairs.map(p => p.y),
+            // backgroundColor: primaryColor 
+            backgroundColor: this.props.pairs.map(p => primaryColor),
+        }
+        const data = {
+            labels,
+            datasets: [dataset]
+        };
+        this._chartJsData = data;
+        // this._chartRef.current.update()
+    }
+    
+    @computed get chartJsData() {
+        const labels = this.props.pairs.map(p => p.x);
+        const dataset = {
+            label: 'Dataset 1',
+            data: this.props.pairs.map(p => p.y),
+            backgroundColor: this.props.pairs.map(p => primaryColor),
+            // backgroundColor: primaryColor,
+        }
+        const data = {
+            labels,
+            datasets: [dataset]
+        };
+        return data;
+    }
+
+    // componentDidMount() {
+    //     this.generateChartJsData();
+    // }
+
+    @action
+    onClick = (e: any) => {
+        e.preventDefault();
+        console.log(getDatasetAtEvent(this._chartRef.current, e));
+        console.log(getElementAtEvent(this._chartRef.current, e));
+
+        if (this._prevIndex && this._prevColor) {
+            this._chartJsData.datasets[this._prevIndex.dIndex].backgroundColor[this._prevIndex.index] = this._prevColor;
+        }
+
+
+        const currSelected = getElementAtEvent(this._chartRef.current, e);
+        const index = { datasetIndex: currSelected[0].datasetIndex, index: currSelected[0].index };
+        this._prevIndex = { dIndex: index.datasetIndex, index: index.index };
+        this._prevColor = this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index];
+        this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index] = selectedColor;
+        // TODO: nda - send data back to the backend so that we know how to render the chart
+        this._chartRef.current.update();
+        console.log(this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index]);
+    }
+
+    render() {
+        if (this.props.pairs && !this._chartJsData) this.generateChartJsData();
+            
+        if (this.props.pairs && this._chartJsData) {
+            return <Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={(e) => this.onClick(e)} />
+        } else {
+            return <div></div>
+        }
+    }
+}
+\ No newline at end of file