From d42829d6ec5891c3481053e7fc78c5c1f8179efd Mon Sep 17 00:00:00 2001 From: Yanpeng Wang Date: Wed, 7 Jan 2026 20:42:34 +0800 Subject: [PATCH] fix(workspace): Add missing d3fc CSS variables for chart plugins Fixes #3101 Chart plugins (Y Line, Y Bar, Y Area, etc.) crash in perspective-workspace with error 'Cannot read properties of null (reading opacity)'. Root cause: workspace theme files were missing the d3fc CSS variable definitions (@include perspective-viewer-pro--d3fc mixin), causing --d3fc-series and related variables to be undefined. Changes: - Add @include perspective-viewer-pro--d3fc to pro.less - Add @include perspective-viewer-pro-dark--d3fc to pro-dark.less - Add defensive null check in getOpacityFromColor() as additional protection Signed-off-by: Yanpeng Wang --- packages/viewer-d3fc/src/ts/series/colorStyles.ts | 6 +++++- packages/workspace/src/themes/pro-dark.less | 1 + packages/workspace/src/themes/pro.less | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/viewer-d3fc/src/ts/series/colorStyles.ts b/packages/viewer-d3fc/src/ts/series/colorStyles.ts index 55b4fc3752..00955e4798 100644 --- a/packages/viewer-d3fc/src/ts/series/colorStyles.ts +++ b/packages/viewer-d3fc/src/ts/series/colorStyles.ts @@ -60,7 +60,11 @@ export const initialiseStyles = ( }; const getOpacityFromColor = (color) => { - return d3.color(color).opacity; + if (!color) { + return 1.0; // Default to fully opaque when color is undefined + } + const parsed = d3.color(color); + return parsed ? parsed.opacity : 1.0; }; const stepAsColor = (value, opacity) => { diff --git a/packages/workspace/src/themes/pro-dark.less b/packages/workspace/src/themes/pro-dark.less index 9ecdeb9feb..c3b7144456 100644 --- a/packages/workspace/src/themes/pro-dark.less +++ b/packages/workspace/src/themes/pro-dark.less @@ -39,6 +39,7 @@ perspective-workspace perspective-viewer[settings] { perspective-workspace { @include perspective-workspace-pro-base; @include perspective-viewer-pro-dark--colors; + @include perspective-viewer-pro-dark--d3fc; // Fix: Add d3fc CSS variables for chart plugins background-color: #000202; color: white; diff --git a/packages/workspace/src/themes/pro.less b/packages/workspace/src/themes/pro.less index 45d86a1bc0..21b9fa7e26 100644 --- a/packages/workspace/src/themes/pro.less +++ b/packages/workspace/src/themes/pro.less @@ -21,6 +21,7 @@ perspective-indicator[theme="Pro Light"] { perspective-workspace { @include perspective-workspace-pro-base; @include perspective-viewer-pro--colors; + @include perspective-viewer-pro--d3fc; // Fix: Add d3fc CSS variables for chart plugins background-color: #dadada; }