107 lines
3.3 KiB
TypeScript
107 lines
3.3 KiB
TypeScript
import * as React from "react";
|
|
import { type RouterOutputs } from "@/utils/api";
|
|
import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
|
|
import { useSelector } from "@/redux";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { getChartColor } from "@/utils/theme";
|
|
import { cn } from "@/utils/cn";
|
|
|
|
type ReportTableProps = {
|
|
data: RouterOutputs["chartMeta"]["chart"];
|
|
visibleSeries: string[];
|
|
setVisibleSeries: React.Dispatch<React.SetStateAction<string[]>>;
|
|
};
|
|
|
|
export function ReportTable({
|
|
data,
|
|
visibleSeries,
|
|
setVisibleSeries,
|
|
}: ReportTableProps) {
|
|
const interval = useSelector((state) => state.report.interval);
|
|
const formatDate = useFormatDateInterval(interval);
|
|
|
|
function handleChange(name: string, checked: boolean) {
|
|
setVisibleSeries((prev) => {
|
|
if (checked) {
|
|
return [...prev, name];
|
|
} else {
|
|
return prev.filter((item) => item !== name);
|
|
}
|
|
});
|
|
}
|
|
|
|
const row = "flex border-b border-border last:border-b-0 flex-1";
|
|
const cell = "p-2 last:pr-8 last:w-[8rem]";
|
|
const value = "min-w-[6rem] text-right";
|
|
const header = "text-sm font-medium";
|
|
const total = 'bg-gray-50 text-emerald-600 font-bold border-r border-border'
|
|
return (
|
|
<div className="flex w-fit max-w-full rounded-md border border-border">
|
|
{/* Labels */}
|
|
<div className="border-r border-border">
|
|
<div className={cn(header, row, cell)}>Name</div>
|
|
{data.series.map((serie, index) => {
|
|
const checked = visibleSeries.includes(serie.name);
|
|
|
|
return (
|
|
<div
|
|
key={serie.name}
|
|
className={cn("flex max-w-[200px] items-center gap-2", row, cell)}
|
|
>
|
|
<Checkbox
|
|
onCheckedChange={(checked) =>
|
|
handleChange(serie.name, !!checked)
|
|
}
|
|
style={
|
|
checked
|
|
? {
|
|
background: getChartColor(index),
|
|
borderColor: getChartColor(index),
|
|
}
|
|
: undefined
|
|
}
|
|
checked={checked}
|
|
/>
|
|
<div className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
|
|
{serie.name}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* ScrollView for all values */}
|
|
<div className="w-full overflow-auto">
|
|
{/* Header */}
|
|
<div className={cn("w-max", row)}>
|
|
<div className={cn(header, value, cell, total)}>Total</div>
|
|
{data.series[0]?.data.map((serie) => (
|
|
<div
|
|
key={serie.date.toString()}
|
|
className={cn(header, value, cell)}
|
|
>
|
|
{formatDate(serie.date)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Values */}
|
|
{data.series.map((serie) => {
|
|
return (
|
|
<div className={cn("w-max", row)} key={serie.name}>
|
|
<div className={cn(header, value, cell, total)}>{serie.totalCount}</div>
|
|
{serie.data.map((item) => {
|
|
return (
|
|
<div key={item.date} className={cn(value, cell)}>
|
|
{item.count}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|