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