Render charts in separate row below tiles
This commit is contained in:
parent
8a32282c09
commit
a35c7824c9
@ -268,17 +268,27 @@ 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") {
|
||||
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} />;
|
||||
})}
|
||||
<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={`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;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user