diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/LineChart.tsx | 47 |
1 files changed, 27 insertions, 20 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index 8d6671e65..dd6a6b007 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -236,21 +236,16 @@ export class LineChart extends ObservableReactComponent<LineChartProps> { } } - // TODO: nda - can use d3.create() to create html element instead of appending drawChart = (dataSet: any[][], rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number }, width: number, height: number) => { // clearing tooltip and the current chart d3.select(this._lineChartRef.current).select('svg').remove(); d3.select(this._lineChartRef.current).select('.tooltip').remove(); - const { xMin, xMax, yMin, yMax } = rangeVals; + var { xMin, xMax, yMin, yMax } = rangeVals; if (xMin === undefined || xMax === undefined || yMin === undefined || yMax === undefined) { return; } - // creating the x and y scales - const xScale = scaleCreatorNumerical(xMin, xMax, 0, width); - const yScale = scaleCreatorNumerical(0, yMax, height, 0); - // adding svg const margin = this._props.margin; const svg = (this._lineChartSvg = d3 @@ -262,15 +257,40 @@ export class LineChart extends ObservableReactComponent<LineChartProps> { .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`)); + var validSecondData; + if (this._props.axes.length>2){ // for when there are 2 lines on the chart + var next = this._tableData.map(record => ({ x: Number(record[this._props.axes[0]]), y: Number(record[this._props.axes[2]]) })).sort((a, b) => (a.x < b.x ? -1 : 1)); + validSecondData = next.filter(d => { + if (!d.x || Number.isNaN(d.x) || !d.y || Number.isNaN(d.y)) return false; + return true; + }); + var secondDataRange = minMaxRange([validSecondData]); + if (secondDataRange.xMax!>xMax) xMax = secondDataRange.xMax; + if (secondDataRange.yMax!>yMax) yMax = secondDataRange.yMax; + if (secondDataRange.xMin!<xMin) xMin = secondDataRange.xMin; + if (secondDataRange.yMin!<yMin) yMin = secondDataRange.yMin; + // drawLine(svg.append('path'), validNext, lineGen); + // this.drawDataPoints(validNext, 0, xScale, yScale); + } + + // creating the x and y scales + const xScale = scaleCreatorNumerical(xMin!, xMax!, 0, width); + const yScale = scaleCreatorNumerical(0, yMax!, height, 0); + const lineGen = createLineGenerator(xScale, yScale); + // create x and y grids xGrid(svg.append('g'), height, xScale); yGrid(svg.append('g'), width, yScale); xAxisCreator(svg.append('g'), height, xScale); yAxisCreator(svg.append('g'), width, yScale); + if (validSecondData) { + drawLine(svg.append('path'), validSecondData, lineGen); + this.drawDataPoints(validSecondData, 0, xScale, yScale); + } + // get valid data points const data = dataSet[0]; - const lineGen = createLineGenerator(xScale, yScale); var validData = data.filter(d => { Object.keys(data[0]).map(key => { if (!d[key] || Number.isNaN(d[key])) return false; @@ -278,19 +298,6 @@ export class LineChart extends ObservableReactComponent<LineChartProps> { return true; }); - if (this._props.axes.length>2){ - var next = this._tableData.map(record => ({ x: Number(record[this._props.axes[0]]), y: Number(record[this._props.axes[2]]) })).sort((a, b) => (a.x < b.x ? -1 : 1)); - var validNext = next.filter(d => { - // Object.keys(next[0]).map(key => { - // if (!d[key] || Number.isNaN(d[key])) return false; - // }); - if (!d.x || Number.isNaN(d.x) || !d.y || Number.isNaN(d.y)) valid = false; - return true; - }); - drawLine(svg.append('path'), validNext, lineGen); - this.drawDataPoints(validNext, 0, xScale, yScale); - } - // draw the plot line drawLine(svg.append('path'), validData, lineGen); // draw the datapoint circle |