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