52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import { useMemo } from 'react'
|
|
import { Area, AreaChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
|
|
|
|
const SimpleAreaChart = ({
|
|
color,
|
|
data,
|
|
name,
|
|
xKey,
|
|
yKey,
|
|
}: {
|
|
color: string
|
|
data: any[]
|
|
name: string
|
|
xKey: string
|
|
yKey: string
|
|
}) => {
|
|
const flipGradientCoords = useMemo(
|
|
() => data[0][yKey] <= 0 && data[data.length - 1][yKey] < data[0][yKey],
|
|
[data]
|
|
)
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={data}>
|
|
<defs>
|
|
<linearGradient
|
|
id={`gradientArea-${name}`}
|
|
x1="0"
|
|
y1={flipGradientCoords ? '0' : '1'}
|
|
x2="0"
|
|
y2={flipGradientCoords ? '1' : '0'}
|
|
>
|
|
<stop offset="0%" stopColor={color} stopOpacity={0} />
|
|
<stop offset="100%" stopColor={color} stopOpacity={0.6} />
|
|
</linearGradient>
|
|
</defs>
|
|
<Area
|
|
isAnimationActive={false}
|
|
type="monotone"
|
|
dataKey={yKey}
|
|
stroke={color}
|
|
fill={`url(#gradientArea-${name})`}
|
|
/>
|
|
<XAxis dataKey={xKey} hide />
|
|
<YAxis domain={['dataMin', 'dataMax']} dataKey={yKey} hide />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
)
|
|
}
|
|
|
|
export default SimpleAreaChart
|