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, PointElement, LineElement } from 'chart.js'; // 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'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; import { CategoricalChartState } from 'recharts/types/chart/generateCategoricalChart'; export interface ChartBoxProps { rootDoc: Doc; pairs: { x: number; y: number }[]; } export interface ChartJsData { labels: number[]; datasets: { label: string; data: number[]; backgroundColor: string[]; }[]; } // ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, PointElement, LineElement); const primaryColor = 'rgba(53, 162, 235, 0.5)'; const selectedColor = 'rgba(255, 99, 132, 0.5)'; const data = [ { name: 'Page A', uv: 4000, pv: 2400, amt: 2400, }, { name: 'Page B', uv: 3000, pv: 1398, amt: 2210, }, { name: 'Page C', uv: 2000, pv: 9800, amt: 2290, }, { name: 'Page D', uv: 2780, pv: 3908, amt: 2000, }, { name: 'Page E', uv: 1890, pv: 4800, amt: 2181, }, { name: 'Page F', uv: 2390, pv: 3800, amt: 2500, }, { name: 'Page G', uv: 3490, pv: 4300, amt: 2100, }, ]; export interface RechartData { name: string | number; y: number; } @observer export class ChartBox extends React.Component { @observable private _chartData: RechartData[] = []; @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) { this.props.rootDoc._currChartView = 'bar'; } } @action generateChartData() { if (this.props.rootDoc._chartData) { this._chartData = JSON.parse(StrCast(this.props.rootDoc._chartData)); return; } // generate the chart data according to the RechartData type from the pairs prop const chartData: RechartData[] = []; this.props.pairs.forEach(pair => { chartData.push({ name: pair.x, y: pair.y, }); }); this._chartData = chartData; } // @action // generateChartJsData() { // if (this.props.rootDoc._chartData) { // // parse the string into a json object // this._chartJsData = JSON.parse(StrCast(this.props.rootDoc._chartData)); // this._prevColor = StrCast(this.props.rootDoc._prevColor); // this._prevIndex = JSON.parse(StrCast(this.props.rootDoc._prevIndex)); // return; // } // 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), // }; // const data = { // labels, // datasets: [dataset], // }; // this._chartJsData = data; // } componentDidMount() { // this.generateChartJsData(); this.generateChartData(); } @action onClickChangeChart = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); console.log(e.currentTarget.value); this.props.rootDoc._currChartView = e.currentTarget.value.toLowerCase(); }; // @action // onClick = (e: React.MouseEvent) => { // e.preventDefault(); // console.log(e); // if (getDatasetAtEvent(this._chartRef.current, e).length == 0) return; // if (!this._chartJsData) return; // if (this._prevIndex && this._prevColor) { // this._chartJsData.datasets[this._prevIndex.dIndex].backgroundColor[this._prevIndex.index] = this._prevColor; // } // const currSelected = getElementAtEvent(this._chartRef.current, e); // // TODO - nda: the currSelected might not have the updated color variables so look into that // this._currSelected = currSelected; // 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; // this._chartRef.current.update(); // // stringify this._chartJsData // const strData = JSON.stringify(this._chartJsData); // this.props.rootDoc._chartData = strData; // this.props.rootDoc._prevColor = this._prevColor; // this.props.rootDoc._prevIndex = JSON.stringify(this._prevIndex); // }; onMouseMove = (e: CategoricalChartState) => { console.log(e); // pops up at 526 when it should be at 263 // at 100%scale it pops up at 526 but mouse shows 263 at 50% scale if (e.chartX && e.chartY) { e.chartX += 263; e.chartY += 263; } // if (e.chartX && e.chartY) { // e.chartX -= 200; // e.chartY -= 200; // } }; handleDotClick = (e: any) => { console.log(e); }; // handleTextClick = (e: any) => { // console.log(e); // } @computed get reLineChart() { return ( console.log(e)} onMouseMove={e => this.onMouseMove(e)}> console.log(e)} /> {/* */} ); } render() { if (this.props.pairs && this._chartData.length > 0) { return (
{/*{this.props.rootDoc._currChartView == 'line' ? ( this.onClick(e)} /> ) : ( this.onClick(e)} /> )} */} {this.reLineChart}
); } else { return
; } } }