@cloudflare/kumo 2.3.0 → 2.4.0

package/dist/chunks/SankeyChart-krkvltewpn3bbupw.js

@@ -1,651 +0,0 @@
-"use client";
-import { jsx as w, jsxs as G } from "react/jsx-runtime";
-import { forwardRef as ae, useRef as H, useEffect as M, useMemo as V, useCallback as ce } from "react";
-import { c as L } from "./cn-ct4n7r74mh8y0f48.js";
-var te = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Success = "#00A63E", e.Neutral = "#B9D6FF", e.Disabled = "#CBCBCB", e.Skeleton = "#DDDDDD", e))(te || {}), ne = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Success = "#00A63E", e.Neutral = "#8EC5FF", e.Disabled = "#878787", e.Skeleton = "#5C5C5C", e))(ne || {});
-const le = {
-  blues: ["#E1EAF4", "#8EBCF6", "#4290F0", "#0E58B4", "#03254F"]
-}, ie = {
-  blues: ["#03254F", "#0E58B4", "#4290F0", "#A6BFDD", "#E1EAF4"]
-}, K = [
-  "#4290F0",
-  "#F5B647",
-  "#E8649D",
-  "#8D58EE",
-  "#50C3B6",
-  "#D37536"
-  /* Orange */
-], Y = [
-  "#4290F0",
-  "#EEB720",
-  "#E8649D",
-  "#8D58EE",
-  "#50C3B6",
-  "#D37536"
-  /* Orange */
-];
-var W;
-((e) => {
-  function t(o, f = !1) {
-    return f ? ne[o] : te[o];
-  }
-  e.semantic = t;
-  function a(o, f = !1) {
-    return f ? Y[o % Y.length] : K[o % K.length];
-  }
-  e.categorical = a;
-  function c(o, f = !1) {
-    return f ? [...ie[o]] : [...le[o]];
-  }
-  e.sequential = c;
-  function r(o, f = !1) {
-    const h = {
-      light: { primary: "#6B7280", secondary: "#9CA3AF" },
-      dark: { primary: "#9CA3AF", secondary: "#6B7280" }
-    };
-    return f ? h.dark[o] : h.light[o];
-  }
-  e.text = r;
-})(W || (W = {}));
-const Q = (e) => {
-  const { dangerousHtmlFormatter: t, ...a } = e;
-  return {
-    ...a,
-    formatter: t
-  };
-}, ue = (e) => e.tooltip ? {
-  ...e,
-  tooltip: Array.isArray(e.tooltip) ? e.tooltip.map(Q) : Q(e.tooltip)
-} : e, J = ae(function({
-  echarts: t,
-  options: a,
-  optionUpdateBehavior: c,
-  className: r,
-  isDarkMode: o,
-  height: f = 350,
-  onEvents: h
-}, b) {
-  const m = H(null), y = H(null), S = H({}), N = H({}), A = H(/* @__PURE__ */ new Set());
-  return M(() => {
-    if (!m.current) return;
-    const d = t.init(
-      m.current,
-      o ? "dark" : {
-        color: o ? Y : K
-      }
-    );
-    return y.current = d, typeof b == "function" ? b(d) : b && (b.current = d), () => {
-      for (const x of A.current) {
-        const i = N.current[x];
-        i && d.off(x, i);
-      }
-      A.current.clear(), typeof b == "function" ? b(null) : b && (b.current = null), y.current = null, d.dispose();
-    };
-  }, [m, o]), M(() => {
-    const d = y.current;
-    d && d.setOption(ue(a), {
-      notMerge: !1,
-      lazyUpdate: !0,
-      ...c
-    });
-  }, [o, c, a]), M(() => {
-    S.current = h ?? {};
-  }, [h]), M(() => {
-    const d = y.current;
-    if (!d) return;
-    const x = /* @__PURE__ */ new Set();
-    for (const [i, g] of Object.entries(h ?? {}))
-      typeof g == "function" && (x.add(i), N.current[i] || (N.current[i] = (T) => {
-        S.current[i]?.(T);
-      }), A.current.has(i) || d.on(i, N.current[i]));
-    for (const i of A.current) {
-      if (x.has(i)) continue;
-      const g = N.current[i];
-      g && d.off(i, g);
-    }
-    A.current = x;
-  }, [t, o, h]), M(() => {
-    const d = y.current, x = m.current;
-    if (!d || !x) return;
-    let i = !0;
-    const g = new ResizeObserver(() => {
-      if (i) {
-        i = !1;
-        return;
-      }
-      d.resize();
-    });
-    return g.observe(x), () => g.disconnect();
-  }, []), /* @__PURE__ */ w(
-    "div",
-    {
-      ref: m,
-      className: L("w-full", r),
-      style: { height: f },
-      tabIndex: a.aria?.enabled ? 0 : void 0,
-      role: a.aria?.enabled ? "img" : void 0
-    }
-  );
-});
-J.displayName = "Chart";
-function $e({
-  echarts: e,
-  type: t = "line",
-  data: a,
-  xAxisName: c,
-  xAxisTickCount: r,
-  xAxisTickFormat: o,
-  yAxisTickFormat: f,
-  yAxisTickLabelFormat: h,
-  yAxisName: b,
-  yAxisTickCount: m,
-  tooltipValueFormat: y,
-  onTimeRangeChange: S,
-  height: N = 350,
-  incomplete: A,
-  isDarkMode: d,
-  gradient: x,
-  loading: i,
-  ariaDescription: g,
-  optionUpdateBehavior: T
-}) {
-  const C = H(null), D = A?.before, O = A?.after, z = V(() => {
-    const E = [], p = t === "bar" ? { type: "bar", stack: "total" } : { type: "line", showSymbol: !1 };
-    for (const s of a) {
-      const F = D && t === "line" ? s.data.filter((l) => l[0] <= D) : [], v = O && t === "line" ? s.data.filter((l) => l[0] >= O) : [], B = F.length > 0 || v.length > 0 ? s.data.slice(
-        Math.max(0, F.length - 1),
-        Math.max(0, s.data.length - v.length + 1)
-      ) : s.data, I = x && t === "line" ? {
-        color: new e.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: Z(s.color, 0.4) },
-          { offset: 1, color: Z(s.color, 0) }
-        ])
-      } : void 0;
-      E.push({
-        data: B,
-        color: s.color,
-        name: s.name,
-        emphasis: { focus: "series" },
-        ...I ? { areaStyle: I } : {},
-        ...p
-      });
-      const n = {
-        color: s.color,
-        name: s.name,
-        type: "line",
-        lineStyle: { type: "dashed" },
-        showSymbol: !1,
-        emphasis: { focus: "series" }
-      };
-      F.length > 0 && E.push({
-        ...n,
-        data: F
-      }), v.length > 0 && E.push({
-        ...n,
-        data: v
-      });
-    }
-    return {
-      aria: {
-        enabled: !0,
-        ...g && { label: { description: g } }
-      },
-      brush: {
-        xAxisIndex: "all",
-        brushType: "lineX",
-        brushMode: "single",
-        outOfBrush: {
-          colorAlpha: 0.3
-        },
-        brushStyle: {
-          borderWidth: 1,
-          color: "rgba(120,140,180,0.3)",
-          borderColor: "rgba(120,140,180,0.8)"
-        }
-      },
-      tooltip: {
-        trigger: "axis",
-        appendTo: "body",
-        axisPointer: { type: "shadow" },
-        dangerousHtmlFormatter: (s) => {
-          const F = Array.isArray(s) ? s : [s], v = /* @__PURE__ */ new Set(), B = F.filter((u) => v.has(u.seriesName) ? !1 : (v.add(u.seriesName), !0)), I = B[0], n = I?.value?.[0] ?? I?.axisValue, l = n != null ? `<div style="font-weight:600;margin-bottom:4px;">${e.format.encodeHTML(fe(n))}</div>` : "", $ = B.map((u) => {
-            const R = u?.value?.[1], q = y ?? h, U = q ? e.format.encodeHTML(String(q(R))) : e.format.encodeHTML(String(R));
-            return `${u.marker} ${e.format.encodeHTML(u.seriesName)}: <strong>${U}</strong>`;
-          }).join("<br/>");
-          return `${l}${$}`;
-        }
-      },
-      backgroundColor: "transparent",
-      toolbox: { show: !1 },
-      xAxis: {
-        name: c,
-        nameLocation: "middle",
-        nameGap: 30,
-        type: "time",
-        splitLine: {
-          show: !1
-        },
-        axisLine: { show: !1 },
-        splitNumber: r ?? 5,
-        ...o && {
-          axisLabel: {
-            formatter: (s) => o(s)
-          }
-        }
-      },
-      yAxis: {
-        name: b,
-        nameLocation: "middle",
-        nameGap: 40,
-        type: "value",
-        axisTick: { show: !0 },
-        axisLabel: {
-          margin: 15,
-          ...f && {
-            formatter: (s) => f(s)
-          }
-        },
-        splitLine: {
-          show: !0,
-          lineStyle: { type: "dashed", width: 1 }
-        },
-        splitNumber: m
-      },
-      grid: {
-        left: b ? 30 : 24,
-        right: 24,
-        top: 24,
-        bottom: c ? 30 : 24
-      },
-      series: E
-    };
-  }, [
-    a,
-    c,
-    r,
-    o,
-    f,
-    h,
-    b,
-    m,
-    y,
-    D,
-    O,
-    t,
-    x,
-    e,
-    g
-  ]), _ = V(() => S ? {
-    brushend: (E) => {
-      const p = E.areas[0].coordRange;
-      S(p[0], p[1]), C.current?.dispatchAction({ type: "brush", areas: [] });
-    }
-  } : {}, [S]), j = !!S;
-  return M(() => {
-    const E = C.current;
-    if (E && j)
-      return E.dispatchAction({
-        type: "takeGlobalCursor",
-        key: "brush",
-        brushOption: {
-          brushType: "lineX",
-          brushMode: "single"
-        }
-      }), () => {
-        E.dispatchAction({
-          type: "takeGlobalCursor",
-          key: "brush",
-          brushOption: {
-            brushType: !1
-          }
-        });
-      };
-  }, [C, j, i]), /* @__PURE__ */ G("div", { className: "relative w-full", style: { height: N }, children: [
-    i && /* @__PURE__ */ w(de, { height: N, isDarkMode: d }),
-    !i && /* @__PURE__ */ w(
-      J,
-      {
-        echarts: e,
-        ref: C,
-        options: z,
-        height: N,
-        isDarkMode: d,
-        onEvents: _,
-        optionUpdateBehavior: T
-      }
-    )
-  ] });
-}
-function de({
-  height: e,
-  isDarkMode: t
-}) {
-  const a = e / 2, c = Math.min(e * 0.12, 28), r = 400, o = 120, f = [];
-  for (let m = 0; m <= o; m++) {
-    const y = -r + m / o * r * 3, S = a + Math.sin(m / o * 2 * Math.PI * 3) * c;
-    f.push(`${m === 0 ? "M" : "L"}${y.toFixed(2)},${S.toFixed(2)}`);
-  }
-  const h = f.join(" "), b = t ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.2)";
-  return /* @__PURE__ */ w(
-    "div",
-    {
-      "aria-hidden": "true",
-      className: "absolute inset-0 overflow-hidden",
-      style: { height: e },
-      children: /* @__PURE__ */ w(
-        "svg",
-        {
-          width: "100%",
-          height: e,
-          viewBox: `0 0 ${r} ${e}`,
-          preserveAspectRatio: "none",
-          className: "w-full animate-pulse",
-          children: /* @__PURE__ */ w(
-            "path",
-            {
-              d: h,
-              fill: "none",
-              stroke: b,
-              strokeWidth: "2",
-              style: {
-                animation: "kumo-chart-wave 2.4s linear infinite",
-                transformOrigin: "0 0"
-              }
-            }
-          )
-        }
-      )
-    }
-  );
-}
-function Z(e, t) {
-  const a = Math.max(0, Math.min(1, t)), c = e.match(
-    /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
-  );
-  if (c)
-    return `rgba(${c[1]}, ${c[2]}, ${c[3]}, ${a})`;
-  let r = e.replace(/^#/, "");
-  r.length === 3 && (r = r[0] + r[0] + r[1] + r[1] + r[2] + r[2]), r.length === 8 && (r = r.slice(0, 6));
-  const o = parseInt(r.slice(0, 2), 16), f = parseInt(r.slice(2, 4), 16), h = parseInt(r.slice(4, 6), 16);
-  return `rgba(${o}, ${f}, ${h}, ${a})`;
-}
-function k(e) {
-  return e.toString().padStart(2, "0");
-}
-function fe(e) {
-  const t = new Date(e);
-  return `${t.getFullYear()}-${k(t.getMonth() + 1)}-${k(t.getDate())} ${k(t.getHours())}:${k(t.getMinutes())}:${k(t.getSeconds())}`;
-}
-function pe({ color: e, value: t, name: a, unit: c, inactive: r }) {
-  return /* @__PURE__ */ G("div", { className: "inline-flex flex-col gap-2 min-w-42 py-2", children: [
-    /* @__PURE__ */ G("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ w(
-        "span",
-        {
-          className: L("size-2 rounded-full inline-block", {
-            "opacity-50": r
-          }),
-          style: { backgroundColor: e }
-        }
-      ),
-      /* @__PURE__ */ w("span", { className: L("text-xs", { "opacity-50": r }), children: a })
-    ] }),
-    /* @__PURE__ */ G("div", { className: "flex items-baseline gap-0.5", children: [
-      /* @__PURE__ */ w(
-        "span",
-        {
-          className: L("text-lg font-medium leading-none", {
-            "opacity-50": r
-          }),
-          children: t
-        }
-      ),
-      c && /* @__PURE__ */ w(
-        "span",
-        {
-          className: L("text-xs text-kumo-subtle leading-none", {
-            "opacity-50": r
-          }),
-          children: c
-        }
-      )
-    ] })
-  ] });
-}
-function me({ color: e, value: t, name: a, inactive: c }) {
-  return /* @__PURE__ */ G("div", { className: "inline-flex items-center gap-2", children: [
-    /* @__PURE__ */ w(
-      "span",
-      {
-        className: L("size-2 rounded-full inline-block", {
-          "opacity-50": c
-        }),
-        style: { backgroundColor: e }
-      }
-    ),
-    /* @__PURE__ */ w("span", { className: L("text-xs", { "opacity-50": c }), children: a }),
-    /* @__PURE__ */ w("span", { className: L("text-xs font-medium", { "opacity-50": c }), children: t })
-  ] });
-}
-const we = {
-  SmallItem: me,
-  LargeItem: pe
-}, ge = (e) => e.toLocaleString();
-function he(e) {
-  return typeof e == "object" && e !== null;
-}
-const P = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), ee = (e) => e.replace(/[{}|]/g, (t) => `\\${t}`), X = (e) => {
-  const t = "#666";
-  return !e || typeof e != "string" ? t : /^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e) || /^rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(?:,\s*[\d.]+\s*)?\)$/i.test(
-    e
-  ) || /^hsla?\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*(?:,\s*[\d.]+\s*)?\)$/i.test(
-    e
-  ) || /^[a-z]{3,20}$/i.test(e) ? e : t;
-};
-function be({
-  echarts: e,
-  nodes: t,
-  links: a,
-  height: c = 400,
-  nodeWidth: r = 8,
-  nodePadding: o = 10,
-  showTooltip: f = !0,
-  showNodeValues: h,
-  nodeLabelLayout: b = "stacked",
-  formatValue: m = ge,
-  tooltipFormatter: y,
-  defaultNodeColor: S,
-  left: N,
-  right: A,
-  linkColor: d = "gradient",
-  linkOpacity: x = 0.5,
-  className: i,
-  isDarkMode: g,
-  onNodeClick: T,
-  onLinkClick: C
-}) {
-  const D = t.some((p) => p.value !== void 0), O = h ?? D, z = b === "inline", _ = V(() => {
-    const p = W.text("primary", g), s = W.text("secondary", g), F = t.map(
-      (n, l) => n.color ?? S ?? W.categorical(l, g)
-    ), v = new Map(
-      t.map((n, l) => [n.name, { ...n, computedColor: F[l] }])
-    ), B = t.map((n, l) => ({
-      name: n.name,
-      value: n.value,
-      itemStyle: {
-        color: F[l]
-      }
-    })), I = a.map((n) => ({
-      source: t[n.source]?.name ?? "",
-      target: t[n.target]?.name ?? "",
-      value: n.value
-    }));
-    return {
-      backgroundColor: "transparent",
-      animation: !0,
-      animationDuration: 500,
-      animationDurationUpdate: 300,
-      animationEasingUpdate: "cubicInOut",
-      tooltip: f ? {
-        trigger: "item",
-        triggerOn: "mousemove",
-        dangerousHtmlFormatter: (n) => {
-          if (!he(n)) return "";
-          if (n.dataType === "node" && n.name) {
-            const l = v.get(n.name), $ = X(
-              l?.computedColor ?? n.color ?? "#666"
-            );
-            if (y)
-              return y({
-                type: "node",
-                name: n.name,
-                node: l,
-                color: $
-              });
-            const u = P(n.name);
-            return `<div style="display:flex;align-items:center;gap:6px;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${$}"></span><strong>${u}</strong></div>`;
-          }
-          if (n.dataType === "edge" && n.data) {
-            const { source: l, target: $, value: u } = n.data;
-            if (y)
-              return y({
-                type: "link",
-                name: `${l} → ${$}`,
-                link: {
-                  source: l ?? "",
-                  target: $ ?? "",
-                  value: u ?? 0
-                }
-              });
-            const R = v.get(l ?? ""), q = v.get($ ?? ""), U = X(
-              R?.computedColor ?? "#666"
-            ), re = X(
-              q?.computedColor ?? "#666"
-            ), se = P(l ?? ""), oe = P($ ?? "");
-            return `<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
-                  <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${U}"></span>
-                  <strong>${se}</strong>
-                  <span style="color:${s}">→</span>
-                  <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${re}"></span>
-                  <strong>${oe}</strong>
-                </div>
-                <strong>${u !== void 0 ? P(m(u)) : ""}</strong>`;
-          }
-          return "";
-        }
-      } : void 0,
-      series: [
-        {
-          type: "sankey",
-          ...N !== void 0 && { left: N },
-          ...A !== void 0 && { right: A },
-          data: B,
-          links: I,
-          draggable: !1,
-          emphasis: {
-            focus: "adjacency"
-          },
-          nodeWidth: r,
-          nodeGap: o,
-          lineStyle: {
-            color: d === "gradient" ? "source" : "#d1d5db",
-            opacity: d === "gradient" ? x : 0.4,
-            curveness: 0.5
-          },
-          label: {
-            show: !0,
-            color: p,
-            fontSize: 12,
-            formatter: O ? (n) => {
-              const l = n.name ?? "", $ = v.get(l), u = ee(l);
-              if ($?.value !== void 0) {
-                const R = ee(
-                  m($.value)
-                );
-                return z ? `{name|${u}} {value|${R}}` : `{value|${R}}
-{name|${u}}`;
-              }
-              return u;
-            } : void 0,
-            rich: O ? {
-              value: {
-                fontSize: 11,
-                color: p,
-                lineHeight: z ? void 0 : 16
-              },
-              name: {
-                fontSize: 12,
-                color: p,
-                fontWeight: 700
-              }
-            } : void 0
-          }
-        }
-      ]
-    };
-  }, [
-    t,
-    a,
-    f,
-    r,
-    o,
-    S,
-    N,
-    A,
-    g,
-    d,
-    x,
-    O,
-    z,
-    m,
-    y
-  ]), j = ce(
-    (p) => {
-      if (p.dataType === "node" && T && p.name) {
-        const s = t.findIndex((B) => B.name === p.name), v = {
-          ...s >= 0 ? t[s] : null,
-          name: p.name
-        };
-        T(v);
-      } else if (p.dataType === "edge" && C && p.data) {
-        const s = p.data, F = typeof s == "object" && s !== null && "source" in s ? String(s.source) : "", v = typeof s == "object" && s !== null && "target" in s ? String(s.target) : "", B = t.findIndex((u) => u.name === F), I = t.findIndex((u) => u.name === v);
-        if (B === -1 || I === -1) return;
-        const n = p.value, l = typeof n == "number" ? n : Array.isArray(n) && typeof n[0] == "number" ? n[0] : 0, $ = a.find(
-          (u) => u.source === B && u.target === I
-        );
-        C({
-          ...$,
-          source: B,
-          target: I,
-          value: l
-        });
-      }
-    },
-    [t, a, T, C]
-  ), E = V(
-    () => ({
-      click: j
-    }),
-    [j]
-  );
-  return /* @__PURE__ */ w(
-    J,
-    {
-      echarts: e,
-      options: _,
-      className: i,
-      isDarkMode: g,
-      height: c,
-      onEvents: E
-    }
-  );
-}
-be.displayName = "SankeyChart";
-export {
-  J as C,
-  be as S,
-  $e as T,
-  we as a,
-  W as b
-};
-//# sourceMappingURL=SankeyChart-krkvltewpn3bbupw.js.map