@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.
422 lines (421 loc) • 13.7 kB
JavaScript
import { jsxs as v, jsx as a, Fragment as J } from "react/jsx-runtime";
import { useState as $, useEffect as rt, Fragment as nt } from "react";
import { injectIntl as st } from "react-intl";
import { ResponsiveLine as lt } from "@nivo/line";
import it from "./Tooltip.js";
import { area as ct, line as ot } from "d3-shape";
import { useTheme as mt } from "@nivo/theming";
import dt from "../../layout/FlexWrapDetector.js";
import V from "../../utils/deviceType.js";
const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].includes(V()), ye = V() === "mobile", be = ["tablet", "midTablet"].includes(V()), ut = (m, x) => {
const N = document.createElement("canvas").getContext("2d");
return N.font = x, N.measureText(m).width;
}, pt = ({
editing: m,
previewMode: x,
app: Z,
legends: N,
tooltip: k,
tooltipEnabled: ge,
options: d,
intl: I,
groupMode: q,
reverse: xt,
marginLeft: ve,
lineLabelPosition: Ne,
marginTop: Q,
marginRight: Ee,
marginBottom: X,
format: E,
colors: yt,
offsetY: Oe,
height: Te,
showLegends: P,
legendPosition: h,
tickRotation: y,
offsetText: j,
tickColor: w,
legendLabel: C,
xLabelColor: O,
colorGenerator: ee,
legendCheckBack: A,
legendLabelBack: De,
legendLabelColor: te,
highlightXAxisLine: Me,
showTickLine: S,
showRightAxis: $e,
valueScale: bt,
enableArea: ke,
areaShadingCriteria: ae,
areaLowerBound: re,
areaUpperBound: ne,
showPoints: Ie,
maxValue: Le,
fixedMinValue: H,
fixedMaxValue: R,
offsetBottom: Fe,
yAxisTickValues: We,
enableGridY: ze,
enableGridX: _e,
overrideTickColor: U,
offsetRight: Be,
selectedMeasures: je,
tooltipEnableMarkdown: we,
minMaxClamp: Ae,
reverseLegend: Se,
customAxisFormat: L,
mobileCustomization: He,
lineCurve: Re,
customLabels: G
}) => {
var ue, pe, xe;
const s = JSON.parse(decodeURIComponent(He)), se = ft && ((s == null ? void 0 : s.showCustomization) ?? !1), F = se && x !== "Desktop", W = !m && se, [le, Ue] = $(50), [ie, Ge] = $(Q), [gt, ce] = $(0), [oe, Ye] = $(X), [T, Je] = $([]), z = d.data.map((e) => ({
id: e.id,
label: G && G[e.id] ? G[e.id] : e.label || e.id,
color: ee.getColor(e.id, e)
})), me = () => (Se && z.reverse(), /* @__PURE__ */ a(J, { children: P && z.map((e, t) => /* @__PURE__ */ v("div", { className: "legend item", onClick: () => Ze(e.id), children: [
/* @__PURE__ */ a(
"input",
{
className: "ignore",
type: "checkbox",
checked: T.length === 0 || !T.includes(e.id),
readOnly: !0,
style: {
backgroundColor: A === !0 ? e.color : "none",
color: te
}
}
),
/* @__PURE__ */ a(
"span",
{
className: A === !0 ? "checkmark-with-bg" : "checkmark",
style: {
backgroundColor: A === !0 ? e.color : "transparent"
}
}
),
/* @__PURE__ */ a(
"label",
{
style: {
backgroundColor: De === !0 ? e.color : "transparent",
color: te
},
children: e.label
}
)
] }, t)) }));
rt(() => {
(() => {
const r = 5 * Math.max(z.length - 5, 0);
Ue(r);
})();
}, [z]);
const Ke = {
bottom: `-${le}px`
}, Ve = {
bottom: `-${le}px`,
gap: "0px",
top: "0px"
}, _ = (e) => T.length ? e.filter((t) => T.indexOf(t.id) === -1) : e, Ze = (e) => {
const t = T.slice();
if (t.indexOf(e) > -1) {
const r = t.indexOf(e);
t.splice(r, 1);
} else
t.push(e);
Je(t);
}, qe = (e) => {
const t = Object.assign({}, e), r = mt();
(F || W) && he.includes(String(t.value)) && (t.value = "");
let l = [], n = "";
if (F || W) {
const c = String(t.value).split(" ");
let o = 25;
m && x === "Mobile" || ye && !m ? o = (s == null ? void 0 : s.mobileMaxTickLength) ?? 25 : m && x === "Tablet" || be && !m ? o = (s == null ? void 0 : s.tabletMaxTickLength) ?? 25 : window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches && !m && (o = 15), c.forEach((b) => {
n.length + String(b).length <= o ? n += (n ? " " : "") + b : (l.push(n), n = b);
}), n && l.push(n);
} else
l = [t.value];
let i = 12;
return m && x === "Mobile" || ye && !m ? i = (s == null ? void 0 : s.mobileYAxisLineHeight) ?? 12 : (m && x === "Tablet" || be && !m) && (i = (s == null ? void 0 : s.tabletYAxisLineHeight) ?? 12), ut(t.value, "12px Roboto") + 15, y > 0 && y < 180 ? /* @__PURE__ */ v("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
S && /* @__PURE__ */ a(
"line",
{
stroke: U ? w : K,
strokeWidth: 1.5,
y1: -32,
y2: -12
}
),
/* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + j})`, children: l.map((c, o) => /* @__PURE__ */ a(
"text",
{
transform: `rotate(${y})`,
textAnchor: "start",
y: typeof e.value == "number" ? 0 : o * i,
dominantBaseline: "middle",
style: {
...r.axis.ticks.text,
fill: O === "null" ? "black" : O,
fontSize: "12px",
fontFamily: "sans-serif"
},
children: c
},
c
)) })
] }) : y > 180 && y < 360 ? /* @__PURE__ */ v("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
S && /* @__PURE__ */ a(
"line",
{
stroke: U ? w : K,
strokeWidth: 1.5,
y1: -32,
y2: -12
}
),
/* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + j})`, children: /* @__PURE__ */ a(
"text",
{
transform: `rotate(${y})`,
textAnchor: "end",
dominantBaseline: "middle",
style: {
...r.axis.ticks.text,
fill: O,
fontSize: "12px"
},
children: t.value
}
) })
] }) : /* @__PURE__ */ v("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
S && /* @__PURE__ */ a(
"line",
{
stroke: U ? w : K,
strokeWidth: 1.5,
y1: -32,
y2: -12
}
),
/* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + j})`, children: l.map((c, o) => /* @__PURE__ */ a(
"text",
{
transform: `rotate(${y})`,
textAnchor: "middle",
y: typeof e.value == "number" ? 0 : o * i,
dominantBaseline: "middle",
style: {
...r.axis.ticks.text,
fill: O === "null" ? "black" : O,
fontSize: "12px",
fontFamily: "sans-serif"
},
children: c
},
c
)) })
] });
}, Qe = ({ series: e, xScale: t, yScale: r, innerHeight: l }) => {
const n = e && e.length > 0 ? e[0].color : "#3daff7", i = [];
e[0] && e[0].data.forEach((p) => {
Z == "csv" ? d.keys.forEach((g) => {
i.push({ measure: g, min: p.data.variables[g] });
}) : je.forEach((g) => {
i.push({ measure: g, min: p.data.variables[g] });
});
});
const c = i.sort((p, g) => p.min - g.min), o = ae == "CUSTOM_BETWEEN_TWO_LINES" && re ? re : c[0].measure, b = ae == "CUSTOM_BETWEEN_TWO_LINES" && ne ? ne : c[c.length - 1].measure, at = ct().x((p) => t(p.data.x)).y0((p) => r(p.data.variables[o])).y1((p) => r(p.data.variables[b]));
return /* @__PURE__ */ a(J, { children: e && e[0] && /* @__PURE__ */ a(
"path",
{
d: at(e[0].data),
fill: n,
fillOpacity: 0.4
}
) });
}, Xe = ({ series: e, xScale: t, yScale: r, innerHeight: l, innerWidth: n }) => {
const i = [0, n], c = ot().x((o, b) => b === 0 ? -10 : o).y((o) => r(0));
return /* @__PURE__ */ a(nt, { children: /* @__PURE__ */ a(
"path",
{
d: c(i),
fill: "none",
stroke: ht,
style: { pointerEvents: "none", strokeDasharray: "4 4" }
}
) });
}, D = ["grid", "axes", "lines", "legends"];
ke && D.push(Qe), Ie && (D.push("points"), D.push("mesh")), Me && D.push(Xe);
let M = [];
_(d.data).forEach((e) => {
e.data && (M = [...M, ...e.data.map((t) => t.y)]);
});
const Pe = () => {
if (q === "stacked") {
const e = [];
_(d.data).forEach((l) => {
e.push(...l.data);
});
const r = [];
e.forEach((l) => {
r.indexOf(l.x) == -1 && r.push(l.x);
}), u = Math.max(
...r.map((l) => e.filter((n) => n.x == l).map((n) => n.y).reduce((n, i) => Math.max(n + i, n + 0)))
), f = Math.min(
...r.map((l) => e.filter((n) => n.x == l).map((n) => n.y).reduce((n, i) => Math.min(n - i, i - n)))
);
} else
M.length > 0 && (u = Math.max(...M), f = Math.min(...M));
return u = u < 0 ? u * 0.9 : u * 1.1, f = f > 0 ? f * 0.9 : f * 1.1, { min: f, max: u };
};
let f = "auto", u = "auto";
const B = Pe();
Le == "fixed" ? (f = H != null && H != "" ? H : B.min, u = R != null && R != "" ? R : B.max) : (f = B.min, u = B.max);
const de = () => /* @__PURE__ */ a(J, { children: P && C && /* @__PURE__ */ a("div", { className: "legend item", children: /* @__PURE__ */ a("label", { className: "legend-title", children: C }) }) }), Ce = {
top: ie,
right: Ee,
bottom: oe,
left: ve
};
let Y = parseInt(We);
const et = d.data && ((pe = (ue = d.data) == null ? void 0 : ue.filter((e) => {
var t;
return ((t = e == null ? void 0 : e.data) == null ? void 0 : t.length) > 0;
})) == null ? void 0 : pe.length), he = [];
if (F || W) {
Y = Number.parseInt(s.yAxisTickValues);
const e = new Map(Object.entries(((xe = s == null ? void 0 : s.labels) == null ? void 0 : xe.xAxis) ?? {}));
for (const [t, r] of e)
r || he.push(t);
}
const fe = _(d.data), tt = ["grid", "axes", "legends"];
if (d != null && d.data && et > 0) {
let e = _(d.data);
return /* @__PURE__ */ v("div", { style: { height: Te }, children: [
/* @__PURE__ */ a(
lt,
{
curve: Re,
data: fe,
margin: Ce,
xScale: { type: "point" },
yScale: {
type: "linear",
min: f,
max: u,
stacked: q == "stacked",
reverse: !1,
clamp: Ae
},
layers: fe.length === 0 ? tt : D,
axisTop: null,
axisRight: $e ? {
tickSize: 5,
tickValues: Y,
tickPadding: 5,
tickRotation: 0,
legend: N.right,
legendPosition: "middle",
legendOffset: parseInt(Be),
format: (t) => {
const r = L || E;
return I.formatNumber(
r.style === "percent" ? t / 100 : t,
{
...r
}
);
}
} : null,
enableGridY: ze,
enableGridX: _e,
enablePointLabel: Ne === "top",
pointLabel: (t) => I.formatNumber(
E.style === "percent" ? t.yFormatted / 100 : t.yFormatted,
E
),
lineWidth: 3,
colors: (t) => ee.getColor(t.id, t),
axisBottom: (F || W) && (s == null ? void 0 : s.xAxisDisabled) === !0 ? null : {
renderTick: qe,
legend: N.bottom,
legendPosition: "middle",
legendOffset: Number.parseInt(Fe)
},
axisLeft: {
tickSize: 5,
tickValues: Y,
tickPadding: 5,
tickRotation: 0,
legend: N.left,
legendPosition: "middle",
legendOffset: Number.parseInt(Oe),
format: (t) => {
const r = L || E;
return I.formatNumber(
r.style === "percent" ? t / 100 : t,
{
...r
}
);
}
},
tooltip: (t) => ge && k && k.trim().length > 0 ? /* @__PURE__ */ a(
it,
{
intl: I,
format: E,
d: t,
tooltip: k,
tooltipEnableMarkdown: we
}
) : null,
pointSize: 10,
pointBorderWidth: 2,
pointBorderColor: { from: "serieColor" },
useMesh: e.length > 0 && e[0].data.length > 0
},
/* @__PURE__ */ new Date()
),
(h === "top" || h === "bottom") && /* @__PURE__ */ a(
"div",
{
className: `legends container has-standard-12-font-size ${h}`,
style: h === "top" ? { marginTop: `${ie}px` } : h === "bottom" ? { marginBottom: `${oe}px` } : {},
children: /* @__PURE__ */ v("div", { className: "legend-sections", children: [
/* @__PURE__ */ a("div", { className: "title-section", children: de() }),
/* @__PURE__ */ a(
dt,
{
onWrapChange: (t) => {
h === "top" ? (Ge(Q + t / 2 * 40), ce(t)) : (Ye(X + t / 2 * 25), ce(t));
},
className: "legends container has-standard-12-font-size items-section",
children: me()
}
)
] })
}
),
(h === "right" || h === "left") && /* @__PURE__ */ v(
"div",
{
className: `legends container has-standard-12-font-size ${h}`,
style: h === "right" ? Ke : Ve,
children: [
de(),
me()
]
}
)
] });
}
return /* @__PURE__ */ a("div", {});
}, It = st(pt);
export {
It as default
};