initial code commit
This commit is contained in:
commit
27bb45f7df
56 changed files with 15106 additions and 0 deletions
300
client/src/components/charts/ChartPanel.tsx
Normal file
300
client/src/components/charts/ChartPanel.tsx
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
/**
|
||||
* Configurable chart panel. Renders one ChartConfig as a Recharts chart,
|
||||
* with inline controls for type, metrics, granularity, and axis ranges.
|
||||
*/
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import {
|
||||
ResponsiveContainer,
|
||||
LineChart, Line,
|
||||
BarChart, Bar,
|
||||
AreaChart, Area,
|
||||
PieChart, Pie, Cell,
|
||||
XAxis, YAxis, Tooltip, Legend, CartesianGrid,
|
||||
} from 'recharts';
|
||||
import type { ChartConfig, ChartMetric, ChartType, ChartGranularity } from '@/types';
|
||||
import { buildChartSeries } from '@/lib/stats/aggregate';
|
||||
import { useAppStore } from '@/store/appStore';
|
||||
import { fmtMoneyShort } from '@/lib/format';
|
||||
|
||||
const METRIC_LABELS: Record<ChartMetric, string> = {
|
||||
workValue: 'Work Value',
|
||||
payments: 'Payments',
|
||||
expenses: 'Expenses',
|
||||
netIncome: 'Net Income',
|
||||
cumulativePayments: 'Cumulative Payments',
|
||||
cumulativeNet: 'Cumulative Net',
|
||||
};
|
||||
|
||||
const CHART_COLORS = [
|
||||
'var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)',
|
||||
'var(--chart-4)', 'var(--chart-5)',
|
||||
];
|
||||
|
||||
interface Props {
|
||||
config: ChartConfig;
|
||||
onChange: (patch: Partial<ChartConfig>) => void;
|
||||
onRemove?: () => void;
|
||||
}
|
||||
|
||||
export function ChartPanel({ config, onChange, onRemove }: Props) {
|
||||
const work = useAppStore((s) => s.data.workEntries);
|
||||
const payments = useAppStore((s) => s.data.payments);
|
||||
const expenses = useAppStore((s) => s.data.expenses);
|
||||
|
||||
const [showControls, setShowControls] = useState(false);
|
||||
|
||||
const data = useMemo(
|
||||
() =>
|
||||
buildChartSeries(
|
||||
work,
|
||||
payments,
|
||||
expenses,
|
||||
config.metrics,
|
||||
config.granularity,
|
||||
config.rangeStart,
|
||||
config.rangeEnd,
|
||||
),
|
||||
[work, payments, expenses, config],
|
||||
);
|
||||
|
||||
const yDomain: [number | 'auto', number | 'auto'] = [
|
||||
config.yMin ?? 'auto',
|
||||
config.yMax ?? 'auto',
|
||||
];
|
||||
|
||||
const toggleMetric = (m: ChartMetric) => {
|
||||
const has = config.metrics.includes(m);
|
||||
const next = has
|
||||
? config.metrics.filter((x) => x !== m)
|
||||
: [...config.metrics, m];
|
||||
if (next.length > 0) onChange({ metrics: next });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card" style={{ flex: 1, minHeight: 300, display: 'flex', flexDirection: 'column' }}>
|
||||
<div className="card-header">
|
||||
<input
|
||||
className="input input-inline"
|
||||
style={{ border: 'none', fontWeight: 600, fontSize: 14, background: 'transparent', width: '60%' }}
|
||||
value={config.title ?? ''}
|
||||
placeholder="Chart title"
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
/>
|
||||
<div className="flex gap-1">
|
||||
<button className="btn btn-sm btn-ghost" onClick={() => setShowControls(!showControls)} title="Configure">
|
||||
⚙
|
||||
</button>
|
||||
{onRemove && (
|
||||
<button className="btn btn-sm btn-ghost text-danger" onClick={onRemove} title="Remove chart">
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showControls && (
|
||||
<div className="flex-col gap-2 mb-4" style={{ padding: 12, background: 'var(--bg-elev-2)', borderRadius: 'var(--radius-sm)' }}>
|
||||
{/* Chart type */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted" style={{ width: 80 }}>Type</span>
|
||||
<div className="btn-group">
|
||||
{(['line', 'bar', 'area', 'pie'] as ChartType[]).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
className={`btn btn-sm ${config.type === t ? 'active' : ''}`}
|
||||
onClick={() => onChange({ type: t })}
|
||||
>
|
||||
{t}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Granularity */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted" style={{ width: 80 }}>Grain</span>
|
||||
<div className="btn-group">
|
||||
{(['day', 'week', 'month', 'year'] as ChartGranularity[]).map((g) => (
|
||||
<button
|
||||
key={g}
|
||||
className={`btn btn-sm ${config.granularity === g ? 'active' : ''}`}
|
||||
onClick={() => onChange({ granularity: g })}
|
||||
>
|
||||
{g}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metrics */}
|
||||
<div className="flex items-center gap-2" style={{ flexWrap: 'wrap' }}>
|
||||
<span className="text-sm text-muted" style={{ width: 80 }}>Data</span>
|
||||
{(Object.keys(METRIC_LABELS) as ChartMetric[]).map((m) => (
|
||||
<label key={m} className="checkbox text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={config.metrics.includes(m)}
|
||||
onChange={() => toggleMetric(m)}
|
||||
/>
|
||||
{METRIC_LABELS[m]}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* X range */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted" style={{ width: 80 }}>X range</span>
|
||||
<input
|
||||
type="date"
|
||||
className="input input-inline"
|
||||
style={{ width: 140 }}
|
||||
value={config.rangeStart ?? ''}
|
||||
onChange={(e) => onChange({ rangeStart: e.target.value || null })}
|
||||
/>
|
||||
<span className="text-muted">to</span>
|
||||
<input
|
||||
type="date"
|
||||
className="input input-inline"
|
||||
style={{ width: 140 }}
|
||||
value={config.rangeEnd ?? ''}
|
||||
onChange={(e) => onChange({ rangeEnd: e.target.value || null })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Y range */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted" style={{ width: 80 }}>Y range</span>
|
||||
<input
|
||||
type="number"
|
||||
className="input input-inline"
|
||||
style={{ width: 100 }}
|
||||
placeholder="auto"
|
||||
value={config.yMin ?? ''}
|
||||
onChange={(e) => onChange({ yMin: e.target.value ? Number(e.target.value) : null })}
|
||||
/>
|
||||
<span className="text-muted">to</span>
|
||||
<input
|
||||
type="number"
|
||||
className="input input-inline"
|
||||
style={{ width: 100 }}
|
||||
placeholder="auto"
|
||||
value={config.yMax ?? ''}
|
||||
onChange={(e) => onChange({ yMax: e.target.value ? Number(e.target.value) : null })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Chart render */}
|
||||
<div style={{ flex: 1, minHeight: 200 }}>
|
||||
{data.length === 0 ? (
|
||||
<div className="flex items-center justify-between full-height text-muted" style={{ justifyContent: 'center' }}>
|
||||
No data to display
|
||||
</div>
|
||||
) : (
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
{renderChart(config, data, yDomain)}
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderChart(
|
||||
config: ChartConfig,
|
||||
data: ReturnType<typeof buildChartSeries>,
|
||||
yDomain: [number | 'auto', number | 'auto'],
|
||||
) {
|
||||
const common = {
|
||||
data,
|
||||
margin: { top: 5, right: 10, bottom: 5, left: 0 },
|
||||
};
|
||||
|
||||
const axes = (
|
||||
<>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
|
||||
<XAxis dataKey="label" stroke="var(--fg-muted)" fontSize={11} />
|
||||
<YAxis
|
||||
stroke="var(--fg-muted)"
|
||||
fontSize={11}
|
||||
domain={yDomain}
|
||||
tickFormatter={(v) => fmtMoneyShort(v)}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: 'var(--bg-elev)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
}}
|
||||
formatter={(v: number) => fmtMoneyShort(v)}
|
||||
/>
|
||||
<Legend wrapperStyle={{ fontSize: 12 }} />
|
||||
</>
|
||||
);
|
||||
|
||||
switch (config.type) {
|
||||
case 'line':
|
||||
return (
|
||||
<LineChart {...common}>
|
||||
{axes}
|
||||
{config.metrics.map((m, i) => (
|
||||
<Line
|
||||
key={m}
|
||||
type="monotone"
|
||||
dataKey={m}
|
||||
name={METRIC_LABELS[m]}
|
||||
stroke={CHART_COLORS[i % CHART_COLORS.length]}
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
);
|
||||
case 'bar':
|
||||
return (
|
||||
<BarChart {...common}>
|
||||
{axes}
|
||||
{config.metrics.map((m, i) => (
|
||||
<Bar key={m} dataKey={m} name={METRIC_LABELS[m]} fill={CHART_COLORS[i % CHART_COLORS.length]} />
|
||||
))}
|
||||
</BarChart>
|
||||
);
|
||||
case 'area':
|
||||
return (
|
||||
<AreaChart {...common}>
|
||||
{axes}
|
||||
{config.metrics.map((m, i) => (
|
||||
<Area
|
||||
key={m}
|
||||
type="monotone"
|
||||
dataKey={m}
|
||||
name={METRIC_LABELS[m]}
|
||||
stroke={CHART_COLORS[i % CHART_COLORS.length]}
|
||||
fill={CHART_COLORS[i % CHART_COLORS.length]}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
))}
|
||||
</AreaChart>
|
||||
);
|
||||
case 'pie': {
|
||||
// Pie: sum each metric over the range
|
||||
const totals = config.metrics.map((m) => ({
|
||||
name: METRIC_LABELS[m],
|
||||
value: data.reduce((s, d) => s + (Number(d[m]) || 0), 0),
|
||||
}));
|
||||
return (
|
||||
<PieChart>
|
||||
<Pie data={totals} dataKey="value" nameKey="name" outerRadius="80%" label>
|
||||
{totals.map((_, i) => (
|
||||
<Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip formatter={(v: number) => fmtMoneyShort(v)} />
|
||||
<Legend wrapperStyle={{ fontSize: 12 }} />
|
||||
</PieChart>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue