fix(parallel-coordinates): improve dark mode visibility for labels, axis text, and data lines (#39415)

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.ts

@@ -47,7 +47,9 @@ interface ParallelCoordinatesProps {
   width: number;
   height: number;
   colorMetric: string;
+  defaultLineColor: string;
   includeSeries: boolean;
+  isDarkMode: boolean;
   linearColorScheme: string;
   metrics: string[];
   series: string;
@@ -63,7 +65,9 @@ function ParallelCoordinates(
     width,
     height,
     colorMetric,
+    defaultLineColor,
     includeSeries,
+    isDarkMode,
     linearColorScheme,
     metrics,
     series,
@@ -87,9 +91,25 @@ function ParallelCoordinates(
             (d: Record<string, unknown>) => d[colorMetric] as number,
           ),
         )
-    : () => 'grey';
-  const color = (d: Record<string, unknown>) =>
-    (colorScale as Function)(d[colorMetric]);
+    : null;
+
+  const brightenForDarkMode = (colorStr: string): string => {
+    const hsl = d3.hsl(colorStr);
+    if (hsl.l < 0.5) {
+      hsl.l = Math.min(1, hsl.l + 0.4);
+      return hsl.toString();
+    }
+    return colorStr;
+  };
+
+  const color = (d: Record<string, unknown>): string => {
+    if (!colorScale) {
+      return defaultLineColor;
+    }
+    const baseColor = (colorScale as Function)(d[colorMetric]) as string;
+    return isDarkMode ? brightenForDarkMode(baseColor) : baseColor;
+  };
+
   const container = d3
     .select(element)
     .classed('superset-legacy-chart-parallel-coordinates', true);
@@ -105,7 +125,7 @@ function ParallelCoordinates(
     .width(width)
     .color(color)
     .alpha(0.5)
-    .composite('darken')
+    .composite(isDarkMode ? 'screen' : 'darken')
     .height(effHeight)
     .data(data)
     .dimensions(cols)

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.tsx

@@ -64,6 +64,7 @@ export default styled(ParallelCoordinates)`
     .parcoords text.label {
       font: 100%;
       font-size: ${theme.fontSizeSM}px;
+      fill: ${theme.colorText};
       cursor: drag;
     }
     .parcoords rect.background {
@@ -85,6 +86,9 @@ export default styled(ParallelCoordinates)`
       stroke: ${theme.colorText};
       shape-rendering: crispEdges;
     }
+    .parcoords .axis text {
+      fill: ${theme.colorText};
+    }
     .parcoords canvas {
       opacity: 1;
       -moz-transition: opacity 0.3s;

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/transformProps.ts

@@ -17,9 +17,10 @@
  * under the License.
  */
 import { ChartProps } from '@superset-ui/core';
+import { isThemeDark } from '@apache-superset/core/theme';
 
 export default function transformProps(chartProps: ChartProps) {
-  const { width, height, formData, queriesData } = chartProps;
+  const { width, height, formData, queriesData, theme } = chartProps;
   const {
     includeSeries,
     linearColorScheme,
@@ -33,15 +34,14 @@ export default function transformProps(chartProps: ChartProps) {
     width,
     height,
     data: queriesData[0].data,
+    defaultLineColor: theme.colorTextTertiary,
     includeSeries,
+    isDarkMode: isThemeDark(theme),
     linearColorScheme,
     metrics: metrics.map((m: { label?: string } | string) =>
       typeof m === 'string' ? m : m.label || m,
     ),
-    colorMetric:
-      secondaryMetric && secondaryMetric.label
-        ? secondaryMetric.label
-        : secondaryMetric,
+    colorMetric: secondaryMetric?.label || secondaryMetric,
     series,
     showDatatable,
   };