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