119 lines
3.2 KiB
TypeScript
119 lines
3.2 KiB
TypeScript
import { api } from "@/utils/api";
|
|
import {
|
|
CartesianGrid,
|
|
Line,
|
|
LineChart,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts";
|
|
import { ReportLineChartTooltip } from "./ReportLineChartTooltop";
|
|
import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
|
|
import { type IChartInput } from "@/types";
|
|
import { getChartColor } from "@/utils/theme";
|
|
import { ReportTable } from "./ReportTable";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { AutoSizer } from "@/components/AutoSizer";
|
|
|
|
type ReportLineChartProps = IChartInput & {
|
|
showTable?: boolean;
|
|
};
|
|
|
|
export function ReportLineChart({
|
|
interval,
|
|
startDate,
|
|
endDate,
|
|
events,
|
|
breakdowns,
|
|
showTable,
|
|
chartType,
|
|
name,
|
|
}: ReportLineChartProps) {
|
|
const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
|
|
|
|
const chart = api.chartMeta.chart.useQuery(
|
|
{
|
|
interval,
|
|
chartType,
|
|
startDate,
|
|
endDate,
|
|
events,
|
|
breakdowns,
|
|
name,
|
|
},
|
|
{
|
|
enabled: events.length > 0,
|
|
},
|
|
);
|
|
|
|
const formatDate = useFormatDateInterval(interval);
|
|
|
|
const ref = useRef(false);
|
|
useEffect(() => {
|
|
if (!ref.current && chart.data) {
|
|
const max = 20;
|
|
|
|
setVisibleSeries(
|
|
chart.data?.series?.slice(0, max).map((serie) => serie.name) ?? [],
|
|
);
|
|
// ref.current = true;
|
|
}
|
|
}, [chart.data]);
|
|
|
|
return (
|
|
<>
|
|
{chart.isSuccess && chart.data?.series?.[0]?.data && (
|
|
<>
|
|
<AutoSizer disableHeight>
|
|
{({ width }) => (
|
|
<LineChart width={width} height={Math.min(width * 0.5, 400)}>
|
|
<YAxis dataKey={"count"}></YAxis>
|
|
<Tooltip content={<ReportLineChartTooltip />} />
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey="date"
|
|
tickFormatter={(m: Date) => {
|
|
return formatDate(m);
|
|
}}
|
|
tickLine={false}
|
|
allowDuplicatedCategory={false}
|
|
/>
|
|
{chart.data?.series
|
|
.filter((serie) => {
|
|
return visibleSeries.includes(serie.name);
|
|
})
|
|
.map((serie) => {
|
|
const realIndex = chart.data?.series.findIndex(
|
|
(item) => item.name === serie.name,
|
|
);
|
|
const key = serie.name;
|
|
const strokeColor = getChartColor(realIndex);
|
|
return (
|
|
<Line
|
|
type="monotone"
|
|
key={key}
|
|
isAnimationActive={false}
|
|
strokeWidth={2}
|
|
dataKey="count"
|
|
stroke={strokeColor}
|
|
data={serie.data}
|
|
name={serie.name}
|
|
/>
|
|
);
|
|
})}
|
|
</LineChart>
|
|
)}
|
|
</AutoSizer>
|
|
{showTable && (
|
|
<ReportTable
|
|
data={chart.data}
|
|
visibleSeries={visibleSeries}
|
|
setVisibleSeries={setVisibleSeries}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|