diff options
author | bobzel <zzzman@gmail.com> | 2023-04-06 00:14:24 -0400 |
---|---|---|
committer | bobzel <zzzman@gmail.com> | 2023-04-06 00:14:24 -0400 |
commit | a8343cad405a146fdff8fc2d66ef41fdaefb8bda (patch) | |
tree | 853c9b24f6bec83e46240fd9c39e9487e8eb6650 /src/client/views/nodes/DataVizBox/ChartBox.tsx | |
parent | 99fba6d6e99da0154d40d2e3e87e120d8e6f2810 (diff) |
more simplification/cleanup of dataviz
Diffstat (limited to 'src/client/views/nodes/DataVizBox/ChartBox.tsx')
-rw-r--r-- | src/client/views/nodes/DataVizBox/ChartBox.tsx | 100 |
1 files changed, 0 insertions, 100 deletions
diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx deleted file mode 100644 index ee577b9fd..000000000 --- a/src/client/views/nodes/DataVizBox/ChartBox.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { Doc } from '../../../../fields/Doc'; -import { action, computed, observable } from 'mobx'; -import { NumCast, StrCast } from '../../../../fields/Types'; -import { LineChart } from './components/LineChart'; -import { Chart, ChartData } from './ChartInterface'; -import { PinProps } from '../trails'; - -export interface ChartBoxProps { - rootDoc: Doc; - dataDoc: Doc; - height: number; - pairs: { x: number; y: number }[]; - setChartBox: (chartBox: ChartBox) => void; - getAnchor: () => Doc; -} - -export interface DataPoint { - x: number; - y: number; -} - -@observer -export class ChartBox extends React.Component<ChartBoxProps> { - @observable private _chartData: ChartData | undefined = undefined; - private currChart: Chart | 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) { - this.props.rootDoc._currChartView = 'bar'; - } - } - - setCurrChart = (chart: Chart) => { - this.currChart = chart; - }; - - @action - generateChartData() { - if (this.props.rootDoc._chartData) { - this._chartData = JSON.parse(StrCast(this.props.rootDoc._chartData)); - return; - } - - 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 => { - // TODO: nda - add actual support for multiple sets of data - data.data[0].push({ x: pair.x, y: pair.y }); - }); - } - - this._chartData = data; - this.props.rootDoc._chartData = JSON.stringify(data); - } - - componentDidMount = () => { - this.generateChartData(); - this.props.setChartBox(this); - }; - - @action - onClickChangeChart = (e: React.MouseEvent<HTMLButtonElement>) => { - e.preventDefault(); - e.stopPropagation(); - console.log(e.currentTarget.value); - this.props.rootDoc._currChartView = e.currentTarget.value.toLowerCase(); - }; - - getAnchor = (pinProps?: PinProps) => this.currChart?._getAnchor(pinProps); - - restoreView = (data: Doc) => this.currChart?.restoreView(data); - - render() { - if (this.props.pairs && this._chartData) { - const width = NumCast(this.props.rootDoc._width) * 0.9; - const height = this.props.height * 0.9; - const margin = { top: 10, right: 50, bottom: 50, left: 50 }; - return <LineChart margin={margin} width={width} height={height} chartData={this._chartData} setCurrChart={this.setCurrChart} dataDoc={this.props.dataDoc} fieldKey={'data'} getAnchor={this.props.getAnchor} />; - } - return <div />; - } -} |