@devgateway/dvz-ui-react
Version:
A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.
800 lines (799 loc) • 25.2 kB
JavaScript
import { jsx as s, jsxs as p, Fragment as ye } from "react/jsx-runtime";
import { useState as _, useEffect as Ht, Fragment as He } from "react";
import Tt from "./Tooltip.js";
import { ResponsiveBar as _t } from "@nivo/bar";
import { injectIntl as At } from "react-intl";
import { useTheme as St } from "@nivo/theming";
import { line as Te } from "d3-shape";
import _e from "./LineLayer.js";
import Ae from "papaparse";
import jt from "../../layout/FlexWrapDetector.js";
import xe from "../../utils/deviceType.js";
const Rt = "middle", Pt = "top", C = "#66676d", Se = "#dddddd", Yt = "none", Q = "_Color", Kt = ({
editing: y,
legends: Y,
marginLeft: je,
marginTop: pe,
marginRight: Re,
marginBottom: be,
options: o,
intl: g,
format: b,
colors: V,
groupMode: M,
height: Pe,
showLegends: G,
legendPosition: w,
tickRotation: B,
offsetText: ee,
tickColor: te,
layout: f,
reverse: W,
offsetY: Ye,
csvLineLayerData: ge,
tooltip: ae,
lineLayerEnabled: ve,
overlays: K,
maxValue: A,
valueScale: Ke,
colorGenerator: v,
legendLabel: Ne,
overrideTickColor: Xe,
fixedMinValue: ne,
fixedMaxValue: S,
barPadding: Ze,
barLabelPosition: Ie,
barInnerPadding: Je,
tooltipEnabled: Ue,
xLabelColor: D,
barLabelColor: X,
legendCheckBack: N,
legendLabelBack: le,
legendLabelColor: re,
highlightXAxisLine: qe,
showTickLine: j,
showRightAxis: Ce,
offsetRight: Qe,
offsetBottom: Le,
confidenceIntervals: ie,
showGroupTotal: Ge,
groupTotalLabel: ke,
groupTotalFormat: we,
groupTotalMeasure: De,
groupTotalOffset: z,
groupTotalFixedPosition: Z,
tooltipEnableMarkdown: et,
xAxisTickValues: tt,
yAxisTickValues: at,
mobileCustomization: nt,
minMaxClamp: lt,
reverseLegend: rt,
enableGridY: it,
enableGridX: st,
customAxisFormat: F,
previewMode: $
}) => {
var We;
const ct = ["mobile", "tablet", "midTablet"].includes(
xe()
), J = ["tablet", "midTablet"].includes(xe()), U = xe() === "mobile", se = 30, ce = 15, h = JSON.parse(decodeURIComponent(nt)), Fe = ct && ((h == null ? void 0 : h.showCustomization) ?? !1), H = Fe && $ !== "Desktop", T = !y && Fe, de = () => X === "null" || X === null || !X ? "#000000" : X, [I, dt] = _([]), { colorBy: R } = V, Oe = {};
K.forEach((e, t) => {
Oe[t] = !0;
});
const [L, ht] = _(Oe), [Me, mt] = _(50), [ot, ut] = _(pe), [Xt, Be] = _(0), [ft, yt] = _(be), P = ((e, t, c, n, r) => {
let i = [];
return e.data && (i = t.colorBy === "index" ? e.data.map((l) => {
let a, m = !0;
return c.indexOf(l[e.indexBy]) > -1 ? (m = !1, a = n) : a = l[Q] ? l[Q] : r.getColor(l.id, l), {
enabled: m,
color: a,
id: l[e.indexBy],
label: l[e.indexBy]
};
}) : e.keys.map((l) => {
let a, m = !0;
return c.indexOf(l) > -1 ? (m = !1, a = n) : a = r.getColorByKey(l), {
enabled: m,
color: a,
id: l,
label: l
};
})), i;
})(
o,
V,
I,
Yt,
v
), ze = () => (rt && P.reverse(), /* @__PURE__ */ p(ye, { children: [
G && P.map((e) => /* @__PURE__ */ p(
"div",
{
className: `legend item ${e.enabled ? "" : "ignore"}`,
onClick: () => wt(e.id),
children: [
N && /* @__PURE__ */ s(
"input",
{
className: e.enabled ? "" : "ignore",
type: "checkbox",
checked: e.enabled,
style: {
backgroundColor: N ? R === "values" ? te : e.color : "none",
color: "#000"
}
}
),
!N && /* @__PURE__ */ s(
"input",
{
type: "checkbox",
checked: e.enabled,
style: {
color: "#000"
}
}
),
N && /* @__PURE__ */ s(
"span",
{
className: "checkmark-with-bg",
style: { backgroundColor: e.color }
}
),
!N && /* @__PURE__ */ s("span", { className: "checkmark" }),
le && /* @__PURE__ */ s(
"label",
{
className: e.enabled ? "" : "ignore",
style: {
backgroundColor: R === "values" ? te : e.color,
color: re
},
children: e.label
}
),
!le && /* @__PURE__ */ s(
"label",
{
className: e.enabled ? "" : "ignore",
style: {
color: re
},
children: e.label
}
)
]
}
)),
R === "values" && /* @__PURE__ */ p("div", { className: "legend item", children: [
/* @__PURE__ */ s(
"label",
{
className: "range min",
style: {
backgroundColor: v.getColorByValue(
v.minValue
),
color: "#fff"
}
}
),
/* @__PURE__ */ s("label", { children: g.formatNumber(
b.style === "percent" ? v.minValue / 100 : v.minValue,
{
...b,
minimumFractionDigits: 0
}
) })
] }),
R === "values" && /* @__PURE__ */ p("div", { className: "legend item", children: [
/* @__PURE__ */ s(
"label",
{
className: "range max",
style: {
backgroundColor: v.getColorByValue(
v.maxValue
),
color: "#fff"
},
children: " "
}
),
/* @__PURE__ */ s("label", { children: g.formatNumber(
b.style === "percent" ? v.maxValue / 100 : v.maxValue,
{
...b,
minimumFractionDigits: 0
}
) })
] }),
G && ve && K.map((e, t) => /* @__PURE__ */ p("div", { className: "legend item", onClick: () => Dt(t), children: [
/* @__PURE__ */ s(
"input",
{
className: N && L[t] ? "" : "ignore",
type: "checkbox",
checked: L[t],
style: {
backgroundColor: L[t] && N === !0 ? e.lineColor : "none",
color: "#000"
}
}
),
/* @__PURE__ */ s(
"span",
{
className: N ? "checkmark-with-bg" : "checkmark",
style: {
backgroundColor: L[t] && N === !0 ? e.lineColor : "none"
}
}
),
/* @__PURE__ */ s(
"label",
{
className: L[t] ? "" : "ignore",
style: {
backgroundColor: L[t] && le === !0 ? e.lineColor : "none",
color: re
},
children: e.title
}
)
] }))
] }));
Ht(() => {
(() => {
const c = 5 * Math.max(P.length - 5, 0);
mt(c);
})();
}, [P]);
const xt = {
bottom: `-${Me}px`
}, pt = {
bottom: `-${Me}px`,
gap: "0px"
// top: "0px",
}, bt = (e) => he(e, "1 0", Se, "Y"), gt = (e) => he(e, "4 4", C, "X"), vt = (e) => he(e, "1 0", Se, "X"), Nt = (e) => {
const t = P.find((c) => c.id === e.value);
return t ? t.color : "#FFFFFF";
}, It = (e) => {
const { yScale: t, bars: c } = e;
return /* @__PURE__ */ s(He, { children: c.filter((n) => n.data.value != null).map((n) => {
let r = n.data.indexValue;
o.dimensionsMetadata && o.dimensionsMetadata.size > 1 && (r = n.data.id);
const i = ie.filter(
(l) => l.serieLabel == r
)[0];
if (i && i.low && i.high) {
const l = t(parseFloat(i.low)), a = t(parseFloat(i.high));
return /* @__PURE__ */ p("g", { children: [
/* @__PURE__ */ s(
"line",
{
y1: l,
y2: a,
x1: n.x + n.width / 2,
x2: n.x + n.width / 2,
strokeWidth: 1,
stroke: C
}
),
/* @__PURE__ */ s(
"line",
{
y1: l,
y2: l,
x1: n.x + n.width / 2 - 3,
x2: n.x + n.width / 2 + 3,
strokeWidth: 1,
stroke: C
}
),
/* @__PURE__ */ s(
"line",
{
y1: a,
y2: a,
x1: n.x + n.width / 2 - 3,
x2: n.x + n.width / 2 + 3,
strokeWidth: 1,
stroke: C
}
)
] });
}
}) });
}, he = (e, t, c, n) => {
const { yScale: r, innerWidth: i, innerHeight: l } = e;
let a, m;
return n == "X" ? (a = [0, i], m = Te().x((u, E) => E === 0 ? -10 : u).y(() => r(0))) : (a = [0, l], m = Te().x(() => 0).y((u) => u)), /* @__PURE__ */ s(He, { children: /* @__PURE__ */ s(
"path",
{
d: m(a),
fill: "none",
stroke: c,
style: { pointerEvents: "none", strokeDasharray: t }
}
) });
}, O = (e, t) => I ? (V.colorBy === "index" || V.colorBy === "id" || V.colorBy === "values") && !t ? e.filter((c) => I.indexOf(c[o.indexBy]) === -1) : e ? e.filter((c) => I.indexOf(c) === -1) : [] : e, Lt = (e) => {
const t = St();
if (!e.value) return "";
const c = Object.assign({}, e);
(T || H) && fe.includes(String(c.value)) && (c.value = "");
let n;
Xe ? n = te : n = Nt(e);
let r = [], i = "";
if (H || T) {
const a = String(c.value).split(" ");
let m = 25;
y && $ === "Mobile" || U && !y ? m = (h == null ? void 0 : h.mobileMaxTickLength) ?? 25 : y && $ === "Tablet" || J && !y ? m = (h == null ? void 0 : h.tabletMaxTickLength) ?? 25 : window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches && !y && (m = 15), a.forEach((u) => {
i.length + String(u).length <= m ? i += (i ? " " : "") + u : (r.push(i), i = u);
}), i && r.push(i);
} else
r = [c.value];
let l = 12;
return U ? l = (h == null ? void 0 : h.mobileYAxisLineHeight) ?? 12 : J && (l = (h == null ? void 0 : h.tabletYAxisLineHeight) ?? 12), B > 0 && B < 180 ? /* @__PURE__ */ p("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
j && /* @__PURE__ */ s(
"line",
{
stroke: n,
strokeWidth: 1.5,
y1: -32,
y2: -12
}
),
/* @__PURE__ */ s("g", { transform: `translate(0, ${e.y + ee})`, children: r.map((a, m) => /* @__PURE__ */ s(
"text",
{
transform: `rotate(${B})`,
textAnchor: "start",
y: typeof e.value == "number" ? 0 : m * l,
dominantBaseline: "middle",
style: {
...t.axis.ticks.text,
fill: D === "null" ? "black" : D,
fontSize: "12px",
fontFamily: "Roboto"
},
children: a
},
a
)) })
] }) : B > 180 && B < 360 ? /* @__PURE__ */ p("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
j && /* @__PURE__ */ s(
"line",
{
stroke: n,
strokeWidth: 1.5,
y1: -32,
y2: -12
}
),
/* @__PURE__ */ s("g", { transform: `translate(0, ${e.y + ee})`, children: r.map((a, m) => /* @__PURE__ */ s(
"text",
{
transform: `rotate(${B})`,
textAnchor: "end",
y: typeof e.value == "number" ? 0 : m * l,
dominantBaseline: "middle",
style: {
...t.axis.ticks.text,
fill: D === "null" ? "black" : D,
fontSize: "12px",
fontFamily: "Roboto"
},
children: a
},
m
)) })
] }) : /* @__PURE__ */ p("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
j && /* @__PURE__ */ s(
"line",
{
stroke: n,
strokeWidth: 1.5,
y1: -32,
y2: -12
}
),
/* @__PURE__ */ s("g", { transform: `translate(0, ${e.y + ee})`, children: r.map((a, m) => /* @__PURE__ */ s(
"text",
{
transform: `rotate(${B})`,
textAnchor: "middle",
y: typeof e.value == "number" ? 0 : m * l,
dominantBaseline: "middle",
style: {
...t.axis.ticks.text,
fill: D === "null" ? "black" : D,
fontSize: "12px",
fontFamily: "Roboto"
},
children: a
},
m
)) })
] });
}, kt = (e) => {
if (!e.value || (H || T) && fe.includes(String(e.value)))
return "";
let t = e.value;
if (f === "vertical") {
const a = F || b;
t = g.formatNumber(
a.style === "percent" ? t / 100 : t,
{
...a
}
);
}
let c = 25;
y && $ === "Mobile" || U && !y ? c = (h == null ? void 0 : h.mobileMaxTickLength) ?? 25 : y && $ === "Tablet" || J && !y ? c = (h == null ? void 0 : h.tabletMaxTickLength) ?? 25 : window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches && !y && (c = 15);
const n = typeof t == "string" ? t.split(" ") : [t], r = [];
let i = "";
n.forEach((a) => {
i.length + String(a).length <= c ? i += (i ? " " : "") + a : (r.push(i), i = a);
}), i && r.push(i);
let l = 12;
return y && $ === "Mobile" || U && !y ? l = (h == null ? void 0 : h.mobileYAxisLineHeight) ?? 12 : (y && $ === "Tablet" || J && !y) && (l = (h == null ? void 0 : h.tabletYAxisLineHeight) ?? 12), /* @__PURE__ */ p("g", { transform: `translate(${e.x},${e.y})`, children: [
/* @__PURE__ */ s("line", { x1: -5, x2: 0, y1: 0, y2: 0, stroke: "#000", strokeWidth: 1 }),
r.map((a, m) => /* @__PURE__ */ s(
"text",
{
x: -10,
y: typeof t == "number" ? 0 : m * l,
textAnchor: "end",
dominantBaseline: "middle",
style: {
fill: D === "null" ? "black" : D,
fontSize: "12px",
fontFamily: "Roboto"
},
children: a
},
a
))
] });
}, wt = (e) => {
const t = I.slice();
if (t.indexOf(e) > -1) {
const c = t.indexOf(e);
t.splice(c, 1);
} else
t.push(e);
dt(t);
}, Dt = (e) => {
const t = Object.assign({}, L);
t[e] = !t[e], ht(t);
}, Ft = ({ bars: e }) => /* @__PURE__ */ s("g", { children: e.map((t) => {
const { width: c, height: n, y: r, x: i, data: l } = t;
if (f === "horizontal" && n <= ce || f === "vertical" && c <= se)
return;
const a = l.value ? g.formatNumber(
b.style === "percent" ? l.value / 100 : l.value,
b
) : "", m = a.length;
let u, E;
if (f === "vertical" && c >= se || f === "horizontal" && n >= ce)
return f === "vertical" ? (u = r - 6, E = i + c / 2 - m * 3.5) : (u = r + n / 2 + 4, E = i + c + 5), /* @__PURE__ */ s(
"text",
{
y: u,
x: E,
style: { fill: de() },
children: `${a}`
}
);
}) }), Ot = (e) => {
const t = o.data.filter((n) => I.indexOf(n[o.indexBy]) == -1).map((n) => n[o.indexBy]), { bars: c } = e;
return /* @__PURE__ */ s("g", { children: t.filter(
(n) => c.filter((r) => r.data.indexValue == n).length > 0
).map((n) => {
var q;
const r = c.filter((d) => d.data.indexValue == n);
let i = "right", l = 0, a = 0;
if (f == "horizontal")
M === "stacked" ? (Z ? l = e.innerWidth - 20 : (l = r.map((d) => d.width).reduce((d, x) => d + x), W && (l = e.innerWidth - l)), a = e.yScale(n) + r[0].height / 2) : (Z ? l = e.innerWidth : (l = r.map((d) => d.width).reduce((d, x) => d > x ? d : x), W && (l = e.innerWidth - l)), a = e.yScale(n) + r.map((d) => d.height).reduce((d, x) => d + x) / 2), l = l + parseInt(z) + 5;
else if (i = "middle", M === "stacked")
l = e.xScale(n) + r[0].width / 2, Z ? a = a - parseInt(z) : W ? a = parseInt(z) + r.map((d) => d.height).reduce((d, x) => d + x) + 14 : a = e.innerHeight - parseInt(z) - r.map((d) => d.height).reduce((d, x) => d + x) - 5;
else if (l = e.xScale(n) + r.map((d) => d.width).reduce((d, x) => d + x) / 2, W && (a = e.innerHeight), Z)
a = a - parseInt(z);
else {
if (r.length % 2 == 1) {
const d = Math.floor(r.length / 2);
a = r[d].height;
} else {
const d = r.length / 2;
a = Math.max(
r[d].height,
r[d - 1].height
);
}
W ? a = a + 14 + parseInt(z) : a = e.innerHeight - a - parseInt(z) - 5;
}
const m = o.data.filter(
(d) => d[o.indexBy] === n
)[0];
let u = m.parent_variables ? m.parent_variables[De] : m[De];
const E = R !== "index" ? (q = I == null ? void 0 : I.map((d) => m[d])) == null ? void 0 : q.reduce((d, x) => d + x, 0) : 0;
return u -= E, /* @__PURE__ */ s("text", { y: a, x: l, style: { fill: de() }, children: /* @__PURE__ */ p("tspan", { textAnchor: i, children: [
ke ? ke + " " : "",
g.formatNumber(
we.style === "percent" ? u / 100 : u,
we
)
] }) });
}) });
}, Mt = {
top: ot,
right: Re,
bottom: ft,
left: je
};
let me, oe = 0, $e = 0;
ge && (me = Ae.parse(ge, {
header: !1,
dynamicTyping: !0
}), oe = Math.max(...me.data.map((e) => e[1])), $e = Math.min(...me.data.map((e) => e[1])));
const Ee = (() => {
const e = [];
if (ie && (ie.forEach((t) => {
t.low && e.push(parseFloat(t.low)), t.high && e.push(parseFloat(t.high));
}), o.data)) {
const t = O(o.data, !1), c = O(o.keys, !0);
t.forEach((n) => {
c.forEach((r) => {
n[r] && e.push(n[r]);
});
});
}
return e;
})(), Bt = Math.max(...Ee), zt = Math.min(...Ee), $t = () => {
const e = O(o.data, !1), t = O(o.keys, !0);
if (M === "stacked" && A !== "fixed" || A === "fixed" && S === null || // @ts-ignore
S === "") {
let c = t.length > 0 ? t : o.keys;
return Math.max(
Math.max(
...e.map((n) => c.map((r) => n[r] ? n[r] : 0)).map(
(n) => n.reduce((r, i) => Math.max(r + i, r + 0))
)
),
oe
) * 1.1;
}
return A === "fixed" && S !== null && // @ts-ignore
S !== "" ? S : Math.max(oe, Bt) * 1.05;
}, Et = () => {
const e = Math.min($e, zt);
return A === "fixed" && ne !== null && // @ts-ignore
ne !== "" ? ne : e > 0 ? e * 0.9 : e * 1.1;
}, Vt = $t(), Wt = Et(), k = ["grid", "axes", "bars"];
Ge && k.push(Ot), k.push(bt), k.push(vt), ve && K && K.forEach((e, t) => {
if (L[t] == !0 || L[t] == null) {
const { csvLineLayerData: c, lineColor: n, tooltip: r } = e;
if (e.app == "csv") {
const i = Ae.parse(c, {
header: !1,
dynamicTyping: !0
});
if (i.data && i.data.filter((l) => l[1] !== null).length > 0) {
i.data = i.data.filter((a) => a[1] !== null);
const l = _e(
i,
n,
f,
M,
O(o.keys, !0),
r,
e.title,
""
);
k.push(l);
}
} else if (e.measure[0]) {
const i = {}, l = o.data.map((u) => [
u[o.indexBy],
u.variables[e.measure[0]]
]), a = o.metadata.measures ? o.metadata.measures.filter((u) => u.value == e.measure[0]) : [];
i.data = l;
const m = _e(
i,
n,
f,
M,
O(o.keys, !0),
r,
e.title,
a.length > 0 ? a[0].label : ""
);
k.push(m);
}
}
}), Ie === Pt && k.push(Ft), qe && k.push(gt), k.push(It);
let ue = parseInt(at);
const Ve = () => /* @__PURE__ */ s(ye, { children: G && Ne && /* @__PURE__ */ s("div", { className: "legend item", children: /* @__PURE__ */ s("label", { className: "legend-title", children: Ne }) }) }), fe = [];
if (T || H) {
ue = Number.parseInt(h.yAxisTickValues);
const e = new Map(Object.entries(((We = h == null ? void 0 : h.labels) == null ? void 0 : We.xAxis) ?? {}));
for (const [t, c] of e)
c || fe.push(t);
}
return /* @__PURE__ */ s("div", { style: { height: Pe }, children: (o == null ? void 0 : o.data) && o.data.length > 0 && /* @__PURE__ */ p(ye, { children: [
/* @__PURE__ */ s(
_t,
{
colorBy: V.colorBy,
animate: !0,
enableLabel: Ie == Rt,
...o,
maxValue: Vt,
minValue: Wt,
keys: O(o.keys, !0),
data: O(o.data, !1),
groupMode: M || "grouped",
margin: Mt,
innerPadding: Je,
valueScale: {
type: Ke,
clamp: A === "fixed" && lt
},
colors: (e) => e && e.data[Q] ? e.data[Q] : v.getColor(e.id, e.data),
borderColor: "#000",
reverse: W,
axisTop: null,
axisRight: Ce ? {
tickSize: f == "horizontal" && j || f === "vertical" ? 5 : 0,
tickPadding: 5,
tickRotation: 0,
tickValues: ue,
legend: Y.right,
legendPosition: "middle",
legendOffset: parseInt(Qe),
format: (e) => {
if (!e) return "";
if (f == "vertical") {
const t = F || b;
return g.formatNumber(
t.style === "percent" ? e / 100 : e,
{
...t
}
);
}
return e;
}
} : null,
axisBottom: (H || T) && (h == null ? void 0 : h.xAxisDisabled) === !0 ? null : f === "horizontal" ? {
legend: Y.bottom,
legendPosition: "middle",
legendOffset: parseInt(Le),
tickPadding: 5,
tickRotation: 0,
tickValues: parseInt(tt),
format: (e) => {
if (!e) return "";
if (f == "horizontal") {
const t = F || b;
return g.formatNumber(
t.style === "percent" ? e / 100 : e,
{
...t
}
);
}
return e;
}
} : {
legend: Y.bottom,
legendPosition: "middle",
legendOffset: parseInt(Le),
renderTick: Lt
},
axisLeft: {
tickSize: f === "horizontal" && j || f === "vertical" ? 5 : 0,
tickPadding: 5,
tickRotation: 0,
tickValues: ue,
legend: Y.left,
legendPosition: "middle",
legendOffset: Number.parseInt(Ye),
...H || T ? { renderTick: kt } : {
format: (e) => {
if (!e) return "";
if (f === "vertical") {
const t = F || b;
return g.formatNumber(
t.style === "percent" ? e / 100 : e,
{
...t
}
);
}
return e;
}
}
},
enableGridY: it,
enableGridX: st,
layout: f,
labelSkipWidth: se,
labelSkipHeight: ce,
padding: Ze,
labelTextColor: de(),
label: (e) => g.formatNumber(
b.style === "percent" && e.value ? e.value / 100 : e.value,
b
),
layers: k,
onMouseEnter: (e) => {
},
onMouseLeave: (e) => {
},
motionStiffness: 130,
motionDamping: 15,
tooltip: (e) => Ue && ae && ae.trim().length > 0 ? /* @__PURE__ */ s(
Tt,
{
intl: g,
format: b,
d: e,
tooltip: ae,
tooltipEnableMarkdown: et
}
) : null,
theme: {
tooltip: {
basic: {
whiteSpace: "pre",
display: "flex",
alignItems: "center"
},
container: {
background: "transparent",
boxShadow: ""
},
table: {},
tableCell: { padding: "3px 5px" }
}
}
}
),
(w === "top" || w === "bottom") && /* @__PURE__ */ s(
"div",
{
className: `legends container has-standard-12-font-size ${w}`,
children: /* @__PURE__ */ p("div", { className: "legend-sections", children: [
/* @__PURE__ */ s("div", { className: "title-section", children: Ve() }),
/* @__PURE__ */ s(
jt,
{
onWrapChange: (e) => {
w === "top" ? (ut(pe + e / 2 * 40), Be(e)) : (yt(be + e / 2 * 25), Be(e));
},
className: "legends container has-standard-12-font-size items-section",
children: ze()
}
)
] })
}
),
(w === "right" || w === "left") && /* @__PURE__ */ p(
"div",
{
className: `legends container has-standard-12-font-size ${w}`,
style: w === "right" ? xt : pt,
children: [
Ve(),
ze()
]
}
)
] }) });
}, ia = At(Kt);
export {
ia as default
};