@tohuhono/puck-blocks
Version:
A collection of puck components for building pages in OberonCMS
130 lines (129 loc) • 4.11 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { ResponsiveContainer, LineChart, Tooltip, Line } from "recharts";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@tohuhono/ui/card";
const data = [
{
average: 400,
today: 240
},
{
average: 300,
today: 139
},
{
average: 200,
today: 980
},
{
average: 278,
today: 390
},
{
average: 189,
today: 480
},
{
average: 239,
today: 380
},
{
average: 349,
today: 430
}
];
function CardsMetric() {
const averageLineStyle = {
stroke: "hsl(var(--primary))",
opacity: 0.25
};
const todayLineStyle = {
stroke: "hsl(var(--primary))"
};
return /* @__PURE__ */ jsxs(Card, { children: [
/* @__PURE__ */ jsxs(CardHeader, { children: [
/* @__PURE__ */ jsx(CardTitle, { children: "Exercise Minutes" }),
/* @__PURE__ */ jsx(CardDescription, { children: "Your excercise minutes are ahead of where you normally are." })
] }),
/* @__PURE__ */ jsx(CardContent, { className: "pb-4", children: /* @__PURE__ */ jsx("div", { className: "h-[200px]", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
LineChart,
{
data,
margin: {
top: 5,
right: 10,
left: 10,
bottom: 0
},
children: [
/* @__PURE__ */ jsx(
Tooltip,
{
content: ({ active, payload }) => {
if (active && payload && payload.length) {
return /* @__PURE__ */ jsx(
"div",
{
className: "\n rounded-lg border bg-background p-2 shadow-xs\n ",
children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
/* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsx(
"span",
{
className: "\n text-[0.70rem] text-muted-foreground uppercase\n ",
children: "Average"
}
),
/* @__PURE__ */ jsx("span", { className: "font-bold text-muted-foreground", children: payload[0]?.value })
] }),
/* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsx(
"span",
{
className: "\n text-[0.70rem] text-muted-foreground uppercase\n ",
children: "Today"
}
),
/* @__PURE__ */ jsx("span", { className: "font-bold", children: payload[1]?.value })
] })
] })
}
);
}
return null;
}
}
),
/* @__PURE__ */ jsx(
Line,
{
type: "monotone",
strokeWidth: 2,
dataKey: "average",
activeDot: {
r: 6,
style: { fill: "hsl(var(--primary))", opacity: 0.25 }
},
style: averageLineStyle
}
),
/* @__PURE__ */ jsx(
Line,
{
type: "monotone",
dataKey: "today",
strokeWidth: 2,
activeDot: {
r: 8,
style: { fill: "hsl(var(--primary))" }
},
style: todayLineStyle
}
)
]
}
) }) }) })
] });
}
export {
CardsMetric
};