diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/ChartBox.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/LineChart.tsx | 76 |
2 files changed, 46 insertions, 33 deletions
diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx index 92ad76e61..f2450bc7c 100644 --- a/src/client/views/nodes/DataVizBox/ChartBox.tsx +++ b/src/client/views/nodes/DataVizBox/ChartBox.tsx @@ -190,6 +190,7 @@ export class ChartBox extends React.Component<ChartBoxProps> { let height = NumCast(this.props.rootDoc._height); height = height * 0.7; console.log(width, height); + const margin = { top: 50, right: 50, bottom: 50, left: 50 }; return ( <div> <div> @@ -199,7 +200,7 @@ export class ChartBox extends React.Component<ChartBoxProps> { <Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={e => this.onClick(e)} /> )} */} {/* {this.reLineChart} */} - <LineChart width={width} height={height} data={this._chartData} setCurrChart={this.setCurrChart} dataDoc={this.props.dataDoc} fieldKey={'data'} getAnchor={this.props.getAnchor} /> + <LineChart margin={margin} width={width} height={height} data={this._chartData} setCurrChart={this.setCurrChart} dataDoc={this.props.dataDoc} fieldKey={'data'} getAnchor={this.props.getAnchor} /> </div> <button onClick={e => this.onClickChangeChart(e)} value="line"> Line diff --git a/src/client/views/nodes/DataVizBox/LineChart.tsx b/src/client/views/nodes/DataVizBox/LineChart.tsx index 89fb6e20b..0aeaacf34 100644 --- a/src/client/views/nodes/DataVizBox/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/LineChart.tsx @@ -17,6 +17,12 @@ interface LineChartProps { // returns linechart component but should be generic chart setCurrChart: (chart: LineChart | undefined) => void; getAnchor: () => Doc; + margin: { + top: number; + right: number; + bottom: number; + left: number; + }; } type minMaxRange = { @@ -74,6 +80,7 @@ export class LineChart extends React.Component<LineChartProps> { }, { fireImmediately: true } ); + setTimeout(() => { this.props.setCurrChart(this); }); @@ -113,59 +120,64 @@ export class LineChart extends React.Component<LineChartProps> { return `<b>x: ${data.x} y: ${data.y}</b>`; } + @computed get height(): number { + return this.props.height - this.props.margin.top - this.props.margin.bottom; + } + + @computed get width(): number { + return this.props.width - this.props.margin.left - this.props.margin.right; + } + + @computed get svgContainer() { + const { margin } = this.props; + const svg = d3 + .create('svg') + .attr('width', `${this.width + margin.right + margin.left}`) + .attr('height', `${this.height + margin.top + margin.bottom}`) + .append('g') + .attr('transform', `translate(${margin.left}, ${margin.top})`); + return svg; + } + // TODO: nda - can use d3.create() to create html element instead of appending drawChart() { - console.log('Drawing chart'); + const { data, margin } = this.props; + console.log(this.height, this.width); // clearing tooltip d3.select(this._chartRef.current).select('svg').remove(); d3.select(this._chartRef.current).select('.tooltip').remove(); // TODO: nda - refactor code so that it only recalculates min max and things related to data on data update - const margin = { top: 50, right: 50, bottom: 50, left: 50 }; - const { data } = this.props; const { xMin, xMax, yMin, yMax } = this._rangeVals; - console.log('rangeVals', this._rangeVals); - - const width = this.props.width - margin.left - margin.right; - const height = this.props.height - margin.top - margin.bottom; - console.log('height, width', this.props.height, this.props.width); - + // const svg = d3.select(this._chartRef.current).append(this.svgContainer.html()); // adding svg const svg = d3 .select(this._chartRef.current) .append('svg') - .attr('width', `${width + margin.right + margin.left}`) - .attr('height', `${height + margin.top + margin.bottom}`) + .attr('width', `${this.width + margin.right + margin.left}`) + .attr('height', `${this.height + margin.top + margin.bottom}`) .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); - // adding tooltip - // const tooltip = d3.select('#chart-container').append('div').attr('class', 'tooltip'); - console.log('xMinMax:', xMin, xMax); - console.log('yMinMax:', yMin, yMax); - if (xMin == undefined || xMax == undefined || yMin == undefined || yMax == undefined) { - console.log('getting here'); // TODO: nda - error handle return; } - console.log('getting here'); - // creating the x and y scales - const xScale = scaleCreatorNumerical(xMin, xMax, 0, width); - const yScale = scaleCreatorNumerical(0, yMax, height, 0); + const xScale = scaleCreatorNumerical(xMin, xMax, 0, this.width); + const yScale = scaleCreatorNumerical(0, yMax, this.height, 0); // create a line function that takes in the data.data.x and data.data.y // TODO: nda - fix the types for the d here 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); + xGrid(svg.append('g'), this.height, xScale); + yGrid(svg.append('g'), this.width, yScale); + xAxisCreator(svg.append('g'), this.height, xScale); + yAxisCreator(svg.append('g'), this.width, yScale); // draw the line drawLine(svg.append('path'), data.data, lineGen); @@ -181,8 +193,6 @@ export class LineChart extends React.Component<LineChartProps> { .attr('data-x', d => d.x) .attr('data-y', d => d.y); - // this.setupDatapointClickHandlers(); - const focus = svg.append('g').attr('class', 'focus').style('display', 'none'); focus.append('circle').attr('r', 5).attr('class', 'circle'); const tooltip = d3 @@ -190,11 +200,10 @@ export class LineChart extends React.Component<LineChartProps> { .append('div') .attr('class', 'tooltip') .style('opacity', 0) - .style('position', 'absolute') - // .style('z-index', '10') .style('background', '#fff') .style('border', '1px solid #ccc') .style('padding', '5px') + .style('position', 'absolute') .style('font-size', '12px'); // add all the tooltipContent to the tooltip // @action @@ -208,7 +217,10 @@ export class LineChart extends React.Component<LineChartProps> { focus.attr('transform', `translate(${xScale(d0.x)},${yScale(d0.y)})`); // TODO: nda - implement tooltips tooltip.transition().duration(300).style('opacity', 0.9); - tooltip.html(() => this.tooltipContent(d0)).attr('transform', `translate(${xScale(d0.x) + 30}px,${yScale(d0.y) + 30}px)`); + // TODO: nda - updating the inner html could be deadly cause injection attacks! + // 0 = 30px => -597px (-this.width - margin.left - margin.right) + // 1 = + tooltip.html(() => this.tooltipContent(d0)).style('transform', `translate(${xScale(d0.x) - (this.width + margin.left + margin.right)}px,${yScale(d0.y) + 30}px)`); }); const onPointClick = action((e: any) => { @@ -229,8 +241,8 @@ export class LineChart extends React.Component<LineChartProps> { svg.append('rect') .attr('class', 'overlay') - .attr('width', width) - .attr('height', height + margin.top + margin.bottom) + .attr('width', this.width) + .attr('height', this.height + margin.top + margin.bottom) .attr('fill', 'none') .attr('translate', `translate(${margin.left}, ${-(margin.top + margin.bottom)})`) .style('opacity', 0) |