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

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

michaelsmolina pushed a commit to branch 6.1
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 6048e2f2e12293ae783a597f2d330d605d287303
Author: Gabriel Torres Ruiz <ga...@gmail.com>
AuthorDate: Thu Apr 16 18:51:36 2026 -0300

    fix(parallel-coordinates): improve dark mode visibility for labels, axis text, and data lines (#39415)
    
    (cherry picked from commit f850c6b1b1822f314f6842c7292224b4deb2c7cd)
---
 .../src/ParallelCoordinates.ts                     | 28 ++++++++++++++++++----
 .../src/ReactParallelCoordinates.tsx               |  4 ++++
 .../src/transformProps.ts                          | 10 ++++----
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.ts b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.ts
index 67ae1c2686c..844cd05ac06 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.ts
+++ b/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)
diff --git a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.tsx b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.tsx
index f5e8a5c8a9b..cf64d198650 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.tsx
+++ b/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;
diff --git a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/transformProps.ts b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/transformProps.ts
index afb4759bf88..94a065717ed 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/transformProps.ts
+++ b/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,
   };