mini-starter/mini-ui-packages/mini-charts/src/components/ColumnChart.tsx

import React from 'react';
import { BaseChart } from './BaseChart';
import type { ChartsConfig } from '../lib/u-charts-original';

/**
 * ColumnChart 组件的 Props 接口
 * 使用原始 u-charts.js + Canvas 2D API
 */
export interface ColumnChartProps {
  /** Canvas 元素的 ID，必须唯一 */
  canvasId: string;
  /** 图表宽度（像素） */
  width?: number;
  /** 图表高度（像素） */
  height?: number;
  /** X 轴分类数据 */
  categories: string[];
  /** 系列数据 */
  series: ChartsConfig['series'];
  /** 额外的图表配置 */
  config?: Partial<ChartsConfig>;
}

/**
 * ColumnChart 柱状图组件
 *
 * 使用原始 u-charts.js + Canvas 2D API
 */
export const ColumnChart: React.FC<ColumnChartProps> = (props) => {
  const {
    canvasId,
    width,
    height,
    categories,
    series,
    config = {},
  } = props;

  /**
   * 合并默认配置
   */
  const mergedConfig: Partial<ChartsConfig> = {
    animation: true,
    background: '#FFFFFF',
    color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444'],
    padding: [15, 15, 0, 5],
    enableScroll: false,
    legend: {},
    xAxis: {
      disableGrid: true,
      ...config.xAxis,
    },
    yAxis: {
      data: [{ min: 0 }],
      ...config.yAxis,
    },
    extra: {
      column: {
        type: 'group',
        width: 30,
        activeBgColor: '#000000',
        activeBgOpacity: 0.08,
        ...config.extra?.column,
      }
    },
    ...config,
  };

  return (
    <BaseChart
      canvasId={canvasId}
      width={width}
      height={height}
      type="column"
      categories={categories}
      series={series}
      config={mergedConfig}
    />
  );
};

export default ColumnChart;