Render charts in separate row below tiles

This commit is contained in:
Bhanu Prakash Sai Potteri 2026-05-23 11:21:56 +05:30
parent 8a32282c09
commit a35c7824c9

View File

@ -268,18 +268,28 @@ export default function RecordViewTable({ viewId, onRowClick, toolbarAction }: P
onRowClick ? onRowClick(id) : navigate(`/detail/${id}`);
};
const tileSpecs = analyticsSpecs.filter(a => a.kind === "tile");
const chartSpecs = analyticsSpecs.filter(a => a.kind === "chart");
const analyticsRow = analyticsSpecs.length > 0 ? (
<div className="flex flex-wrap items-stretch gap-3 mb-4">
{analyticsSpecs.map((a, i) => {
if (a.kind === "tile") {
<div className="space-y-3 mb-4">
{tileSpecs.length > 0 && (
<div className="flex flex-wrap items-stretch gap-3">
{tileSpecs.map((a, i) => {
const tv = tileValues.find(t => t.tile_uid === a.uid);
return <Tile key={i} title={a.title} value={tv?.value as number | undefined} loading={loading || dataLoading} />;
}
const cd = chartData.find(c => c.chart_uid === a.uid);
const Chart = a.chartType === "pie" ? PieChart : BarChart;
return <Chart key={i} title={a.title} rows={cd?.rows ?? []} loading={loading || dataLoading} />;
return <Tile key={`tile-${i}`} title={a.title} value={tv?.value as number | undefined} loading={loading || dataLoading} />;
})}
</div>
)}
{chartSpecs.length > 0 && (
<div className="flex flex-wrap items-stretch gap-3">
{chartSpecs.map((a, i) => {
const cd = chartData.find(c => c.chart_uid === a.uid);
const Chart = (a as { chartType?: string }).chartType === "pie" ? PieChart : BarChart;
return <Chart key={`chart-${i}`} title={a.title} rows={cd?.rows ?? []} loading={loading || dataLoading} />;
})}
</div>
)}
</div>
) : null;
if (loading) return <>{analyticsRow}<TableSkeleton rows={6} cols={fields.length || 6} /></>;