From 08762ba3012f9948ed9c64812b9d488152dcd24a Mon Sep 17 00:00:00 2001
From: Mike Blackstock <mike@mblackstock.com>
Date: Wed, 30 Dec 2020 15:25:03 -0800
Subject: [PATCH] fix y-axis width on activate

---
 dataview.html | 38 ++++++++++++++++++++------------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/dataview.html b/dataview.html
index db1952d..efd7353 100644
--- a/dataview.html
+++ b/dataview.html
@@ -196,19 +196,27 @@
 
                 let margin = CHART_MARGINS;
 
-                let width = chartWidth - margin.left - margin.right;
                 let height = chartHeight - margin.top - margin.bottom;
 
                 // chart group, convert to d3, move into place
-                let d3chart = d3.select(chartGroup)
-                    .attr("transform", `translate(${margin.left},${45 + margin.top})`);
+                let d3chart = d3.select(chartGroup);
+                let yScale = d3.scale.linear().range([height, 0]);
+                let yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);
+                yScale.domain([d3.min(data, d => d.value), d3.max(data, d => d.value)]);
+
+                let yAxisElement = d3chart.append("g")
+                    .attr("class", "y axis")
+                    .call(yAxis);
+                
+                let axisWidth = yAxisElement.node().getBBox().width;
+                let leftMargin = Math.max(margin.left, axisWidth+4);
+                let width = chartWidth - leftMargin - margin.right;
+
+                d3chart.attr("transform", `translate(${leftMargin},${45 + margin.top})`);
 
                 let xScale = d3.time.scale().range([0, width]);
                 let xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(3);
 
-                let yScale = d3.scale.linear().range([height, 0]);
-                let yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);
-
                 let valueLine = d3.svg.line()
                     .x(function (d) {
                         return xScale(d.time);
@@ -218,7 +226,6 @@
                     });
 
                 xScale.domain(d3.extent(data, d => d.time));
-                yScale.domain([d3.min(data, d => d.value), d3.max(data, d => d.value)]);
 
                 d3chart.append("path")
                     .attr("class", "chart-line")
@@ -230,10 +237,6 @@
                     .attr("transform", `translate( 0, ${height})`)
                     .call(xAxis);
 
-                d3chart.append("g")
-                    .attr("class", "y axis")
-                    .call(yAxis);
-
                 d3chart.selectAll(".axis line")
                     .style(AXIS_STYLE);
 
@@ -241,30 +244,29 @@
                     .style(AXIS_STYLE);
 
                 $chart = chartGroup
-                let previousWidth = chartWidth;
 
                 // save for updates to the chart
-                chartInfo[id] = { xScale, yScale, xAxis, yAxis, valueLine, previousWidth };
+                chartInfo[id] = { xScale, yScale, xAxis, yAxis, valueLine, width };
             } else {
                 // updating chart
                 let d3chart = d3.select($chart).transition();
-                let { xScale, yScale, xAxis, yAxis, valueLine, previousWidth } = chartInfo[id];
+                let { xScale, yScale, xAxis, yAxis, valueLine, width } = chartInfo[id];
 
                 xScale.domain(d3.extent(data, d => d.time));
                 yScale.domain([d3.min(data, d => d.value), d3.max(data, d => d.value)]);
 
-                d3chart.select(".y.axis") // change the y axis
+                let yAxisElement = d3chart.select(".y.axis") // change the y axis
                     .duration(200)
                     .call(yAxis);
 
                 let margin = CHART_MARGINS;
 
                 // get the width of the y-axis in case we need room
-                let axisWidth = d3chart.select('.y.axis').node().getBBox().width;
+                let axisWidth = yAxisElement.node().getBBox().width;
                 let leftMargin = Math.max(margin.left, axisWidth+4);
                 let newWidth = chartWidth - leftMargin - margin.right;
 
-                if (newWidth != previousWidth) {
+                if (newWidth != width) {
                     // adjust scaling to new width
                     xScale.range([0, newWidth]);
                     valueLine.x(function (d) {
@@ -273,7 +275,7 @@
 
                     // move chart over for room
                     d3chart.attr("transform", `translate(${leftMargin},${45 + margin.top})`);
-                    chartInfo[id].previousWidth = newWidth;
+                    chartInfo[id].width = newWidth;
                 }
 
                 d3chart.select(".chart-line")