mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-14 08:50:31 +00:00
refactor widget
This commit is contained in:
parent
3fa72e48cc
commit
b77909a360
18 changed files with 510 additions and 529 deletions
9
src/widgets/glances/components/block.jsx
Normal file
9
src/widgets/glances/components/block.jsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
export default function Block({ position, children }) {
|
||||
const positionClasses = Object.entries(position).map(([key, value]) => `${key}-${value}`).join(' ');
|
||||
|
||||
return (
|
||||
<div className={`absolute ${positionClasses} z-20 text-sm`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
48
src/widgets/glances/components/chart.jsx
Normal file
48
src/widgets/glances/components/chart.jsx
Normal file
|
@ -0,0 +1,48 @@
|
|||
import { PureComponent } from "react";
|
||||
import { AreaChart, Area, ResponsiveContainer, Tooltip } from "recharts";
|
||||
|
||||
import CustomTooltip from "./custom_tooltip";
|
||||
|
||||
class Chart extends PureComponent {
|
||||
render() {
|
||||
const { dataPoints, formatter, 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}>
|
||||
<defs>
|
||||
<linearGradient id="color" 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]}
|
||||
isAnimationActive={false}
|
||||
type="monotoneX"
|
||||
dataKey="value"
|
||||
stroke="rgb(var(--color-500))"
|
||||
fillOpacity={1} fill="url(#color)"
|
||||
baseLine={0}
|
||||
/>
|
||||
<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 Chart;
|
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;
|
8
src/widgets/glances/components/container.jsx
Normal file
8
src/widgets/glances/components/container.jsx
Normal file
|
@ -0,0 +1,8 @@
|
|||
export default function Container({ children }) {
|
||||
return (
|
||||
<div>
|
||||
{children}
|
||||
<div className="h-[68px] overflow-clip" />
|
||||
</div>
|
||||
);
|
||||
}
|
15
src/widgets/glances/components/custom_tooltip.jsx
Normal file
15
src/widgets/glances/components/custom_tooltip.jsx
Normal file
|
@ -0,0 +1,15 @@
|
|||
export default function Tooltip({ active, payload, formatter }) {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="bg-theme-800/80 rounded-md text-theme-200 px-2 py-0">
|
||||
{payload.map((pld, id) => (
|
||||
<div key={Math.random()} className="first-of-type:pt-0 pt-0.5">
|
||||
<div>{formatter(pld.value)} {payload[id].name}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
9
src/widgets/glances/components/error.jsx
Normal file
9
src/widgets/glances/components/error.jsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
import { useTranslation } from "next-i18next";
|
||||
|
||||
export default function Error() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-75">
|
||||
{t("widget.api_error")}
|
||||
</div>;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue