@devgateway/dvz-ui-react 1.6.20 → 1.7.0

package/dist/esm/embeddable/d3Map/Layer.js

@@ -1,59 +1,63 @@
-import { jsx as s } from "react/jsx-runtime";
-import r from "react";
-import { createRoot as n } from "react-dom/client";
+import { jsx as l } from "react/jsx-runtime";
+import p from "react";
+import { createRoot as f } from "react-dom/client";
 import * as o from "d3";
-import p from "./Tooltip.js";
-import { loadJSON as h } from "./Utils.js";
-let g = class extends r.Component {
+import y from "./Tooltip.js";
+import { loadJSON as T } from "./Utils.js";
+let L = class extends p.Component {
   constructor() {
-    super(), this.loadJSON = this.loadJSON.bind(this), this.create = this.create.bind(this), this.createLayer = this.createLayer.bind(this), this.loadJSON = this.loadJSON.bind(this), this.showToolTip = this.showToolTip.bind(this), this.moveToolTip = this.moveToolTip.bind(this), this.gRef = r.createRef(), this.state = { json: null };
+    super(), this.loadJSON = this.loadJSON.bind(this), this.create = this.create.bind(this), this.createLayer = this.createLayer.bind(this), this.loadJSON = this.loadJSON.bind(this), this.showToolTip = this.showToolTip.bind(this), this.moveToolTip = this.moveToolTip.bind(this), this.gRef = p.createRef(), this.state = { json: null };
   }
-  loadJSON(t) {
-    return h(t);
+  loadJSON(e) {
+    return T(e);
   }
-  createLayer(t) {
+  createLayer(e) {
     alert("please implement createLayer");
   }
   applyInitialTransform() {
-    const { editing: t, initialPosition: e, width: i, height: a } = this.props;
-    o.select(this.gRef.current).attr("transform", `translate(${e.x},${e.y}) scale(${e.k})`);
+    const { editing: e, initialPosition: t, width: s, height: a } = this.props;
+    if (t && t.width) {
+      const { x: i, y: n, k: r, width: h, height: c } = t, d = i + (s - h) / 2 * (1 - r), m = n + (a - c) / 2 * (1 - r);
+      o.select(this.gRef.current).attr("transform", `translate(${d},${m}) scale(${r})`);
+    } else
+      o.select(this.gRef.current).attr("transform", `translate(${t.x},${t.y}) scale(${t.k})`);
   }
   create() {
     const {
-      file: t
+      file: e
     } = this.props;
-    this.state.json ? this.createLayer(this.state.json) : this.loadJSON(t).then((e) => {
-      this.createLayer(e);
+    this.state.json ? this.createLayer(this.state.json) : this.loadJSON(e).then((t) => {
+      this.setState({ json: t }), this.createLayer(t);
     });
   }
-  showToolTip(t, e, i, a) {
-    if (e) {
-      const l = o.select("body").append("div").attr("class", "d3MapTooltip").style("position", "absolute").html("").style("left", window.event.pageX + 15 + "px").style("top", window.event.pageY - 50 + "px");
-      n(l._groups[0][0]).render(/* @__PURE__ */ s(
-        p,
+  showToolTip(e, t, s, a) {
+    if (t) {
+      const i = o.select("body").append("div").attr("class", "d3MapTooltip").style("position", "absolute").html("").style("left", window.event.pageX + 15 + "px").style("top", window.event.pageY - 50 + "px");
+      f(i._groups[0][0]).render(/* @__PURE__ */ l(
+        y,
         {
           intl: this.props.intl,
-          tooltip: t,
-          data: e,
+          tooltip: e,
+          data: t,
           tooltipEnableMarkdown: !1
         }
       ));
     }
   }
-  moveToolTip(t) {
+  moveToolTip(e) {
     o.select(".d3MapTooltip").style("left", window.event.pageX + 15 + "px").style("top", window.event.pageY - 50 + "px");
   }
-  hiddenToolTip(t) {
+  hiddenToolTip(e) {
     o.selectAll(".d3MapTooltip").remove();
   }
   componentDidMount() {
     this.props.zoom && this.gRef.current && this.applyInitialTransform(), this.create();
   }
   render() {
-    const { name: t, height: e, width: i } = this.props;
-    return /* @__PURE__ */ s("g", { className: "layer", ref: this.gRef });
+    const { name: e, height: t, width: s } = this.props;
+    return /* @__PURE__ */ l("g", { className: "layer", ref: this.gRef });
   }
 };
 export {
-  g as default
+  L as default
 };

package/dist/esm/embeddable/d3Map/Legends.js

@@ -1,12 +1,13 @@
-import { jsx as e, jsxs as i, Fragment as S } from "react/jsx-runtime";
-import { useRef as V } from "react";
+import { jsxs as a, jsx as e, Fragment as $ } from "react/jsx-runtime";
+import { useRef as W, useState as K } 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: [
+import Q from "papaparse";
+import { injectIntl as X } from "react-intl";
+import Y from "../data/D3MapDataProvider.js";
+import Z from "../data/D3MapDataConsumer.js";
+import ee from "./GradientColors.js";
+import { Icon as G } from "semantic-ui-react";
+const U = ({ breaks: l, isPoint: o, numberFormat: d, intl: v }) => l.length > 0 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: l.map((n, c) => n.type !== "graterThan" ? /* @__PURE__ */ a("div", { className: "break", children: [
   /* @__PURE__ */ e(
     "div",
     {
@@ -17,11 +18,11 @@ const G = ({ breaks: t, isPoint: o, numberFormat: c, intl: m }) => t.length > 0
       }
     }
   ),
-  /* @__PURE__ */ i("div", { className: "break-label", children: [
+  /* @__PURE__ */ a("div", { className: "break-label", children: [
     " < ",
-    m.formatNumber(n.end, c)
+    v.formatNumber(n.end, d)
   ] })
-] }) : /* @__PURE__ */ i("div", { className: "break", children: [
+] }) : /* @__PURE__ */ a("div", { className: "break", children: [
   /* @__PURE__ */ e(
     "div",
     {
@@ -32,122 +33,122 @@ const G = ({ breaks: t, isPoint: o, numberFormat: c, intl: m }) => t.length > 0
       }
     }
   ),
-  /* @__PURE__ */ i("div", { className: "break-label", children: [
+  /* @__PURE__ */ a("div", { className: "break-label", children: [
     " > ",
-    m.formatNumber(n.end, c)
+    v.formatNumber(n.end, d)
   ] })
-] })) }), W = (t) => {
+] })) }), re = (l) => {
   const {
     name: o,
-    breaks: c,
-    pointStyleBy: m,
+    breaks: d,
+    pointStyleBy: v,
     dimension2: n,
-    pointDimensionStyles: l = {},
-    markFillColor: d,
-    markBorderColor: u,
-    measures: r,
-    visible: y,
+    pointDimensionStyles: c = {},
+    markFillColor: s,
+    markBorderColor: m,
+    measures: k,
+    visible: h,
     format: g,
-    intl: N,
-    id: C,
-    onItemClick: L,
+    intl: D,
+    id: r,
+    onItemClick: y,
     customMeasuresLabels: f
-  } = t, h = {
+  } = l, u = {
     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: [
+  let p = k[0];
+  return f && (p = f[k[0]]), [...new Set(Object.keys(c).map((b) => b.split("_")[0]))], /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ a("div", { children: [
+    /* @__PURE__ */ a("div", { className: "legend-item", children: [
       /* @__PURE__ */ e(
         "div",
         {
           className: "legend-color legend-check",
-          onClick: (b) => L(C),
+          onClick: (b) => y(r),
           style: {
-            backgroundColor: d,
-            borderColor: u
+            backgroundColor: s,
+            borderColor: m
           },
-          children: y != !1 && /* @__PURE__ */ e(S, { children: "✓" })
+          children: h != !1 && /* @__PURE__ */ e($, { children: "✓" })
         }
       ),
-      /* @__PURE__ */ i("div", { className: "legend-label", children: [
+      /* @__PURE__ */ a("div", { className: "legend-label", children: [
         o,
         " (",
         p,
         ")"
       ] })
     ] }),
-    y != !1 && /* @__PURE__ */ e(G, { breaks: c, symbol: "arrow", numberFormat: h, intl: N })
+    h != !1 && /* @__PURE__ */ e(U, { breaks: d, symbol: "arrow", numberFormat: u, intl: D })
   ] }) });
-}, K = (t) => {
+}, ae = (l) => {
   const {
     id: o,
-    name: c,
-    breaks: m,
+    name: d,
+    breaks: v,
     intl: n,
-    pointStyleBy: l,
-    format: d,
-    dimension2: u,
-    pointDimensionStyles: r = {},
-    markFillColor: y,
+    pointStyleBy: c,
+    format: s,
+    dimension2: m,
+    pointDimensionStyles: k = {},
+    markFillColor: h,
     markBorderColor: g,
-    measures: N,
-    visible: C,
-    onItemClick: L,
+    measures: D,
+    visible: r,
+    onItemClick: y,
     customMeasuresLabels: f,
-    allCategories: h,
+    allCategories: u,
     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)
+    type: L,
+    d2Click: x,
+    selectedItem: F
+  } = l, C = {
+    style: s.style === "compacted" ? "decimal" : s.style,
+    notation: s.style === "compacted" ? "compact" : "standard",
+    currency: s.currency,
+    minimumFractionDigits: parseInt(s.minimumFractionDigits),
+    maximumFractionDigits: parseInt(s.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: [
+  let S = D[0];
+  f && (S = f[D[0]]);
+  const w = m && u ? u.filter((i) => i.type.toUpperCase() == m.toUpperCase()) : [], N = (w.length > 0 ? w[0].items : []).map((i) => i.value), P = c === "dimension" || p ? m : S;
+  return /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ a("div", { children: [
+    /* @__PURE__ */ a("div", { className: "legend-item", children: [
       /* @__PURE__ */ e(
         "div",
         {
           className: "legend-color legend-check",
-          onClick: (a) => L(o),
-          style: l === "measure" || p ? {} : {
-            backgroundColor: y,
+          onClick: (i) => y(o),
+          style: c === "measure" || p ? {} : {
+            backgroundColor: h,
             borderColor: g
           },
-          children: C != !1 && /* @__PURE__ */ e(S, { children: "✓" })
+          children: r != !1 && /* @__PURE__ */ e($, { children: "✓" })
         }
       ),
-      /* @__PURE__ */ i("div", { className: "legend-label", children: [
-        c,
+      /* @__PURE__ */ a("div", { className: "legend-label", children: [
+        d,
         " "
       ] })
     ] }),
-    l === "measure" && C != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: m.map((a, R) => /* @__PURE__ */ i("div", { className: "break", children: [
+    c === "measure" && r != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: v.map((i, z) => /* @__PURE__ */ a("div", { className: "break", children: [
       /* @__PURE__ */ e("div", { className: "break-item", style: {
-        backgroundColor: a.color,
-        border: `1px solid ${a.borderColor}`,
-        borderRadius: D == "dataPoints" ? "50%" : "0"
+        backgroundColor: i.color,
+        border: `1px solid ${i.borderColor}`,
+        borderRadius: L == "dataPoints" ? "50%" : "0"
       } }),
-      /* @__PURE__ */ i("div", { className: "break-label", children: [
+      /* @__PURE__ */ a("div", { className: "break-label", children: [
         " < ",
-        n.formatNumber(a.end, v)
+        n.formatNumber(i.end, C)
       ] })
     ] })) }),
-    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(
+    r != !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 }) }) }),
+    r != !1 && p != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: N.map((i) => /* @__PURE__ */ a("div", { className: "break", children: [
+      c === "measure" ? /* @__PURE__ */ e(
         "span",
         {
           className: "break-item dim2-item"
@@ -157,110 +158,115 @@ const G = ({ breaks: t, isPoint: o, numberFormat: c, intl: m }) => t.length > 0
         {
           className: "break-item",
           style: {
-            backgroundColor: r[a + "_color"] || y,
-            border: `1px solid ${r[a + "_border"] || g}`,
-            borderRadius: D == "dataPoints" ? "50%" : "0"
+            backgroundColor: k[i + "_color"] || h,
+            border: `1px solid ${k[i + "_border"] || g}`,
+            borderRadius: L == "dataPoints" ? "50%" : "0"
           }
         }
       ),
-      /* @__PURE__ */ e("div", { className: "break-label", onClick: (R) => F(a), children: x == a ? /* @__PURE__ */ e("b", { children: a }) : a })
+      /* @__PURE__ */ e("div", { className: "break-label", onClick: (z) => x(i), children: F == i ? /* @__PURE__ */ e("b", { children: i }) : i })
     ] })) })
   ] }) });
-}, 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: [
+}, ie = (l) => {
+  const { fillColor: o, borderColor: d, name: v, visible: n, id: c, onItemClick: s } = l;
+  return /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ a("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: "✓" })
+        onClick: (m) => s(c),
+        style: { backgroundColor: o, borderColor: d },
+        children: n != !1 && /* @__PURE__ */ e($, { children: "✓" })
       }
     ),
-    /* @__PURE__ */ e("div", { className: "legend-label", children: m })
+    /* @__PURE__ */ e("div", { className: "legend-label", children: v })
   ] }) });
-}, X = (t) => {
+}, le = (l) => {
   const {
     markFillColor: o,
-    fillColor: c,
-    markSizeScale: m,
+    fillColor: d,
+    markSizeScale: v,
     markBorderColor: n,
-    useCentroidPoint: l,
-    name: d,
-    useBreaks: u,
-    useGradients: r,
-    breaks: y,
+    useCentroidPoint: c,
+    name: s,
+    useBreaks: m,
+    useGradients: k,
+    breaks: h,
     intl: g,
-    usePattern: N,
-    patternsData: C,
-    patternDiscriminator: L,
+    usePattern: D,
+    patternsData: r,
+    patternDiscriminator: y,
     patternDiscriminatorLabel: f,
-    measures: h,
+    measures: u,
     borderColor: p,
     data: b,
-    app: D,
-    customMeasuresLabels: F,
-    divRef: x,
-    id: v,
-    patternWidth: w = 0.35,
-    patternHeight: B = 0.25,
-    group: U,
-    format: k,
+    app: L,
+    customMeasuresLabels: x,
+    divRef: F,
+    id: C,
+    patternWidth: S = 0.35,
+    patternHeight: w = 0.25,
+    group: E,
+    format: N,
     csv: P,
-    visible: a,
-    onItemClick: R,
-    gradientScheme: O,
-    gradientReverse: T,
-    toggleColorLayer: q,
-    colorLayerVisible: _ = !0
-  } = t;
+    visible: i,
+    onItemClick: z,
+    gradientScheme: q,
+    gradientReverse: A,
+    toggleColorLayer: j,
+    colorLayerVisible: B = !0,
+    gradientStartColor: H,
+    gradientEndColor: J
+  } = l;
   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],
+  const R = {
+    style: N.style === "compacted" ? "decimal" : N.style,
+    notation: N.style === "compacted" ? "compact" : "standard",
+    currency: N.currency,
+    minimumFractionDigits: parseInt(N.minimumFractionDigits),
+    maximumFractionDigits: parseInt(N.maximumFractionDigits)
+  }, V = (t) => new ee({
+    data: t.children,
+    measure: u[0],
     defaultFillColor: o,
-    gradientScheme: O,
-    gradientReverse: T
+    gradientScheme: q,
+    gradientReverse: A,
+    gradientStartColor: H,
+    gradientEndColor: J
   });
-  if (D != "csv" && F)
-    I = F[h[0]];
+  if (L != "csv" && x)
+    I = x[u[0]];
   else {
-    const s = z.parse(P, { header: !0, dynamicTyping: !0 });
-    I = s.meta.fields.length > 0 ? s.meta.fields[1] : "";
+    const t = Q.parse(P, { header: !0, dynamicTyping: !0 });
+    I = t.meta.fields.length > 0 ? t.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`
+  const M = (t) => t ? t.toString().replace(/ /g, "_").toLocaleLowerCase() : "";
+  if (F.current) {
+    const t = F.current.querySelector(
+      `.legend.layer_${M(C)} svg`
     );
-    s && (s.style.display = a === !1 ? "none" : "block");
+    t && (t.style.display = i === !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: [
+  const O = (t) => Math.min(...t.children.map((_) => _[u[0]])), T = (t) => Math.max(...t.children.map((_) => _[u[0]]));
+  return /* @__PURE__ */ e("div", { className: `legend layer_${M(C)}`, id: M(`${E} ${s} ${C}`), children: /* @__PURE__ */ a("div", { children: [
+    /* @__PURE__ */ a("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: "✓" })
+          onClick: (t) => z(C),
+          style: { backgroundColor: d, borderColor: p },
+          children: i != !1 && /* @__PURE__ */ e($, { children: "✓" })
         }
       ),
-      /* @__PURE__ */ e("div", { className: "legend-label", children: d })
+      /* @__PURE__ */ e("div", { className: "legend-label", children: s })
     ] }),
-    l && !u && a != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: /* @__PURE__ */ i("div", { className: "break", children: [
+    c && !m && i != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: /* @__PURE__ */ a("div", { className: "break", children: [
       /* @__PURE__ */ e(
         "div",
         {
-          className: `break-item point ${_ ? "checked" : ""}`,
-          onClick: (s) => q(v),
+          className: `break-item point ${B ? "checked" : ""}`,
+          onClick: (t) => j(C),
           style: {
             backgroundColor: o,
             border: `1px solid ${n}`
@@ -269,78 +275,86 @@ const G = ({ breaks: t, isPoint: o, numberFormat: c, intl: m }) => t.length > 0
       ),
       I
     ] }) }),
-    u && a != !1 && /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e("div", { className: "legend-breaks", children: /* @__PURE__ */ i(
+    m && i != !1 && /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ e("div", { className: "legend-breaks", children: /* @__PURE__ */ a(
         "div",
         {
           className: "legend-section-title",
-          onClick: (s) => q(v),
+          onClick: (t) => j(C),
           children: [
-            /* @__PURE__ */ e("div", { className: `legend-section-title-checkbox ${_ ? "checked" : ""}` }),
+            /* @__PURE__ */ e("div", { className: `legend-section-title-checkbox ${B ? "checked" : ""}` }),
             /* @__PURE__ */ e("span", { className: "measure-label", children: I })
           ]
         }
       ) }),
-      _ && /* @__PURE__ */ e(
-        G,
+      B && /* @__PURE__ */ e(
+        U,
         {
-          isPoint: l,
-          numberFormat: M,
-          breaks: y,
-          visible: a,
+          isPoint: c,
+          numberFormat: R,
+          breaks: h,
+          visible: i,
           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) }),
+    k && b && b.children && b.children.length > 0 && i != !1 && /* @__PURE__ */ a("div", { className: "gradient-container", children: [
+      /* @__PURE__ */ e("div", { className: "gradient-label", style: { float: "right" }, children: g.formatNumber(T(b), R) }),
+      /* @__PURE__ */ e("div", { className: "gradient-label", style: { float: "left" }, children: g.formatNumber(O(b), R) }),
       /* @__PURE__ */ e(
         "div",
         {
+          className: "gradient-bar",
           style: {
-            background: `linear-gradient(to right, ${E.getStartColor()}, ${E.getEndColor()})`,
-            width: "200px",
+            background: `linear-gradient(to right, ${V(b).getStartColor()}, ${V(b).getEndColor()})`,
+            width: "120px",
             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,
+}, te = (l) => {
+  const o = W(null), [d, v] = K(!1), n = ({ size: r = 16, color: y = "currentColor" }) => /* @__PURE__ */ e(G, { name: "chevron down" }), c = ({ size: r = 16, color: y = "currentColor" }) => /* @__PURE__ */ e(G, { name: "chevron right" }), { layers: s = [], onItemClick: m, patternsData: k, group: h, intl: g, toggleColorLayer: D } = l;
+  return /* @__PURE__ */ a("div", { className: `legends ${d ? "collapsed" : ""}`, ref: o, children: [
+    /* @__PURE__ */ e("div", { className: "legend-collapsible-control", onClick: () => v(!d), children: d ? /* @__PURE__ */ a("div", { children: [
+      " ",
+      /* @__PURE__ */ e(c, { size: 14 }),
+      "   Show Legend"
+    ] }) : /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ e(n, { size: 14 }),
+      "Hide Legend"
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: "legends-content", children: s && s.map((r) => {
+      const y = {}, f = r.filters || {};
+      return f && f.forEach && f.forEach((u) => {
+        u.value != null && u.value.filter((p) => p != null && p.toString().trim() != "").length > 0 && (y[u.param] = u.value);
+      }), r.dvzProxyDatasetId && (y.dvzProxyDatasetId = r.dvzProxyDatasetId), /* @__PURE__ */ a("div", { children: [
+        r.type == "base" && /* @__PURE__ */ e(ie, { ...r, group: h, onItemClick: m }),
+        r.type == "data" && r.apiJoinAttribute && /* @__PURE__ */ e(
+          Y,
           {
-            group: l,
-            patternsData: n ? n[r.id] : null,
-            divRef: o,
-            ...r,
-            intl: t.intl,
-            onItemClick: m,
-            toggleColorLayer: u
+            waitForFilters: !0,
+            editing: r.editing,
+            params: y,
+            app: r.app,
+            verbose: !1,
+            csv: decodeURIComponent(r.csv),
+            group: h,
+            ignoreErrors: !0,
+            isSvg: !0,
+            mySelf: "Legends",
+            store: [r.app, l.unique, r.id],
+            source: r.apiJoinAttribute + (r.patternDiscriminator != "none" ? "/" + r.patternDiscriminator : ""),
+            children: /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(le, { group: h, patternsData: k ? k[r.id] : null, divRef: o, ...r, intl: l.intl, onItemClick: m, toggleColorLayer: D }) })
           }
-        ) }),
-        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);
+        ),
+        r.type == "dataPoints" && /* @__PURE__ */ e(ae, { selectedItem: l.selectedItem, d2Click: l.d2Click, intl: l.intl, group: h, ...r, onItemClick: m }),
+        r.type == "flow" && /* @__PURE__ */ e(re, { group: h, ...r, onItemClick: m, intl: l.intl })
+      ] }, r.id);
+    }) })
+  ] });
+}, pe = X(te);
 export {
-  se as default
+  pe as default
 };