laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
217 lines (216 loc) • 7.21 kB
JavaScript
"use client";
import { jsx as s, jsxs as f, Fragment as L } from "react/jsx-runtime";
import * as p from "react";
import { cn as l } from "../../lib/utils.js";
import { Tooltip as T } from "../../node_modules/recharts/es6/component/Tooltip.js";
import { Legend as I } from "../../node_modules/recharts/es6/component/Legend.js";
import { ResponsiveContainer as K } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
const P = { light: "", dark: ".dark" }, N = p.createContext(null);
function j() {
const c = p.useContext(N);
if (!c)
throw new Error("useChart must be used within a <ChartContainer />");
return c;
}
function q({
id: c,
className: e,
children: t,
config: r,
...a
}) {
const d = p.useId(), o = `chart-${c || d.replace(/:/g, "")}`;
return /* @__PURE__ */ s(N.Provider, { value: { config: r }, children: /* @__PURE__ */ f(
"div",
{
"data-slot": "chart",
"data-chart": o,
className: l(
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
e
),
...a,
children: [
/* @__PURE__ */ s(S, { id: o, config: r }),
/* @__PURE__ */ s(K, { children: t })
]
}
) });
}
const S = ({ id: c, config: e }) => {
const t = Object.entries(e).filter(
([, r]) => r.theme || r.color
);
return t.length ? /* @__PURE__ */ s(
"style",
{
dangerouslySetInnerHTML: {
__html: Object.entries(P).map(
([r, a]) => `
${a} [data-chart=${c}] {
${t.map(([d, o]) => {
const i = o.theme?.[r] || o.color;
return i ? ` --color-${d}: ${i};` : null;
}).join(`
`)}
}
`
).join(`
`)
}
}
) : null;
}, z = T;
function A({
active: c,
payload: e,
className: t,
indicator: r = "dot",
hideLabel: a = !1,
hideIndicator: d = !1,
label: o,
labelFormatter: i,
labelClassName: u,
formatter: _,
color: y,
nameKey: $,
labelKey: v
}) {
const { config: g } = j(), k = p.useMemo(() => {
if (a || !e?.length)
return null;
const [n] = e, x = `${v || n?.dataKey || n?.name || "value"}`, b = C(g, n, x), h = !v && typeof o == "string" ? g[o]?.label || o : b?.label;
return i ? /* @__PURE__ */ s("div", { className: l("font-medium", u), children: i(h, e) }) : h ? /* @__PURE__ */ s("div", { className: l("font-medium", u), children: h }) : null;
}, [
o,
i,
e,
a,
u,
g,
v
]);
if (!c || !e?.length)
return null;
const m = e.length === 1 && r !== "dot";
return /* @__PURE__ */ f(
"div",
{
className: l(
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
t
),
children: [
m ? null : k,
/* @__PURE__ */ s("div", { className: "grid gap-1.5", children: e.map((n, x) => {
const b = `${$ || n.name || n.dataKey || "value"}`, h = C(g, n, b), w = y || n.payload?.fill || n.color;
return /* @__PURE__ */ s(
"div",
{
className: l(
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
r === "dot" && "items-center"
),
children: _ && n?.value !== void 0 && n.name ? _(n.value, n.name, n, x, n.payload) : /* @__PURE__ */ f(L, { children: [
h?.icon ? /* @__PURE__ */ s(h.icon, {}) : !d && /* @__PURE__ */ s(
"div",
{
className: l(
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
{
"h-2.5 w-2.5": r === "dot",
"w-1": r === "line",
"w-0 border-[1.5px] border-dashed bg-transparent": r === "dashed",
"my-0.5": m && r === "dashed"
}
),
style: {
"--color-bg": w,
"--color-border": w
}
}
),
/* @__PURE__ */ f(
"div",
{
className: l(
"flex flex-1 justify-between leading-none",
m ? "items-end" : "items-center"
),
children: [
/* @__PURE__ */ f("div", { className: "grid gap-1.5", children: [
m ? k : null,
/* @__PURE__ */ s("span", { className: "text-muted-foreground", children: h?.label || n.name })
] }),
n.value && /* @__PURE__ */ s("span", { className: "text-foreground font-mono font-medium tabular-nums", children: n.value.toLocaleString() })
]
}
)
] })
},
n.dataKey
);
}) })
]
}
);
}
const B = I;
function D({
className: c,
hideIcon: e = !1,
payload: t,
verticalAlign: r = "bottom",
nameKey: a
}) {
const { config: d } = j();
return !t || t.length === 0 ? null : /* @__PURE__ */ s(
"div",
{
className: l(
"flex items-center justify-center gap-4",
r === "top" ? "pb-3" : "pt-3",
c
),
children: t.map((o) => {
const i = `${a || o.dataKey || "value"}`, u = C(d, o, i);
return /* @__PURE__ */ f(
"div",
{
className: l(
"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
),
children: [
u?.icon && !e ? /* @__PURE__ */ s(u.icon, {}) : /* @__PURE__ */ s(
"div",
{
className: "h-2 w-2 shrink-0 rounded-[2px]",
style: {
backgroundColor: o.color
}
}
),
u?.label
]
},
o.value || o.dataKey
);
})
}
);
}
function C(c, e, t) {
if (typeof e != "object" || e === null)
return;
const r = "payload" in e && typeof e.payload == "object" && e.payload !== null ? e.payload : void 0;
let a = t;
return t in e && typeof e[t] == "string" ? a = e[t] : r && t in r && typeof r[t] == "string" && (a = r[t]), a in c ? c[a] : c[t];
}
export {
q as ChartContainer,
B as ChartLegend,
D as ChartLegendContent,
S as ChartStyle,
z as ChartTooltip,
A as ChartTooltipContent
};