Code cleanup

frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx

@@ -160,26 +160,20 @@ export default class LineAreaBarChart extends Component {
 
         let settings = { ...this.props.settings };
 
+        // smooth interpolation at smallest x/y fidelity
+        if (fidelity.x === 0 && fidelity.y === 0) {
+            settings["line.interpolate"] = "cardinal";
+        }
+
         // no axis in < 1 fidelity
-        if (fidelity.x < 1) {
+        if (fidelity.x < 1 || fidelity.y < 1) {
             settings["graph.y_axis.axis_enabled"] = false;
         }
-        if (fidelity.y < 1) {
-            settings["graph.x_axis.axis_enabled"] = false;
-        }
 
         // no labels in < 2 fidelity
-        if (fidelity.x < 2) {
+        if (fidelity.x < 2 || fidelity.y < 2) {
             settings["graph.y_axis.labels_enabled"] = false;
         }
-        if (fidelity.y < 2) {
-            settings["graph.x_axis.labels_enabled"] = false;
-        }
-
-        // smooth interpolation at smallest x/y fidelity
-        if (fidelity.x === 0 && fidelity.y === 0) {
-            settings["line.interpolate"] = "cardinal";
-        }
 
         return settings;
     }
@@ -311,34 +305,35 @@ function transformSingleSeries(s, series, seriesIndex) {
                 }]
             }
         }));
-    } else {
-        const dimensionColumnIndex = dimensionColumnIndexes[0];
-        return metricColumnIndexes.map(metricColumnIndex => {
-            const col = cols[metricColumnIndex];
-            const rowColumnIndexes = [dimensionColumnIndex].concat(metricColumnIndex, extraColumnIndexes);
-            return {
-                card: {
-                    ...card,
-                    name: [
-                        // show series title if it's multiseries
-                        series.length > 1 && card.name,
-                        // show column name if there are multiple metrics
-                        metricColumnIndexes.length > 1 && getFriendlyName(col)
-                    ].filter(n => n).join(": "),
-                    _transformed: true,
-                    _seriesIndex: seriesIndex,
-                },
-                data: {
-                    rows: rows.map((row, rowIndex) => {
-                        const newRow = rowColumnIndexes.map(i => row[i]);
-                        // $FlowFixMe: _origin not typed
-                        newRow._origin = { seriesIndex, rowIndex, row, cols };
-                        return newRow;
-                    }),
-                    cols: rowColumnIndexes.map(i => cols[i]),
-                    _rawCols: cols
-                }
-            };
-        });
     }
+
+    // dimensions.length <= 1
+    const dimensionColumnIndex = dimensionColumnIndexes[0];
+    return metricColumnIndexes.map(metricColumnIndex => {
+        const col = cols[metricColumnIndex];
+        const rowColumnIndexes = [dimensionColumnIndex].concat(metricColumnIndex, extraColumnIndexes);
+        return {
+            card: {
+                ...card,
+                name: [
+                    // show series title if it's multiseries
+                    series.length > 1 && card.name,
+                    // show column name if there are multiple metrics
+                    metricColumnIndexes.length > 1 && getFriendlyName(col)
+                ].filter(n => n).join(": "),
+                _transformed: true,
+                _seriesIndex: seriesIndex,
+            },
+            data: {
+                rows: rows.map((row, rowIndex) => {
+                    const newRow = rowColumnIndexes.map(i => row[i]);
+                    // $FlowFixMe: _origin not typed
+                    newRow._origin = { seriesIndex, rowIndex, row, cols };
+                    return newRow;
+                }),
+                cols: rowColumnIndexes.map(i => cols[i]),
+                _rawCols: cols
+            }
+        };
+    });
 }

frontend/src/metabase/visualizations/lib/LineAreaBarPostRender.js

@@ -78,6 +78,8 @@ function dispatchUIEvent(element, eventName) {
     element.dispatchEvent(e);
 }
 
+// logic for determining the bounding shapes for showing tooltips for a given point.
+// Wikipedia has a good explanation here: https://en.wikipedia.org/wiki/Voronoi_diagram
 function onRenderVoronoiHover(chart) {
     const parent = chart.svg().select("svg > g");
     const dots = chart.svg().selectAll(".sub .dc-tooltip .dot")[0];
@@ -88,9 +90,9 @@ function onRenderVoronoiHover(chart) {
 
     const originRect = chart.svg().node().getBoundingClientRect();
     const vertices = dots.map(e => {
-        let { top, left, width, height } = e.getBoundingClientRect();
-        let px = (left + width / 2) - originRect.left;
-        let py = (top + height / 2) - originRect.top;
+        const { top, left, width, height } = e.getBoundingClientRect();
+        const px = (left + width / 2) - originRect.left;
+        const py = (top + height / 2) - originRect.top;
         return [px, py, e];
     });
 
@@ -120,6 +122,7 @@ function onRenderVoronoiHover(chart) {
           .filter((d) => d != undefined)
           .attr("d", (d) => "M" + d.join("L") + "Z")
           .attr("clip-path", (d,i) => clipPathReference("clip-" + i))
+          // in the functions below e is not an event but the circle element being hovered/clicked
           .on("mousemove", ({ point }) => {
               let e = point[2];
               dispatchUIEvent(e, "mousemove");
@@ -161,7 +164,7 @@ function onRenderCleanupGoal(chart, onGoalHover, isSplitAxis) {
             goalLine.setAttribute("d", `M0,${goalLine.getBBox().y}L${xAxisLine.getBBox().width},${goalLine.getBBox().y}`)
         }
 
-        let { x, y, width } = goalLine.getBBox ? goalLine.getBBox() : { x: 0, y: 0, width: 0 };
+        const { x, y, width } = goalLine.getBBox ? goalLine.getBBox() : { x: 0, y: 0, width: 0 };
 
         const labelOnRight = !isSplitAxis;
         chart.selectAll(".goal .stack._0")
@@ -175,7 +178,7 @@ function onRenderCleanupGoal(chart, onGoalHover, isSplitAxis) {
                  fill: "rgb(157,160,164)",
              })
              .on("mouseenter", function() { onGoalHover(this); })
-             .on("mouseleave", function() { onGoalHover(null); })
+             .on("mouseleave", function() { onGoalHover(null); });
     }
 }
 

frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js

@@ -19,7 +19,7 @@ import { computeNumericDataInverval } from "./numeric";
 
 import { applyChartTimeseriesXAxis, applyChartQuantitativeXAxis, applyChartOrdinalXAxis, applyChartYAxis } from "./apply_axis";
 
-import { applyChartTooltips } from "./apply_tooltips";
+import { setupTooltips } from "./apply_tooltips";
 
 import fillMissingValuesInDatas from "./fill_data";
 
@@ -82,15 +82,12 @@ function checkSeriesIsValid({ series, maxSeries }) {
 }
 
 function getDatas({ settings, series }, warn) {
-    return series.map((s, index) =>
+    return series.map((s) =>
         s.data.rows.map(row => {
             const newRow = [
                 // don't parse as timestamp if we're going to display as a quantitative scale, e.x. years and Unix timestamps
-                (isDimensionTimeseries(series) && !isQuantitative(settings)) ?
-                HACK_parseTimestamp(row[0], s.data.cols[0].unit, warn)
-                : isDimensionNumeric(series) ?
-                row[0]
-                :
+                (isDimensionTimeseries(series) && !isQuantitative(settings)) ? HACK_parseTimestamp(row[0], s.data.cols[0].unit, warn) :
+                isDimensionNumeric(series) ? row[0] :
                 String(row[0])
                 , ...row.slice(1)
             ]
@@ -484,18 +481,7 @@ function doHistogramBarStuff(parent) {
     });
 }
 
-function setupTooltips({ settings, series, isScalarSeries, onHoverChange, onVisualizationClick }, datas, parent, { isBrushing }) {
-    applyChartTooltips(parent, series, isStacked(settings, datas), isNormalized(settings, datas), isScalarSeries, (hovered) => {
-        // disable tooltips while brushing
-        if (onHoverChange && !isBrushing()) {
-            // disable tooltips on lines
-            if (hovered && hovered.element && hovered.element.classList.contains("line")) {
-                delete hovered.element;
-            }
-            onHoverChange(hovered);
-        }
-    }, onVisualizationClick);
-}
+
 
 
 /************************************************************ PUTTING IT ALL TOGETHER ************************************************************/

frontend/src/metabase/visualizations/lib/apply_tooltips.js

@@ -6,10 +6,11 @@ import d3 from "d3";
 import { formatValue } from "metabase/lib/formatting";
 import type { ClickObject } from "metabase/meta/types/Visualization"
 
+import { isNormalized, isStacked } from "./renderer_utils";
 import { determineSeriesIndexFromElement } from "./tooltip";
 import { getFriendlyName } from "./utils";
 
-export function applyChartTooltips(chart, series, isStacked, isNormalized, isScalarSeries, onHoverChange, onVisualizationClick) {
+function applyChartTooltips(chart, series, isStacked, isNormalized, isScalarSeries, onHoverChange, onVisualizationClick) {
     let [{ data: { cols } }] = series;
     chart.on("renderlet.tooltips", function(chart) {
         chart.selectAll("title").remove();
@@ -163,3 +164,17 @@ export function applyChartTooltips(chart, series, isStacked, isNormalized, isSca
         }
     });
 }
+
+
+export function setupTooltips({ settings, series, isScalarSeries, onHoverChange, onVisualizationClick }, datas, parent, { isBrushing }) {
+    applyChartTooltips(parent, series, isStacked(settings, datas), isNormalized(settings, datas), isScalarSeries, (hovered) => {
+        // disable tooltips while brushing
+        if (onHoverChange && !isBrushing()) {
+            // disable tooltips on lines
+            if (hovered && hovered.element && hovered.element.classList.contains("line")) {
+                delete hovered.element;
+            }
+            onHoverChange(hovered);
+        }
+    }, onVisualizationClick);
+}