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