feat: Chinese chart labels + matching Ant Design icons

All 17 chart types now show Chinese names (柱状图, 折线图, 饼图, etc.)
and use specific Ant Design icons instead of generic BarChartOutlined.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hailin 2026-04-05 02:11:46 -07:00
parent fe6cf014dc
commit e8f2554aa8
2 changed files with 66 additions and 35 deletions

View File

@ -29,136 +29,136 @@ export interface ChartTypeMeta {
export const CHART_TYPE_META: Record<ChartType, ChartTypeMeta> = {
kpi: {
type: 'kpi',
label: 'KPI Card',
icon: 'kpi',
label: '指标卡',
icon: 'dashboard',
category: 'basic',
requiredBindings: ['value'],
optionalBindings: ['label'],
},
bar: {
type: 'bar',
label: 'Bar Chart',
icon: 'bar',
label: '柱状图',
icon: 'bar-chart',
category: 'basic',
requiredBindings: ['x', 'y'],
optionalBindings: ['color', 'label'],
},
'grouped-bar': {
type: 'grouped-bar',
label: 'Grouped Bar Chart',
icon: 'grouped-bar',
label: '分组柱状图',
icon: 'bar-chart',
category: 'basic',
requiredBindings: ['x', 'y', 'series'],
optionalBindings: ['color', 'label'],
},
'stacked-bar': {
type: 'stacked-bar',
label: 'Stacked Bar Chart',
icon: 'stacked-bar',
label: '堆叠柱状图',
icon: 'bar-chart',
category: 'composition',
requiredBindings: ['x', 'y', 'series'],
optionalBindings: ['color', 'label'],
},
'horizontal-bar': {
type: 'horizontal-bar',
label: 'Horizontal Bar Chart',
icon: 'horizontal-bar',
label: '条形图',
icon: 'bar-chart',
category: 'basic',
requiredBindings: ['x', 'y'],
optionalBindings: ['color', 'label'],
},
line: {
type: 'line',
label: 'Line Chart',
icon: 'line',
label: '折线图',
icon: 'line-chart',
category: 'basic',
requiredBindings: ['x', 'y'],
optionalBindings: ['series', 'color', 'label'],
},
area: {
type: 'area',
label: 'Area Chart',
icon: 'area',
label: '面积图',
icon: 'area-chart',
category: 'basic',
requiredBindings: ['x', 'y'],
optionalBindings: ['series', 'color', 'label'],
},
pie: {
type: 'pie',
label: 'Pie Chart',
icon: 'pie',
label: '饼图',
icon: 'pie-chart',
category: 'composition',
requiredBindings: ['label', 'value'],
optionalBindings: ['color'],
},
donut: {
type: 'donut',
label: 'Donut Chart',
icon: 'donut',
label: '环形图',
icon: 'pie-chart',
category: 'composition',
requiredBindings: ['label', 'value'],
optionalBindings: ['color'],
},
scatter: {
type: 'scatter',
label: 'Scatter Plot',
icon: 'scatter',
label: '散点图',
icon: 'dot-chart',
category: 'relationship',
requiredBindings: ['x', 'y'],
optionalBindings: ['size', 'color', 'label'],
},
radar: {
type: 'radar',
label: 'Radar Chart',
icon: 'radar',
label: '雷达图',
icon: 'radar-chart',
category: 'statistical',
requiredBindings: ['label', 'value'],
optionalBindings: ['series', 'color'],
},
wordcloud: {
type: 'wordcloud',
label: 'Word Cloud',
icon: 'wordcloud',
label: '词云图',
icon: 'cloud',
category: 'other',
requiredBindings: ['label', 'value'],
optionalBindings: ['color'],
},
'boston-matrix': {
type: 'boston-matrix',
label: 'Boston Matrix',
icon: 'boston-matrix',
label: '波士顿矩阵',
icon: 'block',
category: 'relationship',
requiredBindings: ['x', 'y'],
optionalBindings: ['size', 'label', 'color'],
},
heatmap: {
type: 'heatmap',
label: 'Heatmap',
icon: 'heatmap',
label: '热力图',
icon: 'heat-map',
category: 'statistical',
requiredBindings: ['x', 'y', 'value'],
optionalBindings: ['color'],
},
map: {
type: 'map',
label: 'Map',
icon: 'map',
label: '地图',
icon: 'global',
category: 'geo',
requiredBindings: ['geo', 'value'],
optionalBindings: ['color', 'label'],
},
combo: {
type: 'combo',
label: 'Combo Chart',
icon: 'combo',
label: '组合图',
icon: 'stock',
category: 'statistical',
requiredBindings: ['x', 'y'],
optionalBindings: ['series', 'color', 'label'],
},
'data-table': {
type: 'data-table',
label: 'Data Table',
icon: 'data-table',
label: '数据表格',
icon: 'table',
category: 'other',
requiredBindings: [],
optionalBindings: ['x', 'y', 'label', 'value'],

View File

@ -11,6 +11,17 @@ import {
GlobalOutlined,
QuestionOutlined,
BarChartOutlined,
LineChartOutlined,
PieChartOutlined,
DotChartOutlined,
RadarChartOutlined,
AreaChartOutlined,
HeatMapOutlined,
StockOutlined,
TableOutlined,
DashboardOutlined,
CloudOutlined,
BlockOutlined,
} from '@ant-design/icons';
import { useUIStore } from '@/adapters/state/zustand/uiStore';
import { useAppSelector, useAppDispatch } from '@/adapters/state/redux/store';
@ -164,6 +175,26 @@ function FieldsTab() {
);
}
const ICON_MAP: Record<string, React.ReactNode> = {
'dashboard': <DashboardOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
'bar-chart': <BarChartOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
'line-chart': <LineChartOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
'area-chart': <AreaChartOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
'pie-chart': <PieChartOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
'dot-chart': <DotChartOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
'radar-chart': <RadarChartOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
'heat-map': <HeatMapOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
'stock': <StockOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
'table': <TableOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
'cloud': <CloudOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
'block': <BlockOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
'global': <GlobalOutlined style={{ fontSize: 20, marginBottom: 4 }} />,
};
function ChartIcon({ icon }: { icon: string }) {
return <>{ICON_MAP[icon] ?? <BarChartOutlined style={{ fontSize: 20, marginBottom: 4 }} />}</>;
}
/** ChartsTab: chart type gallery grouped by category */
function ChartsTab() {
const { handleCreate, loading } = useCreateChart();
@ -207,7 +238,7 @@ function ChartsTab() {
bodyStyle={{ padding: '8px 4px' }}
onClick={() => !loading && handleCreate(meta.type)}
>
<BarChartOutlined style={{ fontSize: 20, marginBottom: 4 }} />
<ChartIcon icon={meta.icon} />
<div style={{ fontSize: 11, lineHeight: 1.3 }}>{meta.label}</div>
</Card>
))}