@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.
347 lines (346 loc) • 11.7 kB
JavaScript
import { jsx as e, jsxs as i, Fragment as S } from "react/jsx-runtime";
import { useRef as V } from "react";
import "prop-types";
import z from "papaparse";
import { injectIntl as A } from "react-intl";
import H from "../data/DataProvider.js";
import $ from "../data/DataConsumer.js";
import J from "./GradientColors.js";
const G = ({ breaks: t, isPoint: o, numberFormat: c, intl: m }) => t.length > 0 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: t.map((n, l) => n.type !== "graterThan" ? /* @__PURE__ */ i("div", { className: "break", children: [
/* @__PURE__ */ e(
"div",
{
className: `break-item ${o ? "point" : ""}`,
style: {
backgroundColor: n.color,
border: `1px solid ${n.borderColor}`
}
}
),
/* @__PURE__ */ i("div", { className: "break-label", children: [
" < ",
m.formatNumber(n.end, c)
] })
] }) : /* @__PURE__ */ i("div", { className: "break", children: [
/* @__PURE__ */ e(
"div",
{
className: `break-item ${o ? "point" : ""}`,
style: {
backgroundColor: n.color,
border: `1px solid ${n.borderColor}`
}
}
),
/* @__PURE__ */ i("div", { className: "break-label", children: [
" > ",
m.formatNumber(n.end, c)
] })
] })) }), W = (t) => {
const {
name: o,
breaks: c,
pointStyleBy: m,
dimension2: n,
pointDimensionStyles: l = {},
markFillColor: d,
markBorderColor: u,
measures: r,
visible: y,
format: g,
intl: N,
id: C,
onItemClick: L,
customMeasuresLabels: f
} = t, h = {
style: g.style === "compacted" ? "decimal" : g.style,
notation: g.style === "compacted" ? "compact" : "standard",
currency: g.currency,
minimumFractionDigits: parseInt(g.minimumFractionDigits),
maximumFractionDigits: parseInt(g.maximumFractionDigits)
};
let p = r[0];
return f && (p = f[r[0]]), [...new Set(Object.keys(l).map((b) => b.split("_")[0]))], /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ i("div", { children: [
/* @__PURE__ */ i("div", { className: "legend-item", children: [
/* @__PURE__ */ e(
"div",
{
className: "legend-color legend-check",
onClick: (b) => L(C),
style: {
backgroundColor: d,
borderColor: u
},
children: y != !1 && /* @__PURE__ */ e(S, { children: "✓" })
}
),
/* @__PURE__ */ i("div", { className: "legend-label", children: [
o,
" (",
p,
")"
] })
] }),
y != !1 && /* @__PURE__ */ e(G, { breaks: c, symbol: "arrow", numberFormat: h, intl: N })
] }) });
}, K = (t) => {
const {
id: o,
name: c,
breaks: m,
intl: n,
pointStyleBy: l,
format: d,
dimension2: u,
pointDimensionStyles: r = {},
markFillColor: y,
markBorderColor: g,
measures: N,
visible: C,
onItemClick: L,
customMeasuresLabels: f,
allCategories: h,
showDim2OnLegends: p,
dim2LegendLabel: b,
type: D,
d2Click: F,
selectedItem: x
} = t, v = {
style: d.style === "compacted" ? "decimal" : d.style,
notation: d.style === "compacted" ? "compact" : "standard",
currency: d.currency,
minimumFractionDigits: parseInt(d.minimumFractionDigits),
maximumFractionDigits: parseInt(d.maximumFractionDigits)
};
let w = N[0];
f && (w = f[N[0]]);
const B = u && h ? h.filter((a) => a.type.toUpperCase() == u.toUpperCase()) : [], k = (B.length > 0 ? B[0].items : []).map((a) => a.value), P = l === "dimension" || p ? u : w;
return /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ i("div", { children: [
/* @__PURE__ */ i("div", { className: "legend-item", children: [
/* @__PURE__ */ e(
"div",
{
className: "legend-color legend-check",
onClick: (a) => L(o),
style: l === "measure" || p ? {} : {
backgroundColor: y,
borderColor: g
},
children: C != !1 && /* @__PURE__ */ e(S, { children: "✓" })
}
),
/* @__PURE__ */ i("div", { className: "legend-label", children: [
c,
" "
] })
] }),
l === "measure" && C != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: m.map((a, R) => /* @__PURE__ */ i("div", { className: "break", children: [
/* @__PURE__ */ e("div", { className: "break-item", style: {
backgroundColor: a.color,
border: `1px solid ${a.borderColor}`,
borderRadius: D == "dataPoints" ? "50%" : "0"
} }),
/* @__PURE__ */ i("div", { className: "break-label", children: [
" < ",
n.formatNumber(a.end, v)
] })
] })) }),
C != !1 && p != !1 && /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ e("div", { className: "legend-item", children: /* @__PURE__ */ e("div", { className: "legend-label", children: b || P }) }) }),
C != !1 && p != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: k.map((a) => /* @__PURE__ */ i("div", { className: "break", children: [
l === "measure" ? /* @__PURE__ */ e(
"span",
{
className: "break-item dim2-item"
}
) : /* @__PURE__ */ e(
"div",
{
className: "break-item",
style: {
backgroundColor: r[a + "_color"] || y,
border: `1px solid ${r[a + "_border"] || g}`,
borderRadius: D == "dataPoints" ? "50%" : "0"
}
}
),
/* @__PURE__ */ e("div", { className: "break-label", onClick: (R) => F(a), children: x == a ? /* @__PURE__ */ e("b", { children: a }) : a })
] })) })
] }) });
}, Q = (t) => {
const { fillColor: o, borderColor: c, name: m, visible: n, id: l, onItemClick: d } = t;
return /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ i("div", { className: "legend-item", children: [
/* @__PURE__ */ e(
"div",
{
className: "legend-color legend-check",
onClick: (u) => d(l),
style: { backgroundColor: o, borderColor: c },
children: n != !1 && /* @__PURE__ */ e(S, { children: "✓" })
}
),
/* @__PURE__ */ e("div", { className: "legend-label", children: m })
] }) });
}, X = (t) => {
const {
markFillColor: o,
fillColor: c,
markSizeScale: m,
markBorderColor: n,
useCentroidPoint: l,
name: d,
useBreaks: u,
useGradients: r,
breaks: y,
intl: g,
usePattern: N,
patternsData: C,
patternDiscriminator: L,
patternDiscriminatorLabel: f,
measures: h,
borderColor: p,
data: b,
app: D,
customMeasuresLabels: F,
divRef: x,
id: v,
patternWidth: w = 0.35,
patternHeight: B = 0.25,
group: U,
format: k,
csv: P,
visible: a,
onItemClick: R,
gradientScheme: O,
gradientReverse: T,
toggleColorLayer: q,
colorLayerVisible: _ = !0
} = t;
let I = "";
const M = {
style: k.style === "compacted" ? "decimal" : k.style,
notation: k.style === "compacted" ? "compact" : "standard",
currency: k.currency,
minimumFractionDigits: parseInt(k.minimumFractionDigits),
maximumFractionDigits: parseInt(k.maximumFractionDigits)
}, E = new J({
data: b.children,
measure: h[0],
defaultFillColor: o,
gradientScheme: O,
gradientReverse: T
});
if (D != "csv" && F)
I = F[h[0]];
else {
const s = z.parse(P, { header: !0, dynamicTyping: !0 });
I = s.meta.fields.length > 0 ? s.meta.fields[1] : "";
}
const j = (s) => s ? s.toString().replace(/ /g, "_").toLocaleLowerCase() : "";
if (x.current) {
const s = x.current.querySelector(
`.legend.layer_${j(v)} svg`
);
s && (s.style.display = a === !1 ? "none" : "block");
}
return /* @__PURE__ */ e("div", { className: `legend layer_${j(v)}`, id: j(`${U} ${d} ${v}`), children: /* @__PURE__ */ i("div", { children: [
/* @__PURE__ */ i("div", { className: "legend-item", children: [
/* @__PURE__ */ e(
"div",
{
className: "legend-color legend-check",
onClick: (s) => R(v),
style: { backgroundColor: c, borderColor: p },
children: a != !1 && /* @__PURE__ */ e(S, { children: "✓" })
}
),
/* @__PURE__ */ e("div", { className: "legend-label", children: d })
] }),
l && !u && a != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: /* @__PURE__ */ i("div", { className: "break", children: [
/* @__PURE__ */ e(
"div",
{
className: `break-item point ${_ ? "checked" : ""}`,
onClick: (s) => q(v),
style: {
backgroundColor: o,
border: `1px solid ${n}`
}
}
),
I
] }) }),
u && a != !1 && /* @__PURE__ */ i("div", { children: [
/* @__PURE__ */ e("div", { className: "legend-breaks", children: /* @__PURE__ */ i(
"div",
{
className: "legend-section-title",
onClick: (s) => q(v),
children: [
/* @__PURE__ */ e("div", { className: `legend-section-title-checkbox ${_ ? "checked" : ""}` }),
/* @__PURE__ */ e("span", { className: "measure-label", children: I })
]
}
) }),
_ && /* @__PURE__ */ e(
G,
{
isPoint: l,
numberFormat: M,
breaks: y,
visible: a,
intl: g
}
)
] }),
r && a != !1 && /* @__PURE__ */ i("div", { children: [
/* @__PURE__ */ e("div", { className: "gradient-label", style: { float: "right" }, children: g.formatNumber(Math.max(...b.children.map((s) => s[h[0]])), M) }),
/* @__PURE__ */ e("div", { className: "gradient-label", style: { float: "left" }, children: g.formatNumber(Math.min(...b.children.map((s) => s[h[0]])), M) }),
/* @__PURE__ */ e(
"div",
{
style: {
background: `linear-gradient(to right, ${E.getStartColor()}, ${E.getEndColor()})`,
width: "200px",
height: "10px"
}
}
)
] })
] }) });
}, Y = (t) => {
const o = V(null), { layers: c = [], onItemClick: m, patternsData: n, group: l, intl: d, toggleColorLayer: u } = t;
return /* @__PURE__ */ e("div", { className: "legends", ref: o, children: c && c.map((r) => /* @__PURE__ */ e(
H,
{
editing: r.editing,
params: r.params,
app: r.app,
csv: decodeURIComponent(r.csv),
group: l,
ignoreErrors: !0,
isSvg: !0,
store: [r.app, r.unique, r.id],
source: r.apiJoinAttribute + (r.patternDiscriminator != "none" ? "/" + r.patternDiscriminator : ""),
children: /* @__PURE__ */ i("div", { children: [
r.type == "base" && /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(Q, { ...r, group: l, onItemClick: m }) }),
r.type == "data" && /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(
X,
{
group: l,
patternsData: n ? n[r.id] : null,
divRef: o,
...r,
intl: t.intl,
onItemClick: m,
toggleColorLayer: u
}
) }),
r.type == "dataPoints" && /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(K, { selectedItem: t.selectedItem, d2Click: t.d2Click, intl: t.intl, group: l, ...r, onItemClick: m }) }),
r.type == "flow" && /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(W, { group: l, ...r, onItemClick: m, intl: t.intl }) })
] })
}
)) });
}, se = A(Y);
export {
se as default
};