@sia.soul/sia-react-ui 0.1.38 → 0.1.40
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.
- package/dist/{chunk-DQ7WGTKA.js → chunk-CEZ4GW3X.js} +97 -44
- package/dist/{core-BzBVS9md.d.cts → core-BAHoW7_e.d.cts} +2 -2
- package/dist/{core-CBURAp9W.d.ts → core-fn8h4yRg.d.ts} +2 -2
- package/dist/core.cjs +254 -201
- package/dist/core.css +63 -23
- package/dist/core.d.cts +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/core.js +1 -1
- package/dist/index.cjs +536 -483
- package/dist/index.css +63 -23
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -11011,6 +11011,7 @@ function Tag({
|
|
|
11011
11011
|
// src/components/Tabs.tsx
|
|
11012
11012
|
var import_react45 = require("react");
|
|
11013
11013
|
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
11014
|
+
var import_react46 = require("react");
|
|
11014
11015
|
function Tabs({
|
|
11015
11016
|
items,
|
|
11016
11017
|
activeKey,
|
|
@@ -11045,6 +11046,42 @@ function Tabs({
|
|
|
11045
11046
|
const sliding = ["capsule", "line", "underline", "tech", "tech-line"].includes(type);
|
|
11046
11047
|
const listRef = (0, import_react45.useRef)(null);
|
|
11047
11048
|
const indicatorRef = (0, import_react45.useRef)(null);
|
|
11049
|
+
const moreRef = (0, import_react45.useRef)(null);
|
|
11050
|
+
const [overflow, setOverflow] = (0, import_react45.useState)({ count: items.length, width: 0 });
|
|
11051
|
+
const [moreOpen, setMoreOpen] = (0, import_react45.useState)(false);
|
|
11052
|
+
const visibleCount = resolvedOrientation === "horizontal" ? overflow.count : items.length;
|
|
11053
|
+
const hiddenItems = items.slice(visibleCount);
|
|
11054
|
+
(0, import_react45.useLayoutEffect)(() => {
|
|
11055
|
+
const list = listRef.current;
|
|
11056
|
+
if (!list || resolvedOrientation !== "horizontal") return;
|
|
11057
|
+
const entries = Array.from(list.children).filter((node) => node instanceof HTMLElement && node.hasAttribute("data-tab-entry"));
|
|
11058
|
+
const measure = () => {
|
|
11059
|
+
const css = getComputedStyle(list);
|
|
11060
|
+
const gap = parseFloat(css.columnGap) || 0;
|
|
11061
|
+
const padding = (parseFloat(css.paddingLeft) || 0) + (parseFloat(css.paddingRight) || 0);
|
|
11062
|
+
const widths = entries.map((node) => node.getBoundingClientRect().width);
|
|
11063
|
+
const total = widths.reduce((sum, width2) => sum + width2, 0) + gap * Math.max(0, widths.length - 1);
|
|
11064
|
+
const available = Math.max(0, list.clientWidth - padding);
|
|
11065
|
+
let count = widths.length;
|
|
11066
|
+
if (total > available + 0.5) {
|
|
11067
|
+
const moreWidth = moreRef.current?.getBoundingClientRect().width ?? 36;
|
|
11068
|
+
let used = moreWidth;
|
|
11069
|
+
count = 0;
|
|
11070
|
+
for (const width2 of widths) {
|
|
11071
|
+
if (used + gap + width2 > available + 0.5) break;
|
|
11072
|
+
used += gap + width2;
|
|
11073
|
+
count++;
|
|
11074
|
+
}
|
|
11075
|
+
}
|
|
11076
|
+
const width = Math.ceil(total + padding + (parseFloat(css.borderLeftWidth) || 0) + (parseFloat(css.borderRightWidth) || 0));
|
|
11077
|
+
setOverflow((previous) => previous.count === count && previous.width === width ? previous : { count, width });
|
|
11078
|
+
};
|
|
11079
|
+
measure();
|
|
11080
|
+
const observer = new ResizeObserver(measure);
|
|
11081
|
+
observer.observe(list);
|
|
11082
|
+
entries.forEach((entry) => observer.observe(entry));
|
|
11083
|
+
return () => observer.disconnect();
|
|
11084
|
+
}, [items, type, size, closable, resolvedOrientation, tabBarTitle, tabBarExtraContent]);
|
|
11048
11085
|
const [contentState, setContentState] = (0, import_react45.useState)(() => ({ key: selectedKey, visited: /* @__PURE__ */ new Set([selectedKey]) }));
|
|
11049
11086
|
const settledKeyRef = (0, import_react45.useRef)(selectedKey);
|
|
11050
11087
|
const afterChangeRef = (0, import_react45.useRef)(onAfterChange);
|
|
@@ -11059,13 +11096,14 @@ function Tabs({
|
|
|
11059
11096
|
function updateIndicator() {
|
|
11060
11097
|
if (!list || !indicator) return;
|
|
11061
11098
|
const active = list.querySelector('[role="tab"][aria-selected="true"]');
|
|
11062
|
-
if (!active) {
|
|
11099
|
+
if (!active || active.closest('[data-tab-hidden="true"]')) {
|
|
11063
11100
|
indicator.style.visibility = "hidden";
|
|
11064
11101
|
return;
|
|
11065
11102
|
}
|
|
11066
11103
|
const listRect = list.getBoundingClientRect();
|
|
11067
11104
|
const rect = active.getBoundingClientRect();
|
|
11068
|
-
|
|
11105
|
+
const currentRect = active.getBoundingClientRect();
|
|
11106
|
+
indicator.style.transform = `translate(${currentRect.left - listRect.left - list.clientLeft + list.scrollLeft}px, ${currentRect.top - listRect.top - list.clientTop + list.scrollTop}px)`;
|
|
11069
11107
|
indicator.style.width = `${rect.width}px`;
|
|
11070
11108
|
indicator.style.height = `${rect.height}px`;
|
|
11071
11109
|
indicator.style.visibility = "visible";
|
|
@@ -11079,7 +11117,7 @@ function Tabs({
|
|
|
11079
11117
|
observer.observe(list);
|
|
11080
11118
|
list.querySelectorAll('[role="tab"]').forEach((tab) => observer.observe(tab));
|
|
11081
11119
|
return () => observer.disconnect();
|
|
11082
|
-
}, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable]);
|
|
11120
|
+
}, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable, visibleCount]);
|
|
11083
11121
|
(0, import_react45.useEffect)(() => {
|
|
11084
11122
|
let cancelled = false;
|
|
11085
11123
|
let frame = 0;
|
|
@@ -11113,7 +11151,8 @@ function Tabs({
|
|
|
11113
11151
|
}
|
|
11114
11152
|
function focusAndSelect(key) {
|
|
11115
11153
|
selectTab(key);
|
|
11116
|
-
|
|
11154
|
+
if (items.findIndex((item) => item.key === key) >= visibleCount) moreRef.current?.focus();
|
|
11155
|
+
else document.getElementById(`${baseId}-tab-${key}`)?.focus();
|
|
11117
11156
|
}
|
|
11118
11157
|
function handleKeyDown(event, key) {
|
|
11119
11158
|
const previousKey = resolvedOrientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
|
|
@@ -11139,49 +11178,49 @@ function Tabs({
|
|
|
11139
11178
|
tabBarTitle,
|
|
11140
11179
|
type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M0 39.25 H5 Q8 39.25 10 35.25 L28 3.75 Q29 1.75 32 1.75", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }) : null
|
|
11141
11180
|
] }) : null,
|
|
11142
|
-
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { ref: listRef, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
|
|
11181
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { ref: listRef, style: resolvedOrientation === "horizontal" && overflow.width ? { width: overflow.width } : void 0, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
|
|
11143
11182
|
sliding ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-tabs__indicator-shape", "aria-hidden": "true" }) : null }, type) : null,
|
|
11144
|
-
items.map((item) => {
|
|
11183
|
+
items.map((item, index) => {
|
|
11145
11184
|
const selected = item.key === selectedKey;
|
|
11146
11185
|
const canClose = item.closable ?? closable;
|
|
11147
|
-
const tabNode = /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
|
|
11148
|
-
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
11149
|
-
"button",
|
|
11150
|
-
{
|
|
11151
|
-
id: `${baseId}-tab-${item.key}`,
|
|
11152
|
-
type: "button",
|
|
11153
|
-
className: "sia-tabs__tab",
|
|
11154
|
-
role: "tab",
|
|
11155
|
-
"aria-selected": selected,
|
|
11156
|
-
"aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
|
|
11157
|
-
tabIndex: selected ? 0 : -1,
|
|
11158
|
-
disabled: item.disabled,
|
|
11159
|
-
onClick: () => selectTab(item.key),
|
|
11160
|
-
onKeyDown: (event) => handleKeyDown(event, item.key),
|
|
11161
|
-
children: [
|
|
11162
|
-
type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-tabs__tab-shape", "aria-hidden": "true" }) : null,
|
|
11163
|
-
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
|
|
11164
|
-
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: item.label })
|
|
11165
|
-
]
|
|
11166
|
-
}
|
|
11167
|
-
),
|
|
11168
|
-
canClose ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
11169
|
-
"button",
|
|
11170
|
-
{
|
|
11171
|
-
type: "button",
|
|
11172
|
-
className: "sia-tabs__close",
|
|
11173
|
-
"aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
|
|
11174
|
-
disabled: item.disabled,
|
|
11175
|
-
onClick: () => onEdit?.(item.key, "remove"),
|
|
11176
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "close", size: 12 })
|
|
11177
|
-
}
|
|
11178
|
-
) : null
|
|
11179
|
-
] }, item.key);
|
|
11180
11186
|
const contextMenuItems = typeof tabContextMenu === "function" ? tabContextMenu(item) : tabContextMenu;
|
|
11187
|
+
const entryProps = { "data-tab-entry": "", "data-tab-hidden": index >= visibleCount, "aria-hidden": index >= visibleCount || void 0 };
|
|
11188
|
+
const tabNode = /* @__PURE__ */ (0, import_react46.createElement)("span", { ...!contextMenuItems?.length ? entryProps : {}, className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, key: item.key }, /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
11189
|
+
"button",
|
|
11190
|
+
{
|
|
11191
|
+
id: `${baseId}-tab-${item.key}`,
|
|
11192
|
+
type: "button",
|
|
11193
|
+
className: "sia-tabs__tab",
|
|
11194
|
+
role: "tab",
|
|
11195
|
+
"aria-selected": selected,
|
|
11196
|
+
"aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
|
|
11197
|
+
tabIndex: selected ? 0 : -1,
|
|
11198
|
+
disabled: item.disabled,
|
|
11199
|
+
onClick: () => selectTab(item.key),
|
|
11200
|
+
onKeyDown: (event) => handleKeyDown(event, item.key),
|
|
11201
|
+
children: [
|
|
11202
|
+
type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-tabs__tab-shape", "aria-hidden": "true" }) : null,
|
|
11203
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
|
|
11204
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: item.label })
|
|
11205
|
+
]
|
|
11206
|
+
}
|
|
11207
|
+
), canClose ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
11208
|
+
"button",
|
|
11209
|
+
{
|
|
11210
|
+
type: "button",
|
|
11211
|
+
className: "sia-tabs__close",
|
|
11212
|
+
"aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
|
|
11213
|
+
disabled: item.disabled,
|
|
11214
|
+
onClick: () => onEdit?.(item.key, "remove"),
|
|
11215
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "close", size: 12 })
|
|
11216
|
+
}
|
|
11217
|
+
) : null);
|
|
11181
11218
|
if (!contextMenuItems?.length) return tabNode;
|
|
11182
|
-
return /* @__PURE__ */ (0,
|
|
11219
|
+
return /* @__PURE__ */ (0, import_react46.createElement)(
|
|
11183
11220
|
Dropdown,
|
|
11184
11221
|
{
|
|
11222
|
+
...entryProps,
|
|
11223
|
+
key: item.key,
|
|
11185
11224
|
className: "sia-tabs__tab-context-trigger",
|
|
11186
11225
|
popupClassName: "sia-tabs__tab-context-menu",
|
|
11187
11226
|
trigger: ["contextMenu"],
|
|
@@ -11190,12 +11229,26 @@ function Tabs({
|
|
|
11190
11229
|
items: contextMenuItems,
|
|
11191
11230
|
selectable: false,
|
|
11192
11231
|
onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
|
|
11193
|
-
}
|
|
11194
|
-
children: tabNode
|
|
11232
|
+
}
|
|
11195
11233
|
},
|
|
11196
|
-
|
|
11234
|
+
tabNode
|
|
11197
11235
|
);
|
|
11198
|
-
})
|
|
11236
|
+
}),
|
|
11237
|
+
resolvedOrientation === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
11238
|
+
Dropdown,
|
|
11239
|
+
{
|
|
11240
|
+
className: "sia-tabs__more",
|
|
11241
|
+
"data-tab-hidden": !hiddenItems.length,
|
|
11242
|
+
trigger: ["hover", "click"],
|
|
11243
|
+
placement: "bottomRight",
|
|
11244
|
+
showTriggerIcon: false,
|
|
11245
|
+
autoFocus: true,
|
|
11246
|
+
open: moreOpen && hiddenItems.length > 0,
|
|
11247
|
+
onOpenChange: setMoreOpen,
|
|
11248
|
+
menu: { items: hiddenItems.map((item) => ({ key: item.key, label: item.label, icon: item.icon, disabled: item.disabled })), selectedKeys: [selectedKey], onClick: (info) => selectTab(info.key) },
|
|
11249
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { ref: moreRef, variant: "text", icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "more-horizontal" }), "aria-label": "\u66F4\u591A\u9009\u9879\u5361", onKeyDown: (event) => handleKeyDown(event, selectedKey), className: hiddenItems.some((item) => item.key === selectedKey) ? "is-active" : void 0 })
|
|
11250
|
+
}
|
|
11251
|
+
) : null
|
|
11199
11252
|
] }),
|
|
11200
11253
|
tabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
|
|
11201
11254
|
] }),
|
|
@@ -11226,9 +11279,9 @@ function Tabs({
|
|
|
11226
11279
|
}
|
|
11227
11280
|
|
|
11228
11281
|
// src/components/Treemap.tsx
|
|
11229
|
-
var import_react46 = require("react");
|
|
11230
|
-
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
11231
11282
|
var import_react47 = require("react");
|
|
11283
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
11284
|
+
var import_react48 = require("react");
|
|
11232
11285
|
function positiveValue(value) {
|
|
11233
11286
|
return Number.isFinite(value) && value > 0 ? value : 1;
|
|
11234
11287
|
}
|
|
@@ -11514,19 +11567,19 @@ function Treemap({
|
|
|
11514
11567
|
style,
|
|
11515
11568
|
...props
|
|
11516
11569
|
}) {
|
|
11517
|
-
const containerRef = (0,
|
|
11518
|
-
const [size, setSize] = (0,
|
|
11519
|
-
const [internalExpandedKeys, setInternalExpandedKeys] = (0,
|
|
11520
|
-
const [internalFocusedKey, setInternalFocusedKey] = (0,
|
|
11570
|
+
const containerRef = (0, import_react47.useRef)(null);
|
|
11571
|
+
const [size, setSize] = (0, import_react47.useState)({ width: 0, height: 0 });
|
|
11572
|
+
const [internalExpandedKeys, setInternalExpandedKeys] = (0, import_react47.useState)(() => [...defaultExpandedKeys]);
|
|
11573
|
+
const [internalFocusedKey, setInternalFocusedKey] = (0, import_react47.useState)(defaultFocusedKey);
|
|
11521
11574
|
const currentExpandedKeys = expandedKeys ?? internalExpandedKeys;
|
|
11522
11575
|
const currentFocusedKey = focusedKey === void 0 ? internalFocusedKey : focusedKey;
|
|
11523
|
-
const expandedSet = (0,
|
|
11524
|
-
const focusedNode = (0,
|
|
11576
|
+
const expandedSet = (0, import_react47.useMemo)(() => new Set(currentExpandedKeys), [currentExpandedKeys]);
|
|
11577
|
+
const focusedNode = (0, import_react47.useMemo)(
|
|
11525
11578
|
() => currentFocusedKey ? findNode(data, currentFocusedKey) : null,
|
|
11526
11579
|
[currentFocusedKey, data]
|
|
11527
11580
|
);
|
|
11528
11581
|
const effectiveFocusedNode = focusedNode && expandedSet.has(focusedNode.key) && Boolean(focusedNode.children?.length) ? focusedNode : null;
|
|
11529
|
-
const positions = (0,
|
|
11582
|
+
const positions = (0, import_react47.useMemo)(
|
|
11530
11583
|
() => collectPositions(
|
|
11531
11584
|
effectiveFocusedNode ? [effectiveFocusedNode] : data,
|
|
11532
11585
|
{ x: 0, y: 0, ...size },
|
|
@@ -11541,7 +11594,7 @@ function Treemap({
|
|
|
11541
11594
|
),
|
|
11542
11595
|
[activeKey, data, effectiveFocusedNode, expandedSet, gap, headerHeight, maxVisibleNodes, minTileHeight, minTileWidth, overflowLabel, size]
|
|
11543
11596
|
);
|
|
11544
|
-
(0,
|
|
11597
|
+
(0, import_react47.useEffect)(() => {
|
|
11545
11598
|
const element = containerRef.current;
|
|
11546
11599
|
if (!element) return void 0;
|
|
11547
11600
|
const updateSize = () => {
|
|
@@ -11553,7 +11606,7 @@ function Treemap({
|
|
|
11553
11606
|
observer.observe(element);
|
|
11554
11607
|
return () => observer.disconnect();
|
|
11555
11608
|
}, []);
|
|
11556
|
-
(0,
|
|
11609
|
+
(0, import_react47.useEffect)(() => {
|
|
11557
11610
|
if (!currentFocusedKey || effectiveFocusedNode) return;
|
|
11558
11611
|
if (focusedKey === void 0) setInternalFocusedKey(null);
|
|
11559
11612
|
onFocusedChange?.(null);
|
|
@@ -11601,7 +11654,7 @@ function Treemap({
|
|
|
11601
11654
|
const hasChildren = Boolean(node.hasChildren || node.children?.length);
|
|
11602
11655
|
const title = `${node.label} \xB7 ${String(valueFormatter(node.value, node))}`;
|
|
11603
11656
|
if (expanded) {
|
|
11604
|
-
return /* @__PURE__ */ (0,
|
|
11657
|
+
return /* @__PURE__ */ (0, import_react48.createElement)(
|
|
11605
11658
|
"div",
|
|
11606
11659
|
{
|
|
11607
11660
|
className: `sia-treemap__tile sia-treemap__tile--directory is-expanded${effectiveFocusedNode?.key === node.key ? " is-focused" : ""}${active ? " is-active" : ""}`,
|
|
@@ -11640,7 +11693,7 @@ function Treemap({
|
|
|
11640
11693
|
] })
|
|
11641
11694
|
);
|
|
11642
11695
|
}
|
|
11643
|
-
return /* @__PURE__ */ (0,
|
|
11696
|
+
return /* @__PURE__ */ (0, import_react48.createElement)(
|
|
11644
11697
|
"button",
|
|
11645
11698
|
{
|
|
11646
11699
|
type: "button",
|
|
@@ -11666,13 +11719,13 @@ function Treemap({
|
|
|
11666
11719
|
}
|
|
11667
11720
|
|
|
11668
11721
|
// src/components/Table/TableCellContent.tsx
|
|
11669
|
-
var
|
|
11722
|
+
var import_react49 = require("react");
|
|
11670
11723
|
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
11671
11724
|
function TableCellContent({ children, ellipsis, title }) {
|
|
11672
|
-
const ref = (0,
|
|
11673
|
-
const [overflowing, setOverflowing] = (0,
|
|
11725
|
+
const ref = (0, import_react49.useRef)(null);
|
|
11726
|
+
const [overflowing, setOverflowing] = (0, import_react49.useState)(false);
|
|
11674
11727
|
const customContent = typeof children !== "string" && typeof children !== "number" && children != null;
|
|
11675
|
-
(0,
|
|
11728
|
+
(0, import_react49.useLayoutEffect)(() => {
|
|
11676
11729
|
const element = ref.current;
|
|
11677
11730
|
if (!element || !ellipsis || !customContent) return;
|
|
11678
11731
|
const layouts = [];
|
|
@@ -11704,10 +11757,10 @@ function TableCellContent({ children, ellipsis, title }) {
|
|
|
11704
11757
|
}
|
|
11705
11758
|
|
|
11706
11759
|
// src/components/Table/Table.tsx
|
|
11707
|
-
var
|
|
11760
|
+
var import_react51 = require("react");
|
|
11708
11761
|
|
|
11709
11762
|
// src/components/Table/plugins.tsx
|
|
11710
|
-
var
|
|
11763
|
+
var import_react50 = require("react");
|
|
11711
11764
|
|
|
11712
11765
|
// src/components/Table/utils.ts
|
|
11713
11766
|
var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
|
|
@@ -12385,7 +12438,7 @@ function TableSelectedItemsPanel({
|
|
|
12385
12438
|
onRemove,
|
|
12386
12439
|
onClear
|
|
12387
12440
|
}) {
|
|
12388
|
-
const [showAll, setShowAll] = (0,
|
|
12441
|
+
const [showAll, setShowAll] = (0, import_react50.useState)(false);
|
|
12389
12442
|
const visibleEntries = showAll ? entries : entries.slice(0, maxCount2);
|
|
12390
12443
|
const hiddenCount = Math.max(0, entries.length - visibleEntries.length);
|
|
12391
12444
|
const baseColumnMap = new Map(
|
|
@@ -12784,10 +12837,10 @@ function TableFilterControl({
|
|
|
12784
12837
|
placeholder,
|
|
12785
12838
|
onApply
|
|
12786
12839
|
}) {
|
|
12787
|
-
const [open, setOpen] = (0,
|
|
12788
|
-
const [draft, setDraft] = (0,
|
|
12840
|
+
const [open, setOpen] = (0, import_react50.useState)(false);
|
|
12841
|
+
const [draft, setDraft] = (0, import_react50.useState)(value);
|
|
12789
12842
|
const label = getColumnLabel(column);
|
|
12790
|
-
(0,
|
|
12843
|
+
(0, import_react50.useEffect)(() => {
|
|
12791
12844
|
if (open) setDraft(value);
|
|
12792
12845
|
}, [open, value]);
|
|
12793
12846
|
const apply = (nextValue) => {
|
|
@@ -13212,17 +13265,17 @@ function EditableTableCell({
|
|
|
13212
13265
|
trigger
|
|
13213
13266
|
}) {
|
|
13214
13267
|
const config = typeof editable === "object" ? editable : { type: "input" };
|
|
13215
|
-
const [editValue, setEditValue] = (0,
|
|
13216
|
-
const [saving, setSaving] = (0,
|
|
13217
|
-
const inputRef = (0,
|
|
13218
|
-
const editorRef = (0,
|
|
13219
|
-
const editValueRef = (0,
|
|
13220
|
-
const savingRef = (0,
|
|
13221
|
-
const saveRef = (0,
|
|
13268
|
+
const [editValue, setEditValue] = (0, import_react50.useState)(value);
|
|
13269
|
+
const [saving, setSaving] = (0, import_react50.useState)(false);
|
|
13270
|
+
const inputRef = (0, import_react50.useRef)(null);
|
|
13271
|
+
const editorRef = (0, import_react50.useRef)(null);
|
|
13272
|
+
const editValueRef = (0, import_react50.useRef)(value);
|
|
13273
|
+
const savingRef = (0, import_react50.useRef)(false);
|
|
13274
|
+
const saveRef = (0, import_react50.useRef)(
|
|
13222
13275
|
async () => {
|
|
13223
13276
|
}
|
|
13224
13277
|
);
|
|
13225
|
-
(0,
|
|
13278
|
+
(0, import_react50.useEffect)(() => {
|
|
13226
13279
|
if (!active) return;
|
|
13227
13280
|
editValueRef.current = value;
|
|
13228
13281
|
setEditValue(value);
|
|
@@ -13253,7 +13306,7 @@ function EditableTableCell({
|
|
|
13253
13306
|
}
|
|
13254
13307
|
}
|
|
13255
13308
|
saveRef.current = save;
|
|
13256
|
-
(0,
|
|
13309
|
+
(0, import_react50.useEffect)(() => {
|
|
13257
13310
|
if (!active || config.type === "select" || config.type === "custom") return;
|
|
13258
13311
|
const handleOutsidePointerDown = (event) => {
|
|
13259
13312
|
const target = event.target;
|
|
@@ -13554,15 +13607,15 @@ function ColumnSettingPanel({
|
|
|
13554
13607
|
onClose,
|
|
13555
13608
|
onApply
|
|
13556
13609
|
}) {
|
|
13557
|
-
const [draft, setDraft] = (0,
|
|
13558
|
-
const listRef = (0,
|
|
13559
|
-
const cancelDrag = (0,
|
|
13560
|
-
const [preview, setPreview] = (0,
|
|
13561
|
-
(0,
|
|
13610
|
+
const [draft, setDraft] = (0, import_react50.useState)(items);
|
|
13611
|
+
const listRef = (0, import_react50.useRef)(null);
|
|
13612
|
+
const cancelDrag = (0, import_react50.useRef)(null);
|
|
13613
|
+
const [preview, setPreview] = (0, import_react50.useState)(null);
|
|
13614
|
+
(0, import_react50.useEffect)(() => {
|
|
13562
13615
|
cancelDrag.current?.();
|
|
13563
13616
|
if (open) setDraft(orderColumnSettings(items));
|
|
13564
13617
|
}, [items, open]);
|
|
13565
|
-
(0,
|
|
13618
|
+
(0, import_react50.useEffect)(() => () => cancelDrag.current?.(), []);
|
|
13566
13619
|
const labels = new Map(
|
|
13567
13620
|
flattenTableColumns(columns).map((column) => [
|
|
13568
13621
|
column.key,
|
|
@@ -14080,7 +14133,7 @@ function tableExportText(node) {
|
|
|
14080
14133
|
if (typeof node === "string" || typeof node === "number" || typeof node === "bigint")
|
|
14081
14134
|
return String(node);
|
|
14082
14135
|
if (Array.isArray(node)) return node.map(tableExportText).join("");
|
|
14083
|
-
if ((0,
|
|
14136
|
+
if ((0, import_react50.isValidElement)(node))
|
|
14084
14137
|
return tableExportText(node.props.children);
|
|
14085
14138
|
return "";
|
|
14086
14139
|
}
|
|
@@ -14179,7 +14232,7 @@ var SIZE_ROW_HEIGHT = { small: 28, medium: 36, large: 46 };
|
|
|
14179
14232
|
function getHeaderTitleText(content) {
|
|
14180
14233
|
if (typeof content === "string" || typeof content === "number") return String(content);
|
|
14181
14234
|
if (Array.isArray(content)) return content.map(getHeaderTitleText).join("");
|
|
14182
|
-
if ((0,
|
|
14235
|
+
if ((0, import_react51.isValidElement)(content)) return getHeaderTitleText(content.props.children);
|
|
14183
14236
|
return "";
|
|
14184
14237
|
}
|
|
14185
14238
|
function getColumnDepth(columns) {
|
|
@@ -14263,7 +14316,7 @@ function getTableHorizontalMetrics(viewport, table) {
|
|
|
14263
14316
|
const contentWidth = Math.max(viewport.clientWidth, table?.getBoundingClientRect().width ?? viewport.clientWidth);
|
|
14264
14317
|
return { contentWidth, maxLeft: Math.max(0, contentWidth - viewport.clientWidth) };
|
|
14265
14318
|
}
|
|
14266
|
-
var TableBodyRow = (0,
|
|
14319
|
+
var TableBodyRow = (0, import_react51.memo)(function TableBodyRow2({
|
|
14267
14320
|
row,
|
|
14268
14321
|
rowIndex,
|
|
14269
14322
|
columns,
|
|
@@ -14366,22 +14419,22 @@ function TableInner(props, ref) {
|
|
|
14366
14419
|
style,
|
|
14367
14420
|
...htmlProps
|
|
14368
14421
|
} = props;
|
|
14369
|
-
const rootRef = (0,
|
|
14370
|
-
const scrollRef = (0,
|
|
14371
|
-
const tableRef = (0,
|
|
14422
|
+
const rootRef = (0, import_react51.useRef)(null);
|
|
14423
|
+
const scrollRef = (0, import_react51.useRef)(null);
|
|
14424
|
+
const tableRef = (0, import_react51.useRef)(null);
|
|
14372
14425
|
useScrollbarProximity();
|
|
14373
|
-
const scrollbarDragRef = (0,
|
|
14374
|
-
const [internalLoading, setInternalLoading] = (0,
|
|
14375
|
-
const [scrollTop, setScrollTop] = (0,
|
|
14376
|
-
const [viewportHeight, setViewportHeight] = (0,
|
|
14377
|
-
const [viewportWidth, setViewportWidth] = (0,
|
|
14378
|
-
const [autoColumnWidths, setAutoColumnWidths] = (0,
|
|
14379
|
-
const getRowKey = (0,
|
|
14380
|
-
const builtInResizePlugin = (0,
|
|
14381
|
-
const builtInHighlightPlugin = (0,
|
|
14382
|
-
const builtInCellSelectionPlugin = (0,
|
|
14383
|
-
const builtInIndexPlugin = (0,
|
|
14384
|
-
const activePlugins = (0,
|
|
14426
|
+
const scrollbarDragRef = (0, import_react51.useRef)(null);
|
|
14427
|
+
const [internalLoading, setInternalLoading] = (0, import_react51.useState)(false);
|
|
14428
|
+
const [scrollTop, setScrollTop] = (0, import_react51.useState)(0);
|
|
14429
|
+
const [viewportHeight, setViewportHeight] = (0, import_react51.useState)(420);
|
|
14430
|
+
const [viewportWidth, setViewportWidth] = (0, import_react51.useState)(0);
|
|
14431
|
+
const [autoColumnWidths, setAutoColumnWidths] = (0, import_react51.useState)({});
|
|
14432
|
+
const getRowKey = (0, import_react51.useCallback)((record, index) => typeof rowKey === "function" ? rowKey(record, index) : record[String(rowKey)] ?? index, [rowKey]);
|
|
14433
|
+
const builtInResizePlugin = (0, import_react51.useMemo)(() => createResizePlugin(), []);
|
|
14434
|
+
const builtInHighlightPlugin = (0, import_react51.useMemo)(() => createHighlightPlugin(), []);
|
|
14435
|
+
const builtInCellSelectionPlugin = (0, import_react51.useMemo)(() => createCellSelectionPlugin(), []);
|
|
14436
|
+
const builtInIndexPlugin = (0, import_react51.useMemo)(() => createIndexPlugin(), []);
|
|
14437
|
+
const activePlugins = (0, import_react51.useMemo)(() => {
|
|
14385
14438
|
const plugins = providedPlugins.filter((plugin) => (resizable || plugin.id !== "resize") && (cellSelection || plugin.id !== "cellSelection") && (showIndex || plugin.id !== "index"));
|
|
14386
14439
|
if (!plugins.some((plugin) => plugin.id === "highlight")) plugins.push(builtInHighlightPlugin);
|
|
14387
14440
|
if (resizable && !plugins.some((plugin) => plugin.id === "resize")) plugins.push(builtInResizePlugin);
|
|
@@ -14389,19 +14442,19 @@ function TableInner(props, ref) {
|
|
|
14389
14442
|
if (showIndex && !plugins.some((plugin) => plugin.id === "index")) plugins.push(builtInIndexPlugin);
|
|
14390
14443
|
return plugins;
|
|
14391
14444
|
}, [builtInHighlightPlugin, builtInResizePlugin, builtInCellSelectionPlugin, builtInIndexPlugin, providedPlugins, resizable, cellSelection, showIndex]);
|
|
14392
|
-
const sortedPlugins = (0,
|
|
14393
|
-
const pluginsByIdRef = (0,
|
|
14445
|
+
const sortedPlugins = (0, import_react51.useMemo)(() => [...activePlugins].sort((a, b) => (a.order ?? 100) - (b.order ?? 100)), [activePlugins]);
|
|
14446
|
+
const pluginsByIdRef = (0, import_react51.useRef)(/* @__PURE__ */ new Map());
|
|
14394
14447
|
pluginsByIdRef.current = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
|
|
14395
|
-
const [pluginStates, setPluginStates] = (0,
|
|
14448
|
+
const [pluginStates, setPluginStates] = (0, import_react51.useState)(() => Object.fromEntries(
|
|
14396
14449
|
sortedPlugins.map((plugin) => [plugin.id, resolveInitialState(plugin)])
|
|
14397
14450
|
));
|
|
14398
|
-
const pluginApisRef = (0,
|
|
14399
|
-
const contextsRef = (0,
|
|
14400
|
-
const mountedPluginsRef = (0,
|
|
14451
|
+
const pluginApisRef = (0, import_react51.useRef)({});
|
|
14452
|
+
const contextsRef = (0, import_react51.useRef)(/* @__PURE__ */ new Map());
|
|
14453
|
+
const mountedPluginsRef = (0, import_react51.useRef)(/* @__PURE__ */ new Map());
|
|
14401
14454
|
const pipeline = { columns: baseColumns, rows: createTableRows(dataSource, getRowKey) };
|
|
14402
14455
|
const nextApis = {};
|
|
14403
14456
|
const contexts = /* @__PURE__ */ new Map();
|
|
14404
|
-
const setPluginState = (0,
|
|
14457
|
+
const setPluginState = (0, import_react51.useCallback)((pluginId, next) => {
|
|
14405
14458
|
setPluginStates((previous) => {
|
|
14406
14459
|
const plugin = pluginsByIdRef.current.get(pluginId);
|
|
14407
14460
|
const previousValue = previous[pluginId] !== void 0 ? previous[pluginId] : plugin ? resolveInitialState(plugin) : void 0;
|
|
@@ -14454,7 +14507,7 @@ function TableInner(props, ref) {
|
|
|
14454
14507
|
});
|
|
14455
14508
|
pluginApisRef.current = nextApis;
|
|
14456
14509
|
contextsRef.current = contexts;
|
|
14457
|
-
(0,
|
|
14510
|
+
(0, import_react51.useEffect)(() => {
|
|
14458
14511
|
const activePlugins2 = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
|
|
14459
14512
|
for (const [pluginId, mounted] of mountedPluginsRef.current) {
|
|
14460
14513
|
if (activePlugins2.get(pluginId) === mounted.plugin) continue;
|
|
@@ -14466,11 +14519,11 @@ function TableInner(props, ref) {
|
|
|
14466
14519
|
mountedPluginsRef.current.set(plugin.id, { plugin, cleanup: plugin.onMount(contextsRef.current.get(plugin.id)) });
|
|
14467
14520
|
}
|
|
14468
14521
|
}, [sortedPlugins]);
|
|
14469
|
-
(0,
|
|
14522
|
+
(0, import_react51.useEffect)(() => () => {
|
|
14470
14523
|
for (const mounted of mountedPluginsRef.current.values()) mounted.cleanup?.();
|
|
14471
14524
|
mountedPluginsRef.current.clear();
|
|
14472
14525
|
}, []);
|
|
14473
|
-
const updateScrollMetrics = (0,
|
|
14526
|
+
const updateScrollMetrics = (0, import_react51.useCallback)(() => {
|
|
14474
14527
|
const root = rootRef.current;
|
|
14475
14528
|
const element = scrollRef.current;
|
|
14476
14529
|
if (!root || !element) return;
|
|
@@ -14506,7 +14559,7 @@ function TableInner(props, ref) {
|
|
|
14506
14559
|
root.style.setProperty("--sia-table-scrollbar-y-size", `${verticalThumb}px`);
|
|
14507
14560
|
root.style.setProperty("--sia-table-scrollbar-y-position", `${verticalPosition}px`);
|
|
14508
14561
|
}, []);
|
|
14509
|
-
(0,
|
|
14562
|
+
(0, import_react51.useEffect)(() => {
|
|
14510
14563
|
const element = scrollRef.current;
|
|
14511
14564
|
if (!element || typeof ResizeObserver === "undefined") return;
|
|
14512
14565
|
const observer = new ResizeObserver(() => {
|
|
@@ -14519,13 +14572,13 @@ function TableInner(props, ref) {
|
|
|
14519
14572
|
updateScrollMetrics();
|
|
14520
14573
|
return () => observer.disconnect();
|
|
14521
14574
|
}, [updateScrollMetrics]);
|
|
14522
|
-
(0,
|
|
14575
|
+
(0, import_react51.useEffect)(() => {
|
|
14523
14576
|
updateScrollMetrics();
|
|
14524
14577
|
});
|
|
14525
|
-
const orderedColumns = (0,
|
|
14526
|
-
const leafColumns = (0,
|
|
14527
|
-
const headerRows = (0,
|
|
14528
|
-
(0,
|
|
14578
|
+
const orderedColumns = (0, import_react51.useMemo)(() => sortTableColumnsByFixed(pipeline.columns), [pipeline.columns]);
|
|
14579
|
+
const leafColumns = (0, import_react51.useMemo)(() => flattenTableColumns(orderedColumns), [orderedColumns]);
|
|
14580
|
+
const headerRows = (0, import_react51.useMemo)(() => buildHeaderRows(orderedColumns), [orderedColumns]);
|
|
14581
|
+
(0, import_react51.useEffect)(() => {
|
|
14529
14582
|
const autoWidthColumns = leafColumns.filter((column) => column.autoWidth && resizedWidths[column.key] === void 0);
|
|
14530
14583
|
const root = rootRef.current;
|
|
14531
14584
|
if (!root || autoWidthColumns.length === 0) return;
|
|
@@ -14595,20 +14648,20 @@ function TableInner(props, ref) {
|
|
|
14595
14648
|
const bottomSpacer = shouldVirtualize ? Math.max(0, (pipeline.rows.length - endIndex) * rowHeight) : 0;
|
|
14596
14649
|
const toolbarStart = sortedPlugins.map((plugin) => {
|
|
14597
14650
|
const content = plugin.renderToolbarStart?.(getContext(plugin));
|
|
14598
|
-
return content ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
14651
|
+
return content ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react51.Fragment, { children: content }, `toolbar-start-${plugin.id}`) : null;
|
|
14599
14652
|
}).filter(Boolean);
|
|
14600
14653
|
const toolbarEnd = sortedPlugins.map((plugin) => {
|
|
14601
14654
|
const content = plugin.renderToolbarEnd?.(getContext(plugin));
|
|
14602
|
-
return content ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
14655
|
+
return content ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react51.Fragment, { children: content }, `toolbar-end-${plugin.id}`) : null;
|
|
14603
14656
|
}).filter(Boolean);
|
|
14604
14657
|
const summaries = sortedPlugins.flatMap((plugin) => plugin.renderSummary?.(getContext(plugin)) ?? []);
|
|
14605
14658
|
const footers = sortedPlugins.map((plugin) => {
|
|
14606
14659
|
const content = plugin.renderFooter?.(getContext(plugin));
|
|
14607
|
-
return content ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
14660
|
+
return content ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react51.Fragment, { children: content }, `footer-${plugin.id}`) : null;
|
|
14608
14661
|
}).filter(Boolean);
|
|
14609
14662
|
const overlays = sortedPlugins.map((plugin) => {
|
|
14610
14663
|
const content = plugin.renderOverlay?.(getContext(plugin));
|
|
14611
|
-
return content ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
14664
|
+
return content ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react51.Fragment, { children: content }, `overlay-${plugin.id}`) : null;
|
|
14612
14665
|
}).filter(Boolean);
|
|
14613
14666
|
const hasToolbar = toolbarStart.length > 0 || toolbarEnd.length > 0;
|
|
14614
14667
|
const effectiveHeight = height ?? tableHeight ?? (shouldVirtualize ? 420 : void 0);
|
|
@@ -14617,12 +14670,12 @@ function TableInner(props, ref) {
|
|
|
14617
14670
|
height: effectiveHeight,
|
|
14618
14671
|
"--sia-table-header-height": `${headerRows.length * rowHeight}px`
|
|
14619
14672
|
};
|
|
14620
|
-
const handleScroll = (0,
|
|
14673
|
+
const handleScroll = (0, import_react51.useCallback)((event) => {
|
|
14621
14674
|
const element = event.currentTarget;
|
|
14622
14675
|
if (shouldVirtualize) setScrollTop(element.scrollTop);
|
|
14623
14676
|
updateScrollMetrics();
|
|
14624
14677
|
}, [shouldVirtualize, updateScrollMetrics]);
|
|
14625
|
-
const handleScrollbarPointerDown = (0,
|
|
14678
|
+
const handleScrollbarPointerDown = (0, import_react51.useCallback)((axis, event, track = event.currentTarget) => {
|
|
14626
14679
|
const element = scrollRef.current;
|
|
14627
14680
|
const thumb = track.firstElementChild;
|
|
14628
14681
|
if (!element || !thumb || event.button !== 0) return;
|
|
@@ -14651,7 +14704,7 @@ function TableInner(props, ref) {
|
|
|
14651
14704
|
};
|
|
14652
14705
|
if (rootRef.current) rootRef.current.dataset.scrollbarDragging = "true";
|
|
14653
14706
|
}, []);
|
|
14654
|
-
const handleScrollbarPointerMove = (0,
|
|
14707
|
+
const handleScrollbarPointerMove = (0, import_react51.useCallback)((event) => {
|
|
14655
14708
|
const drag = scrollbarDragRef.current;
|
|
14656
14709
|
const element = scrollRef.current;
|
|
14657
14710
|
if (!drag || !element || drag.pointerId !== event.pointerId) return;
|
|
@@ -14660,12 +14713,12 @@ function TableInner(props, ref) {
|
|
|
14660
14713
|
if (drag.axis === "x") element.scrollLeft = nextScroll;
|
|
14661
14714
|
else element.scrollTop = nextScroll;
|
|
14662
14715
|
}, []);
|
|
14663
|
-
const handleScrollbarPointerEnd = (0,
|
|
14716
|
+
const handleScrollbarPointerEnd = (0, import_react51.useCallback)((event) => {
|
|
14664
14717
|
if (scrollbarDragRef.current?.pointerId !== event.pointerId) return;
|
|
14665
14718
|
scrollbarDragRef.current = null;
|
|
14666
14719
|
if (rootRef.current) rootRef.current.dataset.scrollbarDragging = "false";
|
|
14667
14720
|
}, []);
|
|
14668
|
-
(0,
|
|
14721
|
+
(0, import_react51.useImperativeHandle)(ref, () => ({
|
|
14669
14722
|
getRows: () => pipeline.rows.map((row) => row.record),
|
|
14670
14723
|
getColumns: () => pipeline.columns,
|
|
14671
14724
|
getPluginApi: (pluginId) => pluginApisRef.current[pluginId],
|
|
@@ -14936,12 +14989,12 @@ function TableInner(props, ref) {
|
|
|
14936
14989
|
}
|
|
14937
14990
|
);
|
|
14938
14991
|
}
|
|
14939
|
-
var Table2 = (0,
|
|
14992
|
+
var Table2 = (0, import_react51.forwardRef)(TableInner);
|
|
14940
14993
|
|
|
14941
14994
|
// src/components/ThemeSwitch.tsx
|
|
14942
|
-
var
|
|
14995
|
+
var import_react52 = require("react");
|
|
14943
14996
|
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
14944
|
-
var ThemeSwitch = (0,
|
|
14997
|
+
var ThemeSwitch = (0, import_react52.forwardRef)(function ThemeSwitch2({
|
|
14945
14998
|
checked,
|
|
14946
14999
|
onCheckedChange,
|
|
14947
15000
|
lightLabel = "\u4EAE\u8272\u6A21\u5F0F",
|
|
@@ -15035,7 +15088,7 @@ function Breadcrumb({ items, separator = "/", itemRender, className = "", ...pro
|
|
|
15035
15088
|
}
|
|
15036
15089
|
|
|
15037
15090
|
// src/components/Typography.tsx
|
|
15038
|
-
var
|
|
15091
|
+
var import_react53 = require("react");
|
|
15039
15092
|
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
15040
15093
|
function TypographyContent({
|
|
15041
15094
|
as: Tag2 = "span",
|
|
@@ -15055,26 +15108,26 @@ function TypographyContent({
|
|
|
15055
15108
|
className = "",
|
|
15056
15109
|
...props
|
|
15057
15110
|
}) {
|
|
15058
|
-
const contentRef = (0,
|
|
15059
|
-
const editRef = (0,
|
|
15060
|
-
const timer = (0,
|
|
15061
|
-
const [localText, setLocalText] = (0,
|
|
15062
|
-
const [draft, setDraft] = (0,
|
|
15063
|
-
const [editing, setEditing] = (0,
|
|
15064
|
-
const [copied, setCopied] = (0,
|
|
15065
|
-
const [copyError, setCopyError] = (0,
|
|
15066
|
-
const [expanded, setExpanded] = (0,
|
|
15067
|
-
const [overflow, setOverflow] = (0,
|
|
15111
|
+
const contentRef = (0, import_react53.useRef)(null);
|
|
15112
|
+
const editRef = (0, import_react53.useRef)(null);
|
|
15113
|
+
const timer = (0, import_react53.useRef)();
|
|
15114
|
+
const [localText, setLocalText] = (0, import_react53.useState)();
|
|
15115
|
+
const [draft, setDraft] = (0, import_react53.useState)("");
|
|
15116
|
+
const [editing, setEditing] = (0, import_react53.useState)(false);
|
|
15117
|
+
const [copied, setCopied] = (0, import_react53.useState)(false);
|
|
15118
|
+
const [copyError, setCopyError] = (0, import_react53.useState)(false);
|
|
15119
|
+
const [expanded, setExpanded] = (0, import_react53.useState)(false);
|
|
15120
|
+
const [overflow, setOverflow] = (0, import_react53.useState)(false);
|
|
15068
15121
|
const editConfig = typeof editable === "object" ? editable : void 0;
|
|
15069
15122
|
const content = editConfig?.text ?? localText ?? children;
|
|
15070
15123
|
const requestedRows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
|
|
15071
15124
|
const rows = Number.isFinite(requestedRows) ? Math.max(1, Math.floor(requestedRows)) : 1;
|
|
15072
15125
|
const expandable = typeof ellipsis === "object" && ellipsis.expandable;
|
|
15073
|
-
(0,
|
|
15126
|
+
(0, import_react53.useEffect)(() => {
|
|
15074
15127
|
setLocalText(void 0);
|
|
15075
15128
|
}, [children]);
|
|
15076
|
-
(0,
|
|
15077
|
-
(0,
|
|
15129
|
+
(0, import_react53.useEffect)(() => () => clearTimeout(timer.current), []);
|
|
15130
|
+
(0, import_react53.useLayoutEffect)(() => {
|
|
15078
15131
|
const element = contentRef.current;
|
|
15079
15132
|
if (!element || !ellipsis || editing || expanded) return;
|
|
15080
15133
|
const measure = () => setOverflow(element.scrollHeight > element.clientHeight + 1 || element.scrollWidth > element.clientWidth + 1);
|
|
@@ -15192,10 +15245,10 @@ var Typography = Object.assign(TypographyRoot, {
|
|
|
15192
15245
|
});
|
|
15193
15246
|
|
|
15194
15247
|
// src/components/FloatButton.tsx
|
|
15195
|
-
var
|
|
15248
|
+
var import_react54 = require("react");
|
|
15196
15249
|
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
15197
|
-
var GroupShape = (0,
|
|
15198
|
-
var FloatButtonRoot = (0,
|
|
15250
|
+
var GroupShape = (0, import_react54.createContext)(void 0);
|
|
15251
|
+
var FloatButtonRoot = (0, import_react54.forwardRef)(function FloatButton({
|
|
15199
15252
|
icon,
|
|
15200
15253
|
description,
|
|
15201
15254
|
tooltip,
|
|
@@ -15208,7 +15261,7 @@ var FloatButtonRoot = (0, import_react53.forwardRef)(function FloatButton({
|
|
|
15208
15261
|
children,
|
|
15209
15262
|
...props
|
|
15210
15263
|
}, ref) {
|
|
15211
|
-
const groupShape = (0,
|
|
15264
|
+
const groupShape = (0, import_react54.useContext)(GroupShape);
|
|
15212
15265
|
const label = props["aria-label"] ?? (typeof tooltip === "string" ? tooltip : typeof description === "string" ? description : "\u60AC\u6D6E\u64CD\u4F5C");
|
|
15213
15266
|
const button = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
15214
15267
|
"button",
|
|
@@ -15246,10 +15299,10 @@ function FloatButtonGroup({
|
|
|
15246
15299
|
...props
|
|
15247
15300
|
}) {
|
|
15248
15301
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
15249
|
-
const rootRef = (0,
|
|
15250
|
-
const triggerRef = (0,
|
|
15251
|
-
const id = (0,
|
|
15252
|
-
(0,
|
|
15302
|
+
const rootRef = (0, import_react54.useRef)(null);
|
|
15303
|
+
const triggerRef = (0, import_react54.useRef)(null);
|
|
15304
|
+
const id = (0, import_react54.useId)();
|
|
15305
|
+
(0, import_react54.useEffect)(() => {
|
|
15253
15306
|
if (!trigger || !visible) return;
|
|
15254
15307
|
const close = (event) => {
|
|
15255
15308
|
if (!rootRef.current?.contains(event.target)) setVisible(false);
|
|
@@ -15303,8 +15356,8 @@ function FloatButtonGroup({
|
|
|
15303
15356
|
) });
|
|
15304
15357
|
}
|
|
15305
15358
|
function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth", onClick, icon, tooltip = "\u8FD4\u56DE\u9876\u90E8", ...props }) {
|
|
15306
|
-
const [visible, setVisible] = (0,
|
|
15307
|
-
(0,
|
|
15359
|
+
const [visible, setVisible] = (0, import_react54.useState)(false);
|
|
15360
|
+
(0, import_react54.useEffect)(() => {
|
|
15308
15361
|
const element = target ? target() : window;
|
|
15309
15362
|
if (!element) return;
|
|
15310
15363
|
const update = () => setVisible((element === window ? window.scrollY : element.scrollTop) >= visibilityHeight);
|
|
@@ -15328,11 +15381,11 @@ var FloatButton2 = Object.assign(FloatButtonRoot, {
|
|
|
15328
15381
|
});
|
|
15329
15382
|
|
|
15330
15383
|
// src/components/ChartWhirlingLoading.tsx
|
|
15331
|
-
var
|
|
15384
|
+
var import_react55 = require("react");
|
|
15332
15385
|
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
15333
15386
|
function ChartWhirlingLoading({ width = 720, height = 360, text = "\u6570\u636E\u83B7\u53D6\u4E2D", textWidth, frame }) {
|
|
15334
|
-
const [tick, setTick] = (0,
|
|
15335
|
-
(0,
|
|
15387
|
+
const [tick, setTick] = (0, import_react55.useState)(0);
|
|
15388
|
+
(0, import_react55.useEffect)(() => {
|
|
15336
15389
|
if (frame != null) return;
|
|
15337
15390
|
const media = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
15338
15391
|
let timer;
|
|
@@ -15363,20 +15416,20 @@ function ChartWhirlingLoading({ width = 720, height = 360, text = "\u6570\u636E\
|
|
|
15363
15416
|
}
|
|
15364
15417
|
|
|
15365
15418
|
// src/components/SvgMapPlot.tsx
|
|
15366
|
-
var
|
|
15419
|
+
var import_react67 = require("react");
|
|
15367
15420
|
|
|
15368
15421
|
// src/components/ChartBrush.tsx
|
|
15369
|
-
var
|
|
15422
|
+
var import_react56 = require("react");
|
|
15370
15423
|
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
15371
15424
|
function ChartBrush({ bounds, onSelect, onCancel, selectionShape = "band", selectionStyle, minSelectionSize }) {
|
|
15372
|
-
const [vertical, setVertical] = (0,
|
|
15373
|
-
const startY = (0,
|
|
15425
|
+
const [vertical, setVertical] = (0, import_react56.useState)(null);
|
|
15426
|
+
const startY = (0, import_react56.useRef)(0);
|
|
15374
15427
|
const y = (event) => {
|
|
15375
15428
|
const matrix = event.currentTarget.ownerSVGElement?.getScreenCTM();
|
|
15376
15429
|
return matrix ? Math.max(bounds.y, Math.min(bounds.y + bounds.height, new DOMPoint(event.clientX, event.clientY).matrixTransform(matrix.inverse()).y)) : bounds.y;
|
|
15377
15430
|
};
|
|
15378
|
-
const drag = (0,
|
|
15379
|
-
const [selection, setSelection] = (0,
|
|
15431
|
+
const drag = (0, import_react56.useRef)(null);
|
|
15432
|
+
const [selection, setSelection] = (0, import_react56.useState)(null);
|
|
15380
15433
|
const x = (event) => {
|
|
15381
15434
|
const matrix = event.currentTarget.ownerSVGElement?.getScreenCTM();
|
|
15382
15435
|
if (!matrix) return null;
|
|
@@ -15499,7 +15552,7 @@ function appendChartExportHeadings(original, clone, host) {
|
|
|
15499
15552
|
}
|
|
15500
15553
|
|
|
15501
15554
|
// src/components/ChartNodeTimeline.tsx
|
|
15502
|
-
var
|
|
15555
|
+
var import_react58 = require("react");
|
|
15503
15556
|
|
|
15504
15557
|
// src/components/timelinePositions.ts
|
|
15505
15558
|
function timelineRatios(count, dates) {
|
|
@@ -15525,7 +15578,7 @@ function nearestTimelineIndex(ratios, ratio) {
|
|
|
15525
15578
|
}
|
|
15526
15579
|
|
|
15527
15580
|
// src/components/ChartPointMotion.tsx
|
|
15528
|
-
var
|
|
15581
|
+
var import_react57 = require("react");
|
|
15529
15582
|
|
|
15530
15583
|
// src/components/chartMotion.ts
|
|
15531
15584
|
function chartMotionBaseline(points, horizontal = false) {
|
|
@@ -15546,11 +15599,11 @@ function interpolateChartPoints(from, to, progress) {
|
|
|
15546
15599
|
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
15547
15600
|
function ChartPointMotion({ points, enabled, duration, updateDuration = 500, animateInitial = true, easing = "linear", progress, horizontal = false, origin, children }) {
|
|
15548
15601
|
const baseline = (target) => origin ? target.map(() => origin) : chartMotionBaseline(target, horizontal);
|
|
15549
|
-
const [frame, setFrame] = (0,
|
|
15550
|
-
const displayed = (0,
|
|
15551
|
-
const initialized = (0,
|
|
15602
|
+
const [frame, setFrame] = (0, import_react57.useState)(() => enabled && animateInitial ? baseline(points) : points);
|
|
15603
|
+
const displayed = (0, import_react57.useRef)(frame);
|
|
15604
|
+
const initialized = (0, import_react57.useRef)(!animateInitial);
|
|
15552
15605
|
const signature = JSON.stringify(points);
|
|
15553
|
-
(0,
|
|
15606
|
+
(0, import_react57.useEffect)(() => {
|
|
15554
15607
|
const target = points;
|
|
15555
15608
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
15556
15609
|
if (!enabled || progress != null || reduced.matches) {
|
|
@@ -15589,8 +15642,8 @@ function ChartPointMotion({ points, enabled, duration, updateDuration = 500, ani
|
|
|
15589
15642
|
// src/components/ChartNodeTimeline.tsx
|
|
15590
15643
|
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
15591
15644
|
function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, playInterval = 2e3, loop = true, x = 80, y = 520, width = 840 }) {
|
|
15592
|
-
const [playing, setPlaying] = (0,
|
|
15593
|
-
const [draft, setDraft] = (0,
|
|
15645
|
+
const [playing, setPlaying] = (0, import_react58.useState)(autoPlay), dragging = (0, import_react58.useRef)();
|
|
15646
|
+
const [draft, setDraft] = (0, import_react58.useState)(), pending = (0, import_react58.useRef)(), draftRef = (0, import_react58.useRef)();
|
|
15594
15647
|
const shown = draft ?? value;
|
|
15595
15648
|
const cancelPending = () => {
|
|
15596
15649
|
clearTimeout(pending.current);
|
|
@@ -15598,8 +15651,8 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
15598
15651
|
draftRef.current = void 0;
|
|
15599
15652
|
setDraft(void 0);
|
|
15600
15653
|
};
|
|
15601
|
-
(0,
|
|
15602
|
-
(0,
|
|
15654
|
+
(0, import_react58.useEffect)(() => () => clearTimeout(pending.current), []);
|
|
15655
|
+
(0, import_react58.useEffect)(() => {
|
|
15603
15656
|
cancelPending();
|
|
15604
15657
|
}, [value]);
|
|
15605
15658
|
const preview = (index) => {
|
|
@@ -15614,8 +15667,8 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
15614
15667
|
draftRef.current = void 0;
|
|
15615
15668
|
}, 200);
|
|
15616
15669
|
};
|
|
15617
|
-
(0,
|
|
15618
|
-
(0,
|
|
15670
|
+
(0, import_react58.useEffect)(() => setPlaying(autoPlay), [autoPlay]);
|
|
15671
|
+
(0, import_react58.useEffect)(() => {
|
|
15619
15672
|
if (!playing || labels.length < 2) return;
|
|
15620
15673
|
const timer = window.setTimeout(() => {
|
|
15621
15674
|
if (value + 1 < labels.length) onChange(value + 1);
|
|
@@ -15724,7 +15777,7 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
15724
15777
|
}
|
|
15725
15778
|
|
|
15726
15779
|
// src/components/ChartVerticalRange.tsx
|
|
15727
|
-
var
|
|
15780
|
+
var import_react59 = require("react");
|
|
15728
15781
|
|
|
15729
15782
|
// src/components/chartColorRamp.ts
|
|
15730
15783
|
function chartColorRamp(colors, ratio) {
|
|
@@ -15744,16 +15797,16 @@ function chartColorRamp(colors, ratio) {
|
|
|
15744
15797
|
// src/components/ChartVerticalRange.tsx
|
|
15745
15798
|
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
15746
15799
|
function ChartVerticalRange({ min, max, x, y, length, thickness, colors, range, endLabels, onChange, indicatorValue, onHoverRange, realtime = true, readOnly = false }) {
|
|
15747
|
-
const id = (0,
|
|
15748
|
-
const drag = (0,
|
|
15749
|
-
const [draft, setDraft] = (0,
|
|
15750
|
-
const pending = (0,
|
|
15800
|
+
const id = (0, import_react59.useId)().replaceAll(":", "");
|
|
15801
|
+
const drag = (0, import_react59.useRef)();
|
|
15802
|
+
const [draft, setDraft] = (0, import_react59.useState)();
|
|
15803
|
+
const pending = (0, import_react59.useRef)();
|
|
15751
15804
|
const cancel = () => {
|
|
15752
15805
|
drag.current = void 0;
|
|
15753
15806
|
pending.current = void 0;
|
|
15754
15807
|
setDraft(void 0);
|
|
15755
15808
|
};
|
|
15756
|
-
(0,
|
|
15809
|
+
(0, import_react59.useEffect)(() => {
|
|
15757
15810
|
if (!realtime) cancel();
|
|
15758
15811
|
}, [range[0], range[1], min, max, realtime]);
|
|
15759
15812
|
const shown = draft ?? range;
|
|
@@ -15834,18 +15887,18 @@ function ChartVerticalRange({ min, max, x, y, length, thickness, colors, range,
|
|
|
15834
15887
|
}
|
|
15835
15888
|
|
|
15836
15889
|
// src/components/ChartHorizontalRange.tsx
|
|
15837
|
-
var
|
|
15890
|
+
var import_react60 = require("react");
|
|
15838
15891
|
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
15839
15892
|
function ChartHorizontalRange({ min, max, x, y, length, thickness, colors, range, endLabels, onChange, indicatorValue, onHoverRange, realtime = true }) {
|
|
15840
|
-
const id = (0,
|
|
15841
|
-
const drag = (0,
|
|
15842
|
-
const [draft, setDraft] = (0,
|
|
15893
|
+
const id = (0, import_react60.useId)().replaceAll(":", ""), span = max - min;
|
|
15894
|
+
const drag = (0, import_react60.useRef)();
|
|
15895
|
+
const [draft, setDraft] = (0, import_react60.useState)(), pending = (0, import_react60.useRef)();
|
|
15843
15896
|
const cancel = () => {
|
|
15844
15897
|
drag.current = void 0;
|
|
15845
15898
|
pending.current = void 0;
|
|
15846
15899
|
setDraft(void 0);
|
|
15847
15900
|
};
|
|
15848
|
-
(0,
|
|
15901
|
+
(0, import_react60.useEffect)(() => {
|
|
15849
15902
|
if (!realtime) cancel();
|
|
15850
15903
|
}, [range[0], range[1], min, max, realtime]);
|
|
15851
15904
|
const shown = draft ?? range, low = Math.max(min, Math.min(max, shown[0])), high = Math.max(low, Math.min(max, shown[1]));
|
|
@@ -15923,7 +15976,7 @@ function ChartHorizontalRange({ min, max, x, y, length, thickness, colors, range
|
|
|
15923
15976
|
}
|
|
15924
15977
|
|
|
15925
15978
|
// src/components/Chart.tsx
|
|
15926
|
-
var
|
|
15979
|
+
var import_react61 = require("react");
|
|
15927
15980
|
|
|
15928
15981
|
// src/components/chartCompositeExport.ts
|
|
15929
15982
|
function serializeChartComposite(host) {
|
|
@@ -16047,20 +16100,20 @@ var DEFAULT_CHART_PALETTE = [
|
|
|
16047
16100
|
"#2f54eb",
|
|
16048
16101
|
"#a0d911"
|
|
16049
16102
|
];
|
|
16050
|
-
var ChartContext = (0,
|
|
16103
|
+
var ChartContext = (0, import_react61.createContext)(null);
|
|
16051
16104
|
function toCssSize(value, fallback) {
|
|
16052
16105
|
if (typeof value === "number") return `${value}px`;
|
|
16053
16106
|
return value ?? fallback;
|
|
16054
16107
|
}
|
|
16055
|
-
var ChartComposite = (0,
|
|
16056
|
-
const host = (0,
|
|
16057
|
-
(0,
|
|
16108
|
+
var ChartComposite = (0, import_react61.forwardRef)(function ChartComposite2({ layers, width = "100%", height = 320, ariaLabel = "\u7EC4\u5408\u56FE\u8868", className = "", style, ...props }, ref) {
|
|
16109
|
+
const host = (0, import_react61.useRef)(null);
|
|
16110
|
+
(0, import_react61.useImperativeHandle)(ref, () => ({ toSvgString: () => host.current ? serializeChartComposite(host.current) : null, saveAsImage: (filename) => saveCompositeImage(host.current ? serializeChartComposite(host.current) : null, filename) }), []);
|
|
16058
16111
|
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { ...withTitleTooltip(props), ref: host, className: `sia-chart-composite${className ? ` ${className}` : ""}`, style: { ...style, width: toCssSize(width, "100%"), height: toCssSize(height, "320px") }, role: "group", "aria-label": ariaLabel, children: layers.map((layer, index) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "sia-chart-composite__layer", style: { left: layer.left ?? 0, top: layer.top ?? 0, width: layer.width ?? "100%", height: layer.height ?? "100%", zIndex: layer.zIndex ?? index, pointerEvents: layer.pointerEvents }, children: layer.content }, layer.key ?? index)) });
|
|
16059
16112
|
});
|
|
16060
|
-
var useTooltipLayoutEffect = typeof window === "undefined" ?
|
|
16113
|
+
var useTooltipLayoutEffect = typeof window === "undefined" ? import_react61.useEffect : import_react61.useLayoutEffect;
|
|
16061
16114
|
function ChartTooltip({ open, left, top, children, enterable = false, inheritTextStyle = false, placement = "above", className = "", style, ...props }) {
|
|
16062
|
-
const elementRef = (0,
|
|
16063
|
-
const [position, setPosition] = (0,
|
|
16115
|
+
const elementRef = (0, import_react61.useRef)(null);
|
|
16116
|
+
const [position, setPosition] = (0, import_react61.useState)([left, top]);
|
|
16064
16117
|
useTooltipLayoutEffect(() => {
|
|
16065
16118
|
const element = elementRef.current, host = element?.parentElement;
|
|
16066
16119
|
if (!open || placement !== "axis" || !element || !host) return;
|
|
@@ -16184,7 +16237,7 @@ function ChartToolbox({
|
|
|
16184
16237
|
))
|
|
16185
16238
|
] });
|
|
16186
16239
|
}
|
|
16187
|
-
var SiaChart = (0,
|
|
16240
|
+
var SiaChart = (0, import_react61.forwardRef)(function SiaChart2({
|
|
16188
16241
|
children,
|
|
16189
16242
|
width = "100%",
|
|
16190
16243
|
height = 320,
|
|
@@ -16211,19 +16264,19 @@ var SiaChart = (0, import_react60.forwardRef)(function SiaChart2({
|
|
|
16211
16264
|
style,
|
|
16212
16265
|
...rest
|
|
16213
16266
|
}, ref) {
|
|
16214
|
-
const hostRef = (0,
|
|
16215
|
-
const svgRef = (0,
|
|
16216
|
-
const titleId = (0,
|
|
16217
|
-
const descriptionId = (0,
|
|
16218
|
-
const [tooltip, setTooltip] = (0,
|
|
16219
|
-
const tooltipHideTimer = (0,
|
|
16220
|
-
const tooltipHeld = (0,
|
|
16267
|
+
const hostRef = (0, import_react61.useRef)(null);
|
|
16268
|
+
const svgRef = (0, import_react61.useRef)(null);
|
|
16269
|
+
const titleId = (0, import_react61.useId)();
|
|
16270
|
+
const descriptionId = (0, import_react61.useId)();
|
|
16271
|
+
const [tooltip, setTooltip] = (0, import_react61.useState)(null);
|
|
16272
|
+
const tooltipHideTimer = (0, import_react61.useRef)();
|
|
16273
|
+
const tooltipHeld = (0, import_react61.useRef)(false);
|
|
16221
16274
|
const cancelTooltipHide = () => {
|
|
16222
16275
|
clearTimeout(tooltipHideTimer.current);
|
|
16223
16276
|
};
|
|
16224
|
-
(0,
|
|
16225
|
-
const [linkedPosition, setLinkedPosition] = (0,
|
|
16226
|
-
(0,
|
|
16277
|
+
(0, import_react61.useEffect)(() => () => clearTimeout(tooltipHideTimer.current), []);
|
|
16278
|
+
const [linkedPosition, setLinkedPosition] = (0, import_react61.useState)({ left: 0, top: 0 });
|
|
16279
|
+
(0, import_react61.useEffect)(() => {
|
|
16227
16280
|
const host = hostRef.current, svg = svgRef.current;
|
|
16228
16281
|
if (!controlledTooltip || !host || !svg) return;
|
|
16229
16282
|
const position = () => {
|
|
@@ -16238,12 +16291,12 @@ var SiaChart = (0, import_react60.forwardRef)(function SiaChart2({
|
|
|
16238
16291
|
observer.observe(host);
|
|
16239
16292
|
return () => observer.disconnect();
|
|
16240
16293
|
}, [controlledTooltip]);
|
|
16241
|
-
const [dataViewOpen, setDataViewOpen] = (0,
|
|
16242
|
-
const [markMode, setMarkMode] = (0,
|
|
16243
|
-
const [markStart, setMarkStart] = (0,
|
|
16244
|
-
const [userMarks, setUserMarks] = (0,
|
|
16294
|
+
const [dataViewOpen, setDataViewOpen] = (0, import_react61.useState)(false);
|
|
16295
|
+
const [markMode, setMarkMode] = (0, import_react61.useState)(false);
|
|
16296
|
+
const [markStart, setMarkStart] = (0, import_react61.useState)(null);
|
|
16297
|
+
const [userMarks, setUserMarks] = (0, import_react61.useState)([]);
|
|
16245
16298
|
const toolboxOptions = toolbox === true ? {} : toolbox || void 0;
|
|
16246
|
-
const rootStyle = (0,
|
|
16299
|
+
const rootStyle = (0, import_react61.useMemo)(() => ({
|
|
16247
16300
|
...style,
|
|
16248
16301
|
width: toCssSize(width, "100%"),
|
|
16249
16302
|
height: toCssSize(height, "320px"),
|
|
@@ -16301,13 +16354,13 @@ var SiaChart = (0, import_react60.forwardRef)(function SiaChart2({
|
|
|
16301
16354
|
anchor.href = canvas.toDataURL("image/png");
|
|
16302
16355
|
anchor.click();
|
|
16303
16356
|
}
|
|
16304
|
-
(0,
|
|
16357
|
+
(0, import_react61.useImperativeHandle)(ref, () => ({
|
|
16305
16358
|
getElement: () => svgRef.current,
|
|
16306
16359
|
focus: () => svgRef.current?.focus(),
|
|
16307
16360
|
toSvgString: serializeSvg,
|
|
16308
16361
|
toDataUrl: svgDataUrl
|
|
16309
16362
|
}), []);
|
|
16310
|
-
const context = (0,
|
|
16363
|
+
const context = (0, import_react61.useMemo)(() => ({
|
|
16311
16364
|
palette,
|
|
16312
16365
|
showTooltip: (event, content, point) => {
|
|
16313
16366
|
cancelTooltipHide();
|
|
@@ -16494,7 +16547,7 @@ var SiaChart = (0, import_react60.forwardRef)(function SiaChart2({
|
|
|
16494
16547
|
) });
|
|
16495
16548
|
});
|
|
16496
16549
|
function ChartMark({ tooltip, tooltipPoint, label, onPointerMove, onPointerLeave, onFocus, onBlur, ...props }) {
|
|
16497
|
-
const context = (0,
|
|
16550
|
+
const context = (0, import_react61.useContext)(ChartContext);
|
|
16498
16551
|
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
16499
16552
|
"g",
|
|
16500
16553
|
{
|
|
@@ -16523,7 +16576,7 @@ function ChartMark({ tooltip, tooltipPoint, label, onPointerMove, onPointerLeave
|
|
|
16523
16576
|
);
|
|
16524
16577
|
}
|
|
16525
16578
|
function ChartLegend({ items, symbol = "rect", x = CHART_VIEWBOX_WIDTH / 2, y = 20, align = "center", itemGap = 18, orientation = "horizontal", selected, onItemClick, maxWidth, rowGap = 24, iconWidth, iconHeight = 14, textGap = 5, textStyle, inactiveColor, background }) {
|
|
16526
|
-
const paintId = (0,
|
|
16579
|
+
const paintId = (0, import_react61.useId)().replaceAll(":", "");
|
|
16527
16580
|
const widths = items.map((item) => (iconWidth == null ? 18 : iconWidth + textGap) + (item.textWidth ?? Math.max(30, Array.from(item.name).reduce((width, character) => width + (character.charCodeAt(0) > 255 ? 13 : 7), 0))));
|
|
16528
16581
|
const totalWidth = orientation === "horizontal" ? widths.reduce((sum, value) => sum + value, 0) + Math.max(0, items.length - 1) * itemGap : Math.max(0, ...widths);
|
|
16529
16582
|
const startX = align === "start" ? x : align === "end" ? x - totalWidth : x - totalWidth / 2;
|
|
@@ -16652,7 +16705,7 @@ function ChartAxis({ layer = "all", orientation, x, y, length, labels, positions
|
|
|
16652
16705
|
] });
|
|
16653
16706
|
}
|
|
16654
16707
|
function ChartVisualMap({ min, max, colors = ["#e6f4ff", "#1677ff"], x = 16, y = 284, width = 110, height = 9, label, endLabels, indicatorValue, onHoverRange, realtime = true, svgHandles = false, orientation = "horizontal", calculable = false, value = max, onChange, range, onRangeChange, pieces, selectedPieces, onPieceToggle }) {
|
|
16655
|
-
const id = (0,
|
|
16708
|
+
const id = (0, import_react61.useId)().replaceAll(":", "");
|
|
16656
16709
|
const vertical = orientation === "vertical";
|
|
16657
16710
|
if (svgHandles && vertical && !calculable && !pieces?.length) return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ChartVerticalRange, { readOnly: true, min, max, x, y, length: width, thickness: height, colors, range: [min, max], endLabels, indicatorValue, onHoverRange });
|
|
16658
16711
|
if (svgHandles && vertical && calculable && range && !pieces?.length) return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ChartVerticalRange, { min, max, x, y, length: width, thickness: height, colors, range, onChange: onRangeChange, endLabels, indicatorValue, onHoverRange, realtime });
|
|
@@ -16680,8 +16733,8 @@ function ChartVisualMap({ min, max, colors = ["#e6f4ff", "#1677ff"], x = 16, y =
|
|
|
16680
16733
|
] });
|
|
16681
16734
|
}
|
|
16682
16735
|
function ChartDataZoom({ value, min = 0, max = 100, ariaLabel = "\u56FE\u8868\u53EF\u89C1\u8303\u56F4", orientation = "horizontal", dataShadow = [], showDetail = false, minSpan = 1, formatter, onChange, panEnabled = false, shadowBounds, handleLabels }) {
|
|
16683
|
-
const [activeHandle, setActiveHandle] = (0,
|
|
16684
|
-
const pan = (0,
|
|
16736
|
+
const [activeHandle, setActiveHandle] = (0, import_react61.useState)(null);
|
|
16737
|
+
const pan = (0, import_react61.useRef)();
|
|
16685
16738
|
const start = Math.min(value[0], value[1]);
|
|
16686
16739
|
const end = Math.max(value[0], value[1]);
|
|
16687
16740
|
const startPercent = (start - min) / Math.max(1, max - min) * 100;
|
|
@@ -16755,9 +16808,9 @@ function ChartDataZoom({ value, min = 0, max = 100, ariaLabel = "\u56FE\u8868\u5
|
|
|
16755
16808
|
] });
|
|
16756
16809
|
}
|
|
16757
16810
|
function ChartTimeline({ labels, value, onChange, autoPlay = false, playInterval = 2e3, loop = true, className = "", ...props }) {
|
|
16758
|
-
const [playing, setPlaying] = (0,
|
|
16759
|
-
(0,
|
|
16760
|
-
(0,
|
|
16811
|
+
const [playing, setPlaying] = (0, import_react61.useState)(autoPlay);
|
|
16812
|
+
(0, import_react61.useEffect)(() => setPlaying(autoPlay), [autoPlay]);
|
|
16813
|
+
(0, import_react61.useEffect)(() => {
|
|
16761
16814
|
if (!playing || labels.length <= 1) return void 0;
|
|
16762
16815
|
const timer = window.setInterval(() => {
|
|
16763
16816
|
const next = value + 1;
|
|
@@ -16867,7 +16920,7 @@ function parseSvgMapPaths(source) {
|
|
|
16867
16920
|
}
|
|
16868
16921
|
|
|
16869
16922
|
// src/components/useMapRoam.ts
|
|
16870
|
-
var
|
|
16923
|
+
var import_react62 = require("react");
|
|
16871
16924
|
|
|
16872
16925
|
// src/components/chartRoam.ts
|
|
16873
16926
|
function zoomChartViewport(view, factor, point, limit = { min: 0.05, max: 20 }) {
|
|
@@ -16884,14 +16937,14 @@ var initial = { x: 0, y: 0, scale: 1 };
|
|
|
16884
16937
|
function useMapRoam(mode, scaleLimit = { min: 0.65, max: 5 }, wheelFactors = [1.12, 0.9]) {
|
|
16885
16938
|
const [zoomIn, zoomOut] = wheelFactors;
|
|
16886
16939
|
const min = scaleLimit?.min, max = scaleLimit?.max, unlimited = scaleLimit === null;
|
|
16887
|
-
const host = (0,
|
|
16888
|
-
const [view, setView] = (0,
|
|
16889
|
-
const drag = (0,
|
|
16940
|
+
const host = (0, import_react62.useRef)(null);
|
|
16941
|
+
const [view, setView] = (0, import_react62.useState)(initial);
|
|
16942
|
+
const drag = (0, import_react62.useRef)();
|
|
16890
16943
|
const local = (x, y) => {
|
|
16891
16944
|
const matrix = host.current?.ownerSVGElement?.getScreenCTM();
|
|
16892
16945
|
return matrix ? new DOMPoint(x, y).matrixTransform(matrix.inverse()) : new DOMPoint(x, y);
|
|
16893
16946
|
};
|
|
16894
|
-
(0,
|
|
16947
|
+
(0, import_react62.useEffect)(() => {
|
|
16895
16948
|
const node = host.current;
|
|
16896
16949
|
if (!node || !mode || mode === "move") return;
|
|
16897
16950
|
const wheel = (event) => {
|
|
@@ -16953,7 +17006,7 @@ function useMapRoam(mode, scaleLimit = { min: 0.65, max: 5 }, wheelFactors = [1.
|
|
|
16953
17006
|
}
|
|
16954
17007
|
|
|
16955
17008
|
// src/components/ChartMapLineReveal.tsx
|
|
16956
|
-
var
|
|
17009
|
+
var import_react63 = require("react");
|
|
16957
17010
|
|
|
16958
17011
|
// src/components/mapLineGeometry.ts
|
|
16959
17012
|
function mapLineControl(source, target, curveness) {
|
|
@@ -16970,9 +17023,9 @@ function mapLineDuration(source, target, period) {
|
|
|
16970
17023
|
// src/components/ChartMapLineReveal.tsx
|
|
16971
17024
|
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
16972
17025
|
function ChartMapLineReveal({ source, control, target, enabled, initialDuration = 2e3, updateDuration = 500, children }) {
|
|
16973
|
-
const signature = JSON.stringify([source, control, target]), initialized = (0,
|
|
16974
|
-
const [frame, setFrame] = (0,
|
|
16975
|
-
(0,
|
|
17026
|
+
const signature = JSON.stringify([source, control, target]), initialized = (0, import_react63.useRef)(false);
|
|
17027
|
+
const [frame, setFrame] = (0, import_react63.useState)({ signature, progress: enabled ? 0 : 1 });
|
|
17028
|
+
(0, import_react63.useEffect)(() => {
|
|
16976
17029
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
16977
17030
|
const duration = Math.max(1, initialized.current ? updateDuration : initialDuration);
|
|
16978
17031
|
if (!enabled || reduced.matches) {
|
|
@@ -17005,15 +17058,15 @@ function ChartMapLineReveal({ source, control, target, enabled, initialDuration
|
|
|
17005
17058
|
}
|
|
17006
17059
|
|
|
17007
17060
|
// src/components/ChartMapLineEffect.tsx
|
|
17008
|
-
var
|
|
17061
|
+
var import_react64 = require("react");
|
|
17009
17062
|
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
17010
17063
|
function ChartMapLineEffect({ source, control, target, period = 30, color = "#fff", radius = 1, shadowBlur = 10, shadowColor = color, trailAlpha }) {
|
|
17011
|
-
const ref = (0,
|
|
17012
|
-
const trails = (0,
|
|
17064
|
+
const ref = (0, import_react64.useRef)(null);
|
|
17065
|
+
const trails = (0, import_react64.useRef)([]);
|
|
17013
17066
|
const alpha = trailAlpha === void 0 ? 0 : Math.max(0, Math.min(0.999, trailAlpha));
|
|
17014
17067
|
const count = alpha > 0 ? Math.min(240, Math.ceil(Math.log(5e-3) / Math.log(alpha))) : 0;
|
|
17015
17068
|
const duration = mapLineDuration(source, target, period);
|
|
17016
|
-
(0,
|
|
17069
|
+
(0, import_react64.useEffect)(() => {
|
|
17017
17070
|
const started = performance.now();
|
|
17018
17071
|
let frame = 0;
|
|
17019
17072
|
const history = [];
|
|
@@ -17046,7 +17099,7 @@ function ChartMapLineEffect({ source, control, target, period = 30, color = "#ff
|
|
|
17046
17099
|
}
|
|
17047
17100
|
|
|
17048
17101
|
// src/components/ChartMapPointPulse.tsx
|
|
17049
|
-
var
|
|
17102
|
+
var import_react65 = require("react");
|
|
17050
17103
|
|
|
17051
17104
|
// src/components/mapPointPulse.ts
|
|
17052
17105
|
function mapPointPulseDuration(period, random = Math.random) {
|
|
@@ -17056,7 +17109,7 @@ function mapPointPulseDuration(period, random = Math.random) {
|
|
|
17056
17109
|
// src/components/ChartMapPointPulse.tsx
|
|
17057
17110
|
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
17058
17111
|
function ChartMapPointPulse({ x, y, size, color, period = 15, scaleSize = 2 }) {
|
|
17059
|
-
const [duration] = (0,
|
|
17112
|
+
const [duration] = (0, import_react65.useState)(() => mapPointPulseDuration(period));
|
|
17060
17113
|
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("circle", { "data-svg-map-pulse": duration, cx: x, cy: y, r: size * scaleSize * 0.1, fill: "none", stroke: color, strokeWidth: 0.1, pointerEvents: "none", style: { filter: `drop-shadow(0 0 2px ${color})` }, children: [
|
|
17061
17114
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("animate", { attributeName: "r", values: `${size * scaleSize * 0.1};${size * scaleSize}`, dur: `${duration}ms`, repeatCount: "indefinite", calcMode: "linear" }),
|
|
17062
17115
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("animate", { attributeName: "stroke-width", values: ".1;1", dur: `${duration}ms`, repeatCount: "indefinite", calcMode: "linear" })
|
|
@@ -17064,11 +17117,11 @@ function ChartMapPointPulse({ x, y, size, color, period = 15, scaleSize = 2 }) {
|
|
|
17064
17117
|
}
|
|
17065
17118
|
|
|
17066
17119
|
// src/components/ChartMapPointEntrance.tsx
|
|
17067
|
-
var
|
|
17120
|
+
var import_react66 = require("react");
|
|
17068
17121
|
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
17069
17122
|
function ChartMapPointEntrance({ enabled, x, y, children }) {
|
|
17070
|
-
const [progress, setProgress] = (0,
|
|
17071
|
-
(0,
|
|
17123
|
+
const [progress, setProgress] = (0, import_react66.useState)(enabled ? 0.01 : 1);
|
|
17124
|
+
(0, import_react66.useEffect)(() => {
|
|
17072
17125
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
17073
17126
|
if (!enabled || reduced.matches) {
|
|
17074
17127
|
setProgress(1);
|
|
@@ -17111,8 +17164,8 @@ function mapLineEndLabel(source, target) {
|
|
|
17111
17164
|
// src/components/SvgMapPlot.tsx
|
|
17112
17165
|
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
17113
17166
|
function SvgMapRegion({ d, name, value, series, color, scale, offset, emphasized, onHover, stroke, strokeWidth, opacity, hoverable = true, showLabel = true, tooltipNameOnly = false }) {
|
|
17114
|
-
const path = (0,
|
|
17115
|
-
(0,
|
|
17167
|
+
const path = (0, import_react67.useRef)(null), [center, setCenter] = (0, import_react67.useState)([0, 0]);
|
|
17168
|
+
(0, import_react67.useLayoutEffect)(() => {
|
|
17116
17169
|
const box = path.current?.getBBox();
|
|
17117
17170
|
if (box) setCenter([box.x + box.width / 2, box.y + box.height / 2]);
|
|
17118
17171
|
}, [d]);
|
|
@@ -17130,9 +17183,9 @@ function SvgMapRegion({ d, name, value, series, color, scale, offset, emphasized
|
|
|
17130
17183
|
] }), onPointerMove: () => onHover(true), onPointerLeave: () => onHover(false), onFocus: () => onHover(true), onBlur: () => onHover(false), children: content });
|
|
17131
17184
|
}
|
|
17132
17185
|
function SvgMapPlot({ source, name, data, x, y, width, height, domain, range = domain, colors, labelOffsets, hoverRange, onHoverValue, roam = true, resetKey = 0, children, markPoints = [], markLines = [], lineAnimation = false, tooltipNameOnly = false, showLabels = true, pointAnimation = false, pointEntrance = false, pointAnimationEasing = "linear" }) {
|
|
17133
|
-
const map = (0,
|
|
17134
|
-
const [hoveredLine, setHoveredLine] = (0,
|
|
17135
|
-
(0,
|
|
17186
|
+
const map = (0, import_react67.useMemo)(() => parseSvgMapPaths(source), [source]), control = useMapRoam(roam, null, [1.2, 1 / 1.2]), [hovered, setHovered] = (0, import_react67.useState)();
|
|
17187
|
+
const [hoveredLine, setHoveredLine] = (0, import_react67.useState)();
|
|
17188
|
+
(0, import_react67.useEffect)(() => {
|
|
17136
17189
|
control.reset();
|
|
17137
17190
|
setHovered(void 0);
|
|
17138
17191
|
}, [resetKey]);
|
|
@@ -17195,16 +17248,16 @@ function SvgMapPlot({ source, name, data, x, y, width, height, domain, range = d
|
|
|
17195
17248
|
}
|
|
17196
17249
|
|
|
17197
17250
|
// src/components/ChartRoamController.tsx
|
|
17198
|
-
var
|
|
17251
|
+
var import_react68 = require("react");
|
|
17199
17252
|
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
17200
17253
|
function ChartRoamController({ x = 800, y = 5, onPan, onZoom }) {
|
|
17201
|
-
const [hovered, setHovered] = (0,
|
|
17202
|
-
const timer = (0,
|
|
17254
|
+
const [hovered, setHovered] = (0, import_react68.useState)(), [focused, setFocused] = (0, import_react68.useState)();
|
|
17255
|
+
const timer = (0, import_react68.useRef)();
|
|
17203
17256
|
const stop = () => {
|
|
17204
17257
|
if (timer.current !== void 0) clearInterval(timer.current);
|
|
17205
17258
|
timer.current = void 0;
|
|
17206
17259
|
};
|
|
17207
|
-
(0,
|
|
17260
|
+
(0, import_react68.useEffect)(() => {
|
|
17208
17261
|
window.addEventListener("blur", stop);
|
|
17209
17262
|
return () => {
|
|
17210
17263
|
stop();
|
|
@@ -17243,13 +17296,13 @@ function ChartRoamController({ x = 800, y = 5, onPan, onZoom }) {
|
|
|
17243
17296
|
}
|
|
17244
17297
|
|
|
17245
17298
|
// src/components/LineShareChart.tsx
|
|
17246
|
-
var
|
|
17299
|
+
var import_react88 = require("react");
|
|
17247
17300
|
|
|
17248
17301
|
// src/components/Charts.tsx
|
|
17249
|
-
var
|
|
17302
|
+
var import_react86 = require("react");
|
|
17250
17303
|
|
|
17251
17304
|
// src/components/ChartScatterMotion.tsx
|
|
17252
|
-
var
|
|
17305
|
+
var import_react69 = require("react");
|
|
17253
17306
|
|
|
17254
17307
|
// src/components/scatterMotion.ts
|
|
17255
17308
|
function scatterMotionEase(progress) {
|
|
@@ -17261,9 +17314,9 @@ function scatterMotionEase(progress) {
|
|
|
17261
17314
|
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
17262
17315
|
function ChartScatterMotion({ x, y, radius, enabled, duration = 2e3, updateDuration = 500, progress, children }) {
|
|
17263
17316
|
const target = { x, y, radius };
|
|
17264
|
-
const [frame, setFrame] = (0,
|
|
17265
|
-
const displayed = (0,
|
|
17266
|
-
(0,
|
|
17317
|
+
const [frame, setFrame] = (0, import_react69.useState)(() => ({ ...target, radius: enabled ? radius * 0.01 : radius }));
|
|
17318
|
+
const displayed = (0, import_react69.useRef)(frame), started = (0, import_react69.useRef)(false);
|
|
17319
|
+
(0, import_react69.useEffect)(() => {
|
|
17267
17320
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
17268
17321
|
let request = 0;
|
|
17269
17322
|
const publish = (next) => {
|
|
@@ -17374,12 +17427,12 @@ function layoutEventRiver(series, tailLength, area) {
|
|
|
17374
17427
|
}
|
|
17375
17428
|
|
|
17376
17429
|
// src/components/EventRiverBubble.tsx
|
|
17377
|
-
var
|
|
17430
|
+
var import_react70 = require("react");
|
|
17378
17431
|
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
17379
17432
|
function EventRiverBubble({ resetKey, draggable = true, tooltipPoint, onPointerUp, ...props }) {
|
|
17380
|
-
const [offset, setOffset] = (0,
|
|
17381
|
-
const drag = (0,
|
|
17382
|
-
(0,
|
|
17433
|
+
const [offset, setOffset] = (0, import_react70.useState)(0);
|
|
17434
|
+
const drag = (0, import_react70.useRef)();
|
|
17435
|
+
(0, import_react70.useEffect)(() => {
|
|
17383
17436
|
setOffset(0);
|
|
17384
17437
|
drag.current = void 0;
|
|
17385
17438
|
}, [resetKey]);
|
|
@@ -17430,13 +17483,13 @@ function EventRiverBubble({ resetKey, draggable = true, tooltipPoint, onPointerU
|
|
|
17430
17483
|
}
|
|
17431
17484
|
|
|
17432
17485
|
// src/components/EventRiverMotion.tsx
|
|
17433
|
-
var
|
|
17486
|
+
var import_react71 = require("react");
|
|
17434
17487
|
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
17435
17488
|
function EventRiverMotion({ geometry, enabled = true, duration = 2e3, updateDuration = 500, progress, children }) {
|
|
17436
|
-
const [frame, setFrame] = (0,
|
|
17437
|
-
const displayed = (0,
|
|
17489
|
+
const [frame, setFrame] = (0, import_react71.useState)(() => ({ ...geometry, scale: enabled ? 0.1 : 1 }));
|
|
17490
|
+
const displayed = (0, import_react71.useRef)(frame), started = (0, import_react71.useRef)(false);
|
|
17438
17491
|
const signature = JSON.stringify(geometry);
|
|
17439
|
-
(0,
|
|
17492
|
+
(0, import_react71.useEffect)(() => {
|
|
17440
17493
|
const preference = window.matchMedia("(prefers-reduced-motion: reduce)"), target = { ...geometry, scale: 1 };
|
|
17441
17494
|
const from = started.current ? displayed.current : { ...geometry, scale: 0.1 };
|
|
17442
17495
|
let request = 0;
|
|
@@ -17553,7 +17606,7 @@ function transferPieValue(series, source, target, connector = " & ") {
|
|
|
17553
17606
|
}
|
|
17554
17607
|
|
|
17555
17608
|
// src/components/ChartValueIsland.tsx
|
|
17556
|
-
var
|
|
17609
|
+
var import_react72 = require("react");
|
|
17557
17610
|
|
|
17558
17611
|
// src/components/cartesianTransfer.ts
|
|
17559
17612
|
function addValues(a, b) {
|
|
@@ -17618,13 +17671,13 @@ function findCompositeValueTarget(element, x, y) {
|
|
|
17618
17671
|
// src/components/ChartValueIsland.tsx
|
|
17619
17672
|
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
17620
17673
|
function ChartValueIsland({ name, value, x, y, color = "#2ec7c9", onDrop, resolveTarget = findCompositeValueTarget }) {
|
|
17621
|
-
const drag = (0,
|
|
17622
|
-
const [offset, setOffset] = (0,
|
|
17674
|
+
const drag = (0, import_react72.useRef)(null);
|
|
17675
|
+
const [offset, setOffset] = (0, import_react72.useState)([0, 0]);
|
|
17623
17676
|
const cancel = () => {
|
|
17624
17677
|
drag.current = null;
|
|
17625
17678
|
setOffset([0, 0]);
|
|
17626
17679
|
};
|
|
17627
|
-
(0,
|
|
17680
|
+
(0, import_react72.useEffect)(cancel, [x, y]);
|
|
17628
17681
|
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
17629
17682
|
ChartMark,
|
|
17630
17683
|
{
|
|
@@ -17677,12 +17730,12 @@ function ChartValueIsland({ name, value, x, y, color = "#2ec7c9", onDrop, resolv
|
|
|
17677
17730
|
}
|
|
17678
17731
|
|
|
17679
17732
|
// src/components/ChartPulseRing.tsx
|
|
17680
|
-
var
|
|
17733
|
+
var import_react73 = require("react");
|
|
17681
17734
|
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
17682
17735
|
function ChartPulseRing({ center, radius, scaleSize = 2, color = "gold", shadowBlur = 10, period = 15, progress, enabled = true }) {
|
|
17683
|
-
const id = (0,
|
|
17684
|
-
const [reduced, setReduced] = (0,
|
|
17685
|
-
(0,
|
|
17736
|
+
const id = (0, import_react73.useId)().replace(/:/g, ""), [phase, setPhase] = (0, import_react73.useState)(0);
|
|
17737
|
+
const [reduced, setReduced] = (0, import_react73.useState)(false);
|
|
17738
|
+
(0, import_react73.useEffect)(() => {
|
|
17686
17739
|
const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
17687
17740
|
setReduced(preference.matches);
|
|
17688
17741
|
let frame = 0;
|
|
@@ -17826,7 +17879,7 @@ function chartMarkerPath(kind, x, y, size) {
|
|
|
17826
17879
|
}
|
|
17827
17880
|
|
|
17828
17881
|
// src/components/ChartLargeMapPointCanvas.tsx
|
|
17829
|
-
var
|
|
17882
|
+
var import_react74 = require("react");
|
|
17830
17883
|
|
|
17831
17884
|
// src/components/largeMapPointPulse.ts
|
|
17832
17885
|
function largeMapPointPulse(elapsed, period, initial3, delay) {
|
|
@@ -17842,8 +17895,8 @@ function largeMapPointSize(size, pulse) {
|
|
|
17842
17895
|
// src/components/ChartLargeMapPointCanvas.tsx
|
|
17843
17896
|
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
17844
17897
|
function ChartLargeMapPointCanvas({ groups, width, height }) {
|
|
17845
|
-
const canvas = (0,
|
|
17846
|
-
(0,
|
|
17898
|
+
const canvas = (0, import_react74.useRef)(null), key = JSON.stringify(groups);
|
|
17899
|
+
(0, import_react74.useEffect)(() => {
|
|
17847
17900
|
const element = canvas.current, context = element?.getContext("2d");
|
|
17848
17901
|
if (!element || !context) return;
|
|
17849
17902
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -17902,12 +17955,12 @@ function ChartLargeMapPointCanvas({ groups, width, height }) {
|
|
|
17902
17955
|
}
|
|
17903
17956
|
|
|
17904
17957
|
// src/components/ChartCrosshair.tsx
|
|
17905
|
-
var
|
|
17958
|
+
var import_react75 = require("react");
|
|
17906
17959
|
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
17907
17960
|
function ChartCrosshair({ bounds, xDomain, yDomain, formatX = decimal, formatY = decimal }) {
|
|
17908
|
-
const ref = (0,
|
|
17909
|
-
const [point, setPoint] = (0,
|
|
17910
|
-
(0,
|
|
17961
|
+
const ref = (0, import_react75.useRef)(null);
|
|
17962
|
+
const [point, setPoint] = (0, import_react75.useState)(null);
|
|
17963
|
+
(0, import_react75.useEffect)(() => {
|
|
17911
17964
|
const svg = ref.current?.ownerSVGElement;
|
|
17912
17965
|
if (!svg) return;
|
|
17913
17966
|
const clear = () => setPoint(null);
|
|
@@ -17927,7 +17980,7 @@ function ChartCrosshair({ bounds, xDomain, yDomain, formatX = decimal, formatY =
|
|
|
17927
17980
|
svg.removeEventListener("pointercancel", clear);
|
|
17928
17981
|
};
|
|
17929
17982
|
}, [bounds.x, bounds.y, bounds.width, bounds.height]);
|
|
17930
|
-
(0,
|
|
17983
|
+
(0, import_react75.useEffect)(() => setPoint(null), [xDomain[0], xDomain[1], yDomain[0], yDomain[1]]);
|
|
17931
17984
|
const x = point ? xDomain[0] + (point.x - bounds.x) / bounds.width * (xDomain[1] - xDomain[0]) : 0;
|
|
17932
17985
|
const y = point ? yDomain[1] - (point.y - bounds.y) / bounds.height * (yDomain[1] - yDomain[0]) : 0;
|
|
17933
17986
|
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("g", { ref, className: "sia-chart__crosshair", "aria-hidden": "true", children: [
|
|
@@ -17944,7 +17997,7 @@ function decimal(value) {
|
|
|
17944
17997
|
}
|
|
17945
17998
|
|
|
17946
17999
|
// src/components/HeatmapRasterLayer.tsx
|
|
17947
|
-
var
|
|
18000
|
+
var import_react76 = require("react");
|
|
17948
18001
|
|
|
17949
18002
|
// src/components/heatmapRaster.ts
|
|
17950
18003
|
var defaultGradient = [{ offset: 0.2, color: [0, 0, 255] }, { offset: 0.4, color: [0, 255, 255] }, { offset: 0.6, color: [0, 255, 0] }, { offset: 0.8, color: [255, 255, 0] }, { offset: 1, color: [255, 0, 0] }];
|
|
@@ -17991,9 +18044,9 @@ function rasterizeHeatmap(width, height, points, options = {}) {
|
|
|
17991
18044
|
// src/components/HeatmapRasterLayer.tsx
|
|
17992
18045
|
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
17993
18046
|
function HeatmapRaster({ width, height, points, options }) {
|
|
17994
|
-
const [url, setUrl] = (0,
|
|
18047
|
+
const [url, setUrl] = (0, import_react76.useState)();
|
|
17995
18048
|
const optionsKey = JSON.stringify(options);
|
|
17996
|
-
(0,
|
|
18049
|
+
(0, import_react76.useEffect)(() => {
|
|
17997
18050
|
const canvas = document.createElement("canvas");
|
|
17998
18051
|
canvas.width = width;
|
|
17999
18052
|
canvas.height = height;
|
|
@@ -18093,10 +18146,10 @@ function chordMatrixLayout(matrix, options = {}) {
|
|
|
18093
18146
|
}
|
|
18094
18147
|
|
|
18095
18148
|
// src/components/MatrixChordPlot.tsx
|
|
18096
|
-
var
|
|
18149
|
+
var import_react77 = require("react");
|
|
18097
18150
|
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
18098
18151
|
function MatrixChordPlot({ names, matrix, series, appearance, showNodeLabels = false, rotateNodeLabels = false, linkLabel, sort, sortSub, padAngle, clockwise, palette, geometry, legacySubSort = false, showScale = false }) {
|
|
18099
|
-
const [hoveredLink, setHoveredLink] = (0,
|
|
18152
|
+
const [hoveredLink, setHoveredLink] = (0, import_react77.useState)(null);
|
|
18100
18153
|
const layout = series ? chordMultiMatrixLayout(series.map((s) => s.matrix), { padAngle, clockwise, startAngle: geometry?.startAngle }) : chordMatrixLayout(matrix, { sort, sortSub, padAngle, clockwise, legacySubSort, startAngle: geometry?.startAngle }), cx = geometry?.center[0] ?? 360, cy = geometry?.center[1] ?? 182, r = geometry?.innerRadius ?? 108, outer = geometry?.outerRadius ?? 128;
|
|
18101
18154
|
const point = (angle) => [cx + Math.cos(angle) * r, cy + Math.sin(angle) * r];
|
|
18102
18155
|
return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("g", { className: "sia-chart__matrix-chord", children: [
|
|
@@ -18443,13 +18496,13 @@ function transferRadarSeries(panels, source, target, connector = " & ") {
|
|
|
18443
18496
|
}
|
|
18444
18497
|
|
|
18445
18498
|
// src/components/ChartRoamGroup.tsx
|
|
18446
|
-
var
|
|
18499
|
+
var import_react78 = require("react");
|
|
18447
18500
|
var import_jsx_runtime79 = require("react/jsx-runtime");
|
|
18448
18501
|
var initial2 = { x: 0, y: 0, scale: 1 };
|
|
18449
18502
|
function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true, ariaLabel, resetSignal = 0 }) {
|
|
18450
|
-
const group = (0,
|
|
18451
|
-
const [view, setView] = (0,
|
|
18452
|
-
(0,
|
|
18503
|
+
const group = (0, import_react78.useRef)(null), drag = (0, import_react78.useRef)();
|
|
18504
|
+
const [view, setView] = (0, import_react78.useState)(initial2);
|
|
18505
|
+
(0, import_react78.useEffect)(() => {
|
|
18453
18506
|
setView(initial2);
|
|
18454
18507
|
drag.current = void 0;
|
|
18455
18508
|
}, [resetSignal]);
|
|
@@ -18459,7 +18512,7 @@ function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true,
|
|
|
18459
18512
|
const local = new DOMPoint(clientX, clientY).matrixTransform(matrix.inverse());
|
|
18460
18513
|
return [local.x, local.y];
|
|
18461
18514
|
};
|
|
18462
|
-
(0,
|
|
18515
|
+
(0, import_react78.useEffect)(() => {
|
|
18463
18516
|
const target = group.current;
|
|
18464
18517
|
if (!target || !enabled || !zoomEnabled) return;
|
|
18465
18518
|
const wheel = (event) => {
|
|
@@ -18520,11 +18573,11 @@ function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true,
|
|
|
18520
18573
|
}
|
|
18521
18574
|
|
|
18522
18575
|
// src/components/TreeNodeGlyph.tsx
|
|
18523
|
-
var
|
|
18576
|
+
var import_react79 = require("react");
|
|
18524
18577
|
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
18525
18578
|
function TreeNodeGlyph({ symbol = "circle", x, y, width, height, color, itemStyle }) {
|
|
18526
|
-
const [failed, setFailed] = (0,
|
|
18527
|
-
(0,
|
|
18579
|
+
const [failed, setFailed] = (0, import_react79.useState)(false);
|
|
18580
|
+
(0, import_react79.useEffect)(() => setFailed(false), [symbol]);
|
|
18528
18581
|
const style = { fill: itemStyle.brushType === "stroke" ? "none" : color, stroke: itemStyle.borderColor, strokeWidth: itemStyle.borderWidth };
|
|
18529
18582
|
if (symbol.startsWith("image://")) return failed ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("g", { role: "img", "aria-label": "\u539F\u59CB\u8282\u70B9\u56FE\u7247\u52A0\u8F7D\u5931\u8D25", children: [
|
|
18530
18583
|
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("rect", { x: x - width / 2, y: y - height / 2, width, height, fill: "none", stroke: "#999", strokeDasharray: "3 3" }),
|
|
@@ -18813,7 +18866,7 @@ function resolveMapRegionAppearance(base, datum, emphasized) {
|
|
|
18813
18866
|
}
|
|
18814
18867
|
|
|
18815
18868
|
// src/components/ChartBundledMapCanvas.tsx
|
|
18816
|
-
var
|
|
18869
|
+
var import_react80 = require("react");
|
|
18817
18870
|
|
|
18818
18871
|
// src/components/edgeBundling.ts
|
|
18819
18872
|
var distance = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]);
|
|
@@ -18957,9 +19010,9 @@ function sampleBundledPath(curves, progress) {
|
|
|
18957
19010
|
var import_jsx_runtime81 = require("react/jsx-runtime");
|
|
18958
19011
|
function ChartBundledMapCanvas({ edges, points = [], smoothness = 0.1, color = "rgba(2,166,253,0.05)", opacity = 0.2, lineWidth = 0.5, pointColor = "rgba(255,0,0,0.5)", pointRadius = 1.5, effect, width, height }) {
|
|
18959
19012
|
const signature = JSON.stringify(edges), pointKey = JSON.stringify(points), effectKey = JSON.stringify(effect);
|
|
18960
|
-
const paths = (0,
|
|
18961
|
-
const base = (0,
|
|
18962
|
-
(0,
|
|
19013
|
+
const paths = (0, import_react80.useMemo)(() => bundleEdges(JSON.parse(signature)).map((row) => ({ index: row.index, curves: smoothBundledPath(row.points, smoothness) })), [signature, smoothness]);
|
|
19014
|
+
const base = (0, import_react80.useRef)(null), moving = (0, import_react80.useRef)(null);
|
|
19015
|
+
(0, import_react80.useEffect)(() => {
|
|
18963
19016
|
const node = base.current, ctx = node?.getContext("2d");
|
|
18964
19017
|
if (!node || !ctx) return;
|
|
18965
19018
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -18985,7 +19038,7 @@ function ChartBundledMapCanvas({ edges, points = [], smoothness = 0.1, color = "
|
|
|
18985
19038
|
ctx.fill();
|
|
18986
19039
|
}
|
|
18987
19040
|
}, [paths, pointKey, width, height, color, opacity, lineWidth, pointColor, pointRadius]);
|
|
18988
|
-
(0,
|
|
19041
|
+
(0, import_react80.useEffect)(() => {
|
|
18989
19042
|
const node = moving.current, ctx = node?.getContext("2d");
|
|
18990
19043
|
if (!node || !ctx) return;
|
|
18991
19044
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -19047,11 +19100,11 @@ function ChartBundledMapCanvas({ edges, points = [], smoothness = 0.1, color = "
|
|
|
19047
19100
|
}
|
|
19048
19101
|
|
|
19049
19102
|
// src/components/ChartMapEffectCanvas.tsx
|
|
19050
|
-
var
|
|
19103
|
+
var import_react81 = require("react");
|
|
19051
19104
|
var import_jsx_runtime82 = require("react/jsx-runtime");
|
|
19052
19105
|
function ChartMapEffectCanvas({ effects, width, height, alpha = 0.95 }) {
|
|
19053
|
-
const canvas = (0,
|
|
19054
|
-
(0,
|
|
19106
|
+
const canvas = (0, import_react81.useRef)(null), key = JSON.stringify(effects);
|
|
19107
|
+
(0, import_react81.useEffect)(() => {
|
|
19055
19108
|
const element = canvas.current;
|
|
19056
19109
|
if (!element) return;
|
|
19057
19110
|
const context = element.getContext("2d");
|
|
@@ -19197,12 +19250,12 @@ function layoutTreeNodes(root, options = {}) {
|
|
|
19197
19250
|
}
|
|
19198
19251
|
|
|
19199
19252
|
// src/components/ChartDataEditor.tsx
|
|
19200
|
-
var
|
|
19253
|
+
var import_react82 = require("react");
|
|
19201
19254
|
var import_jsx_runtime83 = require("react/jsx-runtime");
|
|
19202
19255
|
function ChartDataEditor({ series, onApply, readOnly = false, allowNull = false }) {
|
|
19203
|
-
const [draft, setDraft] = (0,
|
|
19204
|
-
const [error, setError] = (0,
|
|
19205
|
-
const [applied, setApplied] = (0,
|
|
19256
|
+
const [draft, setDraft] = (0, import_react82.useState)(() => JSON.stringify(series.map((item) => item.data), null, 2));
|
|
19257
|
+
const [error, setError] = (0, import_react82.useState)("");
|
|
19258
|
+
const [applied, setApplied] = (0, import_react82.useState)(false);
|
|
19206
19259
|
function apply() {
|
|
19207
19260
|
try {
|
|
19208
19261
|
const values = JSON.parse(draft);
|
|
@@ -19233,11 +19286,11 @@ function ChartDataEditor({ series, onApply, readOnly = false, allowNull = false
|
|
|
19233
19286
|
}
|
|
19234
19287
|
|
|
19235
19288
|
// src/components/ChartBarStatistics.tsx
|
|
19236
|
-
var
|
|
19289
|
+
var import_react83 = require("react");
|
|
19237
19290
|
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
19238
19291
|
function ChartBarStatistics({ values, kinds, project, plot, horizontal, color, gradient, seriesName }) {
|
|
19239
|
-
const id = (0,
|
|
19240
|
-
const [active, setActive] = (0,
|
|
19292
|
+
const id = (0, import_react83.useId)().replaceAll(":", "");
|
|
19293
|
+
const [active, setActive] = (0, import_react83.useState)();
|
|
19241
19294
|
const paint = gradient ? `url(#${id})` : color;
|
|
19242
19295
|
return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("g", { children: [
|
|
19243
19296
|
gradient ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("linearGradient", { id, gradientUnits: "userSpaceOnUse", x1: gradient.start[0], y1: gradient.start[1], x2: gradient.end[0], y2: gradient.end[1], children: gradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, i)) }) }) : null,
|
|
@@ -19292,7 +19345,7 @@ function lineSegments(points) {
|
|
|
19292
19345
|
}
|
|
19293
19346
|
|
|
19294
19347
|
// src/components/useBarMagicState.ts
|
|
19295
|
-
var
|
|
19348
|
+
var import_react84 = require("react");
|
|
19296
19349
|
|
|
19297
19350
|
// src/components/cartesianMagicState.ts
|
|
19298
19351
|
function changeCartesianMagic(state, action) {
|
|
@@ -19307,8 +19360,8 @@ function changeCartesianMagic(state, action) {
|
|
|
19307
19360
|
function useBarMagicState(toolbox, shape = "bar") {
|
|
19308
19361
|
const initial3 = { shape, layout: "original" };
|
|
19309
19362
|
const options = toolbox === true ? {} : typeof toolbox === "object" ? toolbox : void 0;
|
|
19310
|
-
const [state, setState] = (0,
|
|
19311
|
-
(0,
|
|
19363
|
+
const [state, setState] = (0, import_react84.useState)(() => changeCartesianMagic(initial3, options?.activeMagicType ?? shape));
|
|
19364
|
+
(0, import_react84.useEffect)(() => {
|
|
19312
19365
|
if (options?.activeMagicType) setState((s) => changeCartesianMagic(s, options.activeMagicType));
|
|
19313
19366
|
}, [options?.activeMagicType]);
|
|
19314
19367
|
const resolved = options ? { ...options, activeMagicType: state.shape, activeMagicTypes: options.activeMagicTypes ?? (state.layout === "original" ? [state.shape] : [state.shape, state.layout]), onMagicTypeChange: (action) => {
|
|
@@ -19322,7 +19375,7 @@ function useBarMagicState(toolbox, shape = "bar") {
|
|
|
19322
19375
|
}
|
|
19323
19376
|
|
|
19324
19377
|
// src/components/useBarValueTransfer.ts
|
|
19325
|
-
var
|
|
19378
|
+
var import_react85 = require("react");
|
|
19326
19379
|
|
|
19327
19380
|
// src/components/barTransfer.ts
|
|
19328
19381
|
function transferBarValue(series, source, target, categories) {
|
|
@@ -19339,10 +19392,10 @@ function transferBarValue(series, source, target, categories) {
|
|
|
19339
19392
|
|
|
19340
19393
|
// src/components/useBarValueTransfer.ts
|
|
19341
19394
|
function useBarValueTransfer(series, initial3, categories, enabled, publish, onError) {
|
|
19342
|
-
const [islands, setIslands] = (0,
|
|
19343
|
-
const drag = (0,
|
|
19344
|
-
const [offset, setOffset] = (0,
|
|
19345
|
-
(0,
|
|
19395
|
+
const [islands, setIslands] = (0, import_react85.useState)([]);
|
|
19396
|
+
const drag = (0, import_react85.useRef)();
|
|
19397
|
+
const [offset, setOffset] = (0, import_react85.useState)();
|
|
19398
|
+
(0, import_react85.useEffect)(() => {
|
|
19346
19399
|
setIslands([]);
|
|
19347
19400
|
drag.current = void 0;
|
|
19348
19401
|
setOffset(void 0);
|
|
@@ -19443,12 +19496,12 @@ function logarithmicValueAt(progress, domain) {
|
|
|
19443
19496
|
|
|
19444
19497
|
// src/components/Charts.tsx
|
|
19445
19498
|
var import_jsx_runtime85 = require("react/jsx-runtime");
|
|
19446
|
-
var
|
|
19499
|
+
var import_react87 = require("react");
|
|
19447
19500
|
var PLOT = { x: 62, y: 48, width: 628, height: 250 };
|
|
19448
19501
|
var PLOT_BOTTOM = PLOT.y + PLOT.height;
|
|
19449
19502
|
function useLegendSelection(names, controlled, onChange) {
|
|
19450
|
-
const [internal, setInternal] = (0,
|
|
19451
|
-
(0,
|
|
19503
|
+
const [internal, setInternal] = (0, import_react86.useState)(() => Object.fromEntries(names.map((name) => [name, true])));
|
|
19504
|
+
(0, import_react86.useEffect)(() => {
|
|
19452
19505
|
setInternal((current) => {
|
|
19453
19506
|
const next = { ...current };
|
|
19454
19507
|
names.forEach((name) => {
|
|
@@ -19548,7 +19601,7 @@ function lineSymbol(type, x, y, size, color, image, strokeWidth = 2) {
|
|
|
19548
19601
|
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("circle", { cx: x, cy: y, r: size / 2, fill: color, stroke: "var(--sia-color-surface)", strokeWidth: 2 });
|
|
19549
19602
|
}
|
|
19550
19603
|
function useZoom(value, defaultValue, onChange) {
|
|
19551
|
-
const [internal, setInternal] = (0,
|
|
19604
|
+
const [internal, setInternal] = (0, import_react86.useState)([...defaultValue ?? [0, 100]]);
|
|
19552
19605
|
const current = value ?? internal;
|
|
19553
19606
|
const update = (next) => {
|
|
19554
19607
|
if (!value) setInternal(next);
|
|
@@ -19558,8 +19611,8 @@ function useZoom(value, defaultValue, onChange) {
|
|
|
19558
19611
|
}
|
|
19559
19612
|
function useToolboxMagicType(toolbox, fallback) {
|
|
19560
19613
|
const options = toolbox === true ? {} : typeof toolbox === "object" ? toolbox : void 0;
|
|
19561
|
-
const [internal, setInternal] = (0,
|
|
19562
|
-
(0,
|
|
19614
|
+
const [internal, setInternal] = (0, import_react86.useState)(options?.activeMagicType ?? fallback);
|
|
19615
|
+
(0, import_react86.useEffect)(() => {
|
|
19563
19616
|
if (options?.activeMagicType) setInternal(options.activeMagicType);
|
|
19564
19617
|
}, [options?.activeMagicType]);
|
|
19565
19618
|
const active = options?.activeMagicType ?? internal;
|
|
@@ -19577,15 +19630,15 @@ function useToolboxMagicType(toolbox, fallback) {
|
|
|
19577
19630
|
} : toolbox;
|
|
19578
19631
|
return [active, resolved];
|
|
19579
19632
|
}
|
|
19580
|
-
var LineChart = (0,
|
|
19581
|
-
const [hoverIndex, setHoverIndex] = (0,
|
|
19582
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
19583
|
-
const [dragPoint, setDragPoint] = (0,
|
|
19584
|
-
const linePaintId = (0,
|
|
19585
|
-
const [hoveredLinePoint, setHoveredLinePoint] = (0,
|
|
19586
|
-
(0,
|
|
19633
|
+
var LineChart = (0, import_react86.forwardRef)(function LineChart2({ calculableMode = "resize", onTransferError, grid, valueTransfer: externalValueTransfer, categories, series: sourceSeries, appearance = "sia", categoryLabelInterval = 0, boundaryGap = false, showCategorySplitLine = true, categoryAxisName, valueAxisName, legendLayout, logBase = 10, logExponentStep = 1, animationProgress, animationDurationUpdate = 500, valueDomain, axisLabelFormatter, stacked = false, orientation = "vertical", xAxisType = "category", valueAxisType = "value", valueAxisInverse = false, tooltipTrigger = "item", showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, valueFormatter, onDataClick, dataZoom = false, zoomIndexMode = "points", zoomPosition = "bottom", zoomControlBounds, zoomPan = false, zoomSelectionShape = "band", zoomSelectionStyle, zoomMinSelectionSize, calculable = false, zoom, defaultZoom, onZoomChange, onDataChange, palette, toolbox, ...props }, ref) {
|
|
19634
|
+
const [hoverIndex, setHoverIndex] = (0, import_react86.useState)(null);
|
|
19635
|
+
const [editableSeries, setEditableSeries] = (0, import_react86.useState)(sourceSeries);
|
|
19636
|
+
const [dragPoint, setDragPoint] = (0, import_react86.useState)(null);
|
|
19637
|
+
const linePaintId = (0, import_react86.useId)().replaceAll(":", "");
|
|
19638
|
+
const [hoveredLinePoint, setHoveredLinePoint] = (0, import_react86.useState)();
|
|
19639
|
+
(0, import_react86.useEffect)(() => setEditableSeries(sourceSeries), [sourceSeries]);
|
|
19587
19640
|
const series = externalValueTransfer ? sourceSeries : editableSeries;
|
|
19588
|
-
const initialTransferSeries = (0,
|
|
19641
|
+
const initialTransferSeries = (0, import_react86.useMemo)(() => sourceSeries.map((item) => ({ ...item, data: item.data.map(lineValue) })), [sourceSeries]);
|
|
19589
19642
|
const localTransfer = useBarValueTransfer(series.map((item) => ({ ...item, data: item.data.map(lineValue) })), initialTransferSeries, categories, calculable && calculableMode === "transfer" && !externalValueTransfer, (nextBars) => {
|
|
19590
19643
|
const next = series.map((item, row) => ({ ...item, data: item.data.map((datum, index) => {
|
|
19591
19644
|
const value = barDatum(nextBars[row].data[index]).value;
|
|
@@ -19602,8 +19655,8 @@ var LineChart = (0, import_react85.forwardRef)(function LineChart2({ calculableM
|
|
|
19602
19655
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
19603
19656
|
const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
|
|
19604
19657
|
const inlineZoom = dataZoom && zoomControlBounds ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("foreignObject", { className: "sia-chart__inline-zoom sia-chart__inline-zoom--compact", ...withTitleTooltip(zoomControlBounds), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChartDataZoom, { handleLabels: [categories[Math.min(categories.length - 1, Math.floor(Math.min(...zoomValue) / 100 * categories.length))] ?? "", categories[Math.max(0, Math.ceil(Math.max(...zoomValue) / 100 * categories.length) - 1)] ?? ""], shadowBounds: zoomControlBounds, panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), onChange: setZoomValue }) }) : null;
|
|
19605
|
-
const [zoomBrushActive, setZoomBrushActive] = (0,
|
|
19606
|
-
const [zoomHistory, setZoomHistory] = (0,
|
|
19658
|
+
const [zoomBrushActive, setZoomBrushActive] = (0, import_react86.useState)(false);
|
|
19659
|
+
const [zoomHistory, setZoomHistory] = (0, import_react86.useState)(() => dataZoom ? [defaultZoom ?? zoom ?? [0, 100]] : []);
|
|
19607
19660
|
const zoomBrush = dataZoom && zoomBrushActive ? { minSelectionSize: zoomMinSelectionSize, selectionStyle: zoomSelectionStyle, selectionShape: zoomSelectionShape, bounds: PLOT2, onCancel: () => setZoomBrushActive(false), onSelect: (range) => {
|
|
19608
19661
|
const start = Math.min(...zoomValue), span = Math.max(...zoomValue) - start;
|
|
19609
19662
|
const next = [start + range[0] * span, start + range[1] * span];
|
|
@@ -19990,17 +20043,17 @@ function ChartPin({ point, color, label }) {
|
|
|
19990
20043
|
function barDatum(datum) {
|
|
19991
20044
|
return typeof datum === "number" ? { value: datum } : datum;
|
|
19992
20045
|
}
|
|
19993
|
-
var BarChart = (0,
|
|
19994
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
19995
|
-
const [dragBar, setDragBar] = (0,
|
|
19996
|
-
const [hoveredBar, setHoveredBar] = (0,
|
|
19997
|
-
const barPaintId = (0,
|
|
20046
|
+
var BarChart = (0, import_react86.forwardRef)(function BarChart2({ valueTransfer: externalValueTransfer, calculableMode = "resize", onTransferError, categories, series: sourceSeries, appearance = "sia", animationProgress, animationDurationUpdate = 500, valueDomain, axisLabelFormatter, grid, valueAxisPosition = "bottom", showValueAxis = true, showCategoryAxis = true, showCategorySplitLine = false, tooltipTrigger = "item", tooltipFormatter, stacked = false, orientation = "vertical", minBarSize = 1, calculable = false, onDataChange, showLegend = true, legendOrder, legendLayout, barCategoryGap = 0.2, valuePadding = 0, legendInteractive = true, legendSelected, onLegendSelectionChange, valueFormatter, onDataClick, palette, toolbox, ...props }, ref) {
|
|
20047
|
+
const [editableSeries, setEditableSeries] = (0, import_react86.useState)(sourceSeries);
|
|
20048
|
+
const [dragBar, setDragBar] = (0, import_react86.useState)(null);
|
|
20049
|
+
const [hoveredBar, setHoveredBar] = (0, import_react86.useState)();
|
|
20050
|
+
const barPaintId = (0, import_react86.useId)().replaceAll(":", "");
|
|
19998
20051
|
const localTransfer = useBarValueTransfer(editableSeries, sourceSeries, categories, calculable && calculableMode === "transfer" && !externalValueTransfer, (next) => {
|
|
19999
20052
|
setEditableSeries(next);
|
|
20000
20053
|
onDataChange?.(next);
|
|
20001
20054
|
}, onTransferError);
|
|
20002
20055
|
const transfer = externalValueTransfer ?? localTransfer;
|
|
20003
|
-
(0,
|
|
20056
|
+
(0, import_react86.useEffect)(() => setEditableSeries(sourceSeries), [sourceSeries]);
|
|
20004
20057
|
const series = externalValueTransfer ? sourceSeries : editableSeries;
|
|
20005
20058
|
const legacy = appearance === "macarons";
|
|
20006
20059
|
const PLOT2 = legacy ? { x: grid?.left ?? 80, y: grid?.top ?? 60, width: (props.viewBoxSize?.[0] ?? 720) - (grid?.left ?? 80) - (grid?.right ?? 80), height: (props.viewBoxSize?.[1] ?? 360) - (grid?.top ?? 60) - (grid?.bottom ?? 70) } : { x: 62, y: 48, width: 628, height: 250 };
|
|
@@ -20247,17 +20300,17 @@ var BarChart = (0, import_react85.forwardRef)(function BarChart2({ valueTransfer
|
|
|
20247
20300
|
] }, `bar-island-${index}`)) : null
|
|
20248
20301
|
] });
|
|
20249
20302
|
});
|
|
20250
|
-
var ScatterChart = (0,
|
|
20251
|
-
const [data, setData] = (0,
|
|
20252
|
-
const [emphasizedPoint, setEmphasizedPoint] = (0,
|
|
20253
|
-
const [emphasizedAnnotation, setEmphasizedAnnotation] = (0,
|
|
20254
|
-
(0,
|
|
20303
|
+
var ScatterChart = (0, import_react86.forwardRef)(function ScatterChart2({ symbolAnimation = false, animationProgress, animationDurationUpdate = 500, statisticPoints = [], statisticLines = [], annotations = [], data: initialData, toolbox, showXAxis = true, showXSplitLine = true, showYSplitLine = true, tooltipFormatter, plotBounds, xDomain: fixedXDomain, yDomain: fixedYDomain, showPointLabels = false, yAxisPosition = "left", xCategories, xFormatter, crosshair = false, markColor, xSplitNumber = 5, ySplitNumber = 5, symbolSize, markAppearance = "label", markByCategory = false, xUnit = "", yUnit = "", minSymbolRadius = 5, xLabel, yLabel, xAxisType = "value", showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, dataZoom = false, zoom, defaultZoom, onZoomChange, visualMap, markAverage, markExtremes = false, largeThreshold = 1200, onDataClick, palette, ...props }, ref) {
|
|
20304
|
+
const [data, setData] = (0, import_react86.useState)(initialData);
|
|
20305
|
+
const [emphasizedPoint, setEmphasizedPoint] = (0, import_react86.useState)(null);
|
|
20306
|
+
const [emphasizedAnnotation, setEmphasizedAnnotation] = (0, import_react86.useState)();
|
|
20307
|
+
(0, import_react86.useEffect)(() => setData(initialData), [initialData]);
|
|
20255
20308
|
const plot = plotBounds ?? PLOT, bottom = plot.y + plot.height;
|
|
20256
20309
|
const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
|
|
20257
20310
|
const allCategories = [...new Set(data.map((item) => item.category).filter((value) => Boolean(value)))];
|
|
20258
20311
|
const legend = useLegendSelection(allCategories, legendSelected, onLegendSelectionChange);
|
|
20259
20312
|
const activeData = data.filter((item) => !item.category || legend.isSelected(item.category));
|
|
20260
|
-
const sorted = (0,
|
|
20313
|
+
const sorted = (0, import_react86.useMemo)(() => [...activeData].sort((left, right) => left.x - right.x), [activeData]);
|
|
20261
20314
|
const startIndex = dataZoom ? Math.floor(Math.min(...zoomValue) / 100 * Math.max(0, sorted.length - 1)) : 0;
|
|
20262
20315
|
const endIndex = dataZoom ? Math.max(startIndex + 1, Math.ceil(Math.max(...zoomValue) / 100 * sorted.length)) : sorted.length;
|
|
20263
20316
|
const categoryWindow = xCategories ? scatterCategoryWindow(xCategories, dataZoom ? zoomValue : [0, 100]) : void 0;
|
|
@@ -20272,10 +20325,10 @@ var ScatterChart = (0, import_react85.forwardRef)(function ScatterChart2({ symbo
|
|
|
20272
20325
|
const visualMinimum = visualMap?.min ?? (visualValues.length ? Math.min(...visualValues) : 0);
|
|
20273
20326
|
const visualMaximum = visualMap?.max ?? (visualValues.length ? Math.max(...visualValues) : 1);
|
|
20274
20327
|
const visualColors = visualMap?.colors ?? ["#e6f4ff", "#1677ff"];
|
|
20275
|
-
const [selectedPieces, setSelectedPieces] = (0,
|
|
20276
|
-
const [visualRange, setVisualRange] = (0,
|
|
20328
|
+
const [selectedPieces, setSelectedPieces] = (0, import_react86.useState)([]);
|
|
20329
|
+
const [visualRange, setVisualRange] = (0, import_react86.useState)();
|
|
20277
20330
|
const piecesKey = JSON.stringify(visualMap?.pieces ?? []);
|
|
20278
|
-
(0,
|
|
20331
|
+
(0, import_react86.useEffect)(() => setSelectedPieces([]), [piecesKey]);
|
|
20279
20332
|
const statistics = scatterStatistics(visibleData, markByCategory);
|
|
20280
20333
|
const plotted = visibleData.map((item, index) => {
|
|
20281
20334
|
const x = linearScale(categoryWindow ? categoryWindow.indexOf(item.x) : item.x, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]);
|
|
@@ -20433,8 +20486,8 @@ var ScatterChart = (0, import_react85.forwardRef)(function ScatterChart2({ symbo
|
|
|
20433
20486
|
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChartDataZoom, { value: zoomValue, onChange: setZoomValue })
|
|
20434
20487
|
] }) : content;
|
|
20435
20488
|
});
|
|
20436
|
-
var CandlestickChart = (0,
|
|
20437
|
-
const [data, setData] = (0,
|
|
20489
|
+
var CandlestickChart = (0, import_react86.forwardRef)(function CandlestickChart2({ showAxes = true, data: initialData, valueDomain, axisLabelFormatter, activeIndex, onActiveIndexChange, seriesVisible: controlledVisible, onSeriesVisibilityChange, showLegend = true, showCategoryLabels = true, plotBounds, markPoints, seriesName, risingBorderColor, fallingBorderColor, borderWidth = 2, risingEmphasisColor, fallingEmphasisColor, maxBarWidth = 34, appearance = "sia", risingColor = "#f5222d", fallingColor = "#52c41a", hollowRising = false, dataZoom = false, zoom, defaultZoom, onZoomChange, markExtremes = false, onDataClick, toolbox, ...props }, ref) {
|
|
20490
|
+
const [data, setData] = (0, import_react86.useState)(initialData), [internalActive, setInternalActive] = (0, import_react86.useState)(null), [internalVisible, setInternalVisible] = (0, import_react86.useState)(true);
|
|
20438
20491
|
const active = activeIndex === void 0 ? internalActive : activeIndex;
|
|
20439
20492
|
const seriesVisible = controlledVisible ?? internalVisible;
|
|
20440
20493
|
const setActive = (index) => {
|
|
@@ -20445,7 +20498,7 @@ var CandlestickChart = (0, import_react85.forwardRef)(function CandlestickChart2
|
|
|
20445
20498
|
if (controlledVisible === void 0) setInternalVisible(visible);
|
|
20446
20499
|
onSeriesVisibilityChange?.(visible);
|
|
20447
20500
|
};
|
|
20448
|
-
(0,
|
|
20501
|
+
(0, import_react86.useEffect)(() => {
|
|
20449
20502
|
setData(initialData);
|
|
20450
20503
|
}, [initialData]);
|
|
20451
20504
|
const legacy = appearance === "macarons";
|
|
@@ -20536,20 +20589,20 @@ var CandlestickChart = (0, import_react85.forwardRef)(function CandlestickChart2
|
|
|
20536
20589
|
] }) : content;
|
|
20537
20590
|
});
|
|
20538
20591
|
var EMPTY_PIE_DATA = [];
|
|
20539
|
-
var PieChart = (0,
|
|
20540
|
-
const pieGradientId = (0,
|
|
20541
|
-
const [pieIslands, setPieIslands] = (0,
|
|
20542
|
-
const sourceRings = (0,
|
|
20543
|
-
const [editableRings, setEditableRings] = (0,
|
|
20544
|
-
const valueDrag = (0,
|
|
20545
|
-
const [valueOffset, setValueOffset] = (0,
|
|
20546
|
-
(0,
|
|
20592
|
+
var PieChart = (0, import_react86.forwardRef)(function PieChart2({ pulseRing, calculable = false, markPoints = [], data = EMPTY_PIE_DATA, series, innerRadius = 62, outerRadius = 124, rose = false, center = [360, 173], startAngle = -90, clockwise = true, padAngle = 0, showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, showLabels = true, showLabelLines = true, centerLabel, selectedMode = false, selected, defaultSelected, selectedOffset = 9, onSelectionChange, onDataClick, palette, toolbox, appearance = "sia", animationProgress, animationDurationUpdate = 500, legendLayout, showGuideRings = false, onDataChange, transferId, onValueTransfer, onTransferError, onValueDragOut, outsideLabelLayout, ...props }, ref) {
|
|
20593
|
+
const pieGradientId = (0, import_react86.useId)().replace(/:/g, "");
|
|
20594
|
+
const [pieIslands, setPieIslands] = (0, import_react86.useState)([]);
|
|
20595
|
+
const sourceRings = (0, import_react86.useMemo)(() => series?.length ? series : [{ data, innerRadius, outerRadius, rose, showLabels }], [series, data, innerRadius, outerRadius, rose, showLabels]);
|
|
20596
|
+
const [editableRings, setEditableRings] = (0, import_react86.useState)(sourceRings);
|
|
20597
|
+
const valueDrag = (0, import_react86.useRef)(null);
|
|
20598
|
+
const [valueOffset, setValueOffset] = (0, import_react86.useState)();
|
|
20599
|
+
(0, import_react86.useEffect)(() => setEditableRings(sourceRings), [sourceRings]);
|
|
20547
20600
|
const allData = editableRings.flatMap((ring) => ring.data).filter((item) => !item.missing);
|
|
20548
20601
|
const names = [...new Set(allData.map((item) => item.name))];
|
|
20549
20602
|
const legend = useLegendSelection(names, legendSelected, onLegendSelectionChange);
|
|
20550
20603
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u997C\u56FE");
|
|
20551
|
-
const [hovered, setHovered] = (0,
|
|
20552
|
-
const [internalSelected, setInternalSelected] = (0,
|
|
20604
|
+
const [hovered, setHovered] = (0, import_react86.useState)();
|
|
20605
|
+
const [internalSelected, setInternalSelected] = (0, import_react86.useState)(() => [...defaultSelected ?? allData.filter((item) => item.selected).map((item) => item.name)]);
|
|
20553
20606
|
const selectedNames = selected ?? internalSelected;
|
|
20554
20607
|
const legacy = appearance === "macarons";
|
|
20555
20608
|
const colorNames = [...new Set(allData.filter((item) => item.showInLegend !== false).map((item) => item.name))];
|
|
@@ -20769,15 +20822,15 @@ var PieChart = (0, import_react85.forwardRef)(function PieChart2({ pulseRing, ca
|
|
|
20769
20822
|
});
|
|
20770
20823
|
var EMPTY_RADAR_INDICATORS = [];
|
|
20771
20824
|
var EMPTY_RADAR_SERIES = [];
|
|
20772
|
-
var RadarChart = (0,
|
|
20825
|
+
var RadarChart = (0, import_react86.forwardRef)(function RadarChart2({ indicators = EMPTY_RADAR_INDICATORS, series = EMPTY_RADAR_SERIES, radars, calculable = false, onTransferError, markers, levels = 5, showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, toolbox, appearance = "sia", animationProgress, legendOrder, legendLayout, onDataChange, ...props }, ref) {
|
|
20773
20826
|
const legacy = appearance === "macarons";
|
|
20774
|
-
const initialPanels = (0,
|
|
20775
|
-
const [sourcePanels, setSourcePanels] = (0,
|
|
20776
|
-
const [hoveredRadar, setHoveredRadar] = (0,
|
|
20777
|
-
const radarPaintId = `sia-radar-${(0,
|
|
20778
|
-
const radarDrag = (0,
|
|
20779
|
-
const [radarOffset, setRadarOffset] = (0,
|
|
20780
|
-
(0,
|
|
20827
|
+
const initialPanels = (0, import_react86.useMemo)(() => radars?.length ? radars : [{ indicators, series, levels }], [radars, indicators, series, levels]);
|
|
20828
|
+
const [sourcePanels, setSourcePanels] = (0, import_react86.useState)(initialPanels);
|
|
20829
|
+
const [hoveredRadar, setHoveredRadar] = (0, import_react86.useState)(null);
|
|
20830
|
+
const radarPaintId = `sia-radar-${(0, import_react86.useId)().replaceAll(":", "")}`;
|
|
20831
|
+
const radarDrag = (0, import_react86.useRef)(null);
|
|
20832
|
+
const [radarOffset, setRadarOffset] = (0, import_react86.useState)(null);
|
|
20833
|
+
(0, import_react86.useEffect)(() => {
|
|
20781
20834
|
setSourcePanels(initialPanels);
|
|
20782
20835
|
radarDrag.current = null;
|
|
20783
20836
|
setRadarOffset(null);
|
|
@@ -20931,7 +20984,7 @@ var RadarChart = (0, import_react85.forwardRef)(function RadarChart2({ indicator
|
|
|
20931
20984
|
})
|
|
20932
20985
|
] });
|
|
20933
20986
|
});
|
|
20934
|
-
var ChordChart = (0,
|
|
20987
|
+
var ChordChart = (0, import_react86.forwardRef)(function ChordChart2({ nodes, links, nodeGeometry, matrixAppearance, matrix, matrixSeries, showNodeLabels = false, rotateNodeLabels = false, matrixLinkLabel, matrixGeometry, legacySubSort = false, showScale = false, sortSub = "none", padAngle = 0.035, ribbon = true, clockwise = true, sort = "none", onNodeClick, onLinkClick, palette, toolbox, ...props }, ref) {
|
|
20935
20988
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u548C\u5F26");
|
|
20936
20989
|
if (/force|力导向|关系/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
|
|
20937
20990
|
GraphChart,
|
|
@@ -21004,11 +21057,11 @@ var ChordChart = (0, import_react85.forwardRef)(function ChordChart2({ nodes, li
|
|
|
21004
21057
|
})
|
|
21005
21058
|
] });
|
|
21006
21059
|
});
|
|
21007
|
-
var GraphChart = (0,
|
|
21060
|
+
var GraphChart = (0, import_react86.forwardRef)(function GraphChart2({ nodes, links, roam = false, chordOptions, forceOptions, progressiveForce = false, layout = "circular", showLabels = true, draggable = true, legendInteractive = true, legendSelected, onLegendSelectionChange, onNodeClick, palette, toolbox, ...props }, ref) {
|
|
21008
21061
|
const categories = [...new Set(nodes.map((node) => node.category).filter((value) => Boolean(value)))];
|
|
21009
21062
|
const legend = useLegendSelection(categories, legendSelected, onLegendSelectionChange);
|
|
21010
21063
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, layout === "force" ? "\u529B\u5BFC\u5411" : "\u5173\u7CFB");
|
|
21011
|
-
const [roamReset, setRoamReset] = (0,
|
|
21064
|
+
const [roamReset, setRoamReset] = (0, import_react86.useState)(0);
|
|
21012
21065
|
const chartToolbox = typeof resolvedToolbox === "object" ? {
|
|
21013
21066
|
...resolvedToolbox,
|
|
21014
21067
|
onRestore: () => {
|
|
@@ -21017,23 +21070,23 @@ var GraphChart = (0, import_react85.forwardRef)(function GraphChart2({ nodes, li
|
|
|
21017
21070
|
resolvedToolbox.onRestore?.();
|
|
21018
21071
|
}
|
|
21019
21072
|
} : resolvedToolbox;
|
|
21020
|
-
const activeNodes = (0,
|
|
21021
|
-
const activeLinks = (0,
|
|
21073
|
+
const activeNodes = (0, import_react86.useMemo)(() => nodes.filter((node) => !node.category || legend.selected[node.category] !== false), [legend.selected, nodes]);
|
|
21074
|
+
const activeLinks = (0, import_react86.useMemo)(() => {
|
|
21022
21075
|
const activeIds = new Set(activeNodes.map((node) => node.id));
|
|
21023
21076
|
return links.filter((link) => activeIds.has(link.source) && activeIds.has(link.target));
|
|
21024
21077
|
}, [activeNodes, links]);
|
|
21025
21078
|
const progressive = progressiveForce && layout === "force" && props.animation !== false && !/chord|和弦/i.test(magicType);
|
|
21026
|
-
const calculatedPositions = (0,
|
|
21027
|
-
const [positions, setPositions] = (0,
|
|
21028
|
-
const [dragging, setDragging] = (0,
|
|
21029
|
-
const heldNode = (0,
|
|
21030
|
-
const [forceRestart, setForceRestart] = (0,
|
|
21031
|
-
(0,
|
|
21079
|
+
const calculatedPositions = (0, import_react86.useMemo)(() => graphLayout(activeNodes, activeLinks, layout === "force" && !progressive, forceOptions), [activeLinks, activeNodes, layout, forceOptions, progressive]);
|
|
21080
|
+
const [positions, setPositions] = (0, import_react86.useState)(calculatedPositions);
|
|
21081
|
+
const [dragging, setDragging] = (0, import_react86.useState)(null);
|
|
21082
|
+
const heldNode = (0, import_react86.useRef)(null);
|
|
21083
|
+
const [forceRestart, setForceRestart] = (0, import_react86.useState)(0);
|
|
21084
|
+
(0, import_react86.useEffect)(() => {
|
|
21032
21085
|
setPositions(calculatedPositions);
|
|
21033
21086
|
setDragging(null);
|
|
21034
21087
|
heldNode.current = null;
|
|
21035
21088
|
}, [calculatedPositions, roamReset]);
|
|
21036
|
-
(0,
|
|
21089
|
+
(0, import_react86.useEffect)(() => {
|
|
21037
21090
|
if (!progressive || activeNodes.length > (forceOptions?.maxNodes ?? 80)) return;
|
|
21038
21091
|
let frame = 0, remaining = Math.max(0, forceOptions?.iterations ?? 140), previous, carry = 0;
|
|
21039
21092
|
const tick = (time) => {
|
|
@@ -21151,7 +21204,7 @@ var GraphChart = (0, import_react85.forwardRef)(function GraphChart2({ nodes, li
|
|
|
21151
21204
|
] })
|
|
21152
21205
|
] });
|
|
21153
21206
|
});
|
|
21154
|
-
var ForceGraphChart = (0,
|
|
21207
|
+
var ForceGraphChart = (0, import_react86.forwardRef)(function ForceGraphChart2(props, ref) {
|
|
21155
21208
|
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(GraphChart, { ...props, layout: "force", ref });
|
|
21156
21209
|
});
|
|
21157
21210
|
var ForceChart = ForceGraphChart;
|
|
@@ -21180,12 +21233,12 @@ function colorBetween(start, end, ratio) {
|
|
|
21180
21233
|
const to = read(end);
|
|
21181
21234
|
return `rgb(${from.map((value, index) => Math.round(value + ((to[index] ?? value) - value) * Math.max(0, Math.min(1, ratio)))).join(" ")})`;
|
|
21182
21235
|
}
|
|
21183
|
-
var MapChart = (0,
|
|
21184
|
-
const [internalSelected, setInternalSelected] = (0,
|
|
21236
|
+
var MapChart = (0, import_react86.forwardRef)(function MapChart2({ overlayProjection, bundledLines, largeMarkPoints, markLineEffectRenderer = "svg", insetStyle, insetLabelStyle, regionHoverable = true, markPointTooltipFormatter, emphasisValueRange, onRegionHover, coordinateTransform, specialAreas, labelCoordinates, labelOffsets, nameMap, wheelZoomFactors, clampVisualValues = false, showMap = true, visualMapLayout, labelStyle, emphasisLabelStyle, regionStyle, emphasisRegionStyle, outOfRangeColor, scaleLimit, roamController = false, map, geoJson, data, colors = ["#e6f4ff", "#1677ff"], nameProperty = "name", showLabels = true, showEmphasisLabels = false, tooltipFormatter, roam = false, selectedMode = false, selected, defaultSelected, onSelectionChange, calculableVisualMap = false, visualRange, defaultVisualRange, onVisualRangeChange, markPoints = [], markLines = [], onRegionClick, toolbox, plotBounds: sourcePlotBounds, longitudeRatio, geographicInsets = [], valueDomain, showVisualMap = true, seriesName, ...props }, ref) {
|
|
21237
|
+
const [internalSelected, setInternalSelected] = (0, import_react86.useState)(() => [...defaultSelected ?? data.filter((item) => item.selected).map((item) => item.name)]);
|
|
21185
21238
|
const selectedNames = selected ?? internalSelected;
|
|
21186
|
-
const [hoveredRegion, setHoveredRegion] = (0,
|
|
21187
|
-
const [hoveredMarkPoint, setHoveredMarkPoint] = (0,
|
|
21188
|
-
const [internalHoveredValueRange, setHoveredValueRange] = (0,
|
|
21239
|
+
const [hoveredRegion, setHoveredRegion] = (0, import_react86.useState)();
|
|
21240
|
+
const [hoveredMarkPoint, setHoveredMarkPoint] = (0, import_react86.useState)();
|
|
21241
|
+
const [internalHoveredValueRange, setHoveredValueRange] = (0, import_react86.useState)();
|
|
21189
21242
|
const hoveredValueRange = emphasisValueRange ?? internalHoveredValueRange;
|
|
21190
21243
|
const roamControl = useMapRoam(roam, scaleLimit, wheelZoomFactors);
|
|
21191
21244
|
const { view } = roamControl;
|
|
@@ -21200,8 +21253,8 @@ var MapChart = (0, import_react85.forwardRef)(function MapChart2({ overlayProjec
|
|
|
21200
21253
|
const values = data.map((item) => item.value);
|
|
21201
21254
|
const minimum = valueDomain?.[0] ?? (values.length ? Math.min(...values) : 0);
|
|
21202
21255
|
const maximum = valueDomain?.[1] ?? (values.length ? Math.max(...values) : 1);
|
|
21203
|
-
const [internalVisualRange, setInternalVisualRange] = (0,
|
|
21204
|
-
(0,
|
|
21256
|
+
const [internalVisualRange, setInternalVisualRange] = (0, import_react86.useState)(() => [...defaultVisualRange ?? [minimum, maximum]]);
|
|
21257
|
+
(0, import_react86.useEffect)(() => {
|
|
21205
21258
|
if (!visualRange && !defaultVisualRange) setInternalVisualRange([minimum, maximum]);
|
|
21206
21259
|
}, [defaultVisualRange, maximum, minimum, visualRange]);
|
|
21207
21260
|
const currentVisualRange = visualRange ?? internalVisualRange;
|
|
@@ -21377,7 +21430,7 @@ var MapChart = (0, import_react85.forwardRef)(function MapChart2({ overlayProjec
|
|
|
21377
21430
|
roamController ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChartRoamController, { x: (props.viewBoxSize?.[0] ?? 720) - 90, y: 5, onPan: roamControl.pan, onZoom: (factor) => roamControl.zoom(factor, [(props.viewBoxSize?.[0] ?? 720) / 2, (props.viewBoxSize?.[1] ?? 360) / 2]) }) : null
|
|
21378
21431
|
] });
|
|
21379
21432
|
});
|
|
21380
|
-
var GaugeChart = (0,
|
|
21433
|
+
var GaugeChart = (0, import_react86.forwardRef)(function GaugeChart2({ tooltipFormatter, data, min = 0, max = 100, startAngle = 210, endAngle = -30, segments, splitNumber = 10, showAxisLabels = true, showProgress = true, detailOffset = 84, valueFormatter, onDataClick, palette, appearance = "sia", animationProgress, ...props }, ref) {
|
|
21381
21434
|
const count = Math.max(1, data.length);
|
|
21382
21435
|
const legacy = appearance === "macarons";
|
|
21383
21436
|
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SiaChart, { ...props, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, palette, empty: !data.length, ariaLabel: props.ariaLabel ?? "\u4EEA\u8868\u76D8", children: [...data].sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0)).map((item, index) => {
|
|
@@ -21460,12 +21513,12 @@ var GaugeChart = (0, import_react85.forwardRef)(function GaugeChart2({ tooltipFo
|
|
|
21460
21513
|
] }, `${item.name}-${index}`);
|
|
21461
21514
|
}) });
|
|
21462
21515
|
});
|
|
21463
|
-
var FunnelChart = (0,
|
|
21516
|
+
var FunnelChart = (0, import_react86.forwardRef)(function FunnelChart2({ data = EMPTY_PIE_DATA, series, sort = "descending", gap = 4, align = "center", orientation = "vertical", showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, toolbox, appearance = "sia", animationProgress, legendOrder, legendLayout, onDataChange, ...props }, ref) {
|
|
21464
21517
|
const legacy = appearance === "macarons";
|
|
21465
|
-
const [activeFunnel, setActiveFunnel] = (0,
|
|
21466
|
-
const initialFunnels = (0,
|
|
21467
|
-
const [sourceFunnels, setSourceFunnels] = (0,
|
|
21468
|
-
(0,
|
|
21518
|
+
const [activeFunnel, setActiveFunnel] = (0, import_react86.useState)(null);
|
|
21519
|
+
const initialFunnels = (0, import_react86.useMemo)(() => series?.length ? series : [{ data, sort, gap, align, orientation }], [series, data, sort, gap, align, orientation]);
|
|
21520
|
+
const [sourceFunnels, setSourceFunnels] = (0, import_react86.useState)(initialFunnels);
|
|
21521
|
+
(0, import_react86.useEffect)(() => setSourceFunnels(initialFunnels), [initialFunnels]);
|
|
21469
21522
|
const allData = sourceFunnels.flatMap((funnel) => funnel.data);
|
|
21470
21523
|
const legendData = [...new Map(allData.map((item) => [item.name, item])).values()];
|
|
21471
21524
|
const legend = useLegendSelection(legendData.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -21556,7 +21609,7 @@ var FunnelChart = (0, import_react85.forwardRef)(function FunnelChart2({ data =
|
|
|
21556
21609
|
})
|
|
21557
21610
|
] });
|
|
21558
21611
|
});
|
|
21559
|
-
var HeatmapChart = (0,
|
|
21612
|
+
var HeatmapChart = (0, import_react86.forwardRef)(function HeatmapChart2({ raster, xLabels = [], yLabels = [], data = [], points = [], colors = ["#e6f4ff", "#1677ff"], showValues = false, pointRadius = 30, blur = 16, minAlpha = 0.12, maxAlpha = 0.82, valueFormatter, onDataClick, ...props }, ref) {
|
|
21560
21613
|
const pointMode = points.length > 0;
|
|
21561
21614
|
const values = pointMode ? points.map((point) => point.value) : data.flatMap((row) => [...row]);
|
|
21562
21615
|
const minimum = values.length ? Math.min(...values) : 0;
|
|
@@ -21565,7 +21618,7 @@ var HeatmapChart = (0, import_react85.forwardRef)(function HeatmapChart2({ raste
|
|
|
21565
21618
|
const cellHeight = PLOT.height / Math.max(1, yLabels.length);
|
|
21566
21619
|
const pointXDomain = niceChartDomain(points.map((point) => point.x), false);
|
|
21567
21620
|
const pointYDomain = niceChartDomain(points.map((point) => point.y), false);
|
|
21568
|
-
const filterId = `sia-heat-${(0,
|
|
21621
|
+
const filterId = `sia-heat-${(0, import_react86.useId)().replaceAll(":", "")}`;
|
|
21569
21622
|
if (raster) return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(SiaChart, { ...props, ref, empty: !points.length, ariaLabel: props.ariaLabel ?? "\u50CF\u7D20\u70ED\u529B\u56FE", children: [
|
|
21570
21623
|
raster.backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("image", { href: raster.backgroundImage, x: 0, y: 0, width: raster.width, height: raster.height, preserveAspectRatio: "none", pointerEvents: "none" }) : null,
|
|
21571
21624
|
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)(HeatmapRaster, { width: raster.width, height: raster.height, points, options: raster })
|
|
@@ -21601,7 +21654,7 @@ var HeatmapChart = (0, import_react85.forwardRef)(function HeatmapChart2({ raste
|
|
|
21601
21654
|
] })
|
|
21602
21655
|
] });
|
|
21603
21656
|
});
|
|
21604
|
-
var ThemeRiverChart = (0,
|
|
21657
|
+
var ThemeRiverChart = (0, import_react86.forwardRef)(function ThemeRiverChart2({ categories, series, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, ...props }, ref) {
|
|
21605
21658
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
21606
21659
|
const activeSeries = series.filter((item) => legend.isSelected(item.name));
|
|
21607
21660
|
const totals = categories.map((_, index) => activeSeries.reduce((sum, item) => sum + Math.max(0, item.data[index] ?? 0), 0));
|
|
@@ -21639,8 +21692,8 @@ function eventTime(value) {
|
|
|
21639
21692
|
if (typeof value === "number") return value;
|
|
21640
21693
|
return Date.parse(/^\d{4}-\d{2}-\d{2}$/.test(value) ? value.replace(/-/g, "/") : value);
|
|
21641
21694
|
}
|
|
21642
|
-
var EventRiverChart = (0,
|
|
21643
|
-
const [restoreVersion, setRestoreVersion] = (0,
|
|
21695
|
+
var EventRiverChart = (0, import_react86.forwardRef)(function EventRiverChart2({ series, showLabels = true, draggable = true, appearance = "sia", plot = PLOT, animationProgress, boundaryGap = [0.05, 0.1], legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, ...props }, ref) {
|
|
21696
|
+
const [restoreVersion, setRestoreVersion] = (0, import_react86.useState)(0);
|
|
21644
21697
|
const area = plot;
|
|
21645
21698
|
palette = palette ?? (appearance === "macarons" ? ["#2ec7c9", "#b6a2de"] : void 0);
|
|
21646
21699
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -21713,9 +21766,9 @@ function vennDistance(radiusA, radiusB, overlap) {
|
|
|
21713
21766
|
}
|
|
21714
21767
|
return (low + high) / 2;
|
|
21715
21768
|
}
|
|
21716
|
-
var VennChart = (0,
|
|
21717
|
-
const [sets, setSets] = (0,
|
|
21718
|
-
(0,
|
|
21769
|
+
var VennChart = (0, import_react86.forwardRef)(function VennChart2({ sets: initialSets, intersection: initialIntersection, appearance = "sia", emphasisColor, emphasisBorderColor, emphasisBorderWidth, onDataClick, palette, toolbox, ...props }, ref) {
|
|
21770
|
+
const [sets, setSets] = (0, import_react86.useState)(initialSets), [intersection, setIntersection] = (0, import_react86.useState)(initialIntersection), [active, setActive] = (0, import_react86.useState)();
|
|
21771
|
+
(0, import_react86.useEffect)(() => {
|
|
21719
21772
|
setSets(initialSets);
|
|
21720
21773
|
setIntersection(initialIntersection);
|
|
21721
21774
|
}, [initialSets, initialIntersection]);
|
|
@@ -21778,17 +21831,17 @@ function layoutTreemap(nodes, x, y, width, height, gap, maxDepth, depth = 0, see
|
|
|
21778
21831
|
});
|
|
21779
21832
|
return result;
|
|
21780
21833
|
}
|
|
21781
|
-
var TreemapChart = (0,
|
|
21782
|
-
const [path, setPath] = (0,
|
|
21783
|
-
const [sourceData, setSourceData] = (0,
|
|
21784
|
-
const [active, setActive] = (0,
|
|
21785
|
-
(0,
|
|
21834
|
+
var TreemapChart = (0, import_react86.forwardRef)(function TreemapChart2({ data, gap = 4, maxDepth = 2, drilldown = false, showBreadcrumb = true, bounds, itemStyle, emphasis, cornerRadius = 5, showChildBoundaries = false, breadcrumbPosition = "top", breadcrumbRootName = "\u5168\u90E8", valueFormatter, onDataClick, palette, toolbox, ...props }, ref) {
|
|
21835
|
+
const [path, setPath] = (0, import_react86.useState)([]);
|
|
21836
|
+
const [sourceData, setSourceData] = (0, import_react86.useState)(data);
|
|
21837
|
+
const [active, setActive] = (0, import_react86.useState)();
|
|
21838
|
+
(0, import_react86.useEffect)(() => {
|
|
21786
21839
|
setSourceData(data);
|
|
21787
21840
|
setPath([]);
|
|
21788
21841
|
}, [data]);
|
|
21789
21842
|
const currentData = path.reduce((nodes, name) => nodes.find((node) => node.name === name)?.children ?? nodes, sourceData);
|
|
21790
21843
|
const top = drilldown && showBreadcrumb ? 52 : 28;
|
|
21791
|
-
const rectangles = (0,
|
|
21844
|
+
const rectangles = (0, import_react86.useMemo)(() => layoutTreemap(currentData, bounds?.x ?? 24, bounds?.y ?? top, bounds?.width ?? 672, bounds?.height ?? 336 - top, gap, maxDepth), [currentData, gap, maxDepth, top, bounds]);
|
|
21792
21845
|
const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChartDataEditor, { readOnly: toolbox.dataViewReadOnly, series: currentData.map((node) => ({ name: node.name, data: [treemapValue(node)] })), onApply: (values) => {
|
|
21793
21846
|
const update = (nodes, depth) => nodes.map((node, i) => depth === path.length ? { ...node, value: values[i][0] } : node.name === path[depth] ? { ...node, children: update(node.children ?? [], depth + 1) } : node);
|
|
21794
21847
|
setSourceData(update(sourceData, 0));
|
|
@@ -21856,15 +21909,15 @@ function flattenTree2(root, collapsed) {
|
|
|
21856
21909
|
visit(root, 0);
|
|
21857
21910
|
return { nodes, leafCount: Math.max(1, leafOrder), maxDepth: Math.max(0, ...nodes.map((item) => item.depth)) };
|
|
21858
21911
|
}
|
|
21859
|
-
var TreeChart = (0,
|
|
21860
|
-
const [sourceData, setSourceData] = (0,
|
|
21861
|
-
const [roamReset, setRoamReset] = (0,
|
|
21862
|
-
const [active, setActive] = (0,
|
|
21863
|
-
(0,
|
|
21912
|
+
var TreeChart = (0, import_react86.forwardRef)(function TreeChart2({ data, itemStyle, emphasis, orientation = "horizontal", radial = false, nodeSize = 8, rootPosition, nodePadding, layerPadding, showLabels = true, emphasisShowLabels = true, nodeColor, edgeColor, edgeWidth, edgeShadow, roam = false, hoverable = true, labelFontSize, labelColor, linkStyle = "curve", collapsible = false, onToggle, onDataClick, palette, toolbox, ...props }, ref) {
|
|
21913
|
+
const [sourceData, setSourceData] = (0, import_react86.useState)(data);
|
|
21914
|
+
const [roamReset, setRoamReset] = (0, import_react86.useState)(0);
|
|
21915
|
+
const [active, setActive] = (0, import_react86.useState)();
|
|
21916
|
+
(0, import_react86.useEffect)(() => {
|
|
21864
21917
|
setSourceData(data);
|
|
21865
21918
|
setActive(void 0);
|
|
21866
21919
|
}, [data]);
|
|
21867
|
-
const [collapsed, setCollapsed] = (0,
|
|
21920
|
+
const [collapsed, setCollapsed] = (0, import_react86.useState)(() => {
|
|
21868
21921
|
const result = /* @__PURE__ */ new Set();
|
|
21869
21922
|
const visit = (node) => {
|
|
21870
21923
|
if (node.collapsed) result.add(node.name);
|
|
@@ -21873,8 +21926,8 @@ var TreeChart = (0, import_react85.forwardRef)(function TreeChart2({ data, itemS
|
|
|
21873
21926
|
visit(data);
|
|
21874
21927
|
return result;
|
|
21875
21928
|
});
|
|
21876
|
-
const layout = (0,
|
|
21877
|
-
const fixedLayout = (0,
|
|
21929
|
+
const layout = (0, import_react86.useMemo)(() => flattenTree2(sourceData, collapsed), [collapsed, sourceData]);
|
|
21930
|
+
const fixedLayout = (0, import_react86.useMemo)(() => {
|
|
21878
21931
|
const visible = (node) => ({ ...node, children: collapsed.has(node.name) ? [] : node.children?.map(visible) });
|
|
21879
21932
|
return rootPosition ? layoutTreeNodes(visible(sourceData), { nodeSize, nodePadding, layerPadding, rootPosition, orientation }) : void 0;
|
|
21880
21933
|
}, [sourceData, collapsed, rootPosition, nodeSize, nodePadding, layerPadding, orientation]);
|
|
@@ -21944,15 +21997,15 @@ var TreeChart = (0, import_react85.forwardRef)(function TreeChart2({ data, itemS
|
|
|
21944
21997
|
})
|
|
21945
21998
|
] }) });
|
|
21946
21999
|
});
|
|
21947
|
-
var WordCloudChart = (0,
|
|
21948
|
-
const placements = (0,
|
|
22000
|
+
var WordCloudChart = (0, import_react86.forwardRef)(function WordCloudChart2({ data, bounds, areaSizing = false, autoFit = false, onLayout, minFontSize = 14, maxFontSize = 52, rotations = [0, 0, -28, 28, 0], spiralStep = 9, shape = "ellipse", padding = 4, fontFamily, fontWeight = 650, onDataClick, palette, ...props }, ref) {
|
|
22001
|
+
const placements = (0, import_react86.useMemo)(() => {
|
|
21949
22002
|
const context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
|
|
21950
22003
|
return layoutCloudWords(data, { bounds: bounds ?? { x: 18, y: 18, width: 684, height: 324 }, minFontSize, maxFontSize, rotations, spiralStep, shape, padding, autoFit, areaSizing, measure: context ? (word, size) => {
|
|
21951
22004
|
context.font = `${word.fontWeight ?? fontWeight} ${size}px ${word.fontFamily ?? fontFamily ?? "Arial"}`;
|
|
21952
22005
|
return context.measureText(word.name).width;
|
|
21953
22006
|
} : void 0 });
|
|
21954
22007
|
}, [data, bounds, autoFit, areaSizing, maxFontSize, minFontSize, padding, rotations, shape, spiralStep, fontFamily, fontWeight]);
|
|
21955
|
-
(0,
|
|
22008
|
+
(0, import_react86.useEffect)(() => {
|
|
21956
22009
|
const present = new Set(placements.map((p) => p.index));
|
|
21957
22010
|
onLayout?.({ placed: placements.length, unplaced: data.filter((_, i) => !present.has(i)).map((item) => item.name) });
|
|
21958
22011
|
}, [placements, data, onLayout]);
|
|
@@ -21961,30 +22014,30 @@ var WordCloudChart = (0, import_react85.forwardRef)(function WordCloudChart2({ d
|
|
|
21961
22014
|
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChartMark, { label: `${placement.item.name}\uFF0C${placement.item.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TooltipValue, { name: placement.item.name, value: placement.item.value }), tooltipPoint: [placement.x, placement.y], transform: `rotate(${placement.rotation} ${placement.x} ${placement.y})`, onPointerUp: (event) => onDataClick?.({ name: placement.item.name, value: placement.item.value, data: placement.item, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("text", { x: placement.x, y: placement.y + placement.fontSize * 0.34, textAnchor: "middle", fill: color, style: { fontSize: placement.fontSize, fontFamily: placement.item.fontFamily ?? fontFamily, fontWeight: placement.item.fontWeight ?? fontWeight }, className: "sia-chart__word", children: placement.item.name }) }, `${placement.item.name}-${placement.index}`);
|
|
21962
22015
|
}) });
|
|
21963
22016
|
});
|
|
21964
|
-
var MixedChart = (0,
|
|
21965
|
-
const plotClipId = `sia-mixed-plot-${(0,
|
|
21966
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
21967
|
-
const [geometry, setGeometry] = (0,
|
|
21968
|
-
const [pointerIndex, setPointerIndex] = (0,
|
|
21969
|
-
const [pointerAxisIndex, setPointerAxisIndex] = (0,
|
|
21970
|
-
const [motionRevision, setMotionRevision] = (0,
|
|
21971
|
-
const [stackMode, setStackMode] = (0,
|
|
21972
|
-
const lastPublished = (0,
|
|
22017
|
+
var MixedChart = (0, import_react86.forwardRef)(function MixedChart2({ axisPointer, categoryAxisLabels, axisLayering = "inline", barSpacing, renderAxes, coordinateAnimation = false, animationProgress, animationDurationUpdate = 500, boundaryGap = true, categories, activeIndex, onActiveIndexChange, showCategoryLabels = true, categoryLabelInterval = 0, clipPlot = false, series: sourceSeries, valueAxes, stacked: sourceStacked = false, plotBounds, tooltipTrigger = "item", calculable = false, onTransferError, onDataChange, transferId, onValueTransfer, toolbox, legendNames, axisTooltipFormatter, legendLayout, showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, valueFormatter, onDataClick, palette, ...props }, ref) {
|
|
22018
|
+
const plotClipId = `sia-mixed-plot-${(0, import_react86.useId)().replaceAll(":", "")}`;
|
|
22019
|
+
const [editableSeries, setEditableSeries] = (0, import_react86.useState)(sourceSeries);
|
|
22020
|
+
const [geometry, setGeometry] = (0, import_react86.useState)();
|
|
22021
|
+
const [pointerIndex, setPointerIndex] = (0, import_react86.useState)(null);
|
|
22022
|
+
const [pointerAxisIndex, setPointerAxisIndex] = (0, import_react86.useState)(0);
|
|
22023
|
+
const [motionRevision, setMotionRevision] = (0, import_react86.useState)(0);
|
|
22024
|
+
const [stackMode, setStackMode] = (0, import_react86.useState)();
|
|
22025
|
+
const lastPublished = (0, import_react86.useRef)(null);
|
|
21973
22026
|
const publishData = (next) => {
|
|
21974
22027
|
lastPublished.current = next;
|
|
21975
22028
|
onDataChange?.(next);
|
|
21976
22029
|
};
|
|
21977
|
-
const [islands, setIslands] = (0,
|
|
21978
|
-
const drag = (0,
|
|
21979
|
-
const [dragOffset, setDragOffset] = (0,
|
|
21980
|
-
(0,
|
|
22030
|
+
const [islands, setIslands] = (0, import_react86.useState)([]);
|
|
22031
|
+
const drag = (0, import_react86.useRef)(null);
|
|
22032
|
+
const [dragOffset, setDragOffset] = (0, import_react86.useState)();
|
|
22033
|
+
(0, import_react86.useEffect)(() => {
|
|
21981
22034
|
if (sourceSeries === lastPublished.current) return;
|
|
21982
22035
|
setEditableSeries(sourceSeries);
|
|
21983
22036
|
setIslands([]);
|
|
21984
22037
|
drag.current = null;
|
|
21985
22038
|
setDragOffset(void 0);
|
|
21986
22039
|
}, [sourceSeries]);
|
|
21987
|
-
const series = (0,
|
|
22040
|
+
const series = (0, import_react86.useMemo)(() => editableSeries.map((item) => geometry ? { ...item, type: geometry } : item), [editableSeries, geometry]);
|
|
21988
22041
|
const stacked = stackMode ?? sourceStacked;
|
|
21989
22042
|
const PLOT2 = plotBounds ?? { x: 62, y: 48, width: 628, height: 250 }, PLOT_BOTTOM2 = PLOT2.y + PLOT2.height;
|
|
21990
22043
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -22148,7 +22201,7 @@ var MixedChart = (0, import_react85.forwardRef)(function MixedChart2({ axisPoint
|
|
|
22148
22201
|
})
|
|
22149
22202
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(CartesianAxes, { categories, domain, band: categoryGap }),
|
|
22150
22203
|
activeIndex != null && activeIndex >= 0 && activeIndex < categories.length ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("rect", { "data-mixed-active-index": activeIndex, x: Math.max(PLOT2.x, categoryAt(activeIndex) - band / 2), y: PLOT2.y, width: Math.min(PLOT2.x + PLOT2.width, categoryAt(activeIndex) + band / 2) - Math.max(PLOT2.x, categoryAt(activeIndex) - band / 2), height: PLOT2.height, fill: "currentColor", opacity: 0.06, pointerEvents: "none" }) : null,
|
|
22151
|
-
tooltipTrigger === "axis" ? categories.map((name, index) => /* @__PURE__ */ (0,
|
|
22204
|
+
tooltipTrigger === "axis" ? categories.map((name, index) => /* @__PURE__ */ (0, import_react87.createElement)(ChartMark, { ...activeProps(index), key: `axis-${index}`, "data-mixed-axis-tooltip": index, label: `${name.trim()} \u5404\u6307\u6807`, tooltip: axisTooltip(index), tooltipPoint: [categoryAt(index), PLOT2.y + PLOT2.height / 2] }, /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("rect", { x: Math.max(PLOT2.x, categoryAt(index) - band / 2), y: PLOT2.y, width: Math.min(PLOT2.x + PLOT2.width, categoryAt(index) + band / 2) - Math.max(PLOT2.x, categoryAt(index) - band / 2), height: PLOT2.height, fill: "transparent" }))) : null,
|
|
22152
22205
|
calculable ? activeSeries.flatMap((item) => item.data.map((value, index) => value === null ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChartMark, { ...dragProps(series.indexOf(item), index), label: `${item.name}\uFF0C${categories[index]}\uFF0C\u7A7A\u69FD`, tooltip: "\u62D6\u5165\u6570\u636E\u4EE5\u586B\u5145", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("rect", { x: PLOT2.x + index * band + band * activeSeries.indexOf(item) / Math.max(1, activeSeries.length), y: PLOT_BOTTOM2 - 14, width: Math.max(4, band / Math.max(1, activeSeries.length) - 2), height: 14, fill: "transparent", stroke: getColor(series.indexOf(item), item.color, palette), strokeDasharray: "3 2" }) }, `empty-${item.name}-${index}`) : null)) : null,
|
|
22153
22206
|
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("clipPath", { id: plotClipId, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("rect", { x: PLOT2.x, y: PLOT2.y, width: PLOT2.width, height: PLOT2.height }) }) }),
|
|
22154
22207
|
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("g", { "data-mixed-plot": "", clipPath: clipPlot ? `url(#${plotClipId})` : void 0, children: renderSeries.map((item) => {
|
|
@@ -22187,7 +22240,7 @@ var MixedChart = (0, import_react85.forwardRef)(function MixedChart2({ axisPoint
|
|
|
22187
22240
|
const zero = linearScale(placement.start, [valueDomain[0], valueDomain[1]], [PLOT_BOTTOM2, PLOT2.y]);
|
|
22188
22241
|
const rectY = barSpacing?.pixelAlign ? Math.floor(Math.min(y, zero)) : Math.min(y, zero);
|
|
22189
22242
|
const rectHeight = barSpacing?.pixelAlign ? Math.ceil(Math.abs(zero - y)) : Math.abs(zero - y);
|
|
22190
|
-
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChartPointMotion, { points: [[x, value >= 0 ? rectY + rectHeight : rectY], [x, rectY], [x + width, rectY + rectHeight]], enabled: coordinateAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: coordinateAnimation ? animationProgress : void 0, children: (frame) => /* @__PURE__ */ (0,
|
|
22243
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChartPointMotion, { points: [[x, value >= 0 ? rectY + rectHeight : rectY], [x, rectY], [x + width, rectY + rectHeight]], enabled: coordinateAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: coordinateAnimation ? animationProgress : void 0, children: (frame) => /* @__PURE__ */ (0, import_react87.createElement)(ChartMark, { ...dragProps(seriesIndex, index), key: `${name}-${index}`, label: `${item.name}\uFF0C${name}\uFF0C${value}`, tooltip: (item.tooltipTrigger ?? tooltipTrigger) === "axis" ? axisTooltip(index, item.categoryAxisIndex) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }), tooltipPoint: [props.tooltipProps?.placement === "axis" ? Math.round(categoryAt(index)) : x + width / 2, y], onPointerUp: (event) => {
|
|
22191
22244
|
if (!finishDrag(event)) onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event });
|
|
22192
22245
|
} }, /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("rect", { style: { animation: coordinateAnimation ? "none" : void 0 }, x: frame[1][0], y: Math.min(frame[1][1], frame[2][1]), width: Math.max(0, frame[2][0] - frame[1][0]), height: Math.abs(frame[2][1] - frame[1][1]), rx: item.barRadius ?? 4, fill: item.pointColors?.[index] ?? color, className: "sia-chart__bar" })) }, `${item.name}-${index}-${motionRevision}`);
|
|
22193
22246
|
})
|
|
@@ -22216,7 +22269,7 @@ var MixedChart = (0, import_react85.forwardRef)(function MixedChart2({ axisPoint
|
|
|
22216
22269
|
if (!placements[index]) return null;
|
|
22217
22270
|
const name = categoryName(index, item.categoryAxisIndex);
|
|
22218
22271
|
const value = item.data[index] ?? 0;
|
|
22219
|
-
return /* @__PURE__ */ (0,
|
|
22272
|
+
return /* @__PURE__ */ (0, import_react87.createElement)(ChartMark, { ...dragProps(seriesIndex, index), key: `${name}-${index}`, label: `${item.name}\uFF0C${name}\uFF0C${value}`, tooltip: (item.tooltipTrigger ?? tooltipTrigger) === "axis" ? axisTooltip(index, item.categoryAxisIndex) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }), tooltipPoint: props.tooltipProps?.placement === "axis" ? [Math.round(point[0]), point[1]] : point, onPointerUp: (event) => {
|
|
22220
22273
|
if (!finishDrag(event)) onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event });
|
|
22221
22274
|
} }, /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("circle", { className: item.hollowSymbol ? "sia-chart__mixed-hollow-symbol" : void 0, cx: point[0], cy: point[1], r: Math.max(0, item.symbolSize ?? 9) / 2, fill: item.hollowSymbol ? "#fff" : color, stroke: item.hollowSymbol ? color : "var(--sia-color-surface)", strokeWidth: 2 }));
|
|
22222
22275
|
})
|
|
@@ -22257,9 +22310,9 @@ var KLineChart = CandlestickChart;
|
|
|
22257
22310
|
|
|
22258
22311
|
// src/components/LineShareChart.tsx
|
|
22259
22312
|
var import_jsx_runtime86 = require("react/jsx-runtime");
|
|
22260
|
-
var LineShareChart = (0,
|
|
22261
|
-
const [selected, setSelected] = (0,
|
|
22262
|
-
const [maskHovered, setMaskHovered] = (0,
|
|
22313
|
+
var LineShareChart = (0, import_react88.forwardRef)(function LineShareChart2({ data, lineColor = "#2ec7c9", shareColor = "#b6a2de", ...props }, ref) {
|
|
22314
|
+
const [selected, setSelected] = (0, import_react88.useState)(null);
|
|
22315
|
+
const [maskHovered, setMaskHovered] = (0, import_react88.useState)(false);
|
|
22263
22316
|
const width = props.viewBoxSize?.[0] ?? 900, height = props.viewBoxSize?.[1] ?? 450;
|
|
22264
22317
|
const total = data.reduce((sum, item2) => sum + item2.value, 0), gap = data.length ? Math.round(Math.max(...data.map((item2) => item2.value)) - Math.min(...data.map((item2) => item2.value))) : 0;
|
|
22265
22318
|
const maximum = data.reduce((best, item2, i) => item2.value >= data[best].value ? i : best, 0);
|
|
@@ -22337,16 +22390,16 @@ function paddedValueExtent(values, padding = 0.05) {
|
|
|
22337
22390
|
}
|
|
22338
22391
|
|
|
22339
22392
|
// src/components/XYChart.tsx
|
|
22340
|
-
var
|
|
22393
|
+
var import_react89 = require("react");
|
|
22341
22394
|
var import_jsx_runtime87 = require("react/jsx-runtime");
|
|
22342
|
-
var XYChart = (0,
|
|
22343
|
-
const [series, setSeries] = (0,
|
|
22344
|
-
const [hidden, setHidden] = (0,
|
|
22345
|
-
const [crosshair, setCrosshair] = (0,
|
|
22346
|
-
const [drag, setDrag] = (0,
|
|
22347
|
-
const [geometry, setGeometry] = (0,
|
|
22348
|
-
const [zoom, setZoom] = (0,
|
|
22349
|
-
(0,
|
|
22395
|
+
var XYChart = (0, import_react89.forwardRef)(function XYChart2({ series: source, xDomain, yDomain, animationProgress, calculable = false, onDataChange, xAxisType = "value", xFormatter, tooltipFormatter, dataZoom = false, defaultZoom = [0, 100], onZoomChange, toolbox, ...props }, ref) {
|
|
22396
|
+
const [series, setSeries] = (0, import_react89.useState)(source);
|
|
22397
|
+
const [hidden, setHidden] = (0, import_react89.useState)([]);
|
|
22398
|
+
const [crosshair, setCrosshair] = (0, import_react89.useState)();
|
|
22399
|
+
const [drag, setDrag] = (0, import_react89.useState)();
|
|
22400
|
+
const [geometry, setGeometry] = (0, import_react89.useState)();
|
|
22401
|
+
const [zoom, setZoom] = (0, import_react89.useState)(defaultZoom);
|
|
22402
|
+
(0, import_react89.useEffect)(() => setSeries(source), [source]);
|
|
22350
22403
|
const window2 = dataZoom || xAxisType === "time" ? scatterValueWindow(series.flatMap((item) => item.data.map((point) => point[0])), dataZoom ? zoom : [0, 100]) : void 0;
|
|
22351
22404
|
const active = series.filter((item) => !hidden.includes(item.name)).map((item) => ({ ...item, data: window2 ? item.data.filter((point) => point[0] >= window2[0] && point[0] <= window2[1]) : item.data }));
|
|
22352
22405
|
const width = props.viewBoxSize?.[0] ?? 663, height = props.viewBoxSize?.[1] ?? 379;
|
|
@@ -22475,7 +22528,7 @@ var XYChart = (0, import_react88.forwardRef)(function XYChart2({ series: source,
|
|
|
22475
22528
|
});
|
|
22476
22529
|
|
|
22477
22530
|
// src/components/ChartMapOverlay.tsx
|
|
22478
|
-
var
|
|
22531
|
+
var import_react90 = require("react");
|
|
22479
22532
|
|
|
22480
22533
|
// src/components/mapOverlayHost.ts
|
|
22481
22534
|
function observeMapOverlayHost(host, onChange) {
|
|
@@ -22514,11 +22567,11 @@ function observeMapOverlayHost(host, onChange) {
|
|
|
22514
22567
|
// src/components/ChartMapOverlay.tsx
|
|
22515
22568
|
var import_jsx_runtime88 = require("react/jsx-runtime");
|
|
22516
22569
|
function ChartMapOverlay({ createHost, children, className, style, ariaLabel = "\u5730\u56FE\u53E0\u52A0\u56FE\u8868", onError }) {
|
|
22517
|
-
const container = (0,
|
|
22518
|
-
const errorHandler = (0,
|
|
22570
|
+
const container = (0, import_react90.useRef)(null);
|
|
22571
|
+
const errorHandler = (0, import_react90.useRef)(onError);
|
|
22519
22572
|
errorHandler.current = onError;
|
|
22520
|
-
const [snapshot, setSnapshot] = (0,
|
|
22521
|
-
(0,
|
|
22573
|
+
const [snapshot, setSnapshot] = (0, import_react90.useState)();
|
|
22574
|
+
(0, import_react90.useEffect)(() => {
|
|
22522
22575
|
setSnapshot(void 0);
|
|
22523
22576
|
if (!container.current) return;
|
|
22524
22577
|
try {
|
|
@@ -22595,9 +22648,9 @@ function createBaiduMapHost(element, sdk, options) {
|
|
|
22595
22648
|
}
|
|
22596
22649
|
|
|
22597
22650
|
// src/components/InputSelect.tsx
|
|
22598
|
-
var
|
|
22651
|
+
var import_react91 = require("react");
|
|
22599
22652
|
var import_jsx_runtime89 = require("react/jsx-runtime");
|
|
22600
|
-
var InputSelect = (0,
|
|
22653
|
+
var InputSelect = (0, import_react91.forwardRef)(function InputSelect2({
|
|
22601
22654
|
options,
|
|
22602
22655
|
value,
|
|
22603
22656
|
defaultValue,
|
|
@@ -22623,22 +22676,22 @@ var InputSelect = (0, import_react90.forwardRef)(function InputSelect2({
|
|
|
22623
22676
|
...inputProps
|
|
22624
22677
|
}, forwardedRef) {
|
|
22625
22678
|
const size = useControlSize(sizeProp);
|
|
22626
|
-
const [internal, setInternal] = (0,
|
|
22679
|
+
const [internal, setInternal] = (0, import_react91.useState)(defaultValue);
|
|
22627
22680
|
const current = value !== void 0 ? value : internal;
|
|
22628
22681
|
const values = current == null ? [] : Array.isArray(current) ? current : [current];
|
|
22629
22682
|
const text = values.map((item) => displayField === "label" ? String(options.find((option) => option.optionType !== "divider" && option.value === item)?.label ?? item) : String(item)).join(",");
|
|
22630
|
-
const [draft, setDraft] = (0,
|
|
22631
|
-
(0,
|
|
22683
|
+
const [draft, setDraft] = (0, import_react91.useState)(text);
|
|
22684
|
+
(0, import_react91.useEffect)(() => {
|
|
22632
22685
|
setDraft(text);
|
|
22633
22686
|
}, [text, current]);
|
|
22634
|
-
const [open, setOpen] = (0,
|
|
22635
|
-
const [search, setSearch] = (0,
|
|
22636
|
-
const [modalOpen, setModalOpen] = (0,
|
|
22637
|
-
const [modalValues, setModalValues] = (0,
|
|
22638
|
-
const [selectedOnly, setSelectedOnly] = (0,
|
|
22639
|
-
const rootRef = (0,
|
|
22640
|
-
const popupRef = (0,
|
|
22641
|
-
const inputRef = (0,
|
|
22687
|
+
const [open, setOpen] = (0, import_react91.useState)(false);
|
|
22688
|
+
const [search, setSearch] = (0, import_react91.useState)("");
|
|
22689
|
+
const [modalOpen, setModalOpen] = (0, import_react91.useState)(false);
|
|
22690
|
+
const [modalValues, setModalValues] = (0, import_react91.useState)([]);
|
|
22691
|
+
const [selectedOnly, setSelectedOnly] = (0, import_react91.useState)(false);
|
|
22692
|
+
const rootRef = (0, import_react91.useRef)(null);
|
|
22693
|
+
const popupRef = (0, import_react91.useRef)(null);
|
|
22694
|
+
const inputRef = (0, import_react91.useRef)(null);
|
|
22642
22695
|
const config = typeof enableModal === "object" ? enableModal : {};
|
|
22643
22696
|
function changeOpen(next) {
|
|
22644
22697
|
if (next && (disabled || loading)) return;
|
|
@@ -22658,7 +22711,7 @@ var InputSelect = (0, import_react90.forwardRef)(function InputSelect2({
|
|
|
22658
22711
|
inputRef.current?.focus();
|
|
22659
22712
|
}
|
|
22660
22713
|
}
|
|
22661
|
-
(0,
|
|
22714
|
+
(0, import_react91.useEffect)(() => {
|
|
22662
22715
|
if (!open) return;
|
|
22663
22716
|
const outside = (event) => {
|
|
22664
22717
|
if (!rootRef.current?.contains(event.target) && !popupRef.current?.contains(event.target)) changeOpen(false);
|
|
@@ -22666,7 +22719,7 @@ var InputSelect = (0, import_react90.forwardRef)(function InputSelect2({
|
|
|
22666
22719
|
document.addEventListener("pointerdown", outside);
|
|
22667
22720
|
return () => document.removeEventListener("pointerdown", outside);
|
|
22668
22721
|
}, [open, onOpenChange]);
|
|
22669
|
-
(0,
|
|
22722
|
+
(0, import_react91.useEffect)(() => {
|
|
22670
22723
|
if (disabled || loading) {
|
|
22671
22724
|
changeOpen(false);
|
|
22672
22725
|
setModalOpen(false);
|
|
@@ -22799,7 +22852,7 @@ var InputSelect = (0, import_react90.forwardRef)(function InputSelect2({
|
|
|
22799
22852
|
});
|
|
22800
22853
|
|
|
22801
22854
|
// src/components/QueryForm.tsx
|
|
22802
|
-
var
|
|
22855
|
+
var import_react92 = require("react");
|
|
22803
22856
|
var import_jsx_runtime90 = require("react/jsx-runtime");
|
|
22804
22857
|
function QueryForm({
|
|
22805
22858
|
fields,
|
|
@@ -22833,29 +22886,29 @@ function QueryForm({
|
|
|
22833
22886
|
...formProps
|
|
22834
22887
|
}) {
|
|
22835
22888
|
const [form] = useForm(providedForm);
|
|
22836
|
-
const [internalCollapsed, setInternalCollapsed] = (0,
|
|
22889
|
+
const [internalCollapsed, setInternalCollapsed] = (0, import_react92.useState)(defaultCollapsed);
|
|
22837
22890
|
const collapsed = collapsible && (controlledCollapsed ?? internalCollapsed);
|
|
22838
|
-
const [searching, setSearching] = (0,
|
|
22839
|
-
const [saving, setSaving] = (0,
|
|
22840
|
-
const [removing, setRemoving] = (0,
|
|
22841
|
-
const [saveOpen, setSaveOpen] = (0,
|
|
22842
|
-
const [saveName, setSaveName] = (0,
|
|
22843
|
-
const [saveError, setSaveError] = (0,
|
|
22844
|
-
const [error, setError] = (0,
|
|
22845
|
-
const [activeShortcut, setActiveShortcut] = (0,
|
|
22846
|
-
const source = (0,
|
|
22847
|
-
const searchLock = (0,
|
|
22848
|
-
const saveLock = (0,
|
|
22849
|
-
const removeLock = (0,
|
|
22850
|
-
const snapshot = (0,
|
|
22891
|
+
const [searching, setSearching] = (0, import_react92.useState)(false);
|
|
22892
|
+
const [saving, setSaving] = (0, import_react92.useState)(false);
|
|
22893
|
+
const [removing, setRemoving] = (0, import_react92.useState)(false);
|
|
22894
|
+
const [saveOpen, setSaveOpen] = (0, import_react92.useState)(false);
|
|
22895
|
+
const [saveName, setSaveName] = (0, import_react92.useState)("");
|
|
22896
|
+
const [saveError, setSaveError] = (0, import_react92.useState)("");
|
|
22897
|
+
const [error, setError] = (0, import_react92.useState)("");
|
|
22898
|
+
const [activeShortcut, setActiveShortcut] = (0, import_react92.useState)("");
|
|
22899
|
+
const source = (0, import_react92.useRef)({ source: "submit" });
|
|
22900
|
+
const searchLock = (0, import_react92.useRef)(false);
|
|
22901
|
+
const saveLock = (0, import_react92.useRef)(false);
|
|
22902
|
+
const removeLock = (0, import_react92.useRef)(false);
|
|
22903
|
+
const snapshot = (0, import_react92.useRef)();
|
|
22851
22904
|
const busy = disabled || loading || searching;
|
|
22852
22905
|
const shortcutBusy = busy || shortcutsLoading || saving || removing;
|
|
22853
|
-
const entries = fields ? fields.map(({ key, width, ...item }) => ({ key, width, content: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Form.Item, { noStyle: true, ...item }) })) :
|
|
22906
|
+
const entries = fields ? fields.map(({ key, width, ...item }) => ({ key, width, content: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Form.Item, { noStyle: true, ...item }) })) : import_react92.Children.toArray(children).map((content, index) => ({ key: String(index), width: void 0, content }));
|
|
22854
22907
|
const limit = Math.max(1, Math.floor(collapsedCount));
|
|
22855
|
-
const rowRef = (0,
|
|
22856
|
-
const actionsRef = (0,
|
|
22857
|
-
const [fittingCount, setFittingCount] = (0,
|
|
22858
|
-
(0,
|
|
22908
|
+
const rowRef = (0, import_react92.useRef)(null);
|
|
22909
|
+
const actionsRef = (0, import_react92.useRef)(null);
|
|
22910
|
+
const [fittingCount, setFittingCount] = (0, import_react92.useState)(limit);
|
|
22911
|
+
(0, import_react92.useLayoutEffect)(() => {
|
|
22859
22912
|
if (!collapsed) return;
|
|
22860
22913
|
const row = rowRef.current;
|
|
22861
22914
|
const actions = actionsRef.current;
|