diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/LineChart.tsx | 46 |
1 files changed, 7 insertions, 39 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index 2357b7c69..e6a06a454 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -12,13 +12,6 @@ import { PinProps, PresBox } from '../../trails'; import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from '../utils/D3Utils'; import './Chart.scss'; -type minMaxRange = { - xMin: number | undefined; - xMax: number | undefined; - yMin: number | undefined; - yMax: number | undefined; -}; - export interface DataPoint { x: number; y: number; @@ -26,11 +19,6 @@ export interface DataPoint { interface SelectedDataPoint extends DataPoint { elem?: d3.Selection<d3.BaseType, unknown, SVGGElement, unknown>; } -export interface LineChartData { - xLabel: string; - yLabel: string; - dataSet: DataPoint[][]; -} export interface LineChartProps { rootDoc: Doc; axes: string[]; @@ -50,19 +38,11 @@ export interface LineChartProps { @observer export class LineChart extends React.Component<LineChartProps> { private _disposers: { [key: string]: IReactionDisposer } = {}; - @observable private _x: number = 0; - @observable private _y: number = 0; - @observable private _currSelected: SelectedDataPoint | undefined = undefined; - @observable private _lineChartData: LineChartData | undefined = undefined; - // create ref for the div private _lineChartRef: React.RefObject<HTMLDivElement> = React.createRef(); private _lineChartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined; - private _rangeVals: minMaxRange = { - xMin: undefined, - xMax: undefined, - yMin: undefined, - yMax: undefined, - }; + private _rangeVals: { xMin?: number; xMax?: number;yMin?: number;yMax?: number;}= {}; + @observable _currSelected: SelectedDataPoint | undefined = undefined; + @observable _lineChartData: DataPoint[][] | undefined = undefined; // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates componentWillUnmount() { @@ -71,11 +51,13 @@ export class LineChart extends React.Component<LineChartProps> { componentDidMount = () => { this._disposers.chartdata = reaction( () => this.props.axes.slice(), - axes => axes.length > 1 && this.generateChartData(), + axes => {if (axes.length > 1) { + this._lineChartData = [this.props.pairs?.map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) })).sort((a,b) => a.x < b.x ? 1:-1)] + }}, { fireImmediately: true } ); this._disposers.chartData = reaction( - () => ({ dataSet: this._lineChartData?.dataSet, axes: this.props.axes.slice(), w: this.props.width, h: this.props.height }), + () => ({ dataSet: this._lineChartData, axes: this.props.axes.slice(), w: this.props.width, h: this.props.height }), vals => { if (vals.dataSet) { this._rangeVals = minMaxRange(vals.dataSet); @@ -98,16 +80,6 @@ export class LineChart extends React.Component<LineChartProps> { ); }; - @action - generateChartData() { - this._lineChartData = { - xLabel: this.props.axes[0], - yLabel: this.props.axes[1], - // TODO: nda - add actual support for multiple sets of data - dataSet: [this.props.pairs?.map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) }))], - }; - } - // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that // gets called whenever the "data-annotations" fields gets updated @@ -252,8 +224,6 @@ export class LineChart extends React.Component<LineChartProps> { const xPos = d3.pointer(e)[0]; const x0 = bisect(data, xScale.invert(xPos - 25)); // shift x by -25 so that you can reach points on the left-side axis const d0 = data[x0]; - this._x = d0.x; - this._y = d0.y; focus.attr('transform', `translate(${xScale(d0.x)},${yScale(d0.y)})`); tooltip.transition().duration(300).style('opacity', 0.9); // TODO: nda - updating the inner html could be deadly cause injection attacks! @@ -268,8 +238,6 @@ export class LineChart extends React.Component<LineChartProps> { const xPos = d3.pointer(e)[0]; const x0 = bisect(data, xScale.invert(xPos - 25)); // shift x by -25 so that you can reach points on the left-side axis const d0 = data[x0]; - this._x = d0.x; - this._y = d0.y; // find .circle-d1 with data-x = d0.x and data-y = d0.y const selected = svg.selectAll('.datapoint').filter((d: any) => d['data-x'] === d0.x && d['data-y'] === d0.y); this._currSelected = { x: d0.x, y: d0.y, elem: selected }; |