refactor widget

This commit is contained in:
Ben Phelps 2023-08-01 13:05:17 +03:00
parent 3fa72e48cc
commit b77909a360
18 changed files with 510 additions and 529 deletions

View 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>
);
}

View 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;

View 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;

View file

@ -0,0 +1,8 @@
export default function Container({ children }) {
return (
<div>
{children}
<div className="h-[68px] overflow-clip" />
</div>
);
}

View 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;
};

View 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>;
}