94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { AutoSizer } from '@/components/AutoSizer';
|
|
import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
|
|
import type { IChartData, IInterval } from '@/types';
|
|
import { getChartColor } from '@/utils/theme';
|
|
import {
|
|
CartesianGrid,
|
|
Line,
|
|
LineChart,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from 'recharts';
|
|
|
|
import { useChartContext } from './ChartProvider';
|
|
import { ReportLineChartTooltip } from './ReportLineChartTooltip';
|
|
import { ReportTable } from './ReportTable';
|
|
|
|
interface ReportLineChartProps {
|
|
data: IChartData;
|
|
interval: IInterval;
|
|
}
|
|
|
|
export function ReportLineChart({ interval, data }: ReportLineChartProps) {
|
|
const { editMode } = useChartContext();
|
|
const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
|
|
const formatDate = useFormatDateInterval(interval);
|
|
|
|
const ref = useRef(false);
|
|
useEffect(() => {
|
|
if (!ref.current && data) {
|
|
const max = 20;
|
|
|
|
setVisibleSeries(
|
|
data?.series?.slice(0, max).map((serie) => serie.name) ?? []
|
|
);
|
|
// ref.current = true;
|
|
}
|
|
}, [data]);
|
|
|
|
return (
|
|
<>
|
|
<AutoSizer disableHeight>
|
|
{({ width }) => (
|
|
<LineChart width={width} height={Math.min(width * 0.5, 400)}>
|
|
<YAxis dataKey={'count'} width={30} fontSize={12}></YAxis>
|
|
<Tooltip content={<ReportLineChartTooltip />} />
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis
|
|
fontSize={12}
|
|
dataKey="date"
|
|
tickFormatter={(m: string) => {
|
|
return formatDate(m);
|
|
}}
|
|
tickLine={false}
|
|
allowDuplicatedCategory={false}
|
|
/>
|
|
{data?.series
|
|
.filter((serie) => {
|
|
return visibleSeries.includes(serie.name);
|
|
})
|
|
.map((serie) => {
|
|
const realIndex = 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>
|
|
{editMode && (
|
|
<ReportTable
|
|
data={data}
|
|
visibleSeries={visibleSeries}
|
|
setVisibleSeries={setVisibleSeries}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|