fix: wire chart creation onClick in LeftPanel chart gallery

Clicking a chart type card now calls useCreateChart to create
a chart instance on the backend and add it to the canvas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hailin 2026-04-05 01:39:18 -07:00
parent b222429475
commit 0c0592b511
1 changed files with 5 additions and 1 deletions

View File

@ -22,6 +22,7 @@ import {
type ChartTypeMeta, type ChartTypeMeta,
} from '@/domain/valueObjects/ChartType'; } from '@/domain/valueObjects/ChartType';
import { type FieldType } from '@/domain/valueObjects/FieldType'; import { type FieldType } from '@/domain/valueObjects/FieldType';
import { useCreateChart } from '@/frameworks/hooks/useCreateChart';
const FIELD_TYPE_ICON: Record<FieldType, React.ReactNode> = { const FIELD_TYPE_ICON: Record<FieldType, React.ReactNode> = {
number: <FieldNumberOutlined />, number: <FieldNumberOutlined />,
@ -165,6 +166,8 @@ function FieldsTab() {
/** ChartsTab: chart type gallery grouped by category */ /** ChartsTab: chart type gallery grouped by category */
function ChartsTab() { function ChartsTab() {
const { handleCreate, loading } = useCreateChart();
const grouped = useMemo(() => { const grouped = useMemo(() => {
const map: Record<string, ChartTypeMeta[]> = {}; const map: Record<string, ChartTypeMeta[]> = {};
for (const meta of Object.values(CHART_TYPE_META)) { for (const meta of Object.values(CHART_TYPE_META)) {
@ -200,8 +203,9 @@ function ChartsTab() {
key={meta.type} key={meta.type}
size="small" size="small"
hoverable hoverable
style={{ textAlign: 'center', cursor: 'pointer' }} style={{ textAlign: 'center', cursor: 'pointer', opacity: loading ? 0.5 : 1 }}
bodyStyle={{ padding: '8px 4px' }} bodyStyle={{ padding: '8px 4px' }}
onClick={() => !loading && handleCreate(meta.type)}
> >
<BarChartOutlined style={{ fontSize: 20, marginBottom: 4 }} /> <BarChartOutlined style={{ fontSize: 20, marginBottom: 4 }} />
<div style={{ fontSize: 11, lineHeight: 1.3 }}>{meta.label}</div> <div style={{ fontSize: 11, lineHeight: 1.3 }}>{meta.label}</div>