@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.
253 lines (252 loc) • 7.12 kB
JavaScript
import { jsx as r, jsxs as p, Fragment as L } from "react/jsx-runtime";
import { useState as l, useEffect as M } from "react";
import { injectIntl as pe } from "react-intl";
import { ResponsivePie as ue } from "@nivo/pie";
import fe, { formatContent as ge } from "./Tooltip.js";
import "@nivo/colors";
import "d3";
import { v4 as he } from "uuid";
import be from "../../layout/FlexWrapDetector.js";
import Le from "../../utils/deviceType.js";
const $ = Le() === "mobile", xe = ({
legends: ke,
marginLeft: j,
marginTop: x,
marginRight: w,
marginBottom: k,
options: u,
intl: f,
format: g,
colors: ve,
groupMode: Ce,
tooltipEnabled: B,
height: I,
showLegends: v,
legendPosition: a,
tickRotation: ye,
tickColor: Ne,
tooltip: s,
startAngle: z,
endAngle: O,
legendLabel: C,
legendCheckBack: y,
legendLabelBack: V,
legendLabelColor: R,
centerLabel: H,
showArcLabels: E,
showArcLinkLabels: X,
slicePadding: Y,
colorGenerator: N,
centerLabelFontWeight: q,
centerLabelFontSize: J,
centerLabelXOffset: K,
centerLabelYOffset: Q,
tooltipEnableMarkdown: U,
reverseLegend: Z,
showPercentage: _
}) => {
const [c, G] = l([]), [P, ee] = l(s), [o, te] = l(u), [S, re] = l(50), [T, ae] = l(x), [Se, A] = l(0), [D, ne] = l(k), d = o.data.sort((e, t) => e.position && t.position ? e.position - t.position : 0).map((e, t) => ({
color: N.getColor(e.id, e),
id: e.id,
label: e.label
}));
M(() => {
ee(s), te({
...u,
id: he()
});
}, [s, u]), M(() => {
(() => {
const n = 5 * Math.max(d.length - 5, 0);
re(n);
})();
}, [d]);
const oe = {
bottom: `-${S}px`
}, le = {
bottom: `-${S}px`,
gap: "0px"
}, ie = (e) => {
const t = c.slice();
if (t.indexOf(e) > -1) {
const n = t.indexOf(e);
t.splice(n, 1);
} else
t.push(e);
G(t);
}, se = (e) => c ? e.filter((t) => c.indexOf(t.id) === -1) : e;
if (!o || !o.data)
return null;
const ce = {
top: T,
right: w,
bottom: D,
left: j
}, W = () => /* @__PURE__ */ r(L, { children: v && C && /* @__PURE__ */ r("div", { className: "legend item", children: /* @__PURE__ */ r("label", { className: "legend-title", children: C }) }) }), F = () => (Z && d.reverse(), /* @__PURE__ */ r(L, { children: v && d.map((e) => /* @__PURE__ */ p("div", { className: "legend item", onClick: () => ie(e.id), children: [
/* @__PURE__ */ r(
"input",
{
className: "ignore",
type: "checkbox",
checked: c.length == 0 || !c.includes(e.id)
}
),
/* @__PURE__ */ r(
"span",
{
className: y ? "checkmark-with-bg" : "checkmark",
style: {
backgroundColor: y == !0 ? e.color : "transparent"
}
}
),
/* @__PURE__ */ r(
"label",
{
style: {
backgroundColor: V == !0 ? e.color : "transparent",
color: R
},
children: e.label
}
)
] })) })), de = (e) => {
const { centerX: t, centerY: n } = e, i = H.split(/[\r\n]/g);
let m = 0;
return e.dataWithArc && (m = e.dataWithArc.reduce(
function(h, b) {
return h + b.value;
},
0
)), /* @__PURE__ */ r(
"text",
{
x: t,
y: n,
textAnchor: "start",
dominantBaseline: "central",
children: i.map((h, b) => /* @__PURE__ */ r(
"tspan",
{
x: t + parseInt(K),
y: n + parseInt(Q) + b * 20,
style: {
fontSize: J + "px",
fontWeight: q,
fill: "#000"
},
children: ge(h, { totalValue: m }, f)
}
))
}
);
}, me = (e, t) => {
if (t) {
const n = e.reduce((i, m) => i + m.value, 0);
return e.map((i) => ({
...i,
value: i.value / n * 100
}));
}
return e;
};
return /* @__PURE__ */ r("div", { style: { height: I }, className: "pie-chart", children: o && o.data && o.data.length > 0 && /* @__PURE__ */ p(L, { children: [
/* @__PURE__ */ r(
ue,
{
data: se(me(o.data, _)),
margin: ce,
startAngle: z,
endAngle: O,
sortByValue: !0,
innerRadius: 0.7,
padAngle: Y,
cornerRadius: 3,
colors: (e) => N.getColor(e.id, e.data),
borderWidth: 1,
borderColor: { from: "color", modifiers: [["brighter", "2"]] },
enableArcLabels: E,
enableArcLinkLabels: X,
arcLabelsTextColor: "#333333",
arcLinkLabelsSkipAngle: 5,
arcLabelsSkipAngle: 15,
sliceLabelsSkipAngle: 20,
arcLabel: (e) => f.formatNumber(
g.style === "percent" ? e.value / 100 : e.value,
g
),
radialLabelsSkipAngle: 20,
radialLabelsTextColor: "#333333",
radialLabelsLinkOffset: 1,
radialLabelsLinkDiagonalLength: 5,
radialLabelsLinkHorizontalLength: 16,
radialLabelsLinkStrokeWidth: 1,
radialLabelsLinkColor: { from: "color" },
arcLinkLabel: (e) => e.label,
layers: [
"arcLinkLabels",
"arcs",
"arcLabels",
"legends",
de
],
animate: !0,
motionStiffness: 90,
motionDamping: 15,
legends: [],
labelTextColor: { from: "color", modifiers: [["darker", 1.6]] },
tooltip: (e) => {
if (e.datum && e.datum.data && e.datum.data.variables) {
const t = e.datum.arc.angleDeg / 360 * 100;
e.datum.data.variables.valuePercent = t, e.datum.data.variables.category = e.datum.id;
}
return B && s && s.trim().length > 0 ? /* @__PURE__ */ r(
fe,
{
intl: f,
format: g,
d: e,
tooltip: P,
tooltipEnableMarkdown: U
}
) : null;
}
},
o.id
),
(a === "top" || a === "bottom") && /* @__PURE__ */ r(
"div",
{
className: `legends container has-standard-12-font-size ${a}`,
style: a === "top" ? { marginTop: $ && `${T}px` } : a === "bottom" ? { marginBottom: `${D}px` } : {},
children: /* @__PURE__ */ p("div", { className: "legend-sections", children: [
/* @__PURE__ */ r("div", { className: "title-section", children: W() }),
/* @__PURE__ */ r(
be,
{
onWrapChange: (e) => {
a === "top" && $ ? (ae(x + e / 2 * 40), A(e)) : (ne(k + e / 2 * 25), A(e));
},
className: "legends container has-standard-12-font-size items-section",
children: F()
}
)
] })
}
),
(a === "right" || a === "left") && /* @__PURE__ */ p(
"div",
{
className: `legends container has-standard-12-font-size ${a}`,
style: a === "right" ? oe : le,
children: [
W(),
F()
]
}
)
] }) });
}, Ie = pe(xe);
export {
Ie as default
};