From 9730011a61bb3b1522ac59f12a26fbd36f7917a0 Mon Sep 17 00:00:00 2001
From: Naafiyan Ahmed <naafiyan@gmail.com>
Date: Mon, 25 Jul 2022 18:03:03 -0400
Subject: kind of got tooltips working

---
 src/client/views/nodes/DataVizBox/ChartBox.tsx  |  3 +-
 src/client/views/nodes/DataVizBox/LineChart.tsx | 76 ++++++++++++++-----------
 2 files changed, 46 insertions(+), 33 deletions(-)

(limited to 'src')

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)
-- 
cgit v1.2.3-70-g09d2