@devgateway/dvz-ui-react 1.0.0

package/dist/esm/embeddable/chart/Pie.js

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

package/dist/esm/embeddable/chart/Radar.js

@@ -0,0 +1,231 @@
+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
+};

package/dist/esm/embeddable/chart/Tooltip.js

@@ -0,0 +1,53 @@
+import { jsx as c } from "react/jsx-runtime";
+import "react";
+import y from "react-markdown";
+import h from "remark-gfm";
+import x from "rehype-raw";
+import f from "string-template";
+const F = /(\+?\%)[\(]([A-z0-9,.,-]+)\)/gi, N = /(\+?\#)[\(]([A-z0-9,.,-]+)\)/gi, _ = /(\+?\#C)[\(]([A-z0-9,.,-]+)\)/gi, p = (n, t, o, i, e, r) => {
+  let a, l = t;
+  for (; (a = n.exec(t)) !== null; ) {
+    const s = a[2], m = a[1], d = ((u, g = 2) => e.formatNumber(i ? u / 100 : u, {
+      maximumFractionDigits: g,
+      ...o,
+      signDisplay: m && m.startsWith("+") ? "never" : "auto"
+    })).apply(void 0, s.split(","));
+    l = l.replaceAll(a[0], d);
+  }
+  return l;
+}, A = (n, t, o, i) => {
+  t.field && t[`_${t.field}`] && (t._value = t[`_${t.field}`]), !t.field && t.category && (t.field = t.category);
+  let e = i ? f(n, t) : f(n, t).replace(/(?:\r\n|\r|\n)/g, "<br>");
+  return e = p(F, e, { style: "percent" }, !0, o), e = p(N, e, { style: "decimal" }, !1, o), e = p(
+    _,
+    e,
+    { notation: "compact" },
+    !1,
+    o
+  ), e;
+}, E = ({ tooltip: n, d: t, intl: o, tooltipEnableMarkdown: i }) => {
+  const { color: e, data: r } = t.datum || t.point || t, a = t.value || (t.datum ? t.datum.value : null) || (t.point ? t.point.data.y : null);
+  if (r) {
+    const l = r.variables ? r.variables[t.id] || r.variables : r, s = {
+      field: t.point ? t.point.serieId : t.id,
+      ...l,
+      value: a
+    };
+    r.measureFieldName && (s.populationValue = r.variables[r.measureFieldName + "Population"]);
+    const m = A(n, s, o, i);
+    return i ? /* @__PURE__ */ c(
+      y,
+      {
+        children: m,
+        remarkPlugins: [h],
+        rehypePlugins: [x],
+        className: "chart tooltip"
+      }
+    ) : /* @__PURE__ */ c("div", { className: "chart tooltip", children: /* @__PURE__ */ c("div", { dangerouslySetInnerHTML: { __html: m } }) });
+  } else
+    return /* @__PURE__ */ c("div", {});
+};
+export {
+  E as default,
+  A as formatContent
+};

package/dist/esm/embeddable/chart/colors/CategoricalColors.js

@@ -0,0 +1,27 @@
+import { colorSchemes as n } from "@nivo/colors";
+import * as h from "d3";
+import u from "./Colors.js";
+class f extends u {
+  constructor(r, t, e, s, a) {
+    if (super(r, t, e, s, a), r === "index" && (this._domain = this.data.map((o) => o[this.indexBy])), r === "id" && (this._domain = this.keys), r === "values") {
+      const o = e.map((i) => s.map((l) => i[l])).flatMap((i) => i).filter((i) => i != null);
+      this._domain = [Math.min(...o), Math.max(...o)];
+    }
+    this._color = h.scaleOrdinal(n[this.scheme]), this._color.domain(this._domain);
+  }
+  getColorByValue(r) {
+    return this.colorBy === "values" ? "gray" : this.color(r);
+  }
+  getColor(r, t) {
+    return this.colorBy === "index" ? this.color(t[this.indexBy]) : this.colorBy === "id" ? this.color(r) : "gray";
+  }
+  getColorByIndex(r) {
+    return this.colorBy === "values" ? "gray" : this.color(r);
+  }
+  getColorByKey(r) {
+    return this.colorBy === "values" ? "gray" : this.color(r);
+  }
+}
+export {
+  f as default
+};

package/dist/esm/embeddable/chart/colors/ColorProvider.js

@@ -0,0 +1,75 @@
+import { jsx as y } from "react/jsx-runtime";
+import i from "react";
+import w from "./SystemColors.js";
+import S from "./PlainColor.js";
+import x from "./ManualColors.js";
+import { isSequentialColorScheme as b, isCategoricalColorScheme as g } from "@nivo/colors";
+import v from "./SequentialColors.js";
+import M from "./CategoricalColors.js";
+class _ extends i.Component {
+  constructor(l) {
+    super(l);
+  }
+  render() {
+    const {
+      app: l,
+      type: n,
+      colorBy: t,
+      scheme: o,
+      barColor: f,
+      manualColors: C,
+      locale: m,
+      overallLabel: d,
+      customLabels: u,
+      options: { data: r, keys: s, indexBy: a, dimensionsMetadata: p, measuresMetadata: c }
+    } = this.props;
+    let e;
+    return r ? (o === "system" ? e = new w(
+      l,
+      n,
+      t,
+      o,
+      r,
+      s,
+      a,
+      p,
+      c,
+      m
+    ) : o === "plain_color" ? e = new S(f) : o == "manual" ? e = new x(
+      l,
+      n,
+      t,
+      o,
+      r,
+      p,
+      c,
+      s,
+      a,
+      C,
+      m,
+      d,
+      u
+    ) : (b(o) && (e = new v(
+      t,
+      o,
+      r,
+      s,
+      a
+    )), g(o) && (e = new M(
+      t,
+      o,
+      r,
+      s,
+      a
+    ))), /* @__PURE__ */ y("div", { children: i.Children.map(
+      this.props.children,
+      (h) => i.cloneElement(h, {
+        ...this.props,
+        colorGenerator: e
+      })
+    ) })) : null;
+  }
+}
+export {
+  _ as default
+};

package/dist/esm/embeddable/chart/colors/Colors.js

@@ -0,0 +1,44 @@
+class n {
+  constructor(t, e, o, i, r) {
+    this._colorBy = t, this._scheme = e, this._data = o, this._keys = i, this._indexBy = r, this._domain = [], this._color = null;
+  }
+  get domain() {
+    return this._domain;
+  }
+  get color() {
+    return this._color;
+  }
+  get maxValue() {
+    return this.domain && this.domain.length > 0 ? this.domain[1] : 0;
+  }
+  get minValue() {
+    return this.domain && this.domain.length > 0 ? this.domain[0] : 0;
+  }
+  get colorBy() {
+    return this._colorBy;
+  }
+  get scheme() {
+    return this._scheme;
+  }
+  get data() {
+    return this._data;
+  }
+  get keys() {
+    return this._keys;
+  }
+  get indexBy() {
+    return this._indexBy;
+  }
+  getColor(t, e) {
+  }
+  getColorByIndex(t) {
+  }
+  getColorByKey(t) {
+  }
+  getColorByValue(t) {
+    return this.color ? this.color(t) : null;
+  }
+}
+export {
+  n as default
+};