@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.
594 lines (593 loc) • 21.5 kB
JavaScript
import { jsx as m, jsxs as le } from "react/jsx-runtime";
import { useState as E, useRef as Sa, useEffect as ce } from "react";
import { Container as ue } from "semantic-ui-react";
import qa from "../data/DataProvider.js";
import _a from "../data/DataConsumer.js";
import Ja from "../../utils/deviceType.js";
import Ka from "./Pie.js";
import "immutable";
import Qa from "./Radar.js";
import Za from "./Bar.js";
import Oa from "./Line.js";
import { PostContent as ja } from "@devgateway/wp-react-lib";
import J from "./data/index.js";
import er from "./CSVDataFrame.js";
import tr from "./colors/ColorProvider.js";
import ot from "./Messages.js";
import { connect as ar } from "react-redux";
import "react-intl";
const rr = (C) => {
let {
parent: me,
editing: s = !1,
unique: K,
childContent: v,
categories: N,
injectedMeasures: d,
"data-app": r = "csv",
"data-dvz-proxy-dataset-id": pe,
"data-group": he = "default",
"data-height": z = 500,
"data-type": R = "bar",
//'data-source': source = 'gender/smoke',f
"data-dimension1": F,
"data-dimension2": ge,
"data-dimension3": ir,
"data-color-by": Q = "index",
"data-scheme": fe = "system",
"data-group-mode": nt = "grouped",
"data-left-legend": it = "Left Legend",
"data-legend-label": st = "",
"data-bottom-legend": dt = "Bottom Legend",
"data-dualmode": lt,
"data-legend-position": be = "right",
"data-show-legends": we = "true",
"data-data-source-label": sr = "Source",
"data-chart-data-source": dr = "Data Source",
"data-toggle-info-label": lr = "Info Graphic",
"data-toggle-chart-label": cr = "Chart",
//'data-number-format': format = '{"style":"percent", "minimumFractionDigits": 1, "maximumFractionDigits": 1}',
"data-tick-rotation": u = 0,
"data-tick-color": ct = "rgb(92,93,99)",
"data-measures": ut = "{}",
"data-format": ur = "{}",
"data-csv": mt = "",
"data-margin-left": pt = 50,
"data-margin-top": ht = 25,
"data-margin-right": gt = 25,
"data-margin-bottom": ft = 25,
"data-start-angle": bt = 0,
"data-end-angle": wt = 360,
"data-view-mode": xe = "info",
"data-filters": xt = "[]",
//filters
"data-tooltip-html": vt = "",
"data-layout": Z = "vertical",
"data-reverse": ve = "false",
"data-offset-y": Lt = "-40",
"data-line-layer-enabled": Le = "false",
//"data-csv-line-layer-data": csvLineLayerData = "",
//"data-csv-line-color": lineColor = "#000000",
//"data-csv-line-tooltip": lineTooltip = "",
//"data-csv-line-title": lineTitle = "",
"data-overlays": yt = "[]",
"data-max-value": kt = "auto",
"data-value-scale": Tt = "linear",
"data-swap": G = "false",
"data-no-data-message": Mt = "No data matches your selection",
"data-bar-color": It = "rgb(0,0,0)",
"data-override-tick-color": ye = "false",
"data-fixed-min-value": Dt = 0,
"data-fixed-max-value": At = 0,
"data-bar-padding": Ct = 0.15,
"data-bar-label-position": Rt = "middle",
"data-line-label-position": Ft = "none",
"data-show-grid": ke = "true",
"data-include-overall": Te = "false",
"data-bar-inner-padding": Bt = 0.7,
"data-x-label-color": Pt = "#000",
"data-bar-label-color": Et = "#000",
"data-legend-label-color": Nt = "#000",
"data-tooltip-enabled": Me = "true",
"data-use-check-box-background": Ie = "false",
"data-use-label-background": De = "true",
"data-highlight-xaxis-line": Ae = "false",
"data-show-tick-line": Ce = "true",
"data-show-right-axis": Re = "true",
"data-manual-colors": zt = "{}",
"data-right-legend": Gt = "",
"data-offset-right": Vt = "40",
"data-offset-bottom": Xt = "40",
"data-hidden-bars": Ut = [],
"data-confidence-intervals": $t = "[]",
"data-enable-area": Fe = "false",
"data-area-shading-criteria": Ht = "DEFAULT",
"data-area-lower-bound": Wt = "",
"data-area-upper-bound": Yt = "",
"data-show-points": Be = "true",
"data-center-label": St = "",
"data-show-arc-labels": Pe = "true",
"data-show-arc-link-labels": Ee = "true",
"data-slice-padding": qt = 1,
"data-center-label-font-weight": _t = "normal",
"data-center-label-font-size": Jt = "12",
"data-center-label-xoffset": Kt = 0,
"data-center-label-yoffset": Qt = 0,
"data-group-total-measure": Zt = "",
"data-show-group-total": Ne = "true",
"data-group-total-label": Ot = "",
"data-group-total-format": jt = "{}",
"data-group-total-label-offset": ea,
"data-group-total-fixed-position": ze = "false",
"data-tooltip-enable-markdown": V = "false",
"data-y-axis-tick-values": Ge = "10",
"data-x-axis-tick-values": Ve = "10",
"data-enable-grid-y": L = "true",
"data-enable-grid-x": y = "false",
"data-offset-text": ta = 0,
"data-overall-label": O = "Overall",
"data-min-max-clamp": aa = "false",
"data-reverse-legend": Xe = "false",
"data-sort": Ue = "default",
"data-sort-reverse": X = "false",
"data-sort2dimension": $e = "_total",
"data-radar-curve": ra = "linearClosed",
"data-radar-fill-opacity": oa = 0.25,
"data-radar-border-width": na = 2,
"data-radar-grid-levels": ia = 3,
"data-radar-grid-shape": sa = "circular",
"data-radar-grid-label-offset": da = 36,
"data-radar-enable-dots": He = "true",
"data-radar-dot-size": la = 8,
"data-radar-enable-dot-label": We = "true",
"data-radar-dot-label-offset": ca = -12,
"data-mobile-customization": Ye = "{}",
"data-show-percentage": Se = "false",
"data-preview-mode": p = "Desktop",
pageModuleProps: h
} = C;
const ua = s, t = JSON.parse(
decodeURIComponent(Ye)
), [j, ma] = E(
window.innerWidth <= 1250
), f = j && ((t == null ? void 0 : t.showCustomization) ?? !1);
h != null && h.previewMode && (h != null && h.editing) && (p = h.previewMode, s = h.editing);
const pa = ["Tablet"].includes(p) && s, ha = ["Mobile"].includes(p) && s, ga = ["Desktop"].includes(p) && s, l = f && p !== "Desktop", c = f && !s, ee = () => {
const e = window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches, n = window.matchMedia("(max-width: 767px)").matches;
switch (!0) {
case ga:
return u;
case pa:
return f ? (t == null ? void 0 : t.tabletXAxisTextRotation) ?? u : u;
case ha:
return f ? (t == null ? void 0 : t.mobileXAxisTextRotation) ?? u : u;
case e:
return f ? (t == null ? void 0 : t.tabletXAxisTextRotation) ?? u : u;
case n:
return f ? (t == null ? void 0 : t.mobileXAxisTextRotation) ?? u : u;
default:
return u;
}
}, fa = ee(), [ba, qe] = E(fa), _e = C.intl.locale, U = Sa(null), Je = (e) => {
try {
return ua ? e : decodeURIComponent(e);
} catch {
return console.error(`error decoding value:${e}`), e;
}
}, k = (e) => {
try {
return JSON.parse(Je(e));
} catch {
console.error(`error parsing value:${e}`);
}
return null;
}, wa = () => k(zt)[r], xa = () => k(ut), Ke = () => {
var e;
if (a != null && a[r]) {
let n = (e = a == null ? void 0 : a[r]) == null ? void 0 : e.format;
if (!n) {
const o = Object.keys(a == null ? void 0 : a[r]);
for (let w = 0; w < o.length; w++)
if (a != null && a[r][o[w]].selected && (a != null && a[r][o[w]].format)) {
n = a == null ? void 0 : a[r][o[w]].format;
break;
}
}
return n;
}
return a != null && a.csv ? a.csv.format : null;
}, va = () => {
let e = null;
return a != null && a[r] ? a[r].useCustomAxisFormat && a[r].customFormat && (e = a[r].customFormat) : a != null && a.csv && a.csv.useCustomAxisFormat && a.csv.customFormat && (e = a.csv.customFormat), e;
}, La = () => a != null && a[r] ? Object.keys(a[r]).map((e) => ({ value: e, ...a[r][e] })).filter((e) => e.selected).map((e) => e.value) : [], Qe = () => {
const e = {};
return a != null && a[r] && Object.keys(a[r]).map((o) => ({ value: o, ...a[r][o] })).filter((o) => o.selected && o.hasCustomLabel).forEach((o) => {
e[o.value] = o.customLabel;
}), e;
}, ya = () => a != null && a[r] ? Object.keys(a[r]).filter(
(e) => a[r][e].allowSelection
) : [];
let a = xa(), b = La(), g = Ke();
const ka = ya();
let te = it, ae = Gt, re = Je(vt);
if (d != null && d[r]) {
const e = Object.keys(d[r].measures).map((n) => ({ value: n, ...d[r].measures[n] })).filter((n) => n.selected).map((n) => n.value);
a = d, b = e, g = Ke(), te = d.leftTitle, ae = d.rightTitle, d.customTooltip && (re = d.customTooltip);
}
const Ta = g ? {
style: g.style === "compacted" ? "decimal" : g.style,
notation: g.style === "compacted" ? "compact" : "standard",
currency: g.currency,
minimumFractionDigits: parseInt(g.minimumFractionDigits),
maximumFractionDigits: parseInt(g.maximumFractionDigits)
} : {
notation: "standard",
currency: "USD",
minimumFractionDigits: 2,
maximumFractionDigits: 2
}, Ma = va(), i = k(jt), Ia = {
style: (i == null ? void 0 : i.style) === "compacted" ? "decimal" : i == null ? void 0 : i.style,
notation: (i == null ? void 0 : i.style) === "compacted" ? "compact" : "standard",
currency: i == null ? void 0 : i.currency,
minimumFractionDigits: parseInt(
i == null ? void 0 : i.minimumFractionDigits
),
maximumFractionDigits: parseInt(
i == null ? void 0 : i.maximumFractionDigits
)
}, [Da, mr] = E(xe), Aa = s ? xe : Da, Ca = {
scheme: fe,
colorBy: Q
}, $ = s ? z - 80 : z, Ra = () => (l || c) && !(t != null && t.showXAxisTitle) ? "" : dt, Fa = () => l || c ? t != null && t.showYAxisTitle ? te : "" : te, Ba = () => l || c ? t != null && t.showRightAxisTitle ? ae : "" : ae, Pa = {
left: Fa(),
bottom: Ra(),
right: Ba()
}, H = (e) => {
if (e === "true" || e === !0)
return !0;
if (e === "false" || e === !1)
return !1;
}, Ze = () => {
H(y) && !H(L) ? (y = !1, L = !0) : !H(y) && H(L) && (y = !0, L = !1);
}, Ea = () => Z === "horizontal" ? (Ze(), "vertical") : (Ze(), "horizontal"), Na = () => t != null && t.chartLayoutOverride ? Ea() : Z, W = (e, n, o) => e ? Number.parseInt(n) ?? o : o, Oe = (e, n, o) => e ? n ?? o : o;
ce(() => {
const e = () => {
ma(window.innerWidth <= 1250);
const n = ee();
qe(n);
};
return window.addEventListener("resize", e), qe(ee()), () => {
window.removeEventListener("resize", e);
};
}, [
s,
p,
f,
u,
t == null ? void 0 : t.tabletXAxisTextRotation,
t == null ? void 0 : t.mobileXAxisTextRotation
]);
const za = () => {
const e = ["tablet", "mobile", "midTablet"].includes(Ja());
return s && p === "Desktop" ? be : e ? "bottom" : be;
}, je = {
app: r,
editing: s,
tickColor: decodeURIComponent(ct),
tickRotation: ba,
layout: l || c ? Na() : Z,
reverse: ve == !0 || ve == "true",
showLegends: we == !0 || we == "true",
legendLabel: st,
swap: G == !0 || G == "true",
showGrid: ke == !0 || ke == "true",
showPercentage: Se == !0 || Se == "true",
marginLeft: W(
l || c,
Number.parseInt(t == null ? void 0 : t.marginLeft),
parseInt(pt)
),
marginTop: W(
l || c,
Number.parseInt(t == null ? void 0 : t.marginTop),
parseInt(ht)
),
marginRight: W(
l || c,
Number.parseInt(t == null ? void 0 : t.marginRight),
Number.parseInt(gt)
),
marginBottom: W(
l || c,
Number.parseInt(t == null ? void 0 : t.marginBottom),
Number.parseInt(ft)
),
height: `${$}px`,
legendPosition: za(),
legends: Pa,
tooltip: V == !0 || V == "true" ? re : re.replace(/\r\n/g, "<hr/>").replace(/[\r\n]/g, "<hr/>"),
colors: Ca,
groupMode: nt,
format: Ta,
startAngle: bt,
endAngle: wt,
offsetY: Lt,
// csvLineLayerData,
// lineColor: decodeURIComponent(lineColor),
// lineTooltip,
// lineTitle,
maxValue: kt,
valueScale: Tt,
categories: N,
lineLayerEnabled: Le == !0 || Le == "true",
overlays: k(yt) || [],
barColor: decodeURIComponent(It),
overrideTickColor: ye == !0 || ye == "true",
fixedMinValue: Dt,
fixedMaxValue: At,
barPadding: Oe(
l || c,
t == null ? void 0 : t.barPadding,
Ct
),
barLabelPosition: Rt,
lineLabelPosition: Ft,
barInnerPadding: Oe(
l || c,
t == null ? void 0 : t.barInnerPadding,
Bt
),
xLabelColor: decodeURIComponent(Pt),
barLabelColor: decodeURIComponent(Et),
legendLabelColor: decodeURIComponent(Nt),
tooltipEnabled: Me == !0 || Me == "true",
legendLabelBack: De == !0 || De == "true",
legendCheckBack: Ie == !0 || Ie == "true",
highlightXAxisLine: Ae == !0 || Ae == "true",
showTickLine: Ce == !0 || Ce == "true",
showRightAxis: Re == !0 || Re == "true",
offsetRight: Vt,
offsetBottom: Xt,
confidenceIntervals: k($t) || [],
showPoints: Be == !0 || Be == "true",
enableArea: Fe == !0 || Fe == "true",
areaShadingCriteria: Ht,
areaLowerBound: Wt,
areaUpperBound: Yt,
showGroupTotal: Ne == !0 || Ne == "true",
groupTotalMeasure: Zt,
groupTotalLabel: Ot,
groupTotalFormat: Ia,
groupTotalOffset: ea,
groupTotalFixedPosition: ze == !0 || ze == "true",
centerLabel: St,
showArcLabels: Pe == !0 || Pe == "true",
showArcLinkLabels: Ee == !0 || Ee == "true",
slicePadding: qt,
centerLabelFontWeight: _t,
centerLabelFontSize: Jt,
centerLabelXOffset: Kt,
centerLabelYOffset: Qt,
userMeasures: ka,
tooltipEnableMarkdown: V == !0 || V == "true",
yAxisTickValues: l || c ? t.yAxisTickValues ?? Ge : Ge,
xAxisTickValues: l || c ? t.xAxisTickValues ?? Ve : Ve,
enableGridY: L == !0 || L == "true",
enableGridX: y == !0 || y == "true",
offsetText: ta,
selectedMeasures: b,
overallLabel: O,
minMaxClamp: aa,
reverseLegend: Xe == !0 || Xe == "true",
customAxisFormat: Ma,
sort: Ue,
sortReverse: X == !0 || X == "true",
radarCurve: ra,
radarFillOpacity: oa,
radarBorderWidth: na,
radarGridLevels: ia,
radarGridShape: sa,
radarGridLabelOffset: da,
radarEnableDots: He == !0 || He == "true",
radarDotSize: la,
radarEnableDotLabel: We == !0 || We == "true",
radarDotLabelOffset: ca,
sort2Dimension: $e,
mobileCustomization: Ye,
dimension1: F,
previewMode: p
}, oe = {}, ne = k(xt) || {};
ne && ne.forEach && ne.forEach((e) => {
e.value != null && e.value.filter((n) => n != null && n.toString().trim() != "").length > 0 && (oe[e.param] = e.value);
}), pe && (oe.dvzProxyDatasetId = pe);
let T = null, M = null;
if (r === "csv")
T = er;
else
switch (R) {
case "line":
T = J.LineDataFrame;
break;
case "pie":
T = J.PieDataFrame;
break;
case "radar":
T = J.BarDataFrame;
break;
default:
T = J.BarDataFrame;
break;
}
let I = !1;
switch (R) {
case "bar":
M = Za, I = r != "csv" && F == "none" && b.length == 0;
break;
case "line":
M = Oa, I = r !== "csv" && (b.length === 0 || F === "none");
break;
case "pie":
I = r != "csv" && b.length == 0, M = Ka;
break;
case "radar":
I = r != "csv" && b.length == 0, M = Qa;
break;
default:
M = /* @__PURE__ */ m("div", { children: "No Chart" });
break;
}
const Ga = lt === "true", B = [];
F != "none" && B.push(F), ge != "none" && B.push(ge);
const [et, Va] = E(0), [Xa, Ua] = E(tt());
function tt() {
var e;
return ((e = window.screen.orientation) == null ? void 0 : e.type) || (window.innerWidth > window.innerHeight ? "landscape-primary" : "portrait-primary");
}
return ce(() => {
const e = setTimeout(() => {
j && (() => {
const o = U.current.querySelector(
".legends.container.has-standard-12-font-size.bottom"
) || U.current.querySelector(".legends.container.items-section");
if (!o) return;
const { clientHeight: w } = o, P = window.getComputedStyle(o), $a = parseInt(P.marginTop), at = parseInt(P.marginBottom), Ha = parseInt(P.paddingTop), Wa = parseInt(P.paddingBottom), Ya = w + $a + at + Ha + Wa, rt = o.closest(
".ui.fluid.container.content"
);
if (rt) {
const x = rt.querySelector(".data-source");
if (x) {
const D = x.getBoundingClientRect(), A = o.getBoundingClientRect();
if (A.bottom !== 0 && D.top !== 0) {
if (o.textContent.trim() === "") return;
const Y = at, S = A.bottom + Y, se = window.getComputedStyle(x), q = parseFloat(se.marginTop) || 0, _ = D.top - q;
if (S > _) {
let de = S - _;
de < 5 && (de += 1), x.style.marginTop = `${de + 1}px`;
}
} else
setTimeout(() => {
D.top < A.bottom && (x.style.marginTop = `${A.bottom - D.top + 1}px`);
}, 1e3);
}
}
const ie = o.closest(".chart.container");
if (ie) {
const x = ie.getBoundingClientRect(), D = window.getComputedStyle(ie), A = Number.parseFloat(D.marginBottom) || 0, Y = x.bottom + A, S = o.getBoundingClientRect(), se = Number.parseFloat(P.marginTop) || 0, q = S.top - se;
if (q < Y) {
const _ = Y - q;
o.style.marginTop = `${_ + 1}px`;
}
}
Va(Ya);
})();
}, 100);
return () => {
clearTimeout(e);
};
}, [j, U]), ce(() => {
const e = () => {
setTimeout(() => {
Ua(tt());
}, 100);
};
return window.screen.orientation ? window.screen.orientation.addEventListener("change", e) : window.addEventListener("resize", e), () => {
window.screen.orientation ? window.screen.orientation.removeEventListener("change", e) : window.removeEventListener("resize", e);
};
}, []), /* @__PURE__ */ m("div", { ref: U, children: /* @__PURE__ */ le(
ue,
{
className: "chart container",
style: {
minHeight: R === "pie" && window.innerWidth <= 480 ? `${parseInt(z) + parseInt(et) * 0.5}px` : `${parseInt(z) + parseInt(et)}px`
},
fluid: !0,
children: [
/* @__PURE__ */ m(
qa,
{
editing: s,
style: { height: `${$}px` },
params: oe,
app: r,
group: he,
csv: mt,
store: [r, K, ...B],
source: B.join("/"),
children: /* @__PURE__ */ le(
ue,
{
style: { height: `${$}px` },
className: "body",
fluid: !0,
children: [
I && /* @__PURE__ */ m(ot, { editing: s }),
!I && /* @__PURE__ */ le(_a, { children: [
/* @__PURE__ */ m(ot, { app: r, group: he, noDataMsg: Mt, children: " " }),
/* @__PURE__ */ m(
T,
{
locale: _e,
colorBy: Q,
hiddenBars: Ut,
swap: G === "true" || G === !0,
type: R,
includeTotal: !0,
includeOverall: Te === !0 || Te === "true",
overallLabel: O,
measures: b,
dimensions: [...B],
sort: Ue,
sortreverse: X === !0 || X === "true",
sort2Dimension: $e,
customLabels: Qe(),
children: /* @__PURE__ */ m(
tr,
{
type: R,
app: r,
locale: _e,
overallLabel: O,
customLabels: Qe(),
manualColors: wa(),
colorBy: Q,
scheme: fe,
barColor: je.barColor,
children: /* @__PURE__ */ m(M, { ...je })
}
)
}
)
] })
]
}
)
}
),
/* @__PURE__ */ m("br", {}),
Ga && v && Aa === "info" && /* @__PURE__ */ m(
ue,
{
fluid: !0,
style: { height: $ + "px" },
className: "body",
children: /* @__PURE__ */ m(
ja,
{
post: { content: { rendered: v } }
}
)
}
)
]
}
) }, Xa + Math.random());
}, or = (C, me) => {
const { "data-app": s, "data-group": K } = me, v = C.getIn(["data", "measures", s, K]), N = C.getIn([
"data",
"pageModuleProps"
]), d = {};
return v && Object.keys(v).length > 0 && (d.injectedMeasures = v ?? {}), N && (d.pageModuleProps = N), d;
}, nr = {}, Fr = ar(or, nr)(rr);
export {
Fr as default
};