@squadbase/vantage 0.6.1 → 0.6.2-dev1.31accb1

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 (183) hide show
  1. package/dist/add-DY4AXANK.js +6 -0
  2. package/dist/add-DY4AXANK.js.map +1 -0
  3. package/dist/{build-O5TVNH4E.js → build-TVKFIVFQ.js} +8 -8
  4. package/dist/{build-O5TVNH4E.js.map → build-TVKFIVFQ.js.map} +1 -1
  5. package/dist/{check-WFBEDHDR.js → check-3KHZXZMQ.js} +6 -6
  6. package/dist/{check-WFBEDHDR.js.map → check-3KHZXZMQ.js.map} +1 -1
  7. package/dist/{chunk-PLST5Q7T.js → chunk-AG6RZ2RR.js} +1010 -23
  8. package/dist/chunk-AG6RZ2RR.js.map +1 -0
  9. package/dist/{chunk-KLEIVDUV.js → chunk-CEXAQQ5W.js} +150 -11
  10. package/dist/chunk-CEXAQQ5W.js.map +1 -0
  11. package/dist/{chunk-JGRMRXXZ.js → chunk-JKLLFVEU.js} +3 -3
  12. package/dist/{chunk-JGRMRXXZ.js.map → chunk-JKLLFVEU.js.map} +1 -1
  13. package/dist/{chunk-EP6JHXSR.js → chunk-LMUACBMA.js} +3 -3
  14. package/dist/{chunk-EP6JHXSR.js.map → chunk-LMUACBMA.js.map} +1 -1
  15. package/dist/{chunk-MXI3PZFT.js → chunk-OB6UBJXF.js} +156 -200
  16. package/dist/chunk-OB6UBJXF.js.map +1 -0
  17. package/dist/{chunk-BCE22JSM.js → chunk-P7W4LR3Z.js} +32 -13
  18. package/dist/chunk-P7W4LR3Z.js.map +1 -0
  19. package/dist/chunk-PXRX5PEC.js +54 -0
  20. package/dist/chunk-PXRX5PEC.js.map +1 -0
  21. package/dist/{chunk-3G43C6OL.js → chunk-QI3XQKHS.js} +39 -3
  22. package/dist/chunk-QI3XQKHS.js.map +1 -0
  23. package/dist/{chunk-QDZA5JSL.js → chunk-U2M6HGKQ.js} +3 -3
  24. package/dist/{chunk-QDZA5JSL.js.map → chunk-U2M6HGKQ.js.map} +1 -1
  25. package/dist/{chunk-T3FLAGI6.js → chunk-VA776YE5.js} +3 -3
  26. package/dist/{chunk-T3FLAGI6.js.map → chunk-VA776YE5.js.map} +1 -1
  27. package/dist/cli.js +14 -11
  28. package/dist/cli.js.map +1 -1
  29. package/dist/components/index.d.ts +223 -1
  30. package/dist/components/index.js +3 -2
  31. package/dist/{dev-NZRLOQCL.js → dev-GDKATCC7.js} +22 -11
  32. package/dist/dev-GDKATCC7.js.map +1 -0
  33. package/dist/doc/index.d.ts +4 -0
  34. package/dist/doc/index.js +107 -11
  35. package/dist/doc/index.js.map +1 -1
  36. package/dist/{docs-ZGDJUHJI.js → docs-EJJ3BECT.js} +3 -3
  37. package/dist/{docs-ZGDJUHJI.js.map → docs-EJJ3BECT.js.map} +1 -1
  38. package/dist/{doctor-VFKEMR54.js → doctor-WQXPXP6K.js} +7 -7
  39. package/dist/doctor-WQXPXP6K.js.map +1 -0
  40. package/dist/{preview-QDCIVVSR.js → preview-OGMCNQUO.js} +12 -4
  41. package/dist/preview-OGMCNQUO.js.map +1 -0
  42. package/dist/{routes-RHP5FVGD.js → routes-MWBWWOJ2.js} +5 -5
  43. package/dist/{routes-RHP5FVGD.js.map → routes-MWBWWOJ2.js.map} +1 -1
  44. package/dist/{search-RFBELGY7.js → search-6Y422SV6.js} +3 -3
  45. package/dist/{search-RFBELGY7.js.map → search-6Y422SV6.js.map} +1 -1
  46. package/dist/slide/index.js +61 -15
  47. package/dist/slide/index.js.map +1 -1
  48. package/dist/table/index.js +7 -5
  49. package/dist/table/index.js.map +1 -1
  50. package/dist/ui/index.d.ts +140 -10
  51. package/dist/ui/index.js +1406 -63
  52. package/dist/ui/index.js.map +1 -1
  53. package/dist/{upgrade-GF2P67M6.js → upgrade-HCANX4GQ.js} +6 -6
  54. package/dist/{upgrade-GF2P67M6.js.map → upgrade-HCANX4GQ.js.map} +1 -1
  55. package/dist/vite/index.js +3 -3
  56. package/docs/en/changelog.md +24 -0
  57. package/docs/en/cli-reference.md +30 -0
  58. package/docs/en/parts/page-shell.md +1 -1
  59. package/docs/en/routing.md +4 -2
  60. package/docs/index.json +291 -61
  61. package/docs/ja/changelog.md +50 -0
  62. package/docs/ja/cli-reference.md +29 -0
  63. package/docs/ja/components.md +33 -89
  64. package/docs/ja/page-types/csv.md +83 -0
  65. package/docs/ja/page-types/doc.md +83 -0
  66. package/docs/ja/page-types/excel.md +82 -0
  67. package/docs/ja/page-types/slide.md +132 -0
  68. package/docs/ja/page-types.md +47 -0
  69. package/docs/ja/parts/area-chart.md +61 -0
  70. package/docs/ja/parts/bar-chart.md +69 -0
  71. package/docs/ja/parts/bar-list.md +35 -0
  72. package/docs/ja/parts/category-bar.md +36 -0
  73. package/docs/ja/parts/donut-chart.md +47 -0
  74. package/docs/ja/parts/echart.md +3 -0
  75. package/docs/ja/parts/line-chart.md +58 -0
  76. package/docs/ja/parts/page-shell.md +1 -1
  77. package/docs/ja/parts/progress-circle.md +34 -0
  78. package/docs/ja/parts/sparkline.md +1 -1
  79. package/docs/ja/parts/tracker.md +32 -0
  80. package/docs/ja/routing.md +8 -84
  81. package/docs/ja/ui/alert-dialog.md +41 -0
  82. package/docs/ja/ui/avatar.md +31 -0
  83. package/docs/ja/ui/combobox.md +74 -0
  84. package/docs/ja/ui/drawer.md +41 -0
  85. package/docs/ja/ui/field.md +42 -0
  86. package/docs/ja/ui/hover-card.md +21 -0
  87. package/docs/ja/ui/kbd.md +16 -0
  88. package/docs/ja/ui/pagination.md +36 -0
  89. package/docs/ja/ui/radio-group.md +21 -0
  90. package/docs/ja/ui/toast.md +46 -0
  91. package/docs/ja/ui-and-theming.md +14 -7
  92. package/package.json +18 -12
  93. package/registry/ui/accordion.tsx +74 -0
  94. package/registry/ui/alert-dialog.tsx +189 -0
  95. package/registry/ui/alert.tsx +78 -0
  96. package/registry/ui/app-shell.tsx +281 -0
  97. package/registry/ui/area-chart.tsx +1015 -0
  98. package/registry/ui/avatar.tsx +110 -0
  99. package/registry/ui/badge.tsx +54 -0
  100. package/registry/ui/bar-chart.tsx +1013 -0
  101. package/registry/ui/bar-list.tsx +302 -0
  102. package/registry/ui/breadcrumb.tsx +126 -0
  103. package/registry/ui/button.tsx +60 -0
  104. package/registry/ui/calendar.tsx +221 -0
  105. package/registry/ui/card.tsx +105 -0
  106. package/registry/ui/category-bar.tsx +281 -0
  107. package/registry/ui/checkbox.tsx +28 -0
  108. package/registry/ui/collapsible.tsx +21 -0
  109. package/registry/ui/combobox.tsx +310 -0
  110. package/registry/ui/command.tsx +196 -0
  111. package/registry/ui/dashboard-card.tsx +174 -0
  112. package/registry/ui/data-table.tsx +16 -91
  113. package/registry/ui/date-range-picker.tsx +209 -0
  114. package/registry/ui/dialog.tsx +159 -0
  115. package/registry/ui/donut-chart.tsx +1004 -0
  116. package/registry/ui/drawer.tsx +229 -0
  117. package/registry/ui/dropdown-menu.tsx +272 -0
  118. package/registry/ui/echart.tsx +486 -0
  119. package/registry/ui/field.tsx +240 -0
  120. package/registry/ui/filter-bar.tsx +365 -0
  121. package/registry/ui/funnel-steps.tsx +274 -0
  122. package/registry/ui/hover-card.tsx +52 -0
  123. package/registry/ui/input-group.tsx +158 -0
  124. package/registry/ui/input.tsx +22 -0
  125. package/registry/ui/kbd.tsx +28 -0
  126. package/registry/ui/label.tsx +20 -0
  127. package/registry/ui/line-chart.tsx +1007 -0
  128. package/registry/ui/metric-value.tsx +54 -0
  129. package/registry/ui/multi-select.tsx +226 -0
  130. package/registry/ui/page-shell.tsx +227 -0
  131. package/registry/ui/pagination.tsx +138 -0
  132. package/registry/ui/placeholder.tsx +30 -0
  133. package/registry/ui/popover.tsx +90 -0
  134. package/registry/ui/progress-circle.tsx +272 -0
  135. package/registry/ui/progress.tsx +83 -0
  136. package/registry/ui/radio-group.tsx +39 -0
  137. package/registry/ui/scroll-area.tsx +55 -0
  138. package/registry/ui/searchable-select.tsx +209 -0
  139. package/registry/ui/section-header.tsx +41 -0
  140. package/registry/ui/segmented-control.tsx +71 -0
  141. package/registry/ui/select.tsx +253 -0
  142. package/registry/ui/separator.tsx +25 -0
  143. package/registry/ui/sheet.tsx +137 -0
  144. package/registry/ui/sidebar.tsx +723 -0
  145. package/registry/ui/skeleton.tsx +15 -0
  146. package/registry/ui/slider.tsx +54 -0
  147. package/registry/ui/sparkline.tsx +155 -0
  148. package/registry/ui/spinner.tsx +12 -0
  149. package/registry/ui/states.tsx +61 -0
  150. package/registry/ui/status-badge.tsx +79 -0
  151. package/registry/ui/switch.tsx +32 -0
  152. package/registry/ui/table.tsx +116 -0
  153. package/registry/ui/tabs.tsx +82 -0
  154. package/registry/ui/textarea.tsx +20 -0
  155. package/registry/ui/toast.tsx +250 -0
  156. package/registry/ui/toggle-group.tsx +89 -0
  157. package/registry/ui/toggle.tsx +45 -0
  158. package/registry/ui/tooltip.tsx +66 -0
  159. package/registry/ui/tracker.tsx +236 -0
  160. package/registry/ui/trend-indicator.tsx +62 -0
  161. package/skills/vantage-add-feature/SKILL.md +9 -7
  162. package/skills/vantage-design/SKILL.md +3 -1
  163. package/skills/vantage-design/references/format.md +1 -1
  164. package/skills/vantage-pitfalls/SKILL.md +5 -1
  165. package/skills/vantage-slide/SKILL.md +17 -0
  166. package/templates/AGENTS.md +10 -1
  167. package/templates/agents/api.md +29 -0
  168. package/templates/agents/csv.md +2 -1
  169. package/templates/agents/doc.md +6 -3
  170. package/templates/agents/page.md +22 -8
  171. package/templates/agents/slide.md +13 -1
  172. package/templates/agents/xlsx.md +2 -1
  173. package/theme.css +51 -1
  174. package/dist/add-EISGSZAH.js +0 -6
  175. package/dist/add-EISGSZAH.js.map +0 -1
  176. package/dist/chunk-3G43C6OL.js.map +0 -1
  177. package/dist/chunk-BCE22JSM.js.map +0 -1
  178. package/dist/chunk-KLEIVDUV.js.map +0 -1
  179. package/dist/chunk-MXI3PZFT.js.map +0 -1
  180. package/dist/chunk-PLST5Q7T.js.map +0 -1
  181. package/dist/dev-NZRLOQCL.js.map +0 -1
  182. package/dist/doctor-VFKEMR54.js.map +0 -1
  183. package/dist/preview-QDCIVVSR.js.map +0 -1
@@ -1,8 +1,9 @@
1
- import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Separator, Button, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useIsMobile, Popover, PopoverTrigger, PopoverContent, Calendar, ToggleGroup, ToggleGroupItem, Badge, SelectGroup, SelectLabel, Collapsible, CollapsibleTrigger, SidebarMenuButton, SidebarMenuBadge, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuItem, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Skeleton, Checkbox } from './chunk-MXI3PZFT.js';
1
+ import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Separator, Tooltip, TooltipTrigger, TooltipContent, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useIsMobile, Popover, PopoverTrigger, PopoverContent, Calendar, ToggleGroup, ToggleGroupItem, Badge, SelectGroup, SelectLabel, Collapsible, CollapsibleTrigger, SidebarMenuButton, SidebarMenuBadge, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuItem, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Skeleton, Checkbox } from './chunk-OB6UBJXF.js';
2
+ import { Button } from './chunk-PXRX5PEC.js';
2
3
  import { cn } from './chunk-A2UUGASH.js';
3
- import { forwardRef, useRef, useState, useEffect, useMemo, useCallback, Fragment, createContext, useId, useContext } from 'react';
4
+ import { forwardRef, useRef, useState, useEffect, useMemo, useCallback, Fragment as Fragment$1, createContext, useId, useContext } from 'react';
4
5
  import { cva } from 'class-variance-authority';
5
- import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
6
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
6
7
  import { Check, Copy, Download, Search, ArrowUp, ArrowDown, ArrowUpDown, Columns3, CalendarIcon, ChevronDownIcon, Minus, ChevronRight, XIcon, LoaderIcon, CheckIcon, ChevronDown, X } from 'lucide-react';
7
8
  import * as echarts from 'echarts';
8
9
  import { flexRender, useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
@@ -20,17 +21,22 @@ var PageShellHeader = forwardRef(
20
21
  {
21
22
  ref,
22
23
  "data-slot": "page-shell-header",
23
- className: cn(
24
- "grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-6 border-b px-6 py-12",
25
- className
26
- ),
24
+ className: cn("flex flex-wrap items-start gap-x-4 gap-y-6 border-b px-6 py-12", className),
27
25
  ...props
28
26
  }
29
27
  )
30
28
  );
31
29
  PageShellHeader.displayName = "PageShellHeader";
32
30
  var PageShellHeading = forwardRef(
33
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "page-shell-heading", className: cn("min-w-0", className), ...props })
31
+ ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
32
+ "div",
33
+ {
34
+ ref,
35
+ "data-slot": "page-shell-heading",
36
+ className: cn("min-w-0 grow basis-80", className),
37
+ ...props
38
+ }
39
+ )
34
40
  );
35
41
  PageShellHeading.displayName = "PageShellHeading";
36
42
  var PageShellTitle = forwardRef(
@@ -63,7 +69,7 @@ var PageShellHeaderEnd = forwardRef(
63
69
  {
64
70
  ref,
65
71
  "data-slot": "page-shell-header-end",
66
- className: cn("flex shrink-0 flex-col items-end gap-2", className),
72
+ className: cn("flex max-w-full shrink-0 flex-col flex-wrap items-end gap-2", className),
67
73
  ...props
68
74
  }
69
75
  )
@@ -100,7 +106,7 @@ var PageShellSummary = forwardRef(
100
106
  ref,
101
107
  "data-slot": "page-shell-summary",
102
108
  className: cn(
103
- "col-span-full grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
109
+ "grid basis-full grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
104
110
  className
105
111
  ),
106
112
  ...props
@@ -480,15 +486,17 @@ function DashboardCardPreset({
480
486
  footer && /* @__PURE__ */ jsx(DashboardCardFooter, { className: footerClassName, children: footer })
481
487
  ] });
482
488
  }
483
-
484
- // src/components/chart-theme.ts
485
489
  var SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"];
486
490
  var normalizeContext;
491
+ var ZRENDER_COLOR_RE = /^(?:#[0-9a-f]{6}|rgba?\()/i;
487
492
  function toCanvasColor(value) {
488
493
  const raw = value.trim();
489
494
  if (!raw) return null;
490
495
  if (normalizeContext === void 0) {
491
- normalizeContext = document.createElement("canvas").getContext("2d");
496
+ const canvas = document.createElement("canvas");
497
+ canvas.width = 1;
498
+ canvas.height = 1;
499
+ normalizeContext = canvas.getContext("2d", { willReadFrequently: true });
492
500
  }
493
501
  const ctx = normalizeContext;
494
502
  if (!ctx) return raw;
@@ -497,7 +505,12 @@ function toCanvasColor(value) {
497
505
  const onBlack = ctx.fillStyle;
498
506
  ctx.fillStyle = "#ffffff";
499
507
  ctx.fillStyle = raw;
500
- return onBlack === ctx.fillStyle ? onBlack : null;
508
+ if (onBlack !== ctx.fillStyle || typeof onBlack !== "string") return null;
509
+ if (ZRENDER_COLOR_RE.test(onBlack)) return onBlack;
510
+ ctx.clearRect(0, 0, 1, 1);
511
+ ctx.fillRect(0, 0, 1, 1);
512
+ const [r = 0, g = 0, b = 0, a = 0] = ctx.getImageData(0, 0, 1, 1).data;
513
+ return a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 1e3) / 1e3})`;
501
514
  }
502
515
  function readChartTokens(el) {
503
516
  if (typeof document === "undefined") return null;
@@ -597,6 +610,36 @@ function buildChartTheme(tokens) {
597
610
  }
598
611
  };
599
612
  }
613
+ function useChartTokens() {
614
+ const [tokens, setTokens] = useState(() => readChartTokens());
615
+ useEffect(() => {
616
+ const sync = () => {
617
+ setTokens((prev) => {
618
+ const next = readChartTokens();
619
+ return sameChartTokens(prev, next) ? prev : next;
620
+ });
621
+ };
622
+ sync();
623
+ return watchChartTokens(sync);
624
+ }, []);
625
+ return tokens;
626
+ }
627
+ var SERIES_TOKEN_NAME_RE = /^chart-([1-5])$/;
628
+ var CSS_VAR_RE = /^var\(\s*(--[\w-]+)\s*(?:,\s*(.+))?\)$/;
629
+ function resolveChartColors(colors, tokens) {
630
+ return colors.map((color) => {
631
+ const token = SERIES_TOKEN_NAME_RE.exec(color.trim());
632
+ if (token) return tokens?.series[Number(token[1]) - 1] ?? "";
633
+ if (typeof document === "undefined") return color;
634
+ let value = color.trim();
635
+ const cssVar = CSS_VAR_RE.exec(value);
636
+ if (cssVar) {
637
+ const styles = getComputedStyle(document.documentElement);
638
+ value = styles.getPropertyValue(cssVar[1]).trim() || (cssVar[2] ?? "").trim();
639
+ }
640
+ return toCanvasColor(value) ?? "";
641
+ });
642
+ }
600
643
  var EChart = forwardRef(function EChart2({
601
644
  option,
602
645
  height,
@@ -629,6 +672,10 @@ var EChart = forwardRef(function EChart2({
629
672
  const container = containerRef.current;
630
673
  if (!container) return;
631
674
  const inst = echarts.init(container, resolvedTheme, { renderer: "canvas" });
675
+ container.dataset.rendering = "";
676
+ inst.on("finished", () => {
677
+ delete container.dataset.rendering;
678
+ });
632
679
  setInstance(inst);
633
680
  const observer = new ResizeObserver(() => inst.resize());
634
681
  observer.observe(container);
@@ -639,6 +686,7 @@ var EChart = forwardRef(function EChart2({
639
686
  }, [resolvedTheme]);
640
687
  useEffect(() => {
641
688
  if (!instance) return;
689
+ if (containerRef.current) containerRef.current.dataset.rendering = "";
642
690
  instance.setOption(option, { notMerge: true, lazyUpdate: true });
643
691
  }, [instance, option]);
644
692
  useEffect(() => {
@@ -735,6 +783,945 @@ var EChart = forwardRef(function EChart2({
735
783
  );
736
784
  });
737
785
  EChart.displayName = "EChart";
786
+
787
+ // src/components/chart-utils.ts
788
+ var DEFAULT_CHART_COLORS = [
789
+ "chart-1",
790
+ "chart-2",
791
+ "chart-3",
792
+ "chart-4",
793
+ "chart-5"
794
+ ];
795
+ var TOKEN_NAME_RE = /^chart-[1-5]$/;
796
+ function chartColorToCss(color) {
797
+ const value = color.trim();
798
+ return TOKEN_NAME_RE.test(value) ? `var(--${value})` : value;
799
+ }
800
+ function chartColorAt(colors, i) {
801
+ const palette = colors && colors.length > 0 ? colors : DEFAULT_CHART_COLORS;
802
+ return palette[i % palette.length];
803
+ }
804
+ function chartColorsFor(colors, count) {
805
+ return Array.from({ length: count }, (_, i) => chartColorAt(colors, i));
806
+ }
807
+ function tintCss(cssColor, percent) {
808
+ return `color-mix(in oklab, ${cssColor} ${percent}%, transparent)`;
809
+ }
810
+ var numberFormat = new Intl.NumberFormat("ja-JP", { maximumFractionDigits: 2 });
811
+ var defaultValueFormatter = (value) => numberFormat.format(value);
812
+ function clamp(value, min, max) {
813
+ return Math.min(max, Math.max(min, value));
814
+ }
815
+ function sortBarListData(data, sortOrder) {
816
+ const rows = [...data];
817
+ if (sortOrder === "ascending") rows.sort((a, b) => a.value - b.value);
818
+ else if (sortOrder === "descending") rows.sort((a, b) => b.value - a.value);
819
+ return rows;
820
+ }
821
+ function barListWidths(values) {
822
+ const max = Math.max(0, ...values);
823
+ if (max === 0) return values.map(() => 0);
824
+ return values.map((v) => v <= 0 ? 0 : Math.max(1, v / max * 100));
825
+ }
826
+ function categoryBarSegments(values) {
827
+ const clean = values.map((v) => Number.isFinite(v) && v > 0 ? v : 0);
828
+ const total = clean.reduce((sum, v) => sum + v, 0);
829
+ let running = 0;
830
+ return clean.map((v) => {
831
+ const start = total === 0 ? 0 : running / total * 100;
832
+ running += v;
833
+ return { width: total === 0 ? 0 : v / total * 100, start, end: running };
834
+ });
835
+ }
836
+ function categoryBarLabels(values, minGap = 8) {
837
+ const segments = categoryBarSegments(values).filter((s) => s.width > 0);
838
+ if (segments.length === 0) return [];
839
+ const labels = [{ position: 0, value: 0 }];
840
+ segments.forEach((s, i) => {
841
+ const label = { position: s.start + s.width, value: s.end };
842
+ const prev = labels[labels.length - 1];
843
+ if (label.position - prev.position >= minGap) labels.push(label);
844
+ else if (i === segments.length - 1 && labels.length > 1) labels[labels.length - 1] = label;
845
+ });
846
+ return labels;
847
+ }
848
+ function categoryBarMarkerPosition(value, values) {
849
+ const total = values.reduce((sum, v) => sum + (Number.isFinite(v) && v > 0 ? v : 0), 0);
850
+ if (total === 0) return 0;
851
+ return clamp(value / total * 100, 0, 100);
852
+ }
853
+ function categoryBarMarkerSegment(value, values) {
854
+ const segments = categoryBarSegments(values);
855
+ const index = segments.findIndex((s) => s.width > 0 && value <= s.end);
856
+ if (index !== -1) return index;
857
+ for (let i = segments.length - 1; i >= 0; i--) if (segments[i].width > 0) return i;
858
+ return 0;
859
+ }
860
+ function progressCircleGeometry(value, max, radius, strokeWidth) {
861
+ const ratio = max > 0 && Number.isFinite(value) ? clamp(value / max, 0, 1) : 0;
862
+ const normalizedRadius = Math.max(0, radius - strokeWidth / 2);
863
+ const circumference = 2 * Math.PI * normalizedRadius;
864
+ return { size: radius * 2, normalizedRadius, circumference, offset: circumference * (1 - ratio), ratio };
865
+ }
866
+ function cellNumber(value) {
867
+ if (typeof value === "number") return Number.isFinite(value) ? value : null;
868
+ if (typeof value === "bigint") return Number(value);
869
+ if (typeof value === "string" && value.trim() !== "") {
870
+ const n = Number(value);
871
+ return Number.isFinite(n) ? n : null;
872
+ }
873
+ return null;
874
+ }
875
+ function cartesianSeriesValues(data, categories, type = "default") {
876
+ const raw = categories.map((category) => data.map((row) => cellNumber(row[category])));
877
+ if (type !== "percent") return raw;
878
+ return raw.map(
879
+ (values) => values.map((value, i) => {
880
+ if (value === null) return null;
881
+ const total = categories.reduce((sum, _, k) => sum + Math.abs(raw[k][i] ?? 0), 0);
882
+ return total === 0 ? 0 : Math.abs(value) / total * 100;
883
+ })
884
+ );
885
+ }
886
+ function withAlpha(color, alpha) {
887
+ const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());
888
+ if (hex) {
889
+ const h = hex[1];
890
+ const full = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
891
+ const n = Number.parseInt(full, 16);
892
+ return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${alpha})`;
893
+ }
894
+ const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(color.trim());
895
+ if (rgb) return `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})`;
896
+ return color;
897
+ }
898
+ var HTML_ESCAPES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
899
+ function escapeHtml(value) {
900
+ return value.replace(/[&<>"']/g, (c) => HTML_ESCAPES[c]);
901
+ }
902
+ function tooltipHtml(title, rows, valueFormatter) {
903
+ const lines = rows.map(
904
+ (row) => `<div style="display:flex;align-items:center;gap:8px;line-height:20px"><span style="display:inline-block;width:8px;height:8px;border-radius:9999px;background:${escapeHtml(row.color)}"></span><span style="flex:1;opacity:.8">${escapeHtml(row.name)}</span><span style="font-weight:500;font-variant-numeric:tabular-nums;margin-left:12px">${row.value === null ? "\u2013" : escapeHtml(valueFormatter(row.value))}</span></div>`
905
+ );
906
+ return `<div style="font-weight:500;margin-bottom:4px">${escapeHtml(title)}</div>${lines.join("")}`;
907
+ }
908
+ var DIMMED = 0.3;
909
+ function buildCartesianOption(cfg) {
910
+ const {
911
+ kind,
912
+ data,
913
+ index,
914
+ categories,
915
+ palette,
916
+ valueFormatter,
917
+ type = "default",
918
+ layout = "horizontal",
919
+ curveType = "linear",
920
+ fill = "gradient",
921
+ connectNulls = false,
922
+ showLegend = true,
923
+ showTooltip = true,
924
+ showGridLines = true,
925
+ showXAxis = true,
926
+ showYAxis = true,
927
+ startEndOnly = false,
928
+ yAxisWidth,
929
+ minValue,
930
+ maxValue,
931
+ autoMinValue = false,
932
+ allowDecimals = true,
933
+ xAxisLabel,
934
+ yAxisLabel,
935
+ barCategoryGap,
936
+ showDots = false,
937
+ active = null
938
+ } = cfg;
939
+ const labels = data.map((row) => String(row[index] ?? ""));
940
+ const values = cartesianSeriesValues(data, categories, kind === "line" ? "default" : type);
941
+ const stacked = kind !== "line" && type !== "default";
942
+ const percent = kind !== "line" && type === "percent";
943
+ const horizontalBars = kind === "bar" && layout === "vertical";
944
+ const last = labels.length - 1;
945
+ const series = categories.map((category, c) => {
946
+ const color = palette[c] || void 0;
947
+ const dimSeries = active !== null && active.category !== category;
948
+ if (kind === "bar") {
949
+ const radius = stacked ? 0 : horizontalBars ? [0, 3, 3, 0] : [3, 3, 0, 0];
950
+ return {
951
+ type: "bar",
952
+ name: category,
953
+ stack: stacked ? "total" : void 0,
954
+ barCategoryGap,
955
+ itemStyle: { color, borderRadius: radius },
956
+ emphasis: { focus: "series" },
957
+ data: values[c].map(
958
+ (value, i) => active !== null && !(active.category === category && active.index === i) ? { value, itemStyle: { opacity: DIMMED } } : value
959
+ )
960
+ };
961
+ }
962
+ const areaStyle = kind !== "area" || fill === "none" ? void 0 : fill === "solid" || !color ? { opacity: fill === "solid" ? 0.3 : 0.2 } : {
963
+ color: {
964
+ type: "linear",
965
+ x: 0,
966
+ y: 0,
967
+ x2: 0,
968
+ y2: 1,
969
+ colorStops: [
970
+ { offset: 0, color: withAlpha(color, 0.35) },
971
+ { offset: 1, color: withAlpha(color, 0) }
972
+ ]
973
+ }
974
+ };
975
+ return {
976
+ type: "line",
977
+ name: category,
978
+ stack: stacked ? "total" : void 0,
979
+ smooth: curveType === "smooth",
980
+ step: curveType === "step" ? "middle" : void 0,
981
+ connectNulls,
982
+ symbol: "circle",
983
+ symbolSize: 6,
984
+ showSymbol: showDots || labels.length === 1,
985
+ lineStyle: { width: 2, color, opacity: dimSeries ? DIMMED : 1 },
986
+ itemStyle: { color, opacity: dimSeries ? DIMMED : 1 },
987
+ areaStyle: areaStyle && dimSeries ? { ...areaStyle, opacity: DIMMED * 0.3 } : areaStyle,
988
+ emphasis: { focus: "series" },
989
+ data: values[c]
990
+ };
991
+ });
992
+ const categoryAxis = {
993
+ type: "category",
994
+ data: labels,
995
+ show: horizontalBars ? showYAxis : showXAxis,
996
+ boundaryGap: kind === "bar",
997
+ inverse: horizontalBars,
998
+ axisTick: { show: false },
999
+ axisLabel: {
1000
+ hideOverlap: true,
1001
+ interval: startEndOnly ? (i) => i === 0 || i === last : "auto",
1002
+ ...horizontalBars && yAxisWidth != null ? { width: yAxisWidth, overflow: "truncate" } : {}
1003
+ },
1004
+ name: horizontalBars ? yAxisLabel : xAxisLabel,
1005
+ nameLocation: "middle",
1006
+ nameGap: horizontalBars ? (yAxisWidth ?? 48) + 8 : 28
1007
+ };
1008
+ const valueAxis = {
1009
+ type: "value",
1010
+ show: horizontalBars ? showXAxis : showYAxis,
1011
+ min: percent ? 0 : minValue,
1012
+ max: percent ? 100 : maxValue,
1013
+ scale: autoMinValue && minValue == null,
1014
+ minInterval: allowDecimals ? void 0 : 1,
1015
+ axisLine: { show: false },
1016
+ axisTick: { show: false },
1017
+ splitLine: { show: showGridLines },
1018
+ axisLabel: {
1019
+ formatter: percent ? (v) => `${v}%` : (v) => valueFormatter(v),
1020
+ ...!horizontalBars && yAxisWidth != null ? { width: yAxisWidth, overflow: "truncate" } : {}
1021
+ },
1022
+ name: horizontalBars ? xAxisLabel : yAxisLabel,
1023
+ nameLocation: "middle",
1024
+ nameGap: horizontalBars ? 28 : (yAxisWidth ?? 48) + 8
1025
+ };
1026
+ return {
1027
+ animationDuration: 400,
1028
+ legend: {
1029
+ show: showLegend,
1030
+ top: 0,
1031
+ right: 0,
1032
+ type: "scroll",
1033
+ icon: "circle",
1034
+ itemWidth: 8,
1035
+ itemHeight: 8,
1036
+ itemGap: 16
1037
+ },
1038
+ grid: {
1039
+ top: showLegend ? 36 : 12,
1040
+ // Lines start and end on the outermost ticks, so the last label hangs past the plot.
1041
+ right: kind === "bar" ? 12 : 24,
1042
+ bottom: xAxisLabel ? 24 : 4,
1043
+ left: yAxisLabel ? 24 : 4,
1044
+ containLabel: true
1045
+ },
1046
+ tooltip: {
1047
+ show: showTooltip,
1048
+ trigger: "axis",
1049
+ axisPointer: { type: kind === "bar" ? "shadow" : "line" },
1050
+ formatter: (params) => {
1051
+ const list = Array.isArray(params) ? params : [params];
1052
+ const i = list[0]?.dataIndex ?? 0;
1053
+ const row = data[i] ?? {};
1054
+ return tooltipHtml(
1055
+ String(row[index] ?? ""),
1056
+ list.map((p) => ({
1057
+ name: p.seriesName ?? "",
1058
+ color: typeof p.color === "string" ? p.color : "currentColor",
1059
+ value: cellNumber(row[p.seriesName ?? ""])
1060
+ })),
1061
+ valueFormatter
1062
+ );
1063
+ }
1064
+ },
1065
+ xAxis: horizontalBars ? valueAxis : categoryAxis,
1066
+ yAxis: horizontalBars ? categoryAxis : valueAxis,
1067
+ series
1068
+ };
1069
+ }
1070
+ function donutTotal(data, value) {
1071
+ return data.reduce((sum, row) => {
1072
+ const n = cellNumber(row[value]);
1073
+ return n !== null && n > 0 ? sum + n : sum;
1074
+ }, 0);
1075
+ }
1076
+ function buildDonutOption(cfg) {
1077
+ const { data, category, value, palette, valueFormatter, variant = "donut", showTooltip = true, active = null } = cfg;
1078
+ return {
1079
+ animationDuration: 400,
1080
+ tooltip: {
1081
+ show: showTooltip,
1082
+ trigger: "item",
1083
+ formatter: (params) => {
1084
+ const p = params;
1085
+ const n = cellNumber(p.value);
1086
+ const share = typeof p.percent === "number" ? ` (${p.percent.toFixed(1)}%)` : "";
1087
+ return tooltipHtml(
1088
+ `${p.name ?? ""}${share}`,
1089
+ [{ name: value, color: typeof p.color === "string" ? p.color : "currentColor", value: n }],
1090
+ valueFormatter
1091
+ );
1092
+ }
1093
+ },
1094
+ series: [
1095
+ {
1096
+ type: "pie",
1097
+ radius: variant === "donut" ? ["72%", "100%"] : [0, "100%"],
1098
+ center: ["50%", "50%"],
1099
+ avoidLabelOverlap: true,
1100
+ label: { show: false },
1101
+ labelLine: { show: false },
1102
+ // A hairline gap between slices instead of a border — no background colour to match.
1103
+ padAngle: data.length > 1 ? 1 : 0,
1104
+ itemStyle: { borderRadius: variant === "donut" ? 2 : 0 },
1105
+ emphasis: { scale: true, scaleSize: 4 },
1106
+ data: data.map((row, i) => {
1107
+ const name = String(row[category] ?? "");
1108
+ const color = palette[i] || void 0;
1109
+ const n = cellNumber(row[value]);
1110
+ return {
1111
+ name,
1112
+ value: n !== null && n > 0 ? n : 0,
1113
+ itemStyle: { color, opacity: active !== null && active !== name ? DIMMED : 1 }
1114
+ };
1115
+ })
1116
+ }
1117
+ ]
1118
+ };
1119
+ }
1120
+ function nextChartSelection(current, category, index) {
1121
+ return current && current.category === category && current.index === index ? null : { category, index };
1122
+ }
1123
+ function chartSelectionPayload(selection, data, eventType) {
1124
+ if (!selection) return null;
1125
+ return { ...data[selection.index], eventType, categoryClicked: selection.category };
1126
+ }
1127
+ function useChartSelection(data, onValueChange, eventType) {
1128
+ const [active, setActive] = useState(null);
1129
+ const latest = useRef({ data, onValueChange, active });
1130
+ latest.current = { data, onValueChange, active };
1131
+ const interactive = onValueChange !== void 0;
1132
+ const onEvents = useMemo(() => {
1133
+ if (!interactive) return void 0;
1134
+ return {
1135
+ click: (raw) => {
1136
+ const p = raw;
1137
+ if (p.componentType !== "series" || typeof p.dataIndex !== "number") return;
1138
+ const category = eventType === "slice" ? p.name ?? "" : p.seriesName ?? "";
1139
+ const next = nextChartSelection(latest.current.active, category, p.dataIndex);
1140
+ latest.current.active = next;
1141
+ setActive(next);
1142
+ latest.current.onValueChange?.(chartSelectionPayload(next, latest.current.data, eventType));
1143
+ }
1144
+ };
1145
+ }, [interactive, eventType]);
1146
+ return { active: interactive ? active : null, onEvents };
1147
+ }
1148
+ var AreaChart = forwardRef(function AreaChart2({
1149
+ data,
1150
+ index,
1151
+ categories,
1152
+ colors,
1153
+ valueFormatter = defaultValueFormatter,
1154
+ type = "default",
1155
+ curveType = "linear",
1156
+ fill = "gradient",
1157
+ connectNulls = false,
1158
+ showLegend = true,
1159
+ showTooltip = true,
1160
+ showGridLines = true,
1161
+ showXAxis = true,
1162
+ showYAxis = true,
1163
+ startEndOnly = false,
1164
+ yAxisWidth,
1165
+ minValue,
1166
+ maxValue,
1167
+ autoMinValue = false,
1168
+ allowDecimals = true,
1169
+ xAxisLabel,
1170
+ yAxisLabel,
1171
+ onValueChange,
1172
+ height,
1173
+ loading,
1174
+ ariaLabel,
1175
+ className
1176
+ }, ref) {
1177
+ const tokens = useChartTokens();
1178
+ const palette = useMemo(
1179
+ () => resolveChartColors(chartColorsFor(colors, categories.length), tokens),
1180
+ [colors, categories.length, tokens]
1181
+ );
1182
+ const { active, onEvents } = useChartSelection(data, onValueChange, "dot");
1183
+ const option = useMemo(
1184
+ () => buildCartesianOption({
1185
+ kind: "area",
1186
+ data,
1187
+ index,
1188
+ categories,
1189
+ palette,
1190
+ valueFormatter,
1191
+ type,
1192
+ curveType,
1193
+ fill,
1194
+ connectNulls,
1195
+ showLegend,
1196
+ showTooltip,
1197
+ showGridLines,
1198
+ showXAxis,
1199
+ showYAxis,
1200
+ startEndOnly,
1201
+ yAxisWidth,
1202
+ minValue,
1203
+ maxValue,
1204
+ autoMinValue,
1205
+ allowDecimals,
1206
+ xAxisLabel,
1207
+ yAxisLabel,
1208
+ showDots: onValueChange !== void 0,
1209
+ active
1210
+ }),
1211
+ [
1212
+ data,
1213
+ index,
1214
+ categories,
1215
+ palette,
1216
+ valueFormatter,
1217
+ type,
1218
+ curveType,
1219
+ fill,
1220
+ connectNulls,
1221
+ showLegend,
1222
+ showTooltip,
1223
+ showGridLines,
1224
+ showXAxis,
1225
+ showYAxis,
1226
+ startEndOnly,
1227
+ yAxisWidth,
1228
+ minValue,
1229
+ maxValue,
1230
+ autoMinValue,
1231
+ allowDecimals,
1232
+ xAxisLabel,
1233
+ yAxisLabel,
1234
+ onValueChange,
1235
+ active
1236
+ ]
1237
+ );
1238
+ return /* @__PURE__ */ jsx(
1239
+ EChart,
1240
+ {
1241
+ ref,
1242
+ option,
1243
+ onEvents,
1244
+ height,
1245
+ loading,
1246
+ ariaLabel: ariaLabel ?? `${categories.join("\u30FB")}\u306E\u9762\u30B0\u30E9\u30D5`,
1247
+ className: cn("h-80", className)
1248
+ }
1249
+ );
1250
+ });
1251
+ AreaChart.displayName = "AreaChart";
1252
+ var BarChart = forwardRef(function BarChart2({
1253
+ data,
1254
+ index,
1255
+ categories,
1256
+ colors,
1257
+ valueFormatter = defaultValueFormatter,
1258
+ type = "default",
1259
+ layout = "horizontal",
1260
+ barCategoryGap,
1261
+ showLegend = true,
1262
+ showTooltip = true,
1263
+ showGridLines = true,
1264
+ showXAxis = true,
1265
+ showYAxis = true,
1266
+ startEndOnly = false,
1267
+ yAxisWidth,
1268
+ minValue,
1269
+ maxValue,
1270
+ autoMinValue = false,
1271
+ allowDecimals = true,
1272
+ xAxisLabel,
1273
+ yAxisLabel,
1274
+ onValueChange,
1275
+ height,
1276
+ loading,
1277
+ ariaLabel,
1278
+ className
1279
+ }, ref) {
1280
+ const tokens = useChartTokens();
1281
+ const palette = useMemo(
1282
+ () => resolveChartColors(chartColorsFor(colors, categories.length), tokens),
1283
+ [colors, categories.length, tokens]
1284
+ );
1285
+ const { active, onEvents } = useChartSelection(data, onValueChange, "bar");
1286
+ const option = useMemo(
1287
+ () => buildCartesianOption({
1288
+ kind: "bar",
1289
+ data,
1290
+ index,
1291
+ categories,
1292
+ palette,
1293
+ valueFormatter,
1294
+ type,
1295
+ layout,
1296
+ barCategoryGap,
1297
+ showLegend,
1298
+ showTooltip,
1299
+ showGridLines,
1300
+ showXAxis,
1301
+ showYAxis,
1302
+ startEndOnly,
1303
+ yAxisWidth,
1304
+ minValue,
1305
+ maxValue,
1306
+ autoMinValue,
1307
+ allowDecimals,
1308
+ xAxisLabel,
1309
+ yAxisLabel,
1310
+ active
1311
+ }),
1312
+ [
1313
+ data,
1314
+ index,
1315
+ categories,
1316
+ palette,
1317
+ valueFormatter,
1318
+ type,
1319
+ layout,
1320
+ barCategoryGap,
1321
+ showLegend,
1322
+ showTooltip,
1323
+ showGridLines,
1324
+ showXAxis,
1325
+ showYAxis,
1326
+ startEndOnly,
1327
+ yAxisWidth,
1328
+ minValue,
1329
+ maxValue,
1330
+ autoMinValue,
1331
+ allowDecimals,
1332
+ xAxisLabel,
1333
+ yAxisLabel,
1334
+ active
1335
+ ]
1336
+ );
1337
+ return /* @__PURE__ */ jsx(
1338
+ EChart,
1339
+ {
1340
+ ref,
1341
+ option,
1342
+ onEvents,
1343
+ height,
1344
+ loading,
1345
+ ariaLabel: ariaLabel ?? `${categories.join("\u30FB")}\u306E\u68D2\u30B0\u30E9\u30D5`,
1346
+ className: cn("h-80", className)
1347
+ }
1348
+ );
1349
+ });
1350
+ BarChart.displayName = "BarChart";
1351
+ var LineChart = forwardRef(function LineChart2({
1352
+ data,
1353
+ index,
1354
+ categories,
1355
+ colors,
1356
+ valueFormatter = defaultValueFormatter,
1357
+ curveType = "linear",
1358
+ connectNulls = false,
1359
+ showLegend = true,
1360
+ showTooltip = true,
1361
+ showGridLines = true,
1362
+ showXAxis = true,
1363
+ showYAxis = true,
1364
+ startEndOnly = false,
1365
+ yAxisWidth,
1366
+ minValue,
1367
+ maxValue,
1368
+ autoMinValue = false,
1369
+ allowDecimals = true,
1370
+ xAxisLabel,
1371
+ yAxisLabel,
1372
+ onValueChange,
1373
+ height,
1374
+ loading,
1375
+ ariaLabel,
1376
+ className
1377
+ }, ref) {
1378
+ const tokens = useChartTokens();
1379
+ const palette = useMemo(
1380
+ () => resolveChartColors(chartColorsFor(colors, categories.length), tokens),
1381
+ [colors, categories.length, tokens]
1382
+ );
1383
+ const { active, onEvents } = useChartSelection(data, onValueChange, "dot");
1384
+ const option = useMemo(
1385
+ () => buildCartesianOption({
1386
+ kind: "line",
1387
+ data,
1388
+ index,
1389
+ categories,
1390
+ palette,
1391
+ valueFormatter,
1392
+ curveType,
1393
+ connectNulls,
1394
+ showLegend,
1395
+ showTooltip,
1396
+ showGridLines,
1397
+ showXAxis,
1398
+ showYAxis,
1399
+ startEndOnly,
1400
+ yAxisWidth,
1401
+ minValue,
1402
+ maxValue,
1403
+ autoMinValue,
1404
+ allowDecimals,
1405
+ xAxisLabel,
1406
+ yAxisLabel,
1407
+ showDots: onValueChange !== void 0,
1408
+ active
1409
+ }),
1410
+ [
1411
+ data,
1412
+ index,
1413
+ categories,
1414
+ palette,
1415
+ valueFormatter,
1416
+ curveType,
1417
+ connectNulls,
1418
+ showLegend,
1419
+ showTooltip,
1420
+ showGridLines,
1421
+ showXAxis,
1422
+ showYAxis,
1423
+ startEndOnly,
1424
+ yAxisWidth,
1425
+ minValue,
1426
+ maxValue,
1427
+ autoMinValue,
1428
+ allowDecimals,
1429
+ xAxisLabel,
1430
+ yAxisLabel,
1431
+ onValueChange,
1432
+ active
1433
+ ]
1434
+ );
1435
+ return /* @__PURE__ */ jsx(
1436
+ EChart,
1437
+ {
1438
+ ref,
1439
+ option,
1440
+ onEvents,
1441
+ height,
1442
+ loading,
1443
+ ariaLabel: ariaLabel ?? `${categories.join("\u30FB")}\u306E\u6298\u308C\u7DDA\u30B0\u30E9\u30D5`,
1444
+ className: cn("h-80", className)
1445
+ }
1446
+ );
1447
+ });
1448
+ LineChart.displayName = "LineChart";
1449
+ var DonutChart = forwardRef(function DonutChart2({
1450
+ data,
1451
+ category,
1452
+ value,
1453
+ colors,
1454
+ variant = "donut",
1455
+ valueFormatter = defaultValueFormatter,
1456
+ label,
1457
+ showLabel = true,
1458
+ showTooltip = true,
1459
+ onValueChange,
1460
+ loading,
1461
+ ariaLabel,
1462
+ className
1463
+ }, ref) {
1464
+ const tokens = useChartTokens();
1465
+ const palette = useMemo(
1466
+ () => resolveChartColors(chartColorsFor(colors, data.length), tokens),
1467
+ [colors, data.length, tokens]
1468
+ );
1469
+ const { active, onEvents } = useChartSelection(data, onValueChange, "slice");
1470
+ const option = useMemo(
1471
+ () => buildDonutOption({
1472
+ data,
1473
+ category,
1474
+ value,
1475
+ palette,
1476
+ valueFormatter,
1477
+ variant,
1478
+ showTooltip,
1479
+ active: active?.category ?? null
1480
+ }),
1481
+ [data, category, value, palette, valueFormatter, variant, showTooltip, active]
1482
+ );
1483
+ const centerLabel = label ?? valueFormatter(donutTotal(data, value));
1484
+ return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "donut-chart", className: cn("relative size-40", className), children: [
1485
+ /* @__PURE__ */ jsx(
1486
+ EChart,
1487
+ {
1488
+ option,
1489
+ onEvents,
1490
+ loading,
1491
+ ariaLabel: ariaLabel ?? `${category}\u5225\u306E${value}`,
1492
+ className: "h-full"
1493
+ }
1494
+ ),
1495
+ variant === "donut" && showLabel && /* @__PURE__ */ jsx(
1496
+ "div",
1497
+ {
1498
+ "data-slot": "donut-chart-label",
1499
+ className: "pointer-events-none absolute inset-0 flex items-center justify-center px-[18%] text-center text-lg font-semibold text-foreground tabular-nums",
1500
+ children: centerLabel
1501
+ }
1502
+ )
1503
+ ] });
1504
+ });
1505
+ DonutChart.displayName = "DonutChart";
1506
+ var BarList = forwardRef(function BarList2({
1507
+ data,
1508
+ valueFormatter = defaultValueFormatter,
1509
+ sortOrder = "descending",
1510
+ color = "chart-1",
1511
+ showAnimation = false,
1512
+ onValueChange,
1513
+ className,
1514
+ ...props
1515
+ }, ref) {
1516
+ const [mounted, setMounted] = useState(!showAnimation);
1517
+ useEffect(() => {
1518
+ if (!showAnimation) return;
1519
+ const frame = requestAnimationFrame(() => setMounted(true));
1520
+ return () => cancelAnimationFrame(frame);
1521
+ }, [showAnimation]);
1522
+ const rows = sortBarListData(data, sortOrder);
1523
+ const widths = barListWidths(rows.map((row) => row.value));
1524
+ return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "bar-list", className: cn("flex justify-between gap-6 text-sm", className), ...props, children: [
1525
+ /* @__PURE__ */ jsx("div", { className: "relative min-w-0 flex-1 space-y-1.5", children: rows.map((row, i) => {
1526
+ const css = chartColorToCss(row.color ?? color);
1527
+ const label = row.href ? /* @__PURE__ */ jsx(
1528
+ "a",
1529
+ {
1530
+ href: row.href,
1531
+ target: /^https?:\/\//.test(row.href) ? "_blank" : void 0,
1532
+ rel: /^https?:\/\//.test(row.href) ? "noreferrer" : void 0,
1533
+ onClick: (event) => event.stopPropagation(),
1534
+ className: "truncate hover:underline",
1535
+ children: row.name
1536
+ }
1537
+ ) : /* @__PURE__ */ jsx("span", { className: "truncate", children: row.name });
1538
+ const content = /* @__PURE__ */ jsxs(Fragment, { children: [
1539
+ /* @__PURE__ */ jsx(
1540
+ "span",
1541
+ {
1542
+ "aria-hidden": "true",
1543
+ "data-slot": "bar-list-bar",
1544
+ className: cn(
1545
+ "absolute inset-y-0 left-0 rounded-sm",
1546
+ showAnimation && "transition-[width] duration-700 ease-out"
1547
+ ),
1548
+ style: { width: `${mounted ? widths[i] : 0}%`, background: tintCss(css, 28) }
1549
+ }
1550
+ ),
1551
+ /* @__PURE__ */ jsx("span", { className: "relative flex min-w-0 items-center px-2 text-foreground", children: label })
1552
+ ] });
1553
+ const rowClass = "relative flex h-8 w-full items-center rounded-sm";
1554
+ return onValueChange ? /* @__PURE__ */ jsx(
1555
+ "button",
1556
+ {
1557
+ type: "button",
1558
+ "data-slot": "bar-list-row",
1559
+ onClick: () => onValueChange(row),
1560
+ className: cn(
1561
+ rowClass,
1562
+ "text-left outline-none hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring"
1563
+ ),
1564
+ children: content
1565
+ },
1566
+ row.key ?? row.name
1567
+ ) : /* @__PURE__ */ jsx("div", { "data-slot": "bar-list-row", className: rowClass, children: content }, row.key ?? row.name);
1568
+ }) }),
1569
+ /* @__PURE__ */ jsx("div", { className: "shrink-0 space-y-1.5 text-right", children: rows.map((row) => /* @__PURE__ */ jsx(
1570
+ "div",
1571
+ {
1572
+ className: "flex h-8 items-center justify-end font-medium text-foreground tabular-nums",
1573
+ children: valueFormatter(row.value)
1574
+ },
1575
+ row.key ?? row.name
1576
+ )) })
1577
+ ] });
1578
+ });
1579
+ BarList.displayName = "BarList";
1580
+ var CategoryBar = forwardRef(function CategoryBar2({ values, colors, marker, showLabels = true, valueFormatter = defaultValueFormatter, className, ...props }, ref) {
1581
+ const segments = categoryBarSegments(values);
1582
+ const labels = showLabels ? categoryBarLabels(values) : [];
1583
+ const markerPosition = marker ? categoryBarMarkerPosition(marker.value, values) : 0;
1584
+ const markerColor = marker ? chartColorToCss(chartColorAt(colors, categoryBarMarkerSegment(marker.value, values))) : "";
1585
+ const markerDot = /* @__PURE__ */ jsx(
1586
+ "span",
1587
+ {
1588
+ className: "block h-4 w-1 rounded-full ring-2 ring-background",
1589
+ style: { background: markerColor }
1590
+ }
1591
+ );
1592
+ return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "category-bar", className: cn("w-full", className), ...props, children: [
1593
+ showLabels && labels.length > 0 && /* @__PURE__ */ jsx("div", { "data-slot": "category-bar-labels", className: "relative mb-2 h-4 text-xs text-muted-foreground tabular-nums", children: labels.map((label, i) => /* @__PURE__ */ jsx(
1594
+ "span",
1595
+ {
1596
+ className: cn(
1597
+ "absolute top-0",
1598
+ label.position <= 0 ? "left-0" : label.position >= 100 ? "right-0" : "-translate-x-1/2"
1599
+ ),
1600
+ style: label.position > 0 && label.position < 100 ? { left: `${label.position}%` } : void 0,
1601
+ children: valueFormatter(label.value)
1602
+ },
1603
+ i
1604
+ )) }),
1605
+ /* @__PURE__ */ jsxs("div", { className: "relative flex h-2 w-full items-center", children: [
1606
+ /* @__PURE__ */ jsx("div", { className: "flex h-full w-full gap-0.5 overflow-hidden rounded-full", children: segments.map(
1607
+ (segment, i) => segment.width > 0 ? /* @__PURE__ */ jsx(
1608
+ "span",
1609
+ {
1610
+ "data-slot": "category-bar-segment",
1611
+ className: "h-full",
1612
+ style: { flex: `${segment.width} 1 0%`, background: chartColorToCss(chartColorAt(colors, i)) }
1613
+ },
1614
+ i
1615
+ ) : null
1616
+ ) }),
1617
+ marker && /* @__PURE__ */ jsx(
1618
+ "div",
1619
+ {
1620
+ "data-slot": "category-bar-marker",
1621
+ className: cn(
1622
+ "absolute -translate-x-1/2",
1623
+ marker.showAnimation && "transition-[left] duration-700 ease-out"
1624
+ ),
1625
+ style: { left: `${markerPosition}%` },
1626
+ children: marker.tooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
1627
+ /* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx("span", { "aria-label": marker.tooltip, className: "block py-1" }), children: markerDot }),
1628
+ /* @__PURE__ */ jsx(TooltipContent, { children: marker.tooltip })
1629
+ ] }) : markerDot
1630
+ }
1631
+ )
1632
+ ] })
1633
+ ] });
1634
+ });
1635
+ CategoryBar.displayName = "CategoryBar";
1636
+ var ProgressCircle = forwardRef(function ProgressCircle2({
1637
+ value = 0,
1638
+ max = 100,
1639
+ radius = 32,
1640
+ strokeWidth = 6,
1641
+ color = "chart-1",
1642
+ showAnimation = true,
1643
+ className,
1644
+ children,
1645
+ ...props
1646
+ }, ref) {
1647
+ const [mounted, setMounted] = useState(!showAnimation);
1648
+ useEffect(() => {
1649
+ if (!showAnimation) return;
1650
+ const frame = requestAnimationFrame(() => setMounted(true));
1651
+ return () => cancelAnimationFrame(frame);
1652
+ }, [showAnimation]);
1653
+ const { size, normalizedRadius, circumference, offset, ratio } = progressCircleGeometry(value, max, radius, strokeWidth);
1654
+ const css = chartColorToCss(color);
1655
+ return /* @__PURE__ */ jsxs(
1656
+ "div",
1657
+ {
1658
+ ref,
1659
+ "data-slot": "progress-circle",
1660
+ role: "progressbar",
1661
+ "aria-valuemin": 0,
1662
+ "aria-valuemax": max,
1663
+ "aria-valuenow": value,
1664
+ className: cn("relative inline-flex shrink-0 items-center justify-center", className),
1665
+ style: { width: size, height: size },
1666
+ ...props,
1667
+ children: [
1668
+ /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "-rotate-90", "aria-hidden": "true", children: [
1669
+ /* @__PURE__ */ jsx(
1670
+ "circle",
1671
+ {
1672
+ cx: radius,
1673
+ cy: radius,
1674
+ r: normalizedRadius,
1675
+ fill: "none",
1676
+ strokeWidth,
1677
+ style: { stroke: tintCss(css, 20) }
1678
+ }
1679
+ ),
1680
+ ratio > 0 && /* @__PURE__ */ jsx(
1681
+ "circle",
1682
+ {
1683
+ "data-slot": "progress-circle-value",
1684
+ cx: radius,
1685
+ cy: radius,
1686
+ r: normalizedRadius,
1687
+ fill: "none",
1688
+ strokeWidth,
1689
+ strokeLinecap: "round",
1690
+ strokeDasharray: `${circumference} ${circumference}`,
1691
+ strokeDashoffset: mounted ? offset : circumference,
1692
+ className: cn(showAnimation && "transition-[stroke-dashoffset] duration-700 ease-out"),
1693
+ style: { stroke: css }
1694
+ }
1695
+ )
1696
+ ] }),
1697
+ children != null && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm font-medium text-foreground tabular-nums", children })
1698
+ ]
1699
+ }
1700
+ );
1701
+ });
1702
+ ProgressCircle.displayName = "ProgressCircle";
1703
+ var DEFAULT_BLOCK_COLOR = "color-mix(in oklab, var(--muted-foreground) 35%, transparent)";
1704
+ var Tracker = forwardRef(function Tracker2({ data, defaultColor, hoverEffect = true, className, ...props }, ref) {
1705
+ const fallback = defaultColor ? chartColorToCss(defaultColor) : DEFAULT_BLOCK_COLOR;
1706
+ return /* @__PURE__ */ jsx("div", { ref, "data-slot": "tracker", className: cn("flex h-8 w-full gap-px", className), ...props, children: data.map((block, i) => {
1707
+ const blockClass = cn(
1708
+ "h-full min-w-0 flex-1 rounded-[1px] first:rounded-l-[4px] last:rounded-r-[4px]",
1709
+ hoverEffect && "transition-opacity hover:opacity-60"
1710
+ );
1711
+ const style = { background: block.color ? chartColorToCss(block.color) : fallback };
1712
+ return block.tooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
1713
+ /* @__PURE__ */ jsx(
1714
+ TooltipTrigger,
1715
+ {
1716
+ delay: 0,
1717
+ render: /* @__PURE__ */ jsx("div", { "data-slot": "tracker-block", "aria-label": block.tooltip, className: blockClass, style })
1718
+ }
1719
+ ),
1720
+ /* @__PURE__ */ jsx(TooltipContent, { children: block.tooltip })
1721
+ ] }, block.key ?? i) : /* @__PURE__ */ jsx("div", { "data-slot": "tracker-block", className: blockClass, style }, block.key ?? i);
1722
+ }) });
1723
+ });
1724
+ Tracker.displayName = "Tracker";
738
1725
  var DEFAULT_COLORS = [
739
1726
  "bg-chart-1",
740
1727
  "bg-chart-2",
@@ -877,7 +1864,7 @@ var FunnelSteps = forwardRef(function FunnelSteps2({
877
1864
  }
878
1865
  } : {};
879
1866
  const barInteractionClasses = isClickable ? "cursor-pointer hover:brightness-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none" : void 0;
880
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1867
+ return /* @__PURE__ */ jsxs(Fragment$1, { children: [
881
1868
  isHorizontal ? /* @__PURE__ */ jsxs(
882
1869
  "div",
883
1870
  {
@@ -1008,7 +1995,7 @@ var Sparkline = forwardRef(function Sparkline2({
1008
1995
  className: cn("overflow-visible", className),
1009
1996
  ...props,
1010
1997
  children: [
1011
- variant === "line" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
1998
+ variant === "line" && /* @__PURE__ */ jsxs(Fragment, { children: [
1012
1999
  area && /* @__PURE__ */ jsx(
1013
2000
  "path",
1014
2001
  {
@@ -1414,7 +2401,7 @@ function DataTablePreset({
1414
2401
  bulkActions,
1415
2402
  ...tableProps
1416
2403
  }) {
1417
- const toolbarSlot = toolbar || enableColumnVisibility ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
2404
+ const toolbarSlot = toolbar || enableColumnVisibility ? /* @__PURE__ */ jsxs(Fragment, { children: [
1418
2405
  toolbar,
1419
2406
  enableColumnVisibility && /* @__PURE__ */ jsx(DataTableColumnVisibility, { columnLabels })
1420
2407
  ] }) : void 0;
@@ -1570,7 +2557,7 @@ function FilterBarActiveChips({ filters, className }) {
1570
2557
  };
1571
2558
  const activeChips = getActiveChips();
1572
2559
  if (activeChips.length === 0) return null;
1573
- return /* @__PURE__ */ jsx(Fragment$1, { children: activeChips.map((chip) => /* @__PURE__ */ jsxs(
2560
+ return /* @__PURE__ */ jsx(Fragment, { children: activeChips.map((chip) => /* @__PURE__ */ jsxs(
1574
2561
  Badge,
1575
2562
  {
1576
2563
  variant: "secondary",
@@ -1901,7 +2888,7 @@ function OptionCommandList({
1901
2888
  ));
1902
2889
  return /* @__PURE__ */ jsxs(Command, { shouldFilter: !onSearch, children: [
1903
2890
  /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, onValueChange: onSearch }),
1904
- /* @__PURE__ */ jsx(CommandList, { children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx(LoaderIcon, { className: "size-4 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
2891
+ /* @__PURE__ */ jsx(CommandList, { children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx(LoaderIcon, { className: "size-4 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1905
2892
  /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
1906
2893
  isGroupedOptions(options) ? options.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: renderOptions(group.options) }, group.label)) : renderOptions(options)
1907
2894
  ] }) })
@@ -2036,7 +3023,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
2036
3023
  className
2037
3024
  ),
2038
3025
  children: [
2039
- /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
3026
+ /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2040
3027
  visibleBadges.map((option) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "shrink-0 gap-1 pr-1", children: [
2041
3028
  /* @__PURE__ */ jsx("span", { className: "max-w-[120px] truncate", children: option.label }),
2042
3029
  /* @__PURE__ */ jsx(
@@ -2216,6 +3203,6 @@ var Placeholder = forwardRef(function Placeholder2({ className, ...props }, ref)
2216
3203
  });
2217
3204
  Placeholder.displayName = "Placeholder";
2218
3205
 
2219
- export { AppShell, DashboardCard, DashboardCardAction, DashboardCardContent, DashboardCardDescription, DashboardCardFooter, DashboardCardHeader, DashboardCardPreset, DashboardCardSkeleton, DashboardCardTitle, DataTable, DataTableColumnVisibility, DataTableContent, DataTablePagination, DataTablePreset, DataTableToolbar, DateRangePicker, EChart, FilterBar, FilterBarActiveChips, FilterBarClearButton, FilterBarMultiSelect, FilterBarPreset, FilterBarSelect, FunnelSteps, MetricUnit, MetricValue, MultiSelect, PageShell, PageShellActions, PageShellContent, PageShellDescription, PageShellHeader, PageShellHeaderEnd, PageShellHeading, PageShellMeta, PageShellSummary, PageShellSummaryCard, PageShellTitle, Placeholder, SearchableSelect, SectionHeader, SegmentedControl, Sparkline, StatusBadge, TrendIndicator, defaultPresets, flattenOptions, funnelStepsVariants, isGroupedOptions, metricValueVariants, pageShellSummaryCardVariants, useDataTable };
2220
- //# sourceMappingURL=chunk-PLST5Q7T.js.map
2221
- //# sourceMappingURL=chunk-PLST5Q7T.js.map
3206
+ export { AppShell, AreaChart, BarChart, BarList, CategoryBar, DashboardCard, DashboardCardAction, DashboardCardContent, DashboardCardDescription, DashboardCardFooter, DashboardCardHeader, DashboardCardPreset, DashboardCardSkeleton, DashboardCardTitle, DataTable, DataTableColumnVisibility, DataTableContent, DataTablePagination, DataTablePreset, DataTableToolbar, DateRangePicker, DonutChart, EChart, FilterBar, FilterBarActiveChips, FilterBarClearButton, FilterBarMultiSelect, FilterBarPreset, FilterBarSelect, FunnelSteps, LineChart, MetricUnit, MetricValue, MultiSelect, PageShell, PageShellActions, PageShellContent, PageShellDescription, PageShellHeader, PageShellHeaderEnd, PageShellHeading, PageShellMeta, PageShellSummary, PageShellSummaryCard, PageShellTitle, Placeholder, ProgressCircle, SearchableSelect, SectionHeader, SegmentedControl, Sparkline, StatusBadge, Tracker, TrendIndicator, defaultPresets, flattenOptions, funnelStepsVariants, isGroupedOptions, metricValueVariants, pageShellSummaryCardVariants, useDataTable };
3207
+ //# sourceMappingURL=chunk-AG6RZ2RR.js.map
3208
+ //# sourceMappingURL=chunk-AG6RZ2RR.js.map