@devgateway/dvz-ui-react 1.5.4 → 1.6.1

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

@@ -1,79 +1,79 @@
 import { jsxs as v, jsx as a, Fragment as J } from "react/jsx-runtime";
-import { useState as k, useEffect as rt, Fragment as nt } from "react";
+import { useState as $, useEffect as rt, Fragment as nt } from "react";
 import { injectIntl as st } from "react-intl";
 import { ResponsiveLine as lt } from "@nivo/line";
 import it from "./Tooltip.js";
 import { area as ct, line as ot } from "d3-shape";
-import { useTheme as dt } from "@nivo/theming";
-import mt from "../../layout/FlexWrapDetector.js";
-import P from "../../utils/deviceType.js";
-const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].includes(P()), pe = P() === "mobile", xe = ["tablet", "midTablet"].includes(P()), ut = (d, x) => {
+import { useTheme as mt } from "@nivo/theming";
+import dt from "../../layout/FlexWrapDetector.js";
+import V from "../../utils/deviceType.js";
+const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].includes(V()), ye = V() === "mobile", be = ["tablet", "midTablet"].includes(V()), ut = (m, x) => {
   const N = document.createElement("canvas").getContext("2d");
-  return N.font = x, N.measureText(d).width;
+  return N.font = x, N.measureText(m).width;
 }, pt = ({
-  editing: d,
+  editing: m,
   previewMode: x,
-  app: V,
+  app: Z,
   legends: N,
-  tooltip: $,
-  tooltipEnabled: ye,
-  options: m,
+  tooltip: k,
+  tooltipEnabled: ge,
+  options: d,
   intl: I,
-  groupMode: Z,
+  groupMode: q,
   reverse: xt,
-  marginLeft: be,
-  lineLabelPosition: ge,
-  marginTop: q,
-  marginRight: ve,
-  marginBottom: Q,
+  marginLeft: ve,
+  lineLabelPosition: Ne,
+  marginTop: Q,
+  marginRight: Ee,
+  marginBottom: X,
   format: E,
   colors: yt,
-  offsetY: Ne,
-  height: Ee,
-  showLegends: X,
-  legendPosition: p,
+  offsetY: Oe,
+  height: Te,
+  showLegends: P,
+  legendPosition: h,
   tickRotation: y,
-  offsetText: w,
-  tickColor: B,
+  offsetText: j,
+  tickColor: w,
   legendLabel: C,
   xLabelColor: O,
   colorGenerator: ee,
   legendCheckBack: A,
-  legendLabelBack: Oe,
+  legendLabelBack: De,
   legendLabelColor: te,
-  highlightXAxisLine: Te,
+  highlightXAxisLine: Me,
   showTickLine: S,
-  showRightAxis: De,
+  showRightAxis: $e,
   valueScale: bt,
-  enableArea: Me,
+  enableArea: ke,
   areaShadingCriteria: ae,
   areaLowerBound: re,
   areaUpperBound: ne,
-  showPoints: ke,
-  maxValue: $e,
+  showPoints: Ie,
+  maxValue: Le,
   fixedMinValue: H,
   fixedMaxValue: R,
-  offsetBottom: Ie,
-  yAxisTickValues: Le,
-  enableGridY: Fe,
-  enableGridX: We,
+  offsetBottom: Fe,
+  yAxisTickValues: We,
+  enableGridY: ze,
+  enableGridX: _e,
   overrideTickColor: U,
-  offsetRight: ze,
-  selectedMeasures: _e,
-  tooltipEnableMarkdown: je,
-  minMaxClamp: we,
-  reverseLegend: Be,
+  offsetRight: Be,
+  selectedMeasures: je,
+  tooltipEnableMarkdown: we,
+  minMaxClamp: Ae,
+  reverseLegend: Se,
   customAxisFormat: L,
-  mobileCustomization: Ae,
-  lineCurve: Se,
+  mobileCustomization: He,
+  lineCurve: Re,
   customLabels: G
 }) => {
-  var he, fe, ue;
-  const s = JSON.parse(decodeURIComponent(Ae)), se = ft && ((s == null ? void 0 : s.showCustomization) ?? !1), F = se && x !== "Desktop", W = !d && se, [le, He] = k(50), [Re, Ue] = k(q), [gt, ie] = k(0), [Ge, Ye] = k(Q), [T, Je] = k([]), z = m.data.map((e) => ({
+  var ue, pe, xe;
+  const s = JSON.parse(decodeURIComponent(He)), se = ft && ((s == null ? void 0 : s.showCustomization) ?? !1), F = se && x !== "Desktop", W = !m && se, [le, Ue] = $(50), [ie, Ge] = $(Q), [gt, ce] = $(0), [oe, Ye] = $(X), [T, Je] = $([]), z = d.data.map((e) => ({
     id: e.id,
     label: G && G[e.id] ? G[e.id] : e.label || e.id,
     color: ee.getColor(e.id, e)
-  })), ce = () => (Be && z.reverse(), /* @__PURE__ */ a(J, { children: X && z.map((e, t) => /* @__PURE__ */ v("div", { className: "legend item", onClick: () => Ve(e.id), children: [
+  })), me = () => (Se && z.reverse(), /* @__PURE__ */ a(J, { children: P && z.map((e, t) => /* @__PURE__ */ v("div", { className: "legend item", onClick: () => Ze(e.id), children: [
     /* @__PURE__ */ a(
       "input",
       {
@@ -100,7 +100,7 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
       "label",
       {
         style: {
-          backgroundColor: Oe === !0 ? e.color : "transparent",
+          backgroundColor: De === !0 ? e.color : "transparent",
           color: te
         },
         children: e.label
@@ -110,16 +110,16 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
   rt(() => {
     (() => {
       const r = 5 * Math.max(z.length - 5, 0);
-      He(r);
+      Ue(r);
     })();
   }, [z]);
   const Ke = {
     bottom: `-${le}px`
-  }, Pe = {
+  }, Ve = {
     bottom: `-${le}px`,
     gap: "0px",
     top: "0px"
-  }, _ = (e) => T.length ? e.filter((t) => T.indexOf(t.id) === -1) : e, Ve = (e) => {
+  }, _ = (e) => T.length ? e.filter((t) => T.indexOf(t.id) === -1) : e, Ze = (e) => {
     const t = T.slice();
     if (t.indexOf(e) > -1) {
       const r = t.indexOf(e);
@@ -127,30 +127,30 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
     } else
       t.push(e);
     Je(t);
-  }, Ze = (e) => {
-    const t = Object.assign({}, e), r = dt();
-    (F || W) && de.includes(String(t.value)) && (t.value = "");
+  }, qe = (e) => {
+    const t = Object.assign({}, e), r = mt();
+    (F || W) && he.includes(String(t.value)) && (t.value = "");
     let l = [], n = "";
     if (F || W) {
       const c = String(t.value).split(" ");
       let o = 25;
-      d && x === "Mobile" || pe && !d ? o = (s == null ? void 0 : s.mobileMaxTickLength) ?? 25 : d && x === "Tablet" || xe && !d ? o = (s == null ? void 0 : s.tabletMaxTickLength) ?? 25 : window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches && !d && (o = 15), c.forEach((b) => {
+      m && x === "Mobile" || ye && !m ? o = (s == null ? void 0 : s.mobileMaxTickLength) ?? 25 : m && x === "Tablet" || be && !m ? o = (s == null ? void 0 : s.tabletMaxTickLength) ?? 25 : window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches && !m && (o = 15), c.forEach((b) => {
         n.length + String(b).length <= o ? n += (n ? " " : "") + b : (l.push(n), n = b);
       }), n && l.push(n);
     } else
       l = [t.value];
     let i = 12;
-    return d && x === "Mobile" || pe && !d ? i = (s == null ? void 0 : s.mobileYAxisLineHeight) ?? 12 : (d && x === "Tablet" || xe && !d) && (i = (s == null ? void 0 : s.tabletYAxisLineHeight) ?? 12), ut(t.value, "12px Roboto") + 15, y > 0 && y < 180 ? /* @__PURE__ */ v("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
+    return m && x === "Mobile" || ye && !m ? i = (s == null ? void 0 : s.mobileYAxisLineHeight) ?? 12 : (m && x === "Tablet" || be && !m) && (i = (s == null ? void 0 : s.tabletYAxisLineHeight) ?? 12), ut(t.value, "12px Roboto") + 15, y > 0 && y < 180 ? /* @__PURE__ */ v("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
       S && /* @__PURE__ */ a(
         "line",
         {
-          stroke: U ? B : K,
+          stroke: U ? w : K,
           strokeWidth: 1.5,
           y1: -32,
           y2: -12
         }
       ),
-      /* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + w})`, children: l.map((c, o) => /* @__PURE__ */ a(
+      /* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + j})`, children: l.map((c, o) => /* @__PURE__ */ a(
         "text",
         {
           transform: `rotate(${y})`,
@@ -171,13 +171,13 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
       S && /* @__PURE__ */ a(
         "line",
         {
-          stroke: U ? B : K,
+          stroke: U ? w : K,
           strokeWidth: 1.5,
           y1: -32,
           y2: -12
         }
       ),
-      /* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + w})`, children: /* @__PURE__ */ a(
+      /* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + j})`, children: /* @__PURE__ */ a(
         "text",
         {
           transform: `rotate(${y})`,
@@ -195,13 +195,13 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
       S && /* @__PURE__ */ a(
         "line",
         {
-          stroke: U ? B : K,
+          stroke: U ? w : K,
           strokeWidth: 1.5,
           y1: -32,
           y2: -12
         }
       ),
-      /* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + w})`, children: l.map((c, o) => /* @__PURE__ */ a(
+      /* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + j})`, children: l.map((c, o) => /* @__PURE__ */ a(
         "text",
         {
           transform: `rotate(${y})`,
@@ -219,16 +219,16 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
         c
       )) })
     ] });
-  }, qe = ({ series: e, xScale: t, yScale: r, innerHeight: l }) => {
+  }, Qe = ({ series: e, xScale: t, yScale: r, innerHeight: l }) => {
     const n = e && e.length > 0 ? e[0].color : "#3daff7", i = [];
-    e[0] && e[0].data.forEach((u) => {
-      V == "csv" ? m.keys.forEach((g) => {
-        i.push({ measure: g, min: u.data.variables[g] });
-      }) : _e.forEach((g) => {
-        i.push({ measure: g, min: u.data.variables[g] });
+    e[0] && e[0].data.forEach((p) => {
+      Z == "csv" ? d.keys.forEach((g) => {
+        i.push({ measure: g, min: p.data.variables[g] });
+      }) : je.forEach((g) => {
+        i.push({ measure: g, min: p.data.variables[g] });
       });
     });
-    const c = i.sort((u, g) => u.min - g.min), o = ae == "CUSTOM_BETWEEN_TWO_LINES" && re ? re : c[0].measure, b = ae == "CUSTOM_BETWEEN_TWO_LINES" && ne ? ne : c[c.length - 1].measure, at = ct().x((u) => t(u.data.x)).y0((u) => r(u.data.variables[o])).y1((u) => r(u.data.variables[b]));
+    const c = i.sort((p, g) => p.min - g.min), o = ae == "CUSTOM_BETWEEN_TWO_LINES" && re ? re : c[0].measure, b = ae == "CUSTOM_BETWEEN_TWO_LINES" && ne ? ne : c[c.length - 1].measure, at = ct().x((p) => t(p.data.x)).y0((p) => r(p.data.variables[o])).y1((p) => r(p.data.variables[b]));
     return /* @__PURE__ */ a(J, { children: e && e[0] && /* @__PURE__ */ a(
       "path",
       {
@@ -237,7 +237,7 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
         fillOpacity: 0.4
       }
     ) });
-  }, Qe = ({ series: e, xScale: t, yScale: r, innerHeight: l, innerWidth: n }) => {
+  }, Xe = ({ series: e, xScale: t, yScale: r, innerHeight: l, innerWidth: n }) => {
     const i = [0, n], c = ot().x((o, b) => b === 0 ? -10 : o).y((o) => r(0));
     return /* @__PURE__ */ a(nt, { children: /* @__PURE__ */ a(
       "path",
@@ -249,78 +249,78 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
       }
     ) });
   }, D = ["grid", "axes", "lines", "legends"];
-  Me && D.push(qe), ke && (D.push("points"), D.push("mesh")), Te && D.push(Qe);
+  ke && D.push(Qe), Ie && (D.push("points"), D.push("mesh")), Me && D.push(Xe);
   let M = [];
-  _(m.data).forEach((e) => {
+  _(d.data).forEach((e) => {
     e.data && (M = [...M, ...e.data.map((t) => t.y)]);
   });
-  const Xe = () => {
-    if (Z === "stacked") {
+  const Pe = () => {
+    if (q === "stacked") {
       const e = [];
-      _(m.data).forEach((l) => {
+      _(d.data).forEach((l) => {
         e.push(...l.data);
       });
       const r = [];
       e.forEach((l) => {
         r.indexOf(l.x) == -1 && r.push(l.x);
-      }), f = Math.max(
+      }), u = Math.max(
         ...r.map((l) => e.filter((n) => n.x == l).map((n) => n.y).reduce((n, i) => Math.max(n + i, n + 0)))
-      ), h = Math.min(
+      ), f = Math.min(
         ...r.map((l) => e.filter((n) => n.x == l).map((n) => n.y).reduce((n, i) => Math.min(n - i, i - n)))
       );
     } else
-      M.length > 0 && (f = Math.max(...M), h = Math.min(...M));
-    return f = f < 0 ? f * 0.9 : f * 1.1, h = h > 0 ? h * 0.9 : h * 1.1, { min: h, max: f };
+      M.length > 0 && (u = Math.max(...M), f = Math.min(...M));
+    return u = u < 0 ? u * 0.9 : u * 1.1, f = f > 0 ? f * 0.9 : f * 1.1, { min: f, max: u };
   };
-  let h = "auto", f = "auto";
-  const j = Xe();
-  $e == "fixed" ? (h = H != null && H != "" ? H : j.min, f = R != null && R != "" ? R : j.max) : (h = j.min, f = j.max);
-  const oe = () => /* @__PURE__ */ a(J, { children: X && C && /* @__PURE__ */ a("div", { className: "legend item", children: /* @__PURE__ */ a("label", { className: "legend-title", children: C }) }) }), Ce = {
-    top: Re,
-    right: ve,
-    bottom: Ge,
-    left: be
+  let f = "auto", u = "auto";
+  const B = Pe();
+  Le == "fixed" ? (f = H != null && H != "" ? H : B.min, u = R != null && R != "" ? R : B.max) : (f = B.min, u = B.max);
+  const de = () => /* @__PURE__ */ a(J, { children: P && C && /* @__PURE__ */ a("div", { className: "legend item", children: /* @__PURE__ */ a("label", { className: "legend-title", children: C }) }) }), Ce = {
+    top: ie,
+    right: Ee,
+    bottom: oe,
+    left: ve
   };
-  let Y = parseInt(Le);
-  const et = m.data && ((fe = (he = m.data) == null ? void 0 : he.filter((e) => {
+  let Y = parseInt(We);
+  const et = d.data && ((pe = (ue = d.data) == null ? void 0 : ue.filter((e) => {
     var t;
     return ((t = e == null ? void 0 : e.data) == null ? void 0 : t.length) > 0;
-  })) == null ? void 0 : fe.length), de = [];
+  })) == null ? void 0 : pe.length), he = [];
   if (F || W) {
     Y = Number.parseInt(s.yAxisTickValues);
-    const e = new Map(Object.entries(((ue = s == null ? void 0 : s.labels) == null ? void 0 : ue.xAxis) ?? {}));
+    const e = new Map(Object.entries(((xe = s == null ? void 0 : s.labels) == null ? void 0 : xe.xAxis) ?? {}));
     for (const [t, r] of e)
-      r || de.push(t);
+      r || he.push(t);
   }
-  const me = _(m.data), tt = ["grid", "axes", "legends"];
-  if (m != null && m.data && et > 0) {
-    let e = _(m.data);
-    return /* @__PURE__ */ v("div", { style: { height: Ee }, children: [
+  const fe = _(d.data), tt = ["grid", "axes", "legends"];
+  if (d != null && d.data && et > 0) {
+    let e = _(d.data);
+    return /* @__PURE__ */ v("div", { style: { height: Te }, children: [
       /* @__PURE__ */ a(
         lt,
         {
-          curve: Se,
-          data: me,
+          curve: Re,
+          data: fe,
           margin: Ce,
           xScale: { type: "point" },
           yScale: {
             type: "linear",
-            min: h,
-            max: f,
-            stacked: Z == "stacked",
+            min: f,
+            max: u,
+            stacked: q == "stacked",
             reverse: !1,
-            clamp: we
+            clamp: Ae
           },
-          layers: me.length === 0 ? tt : D,
+          layers: fe.length === 0 ? tt : D,
           axisTop: null,
-          axisRight: De ? {
+          axisRight: $e ? {
             tickSize: 5,
             tickValues: Y,
             tickPadding: 5,
             tickRotation: 0,
             legend: N.right,
             legendPosition: "middle",
-            legendOffset: parseInt(ze),
+            legendOffset: parseInt(Be),
             format: (t) => {
               const r = L || E;
               return I.formatNumber(
@@ -331,9 +331,9 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
               );
             }
           } : null,
-          enableGridY: Fe,
-          enableGridX: We,
-          enablePointLabel: ge === "top",
+          enableGridY: ze,
+          enableGridX: _e,
+          enablePointLabel: Ne === "top",
           pointLabel: (t) => I.formatNumber(
             E.style === "percent" ? t.yFormatted / 100 : t.yFormatted,
             E
@@ -341,10 +341,10 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
           lineWidth: 3,
           colors: (t) => ee.getColor(t.id, t),
           axisBottom: (F || W) && (s == null ? void 0 : s.xAxisDisabled) === !0 ? null : {
-            renderTick: Ze,
+            renderTick: qe,
             legend: N.bottom,
             legendPosition: "middle",
-            legendOffset: Number.parseInt(Ie)
+            legendOffset: Number.parseInt(Fe)
           },
           axisLeft: {
             tickSize: 5,
@@ -353,7 +353,7 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
             tickRotation: 0,
             legend: N.left,
             legendPosition: "middle",
-            legendOffset: Number.parseInt(Ne),
+            legendOffset: Number.parseInt(Oe),
             format: (t) => {
               const r = L || E;
               return I.formatNumber(
@@ -364,14 +364,14 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
               );
             }
           },
-          tooltip: (t) => ye && $ && $.trim().length > 0 ? /* @__PURE__ */ a(
+          tooltip: (t) => ge && k && k.trim().length > 0 ? /* @__PURE__ */ a(
             it,
             {
               intl: I,
               format: E,
               d: t,
-              tooltip: $,
-              tooltipEnableMarkdown: je
+              tooltip: k,
+              tooltipEnableMarkdown: we
             }
           ) : null,
           pointSize: 10,
@@ -381,33 +381,34 @@ const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].incl
         },
         /* @__PURE__ */ new Date()
       ),
-      (p === "top" || p === "bottom") && /* @__PURE__ */ a(
+      (h === "top" || h === "bottom") && /* @__PURE__ */ a(
         "div",
         {
-          className: `legends container has-standard-12-font-size ${p}`,
+          className: `legends container has-standard-12-font-size ${h}`,
+          style: h === "top" ? { marginTop: `${ie}px` } : h === "bottom" ? { marginBottom: `${oe}px` } : {},
           children: /* @__PURE__ */ v("div", { className: "legend-sections", children: [
-            /* @__PURE__ */ a("div", { className: "title-section", children: oe() }),
+            /* @__PURE__ */ a("div", { className: "title-section", children: de() }),
             /* @__PURE__ */ a(
-              mt,
+              dt,
               {
                 onWrapChange: (t) => {
-                  p === "top" ? (Ue(q + t / 2 * 40), ie(t)) : (Ye(Q + t / 2 * 25), ie(t));
+                  h === "top" ? (Ge(Q + t / 2 * 40), ce(t)) : (Ye(X + t / 2 * 25), ce(t));
                 },
                 className: "legends container has-standard-12-font-size items-section",
-                children: ce()
+                children: me()
               }
             )
           ] })
         }
       ),
-      (p === "right" || p === "left") && /* @__PURE__ */ v(
+      (h === "right" || h === "left") && /* @__PURE__ */ v(
         "div",
         {
-          className: `legends container has-standard-12-font-size  ${p}`,
-          style: p === "right" ? Ke : Pe,
+          className: `legends container has-standard-12-font-size  ${h}`,
+          style: h === "right" ? Ke : Ve,
           children: [
-            oe(),
-            ce()
+            de(),
+            me()
           ]
         }
       )