@cloudflare/kumo 2.4.1 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/ai/component-registry.json +32 -3
  3. package/ai/component-registry.md +142 -2
  4. package/ai/schemas.ts +1 -0
  5. package/dist/.build-complete +1 -1
  6. package/dist/ai/schemas.d.ts +2 -0
  7. package/dist/ai/schemas.d.ts.map +1 -1
  8. package/dist/ai/schemas.js +45 -43
  9. package/dist/ai/schemas.js.map +1 -1
  10. package/dist/chunks/{SankeyChart-npoyr1j06svoxsfe.js → SankeyChart-i1m7zv0lys3j0iq6.js} +74 -69
  11. package/dist/chunks/SankeyChart-i1m7zv0lys3j0iq6.js.map +1 -0
  12. package/dist/chunks/sidebar-nbdw4rgvuabxp5nj.js +1144 -0
  13. package/dist/chunks/sidebar-nbdw4rgvuabxp5nj.js.map +1 -0
  14. package/dist/chunks/{tabs-hice1yy5q2t889z8.js → tabs-ho9t1gkq22jb855l.js} +51 -28
  15. package/dist/chunks/tabs-ho9t1gkq22jb855l.js.map +1 -0
  16. package/dist/components/chart.js +1 -1
  17. package/dist/components/flow.js +3 -2
  18. package/dist/components/flow.js.map +1 -1
  19. package/dist/components/sidebar.js +1 -1
  20. package/dist/components/tabs.js +1 -1
  21. package/dist/index.js +3 -3
  22. package/dist/src/components/chart/EChart.d.ts.map +1 -1
  23. package/dist/src/components/flow/connectors.d.ts.map +1 -1
  24. package/dist/src/components/sidebar/sidebar.d.ts +14 -2
  25. package/dist/src/components/sidebar/sidebar.d.ts.map +1 -1
  26. package/dist/src/components/tabs/tabs.d.ts.map +1 -1
  27. package/dist/styles/kumo-binding.css +27 -20
  28. package/dist/styles/kumo-standalone.css +1 -1
  29. package/package.json +1 -1
  30. package/dist/chunks/SankeyChart-npoyr1j06svoxsfe.js.map +0 -1
  31. package/dist/chunks/sidebar-hzio700cg85f7f31.js +0 -1014
  32. package/dist/chunks/sidebar-hzio700cg85f7f31.js.map +0 -1
  33. package/dist/chunks/tabs-hice1yy5q2t889z8.js.map +0 -1
@@ -16,7 +16,7 @@ const Ne = {
16
16
  "#50C3B6",
17
17
  "#D37536"
18
18
  /* Orange */
19
- ], re = [
19
+ ], oe = [
20
20
  "#4290F0",
21
21
  "#EEB720",
22
22
  "#E8649D",
@@ -32,21 +32,21 @@ var U;
32
32
  }
33
33
  e.semantic = t;
34
34
  function n(s, l = !1) {
35
- return l ? re[s % re.length] : ne[s % ne.length];
35
+ return l ? oe[s % oe.length] : ne[s % ne.length];
36
36
  }
37
37
  e.categorical = n;
38
38
  function a(s, l = !1) {
39
39
  return l ? [...$e[s]] : [...Ne[s]];
40
40
  }
41
41
  e.sequential = a;
42
- function r(s, l = !1) {
42
+ function o(s, l = !1) {
43
43
  const N = {
44
44
  light: { primary: "#6B7280", secondary: "#9CA3AF" },
45
45
  dark: { primary: "#9CA3AF", secondary: "#6B7280" }
46
46
  };
47
47
  return l ? N.dark[s] : N.light[s];
48
48
  }
49
- e.text = r;
49
+ e.text = o;
50
50
  })(U || (U = {}));
51
51
  const le = (e) => {
52
52
  const { dangerousHtmlFormatter: t, ...n } = e;
@@ -54,14 +54,24 @@ const le = (e) => {
54
54
  ...n,
55
55
  formatter: t
56
56
  };
57
- }, Se = (e) => e.tooltip ? {
58
- ...e,
59
- tooltip: Array.isArray(e.tooltip) ? e.tooltip.map(le) : le(e.tooltip)
60
- } : e, oe = me(function({
57
+ }, Se = ({
58
+ options: e,
59
+ isDarkMode: t
60
+ }) => {
61
+ const n = {
62
+ backgroundColor: "transparent",
63
+ color: t ? oe : ne,
64
+ ...e
65
+ };
66
+ return n.tooltip ? {
67
+ ...n,
68
+ tooltip: Array.isArray(n.tooltip) ? n.tooltip.map(le) : le(n.tooltip)
69
+ } : n;
70
+ }, re = me(function({
61
71
  echarts: t,
62
72
  options: n,
63
73
  optionUpdateBehavior: a,
64
- className: r,
74
+ className: o,
65
75
  isDarkMode: s,
66
76
  height: l = 350,
67
77
  onEvents: N
@@ -69,12 +79,7 @@ const le = (e) => {
69
79
  const h = k(null), $ = k(null), R = k({}), F = k({}), T = k(/* @__PURE__ */ new Set());
70
80
  return H(() => {
71
81
  if (!h.current) return;
72
- const i = t.init(
73
- h.current,
74
- s ? "dark" : {
75
- color: s ? re : ne
76
- }
77
- );
82
+ const i = t.init(h.current, s ? "dark" : void 0);
78
83
  return $.current = i, typeof v == "function" ? v(i) : v && (v.current = i), () => {
79
84
  for (const S of T.current) {
80
85
  const c = F.current[S];
@@ -84,7 +89,7 @@ const le = (e) => {
84
89
  };
85
90
  }, [h, s]), H(() => {
86
91
  const i = $.current;
87
- i && i.setOption(Se(n), {
92
+ i && i.setOption(Se({ options: n, isDarkMode: s }), {
88
93
  notMerge: !1,
89
94
  lazyUpdate: !0,
90
95
  ...a
@@ -121,20 +126,20 @@ const le = (e) => {
121
126
  "div",
122
127
  {
123
128
  ref: h,
124
- className: z("w-full", r),
129
+ className: z("w-full", o),
125
130
  style: { height: l },
126
131
  tabIndex: n.aria?.enabled ? 0 : void 0,
127
132
  role: n.aria?.enabled ? "img" : void 0
128
133
  }
129
134
  );
130
135
  });
131
- oe.displayName = "Chart";
136
+ re.displayName = "Chart";
132
137
  function We({
133
138
  echarts: e,
134
139
  type: t = "line",
135
140
  data: n,
136
141
  xAxisName: a,
137
- xAxisTickCount: r,
142
+ xAxisTickCount: o,
138
143
  xAxisTickFormat: s,
139
144
  yAxisTickFormat: l,
140
145
  yAxisTickLabelFormat: N,
@@ -170,10 +175,10 @@ function We({
170
175
  };
171
176
  return p.addEventListener("mousemove", A), () => p.removeEventListener("mousemove", A);
172
177
  }, []);
173
- const L = T?.before, o = T?.after, f = ee(() => {
178
+ const L = T?.before, r = T?.after, f = ee(() => {
174
179
  const p = [], A = t === "bar" ? { type: "bar", stack: "total" } : { type: "line", showSymbol: !1 };
175
180
  for (const u of n) {
176
- const x = L && t === "line" ? u.data.filter((E) => E[0] <= L) : [], D = o && t === "line" ? u.data.filter((E) => E[0] >= o) : [], J = x.length > 0 || D.length > 0 ? u.data.slice(
181
+ const x = L && t === "line" ? u.data.filter((E) => E[0] <= L) : [], D = r && t === "line" ? u.data.filter((E) => E[0] >= r) : [], J = x.length > 0 || D.length > 0 ? u.data.slice(
177
182
  Math.max(0, x.length - 1),
178
183
  Math.max(0, u.data.length - D.length + 1)
179
184
  ) : u.data, X = S && t === "line" ? {
@@ -240,7 +245,7 @@ function We({
240
245
  show: !1
241
246
  },
242
247
  axisLine: { show: !1 },
243
- splitNumber: r ?? 5,
248
+ splitNumber: o ?? 5,
244
249
  ...s && {
245
250
  axisLabel: {
246
251
  formatter: (u) => s(u)
@@ -276,13 +281,13 @@ function We({
276
281
  }, [
277
282
  n,
278
283
  a,
279
- r,
284
+ o,
280
285
  s,
281
286
  l,
282
287
  v,
283
288
  h,
284
289
  L,
285
- o,
290
+ r,
286
291
  t,
287
292
  S,
288
293
  e,
@@ -351,7 +356,7 @@ function We({
351
356
  children: [
352
357
  c && /* @__PURE__ */ d(Ee, { height: F, isDarkMode: i }),
353
358
  !c && /* @__PURE__ */ d(
354
- oe,
359
+ re,
355
360
  {
356
361
  echarts: e,
357
362
  ref: G,
@@ -387,10 +392,10 @@ function We({
387
392
  ] });
388
393
  }
389
394
  const Ce = ge(function({ state: t, formatValue: n }) {
390
- const { ts: a, rows: r, hiddenCount: s } = t;
395
+ const { ts: a, rows: o, hiddenCount: s } = t;
391
396
  return /* @__PURE__ */ O(fe, { children: [
392
397
  /* @__PURE__ */ d("div", { className: "text-xs font-semibold text-kumo-default mb-1", children: ke(a) }),
393
- r.map((l) => /* @__PURE__ */ O("div", { className: "flex items-center justify-between gap-4 py-0.5", children: [
398
+ o.map((l) => /* @__PURE__ */ O("div", { className: "flex items-center justify-between gap-4 py-0.5", children: [
394
399
  /* @__PURE__ */ O("div", { className: "flex items-center gap-2 min-w-0", children: [
395
400
  /* @__PURE__ */ d(
396
401
  "span",
@@ -414,15 +419,15 @@ function Fe(e, t) {
414
419
  if (e.length === 0) return null;
415
420
  let n = 0, a = e.length - 1;
416
421
  for (; n < a; ) {
417
- const r = n + a >> 1;
418
- e[r][0] < t ? n = r + 1 : a = r;
422
+ const o = n + a >> 1;
423
+ e[o][0] < t ? n = o + 1 : a = o;
419
424
  }
420
425
  return n > 0 && Math.abs(e[n - 1][0] - t) < Math.abs(e[n][0] - t) && n--, e[n][1];
421
426
  }
422
427
  function Ae(e, t) {
423
428
  return !e || e.ts !== t.ts || e.hiddenCount !== t.hiddenCount || e.rows.length !== t.rows.length ? !1 : e.rows.every((n, a) => {
424
- const r = t.rows[a];
425
- return n.name === r.name && n.value === r.value && n.color === r.color;
429
+ const o = t.rows[a];
430
+ return n.name === o.name && n.value === o.value && n.color === o.color;
426
431
  });
427
432
  }
428
433
  const Re = new Intl.NumberFormat(void 0, {
@@ -435,9 +440,9 @@ function Ee({
435
440
  height: e,
436
441
  isDarkMode: t
437
442
  }) {
438
- const n = e / 2, a = Math.min(e * 0.12, 28), r = 400, s = 120, l = [];
443
+ const n = e / 2, a = Math.min(e * 0.12, 28), o = 400, s = 120, l = [];
439
444
  for (let h = 0; h <= s; h++) {
440
- const $ = -r + h / s * r * 3, R = n + Math.sin(h / s * 2 * Math.PI * 3) * a;
445
+ const $ = -o + h / s * o * 3, R = n + Math.sin(h / s * 2 * Math.PI * 3) * a;
441
446
  l.push(`${h === 0 ? "M" : "L"}${$.toFixed(2)},${R.toFixed(2)}`);
442
447
  }
443
448
  const N = l.join(" "), v = t ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.2)";
@@ -452,7 +457,7 @@ function Ee({
452
457
  {
453
458
  width: "100%",
454
459
  height: e,
455
- viewBox: `0 0 ${r} ${e}`,
460
+ viewBox: `0 0 ${o} ${e}`,
456
461
  preserveAspectRatio: "none",
457
462
  className: "w-full animate-pulse",
458
463
  children: /* @__PURE__ */ d(
@@ -479,9 +484,9 @@ function ie(e, t) {
479
484
  );
480
485
  if (a)
481
486
  return `rgba(${a[1]}, ${a[2]}, ${a[3]}, ${n})`;
482
- let r = e.replace(/^#/, "");
483
- r.length === 3 && (r = r[0] + r[0] + r[1] + r[1] + r[2] + r[2]), r.length === 8 && (r = r.slice(0, 6));
484
- const s = parseInt(r.slice(0, 2), 16), l = parseInt(r.slice(2, 4), 16), N = parseInt(r.slice(4, 6), 16);
487
+ let o = e.replace(/^#/, "");
488
+ o.length === 3 && (o = o[0] + o[0] + o[1] + o[1] + o[2] + o[2]), o.length === 8 && (o = o.slice(0, 6));
489
+ const s = parseInt(o.slice(0, 2), 16), l = parseInt(o.slice(2, 4), 16), N = parseInt(o.slice(4, 6), 16);
485
490
  return `rgba(${s}, ${l}, ${N}, ${n})`;
486
491
  }
487
492
  const Ie = new Intl.DateTimeFormat(void 0, {
@@ -495,26 +500,26 @@ const Ie = new Intl.DateTimeFormat(void 0, {
495
500
  function ke(e) {
496
501
  return Ie.format(new Date(e));
497
502
  }
498
- function Be({ color: e, value: t, name: n, unit: a, inactive: r }) {
503
+ function Be({ color: e, value: t, name: n, unit: a, inactive: o }) {
499
504
  return /* @__PURE__ */ O("div", { className: "inline-flex flex-col gap-2 min-w-42 py-2", children: [
500
505
  /* @__PURE__ */ O("div", { className: "flex items-center gap-2", children: [
501
506
  /* @__PURE__ */ d(
502
507
  "span",
503
508
  {
504
509
  className: z("size-2 rounded-full inline-block", {
505
- "opacity-50": r
510
+ "opacity-50": o
506
511
  }),
507
512
  style: { backgroundColor: e }
508
513
  }
509
514
  ),
510
- /* @__PURE__ */ d("span", { className: z("text-xs", { "opacity-50": r }), children: n })
515
+ /* @__PURE__ */ d("span", { className: z("text-xs", { "opacity-50": o }), children: n })
511
516
  ] }),
512
517
  /* @__PURE__ */ O("div", { className: "flex items-baseline gap-0.5", children: [
513
518
  /* @__PURE__ */ d(
514
519
  "span",
515
520
  {
516
521
  className: z("text-lg font-medium leading-none", {
517
- "opacity-50": r
522
+ "opacity-50": o
518
523
  }),
519
524
  children: t
520
525
  }
@@ -523,7 +528,7 @@ function Be({ color: e, value: t, name: n, unit: a, inactive: r }) {
523
528
  "span",
524
529
  {
525
530
  className: z("text-xs text-kumo-subtle leading-none", {
526
- "opacity-50": r
531
+ "opacity-50": o
527
532
  }),
528
533
  children: a
529
534
  }
@@ -566,7 +571,7 @@ function Me({
566
571
  nodes: t,
567
572
  links: n,
568
573
  height: a = 400,
569
- nodeWidth: r = 8,
574
+ nodeWidth: o = 8,
570
575
  nodePadding: s = 10,
571
576
  showTooltip: l = !0,
572
577
  showNodeValues: N,
@@ -585,19 +590,19 @@ function Me({
585
590
  }) {
586
591
  const Y = t.some((y) => y.value !== void 0), q = N ?? Y, V = v === "inline", G = ee(() => {
587
592
  const y = U.text("primary", b), w = U.text("secondary", b), M = t.map(
588
- (o, f) => o.color ?? R ?? U.categorical(f, b)
593
+ (r, f) => r.color ?? R ?? U.categorical(f, b)
589
594
  ), I = new Map(
590
- t.map((o, f) => [o.name, { ...o, computedColor: M[f] }])
591
- ), B = t.map((o, f) => ({
592
- name: o.name,
593
- value: o.value,
595
+ t.map((r, f) => [r.name, { ...r, computedColor: M[f] }])
596
+ ), B = t.map((r, f) => ({
597
+ name: r.name,
598
+ value: r.value,
594
599
  itemStyle: {
595
600
  color: M[f]
596
601
  }
597
- })), L = n.map((o) => ({
598
- source: t[o.source]?.name ?? "",
599
- target: t[o.target]?.name ?? "",
600
- value: o.value
602
+ })), L = n.map((r) => ({
603
+ source: t[r.source]?.name ?? "",
604
+ target: t[r.target]?.name ?? "",
605
+ value: r.value
601
606
  }));
602
607
  return {
603
608
  backgroundColor: "transparent",
@@ -608,24 +613,24 @@ function Me({
608
613
  tooltip: l ? {
609
614
  trigger: "item",
610
615
  triggerOn: "mousemove",
611
- dangerousHtmlFormatter: (o) => {
612
- if (!De(o)) return "";
613
- if (o.dataType === "node" && o.name) {
614
- const f = I.get(o.name), C = te(
615
- f?.computedColor ?? o.color ?? "#666"
616
+ dangerousHtmlFormatter: (r) => {
617
+ if (!De(r)) return "";
618
+ if (r.dataType === "node" && r.name) {
619
+ const f = I.get(r.name), C = te(
620
+ f?.computedColor ?? r.color ?? "#666"
616
621
  );
617
622
  if ($)
618
623
  return $({
619
624
  type: "node",
620
- name: o.name,
625
+ name: r.name,
621
626
  node: f,
622
627
  color: C
623
628
  });
624
- const m = Q(o.name);
629
+ const m = Q(r.name);
625
630
  return `<div style="display:flex;align-items:center;gap:6px;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${C}"></span><strong>${m}</strong></div>`;
626
631
  }
627
- if (o.dataType === "edge" && o.data) {
628
- const { source: f, target: C, value: m } = o.data;
632
+ if (r.dataType === "edge" && r.data) {
633
+ const { source: f, target: C, value: m } = r.data;
629
634
  if ($)
630
635
  return $({
631
636
  type: "link",
@@ -664,7 +669,7 @@ function Me({
664
669
  emphasis: {
665
670
  focus: "adjacency"
666
671
  },
667
- nodeWidth: r,
672
+ nodeWidth: o,
668
673
  nodeGap: s,
669
674
  lineStyle: {
670
675
  color: i === "gradient" ? "source" : "#d1d5db",
@@ -675,8 +680,8 @@ function Me({
675
680
  show: !0,
676
681
  color: y,
677
682
  fontSize: 12,
678
- formatter: q ? (o) => {
679
- const f = o.name ?? "", C = I.get(f), m = ce(f);
683
+ formatter: q ? (r) => {
684
+ const f = r.name ?? "", C = I.get(f), m = ce(f);
680
685
  if (C?.value !== void 0) {
681
686
  const W = ce(
682
687
  h(C.value)
@@ -706,7 +711,7 @@ function Me({
706
711
  t,
707
712
  n,
708
713
  l,
709
- r,
714
+ o,
710
715
  s,
711
716
  R,
712
717
  F,
@@ -729,7 +734,7 @@ function Me({
729
734
  } else if (y.dataType === "edge" && P && y.data) {
730
735
  const w = y.data, M = typeof w == "object" && w !== null && "source" in w ? String(w.source) : "", I = typeof w == "object" && w !== null && "target" in w ? String(w.target) : "", B = t.findIndex((m) => m.name === M), L = t.findIndex((m) => m.name === I);
731
736
  if (B === -1 || L === -1) return;
732
- const o = y.value, f = typeof o == "number" ? o : Array.isArray(o) && typeof o[0] == "number" ? o[0] : 0, C = n.find(
737
+ const r = y.value, f = typeof r == "number" ? r : Array.isArray(r) && typeof r[0] == "number" ? r[0] : 0, C = n.find(
733
738
  (m) => m.source === B && m.target === L
734
739
  );
735
740
  P({
@@ -748,7 +753,7 @@ function Me({
748
753
  [_]
749
754
  );
750
755
  return /* @__PURE__ */ d(
751
- oe,
756
+ re,
752
757
  {
753
758
  echarts: e,
754
759
  options: G,
@@ -761,10 +766,10 @@ function Me({
761
766
  }
762
767
  Me.displayName = "SankeyChart";
763
768
  export {
764
- oe as C,
769
+ re as C,
765
770
  Me as S,
766
771
  We as T,
767
772
  qe as a,
768
773
  U as b
769
774
  };
770
- //# sourceMappingURL=SankeyChart-npoyr1j06svoxsfe.js.map
775
+ //# sourceMappingURL=SankeyChart-i1m7zv0lys3j0iq6.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SankeyChart-i1m7zv0lys3j0iq6.js","sources":["../../src/components/chart/Color.ts","../../src/components/chart/EChart.tsx","../../src/components/chart/TimeseriesChart.tsx","../../src/components/chart/Legend.tsx","../../src/components/chart/SankeyChart.tsx"],"sourcesContent":["/**\n * Categorical colors for light mode — used when assigning colors to data series\n * by index (e.g. the first series gets Blue, the second gets Violet, etc.).\n */\nenum ChartCategoricalLightColors {\n Blue = \"#4290F0\",\n Yellow = \"#F5B647\",\n Pink = \"#E8649D\",\n Purple = \"#8D58EE\",\n Teal = \"#50C3B6\",\n Orange = \"#D37536\",\n}\n\n/**\n * Categorical colors for dark mode\n */\nenum ChartCategoricalDarkColors {\n Blue = \"#4290F0\",\n Yellow = \"#EEB720\",\n Pink = \"#E8649D\",\n Purple = \"#8D58EE\",\n Teal = \"#50C3B6\",\n Orange = \"#D37536\",\n}\n\n/**\n * Semantic colors for light mode — used to convey meaning (status, severity)\n * rather than just distinguishing series. Use via `ChartPalette.semantic()`.\n */\nenum ChartSemanticLightColors {\n Attention = \"#FC574A\",\n Warning = \"#F8A054\",\n Success = \"#00A63E\",\n Neutral = \"#B9D6FF\",\n Disabled = \"#CBCBCB\",\n Skeleton = \"#DDDDDD\",\n}\n\n/**\n * Semantic colors for dark mode\n */\nenum ChartSemanticDarkColors {\n Attention = \"#FC574A\",\n Warning = \"#F8A054\",\n Success = \"#00A63E\",\n Neutral = \"#8EC5FF\",\n Disabled = \"#878787\",\n Skeleton = \"#5C5C5C\",\n}\n\nexport type ChartSemanticColorName =\n | \"Attention\"\n | \"Warning\"\n | \"Success\"\n | \"Neutral\"\n | \"Disabled\"\n | \"Skeleton\";\n\n/**\n * Sequential color palettes for light mode with the colour in position #2 of the array as the base.\n */\nconst sequentialLight = {\n blues: [\"#E1EAF4\", \"#8EBCF6\", \"#4290F0\", \"#0E58B4\", \"#03254F\"],\n};\n\n/**\n * Sequential color palettes for dark mode. These are the reverse of the light mode palettes using the same base color (position 2).\n */\nconst sequentialDark = {\n blues: [\"#03254F\", \"#0E58B4\", \"#4290F0\", \"#A6BFDD\", \"#E1EAF4\"],\n};\n\n/**\n * Ordered list of categorical colors for light mode, indexed by series position.\n * Used as the default ECharts color palette when `isDarkMode` is `false`.\n */\nexport const CHART_LIGHT_COLORS = [\n ChartCategoricalLightColors.Blue,\n ChartCategoricalLightColors.Yellow,\n ChartCategoricalLightColors.Pink,\n ChartCategoricalLightColors.Purple,\n ChartCategoricalLightColors.Teal,\n ChartCategoricalLightColors.Orange,\n];\n\n/**\n * Ordered list of categorical colors for dark mode, indexed by series position.\n * Used as the default ECharts color palette when `isDarkMode` is `true`.\n */\nexport const CHART_DARK_COLORS = [\n ChartCategoricalDarkColors.Blue,\n ChartCategoricalDarkColors.Yellow,\n ChartCategoricalDarkColors.Pink,\n ChartCategoricalDarkColors.Purple,\n ChartCategoricalDarkColors.Teal,\n ChartCategoricalDarkColors.Orange,\n];\n\n/**\n * Utilities for resolving Kumo chart colors by semantic name or series index.\n * All functions accept an `isDarkMode` flag and return the appropriate color string.\n */\nexport namespace ChartPalette {\n /**\n * Returns the hex color for a named semantic value (status, severity, etc.).\n *\n * @example\n * ```ts\n * ChartPalette.semantic(\"Attention\") // \"#FC574A\" (light)\n * ChartPalette.semantic(\"Warning\", true) // \"#F8A054\" (dark)\n * ```\n */\n export function semantic(\n name: ChartSemanticColorName,\n isDarkMode = false,\n ): string {\n return isDarkMode\n ? ChartSemanticDarkColors[name]\n : ChartSemanticLightColors[name];\n }\n\n /**\n * Returns the categorical color for a given series index.\n * Wraps around via modulo when `index` exceeds the palette length (6 colors).\n *\n * @example\n * ```ts\n * ChartPalette.categorical(0) // Blue (light)\n * ChartPalette.categorical(0, true) // Blue (dark)\n * ChartPalette.categorical(6) // wraps back to Blue\n * ```\n */\n export function categorical(index: number, isDarkMode = false): string {\n return isDarkMode\n ? CHART_DARK_COLORS[index % CHART_DARK_COLORS.length]\n : CHART_LIGHT_COLORS[index % CHART_LIGHT_COLORS.length];\n }\n\n /**\n * Returns all steps of a named sequential palette as an array.\n *\n * @example\n * ```ts\n * ChartPalette.sequential(\"blues\") // 5-step array (light)\n * ChartPalette.sequential(\"blues\", true) // 5-step array (dark)\n * ```\n */\n export function sequential(\n palette: keyof typeof sequentialLight,\n isDarkMode = false,\n ): string[] {\n return isDarkMode\n ? [...sequentialDark[palette]]\n : [...sequentialLight[palette]];\n }\n\n /**\n * Returns the hex color for chart text/labels.\n *\n * @example\n * ```ts\n * ChartPalette.text(\"primary\") // \"#6B7280\" (light)\n * ChartPalette.text(\"primary\", true) // \"#9CA3AF\" (dark)\n * ChartPalette.text(\"secondary\") // \"#9CA3AF\" (light)\n * ```\n */\n export function text(variant: \"primary\" | \"secondary\", isDarkMode = false) {\n const colors = {\n light: { primary: \"#6B7280\", secondary: \"#9CA3AF\" },\n dark: { primary: \"#9CA3AF\", secondary: \"#6B7280\" },\n };\n return isDarkMode ? colors.dark[variant] : colors.light[variant];\n }\n}\n","import type * as echarts from \"echarts/core\";\nimport type {\n EChartsOption,\n SetOptionOpts,\n TooltipComponentOption,\n} from \"echarts\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils\";\nimport { CHART_DARK_COLORS, CHART_LIGHT_COLORS } from \"./Color\";\n\n/** Parameters passed to mouse event handlers on chart elements */\ntype EChartsMouseEventParams = {\n /** The type of component that triggered the event (e.g. \"series\", \"markPoint\") */\n componentType: string;\n /** Series type (e.g. \"line\", \"bar\") — present when componentType is \"series\" */\n seriesType?: string;\n /** Zero-based index of the series in the option.series array */\n seriesIndex?: number;\n /** Name of the series */\n seriesName?: string;\n /** Name of the data item */\n name?: string;\n /** Zero-based index of the data item within its series */\n dataIndex?: number;\n /** Raw data item value */\n data?: any;\n /** Sub-type of data (e.g. \"node\", \"edge\" for graph series) */\n dataType?: string;\n /** Numeric or array value of the data item */\n value?: number | any[];\n /** Resolved color of the series or data item */\n color?: string;\n};\n\n/**\n * Tooltip options with the `formatter` property removed and replaced with\n * `dangerousHtmlFormatter` to make the security implications more explicit.\n */\nexport type SafeTooltipOption = Omit<TooltipComponentOption, \"formatter\"> & {\n /**\n * USE WITH CAUTION: Use this only for trusted HTML content.\n * When building tooltip HTML with user-provided data, always sanitize\n * the input to prevent XSS vulnerabilities. Recommended: use\n * `encodeHTML` from `echarts/format` to escape HTML special characters.\n */\n dangerousHtmlFormatter?: TooltipComponentOption[\"formatter\"];\n};\n\nexport type KumoChartOption = {\n [K in keyof EChartsOption]: K extends \"tooltip\"\n ? SafeTooltipOption | SafeTooltipOption[] | undefined\n : EChartsOption[K];\n};\n\n/**\n * ECharts event handlers that can be attached to a `Chart`.\n * Pass a subset via the `onEvents` prop; handlers are registered lazily and\n * cleaned up automatically when removed or when the chart is unmounted.\n */\nexport interface ChartEvents {\n // Mouse events — fired on chart elements (series, marks, etc.)\n click: (params: EChartsMouseEventParams) => void;\n dblclick: (params: EChartsMouseEventParams) => void;\n mousedown: (params: EChartsMouseEventParams) => void;\n mousemove: (params: EChartsMouseEventParams) => void;\n mouseup: (params: EChartsMouseEventParams) => void;\n mouseover: (params: EChartsMouseEventParams) => void;\n mouseout: (params: EChartsMouseEventParams) => void;\n /** Fired when the pointer leaves the chart canvas entirely */\n globalout: (params: any) => void;\n contextmenu: (params: any) => void;\n\n // Legend events\n /** Fired when any legend item's selected state changes */\n legendselectchanged: (params: {\n name: string;\n /** Map of series name → selected state for all legend items */\n selected: Record<string, boolean>;\n }) => void;\n legendselected: (params: any) => void;\n legendunselected: (params: any) => void;\n legendscroll: (params: any) => void;\n\n // Data zoom / timeline events\n datazoom: (params: any) => void;\n datarangeselected: (params: any) => void;\n timelinechanged: (params: any) => void;\n timelineplaychanged: (params: any) => void;\n\n // Toolbox events\n restore: (params: any) => void;\n dataviewchanged: (params: any) => void;\n magictypechanged: (params: any) => void;\n\n // Pie chart selection events\n pieselectchanged: (params: any) => void;\n pieselected: (params: any) => void;\n pieunselected: (params: any) => void;\n\n // Map / geo selection events\n mapselectchanged: (params: any) => void;\n mapselected: (params: any) => void;\n mapunselected: (params: any) => void;\n geoselectchanged: (params: any) => void;\n geoselected: (params: any) => void;\n geounselected: (params: any) => void;\n\n axisareaselected: (params: any) => void;\n\n // Brush / selection events\n brush: (params: any) => void;\n brushselected: (params: any) => void;\n /** Fired when the user finishes drawing a brush selection */\n brushend: (params: {\n areas: Array<{\n /** Coordinate range covered by the brush — interpretation depends on axis type */\n coordRange: any;\n brushType?: string;\n panelId?: string;\n range?: any;\n }>;\n }) => void;\n}\n\n/** Props for the low-level `Chart` wrapper around Apache ECharts */\nexport interface ChartProps {\n /**\n * The ECharts core instance imported by the consumer.\n * Passed in rather than imported directly so the consumer controls which\n * ECharts modules are bundled (tree-shaking).\n */\n echarts: typeof echarts;\n /** ECharts option object — passed through to `chart.setOption()` */\n options: KumoChartOption;\n /**\n * Additional options passed as the second argument to `chart.setOption()`.\n * Defaults to `{ notMerge: false, lazyUpdate: true }`.\n */\n optionUpdateBehavior?: SetOptionOpts;\n /** Additional CSS classes applied to the chart container `<div>` */\n className?: string;\n /**\n * When `true`, initialises ECharts with its built-in dark theme.\n * Changing this value after mount destroys and re-creates the chart instance.\n */\n isDarkMode?: boolean;\n /** Height of the chart container in pixels. Defaults to `350`. */\n height?: number;\n /** Subset of ECharts events to listen for. Handlers are bound/unbound reactively. */\n onEvents?: Partial<ChartEvents>;\n}\n\nconst transformTooltip = (tooltipObj: SafeTooltipOption) => {\n const { dangerousHtmlFormatter, ...restOfTooltip } = tooltipObj;\n return {\n ...restOfTooltip,\n formatter: dangerousHtmlFormatter,\n };\n};\n\nconst prepareChartOptions = ({\n options,\n isDarkMode,\n}: {\n options: KumoChartOption;\n isDarkMode?: boolean;\n}): EChartsOption => {\n const withDefaults: EChartsOption = {\n backgroundColor: \"transparent\",\n color: isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS,\n ...options,\n };\n\n if (!withDefaults.tooltip) return withDefaults;\n\n return {\n ...withDefaults,\n tooltip: Array.isArray(withDefaults.tooltip)\n ? withDefaults.tooltip.map(transformTooltip)\n : transformTooltip(withDefaults.tooltip as SafeTooltipOption),\n };\n};\n\n/**\n * Chart — a low-level wrapper around [Apache ECharts](https://echarts.apache.org).\n *\n * Manages the ECharts instance lifecycle (init, option updates, event binding,\n * resize observation, and disposal). Exposes the raw `echarts.ECharts` instance\n * via `ref` for imperative access when needed.\n *\n * Prefer `TimeseriesChart` for time-series data; use this component when you\n * need full control over the ECharts option object.\n *\n * @example\n * ```tsx\n * import * as echarts from \"echarts/core\";\n * import { BarChart } from \"echarts/charts\";\n * import { GridComponent } from \"echarts/components\";\n * import { CanvasRenderer } from \"echarts/renderers\";\n *\n * echarts.use([BarChart, GridComponent, CanvasRenderer]);\n *\n * <Chart\n * echarts={echarts}\n * options={{ xAxis: { data: [\"A\", \"B\"] }, yAxis: {}, series: [{ type: \"bar\", data: [1, 2] }] }}\n * />\n * ```\n */\nexport const Chart = forwardRef<echarts.ECharts, ChartProps>(function Chart(\n {\n echarts,\n options,\n optionUpdateBehavior,\n className,\n isDarkMode,\n height = 350,\n onEvents,\n }: ChartProps,\n ref,\n) {\n // Ref to the container DOM node that ECharts renders into\n const elRef = useRef<HTMLDivElement | null>(null);\n // Ref to the active ECharts instance\n const chartRef = useRef<echarts.ECharts | null>(null);\n // Keeps the latest onEvents object without triggering re-binding on every render\n const handlersRef = useRef<Partial<ChartEvents>>({});\n // Stable wrapper functions per event name — avoids creating new closures on re-render\n const wrappersRef = useRef<Record<string, (params: any) => void>>({});\n // Tracks which event names are currently bound to the chart instance\n const boundEventsRef = useRef<Set<string>>(new Set());\n\n // Init and cleanup\n useEffect(() => {\n if (!elRef.current) return;\n\n const chart = echarts.init(elRef.current, isDarkMode ? \"dark\" : undefined);\n chartRef.current = chart;\n\n if (typeof ref === \"function\") ref(chart);\n else if (ref) ref.current = chart;\n\n return () => {\n for (const event of boundEventsRef.current) {\n const wrapper = wrappersRef.current[event];\n if (wrapper) chart.off(event, wrapper);\n }\n boundEventsRef.current.clear();\n if (typeof ref === \"function\") ref(null);\n else if (ref) ref.current = null;\n chartRef.current = null;\n chart.dispose();\n };\n }, [elRef, isDarkMode]);\n\n // Update options\n useEffect(() => {\n const chart = chartRef.current;\n if (!chart) return;\n\n chart.setOption(prepareChartOptions({ options, isDarkMode }), {\n notMerge: false,\n lazyUpdate: true,\n ...optionUpdateBehavior,\n });\n }, [isDarkMode, optionUpdateBehavior, options]);\n\n // Keep handlersRef in sync so wrapper closures always call the latest handler\n // without needing to re-bind listeners on every render\n useEffect(() => {\n handlersRef.current = onEvents ?? {};\n }, [onEvents]);\n\n // Reactively bind and unbind event listeners when onEvents changes.\n // Uses stable wrapper functions (wrappersRef) so the same function reference\n // is passed to both chart.on() and chart.off(), which ECharts requires.\n useEffect(() => {\n const chart = chartRef.current;\n if (!chart) return;\n\n const nextBound = new Set<string>();\n\n for (const [event, handler] of Object.entries(onEvents ?? {})) {\n if (typeof handler !== \"function\") continue;\n nextBound.add(event);\n\n if (!wrappersRef.current[event]) {\n wrappersRef.current[event] = (params: any) => {\n const current = handlersRef.current as Record<\n string,\n ((p: any) => void) | undefined\n >;\n current[event]?.(params);\n };\n }\n\n if (!boundEventsRef.current.has(event)) {\n chart.on(event, wrappersRef.current[event]);\n }\n }\n\n for (const event of boundEventsRef.current) {\n if (nextBound.has(event)) continue;\n const wrapper = wrappersRef.current[event];\n if (wrapper) {\n chart.off(event, wrapper);\n }\n }\n\n boundEventsRef.current = nextBound;\n }, [echarts, isDarkMode, onEvents]);\n\n // Resize handling\n useEffect(() => {\n const chart = chartRef.current;\n const el = elRef.current;\n if (!chart || !el) return;\n\n // Flag to skip the very first trigger\n let isInitial = true;\n\n const ro = new ResizeObserver(() => {\n if (isInitial) {\n isInitial = false;\n return; // Skip the first resize to let the animation play\n }\n chart.resize();\n });\n\n ro.observe(el);\n\n return () => ro.disconnect();\n }, []);\n\n return (\n <div\n ref={elRef}\n className={cn(\"w-full\", className)}\n style={{ height }}\n tabIndex={options.aria?.enabled ? 0 : undefined}\n role={options.aria?.enabled ? \"img\" : undefined}\n />\n );\n});\n\nChart.displayName = \"Chart\";\n","import type * as echarts from \"echarts/core\";\nimport type { LineSeriesOption, BarSeriesOption } from \"echarts/charts\";\nimport type { EChartsOption, SeriesOption, SetOptionOpts } from \"echarts\";\nimport { memo, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { Chart, ChartEvents, KumoChartOption } from \"./EChart\";\n\n/** A single data series rendered on a `TimeseriesChart` */\nexport interface TimeseriesData {\n /** Display name shown in tooltips and legends */\n name: string;\n /** Array of `[timestamp_ms, value]` tuples ordered by time */\n data: [number, number][];\n /** Hex color string used for this series' line, bars, and legend dot */\n color: string;\n}\n\n/** Props for `TimeseriesChart` */\nexport interface TimeseriesChartProps {\n /**\n * The ECharts core instance imported by the consumer.\n * Passed in rather than imported directly so the consumer controls which\n * ECharts modules are bundled (tree-shaking).\n */\n echarts: typeof echarts;\n /** Visual style of each series. Defaults to `\"line\"`. */\n type?: \"line\" | \"bar\";\n /** Array of time series data to display on the chart */\n data: TimeseriesData[];\n /** Label for the x-axis (time axis) */\n xAxisName?: string;\n /** Number of ticks to display on the x-axis */\n xAxisTickCount?: number;\n /**\n * Custom formatter for x-axis tick labels.\n * Receives the raw timestamp in milliseconds and returns a display string,\n * overriding ECharts' built-in time formatting.\n */\n xAxisTickFormat?: (value: number) => string;\n /**\n * Custom formatter for y-axis tick labels.\n * Receives the raw value and returns a display string.\n * When omitted, ECharts' built-in formatter is used.\n */\n yAxisTickFormat?: (value: number) => string;\n /**\n * @deprecated Use `tooltipValueFormat` instead. This prop formats tooltip\n * values, not y-axis tick labels. It will be removed in a future major version.\n */\n yAxisTickLabelFormat?: (value: number) => string;\n /** Label for the y-axis (value axis) */\n yAxisName?: string;\n /** Number of ticks to display on the y-axis */\n yAxisTickCount?: number;\n /**\n * Custom formatter for tooltip values.\n * Receives the raw y-value and returns a display string.\n * When omitted, the raw value is shown. Takes precedence over the\n * deprecated `yAxisTickLabelFormat` prop.\n */\n tooltipValueFormat?: (value: number) => string;\n /**\n * Controls which series are shown in the tooltip.\n * - `\"all\"` — show all series at the hovered timestamp (default)\n * - `\"single\"` — show only the series whose value is closest to the cursor\n */\n tooltipMode?: \"all\" | \"single\";\n /**\n * Maximum number of series rows shown in the tooltip when `tooltipMode` is `\"all\"`.\n * Additional series are hidden with a `+N more` footer. Defaults to `10`.\n */\n tooltipMaxItems?: number;\n /**\n * Constrains the tooltip to stay within a specific element or region.\n * By default the tooltip avoids overflowing any clipping ancestor\n * (scroll containers, viewports, etc.).\n *\n * Pass an `Element` or array of elements to restrict the tooltip to a\n * specific container.\n *\n * @default \"clipping-ancestors\"\n */\n tooltipBoundary?: \"clipping-ancestors\" | Element | Element[];\n /**\n * Which axis the tooltip follows the cursor on.\n *\n * - `\"both\"` — tooltip tracks the cursor on both axes, staying near the\n * pointer at all times. This is the default and matches the behaviour of\n * ECharts' built-in tooltip.\n * - `\"x\"` — tooltip follows the cursor horizontally but is locked to a\n * fixed vertical position relative to the chart. This keeps the tooltip\n * out of the way of the data and avoids vertical jitter as series values\n * change — the same approach used by Recharts and many dashboard UIs.\n *\n * Only these two modes are offered because the x-axis is always time in a\n * `TimeseriesChart`: y-only tracking and fully-fixed positioning don't\n * produce useful tooltip behaviour for time-series data.\n *\n * Powered by Base UI Tooltip's `trackCursorAxis` under the hood.\n *\n * @default \"both\"\n */\n tooltipFollowCursor?: \"both\" | \"x\";\n /** Indicates incomplete data periods with optional before/after timestamps in ms */\n incomplete?: { before?: number; after?: number };\n /** Height of the chart in pixels. Defaults to `350`. */\n height?: number;\n /** Callback fired when user selects a time range via brush selection */\n onTimeRangeChange?: (from: number, to: number) => void;\n /** When `true`, switches the chart to ECharts' built-in dark theme */\n isDarkMode?: boolean;\n /**\n * When `true`, renders a vertical gradient fill beneath each line series.\n * The gradient fades from the series' color at the top to transparent at the bottom.\n * Has no effect when `type` is `\"bar\"`.\n */\n gradient?: boolean;\n /**\n * When `true`, hides the chart and displays an animated sine-wave skeleton\n * that oscillates back and forth to indicate that data is being fetched.\n */\n loading?: boolean;\n /**\n * Accessible description for screen readers. When provided, it is passed to\n * ECharts' `aria.label.description` and announced when the chart receives\n * focus. Consumers are responsible for writing a meaningful description —\n * see the W3C guidance on complex images for recommendations.\n *\n * @see https://www.w3.org/WAI/tutorials/images/complex/\n * @see https://echarts.apache.org/handbook/en/best-practices/aria/\n */\n ariaDescription?: string;\n /**\n * Additional options passed as the second argument to `chart.setOption()`.\n * Defaults to `{ notMerge: false, lazyUpdate: true }`.\n */\n optionUpdateBehavior?: SetOptionOpts;\n}\n\ninterface TooltipRow {\n name: string;\n value: number;\n color: string;\n}\n\ninterface TooltipState {\n ts: number;\n rows: TooltipRow[];\n hiddenCount: number;\n}\n\n/**\n * TimeseriesChart — a time-series line or bar chart.\n *\n * Built on `Chart` (Apache ECharts) with opinionated defaults for time-series data:\n * a time-typed x-axis, dashed lines for incomplete data periods, brush-based\n * time range selection, and automatic tooltip deduplication.\n *\n * @example\n * ```tsx\n * import * as echarts from \"echarts/core\";\n * import { LineChart } from \"echarts/charts\";\n * import { GridComponent, TooltipComponent, BrushComponent, ToolboxComponent } from \"echarts/components\";\n * import { CanvasRenderer } from \"echarts/renderers\";\n *\n * echarts.use([LineChart, GridComponent, TooltipComponent, BrushComponent, ToolboxComponent, CanvasRenderer]);\n *\n * const [range, setRange] = useState<[number, number]>();\n *\n * <TimeseriesChart\n * echarts={echarts}\n * data={[{ name: \"Requests\", data: [[Date.now(), 42]], color: \"#086FFF\" }]}\n * xAxisName=\"Time\"\n * xAxisTickFormat={(ts) => new Date(ts).toLocaleTimeString()}\n * yAxisName=\"Count\"\n * yAxisTickFormat={(value) => `${value / 1000}k`}\n * tooltipValueFormat={(value) => `${value.toFixed(2)} req/s`}\n * onTimeRangeChange={(from, to) => setRange([from, to])}\n * />\n * ```\n */\nexport function TimeseriesChart({\n echarts,\n type = \"line\",\n data,\n xAxisName,\n xAxisTickCount,\n xAxisTickFormat,\n yAxisTickFormat,\n yAxisTickLabelFormat,\n yAxisName,\n yAxisTickCount,\n tooltipValueFormat,\n onTimeRangeChange,\n height = 350,\n incomplete,\n isDarkMode,\n gradient,\n loading,\n ariaDescription,\n optionUpdateBehavior,\n tooltipMode = \"all\",\n tooltipMaxItems = 10,\n tooltipFollowCursor = \"both\",\n tooltipBoundary,\n}: TimeseriesChartProps) {\n const chartRef = useRef<echarts.ECharts | null>(null);\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n // Keep latest props accessible inside event handlers without stale closures\n const dataRef = useRef(data);\n dataRef.current = data;\n const tooltipModeRef = useRef(tooltipMode);\n tooltipModeRef.current = tooltipMode;\n const tooltipMaxItemsRef = useRef(tooltipMaxItems);\n tooltipMaxItemsRef.current = tooltipMaxItems;\n\n const [tooltipState, setTooltipState] = useState<TooltipState | null>(null);\n\n // Track cursor position for single-mode y lookup (convertFromPixel needs relative coords)\n const mousePosRef = useRef({ x: 0, y: 0 });\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n const onMove = (e: MouseEvent) => {\n const rect = container.getBoundingClientRect();\n mousePosRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };\n };\n container.addEventListener(\"mousemove\", onMove);\n return () => container.removeEventListener(\"mousemove\", onMove);\n }, []);\n\n const incompleteBefore = incomplete?.before;\n const incompleteAfter = incomplete?.after;\n\n const options = useMemo(() => {\n const transformSeries: Array<LineSeriesOption | BarSeriesOption> = [];\n\n const seriesType =\n type === \"bar\"\n ? ({ type: \"bar\", stack: \"total\" } as const)\n : ({ type: \"line\", showSymbol: false } as const);\n\n for (const s of data) {\n const incompleteBeforePoints =\n incompleteBefore && type === \"line\"\n ? s.data.filter((point) => point[0] <= incompleteBefore)\n : [];\n\n const incompleteAfterPoints =\n incompleteAfter && type === \"line\"\n ? s.data.filter((point) => point[0] >= incompleteAfter)\n : [];\n\n const completePoints =\n incompleteBeforePoints.length > 0 || incompleteAfterPoints.length > 0\n ? s.data.slice(\n Math.max(0, incompleteBeforePoints.length - 1),\n Math.max(0, s.data.length - incompleteAfterPoints.length + 1),\n )\n : s.data;\n\n // Main complete data series\n const areaStyle =\n gradient && type === \"line\"\n ? {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n { offset: 0, color: colorWithOpacity(s.color, 0.4) },\n { offset: 1, color: colorWithOpacity(s.color, 0) },\n ]),\n }\n : undefined;\n\n transformSeries.push({\n data: completePoints,\n color: s.color,\n name: s.name,\n emphasis: { focus: \"series\" },\n ...(areaStyle ? { areaStyle } : {}),\n ...seriesType,\n });\n\n // Incomplete data series with dashed lines\n const incompleteSeriesConfig = {\n color: s.color,\n name: s.name,\n type: \"line\" as const,\n lineStyle: { type: \"dashed\" as const },\n showSymbol: false,\n emphasis: { focus: \"series\" as const },\n };\n\n if (incompleteBeforePoints.length > 0) {\n transformSeries.push({\n ...incompleteSeriesConfig,\n data: incompleteBeforePoints,\n });\n }\n\n if (incompleteAfterPoints.length > 0) {\n transformSeries.push({\n ...incompleteSeriesConfig,\n data: incompleteAfterPoints,\n });\n }\n }\n\n return {\n aria: {\n enabled: true,\n ...(ariaDescription && { label: { description: ariaDescription } }),\n },\n brush: {\n xAxisIndex: \"all\" as const,\n brushType: \"lineX\" as const,\n brushMode: \"single\" as const,\n outOfBrush: {\n colorAlpha: 0.3,\n },\n brushStyle: {\n borderWidth: 1,\n color: \"rgba(120,140,180,0.3)\",\n borderColor: \"rgba(120,140,180,0.8)\",\n },\n },\n tooltip: {\n trigger: \"axis\" as const,\n showContent: false,\n axisPointer: { type: \"shadow\" as const },\n },\n backgroundColor: \"transparent\",\n toolbox: { show: false },\n xAxis: {\n name: xAxisName,\n nameLocation: \"middle\" as const,\n nameGap: 30,\n type: \"time\" as const,\n splitLine: {\n show: false,\n },\n axisLine: { show: false },\n splitNumber: xAxisTickCount ?? 5,\n ...(xAxisTickFormat && {\n axisLabel: {\n formatter: (value: number) => xAxisTickFormat(value),\n },\n }),\n },\n yAxis: {\n name: yAxisName,\n nameLocation: \"middle\" as const,\n nameGap: 40,\n type: \"value\" as const,\n axisTick: { show: true },\n axisLabel: {\n margin: 15,\n ...(yAxisTickFormat && {\n formatter: (value: number) => yAxisTickFormat(value),\n }),\n },\n splitLine: {\n show: true,\n lineStyle: { type: \"dashed\" as const, width: 1 },\n },\n splitNumber: yAxisTickCount,\n },\n grid: {\n left: yAxisName ? 30 : 24,\n right: 24,\n top: 24,\n bottom: xAxisName ? 30 : 24,\n },\n series: transformSeries as SeriesOption[],\n } satisfies KumoChartOption;\n }, [\n data,\n xAxisName,\n xAxisTickCount,\n xAxisTickFormat,\n yAxisTickFormat,\n yAxisName,\n yAxisTickCount,\n incompleteBefore,\n incompleteAfter,\n type,\n gradient,\n echarts,\n ariaDescription,\n ]);\n\n const events = useMemo<Partial<ChartEvents>>(() => {\n return {\n updateaxispointer: (params: any) => {\n const ts: number | undefined = params?.axesInfo?.[0]?.value;\n if (ts == null) return;\n\n const seenNames = new Set<string>();\n const allRows: TooltipRow[] = [];\n\n for (const s of dataRef.current) {\n if (seenNames.has(s.name)) continue;\n seenNames.add(s.name);\n const value = findNearest(s.data, ts);\n if (value != null) allRows.push({ name: s.name, value, color: s.color });\n }\n\n // Sort by value descending so highest series appears first\n allRows.sort((a, b) => b.value - a.value);\n\n let rows: TooltipRow[];\n let hiddenCount = 0;\n\n if (tooltipModeRef.current === \"single\") {\n // Find the series whose value is closest to the cursor's y position\n const chart = chartRef.current;\n const cursorValue = chart\n ? (chart.convertFromPixel(\"grid\", [0, mousePosRef.current.y]) as [number, number])?.[1]\n : null;\n if (cursorValue != null && allRows.length > 0) {\n const nearest = allRows.reduce((best, row) =>\n Math.abs(row.value - cursorValue) < Math.abs(best.value - cursorValue) ? row : best,\n );\n rows = [nearest];\n } else {\n rows = allRows.slice(0, 1);\n }\n } else {\n const max = tooltipMaxItemsRef.current;\n rows = allRows.slice(0, max);\n hiddenCount = Math.max(0, allRows.length - max);\n }\n\n const nextState: TooltipState = { ts, rows, hiddenCount };\n setTooltipState((prev) => {\n if (isSameTooltipState(prev, nextState)) return prev;\n return nextState;\n });\n },\n globalout: () => {\n setTooltipState(null);\n },\n ...(onTimeRangeChange && {\n brushend: (params: any) => {\n const range = params.areas[0].coordRange;\n onTimeRangeChange(range[0], range[1]);\n chartRef.current?.dispatchAction({ type: \"brush\", areas: [] });\n },\n }),\n };\n }, [onTimeRangeChange]);\n\n // Activate the lineX brush cursor when a time-range callback is provided,\n // and deactivate it on cleanup so the cursor resets when the prop is removed.\n const hasTimeRangeCallback = !!onTimeRangeChange;\n useEffect(() => {\n const chart = chartRef.current;\n if (chart && hasTimeRangeCallback) {\n chart.dispatchAction({\n type: \"takeGlobalCursor\",\n key: \"brush\",\n brushOption: {\n brushType: \"lineX\" as const,\n brushMode: \"single\" as const,\n },\n });\n\n return () => {\n chart.dispatchAction({\n type: \"takeGlobalCursor\",\n key: \"brush\",\n brushOption: {\n brushType: false,\n },\n });\n };\n }\n // `loading` controls whether <Chart> is mounted. When it flips to false,\n // chartRef.current becomes available and the brush cursor must be activated.\n // Without this dep, the effect won't re-run after Chart mounts.\n }, [chartRef, hasTimeRangeCallback, loading]);\n\n const formatFn = tooltipValueFormat ?? yAxisTickLabelFormat;\n const tooltipOpen = tooltipState !== null;\n\n\n return (\n <TooltipPrimitive.Root open={tooltipOpen} trackCursorAxis={tooltipFollowCursor}>\n <TooltipPrimitive.Trigger\n render={<div ref={containerRef} className=\"relative w-full\" style={{ height }} />}\n >\n {loading && <ChartWaveLoader height={height} isDarkMode={isDarkMode} />}\n {!loading && (\n <Chart\n echarts={echarts}\n ref={chartRef}\n options={options as EChartsOption}\n height={height}\n isDarkMode={isDarkMode}\n onEvents={events}\n optionUpdateBehavior={optionUpdateBehavior}\n />\n )}\n </TooltipPrimitive.Trigger>\n {tooltipOpen && (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Positioner\n side=\"right\"\n align=\"start\"\n sideOffset={12}\n collisionAvoidance={{ side: \"flip\", align: \"shift\" }}\n collisionBoundary={tooltipBoundary}\n collisionPadding={8}\n >\n <TooltipPrimitive.Popup\n data-mode={isDarkMode ? \"dark\" : \"light\"}\n className=\"bg-kumo-base rounded-lg shadow-lg shadow-kumo-tip-shadow outline outline-1 outline-kumo-fill p-2 min-w-[150px] max-w-xs\"\n >\n <TooltipContent state={tooltipState} formatValue={formatFn} />\n </TooltipPrimitive.Popup>\n </TooltipPrimitive.Positioner>\n </TooltipPrimitive.Portal>\n )}\n </TooltipPrimitive.Root>\n );\n}\n\n// ─── Tooltip content ──────────────────────────────────────────────────────────\n//\n// Memoized so React skips reconciliation when the cursor moves within the same\n// data point. The timestamp dedup in updateAxisPointer already prevents most\n// unnecessary state updates; this is a safety net for when the parent re-renders\n// for unrelated reasons (e.g. a prop change on TimeseriesChart).\n\ninterface TooltipContentProps {\n state: TooltipState;\n formatValue?: (v: number) => string;\n}\n\nconst TooltipContent = memo(function TooltipContent({ state, formatValue }: TooltipContentProps) {\n const { ts, rows, hiddenCount } = state;\n\n return (\n <>\n <div className=\"text-xs font-semibold text-kumo-default mb-1\">\n {formatTimestamp(ts)}\n </div>\n {rows.map((row) => (\n <div key={row.name} className=\"flex items-center justify-between gap-4 py-0.5\">\n <div className=\"flex items-center gap-2 min-w-0\">\n <span\n className=\"w-3 h-3 rounded-full shrink-0\"\n style={{ backgroundColor: row.color }}\n />\n <span className=\"text-xs font-medium text-kumo-default truncate\" title={row.name}>\n {row.name}\n </span>\n </div>\n <span className=\"text-xs font-semibold text-kumo-default shrink-0\">\n {formatValue ? formatValue(row.value) : formatDefaultValue(row.value)}\n </span>\n </div>\n ))}\n {hiddenCount > 0 && (\n <div className=\"text-xs text-kumo-subtle mt-1\">\n +{hiddenCount} more\n </div>\n )}\n </>\n );\n});\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Binary search for the value in `data` whose timestamp is closest to `ts`. */\nfunction findNearest(data: [number, number][], ts: number): number | null {\n if (data.length === 0) return null;\n let lo = 0, hi = data.length - 1;\n while (lo < hi) {\n const mid = (lo + hi) >> 1;\n if (data[mid][0] < ts) lo = mid + 1;\n else hi = mid;\n }\n // Check both neighbours and return the closer one\n if (lo > 0 && Math.abs(data[lo - 1][0] - ts) < Math.abs(data[lo][0] - ts)) lo--;\n return data[lo][1];\n}\n\n/** Shallow-compare two tooltip states so React can skip renders when nothing changed. */\nfunction isSameTooltipState(a: TooltipState | null, b: TooltipState): boolean {\n if (!a || a.ts !== b.ts || a.hiddenCount !== b.hiddenCount || a.rows.length !== b.rows.length) {\n return false;\n }\n return a.rows.every((row, i) => {\n const next = b.rows[i];\n return row.name === next.name && row.value === next.value && row.color === next.color;\n });\n}\n\nconst defaultNumberFormat = new Intl.NumberFormat(undefined, {\n maximumFractionDigits: 3,\n});\n\n/** Fallback value formatter — avoids floating point noise without scientific notation. */\nfunction formatDefaultValue(value: number): string {\n if (Number.isInteger(value)) return String(value);\n return defaultNumberFormat.format(value);\n}\n\n/**\n * Animated sine-wave skeleton shown while `TimeseriesChart` is in `loading` state.\n * Renders multiple staggered wave paths that sweep continuously left-to-right,\n * mimicking the motion of live time-series data being drawn.\n */\nfunction ChartWaveLoader({\n height,\n isDarkMode,\n}: {\n height: number;\n isDarkMode?: boolean;\n}) {\n const mid = height / 2;\n const amp = Math.min(height * 0.12, 28);\n const period = 400;\n const steps = 120;\n\n const points: string[] = [];\n for (let i = 0; i <= steps; i++) {\n const x = -period + (i / steps) * period * 3;\n const y = mid + Math.sin((i / steps) * 2 * Math.PI * 3) * amp;\n points.push(`${i === 0 ? \"M\" : \"L\"}${x.toFixed(2)},${y.toFixed(2)}`);\n }\n const d = points.join(\" \");\n\n const strokeColor = isDarkMode ? \"rgba(255,255,255,0.5)\" : \"rgba(0,0,0,0.2)\";\n\n return (\n <div\n aria-hidden=\"true\"\n className=\"absolute inset-0 overflow-hidden\"\n style={{ height }}\n >\n <svg\n width=\"100%\"\n height={height}\n viewBox={`0 0 ${period} ${height}`}\n preserveAspectRatio=\"none\"\n className=\"w-full animate-pulse\"\n >\n <path\n d={d}\n fill=\"none\"\n stroke={strokeColor}\n strokeWidth=\"2\"\n style={{\n animation: `kumo-chart-wave 2.4s linear infinite`,\n transformOrigin: \"0 0\",\n }}\n />\n </svg>\n </div>\n );\n}\n\n/**\n * Returns an `rgba(r, g, b, alpha)` string for any hex or rgb(a) color input,\n * replacing whatever opacity was already present with the given `alpha` (0–1).\n *\n * Handles:\n * - 6-digit hex: `#RRGGBB`\n * - 8-digit hex: `#RRGGBBAA` ← strips existing alpha\n * - 3-digit hex: `#RGB`\n * - `rgb(r, g, b)`\n * - `rgba(r, g, b, a)` ← replaces existing alpha\n */\nfunction colorWithOpacity(color: string, alpha: number): string {\n const a = Math.max(0, Math.min(1, alpha));\n\n // rgb / rgba\n const rgbMatch = color.match(\n /rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i,\n );\n if (rgbMatch) {\n return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${a})`;\n }\n\n // hex — strip leading #\n let hex = color.replace(/^#/, \"\");\n\n // expand 3-digit → 6-digit\n if (hex.length === 3) {\n hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];\n }\n\n // strip 8-digit alpha → keep only 6\n if (hex.length === 8) {\n hex = hex.slice(0, 6);\n }\n\n const r = parseInt(hex.slice(0, 2), 16);\n const g = parseInt(hex.slice(2, 4), 16);\n const b = parseInt(hex.slice(4, 6), 16);\n\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n}\n\nconst tooltipDateFormat = new Intl.DateTimeFormat(undefined, {\n month: \"short\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\",\n hour12: false,\n});\n\n/**\n * Formats a timestamp for use in chart tooltips using the browser's locale.\n * Accepts a Unix timestamp in milliseconds, an ISO date string, or a `Date` object.\n */\nfunction formatTimestamp(ts: number | string | Date): string {\n return tooltipDateFormat.format(new Date(ts));\n}\n","import { cn } from \"../../utils\";\n\n/** Shared props for both legend item variants */\ninterface LegendItemProps {\n /** Series name shown as a label */\n name: string;\n /** Hex color string for the series indicator dot */\n color: string;\n /** Formatted value string to display */\n value: string;\n /** Optional unit label shown after the value (e.g. `\"ms\"`, `\"%\"`) */\n unit?: string;\n /** When `true`, renders the item at 50% opacity to indicate a deselected state */\n inactive?: boolean;\n}\n\n/**\n * Large legend item — stacked layout with a colored dot + series name on top\n * and a large value with an optional small unit below. Use for prominent\n * single-metric displays such as dashboard cards.\n */\nfunction LargeItem({ color, value, name, unit, inactive }: LegendItemProps) {\n return (\n <div className=\"inline-flex flex-col gap-2 min-w-42 py-2\">\n <div className=\"flex items-center gap-2\">\n <span\n className={cn(\"size-2 rounded-full inline-block\", {\n \"opacity-50\": inactive,\n })}\n style={{ backgroundColor: color }}\n />\n <span className={cn(\"text-xs\", { \"opacity-50\": inactive })}>\n {name}\n </span>\n </div>\n <div className=\"flex items-baseline gap-0.5\">\n <span\n className={cn(\"text-lg font-medium leading-none\", {\n \"opacity-50\": inactive,\n })}\n >\n {value}\n </span>\n {unit && (\n <span\n className={cn(\"text-xs text-kumo-subtle leading-none\", {\n \"opacity-50\": inactive,\n })}\n >\n {unit}\n </span>\n )}\n </div>\n </div>\n );\n}\n\n/**\n * Small legend item — inline layout with a colored dot, series name, and value\n * on a single row. Use for compact legends below or beside a chart.\n */\nfunction SmallItem({ color, value, name, inactive }: LegendItemProps) {\n return (\n <div className=\"inline-flex items-center gap-2\">\n <span\n className={cn(\"size-2 rounded-full inline-block\", {\n \"opacity-50\": inactive,\n })}\n style={{ backgroundColor: color }}\n />\n <span className={cn(\"text-xs\", { \"opacity-50\": inactive })}>{name}</span>\n <span className={cn(\"text-xs font-medium\", { \"opacity-50\": inactive })}>\n {value}\n </span>\n </div>\n );\n}\n\n/**\n * ChartLegend — pre-built legend item components for use alongside a chart.\n *\n * - `ChartLegend.SmallItem` — compact inline layout; suited for multi-series legends\n * - `ChartLegend.LargeItem` — stacked layout with a large value; suited for single-metric cards\n *\n * @example\n * ```tsx\n * <ChartLegend.SmallItem name=\"Requests\" color=\"#086FFF\" value=\"1,234\" />\n * <ChartLegend.LargeItem name=\"Latency\" color=\"#CF7EE9\" value=\"42\" unit=\"ms\" inactive />\n * ```\n */\nexport const ChartLegend = {\n SmallItem,\n LargeItem,\n};\n","import type * as echarts from \"echarts/core\";\nimport type { EChartsOption } from \"echarts\";\nimport { useMemo, useCallback } from \"react\";\nimport { Chart, type ChartEvents } from \"./EChart\";\nimport { ChartPalette } from \"./Color\";\n\nexport interface SankeyNodeData {\n id?: string;\n name: string;\n color?: string;\n /** Optional value/count to display above the node label */\n value?: number;\n /** Additional data to show in tooltip (e.g., { Apps: 166, Sessions: 122600 }) */\n tooltipData?: Record<string, number | string>;\n isDrillable?: boolean;\n childCount?: number;\n}\n\nexport interface SankeyLinkData {\n id?: string;\n source: number;\n target: number;\n value: number;\n isDrillable?: boolean;\n}\n\nexport type DrillTarget =\n | { type: \"node\"; nodeId: string }\n | { type: \"link\"; sourceId: string; targetId: string };\n\nexport interface DrillSelection {\n id: string;\n type: \"node\" | \"link\";\n label: string;\n depth: number;\n}\n\nexport interface DrillDownContext {\n selections: DrillSelection[];\n isMultiSelect: boolean;\n}\n\nexport interface SankeyData {\n nodes: SankeyNodeData[];\n links: SankeyLinkData[];\n}\n\n/** Parameters passed to the tooltip formatter */\nexport interface SankeyTooltipParams {\n type: \"node\" | \"link\";\n name: string;\n node?: SankeyNodeData;\n link?: { source: string; target: string; value: number };\n color?: string;\n}\n\nexport interface SankeyChartProps {\n /**\n * The ECharts core instance imported by the consumer.\n * Passed in rather than imported directly so the consumer controls which\n * ECharts modules are bundled (tree-shaking).\n */\n echarts: typeof echarts;\n /** Array of nodes in the Sankey diagram */\n nodes: SankeyNodeData[];\n /** Array of links connecting nodes by index */\n links: SankeyLinkData[];\n /** Height of the chart in pixels */\n height?: number;\n /** Show node values above labels (default: true if any node has a value) */\n showNodeValues?: boolean;\n /** Layout for node labels when showNodeValues is true.\n * - 'stacked': value on top, name below (default)\n * - 'inline': \"value name\" on a single line (better for small nodes)\n */\n nodeLabelLayout?: \"stacked\" | \"inline\";\n /** Format function for node values (default: toLocaleString) */\n formatValue?: (value: number) => string;\n /** Custom tooltip formatter. Return HTML string or empty string to hide tooltip. */\n tooltipFormatter?: (params: SankeyTooltipParams) => string;\n nodeWidth?: number;\n nodePadding?: number;\n showTooltip?: boolean;\n defaultNodeColor?: string;\n /** Left padding of the Sankey layout within the chart container. Accepts a number (px) or percentage string. ECharts default: '5%'. */\n left?: number | string;\n /** Right padding of the Sankey layout within the chart container. Accepts a number (px) or percentage string. ECharts default: '5%'. */\n right?: number | string;\n /** Link fill style: 'gradient' blends source to target colors, 'gray' uses flat gray */\n linkColor?: \"gradient\" | \"gray\";\n linkOpacity?: number;\n className?: string;\n isDarkMode?: boolean;\n onNodeClick?: (node: SankeyNodeData) => void;\n onLinkClick?: (link: SankeyLinkData) => void;\n}\n\nconst defaultFormatValue = (value: number) => value.toLocaleString();\n\n/** Type guard for ECharts tooltip params */\ninterface TooltipParams {\n dataType?: string;\n name?: string;\n data?: { source?: string; target?: string; value?: number };\n value?: number | number[];\n color?: string;\n}\n\nfunction isTooltipParams(params: unknown): params is TooltipParams {\n return typeof params === \"object\" && params !== null;\n}\n\n/** Escape HTML special characters to prevent XSS in tooltips */\nconst escapeHtml = (str: string): string =>\n str\n .replace(/&/g, \"&amp;\")\n .replace(/</g, \"&lt;\")\n .replace(/>/g, \"&gt;\")\n .replace(/\"/g, \"&quot;\")\n .replace(/'/g, \"&#39;\");\n\n/**\n * Escape ECharts rich text metacharacters to prevent formatting issues.\n * Rich text syntax uses {styleName|text}, so | and } must be escaped.\n */\nconst escapeRichText = (str: string): string =>\n str.replace(/[{}|]/g, (char) => `\\\\${char}`);\n\n/**\n * Sanitize a CSS color value to prevent injection attacks.\n * Only allows valid hex colors, rgb/rgba, hsl/hsla, and named colors.\n */\nconst sanitizeColor = (color: string): string => {\n const fallback = \"#666\";\n if (!color || typeof color !== \"string\") return fallback;\n\n // Hex colors: #RGB, #RRGGBB, #RRGGBBAA\n if (/^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color)) {\n return color;\n }\n\n // rgb/rgba: rgb(0,0,0) or rgba(0,0,0,0.5)\n if (\n /^rgba?\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*(?:,\\s*[\\d.]+\\s*)?\\)$/i.test(\n color,\n )\n ) {\n return color;\n }\n\n // hsl/hsla: hsl(0,0%,0%) or hsla(0,0%,0%,0.5)\n if (\n /^hsla?\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}%\\s*,\\s*\\d{1,3}%\\s*(?:,\\s*[\\d.]+\\s*)?\\)$/i.test(\n color,\n )\n ) {\n return color;\n }\n\n // Named colors (basic set) - only alphanumeric, no special chars\n if (/^[a-z]{3,20}$/i.test(color)) {\n return color;\n }\n\n return fallback;\n};\n\nexport function SankeyChart({\n echarts,\n nodes,\n links,\n height = 400,\n nodeWidth = 8,\n nodePadding = 10,\n showTooltip: enableTooltip = true,\n showNodeValues,\n nodeLabelLayout = \"stacked\",\n formatValue = defaultFormatValue,\n tooltipFormatter,\n defaultNodeColor,\n left,\n right,\n linkColor = \"gradient\",\n linkOpacity = 0.5,\n className,\n isDarkMode,\n onNodeClick,\n onLinkClick,\n}: SankeyChartProps) {\n const hasNodeValues = nodes.some((n) => n.value !== undefined);\n const shouldShowValues = showNodeValues ?? hasNodeValues;\n const isInlineLayout = nodeLabelLayout === \"inline\";\n const options = useMemo<EChartsOption>(() => {\n const labelColor = ChartPalette.text(\"primary\", isDarkMode);\n const secondaryColor = ChartPalette.text(\"secondary\", isDarkMode);\n\n // Compute colors for each node (explicit color > default > categorical)\n const nodeColors = nodes.map(\n (node, index) =>\n node.color ??\n defaultNodeColor ??\n ChartPalette.categorical(index, isDarkMode),\n );\n\n // Build a map of node name to original node data + computed color for tooltip access\n const nodeDataMap = new Map(\n nodes.map((n, i) => [n.name, { ...n, computedColor: nodeColors[i] }]),\n );\n\n const echartsNodes = nodes.map((node, index) => ({\n name: node.name,\n value: node.value,\n itemStyle: {\n color: nodeColors[index],\n },\n }));\n\n const echartsLinks = links.map((link) => ({\n source: nodes[link.source]?.name ?? \"\",\n target: nodes[link.target]?.name ?? \"\",\n value: link.value,\n }));\n\n return {\n backgroundColor: \"transparent\",\n animation: true,\n animationDuration: 500,\n animationDurationUpdate: 300,\n animationEasingUpdate: \"cubicInOut\",\n tooltip: enableTooltip\n ? {\n trigger: \"item\",\n triggerOn: \"mousemove\",\n dangerousHtmlFormatter: (params: unknown) => {\n if (!isTooltipParams(params)) return \"\";\n\n if (params.dataType === \"node\" && params.name) {\n const nodeData = nodeDataMap.get(params.name);\n const color = sanitizeColor(\n nodeData?.computedColor ?? params.color ?? \"#666\",\n );\n\n // Use custom formatter if provided\n if (tooltipFormatter) {\n return tooltipFormatter({\n type: \"node\",\n name: params.name,\n node: nodeData,\n color,\n });\n }\n\n // Default node tooltip\n const safeName = escapeHtml(params.name);\n return `<div style=\"display:flex;align-items:center;gap:6px;\"><span style=\"display:inline-block;width:10px;height:10px;border-radius:50%;background:${color}\"></span><strong>${safeName}</strong></div>`;\n }\n\n if (params.dataType === \"edge\" && params.data) {\n const { source, target, value } = params.data;\n\n // Use custom formatter if provided\n if (tooltipFormatter) {\n return tooltipFormatter({\n type: \"link\",\n name: `${source} → ${target}`,\n link: {\n source: source ?? \"\",\n target: target ?? \"\",\n value: value ?? 0,\n },\n });\n }\n\n // Get colors for source and target nodes\n const sourceNode = nodeDataMap.get(source ?? \"\");\n const targetNode = nodeDataMap.get(target ?? \"\");\n const sourceColor = sanitizeColor(\n sourceNode?.computedColor ?? \"#666\",\n );\n const targetColor = sanitizeColor(\n targetNode?.computedColor ?? \"#666\",\n );\n\n // Default link tooltip with colored dots\n const safeSource = escapeHtml(source ?? \"\");\n const safeTarget = escapeHtml(target ?? \"\");\n return `<div style=\"display:flex;align-items:center;gap:6px;margin-bottom:4px;\">\n <span style=\"display:inline-block;width:10px;height:10px;border-radius:50%;background:${sourceColor}\"></span>\n <strong>${safeSource}</strong>\n <span style=\"color:${secondaryColor}\">→</span>\n <span style=\"display:inline-block;width:10px;height:10px;border-radius:50%;background:${targetColor}\"></span>\n <strong>${safeTarget}</strong>\n </div>\n <strong>${value !== undefined ? escapeHtml(formatValue(value)) : \"\"}</strong>`;\n }\n\n return \"\";\n },\n }\n : undefined,\n series: [\n {\n type: \"sankey\",\n ...(left !== undefined && { left }),\n ...(right !== undefined && { right }),\n data: echartsNodes,\n links: echartsLinks,\n draggable: false,\n emphasis: {\n focus: \"adjacency\",\n },\n nodeWidth,\n nodeGap: nodePadding,\n lineStyle: {\n color: linkColor === \"gradient\" ? \"source\" : \"#d1d5db\",\n opacity: linkColor === \"gradient\" ? linkOpacity : 0.4,\n curveness: 0.5,\n },\n label: {\n show: true,\n color: labelColor,\n fontSize: 12,\n formatter: shouldShowValues\n ? (params: { name?: string }) => {\n const name = params.name ?? \"\";\n const nodeData = nodeDataMap.get(name);\n const safeName = escapeRichText(name);\n if (nodeData?.value !== undefined) {\n const formattedValue = escapeRichText(\n formatValue(nodeData.value),\n );\n // Inline: \"name value\" on single line; Stacked: value above name\n return isInlineLayout\n ? `{name|${safeName}} {value|${formattedValue}}`\n : `{value|${formattedValue}}\\n{name|${safeName}}`;\n }\n return safeName;\n }\n : undefined,\n rich: shouldShowValues\n ? {\n value: {\n fontSize: 11,\n color: labelColor,\n lineHeight: isInlineLayout ? undefined : 16,\n },\n name: {\n fontSize: 12,\n color: labelColor,\n fontWeight: 700,\n },\n }\n : undefined,\n },\n },\n ],\n };\n }, [\n nodes,\n links,\n enableTooltip,\n nodeWidth,\n nodePadding,\n defaultNodeColor,\n left,\n right,\n isDarkMode,\n linkColor,\n linkOpacity,\n shouldShowValues,\n isInlineLayout,\n formatValue,\n tooltipFormatter,\n ]);\n\n const handleClick = useCallback(\n (params: Parameters<ChartEvents[\"click\"]>[0]) => {\n if (params.dataType === \"node\" && onNodeClick && params.name) {\n const nodeIndex = nodes.findIndex((n) => n.name === params.name);\n const originalNode = nodeIndex >= 0 ? nodes[nodeIndex] : null;\n\n const nodeData: SankeyNodeData = {\n ...originalNode,\n name: params.name,\n };\n onNodeClick(nodeData);\n } else if (params.dataType === \"edge\" && onLinkClick && params.data) {\n const data = params.data;\n const source =\n typeof data === \"object\" && data !== null && \"source\" in data\n ? String(data.source)\n : \"\";\n const target =\n typeof data === \"object\" && data !== null && \"target\" in data\n ? String(data.target)\n : \"\";\n const sourceIndex = nodes.findIndex((n) => n.name === source);\n const targetIndex = nodes.findIndex((n) => n.name === target);\n\n if (sourceIndex === -1 || targetIndex === -1) return;\n\n const rawValue = params.value;\n const value =\n typeof rawValue === \"number\"\n ? rawValue\n : Array.isArray(rawValue) && typeof rawValue[0] === \"number\"\n ? rawValue[0]\n : 0;\n\n // Find original link to preserve id and isDrillable properties\n const originalLink = links.find(\n (l) => l.source === sourceIndex && l.target === targetIndex,\n );\n onLinkClick({\n ...originalLink,\n source: sourceIndex,\n target: targetIndex,\n value,\n });\n }\n },\n [nodes, links, onNodeClick, onLinkClick],\n );\n\n const onEvents = useMemo<Partial<ChartEvents>>(\n () => ({\n click: handleClick,\n }),\n [handleClick],\n );\n\n return (\n <Chart\n echarts={echarts}\n options={options}\n className={className}\n isDarkMode={isDarkMode}\n height={height}\n onEvents={onEvents}\n />\n );\n}\n\nSankeyChart.displayName = \"SankeyChart\";\n"],"names":["ChartSemanticLightColors","ChartSemanticDarkColors","sequentialLight","sequentialDark","CHART_LIGHT_COLORS","CHART_DARK_COLORS","ChartPalette","semantic","name","isDarkMode","categorical","index","sequential","palette","text","variant","colors","transformTooltip","tooltipObj","dangerousHtmlFormatter","restOfTooltip","prepareChartOptions","options","withDefaults","Chart","forwardRef","echarts","optionUpdateBehavior","className","height","onEvents","ref","elRef","useRef","chartRef","handlersRef","wrappersRef","boundEventsRef","useEffect","chart","event","wrapper","nextBound","handler","params","el","isInitial","ro","jsx","cn","TimeseriesChart","type","data","xAxisName","xAxisTickCount","xAxisTickFormat","yAxisTickFormat","yAxisTickLabelFormat","yAxisName","yAxisTickCount","tooltipValueFormat","onTimeRangeChange","incomplete","gradient","loading","ariaDescription","tooltipMode","tooltipMaxItems","tooltipFollowCursor","tooltipBoundary","containerRef","dataRef","tooltipModeRef","tooltipMaxItemsRef","tooltipState","setTooltipState","useState","mousePosRef","container","onMove","e","rect","incompleteBefore","incompleteAfter","useMemo","transformSeries","seriesType","s","incompleteBeforePoints","point","incompleteAfterPoints","completePoints","areaStyle","colorWithOpacity","incompleteSeriesConfig","value","events","ts","seenNames","allRows","findNearest","a","b","rows","hiddenCount","cursorValue","best","row","max","nextState","prev","isSameTooltipState","range","hasTimeRangeCallback","formatFn","tooltipOpen","TooltipPrimitive.Root","jsxs","TooltipPrimitive.Trigger","ChartWaveLoader","TooltipPrimitive.Portal","TooltipPrimitive.Positioner","TooltipPrimitive.Popup","TooltipContent","memo","state","formatValue","Fragment","formatTimestamp","formatDefaultValue","lo","hi","mid","i","next","defaultNumberFormat","amp","period","steps","points","x","y","d","strokeColor","color","alpha","rgbMatch","hex","r","g","tooltipDateFormat","LargeItem","unit","inactive","SmallItem","ChartLegend","defaultFormatValue","isTooltipParams","escapeHtml","str","escapeRichText","char","sanitizeColor","fallback","SankeyChart","nodes","links","nodeWidth","nodePadding","enableTooltip","showNodeValues","nodeLabelLayout","tooltipFormatter","defaultNodeColor","left","right","linkColor","linkOpacity","onNodeClick","onLinkClick","hasNodeValues","n","shouldShowValues","isInlineLayout","labelColor","secondaryColor","nodeColors","node","nodeDataMap","echartsNodes","echartsLinks","link","nodeData","safeName","source","target","sourceNode","targetNode","sourceColor","targetColor","safeSource","safeTarget","formattedValue","handleClick","useCallback","nodeIndex","sourceIndex","targetIndex","rawValue","originalLink","l"],"mappings":"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"}