design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(chart): align ECharts components with theme tokens and load the full ECharts ESM bundle

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-04 11:25:19 +00:00
parent ff32470d8a
commit 3505c390d8
8 changed files with 69 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
version: '3.55.3',
version: '3.55.4',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
}

12
ts_web/elements/00group-chart/dees-chart-bar/component.ts
View File

@@ -8,7 +8,7 @@ import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
import { demoFunc } from './demo.js';
import { barStyles } from './styles.js';
import { renderChartBar } from './template.js';
import { getEchartsSeriesColors } from '../dees-chart-echarts-theme.js';
import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
export interface IBarSeriesItem {
name: string;
@@ -66,25 +66,25 @@ export class DeesChartBar extends DeesChartEchartsBase {
}
protected buildOption(): Record<string, any> {
const colors = getThemeColors(this.goBright);
const seriesColors = getEchartsSeriesColors(this.goBright);
const isDark = !this.goBright;
const formatter = this.valueFormatter;
const categoryAxis: Record<string, any> = {
type: 'category',
data: this.categories,
axisLine: { lineStyle: { color: isDark ? 'hsl(0 0% 20%)' : 'hsl(0 0% 85%)' } },
axisLabel: { color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 40%)' },
axisLine: { lineStyle: { color: colors.borderStrong } },
axisLabel: { color: colors.textMuted },
};
const valueAxis: Record<string, any> = {
type: 'value',
axisLine: { show: false },
axisLabel: {
color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 40%)',
color: colors.textMuted,
formatter: (val: number) => formatter(val),
},
splitLine: { lineStyle: { color: isDark ? 'hsl(0 0% 14%)' : 'hsl(0 0% 92%)' } },
splitLine: { lineStyle: { color: colors.borderSubtle } },
};
const seriesData = this.series.map((s, index) => ({

5
ts_web/elements/00group-chart/dees-chart-donut/component.ts
View File

@@ -8,7 +8,7 @@ import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
import { demoFunc } from './demo.js';
import { donutStyles } from './styles.js';
import { renderChartDonut } from './template.js';
import { getEchartsSeriesColors } from '../dees-chart-echarts-theme.js';
import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
export interface IDonutDataItem {
name: string;
@@ -62,6 +62,7 @@ export class DeesChartDonut extends DeesChartEchartsBase {
}
protected buildOption(): Record<string, any> {
const colors = getThemeColors(this.goBright);
const seriesColors = getEchartsSeriesColors(this.goBright);
const data = this.data.map((item, index) => ({
name: item.name,
@@ -108,6 +109,8 @@ export class DeesChartDonut extends DeesChartEchartsBase {
show: true,
formatter: '{b}: {d}%',
fontSize: 11,
color: colors.textSecondary,
textBorderColor: 'transparent',
}
: { show: false },
emphasis: {

55
ts_web/elements/00group-chart/dees-chart-echarts-theme.ts
View File

@@ -1,24 +1,33 @@
/**
* Shared theme utilities for ECharts-based chart components.
* Provides color palettes and option fragments that match the dees-catalog design tokens.
* Uses the centralized themeDefaults tokens so chart colors stay in sync
* with the rest of the dees-catalog design system.
*
* ECharts renders on <canvas> and cannot read CSS custom properties,
* so we reference the TypeScript source-of-truth (themeDefaults) directly.
*/
import { themeDefaults } from '../00theme.js';
const light = themeDefaults.colors.light;
const dark = themeDefaults.colors.dark;
const SERIES_COLORS = {
dark: [
'hsl(217.2 91.2% 59.8%)', // blue
'hsl(173.4 80.4% 40%)', // teal
'hsl(280.3 87.4% 66.7%)', // purple
'hsl(24.6 95% 53.1%)', // orange
'hsl(142 76% 36%)', // green
'hsl(346 77% 49%)', // rose
dark.accentPrimary, // blue
'hsl(173.4 80.4% 40%)', // teal (no token yet)
'hsl(280.3 87.4% 66.7%)', // purple (no token yet)
dark.accentWarning, // orange/amber
dark.accentSuccess, // green
dark.accentError, // rose/red
],
light: [
'hsl(222.2 47.4% 51.2%)',
'hsl(142.1 76.2% 36.3%)',
'hsl(280.3 47.7% 50.2%)',
'hsl(20.5 90.2% 48.2%)',
'hsl(160 60% 45%)',
'hsl(340 65% 47%)',
light.accentPrimary,
'hsl(142.1 76.2% 36.3%)', // teal (no token yet)
'hsl(280.3 47.7% 50.2%)', // purple (no token yet)
light.accentWarning,
light.accentSuccess,
light.accentError,
],
};
@@ -27,29 +36,37 @@ export function getEchartsSeriesColors(goBright: boolean): string[] {
}
export function getEchartsThemeOptions(goBright: boolean): Record<string, any> {
const isDark = !goBright;
const colors = goBright ? light : dark;
return {
backgroundColor: 'transparent',
textStyle: {
color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)',
color: colors.textSecondary,
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
fontSize: 12,
},
color: goBright ? SERIES_COLORS.light : SERIES_COLORS.dark,
tooltip: {
backgroundColor: isDark ? 'hsl(0 0% 9%)' : 'hsl(0 0% 100%)',
borderColor: isDark ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 89.8%)',
backgroundColor: colors.bgPrimary,
borderColor: colors.borderDefault,
textStyle: {
color: isDark ? 'hsl(0 0% 95%)' : 'hsl(0 0% 9%)',
color: colors.textPrimary,
fontSize: 12,
},
confine: true,
},
legend: {
textStyle: {
color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)',
color: colors.textSecondary,
fontSize: 12,
},
},
};
}
/**
* Helper to get the resolved theme colors object for use in buildOption().
* Components can use this instead of hardcoding dark/light color values.
*/
export function getThemeColors(goBright: boolean) {
return goBright ? light : dark;
}

12
ts_web/elements/00group-chart/dees-chart-gauge/component.ts
View File

@@ -8,7 +8,7 @@ import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
import { demoFunc } from './demo.js';
import { gaugeStyles } from './styles.js';
import { renderChartGauge } from './template.js';
import { getEchartsSeriesColors } from '../dees-chart-echarts-theme.js';
import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
export interface IGaugeThreshold {
value: number;
@@ -66,7 +66,7 @@ export class DeesChartGauge extends DeesChartEchartsBase {
}
protected buildOption(): Record<string, any> {
const isDark = !this.goBright;
const colors = getThemeColors(this.goBright);
const seriesColors = getEchartsSeriesColors(this.goBright);
const primaryColor = seriesColors[0];
@@ -119,7 +119,7 @@ export class DeesChartGauge extends DeesChartEchartsBase {
distance: -20,
length: 6,
lineStyle: {
color: isDark ? 'hsl(0 0% 30%)' : 'hsl(0 0% 75%)',
color: colors.borderStrong,
width: 1,
},
},
@@ -128,14 +128,14 @@ export class DeesChartGauge extends DeesChartEchartsBase {
distance: -24,
length: 10,
lineStyle: {
color: isDark ? 'hsl(0 0% 40%)' : 'hsl(0 0% 60%)',
color: colors.textMuted,
width: 2,
},
},
axisLabel: {
show: this.showTicks,
distance: 30,
color: isDark ? 'hsl(0 0% 50%)' : 'hsl(0 0% 45%)',
color: colors.textMuted,
fontSize: 11,
},
detail: {
@@ -143,7 +143,7 @@ export class DeesChartGauge extends DeesChartEchartsBase {
fontSize: 28,
fontWeight: 600,
offsetCenter: [0, '65%'],
color: isDark ? 'hsl(0 0% 90%)' : 'hsl(0 0% 15%)',
color: colors.textPrimary,
formatter: `{value}${this.unit}`,
},
title: {

14
ts_web/elements/00group-chart/dees-chart-radar/component.ts
View File

@@ -8,7 +8,7 @@ import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
import { demoFunc } from './demo.js';
import { radarStyles } from './styles.js';
import { renderChartRadar } from './template.js';
import { getEchartsSeriesColors } from '../dees-chart-echarts-theme.js';
import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
export interface IRadarIndicator {
name: string;
@@ -64,7 +64,7 @@ export class DeesChartRadar extends DeesChartEchartsBase {
}
protected buildOption(): Record<string, any> {
const isDark = !this.goBright;
const colors = getThemeColors(this.goBright);
const seriesColors = getEchartsSeriesColors(this.goBright);
const seriesData = this.series.map((s, index) => {
@@ -95,24 +95,22 @@ export class DeesChartRadar extends DeesChartEchartsBase {
shape: 'polygon',
splitNumber: 4,
axisName: {
color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 35%)',
color: colors.textSecondary,
fontSize: 11,
},
splitArea: {
areaStyle: {
color: isDark
? ['hsl(0 0% 7%)', 'hsl(0 0% 9%)']
: ['hsl(0 0% 97%)', 'hsl(0 0% 95%)'],
color: [colors.bgTertiary, colors.bgSecondary],
},
},
splitLine: {
lineStyle: {
color: isDark ? 'hsl(0 0% 16%)' : 'hsl(0 0% 88%)',
color: colors.borderDefault,
},
},
axisLine: {
lineStyle: {
color: isDark ? 'hsl(0 0% 16%)' : 'hsl(0 0% 88%)',
color: colors.borderDefault,
},
},
},

4
ts_web/services/DeesServiceLibLoader.ts
View File

@@ -334,7 +334,9 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
}
this.echartsLoadingPromise = (async () => {
const url = `${CDN_BASE}/echarts@${CDN_VERSIONS.echarts}/+esm`;
// Use the pre-built ESM bundle which includes all chart types and components.
// The +esm wrapper only exports the core without auto-registered chart types.
const url = `${CDN_BASE}/echarts@${CDN_VERSIONS.echarts}/dist/echarts.esm.min.js`;
const module = await import(/* @vite-ignore */ url);
this.echartsLib = {