67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { Legend, type LegendProps } from '@/components/legend';
|
|
import { getFillColor, getStrokeColor } from '@/utils/colors';
|
|
import { type FormatOptions, formatValue } from '@/utils/format';
|
|
import type { ReactNode } from 'react';
|
|
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from 'recharts';
|
|
import type { AxisDomain } from 'recharts/types/util/types';
|
|
|
|
type Props = {
|
|
title: ReactNode;
|
|
subtitle?: ReactNode;
|
|
legend?: LegendProps;
|
|
formatOptions?: FormatOptions;
|
|
domain?: AxisDomain;
|
|
hueOffset?: number;
|
|
data: number[][];
|
|
total: number;
|
|
};
|
|
|
|
export const ChartCard = ({ data, domain, legend, hueOffset = 0, title, subtitle, formatOptions, total }: Props) => {
|
|
return (
|
|
<div className='chart-card'>
|
|
<h2>{title}</h2>
|
|
|
|
{subtitle}
|
|
|
|
{legend && <Legend hueOffset={hueOffset} formatOptions={formatOptions} {...legend} />}
|
|
|
|
<ResponsiveContainer>
|
|
<AreaChart
|
|
width={500}
|
|
height={300}
|
|
data={data}
|
|
margin={{
|
|
bottom: -16,
|
|
left: 40,
|
|
}}
|
|
>
|
|
<CartesianGrid vertical={false} stroke='var(--color-neutral1)' />
|
|
|
|
<YAxis
|
|
axisLine={false}
|
|
domain={domain}
|
|
stroke='var(--color-neutral1)'
|
|
tick={{ fill: 'var(--color-neutral2)' }}
|
|
tickFormatter={value => formatValue(value, formatOptions)}
|
|
/>
|
|
|
|
{Array.from({ length: total }).map((_, index) => (
|
|
// biome-ignore lint/correctness/useJsxKeyInIterable: order irrelevant
|
|
<Area
|
|
isAnimationActive={false}
|
|
type='monotone'
|
|
dataKey={index}
|
|
fill={getFillColor(((index * 360) / total + hueOffset) % 360)}
|
|
stroke={getStrokeColor(((index * 360) / total + hueOffset) % 360)}
|
|
strokeWidth={2}
|
|
dot={false}
|
|
/>
|
|
))}
|
|
|
|
<XAxis tick={false} stroke='var(--color-neutral0)' strokeWidth={2} transform='translate(0 1)' />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
};
|