@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.
232 lines (231 loc) • 7.05 kB
JavaScript
import { jsxs as g, jsx as c } from "react/jsx-runtime";
import me, { useState as pe } from "react";
import { injectIntl as he } from "react-intl";
import { ResponsiveRadar as ue } from "@nivo/radar";
import be from "./Legends.js";
import A from "../../utils/deviceType.js";
import "lodash";
const xe = "none", ye = ({
editing: i,
legends: Le,
marginLeft: O,
marginTop: V,
marginRight: z,
marginBottom: F,
options: d,
intl: T,
format: m,
height: H,
showLegends: $,
legendPosition: w,
legendLabel: I,
legendCheckBack: W,
legendLabelBack: Y,
legendLabelColor: P,
colorGenerator: U,
reverseLegend: X,
radarCurve: j,
radarFillOpacity: J,
radarBorderWidth: K,
radarGridLevels: D,
radarGridShape: _,
radarGridLabelOffset: q = 10,
radarEnableDots: G,
radarDotSize: Q,
radarEnableDotLabel: Z,
radarDotLabelOffset: C,
mobileCustomization: E,
previewMode: x
}) => {
const [L, S] = pe([]), p = A() === "mobile", h = ["tablet", "midTablet"].includes(A()), ee = p || h, e = me.useMemo(
() => JSON.parse(decodeURIComponent(E)),
[E]
), u = ee && ((e == null ? void 0 : e.showCustomization) ?? !1), R = u && x !== "Desktop", k = !i && u;
if (!d || !d.data) return null;
const te = (t) => t.filter((a) => !L.includes(a)), ae = (t) => S(
(a) => a.includes(t) ? a.filter((l) => l !== t) : [...a, t]
);
function v({
tickValue: t,
editing: a,
previewMode: l,
isMobileDevice: o,
isTabletDevice: s,
mobileConfigSettings: r,
isNotDesktopPreview: y,
isNotEditingAndIsMobileCustomizationEnabled: b
}) {
let n = 25;
return (y || b) && (a && l === "Mobile" || o && !a ? n = (r == null ? void 0 : r.mobileMaxTickLength) ?? 25 : a && l === "Tablet" || s && !a ? n = (r == null ? void 0 : r.tabletMaxTickLength) ?? 25 : !a && window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches && (n = 15)), n;
}
const B = (t, a) => {
const l = String(t).split(" "), o = [];
let s = "";
return l.forEach((r) => {
`${s} ${r}`.trim().length <= a ? s = (s ? `${s} ` : "") + r : (o.push(s), s = r);
}), s && o.push(s), o;
}, re = ({ centerX: t, centerY: a, radiusScale: l }) => {
const o = l.ticks(D).filter((r) => r > 0), s = p ? e.mobileYAxisLineHeight ?? 12 : h ? e.tabletYAxisLineHeight ?? 12 : 12;
return /* @__PURE__ */ c("g", { children: o.map((r, y) => {
const b = l(r), n = t + b * Math.sin(0) + 7, f = a - b * Math.cos(0), oe = T.formatNumber(
m.style === "percent" ? r / 100 : r,
m
), ce = v({
tickValue: r,
editing: i,
previewMode: x,
isMobileDevice: p,
isTabletDevice: h,
mobileConfigSettings: e,
isNotDesktopPreview: R,
isNotEditingAndIsMobileCustomizationEnabled: k
}), ie = B(oe, ce);
return /* @__PURE__ */ g("g", { children: [
/* @__PURE__ */ c(
"line",
{
x1: n - 7,
y1: f - 4,
x2: n - 3,
y2: f - 4,
stroke: "rgb(51,51,51)",
strokeWidth: 1
}
),
ie.map((de, N) => /* @__PURE__ */ c(
"text",
{
x: n,
y: f + N * s,
fontFamily: "sans-serif",
fontSize: "11px",
fill: "rgb(51,51,51)",
children: de
},
N
))
] }, y);
}) });
}, le = ({ id: t, x: a, y: l }) => {
const o = v({
tickValue: t,
editing: i,
previewMode: x,
isMobileDevice: p,
isTabletDevice: h,
mobileConfigSettings: e,
isNotDesktopPreview: R,
isNotEditingAndIsMobileCustomizationEnabled: k
}), s = B(t, o), r = p ? e.mobileXAxisLineHeight ?? 12 : h ? e.tabletXAxisLineHeight ?? 12 : 12, y = a > 5 ? "start" : a < -5 ? "end" : "middle";
return /* @__PURE__ */ c("g", { transform: `translate(${a}, ${l})`, children: /* @__PURE__ */ c(
"text",
{
textAnchor: y,
alignmentBaseline: "middle",
style: {
fontFamily: "sans-serif",
fontSize: "11px",
fill: "#333",
pointerEvents: "none"
},
children: s.map((b, n) => /* @__PURE__ */ c("tspan", { x: 0, dy: n === 0 ? 0 : `${r}px`, children: b }, n))
}
) });
}, M = (() => {
const t = !i && p && u || i && x === "Mobile" && u, a = !i && h && u || i && x === "Tablet" && u, l = {
mobile: {
marginLeft: e == null ? void 0 : e.mobileMarginLeft,
marginTop: e == null ? void 0 : e.mobileMarginTop,
marginRight: e == null ? void 0 : e.mobileMarginRight,
marginBottom: e == null ? void 0 : e.mobileMarginBottom
},
tablet: {
marginLeft: e == null ? void 0 : e.tabletMarginLeft,
marginTop: e == null ? void 0 : e.tabletMarginTop,
marginRight: e == null ? void 0 : e.tabletMarginRight,
marginBottom: e == null ? void 0 : e.tabletMarginBottom
}
};
return t ? l.mobile : a ? l.tablet : { marginLeft: O, marginTop: V, marginRight: z, marginBottom: F };
})(), se = {
top: M.marginTop,
right: M.marginRight,
bottom: M.marginBottom,
left: M.marginLeft
}, ne = d.keys.map((t) => ({
id: t,
label: t,
color: L.includes(t) ? xe : U.getColorByKey(t),
enabled: !L.includes(t)
}));
return /* @__PURE__ */ g("div", { style: { height: H }, className: "radar", children: [
/* @__PURE__ */ c(
ue,
{
data: d.data,
keys: te(d.keys),
indexBy: d.indexBy,
margin: se,
curve: j,
maxValue: "auto",
valueFormat: (t) => T.formatNumber(m.style === "percent" ? t / 100 : t, m),
borderColor: { from: "color" },
gridLevels: D,
gridShape: _,
gridLabelOffset: Number.parseInt(q, 10),
gridLabel: le,
enableDots: G,
dotSize: Q,
dotBorderWidth: 2,
enableDotLabel: Z,
dotLabelYOffset: C,
dotLabel: (t) => T.formatNumber(
m.style === "percent" ? t.value / 100 : t.value,
m
),
fillOpacity: J,
borderWidth: K,
blendMode: "multiply",
motionConfig: "wobbly",
theme: {
tooltip: {
basic: { background: "#EEE", whiteSpace: "pre", display: "flex" },
tableCell: { padding: "3px 5px" }
}
},
layers: [
"grid",
re,
"markers",
"areas",
"lines",
"layers",
"slices",
"dots",
"axes",
"legends",
"mesh",
"annotations"
]
}
),
/* @__PURE__ */ c(
be,
{
filter: L,
showLegends: $,
chartLegends: ne,
legendLabel: I,
legendPosition: w,
legendCheckBack: W,
legendLabelBack: Y,
legendLabelColor: P,
onToggle: ae,
reverseLegend: X
}
)
] });
}, Be = he(ye);
export {
Be as default
};