@cloudflare/kumo 2.1.0 → 2.2.0

package/dist/chunks/SankeyChart-h1kzhs1tyt20luha.js

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