@agions/taroviz 1.11.1 → 2.0.3

package/src/themes/registry.ts

@@ -0,0 +1,184 @@
+/**
+ * TaroViz 主题注册表 - 管理主题注册、查询和切换
+ */
+
+import type { ThemeOptions } from './types';
+import { defaultTheme } from './palettes/default';
+import { darkTheme } from './palettes/dark';
+import { neonTheme } from './palettes/neon';
+import { glassTheme } from './palettes/glass';
+import { pastelTheme } from './palettes/pastel';
+import { sunsetTheme } from './palettes/sunset';
+import { oceanTheme } from './palettes/ocean';
+import { cyberTheme } from './palettes/cyber';
+import { retroTheme } from './palettes/retro';
+import { elegantTheme } from './palettes/elegant';
+import { waldenTheme } from './palettes/walden';
+import { chalkTheme } from './palettes/chalk';
+import { purplePassionTheme } from './palettes/purple-passion';
+import { blueGreenTheme } from './palettes/blue-green';
+import { goldenTheme } from './palettes/golden';
+import { forestTheme } from './palettes/forest';
+
+// ============================================================================
+// 主题注册表
+// ============================================================================
+
+const themeRegistry = new Map<string, ThemeOptions>();
+
+// ============================================================================
+// 内置主题集合
+// ============================================================================
+
+const builtinThemes: Record<string, ThemeOptions> = {
+  default: defaultTheme,
+  dark: darkTheme,
+  walden: waldenTheme,
+  chalk: chalkTheme,
+  'purple-passion': purplePassionTheme,
+  'blue-green': blueGreenTheme,
+  golden: goldenTheme,
+  forest: forestTheme,
+  neon: neonTheme,
+  glass: glassTheme,
+  pastel: pastelTheme,
+  sunset: sunsetTheme,
+  ocean: oceanTheme,
+  cyber: cyberTheme,
+  retro: retroTheme,
+  elegant: elegantTheme,
+};
+
+// 注册所有内置主题
+Object.entries(builtinThemes).forEach(([name, theme]) => {
+  themeRegistry.set(name, theme as ThemeOptions);
+});
+
+// ============================================================================
+// 主题管理函数
+// ============================================================================
+
+/**
+ * 获取主题配置
+ * @param options 自定义选项
+ * @returns 合并后的主题配置
+ */
+export function getTheme(options?: Partial<ThemeOptions>): ThemeOptions {
+  if (!options) {
+    return defaultTheme;
+  }
+
+  let baseTheme: ThemeOptions;
+  if (options.theme && typeof options.theme === 'string') {
+    const registeredTheme = themeRegistry.get(options.theme);
+    if (registeredTheme) {
+      baseTheme = registeredTheme;
+    } else {
+      baseTheme = options.darkMode ? darkTheme : defaultTheme;
+    }
+  } else {
+    baseTheme = options.darkMode ? darkTheme : defaultTheme;
+  }
+
+  return { ...baseTheme, ...options };
+}
+
+/**
+ * 注册主题
+ * @param name 主题名称
+ * @param theme 主题配置
+ */
+export function registerTheme(name: string, theme: ThemeOptions): void {
+  themeRegistry.set(name, { ...theme, name });
+}
+
+/**
+ * 获取已注册的主题列表
+ * @returns 主题列表
+ */
+export function getRegisteredThemes(): ThemeOptions[] {
+  return Array.from(themeRegistry.values());
+}
+
+/**
+ * 获取指定主题
+ * @param name 主题名称
+ * @returns 主题配置
+ */
+export function getThemeByName(name: string): ThemeOptions | undefined {
+  return themeRegistry.get(name);
+}
+
+/**
+ * 删除主题
+ * @param name 主题名称
+ */
+export function unregisterTheme(name: string): void {
+  themeRegistry.delete(name);
+}
+
+/**
+ * 重置主题注册表（清除所有已注册的主题，恢复内置主题）
+ * 主要用于测试环境
+ */
+export function resetThemeRegistry(): void {
+  themeRegistry.clear();
+  // 重新注册所有内置主题
+  Object.entries(builtinThemes).forEach(([name, theme]) => {
+    themeRegistry.set(name, theme as ThemeOptions);
+  });
+}
+
+/**
+ * 动态切换主题
+ * @param theme 主题名称或主题配置
+ * @param callback 切换完成后的回调函数
+ * @returns 主题配置
+ */
+export function switchTheme(theme: string | ThemeOptions, callback?: () => void): ThemeOptions {
+  let themeConfig: ThemeOptions;
+
+  if (typeof theme === 'string') {
+    const registeredTheme = themeRegistry.get(theme);
+    themeConfig = registeredTheme || defaultTheme;
+  } else {
+    themeConfig = theme;
+    if (theme.name) {
+      registerTheme(theme.name, theme);
+    }
+  }
+
+  // 触发主题切换事件
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(new CustomEvent('themeChange', { detail: themeConfig }));
+  }
+
+  callback?.();
+
+  return themeConfig;
+}
+
+/**
+ * 根据标签获取主题
+ * @param tag 标签
+ * @returns 主题列表
+ */
+export function getThemesByTag(tag: string): ThemeOptions[] {
+  return getRegisteredThemes().filter((t) => t.tags?.includes(tag));
+}
+
+/**
+ * 获取浅色主题
+ * @returns 浅色主题列表
+ */
+export function getLightThemes(): ThemeOptions[] {
+  return getRegisteredThemes().filter((t) => !t.darkMode);
+}
+
+/**
+ * 获取深色主题
+ * @returns 深色主题列表
+ */
+export function getDarkThemes(): ThemeOptions[] {
+  return getRegisteredThemes().filter((t) => t.darkMode);
+}

package/src/themes/types.ts

@@ -0,0 +1,213 @@
+/**
+ * TaroViz 主题系统 - 类型定义
+ */
+
+/**
+ * 内置主题类型
+ */
+export type BuiltinTheme =
+  | 'default'
+  | 'light'
+  | 'dark'
+  | 'vintage'
+  | 'macarons'
+  | 'roma'
+  | 'shine'
+  | 'infographic'
+  | 'westeros'
+  | 'walden'
+  | 'chalk'
+  | 'purple-passion'
+  | 'blue-green'
+  | 'golden'
+  | 'forest'
+  // 新增主题
+  | 'neon'
+  | 'glass'
+  | 'pastel'
+  | 'sunset'
+  | 'ocean'
+  | 'cyber'
+  | 'retro'
+  | 'elegant';
+
+/**
+ * 主题模式
+ */
+export type ThemeMode = 'light' | 'dark' | 'auto';
+
+/**
+ * 主题渐变类型
+ */
+export interface ThemeGradient {
+  /** 渐变起始色 */
+  start: string;
+  /** 渐变结束色 */
+  end: string;
+  /** 渐变角度 */
+  angle?: number;
+}
+
+/**
+ * 主题效果配置
+ */
+export interface ThemeEffects {
+  /** 是否启用阴影 */
+  shadows?: boolean;
+  /** 阴影颜色 */
+  shadowColor?: string;
+  /** 是否启用渐变 */
+  gradients?: boolean;
+  /** 自定义渐变 */
+  customGradients?: ThemeGradient[];
+  /** 是否启用玻璃态 */
+  glassmorphism?: boolean;
+  /** 玻璃态模糊度 */
+  blur?: number;
+  /** 圆角风格 */
+  borderRadius?: 'none' | 'small' | 'medium' | 'large' | 'pill';
+}
+
+/**
+ * 主题配置选项
+ */
+export interface ThemeOptions {
+  /** 主题名称/键名 */
+  theme?: BuiltinTheme | Record<string, unknown>;
+
+  /** 是否启用深色模式 */
+  darkMode?: boolean;
+
+  /** 主题模式 */
+  mode?: ThemeMode;
+
+  /** 颜色列表 */
+  colors?: string[];
+
+  /** 背景色 */
+  backgroundColor?: string;
+
+  /** 背景渐变 */
+  backgroundGradient?: ThemeGradient;
+
+  /** 文本颜色 */
+  textColor?: string;
+
+  /** 次要文本颜色 */
+  textColorSecondary?: string;
+
+  /** 边框颜色 */
+  borderColor?: string;
+
+  /** 分割线颜色 */
+  dividerColor?: string;
+
+  /** 字体 */
+  fontFamily?: string;
+
+  /** 标题字体 */
+  fontFamilyTitle?: string;
+
+  /** 正文字体 */
+  fontFamilyBody?: string;
+
+  /** 主题名称(显示用) */
+  name?: string;
+
+  /** 主题描述 */
+  description?: string;
+
+  /** 主题作者 */
+  author?: string;
+
+  /** 主题版本 */
+  version?: string;
+
+  /** 主题类型 */
+  type?: ThemeMode;
+
+  /** 主题标签 */
+  tags?: string[];
+
+  /** 效果配置 */
+  effects?: ThemeEffects;
+
+  /** 图表特定配置 */
+  chart?: ChartThemeConfig;
+}
+
+/**
+ * 图表主题配置
+ */
+export interface ChartThemeConfig {
+  /** 图例配置 */
+  legend?: LegendThemeConfig;
+  /** 坐标轴配置 */
+  axis?: AxisThemeConfig;
+  /** 提示框配置 */
+  tooltip?: TooltipThemeConfig;
+  /** 标题配置 */
+  title?: TitleThemeConfig;
+  /** 网格配置 */
+  grid?: GridThemeConfig;
+  /** 数据区域缩放配置 */
+  dataZoom?: DataZoomThemeConfig;
+  /** 时间线配置 */
+  timeline?: TimelineThemeConfig;
+}
+
+/** 图例主题配置 */
+export interface LegendThemeConfig {
+  textColor?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  borderRadius?: number | number[];
+  padding?: number | number[];
+}
+
+/** 坐标轴主题配置 */
+export interface AxisThemeConfig {
+  textColor?: string;
+  lineColor?: string;
+  tickColor?: string;
+  splitLineColor?: string;
+  splitAreaColor?: string;
+}
+
+/** 提示框主题配置 */
+export interface TooltipThemeConfig {
+  textColor?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  borderRadius?: number;
+  shadowColor?: string;
+}
+
+/** 标题主题配置 */
+export interface TitleThemeConfig {
+  textColor?: string;
+  subTextColor?: string;
+}
+
+/** 网格主题配置 */
+export interface GridThemeConfig {
+  backgroundColor?: string;
+  borderColor?: string;
+}
+
+/** 数据区域缩放主题配置 */
+export interface DataZoomThemeConfig {
+  backgroundColor?: string;
+  fillerColor?: string;
+  borderColor?: string;
+  textColor?: string;
+}
+
+/** 时间线主题配置 */
+export interface TimelineThemeConfig {
+  backgroundColor?: string;
+  borderColor?: string;
+  textColor?: string;
+  lineColor?: string;
+  controlColor?: string;
+}

package/src/charts/bar/__tests__/index.test.tsx

@@ -1,113 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import BarChart from '../index';
-
-// Mock ECharts and adapters
-jest.mock('echarts/core', () => ({
-  use: jest.fn(),
-  init: jest.fn(() => ({
-    setOption: jest.fn(),
-    showLoading: jest.fn(),
-    hideLoading: jest.fn(),
-    on: jest.fn(),
-    off: jest.fn(),
-    dispose: jest.fn(),
-    resize: jest.fn(),
-  })),
-  getInstanceByDom: jest.fn(),
-}));
-
-// Mock specific ECharts chart imports
-jest.mock('echarts/charts', () => ({
-  BarChart: jest.fn(),
-}));
-
-jest.mock('echarts/components', () => ({
-  GridComponent: jest.fn(),
-  TooltipComponent: jest.fn(),
-  TitleComponent: jest.fn(),
-  LegendComponent: jest.fn(),
-}));
-
-jest.mock('../../common/BaseChartWrapper', () => ({
-  __esModule: true,
-  default: (props: any) => (
-    <div
-      data-testid="base-chart-wrapper"
-      className={`taroviz-${props.chartType} ${props.className || ''}`}
-      style={{ width: props.width, height: props.height }}
-    >
-      <div data-testid="chart-option">{JSON.stringify(props.option)}</div>
-    </div>
-  ),
-}));
-
-describe('BarChart Component', () => {
-  const mockOption = {
-    xAxis: {
-      type: 'category' as const,
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    },
-    yAxis: {
-      type: 'value' as const,
-    },
-    series: [
-      {
-        data: [150, 230, 224, 218, 135, 147, 260],
-        type: 'bar' as const,
-      },
-    ],
-  };
-
-  it('should render correctly with default props', () => {
-    const { getByTestId } = render(<BarChart option={mockOption} />);
-
-    const chartWrapper = getByTestId('base-chart-wrapper');
-    expect(chartWrapper).toBeInTheDocument();
-    expect(chartWrapper).toHaveClass('taroviz-bar-chart');
-  });
-
-  it('should pass the correct option to BaseChartWrapper', () => {
-    const { getByTestId } = render(<BarChart option={mockOption} />);
-
-    const chartOption = getByTestId('chart-option');
-    expect(JSON.parse(chartOption.textContent || '')).toEqual(mockOption);
-  });
-
-  it('should render with custom width and height', () => {
-    const customWidth = '600px';
-    const customHeight = '450px';
-
-    const { getByTestId } = render(
-      <BarChart option={mockOption} width={customWidth} height={customHeight} />
-    );
-
-    const chartWrapper = getByTestId('base-chart-wrapper');
-    expect(chartWrapper).toHaveStyle(`width: ${customWidth}`);
-    expect(chartWrapper).toHaveStyle(`height: ${customHeight}`);
-  });
-
-  it('should render with custom className', () => {
-    const customClass = 'custom-bar-chart';
-
-    const { getByTestId } = render(<BarChart option={mockOption} className={customClass} />);
-
-    const chartWrapper = getByTestId('base-chart-wrapper');
-    expect(chartWrapper).toHaveClass(customClass);
-  });
-
-  it('should render with loading state', () => {
-    const { getByTestId } = render(<BarChart option={mockOption} loading={true} />);
-
-    const chartWrapper = getByTestId('base-chart-wrapper');
-    expect(chartWrapper).toBeInTheDocument();
-  });
-
-  it('should render with svg renderer', () => {
-    const { getByTestId } = render(<BarChart option={mockOption} renderer="svg" />);
-
-    const chartWrapper = getByTestId('base-chart-wrapper');
-    expect(chartWrapper).toBeInTheDocument();
-  });
-});

package/src/charts/bar/index.tsx

@@ -1,14 +0,0 @@
-/**
- * BarChart组件
- */
-import React, { memo } from 'react';
-import BaseChartWrapper from '../common/BaseChartWrapper';
-import { BarChartProps } from '../types';
-import '@/core/echarts';
-
-const BarChart: React.FC<BarChartProps> = memo((props) => (
-  <BaseChartWrapper {...props} chartType="bar-chart" />
-));
-BarChart.displayName = 'BarChart';
-
-export default BarChart;

package/src/charts/candlestick/__tests__/index.test.tsx

@@ -1,40 +0,0 @@
-/**
- * @version v1.5.0
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-import CandlestickChart from '../index';
-
-describe('CandlestickChart', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<CandlestickChart />);
-    expect(container).toBeTruthy();
-  });
-
-  it('renders with custom width and height', () => {
-    const { container } = render(<CandlestickChart width={500} height={400} />);
-    // BaseChartWrapper renders a fragment with a hidden accessibility table (first child)
-    // and the actual chart div (last child), so we query the last child for styles
-    const chartDiv = container.lastChild;
-    expect(chartDiv).toHaveStyle({ width: '500px', height: '400px' });
-  });
-
-  it('renders with stock data', () => {
-    const option = {
-      xAxis: { data: ['2024-01', '2024-02', '2024-03'] },
-      series: [
-        {
-          type: 'candlestick' as const,
-          data: [
-            [20, 30, 15, 35], // [open, close, lowest, highest]
-            [25, 35, 20, 40],
-            [30, 25, 20, 35],
-          ],
-        },
-      ],
-    };
-    const { container } = render(<CandlestickChart option={option} />);
-    expect(container).toBeTruthy();
-  });
-});

package/src/charts/candlestick/index.tsx

@@ -1,13 +0,0 @@
-/**
- * CandlestickChart组件
- */
-import React, { memo } from 'react';
-import BaseChartWrapper from '../common/BaseChartWrapper';
-import { CandlestickChartProps } from '../types';
-
-const CandlestickChart: React.FC<CandlestickChartProps> = memo((props) => (
-  <BaseChartWrapper {...props} chartType="candlestick-chart" />
-));
-CandlestickChart.displayName = 'CandlestickChart';
-
-export default CandlestickChart;

package/src/charts/gauge/index.tsx

@@ -1,14 +0,0 @@
-/**
- * GaugeChart组件
- */
-import React, { memo } from 'react';
-import BaseChartWrapper from '../common/BaseChartWrapper';
-import { GaugeChartProps } from '../types';
-import '@/core/echarts';
-
-const GaugeChart: React.FC<GaugeChartProps> = memo((props) => (
-  <BaseChartWrapper {...props} chartType="gauge-chart" />
-));
-GaugeChart.displayName = 'GaugeChart';
-
-export default GaugeChart;

package/src/charts/line/__tests__/index.test.tsx

@@ -1,107 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import LineChart from '../index';
-
-// Mock ECharts and adapters
-jest.mock('echarts/core', () => ({
-  use: jest.fn(),
-  init: jest.fn(() => ({
-    setOption: jest.fn(),
-    showLoading: jest.fn(),
-    hideLoading: jest.fn(),
-    on: jest.fn(),
-    off: jest.fn(),
-    dispose: jest.fn(),
-    resize: jest.fn(),
-  })),
-  getInstanceByDom: jest.fn(),
-}));
-
-// Mock specific ECharts chart imports
-jest.mock('echarts/charts', () => ({
-  LineChart: jest.fn(),
-}));
-
-jest.mock('echarts/components', () => ({
-  GridComponent: jest.fn(),
-  TooltipComponent: jest.fn(),
-  TitleComponent: jest.fn(),
-  LegendComponent: jest.fn(),
-}));
-
-jest.mock('../../common/BaseChartWrapper', () => ({
-  __esModule: true,
-  default: (props: any) => (
-    <div
-      data-testid="base-chart-wrapper"
-      className={`taroviz-${props.chartType} ${props.className || ''}`}
-      style={{ width: props.width, height: props.height }}
-    >
-      <div data-testid="chart-option">{JSON.stringify(props.option)}</div>
-    </div>
-  ),
-}));
-
-describe('LineChart Component', () => {
-  const mockOption = {
-    xAxis: {
-      type: 'category' as const,
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    },
-    yAxis: {
-      type: 'value' as const,
-    },
-    series: [
-      {
-        data: [150, 230, 224, 218, 135, 147, 260],
-        type: 'line' as const,
-      },
-    ],
-  };
-
-  it('should render correctly with default props', () => {
-    const { getByTestId } = render(<LineChart option={mockOption} />);
-
-    const chartWrapper = getByTestId('base-chart-wrapper');
-    expect(chartWrapper).toBeInTheDocument();
-    expect(chartWrapper).toHaveClass('taroviz-line-chart');
-  });
-
-  it('should pass the correct option to BaseChartWrapper', () => {
-    const { getByTestId } = render(<LineChart option={mockOption} />);
-
-    const chartOption = getByTestId('chart-option');
-    expect(JSON.parse(chartOption.textContent || '')).toEqual(mockOption);
-  });
-
-  it('should render with custom width and height', () => {
-    const customWidth = '500px';
-    const customHeight = '400px';
-
-    const { getByTestId } = render(
-      <LineChart option={mockOption} width={customWidth} height={customHeight} />
-    );
-
-    const chartWrapper = getByTestId('base-chart-wrapper');
-    expect(chartWrapper).toHaveStyle(`width: ${customWidth}`);
-    expect(chartWrapper).toHaveStyle(`height: ${customHeight}`);
-  });
-
-  it('should render with custom className', () => {
-    const customClass = 'custom-line-chart';
-
-    const { getByTestId } = render(<LineChart option={mockOption} className={customClass} />);
-
-    const chartWrapper = getByTestId('base-chart-wrapper');
-    expect(chartWrapper).toHaveClass(customClass);
-  });
-
-  it('should render with loading state', () => {
-    const { getByTestId } = render(<LineChart option={mockOption} loading={true} />);
-
-    const chartWrapper = getByTestId('base-chart-wrapper');
-    expect(chartWrapper).toBeInTheDocument();
-    // The loading state is handled by BaseChartWrapper, which we've mocked
-  });
-});