From 6e31cc3919dc84d539a38fdf1e8eef42dc729452 Mon Sep 17 00:00:00 2001 From: Belyakin Alexander Date: Thu, 29 Jan 2026 12:12:06 +0300 Subject: [PATCH 1/2] get area opacity from theme Signed-off-by: Belyakin Alexander --- statchart/src/StatChartBase.tsx | 2 +- statchart/src/utils/data-transform.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/statchart/src/StatChartBase.tsx b/statchart/src/StatChartBase.tsx index 57efc90f..e1e3d4ae 100644 --- a/statchart/src/StatChartBase.tsx +++ b/statchart/src/StatChartBase.tsx @@ -125,7 +125,7 @@ export const StatChartBase: FC = (props) => { const clonedSparkLine = { ...sparkline }; if (colorMode === 'background_solid') { - clonedSparkLine.areaStyle = { color: WHITE_COLOR_CODE, opacity: 0.4 }; + clonedSparkLine.areaStyle = { color: WHITE_COLOR_CODE, opacity: chartsTheme.sparkline.areaOpacity }; clonedSparkLine.lineStyle = { color: WHITE_COLOR_CODE, opacity: 1 }; } diff --git a/statchart/src/utils/data-transform.ts b/statchart/src/utils/data-transform.ts index 1f1862e2..19d6902b 100644 --- a/statchart/src/utils/data-transform.ts +++ b/statchart/src/utils/data-transform.ts @@ -30,7 +30,7 @@ export function convertSparkline( }, areaStyle: { color, - opacity: 0.4, + opacity: chartsTheme.sparkline.areaOpacity, }, }; } From 92bf0c5759a9c8db8f6781f63f67f326813b8ee0 Mon Sep 17 00:00:00 2001 From: Belyakin Alexander Date: Thu, 29 Jan 2026 16:48:14 +0300 Subject: [PATCH 2/2] add areaOpacity to sparkline options Signed-off-by: Belyakin Alexander --- statchart/src/stat-chart-model.ts | 1 + statchart/src/utils/data-transform.test.ts | 2 ++ statchart/src/utils/data-transform.ts | 2 +- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/statchart/src/stat-chart-model.ts b/statchart/src/stat-chart-model.ts index a44d20bd..018e0cca 100644 --- a/statchart/src/stat-chart-model.ts +++ b/statchart/src/stat-chart-model.ts @@ -64,6 +64,7 @@ export interface StatChartOptions { export interface StatChartSparklineOptions { color?: string; width?: number; + areaOpacity?: number; } export type StatChartOptionsEditorProps = OptionsEditorProps; diff --git a/statchart/src/utils/data-transform.test.ts b/statchart/src/utils/data-transform.test.ts index e3a6f94b..1042f525 100644 --- a/statchart/src/utils/data-transform.test.ts +++ b/statchart/src/utils/data-transform.test.ts @@ -67,6 +67,7 @@ describe('getStatChartColor', () => { describe('convertSparkline', () => { const sparkline: StatChartSparklineOptions = { color: 'purple', + areaOpacity: 0.2, }; it('should render charts theme default threshold color', () => { @@ -81,6 +82,7 @@ describe('convertSparkline', () => { const options = convertSparkline(testChartsTheme, defaultColor, sparkline) as LineSeriesOption; expect(options.lineStyle?.color).toEqual(defaultColor); expect(options.areaStyle?.color).toEqual(defaultColor); + expect(options.areaStyle?.opacity).toEqual(0.2); }); it('should render orange if value meets the threshold', () => { diff --git a/statchart/src/utils/data-transform.ts b/statchart/src/utils/data-transform.ts index 19d6902b..ecb70e5f 100644 --- a/statchart/src/utils/data-transform.ts +++ b/statchart/src/utils/data-transform.ts @@ -30,7 +30,7 @@ export function convertSparkline( }, areaStyle: { color, - opacity: chartsTheme.sparkline.areaOpacity, + opacity: sparkline.areaOpacity ?? chartsTheme.sparkline.areaOpacity, }, }; }