From 3891883d2644720697c37425804b5f88c2206a4f Mon Sep 17 00:00:00 2001 From: Elizabeth Thompson Date: Fri, 15 Nov 2024 17:32:54 -0800 Subject: [PATCH 1/2] adjust line type as well as weight for time series --- .../src/Timeseries/transformProps.ts | 19 ++++++++++++++----- .../src/Timeseries/transformers.ts | 10 +--------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index 5eb0bdd0a2bd2..cdbdc90ecec52 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -281,7 +281,7 @@ export default function transformProps( const array = ensureIsArray(chartProps.rawFormData?.time_compare); const inverted = invert(verboseMap); - const offsetLineWidths: { [key: string]: number } = {}; + const offsetLineWidths: string[] = []; rawSeries.forEach(entry => { const derivedSeries = isDerivedSeries(entry, chartProps.rawFormData); @@ -291,11 +291,20 @@ export default function transformProps( entry, ensureIsArray(chartProps.rawFormData?.time_compare), )!; - if (!offsetLineWidths[offset]) { - offsetLineWidths[offset] = Object.keys(offsetLineWidths).length + 1; + if (!offsetLineWidths.includes(offset)) { + offsetLineWidths.push(offset); + const position = offsetLineWidths.length; + if (position < 5) { + // increase the width of the line only up to 5 + // or it gets too thick and hard to distinguish + lineStyle.width = position; + lineStyle.type = 'dashed'; + } else { + // use a combination of dash and dot for the line style + lineStyle.width = (position % 3) + 1; + lineStyle.type = [(position % 5) + 1, (position % 3) + 1]; + } } - lineStyle.type = 'dashed'; - lineStyle.width = offsetLineWidths[offset]; lineStyle.opacity = OpacityEnum.DerivedSeries; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index 30d2509e45067..cadf647484df5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -315,15 +315,7 @@ export function transformSeries( opacity: opacity * areaOpacity, } : undefined, - emphasis: { - // bold on hover as required since 5.3.0 to retain backwards feature parity: - // https://apache.github.io/echarts-handbook/en/basics/release-note/5-3-0/#removing-the-default-bolding-emphasis-effect-in-the-line-chart - // TODO: should consider only adding emphasis to currently hovered series - lineStyle: { - width: 'bolder', - }, - ...emphasis, - }, + emphasis, showSymbol, symbolSize: markerSize, label: { From 82603e64c7508e2e4990612be4c5125950016a09 Mon Sep 17 00:00:00 2001 From: Elizabeth Thompson Date: Fri, 17 Jan 2025 16:39:56 -0800 Subject: [PATCH 2/2] reduce line widths --- .../src/Timeseries/transformProps.ts | 24 ++++--------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index cdbdc90ecec52..10f57fb8d87d9 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -45,7 +45,6 @@ import { extractExtraMetrics, getOriginalSeries, isDerivedSeries, - getTimeOffset, } from '@superset-ui/chart-controls'; import type { EChartsCoreOption } from 'echarts/core'; import type { LineStyleOption } from 'echarts/types/src/util/types'; @@ -281,30 +280,15 @@ export default function transformProps( const array = ensureIsArray(chartProps.rawFormData?.time_compare); const inverted = invert(verboseMap); - const offsetLineWidths: string[] = []; + let patternIncrement = 0; rawSeries.forEach(entry => { const derivedSeries = isDerivedSeries(entry, chartProps.rawFormData); const lineStyle: LineStyleOption = {}; if (derivedSeries) { - const offset = getTimeOffset( - entry, - ensureIsArray(chartProps.rawFormData?.time_compare), - )!; - if (!offsetLineWidths.includes(offset)) { - offsetLineWidths.push(offset); - const position = offsetLineWidths.length; - if (position < 5) { - // increase the width of the line only up to 5 - // or it gets too thick and hard to distinguish - lineStyle.width = position; - lineStyle.type = 'dashed'; - } else { - // use a combination of dash and dot for the line style - lineStyle.width = (position % 3) + 1; - lineStyle.type = [(position % 5) + 1, (position % 3) + 1]; - } - } + patternIncrement += 1; + // use a combination of dash and dot for the line style + lineStyle.type = [(patternIncrement % 5) + 1, (patternIncrement % 3) + 1]; lineStyle.opacity = OpacityEnum.DerivedSeries; }