37 lines
885 B
TypeScript
37 lines
885 B
TypeScript
'use client';
|
|
|
|
import type { IChartData } from '@/app/_trpc/client';
|
|
import { useVisibleSeries } from '@/hooks/useVisibleSeries';
|
|
import { cn } from '@/utils/cn';
|
|
|
|
import { useChartContext } from './ChartProvider';
|
|
import { MetricCard } from './MetricCard';
|
|
|
|
interface ReportMetricChartProps {
|
|
data: IChartData;
|
|
}
|
|
|
|
export function ReportMetricChart({ data }: ReportMetricChartProps) {
|
|
const { editMode, metric, unit } = useChartContext();
|
|
const { series } = useVisibleSeries(data, editMode ? undefined : 2);
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'grid grid-cols-1 gap-4',
|
|
editMode && 'md:grid-cols-2 lg:grid-cols-3'
|
|
)}
|
|
>
|
|
{series.map((serie) => {
|
|
return (
|
|
<MetricCard
|
|
key={serie.name}
|
|
serie={serie}
|
|
metric={metric}
|
|
unit={unit}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|