Adjust line width based on spacing

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

@@ -87,15 +87,6 @@
   opacity: 1 !important;
 }
 
-.LineAreaBarChart .dc-chart .enable-dots .dc-tooltip .dot {
-  r: 3px !important;
-  fill: white;
-  stroke: currentColor;
-  stroke-width: 2;
-  fill-opacity: 1 !important;
-  stroke-opacity: 1 !important;
-}
-
 .LineAreaBarChart .dc-chart circle.bubble {
   fill-opacity: 0.8;
   stroke-width: 1;
@@ -107,16 +98,43 @@
   fill: currentColor;
 }
 
+/* line width = 2px (default) */
+.LineAreaBarChart .dc-chart .line {
+  stroke-width: 2px;
+}
+.LineAreaBarChart .dc-chart .dc-tooltip .dot {
+  r: 3px !important;
+  stroke-width: 2px;
+}
+
+/* line width = 3px */
+.LineAreaBarChart .dc-chart .line--medium .line {
+  stroke-width: 3px;
+}
+.LineAreaBarChart .dc-chart .line--medium .dc-tooltip .dot {
+  r: 3px !important;
+  stroke-width: 2px;
+}
+
+/* line width = 4px */
+.LineAreaBarChart .dc-chart .line--heavy .line {
+  stroke-width: 4px;
+}
+.LineAreaBarChart .dc-chart .line--heavy .dc-tooltip .dot {
+  r: 3.5px !important;
+  stroke-width: 3px;
+}
+
+.LineAreaBarChart .dc-chart .enable-dots .dc-tooltip .dot,
 .LineAreaBarChart .dc-chart .dc-tooltip .dot.selected,
 .LineAreaBarChart .dc-chart .enable-dots-onhover .dc-tooltip .dot:hover,
 .LineAreaBarChart .dc-chart .enable-dots-onhover .dc-tooltip .dot.hover {
-  r: 3px !important;
   fill: white;
   stroke: currentColor;
-  stroke-width: 2;
   fill-opacity: 1 !important;
   stroke-opacity: 1 !important;
 }
+
 .LineAreaBarChart .dc-chart .dc-tooltip .dot.deselected {
   opacity: 0;
 }

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

@@ -13,6 +13,34 @@ const X_LABEL_HIDE_THRESHOLD = 12; // tick width breakpoint for hiding labels en
 const X_LABEL_MAX_LABEL_HEIGHT_RATIO = 0.7; // percent rotated labels are allowed to take
 const X_LABEL_DISABLED_SPACING = 6; // spacing to use if the x-axis is disabled completely
 
+// +-------------------------------------------------------------------------------------------------------------------+
+// |                                                  HELPER FUNCTIONS                                                 |
+// +-------------------------------------------------------------------------------------------------------------------+
+
+// moves an element on top of all siblings
+function moveToTop(element) {
+  if (element) {
+    element.parentNode.appendChild(element);
+  }
+}
+
+// assumes elements are in order from left to right, skips those that aren't
+function getMinElementSpacing(elements) {
+  let min = null;
+  let lastLeft = null;
+  for (const element of elements) {
+    const { left } = element.getBoundingClientRect();
+    if (lastLeft !== null) {
+      const delta = left - lastLeft;
+      if (delta > 0 && (min == null || delta < min)) {
+        min = delta;
+      }
+    }
+    lastLeft = left;
+  }
+  return min;
+}
+
 // +-------------------------------------------------------------------------------------------------------------------+
 // |                                                ON RENDER FUNCTIONS                                                |
 // +-------------------------------------------------------------------------------------------------------------------+
@@ -26,12 +54,6 @@ function onRenderRemoveClipPath(chart) {
   }
 }
 
-function moveToTop(element) {
-  if (element) {
-    element.parentNode.appendChild(element);
-  }
-}
-
 function onRenderMoveContentToTop(chart) {
   for (let element of chart.selectAll(".sub, .chart-body")[0]) {
     // move chart content on top of axis (z-index doesn't work on SVG):
@@ -66,6 +88,15 @@ function onRenderSetDotStyle(chart) {
   }
 }
 
+function onRenderSetLineWidth(chart) {
+  const min = getMinElementSpacing(chart.svg().selectAll(".dot")[0]);
+  if (min > 150) {
+    chart.svg().classed("line--heavy", true);
+  } else if (min > 75) {
+    chart.svg().classed("line--medium", true);
+  }
+}
+
 const DOT_OVERLAP_COUNT_LIMIT = 8;
 const DOT_OVERLAP_RATIO = 0.1;
 const DOT_OVERLAP_DISTANCE = 8;
@@ -338,6 +369,7 @@ function onRender(chart, onGoalHover, isSplitAxis, isStacked) {
   onRenderMoveContentToTop(chart);
   onRenderReorderCharts(chart);
   onRenderSetDotStyle(chart);
+  onRenderSetLineWidth(chart);
   onRenderEnableDots(chart);
   onRenderVoronoiHover(chart);
   onRenderCleanupGoal(chart, onGoalHover, isSplitAxis); // do this before hiding x-axis