qixinbo
94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
import { create } from 'zustand';
|
|
import type { ChartSpec } from './visualizationStore';
|
|
|
|
type ChartRow = Record<string, unknown>;
|
|
type GridLayout = { i: string; x: number; y: number; w: number; h: number };
|
|
|
|
export interface ChartConfig {
|
|
id: string;
|
|
title: string;
|
|
type: 'bar' | 'line' | 'table';
|
|
data: ChartRow[];
|
|
sql: string;
|
|
chartSpec?: ChartSpec | null;
|
|
layout: GridLayout;
|
|
}
|
|
|
|
interface DashboardState {
|
|
charts: ChartConfig[];
|
|
addChart: (chart: Omit<ChartConfig, 'layout'>, projectId: number) => void;
|
|
removeChart: (id: string, projectId: number) => void;
|
|
updateLayout: (layouts: GridLayout[], projectId: number) => void;
|
|
loadCharts: (projectId: number) => void;
|
|
}
|
|
|
|
const DASHBOARD_STORAGE_KEY_PREFIX = 'dashboard_charts_v1_project_';
|
|
|
|
function getStorageKey(projectId: number) {
|
|
return `${DASHBOARD_STORAGE_KEY_PREFIX}${projectId}`;
|
|
}
|
|
|
|
function loadChartsFromStorage(projectId: number): ChartConfig[] {
|
|
if (typeof window === 'undefined') return [];
|
|
try {
|
|
const raw = window.localStorage.getItem(getStorageKey(projectId));
|
|
if (!raw) return [];
|
|
const parsed = JSON.parse(raw);
|
|
if (!Array.isArray(parsed)) return [];
|
|
return parsed
|
|
.filter((item): item is ChartConfig => Boolean(item?.id && item?.layout))
|
|
.map((item) => ({
|
|
...item,
|
|
layout: {
|
|
i: item.layout.i,
|
|
x: Number.isFinite(item.layout.x) ? item.layout.x : 0,
|
|
y: Number.isFinite(item.layout.y) ? item.layout.y : 0,
|
|
w: Number.isFinite(item.layout.w) ? item.layout.w : 4,
|
|
h: Number.isFinite(item.layout.h) ? item.layout.h : 4,
|
|
},
|
|
}));
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function saveChartsToStorage(charts: ChartConfig[], projectId: number) {
|
|
if (typeof window === 'undefined') return;
|
|
window.localStorage.setItem(getStorageKey(projectId), JSON.stringify(charts));
|
|
}
|
|
|
|
export const useDashboardStore = create<DashboardState>((set, get) => ({
|
|
charts: [],
|
|
loadCharts: (projectId) => {
|
|
set({ charts: loadChartsFromStorage(projectId) });
|
|
},
|
|
addChart: (chart, projectId) => set((state) => {
|
|
const colSize = 4;
|
|
const cols = 12 / colSize;
|
|
const index = state.charts.length;
|
|
const newLayout: GridLayout = {
|
|
i: chart.id,
|
|
x: (index % cols) * colSize,
|
|
y: Math.floor(index / cols) * 4,
|
|
w: colSize,
|
|
h: 4,
|
|
};
|
|
const nextCharts = [...state.charts, { ...chart, layout: newLayout }];
|
|
saveChartsToStorage(nextCharts, projectId);
|
|
return { charts: nextCharts };
|
|
}),
|
|
removeChart: (id, projectId) => set((state) => {
|
|
const nextCharts = state.charts.filter((c) => c.id !== id);
|
|
saveChartsToStorage(nextCharts, projectId);
|
|
return { charts: nextCharts };
|
|
}),
|
|
updateLayout: (layouts, projectId) => set((state) => {
|
|
const nextCharts = state.charts.map((chart) => {
|
|
const layout = layouts.find((l) => l.i === chart.id);
|
|
return layout ? { ...chart, layout } : chart;
|
|
});
|
|
saveChartsToStorage(nextCharts, projectId);
|
|
return { charts: nextCharts };
|
|
}),
|
|
}));
|