@devgateway/dvz-ui-react/dist/esm/embeddable/d3Map/Legends.js

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.

import { jsx as e, jsxs as l, Fragment as f } from "react/jsx-runtime";
import { useRef as P } from "react";
import { symbol as _ } from "prop-types";
import j from "papaparse";
const B = ({ breaks: n, isPoint: d }) => n.length > 0 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: n.map((a, o) => a.type !== "graterThan" ? /* @__PURE__ */ l("div", { className: "break", children: [
  /* @__PURE__ */ e(
    "div",
    {
      className: `break-item ${d ? "point" : ""}`,
      style: {
        backgroundColor: a.color,
        border: `1px solid ${a.borderColor}`
      }
    }
  ),
  /* @__PURE__ */ l("div", { className: "break-label", children: [
    " < ",
    a.end
  ] })
] }) : /* @__PURE__ */ l("div", { className: "break", children: [
  /* @__PURE__ */ e(
    "div",
    {
      className: `break-item ${_}`,
      style: {
        backgroundColor: a.color,
        border: `1px solid ${a.borderColor}`
      }
    }
  ),
  /* @__PURE__ */ l("div", { className: "break-label", children: [
    " > ",
    a.end
  ] })
] })) }), M = (n) => {
  const {
    name: d,
    breaks: a,
    pointStyleBy: o,
    dimension2: c,
    pointDimensionStyles: s = {},
    markFillColor: r,
    markBorderColor: t,
    measures: m,
    visible: g,
    id: v,
    onItemClick: N,
    customMeasuresLabels: k
  } = n;
  let b = m[0];
  return k && (b = k[m[0]]), [...new Set(Object.keys(s).map((h) => h.split("_")[0]))], /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ l("div", { children: [
    /* @__PURE__ */ l("div", { className: "legend-item", children: [
      /* @__PURE__ */ e(
        "div",
        {
          className: "legend-color legend-check",
          onClick: (h) => N(v),
          style: {
            backgroundColor: r,
            borderColor: t
          },
          children: g != !1 && /* @__PURE__ */ e(f, { children: "✓" })
        }
      ),
      /* @__PURE__ */ l("div", { className: "legend-label", children: [
        d,
        " (",
        b,
        ")"
      ] })
    ] }),
    g != !1 && /* @__PURE__ */ e(B, { breaks: a, symbol: "arrow" })
  ] }) });
}, R = (n) => {
  const {
    id: d,
    name: a,
    breaks: o,
    pointStyleBy: c,
    dimension2: s,
    pointDimensionStyles: r = {},
    markFillColor: t,
    markBorderColor: m,
    measures: g,
    visible: v,
    onItemClick: N,
    customMeasuresLabels: k,
    allCategories: b
  } = n;
  let h = g[0];
  k && (h = k[g[0]]);
  const L = s && b ? b.filter((i) => i.type.toUpperCase() == s.toUpperCase()) : [], C = (L.length > 0 ? L[0].items : []).map((i) => i.value), D = c === "dimension" ? s : h;
  return /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ l("div", { children: [
    /* @__PURE__ */ l("div", { className: "legend-item", children: [
      /* @__PURE__ */ e(
        "div",
        {
          className: "legend-color legend-check",
          onClick: (i) => N(d),
          style: {
            backgroundColor: t,
            borderColor: m
          },
          children: v != !1 && /* @__PURE__ */ e(f, { children: "✓" })
        }
      ),
      /* @__PURE__ */ l("div", { className: "legend-label", children: [
        a,
        " "
      ] })
    ] }),
    /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ e("div", { className: "legend-item", children: /* @__PURE__ */ e("div", { className: "legend-label", children: D }) }) }),
    c === "dimension" && v != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: C.map((i) => /* @__PURE__ */ l("div", { className: "break", children: [
      /* @__PURE__ */ e("div", { className: "break-item", style: {
        backgroundColor: r[i + "_color"] || t,
        border: `1px solid ${r[i + "_border"] || m}`
      } }),
      /* @__PURE__ */ e("div", { className: "break-label", children: i })
    ] })) }),
    c === "measure" && v != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: o.map((i, S) => /* @__PURE__ */ l("div", { className: "break", children: [
      /* @__PURE__ */ e("div", { className: "break-item", style: {
        backgroundColor: i.color,
        border: `1px solid ${i.borderColor}`
      } }),
      /* @__PURE__ */ l("div", { className: "break-label", children: [
        " < ",
        i.end
      ] })
    ] })) })
  ] }) });
}, T = (n) => {
  const { fillColor: d, borderColor: a, name: o, visible: c, id: s, onItemClick: r } = n;
  return /* @__PURE__ */ e("div", { className: "legend", children: /* @__PURE__ */ l("div", { className: "legend-item", children: [
    /* @__PURE__ */ e(
      "div",
      {
        className: "legend-color legend-check",
        onClick: (t) => r(s),
        style: { backgroundColor: d, borderColor: a },
        children: c != !1 && /* @__PURE__ */ e(f, { children: "✓" })
      }
    ),
    /* @__PURE__ */ e("div", { className: "legend-label", children: o })
  ] }) });
}, U = (n) => {
  const {
    markFillColor: d,
    fillColor: a,
    markSizeScale: o,
    markBorderColor: c,
    useCentroidPoint: s,
    name: r,
    useBreaks: t,
    breaks: m,
    usePattern: g,
    patternsData: v,
    patternDiscriminator: N,
    patternDiscriminatorLabel: k,
    measures: b,
    borderColor: h,
    data: L,
    app: $,
    customMeasuresLabels: C,
    divRef: D,
    id: i,
    patternWidth: S = 0.35,
    patternHeight: q = 0.25,
    group: I,
    csv: w,
    visible: y,
    onItemClick: F
  } = n;
  let u = "";
  if ($ != "csv" && C)
    u = C[b[0]];
  else {
    const p = j.parse(w, { header: !0, dynamicTyping: !0 });
    u = p.meta.fields.length > 0 ? p.meta.fields[1] : "";
  }
  const x = (p) => p ? p.toString().replace(/ /g, "_").toLocaleLowerCase() : "";
  return /* @__PURE__ */ e("div", { className: `legend layer_${x(i)}`, id: x(`${I} ${r} ${i}`), children: /* @__PURE__ */ l("div", { children: [
    /* @__PURE__ */ l("div", { className: "legend-item", children: [
      /* @__PURE__ */ e(
        "div",
        {
          className: "legend-color legend-check",
          onClick: (p) => F(i),
          style: { backgroundColor: a, borderColor: h },
          children: y != !1 && /* @__PURE__ */ e(f, { children: "✓" })
        }
      ),
      /* @__PURE__ */ l("div", { className: "legend-label", children: [
        r,
        " ",
        !s && /* @__PURE__ */ l("span", { children: [
          "(",
          u,
          ")"
        ] })
      ] })
    ] }),
    s && !t && y != !1 && /* @__PURE__ */ e("div", { className: "legend-breaks", children: /* @__PURE__ */ l("div", { className: "break", children: [
      /* @__PURE__ */ e("div", { className: "break-item point", style: {
        backgroundColor: d,
        border: `1px solid ${c}`
      } }),
      u
    ] }) }),
    t && y != !1 && /* @__PURE__ */ l("div", { children: [
      s && /* @__PURE__ */ e("div", { className: "legend-breaks", children: /* @__PURE__ */ e("div", { className: "break-item", children: u }) }),
      /* @__PURE__ */ e(B, { symbol: s ? "point" : "square", breaks: m, visible: y })
    ] })
  ] }) });
}, W = (n) => {
  const d = P(null), { layers: a = [], onItemClick: o, patternsData: c, group: s } = n;
  return /* @__PURE__ */ e("div", { className: "legends", ref: d, children: a && a.map((r) => /* @__PURE__ */ l("div", { children: [
    r.type == "base" && /* @__PURE__ */ e(T, { ...r, group: s, onItemClick: o }),
    r.type == "data" && /* @__PURE__ */ e(
      U,
      {
        group: s,
        patternsData: c ? c[r.id] : null,
        divRef: d,
        ...r,
        onItemClick: o
      }
    ),
    r.type == "dataPoints" && /* @__PURE__ */ e(R, { group: s, ...r, onItemClick: o }),
    r.type == "flow" && /* @__PURE__ */ e(M, { group: s, ...r, onItemClick: o })
  ] })) });
};
export {
  W as default
};