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