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