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