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) => d[colorMetric] as number, ), ) - : () => 'grey'; - const color = (d: Record) => - (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 => { + 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, };