mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-10 15:28:47 +00:00
refactor widget
This commit is contained in:
parent
3fa72e48cc
commit
b77909a360
18 changed files with 510 additions and 529 deletions
63
src/widgets/glances/components/chart_dual.jsx
Normal file
63
src/widgets/glances/components/chart_dual.jsx
Normal file
|
@ -0,0 +1,63 @@
|
|||
import { PureComponent } from "react";
|
||||
import { AreaChart, Area, ResponsiveContainer, Tooltip } from "recharts";
|
||||
|
||||
import CustomTooltip from "./custom_tooltip";
|
||||
|
||||
class ChartDual extends PureComponent {
|
||||
render() {
|
||||
const { dataPoints, formatter, stack, label } = this.props;
|
||||
|
||||
return (
|
||||
<div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
|
||||
<div className="overflow-clip z-10 w-full h-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={dataPoints} stackOffset={stack ?? "none"}>
|
||||
<defs>
|
||||
<linearGradient id="colorA" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="rgb(var(--color-800))" stopOpacity={0.8}/>
|
||||
<stop offset="95%" stopColor="rgb(var(--color-800))" stopOpacity={0.5}/>
|
||||
</linearGradient>
|
||||
<linearGradient id="colorB" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="rgb(var(--color-500))" stopOpacity={0.4}/>
|
||||
<stop offset="95%" stopColor="rgb(var(--color-500))" stopOpacity={0.1}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<Area
|
||||
name={label[0]}
|
||||
stackId="1"
|
||||
isAnimationActive={false}
|
||||
type="monotoneX"
|
||||
dataKey="a"
|
||||
stroke="rgb(var(--color-700))"
|
||||
fillOpacity={1} fill="url(#colorA)"
|
||||
/>
|
||||
<Area
|
||||
name={label[1]}
|
||||
stackId="1"
|
||||
isAnimationActive={false}
|
||||
type="monotoneX"
|
||||
dataKey="b"
|
||||
stroke="rgb(var(--color-500))"
|
||||
fillOpacity={1} fill="url(#colorB)"
|
||||
/>
|
||||
<Tooltip
|
||||
allowEscapeViewBox={{ x: false, y: false }}
|
||||
formatter={formatter}
|
||||
content={<CustomTooltip formatter={formatter} />}
|
||||
classNames="rounded-md text-xs p-0.5"
|
||||
contentStyle={{
|
||||
backgroundColor: "rgb(var(--color-800))",
|
||||
color: "rgb(var(--color-100))"
|
||||
}}
|
||||
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ChartDual;
|
Loading…
Add table
Add a link
Reference in a new issue