diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/ChartBox.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/ChartBox.tsx | 151 |
1 files changed, 57 insertions, 94 deletions
diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx index 42bd8a7f6..36d23d30e 100644 --- a/src/client/views/nodes/DataVizBox/ChartBox.tsx +++ b/src/client/views/nodes/DataVizBox/ChartBox.tsx @@ -6,81 +6,37 @@ import { Doc } from '../../../../fields/Doc'; 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 { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; import { CategoricalChartState } from 'recharts/types/chart/generateCategoricalChart'; +import { LineChart } from './LineChart'; 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; } +export interface DataPoints { + x: number; + y: number; +} + +export interface ChartData { + xLabel: string; + yLabel: string; + data: DataPoints[]; +} + @observer export class ChartBox extends React.Component<ChartBoxProps> { - @observable private _chartData: RechartData[] = []; + @observable private _chartData: ChartData | undefined = undefined; @computed get currView() { if (this.props.rootDoc._dataVizView) { @@ -104,16 +60,22 @@ export class ChartBox extends React.Component<ChartBoxProps> { 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, + const data: ChartData = { + xLabel: '', + yLabel: '', + data: [], + }; + + if (this.props.pairs && this.props.pairs.length > 0) { + data.xLabel = 'x'; + data.yLabel = 'y'; + this.props.pairs.forEach(pair => { + data.data.push({ x: pair.x, y: pair.y }); }); - }); + } - this._chartData = chartData; + this._chartData = data; + this.props.rootDoc._chartData = JSON.stringify(data); } // @action @@ -200,35 +162,35 @@ export class ChartBox extends React.Component<ChartBoxProps> { // console.log(e); // } - @computed get reLineChart() { - return ( - <ResponsiveContainer width="80%" height="80%"> - <LineChart - width={500} - height={300} - data={this._chartData} - margin={{ - top: 5, - right: 30, - left: 20, - bottom: 5, - }} - onMouseDown={e => console.log(e)} - onMouseMove={e => this.onMouseMove(e)}> - <CartesianGrid strokeDasharray="3 3" /> - <XAxis dataKey="name" onMouseDown={e => console.log(e)} /> - <YAxis /> - <Tooltip /> - <Legend /> - <Line type="monotone" dataKey="y" stroke="#8884d8" activeDot={{ r: 8, onClick: this.handleDotClick }} /> - {/* <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> */} - </LineChart> - </ResponsiveContainer> - ); - } + // @computed get reLineChart() { + // return ( + // // <ResponsiveContainer width="80%" height="80%"> + // <LineChart + // width={500} + // height={300} + // data={this._chartData} + // margin={{ + // top: 5, + // right: 30, + // left: 20, + // bottom: 5, + // }} + // onMouseDown={e => console.log(e)} + // onMouseMove={e => this.onMouseMove(e)}> + // <CartesianGrid strokeDasharray="3 3" /> + // <XAxis dataKey="name" onMouseDown={e => console.log(e)} /> + // <YAxis /> + // <Tooltip /> + // <Legend /> + // <Line type="monotone" dataKey="y" stroke="#8884d8" activeDot={{ r: 8, onClick: this.handleDotClick }} /> + // {/* <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> */} + // </LineChart> + // // </ResponsiveContainer> + // ); + // } render() { - if (this.props.pairs && this._chartData.length > 0) { + if (this.props.pairs && this._chartData) { return ( <div> <div> @@ -237,7 +199,8 @@ export class ChartBox extends React.Component<ChartBoxProps> { ) : ( <Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={e => this.onClick(e)} /> )} */} - {this.reLineChart} + {/* {this.reLineChart} */} + <LineChart width={500} height={300} data={this._chartData} /> </div> <button onClick={e => this.onClickChangeChart(e)} value="line"> Line |