@sia.soul/sia-react-ui 0.1.39 → 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-GLS4WVIZ.js → chunk-6TLANQVX.js} +1 -1
- package/dist/{chunk-WR7XTQRU.js → chunk-CEZ4GW3X.js} +96 -50
- package/dist/{chunk-LRGD2QDA.js → chunk-ZTJUFVJO.js} +820 -820
- package/dist/{core-D4opRFkZ.d.cts → core-BAHoW7_e.d.cts} +2 -2
- package/dist/{core-VNY_7WRq.d.ts → core-fn8h4yRg.d.ts} +2 -2
- package/dist/core.cjs +996 -949
- package/dist/core.css +46 -18
- package/dist/core.d.cts +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/core.js +2 -2
- package/dist/index.cjs +534 -487
- package/dist/index.css +46 -18
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +3 -3
- package/dist/select-date-range.js +2 -2
- 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,16 +11096,12 @@ 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
|
-
if (type === "tech-line" && resolvedOrientation === "horizontal") {
|
|
11069
|
-
if (rect.left < listRect.left) list.scrollLeft += rect.left - listRect.left;
|
|
11070
|
-
else if (rect.right > listRect.right) list.scrollLeft += rect.right - listRect.right;
|
|
11071
|
-
}
|
|
11072
11105
|
const currentRect = active.getBoundingClientRect();
|
|
11073
11106
|
indicator.style.transform = `translate(${currentRect.left - listRect.left - list.clientLeft + list.scrollLeft}px, ${currentRect.top - listRect.top - list.clientTop + list.scrollTop}px)`;
|
|
11074
11107
|
indicator.style.width = `${rect.width}px`;
|
|
@@ -11084,7 +11117,7 @@ function Tabs({
|
|
|
11084
11117
|
observer.observe(list);
|
|
11085
11118
|
list.querySelectorAll('[role="tab"]').forEach((tab) => observer.observe(tab));
|
|
11086
11119
|
return () => observer.disconnect();
|
|
11087
|
-
}, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable]);
|
|
11120
|
+
}, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable, visibleCount]);
|
|
11088
11121
|
(0, import_react45.useEffect)(() => {
|
|
11089
11122
|
let cancelled = false;
|
|
11090
11123
|
let frame = 0;
|
|
@@ -11118,7 +11151,8 @@ function Tabs({
|
|
|
11118
11151
|
}
|
|
11119
11152
|
function focusAndSelect(key) {
|
|
11120
11153
|
selectTab(key);
|
|
11121
|
-
|
|
11154
|
+
if (items.findIndex((item) => item.key === key) >= visibleCount) moreRef.current?.focus();
|
|
11155
|
+
else document.getElementById(`${baseId}-tab-${key}`)?.focus();
|
|
11122
11156
|
}
|
|
11123
11157
|
function handleKeyDown(event, key) {
|
|
11124
11158
|
const previousKey = resolvedOrientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
|
|
@@ -11140,54 +11174,53 @@ function Tabs({
|
|
|
11140
11174
|
...withTitleTooltip(props),
|
|
11141
11175
|
children: [
|
|
11142
11176
|
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "sia-tabs__header", children: [
|
|
11143
|
-
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(FloatingScrollbarProvider, { targetRef: listRef, disabled: type !== "tech-line" || resolvedOrientation !== "horizontal" }),
|
|
11144
11177
|
tabBarTitle ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "sia-tabs__title", children: [
|
|
11145
11178
|
tabBarTitle,
|
|
11146
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
|
|
11147
11180
|
] }) : null,
|
|
11148
|
-
/* @__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: [
|
|
11149
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,
|
|
11150
|
-
items.map((item) => {
|
|
11183
|
+
items.map((item, index) => {
|
|
11151
11184
|
const selected = item.key === selectedKey;
|
|
11152
11185
|
const canClose = item.closable ?? closable;
|
|
11153
|
-
const tabNode = /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
|
|
11154
|
-
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
11155
|
-
"button",
|
|
11156
|
-
{
|
|
11157
|
-
id: `${baseId}-tab-${item.key}`,
|
|
11158
|
-
type: "button",
|
|
11159
|
-
className: "sia-tabs__tab",
|
|
11160
|
-
role: "tab",
|
|
11161
|
-
"aria-selected": selected,
|
|
11162
|
-
"aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
|
|
11163
|
-
tabIndex: selected ? 0 : -1,
|
|
11164
|
-
disabled: item.disabled,
|
|
11165
|
-
onClick: () => selectTab(item.key),
|
|
11166
|
-
onKeyDown: (event) => handleKeyDown(event, item.key),
|
|
11167
|
-
children: [
|
|
11168
|
-
type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-tabs__tab-shape", "aria-hidden": "true" }) : null,
|
|
11169
|
-
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
|
|
11170
|
-
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: item.label })
|
|
11171
|
-
]
|
|
11172
|
-
}
|
|
11173
|
-
),
|
|
11174
|
-
canClose ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
11175
|
-
"button",
|
|
11176
|
-
{
|
|
11177
|
-
type: "button",
|
|
11178
|
-
className: "sia-tabs__close",
|
|
11179
|
-
"aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
|
|
11180
|
-
disabled: item.disabled,
|
|
11181
|
-
onClick: () => onEdit?.(item.key, "remove"),
|
|
11182
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "close", size: 12 })
|
|
11183
|
-
}
|
|
11184
|
-
) : null
|
|
11185
|
-
] }, item.key);
|
|
11186
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);
|
|
11187
11218
|
if (!contextMenuItems?.length) return tabNode;
|
|
11188
|
-
return /* @__PURE__ */ (0,
|
|
11219
|
+
return /* @__PURE__ */ (0, import_react46.createElement)(
|
|
11189
11220
|
Dropdown,
|
|
11190
11221
|
{
|
|
11222
|
+
...entryProps,
|
|
11223
|
+
key: item.key,
|
|
11191
11224
|
className: "sia-tabs__tab-context-trigger",
|
|
11192
11225
|
popupClassName: "sia-tabs__tab-context-menu",
|
|
11193
11226
|
trigger: ["contextMenu"],
|
|
@@ -11196,12 +11229,26 @@ function Tabs({
|
|
|
11196
11229
|
items: contextMenuItems,
|
|
11197
11230
|
selectable: false,
|
|
11198
11231
|
onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
|
|
11199
|
-
}
|
|
11200
|
-
children: tabNode
|
|
11232
|
+
}
|
|
11201
11233
|
},
|
|
11202
|
-
|
|
11234
|
+
tabNode
|
|
11203
11235
|
);
|
|
11204
|
-
})
|
|
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
|
|
11205
11252
|
] }),
|
|
11206
11253
|
tabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
|
|
11207
11254
|
] }),
|
|
@@ -11232,9 +11279,9 @@ function Tabs({
|
|
|
11232
11279
|
}
|
|
11233
11280
|
|
|
11234
11281
|
// src/components/Treemap.tsx
|
|
11235
|
-
var import_react46 = require("react");
|
|
11236
|
-
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
11237
11282
|
var import_react47 = require("react");
|
|
11283
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
11284
|
+
var import_react48 = require("react");
|
|
11238
11285
|
function positiveValue(value) {
|
|
11239
11286
|
return Number.isFinite(value) && value > 0 ? value : 1;
|
|
11240
11287
|
}
|
|
@@ -11520,19 +11567,19 @@ function Treemap({
|
|
|
11520
11567
|
style,
|
|
11521
11568
|
...props
|
|
11522
11569
|
}) {
|
|
11523
|
-
const containerRef = (0,
|
|
11524
|
-
const [size, setSize] = (0,
|
|
11525
|
-
const [internalExpandedKeys, setInternalExpandedKeys] = (0,
|
|
11526
|
-
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);
|
|
11527
11574
|
const currentExpandedKeys = expandedKeys ?? internalExpandedKeys;
|
|
11528
11575
|
const currentFocusedKey = focusedKey === void 0 ? internalFocusedKey : focusedKey;
|
|
11529
|
-
const expandedSet = (0,
|
|
11530
|
-
const focusedNode = (0,
|
|
11576
|
+
const expandedSet = (0, import_react47.useMemo)(() => new Set(currentExpandedKeys), [currentExpandedKeys]);
|
|
11577
|
+
const focusedNode = (0, import_react47.useMemo)(
|
|
11531
11578
|
() => currentFocusedKey ? findNode(data, currentFocusedKey) : null,
|
|
11532
11579
|
[currentFocusedKey, data]
|
|
11533
11580
|
);
|
|
11534
11581
|
const effectiveFocusedNode = focusedNode && expandedSet.has(focusedNode.key) && Boolean(focusedNode.children?.length) ? focusedNode : null;
|
|
11535
|
-
const positions = (0,
|
|
11582
|
+
const positions = (0, import_react47.useMemo)(
|
|
11536
11583
|
() => collectPositions(
|
|
11537
11584
|
effectiveFocusedNode ? [effectiveFocusedNode] : data,
|
|
11538
11585
|
{ x: 0, y: 0, ...size },
|
|
@@ -11547,7 +11594,7 @@ function Treemap({
|
|
|
11547
11594
|
),
|
|
11548
11595
|
[activeKey, data, effectiveFocusedNode, expandedSet, gap, headerHeight, maxVisibleNodes, minTileHeight, minTileWidth, overflowLabel, size]
|
|
11549
11596
|
);
|
|
11550
|
-
(0,
|
|
11597
|
+
(0, import_react47.useEffect)(() => {
|
|
11551
11598
|
const element = containerRef.current;
|
|
11552
11599
|
if (!element) return void 0;
|
|
11553
11600
|
const updateSize = () => {
|
|
@@ -11559,7 +11606,7 @@ function Treemap({
|
|
|
11559
11606
|
observer.observe(element);
|
|
11560
11607
|
return () => observer.disconnect();
|
|
11561
11608
|
}, []);
|
|
11562
|
-
(0,
|
|
11609
|
+
(0, import_react47.useEffect)(() => {
|
|
11563
11610
|
if (!currentFocusedKey || effectiveFocusedNode) return;
|
|
11564
11611
|
if (focusedKey === void 0) setInternalFocusedKey(null);
|
|
11565
11612
|
onFocusedChange?.(null);
|
|
@@ -11607,7 +11654,7 @@ function Treemap({
|
|
|
11607
11654
|
const hasChildren = Boolean(node.hasChildren || node.children?.length);
|
|
11608
11655
|
const title = `${node.label} \xB7 ${String(valueFormatter(node.value, node))}`;
|
|
11609
11656
|
if (expanded) {
|
|
11610
|
-
return /* @__PURE__ */ (0,
|
|
11657
|
+
return /* @__PURE__ */ (0, import_react48.createElement)(
|
|
11611
11658
|
"div",
|
|
11612
11659
|
{
|
|
11613
11660
|
className: `sia-treemap__tile sia-treemap__tile--directory is-expanded${effectiveFocusedNode?.key === node.key ? " is-focused" : ""}${active ? " is-active" : ""}`,
|
|
@@ -11646,7 +11693,7 @@ function Treemap({
|
|
|
11646
11693
|
] })
|
|
11647
11694
|
);
|
|
11648
11695
|
}
|
|
11649
|
-
return /* @__PURE__ */ (0,
|
|
11696
|
+
return /* @__PURE__ */ (0, import_react48.createElement)(
|
|
11650
11697
|
"button",
|
|
11651
11698
|
{
|
|
11652
11699
|
type: "button",
|
|
@@ -11672,13 +11719,13 @@ function Treemap({
|
|
|
11672
11719
|
}
|
|
11673
11720
|
|
|
11674
11721
|
// src/components/Table/TableCellContent.tsx
|
|
11675
|
-
var
|
|
11722
|
+
var import_react49 = require("react");
|
|
11676
11723
|
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
11677
11724
|
function TableCellContent({ children, ellipsis, title }) {
|
|
11678
|
-
const ref = (0,
|
|
11679
|
-
const [overflowing, setOverflowing] = (0,
|
|
11725
|
+
const ref = (0, import_react49.useRef)(null);
|
|
11726
|
+
const [overflowing, setOverflowing] = (0, import_react49.useState)(false);
|
|
11680
11727
|
const customContent = typeof children !== "string" && typeof children !== "number" && children != null;
|
|
11681
|
-
(0,
|
|
11728
|
+
(0, import_react49.useLayoutEffect)(() => {
|
|
11682
11729
|
const element = ref.current;
|
|
11683
11730
|
if (!element || !ellipsis || !customContent) return;
|
|
11684
11731
|
const layouts = [];
|
|
@@ -11710,10 +11757,10 @@ function TableCellContent({ children, ellipsis, title }) {
|
|
|
11710
11757
|
}
|
|
11711
11758
|
|
|
11712
11759
|
// src/components/Table/Table.tsx
|
|
11713
|
-
var
|
|
11760
|
+
var import_react51 = require("react");
|
|
11714
11761
|
|
|
11715
11762
|
// src/components/Table/plugins.tsx
|
|
11716
|
-
var
|
|
11763
|
+
var import_react50 = require("react");
|
|
11717
11764
|
|
|
11718
11765
|
// src/components/Table/utils.ts
|
|
11719
11766
|
var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
|
|
@@ -12391,7 +12438,7 @@ function TableSelectedItemsPanel({
|
|
|
12391
12438
|
onRemove,
|
|
12392
12439
|
onClear
|
|
12393
12440
|
}) {
|
|
12394
|
-
const [showAll, setShowAll] = (0,
|
|
12441
|
+
const [showAll, setShowAll] = (0, import_react50.useState)(false);
|
|
12395
12442
|
const visibleEntries = showAll ? entries : entries.slice(0, maxCount2);
|
|
12396
12443
|
const hiddenCount = Math.max(0, entries.length - visibleEntries.length);
|
|
12397
12444
|
const baseColumnMap = new Map(
|
|
@@ -12790,10 +12837,10 @@ function TableFilterControl({
|
|
|
12790
12837
|
placeholder,
|
|
12791
12838
|
onApply
|
|
12792
12839
|
}) {
|
|
12793
|
-
const [open, setOpen] = (0,
|
|
12794
|
-
const [draft, setDraft] = (0,
|
|
12840
|
+
const [open, setOpen] = (0, import_react50.useState)(false);
|
|
12841
|
+
const [draft, setDraft] = (0, import_react50.useState)(value);
|
|
12795
12842
|
const label = getColumnLabel(column);
|
|
12796
|
-
(0,
|
|
12843
|
+
(0, import_react50.useEffect)(() => {
|
|
12797
12844
|
if (open) setDraft(value);
|
|
12798
12845
|
}, [open, value]);
|
|
12799
12846
|
const apply = (nextValue) => {
|
|
@@ -13218,17 +13265,17 @@ function EditableTableCell({
|
|
|
13218
13265
|
trigger
|
|
13219
13266
|
}) {
|
|
13220
13267
|
const config = typeof editable === "object" ? editable : { type: "input" };
|
|
13221
|
-
const [editValue, setEditValue] = (0,
|
|
13222
|
-
const [saving, setSaving] = (0,
|
|
13223
|
-
const inputRef = (0,
|
|
13224
|
-
const editorRef = (0,
|
|
13225
|
-
const editValueRef = (0,
|
|
13226
|
-
const savingRef = (0,
|
|
13227
|
-
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)(
|
|
13228
13275
|
async () => {
|
|
13229
13276
|
}
|
|
13230
13277
|
);
|
|
13231
|
-
(0,
|
|
13278
|
+
(0, import_react50.useEffect)(() => {
|
|
13232
13279
|
if (!active) return;
|
|
13233
13280
|
editValueRef.current = value;
|
|
13234
13281
|
setEditValue(value);
|
|
@@ -13259,7 +13306,7 @@ function EditableTableCell({
|
|
|
13259
13306
|
}
|
|
13260
13307
|
}
|
|
13261
13308
|
saveRef.current = save;
|
|
13262
|
-
(0,
|
|
13309
|
+
(0, import_react50.useEffect)(() => {
|
|
13263
13310
|
if (!active || config.type === "select" || config.type === "custom") return;
|
|
13264
13311
|
const handleOutsidePointerDown = (event) => {
|
|
13265
13312
|
const target = event.target;
|
|
@@ -13560,15 +13607,15 @@ function ColumnSettingPanel({
|
|
|
13560
13607
|
onClose,
|
|
13561
13608
|
onApply
|
|
13562
13609
|
}) {
|
|
13563
|
-
const [draft, setDraft] = (0,
|
|
13564
|
-
const listRef = (0,
|
|
13565
|
-
const cancelDrag = (0,
|
|
13566
|
-
const [preview, setPreview] = (0,
|
|
13567
|
-
(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)(() => {
|
|
13568
13615
|
cancelDrag.current?.();
|
|
13569
13616
|
if (open) setDraft(orderColumnSettings(items));
|
|
13570
13617
|
}, [items, open]);
|
|
13571
|
-
(0,
|
|
13618
|
+
(0, import_react50.useEffect)(() => () => cancelDrag.current?.(), []);
|
|
13572
13619
|
const labels = new Map(
|
|
13573
13620
|
flattenTableColumns(columns).map((column) => [
|
|
13574
13621
|
column.key,
|
|
@@ -14086,7 +14133,7 @@ function tableExportText(node) {
|
|
|
14086
14133
|
if (typeof node === "string" || typeof node === "number" || typeof node === "bigint")
|
|
14087
14134
|
return String(node);
|
|
14088
14135
|
if (Array.isArray(node)) return node.map(tableExportText).join("");
|
|
14089
|
-
if ((0,
|
|
14136
|
+
if ((0, import_react50.isValidElement)(node))
|
|
14090
14137
|
return tableExportText(node.props.children);
|
|
14091
14138
|
return "";
|
|
14092
14139
|
}
|
|
@@ -14185,7 +14232,7 @@ var SIZE_ROW_HEIGHT = { small: 28, medium: 36, large: 46 };
|
|
|
14185
14232
|
function getHeaderTitleText(content) {
|
|
14186
14233
|
if (typeof content === "string" || typeof content === "number") return String(content);
|
|
14187
14234
|
if (Array.isArray(content)) return content.map(getHeaderTitleText).join("");
|
|
14188
|
-
if ((0,
|
|
14235
|
+
if ((0, import_react51.isValidElement)(content)) return getHeaderTitleText(content.props.children);
|
|
14189
14236
|
return "";
|
|
14190
14237
|
}
|
|
14191
14238
|
function getColumnDepth(columns) {
|
|
@@ -14269,7 +14316,7 @@ function getTableHorizontalMetrics(viewport, table) {
|
|
|
14269
14316
|
const contentWidth = Math.max(viewport.clientWidth, table?.getBoundingClientRect().width ?? viewport.clientWidth);
|
|
14270
14317
|
return { contentWidth, maxLeft: Math.max(0, contentWidth - viewport.clientWidth) };
|
|
14271
14318
|
}
|
|
14272
|
-
var TableBodyRow = (0,
|
|
14319
|
+
var TableBodyRow = (0, import_react51.memo)(function TableBodyRow2({
|
|
14273
14320
|
row,
|
|
14274
14321
|
rowIndex,
|
|
14275
14322
|
columns,
|
|
@@ -14372,22 +14419,22 @@ function TableInner(props, ref) {
|
|
|
14372
14419
|
style,
|
|
14373
14420
|
...htmlProps
|
|
14374
14421
|
} = props;
|
|
14375
|
-
const rootRef = (0,
|
|
14376
|
-
const scrollRef = (0,
|
|
14377
|
-
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);
|
|
14378
14425
|
useScrollbarProximity();
|
|
14379
|
-
const scrollbarDragRef = (0,
|
|
14380
|
-
const [internalLoading, setInternalLoading] = (0,
|
|
14381
|
-
const [scrollTop, setScrollTop] = (0,
|
|
14382
|
-
const [viewportHeight, setViewportHeight] = (0,
|
|
14383
|
-
const [viewportWidth, setViewportWidth] = (0,
|
|
14384
|
-
const [autoColumnWidths, setAutoColumnWidths] = (0,
|
|
14385
|
-
const getRowKey = (0,
|
|
14386
|
-
const builtInResizePlugin = (0,
|
|
14387
|
-
const builtInHighlightPlugin = (0,
|
|
14388
|
-
const builtInCellSelectionPlugin = (0,
|
|
14389
|
-
const builtInIndexPlugin = (0,
|
|
14390
|
-
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)(() => {
|
|
14391
14438
|
const plugins = providedPlugins.filter((plugin) => (resizable || plugin.id !== "resize") && (cellSelection || plugin.id !== "cellSelection") && (showIndex || plugin.id !== "index"));
|
|
14392
14439
|
if (!plugins.some((plugin) => plugin.id === "highlight")) plugins.push(builtInHighlightPlugin);
|
|
14393
14440
|
if (resizable && !plugins.some((plugin) => plugin.id === "resize")) plugins.push(builtInResizePlugin);
|
|
@@ -14395,19 +14442,19 @@ function TableInner(props, ref) {
|
|
|
14395
14442
|
if (showIndex && !plugins.some((plugin) => plugin.id === "index")) plugins.push(builtInIndexPlugin);
|
|
14396
14443
|
return plugins;
|
|
14397
14444
|
}, [builtInHighlightPlugin, builtInResizePlugin, builtInCellSelectionPlugin, builtInIndexPlugin, providedPlugins, resizable, cellSelection, showIndex]);
|
|
14398
|
-
const sortedPlugins = (0,
|
|
14399
|
-
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());
|
|
14400
14447
|
pluginsByIdRef.current = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
|
|
14401
|
-
const [pluginStates, setPluginStates] = (0,
|
|
14448
|
+
const [pluginStates, setPluginStates] = (0, import_react51.useState)(() => Object.fromEntries(
|
|
14402
14449
|
sortedPlugins.map((plugin) => [plugin.id, resolveInitialState(plugin)])
|
|
14403
14450
|
));
|
|
14404
|
-
const pluginApisRef = (0,
|
|
14405
|
-
const contextsRef = (0,
|
|
14406
|
-
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());
|
|
14407
14454
|
const pipeline = { columns: baseColumns, rows: createTableRows(dataSource, getRowKey) };
|
|
14408
14455
|
const nextApis = {};
|
|
14409
14456
|
const contexts = /* @__PURE__ */ new Map();
|
|
14410
|
-
const setPluginState = (0,
|
|
14457
|
+
const setPluginState = (0, import_react51.useCallback)((pluginId, next) => {
|
|
14411
14458
|
setPluginStates((previous) => {
|
|
14412
14459
|
const plugin = pluginsByIdRef.current.get(pluginId);
|
|
14413
14460
|
const previousValue = previous[pluginId] !== void 0 ? previous[pluginId] : plugin ? resolveInitialState(plugin) : void 0;
|
|
@@ -14460,7 +14507,7 @@ function TableInner(props, ref) {
|
|
|
14460
14507
|
});
|
|
14461
14508
|
pluginApisRef.current = nextApis;
|
|
14462
14509
|
contextsRef.current = contexts;
|
|
14463
|
-
(0,
|
|
14510
|
+
(0, import_react51.useEffect)(() => {
|
|
14464
14511
|
const activePlugins2 = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
|
|
14465
14512
|
for (const [pluginId, mounted] of mountedPluginsRef.current) {
|
|
14466
14513
|
if (activePlugins2.get(pluginId) === mounted.plugin) continue;
|
|
@@ -14472,11 +14519,11 @@ function TableInner(props, ref) {
|
|
|
14472
14519
|
mountedPluginsRef.current.set(plugin.id, { plugin, cleanup: plugin.onMount(contextsRef.current.get(plugin.id)) });
|
|
14473
14520
|
}
|
|
14474
14521
|
}, [sortedPlugins]);
|
|
14475
|
-
(0,
|
|
14522
|
+
(0, import_react51.useEffect)(() => () => {
|
|
14476
14523
|
for (const mounted of mountedPluginsRef.current.values()) mounted.cleanup?.();
|
|
14477
14524
|
mountedPluginsRef.current.clear();
|
|
14478
14525
|
}, []);
|
|
14479
|
-
const updateScrollMetrics = (0,
|
|
14526
|
+
const updateScrollMetrics = (0, import_react51.useCallback)(() => {
|
|
14480
14527
|
const root = rootRef.current;
|
|
14481
14528
|
const element = scrollRef.current;
|
|
14482
14529
|
if (!root || !element) return;
|
|
@@ -14512,7 +14559,7 @@ function TableInner(props, ref) {
|
|
|
14512
14559
|
root.style.setProperty("--sia-table-scrollbar-y-size", `${verticalThumb}px`);
|
|
14513
14560
|
root.style.setProperty("--sia-table-scrollbar-y-position", `${verticalPosition}px`);
|
|
14514
14561
|
}, []);
|
|
14515
|
-
(0,
|
|
14562
|
+
(0, import_react51.useEffect)(() => {
|
|
14516
14563
|
const element = scrollRef.current;
|
|
14517
14564
|
if (!element || typeof ResizeObserver === "undefined") return;
|
|
14518
14565
|
const observer = new ResizeObserver(() => {
|
|
@@ -14525,13 +14572,13 @@ function TableInner(props, ref) {
|
|
|
14525
14572
|
updateScrollMetrics();
|
|
14526
14573
|
return () => observer.disconnect();
|
|
14527
14574
|
}, [updateScrollMetrics]);
|
|
14528
|
-
(0,
|
|
14575
|
+
(0, import_react51.useEffect)(() => {
|
|
14529
14576
|
updateScrollMetrics();
|
|
14530
14577
|
});
|
|
14531
|
-
const orderedColumns = (0,
|
|
14532
|
-
const leafColumns = (0,
|
|
14533
|
-
const headerRows = (0,
|
|
14534
|
-
(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)(() => {
|
|
14535
14582
|
const autoWidthColumns = leafColumns.filter((column) => column.autoWidth && resizedWidths[column.key] === void 0);
|
|
14536
14583
|
const root = rootRef.current;
|
|
14537
14584
|
if (!root || autoWidthColumns.length === 0) return;
|
|
@@ -14601,20 +14648,20 @@ function TableInner(props, ref) {
|
|
|
14601
14648
|
const bottomSpacer = shouldVirtualize ? Math.max(0, (pipeline.rows.length - endIndex) * rowHeight) : 0;
|
|
14602
14649
|
const toolbarStart = sortedPlugins.map((plugin) => {
|
|
14603
14650
|
const content = plugin.renderToolbarStart?.(getContext(plugin));
|
|
14604
|
-
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;
|
|
14605
14652
|
}).filter(Boolean);
|
|
14606
14653
|
const toolbarEnd = sortedPlugins.map((plugin) => {
|
|
14607
14654
|
const content = plugin.renderToolbarEnd?.(getContext(plugin));
|
|
14608
|
-
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;
|
|
14609
14656
|
}).filter(Boolean);
|
|
14610
14657
|
const summaries = sortedPlugins.flatMap((plugin) => plugin.renderSummary?.(getContext(plugin)) ?? []);
|
|
14611
14658
|
const footers = sortedPlugins.map((plugin) => {
|
|
14612
14659
|
const content = plugin.renderFooter?.(getContext(plugin));
|
|
14613
|
-
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;
|
|
14614
14661
|
}).filter(Boolean);
|
|
14615
14662
|
const overlays = sortedPlugins.map((plugin) => {
|
|
14616
14663
|
const content = plugin.renderOverlay?.(getContext(plugin));
|
|
14617
|
-
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;
|
|
14618
14665
|
}).filter(Boolean);
|
|
14619
14666
|
const hasToolbar = toolbarStart.length > 0 || toolbarEnd.length > 0;
|
|
14620
14667
|
const effectiveHeight = height ?? tableHeight ?? (shouldVirtualize ? 420 : void 0);
|
|
@@ -14623,12 +14670,12 @@ function TableInner(props, ref) {
|
|
|
14623
14670
|
height: effectiveHeight,
|
|
14624
14671
|
"--sia-table-header-height": `${headerRows.length * rowHeight}px`
|
|
14625
14672
|
};
|
|
14626
|
-
const handleScroll = (0,
|
|
14673
|
+
const handleScroll = (0, import_react51.useCallback)((event) => {
|
|
14627
14674
|
const element = event.currentTarget;
|
|
14628
14675
|
if (shouldVirtualize) setScrollTop(element.scrollTop);
|
|
14629
14676
|
updateScrollMetrics();
|
|
14630
14677
|
}, [shouldVirtualize, updateScrollMetrics]);
|
|
14631
|
-
const handleScrollbarPointerDown = (0,
|
|
14678
|
+
const handleScrollbarPointerDown = (0, import_react51.useCallback)((axis, event, track = event.currentTarget) => {
|
|
14632
14679
|
const element = scrollRef.current;
|
|
14633
14680
|
const thumb = track.firstElementChild;
|
|
14634
14681
|
if (!element || !thumb || event.button !== 0) return;
|
|
@@ -14657,7 +14704,7 @@ function TableInner(props, ref) {
|
|
|
14657
14704
|
};
|
|
14658
14705
|
if (rootRef.current) rootRef.current.dataset.scrollbarDragging = "true";
|
|
14659
14706
|
}, []);
|
|
14660
|
-
const handleScrollbarPointerMove = (0,
|
|
14707
|
+
const handleScrollbarPointerMove = (0, import_react51.useCallback)((event) => {
|
|
14661
14708
|
const drag = scrollbarDragRef.current;
|
|
14662
14709
|
const element = scrollRef.current;
|
|
14663
14710
|
if (!drag || !element || drag.pointerId !== event.pointerId) return;
|
|
@@ -14666,12 +14713,12 @@ function TableInner(props, ref) {
|
|
|
14666
14713
|
if (drag.axis === "x") element.scrollLeft = nextScroll;
|
|
14667
14714
|
else element.scrollTop = nextScroll;
|
|
14668
14715
|
}, []);
|
|
14669
|
-
const handleScrollbarPointerEnd = (0,
|
|
14716
|
+
const handleScrollbarPointerEnd = (0, import_react51.useCallback)((event) => {
|
|
14670
14717
|
if (scrollbarDragRef.current?.pointerId !== event.pointerId) return;
|
|
14671
14718
|
scrollbarDragRef.current = null;
|
|
14672
14719
|
if (rootRef.current) rootRef.current.dataset.scrollbarDragging = "false";
|
|
14673
14720
|
}, []);
|
|
14674
|
-
(0,
|
|
14721
|
+
(0, import_react51.useImperativeHandle)(ref, () => ({
|
|
14675
14722
|
getRows: () => pipeline.rows.map((row) => row.record),
|
|
14676
14723
|
getColumns: () => pipeline.columns,
|
|
14677
14724
|
getPluginApi: (pluginId) => pluginApisRef.current[pluginId],
|
|
@@ -14942,12 +14989,12 @@ function TableInner(props, ref) {
|
|
|
14942
14989
|
}
|
|
14943
14990
|
);
|
|
14944
14991
|
}
|
|
14945
|
-
var Table2 = (0,
|
|
14992
|
+
var Table2 = (0, import_react51.forwardRef)(TableInner);
|
|
14946
14993
|
|
|
14947
14994
|
// src/components/ThemeSwitch.tsx
|
|
14948
|
-
var
|
|
14995
|
+
var import_react52 = require("react");
|
|
14949
14996
|
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
14950
|
-
var ThemeSwitch = (0,
|
|
14997
|
+
var ThemeSwitch = (0, import_react52.forwardRef)(function ThemeSwitch2({
|
|
14951
14998
|
checked,
|
|
14952
14999
|
onCheckedChange,
|
|
14953
15000
|
lightLabel = "\u4EAE\u8272\u6A21\u5F0F",
|
|
@@ -15041,7 +15088,7 @@ function Breadcrumb({ items, separator = "/", itemRender, className = "", ...pro
|
|
|
15041
15088
|
}
|
|
15042
15089
|
|
|
15043
15090
|
// src/components/Typography.tsx
|
|
15044
|
-
var
|
|
15091
|
+
var import_react53 = require("react");
|
|
15045
15092
|
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
15046
15093
|
function TypographyContent({
|
|
15047
15094
|
as: Tag2 = "span",
|
|
@@ -15061,26 +15108,26 @@ function TypographyContent({
|
|
|
15061
15108
|
className = "",
|
|
15062
15109
|
...props
|
|
15063
15110
|
}) {
|
|
15064
|
-
const contentRef = (0,
|
|
15065
|
-
const editRef = (0,
|
|
15066
|
-
const timer = (0,
|
|
15067
|
-
const [localText, setLocalText] = (0,
|
|
15068
|
-
const [draft, setDraft] = (0,
|
|
15069
|
-
const [editing, setEditing] = (0,
|
|
15070
|
-
const [copied, setCopied] = (0,
|
|
15071
|
-
const [copyError, setCopyError] = (0,
|
|
15072
|
-
const [expanded, setExpanded] = (0,
|
|
15073
|
-
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);
|
|
15074
15121
|
const editConfig = typeof editable === "object" ? editable : void 0;
|
|
15075
15122
|
const content = editConfig?.text ?? localText ?? children;
|
|
15076
15123
|
const requestedRows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
|
|
15077
15124
|
const rows = Number.isFinite(requestedRows) ? Math.max(1, Math.floor(requestedRows)) : 1;
|
|
15078
15125
|
const expandable = typeof ellipsis === "object" && ellipsis.expandable;
|
|
15079
|
-
(0,
|
|
15126
|
+
(0, import_react53.useEffect)(() => {
|
|
15080
15127
|
setLocalText(void 0);
|
|
15081
15128
|
}, [children]);
|
|
15082
|
-
(0,
|
|
15083
|
-
(0,
|
|
15129
|
+
(0, import_react53.useEffect)(() => () => clearTimeout(timer.current), []);
|
|
15130
|
+
(0, import_react53.useLayoutEffect)(() => {
|
|
15084
15131
|
const element = contentRef.current;
|
|
15085
15132
|
if (!element || !ellipsis || editing || expanded) return;
|
|
15086
15133
|
const measure = () => setOverflow(element.scrollHeight > element.clientHeight + 1 || element.scrollWidth > element.clientWidth + 1);
|
|
@@ -15198,10 +15245,10 @@ var Typography = Object.assign(TypographyRoot, {
|
|
|
15198
15245
|
});
|
|
15199
15246
|
|
|
15200
15247
|
// src/components/FloatButton.tsx
|
|
15201
|
-
var
|
|
15248
|
+
var import_react54 = require("react");
|
|
15202
15249
|
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
15203
|
-
var GroupShape = (0,
|
|
15204
|
-
var FloatButtonRoot = (0,
|
|
15250
|
+
var GroupShape = (0, import_react54.createContext)(void 0);
|
|
15251
|
+
var FloatButtonRoot = (0, import_react54.forwardRef)(function FloatButton({
|
|
15205
15252
|
icon,
|
|
15206
15253
|
description,
|
|
15207
15254
|
tooltip,
|
|
@@ -15214,7 +15261,7 @@ var FloatButtonRoot = (0, import_react53.forwardRef)(function FloatButton({
|
|
|
15214
15261
|
children,
|
|
15215
15262
|
...props
|
|
15216
15263
|
}, ref) {
|
|
15217
|
-
const groupShape = (0,
|
|
15264
|
+
const groupShape = (0, import_react54.useContext)(GroupShape);
|
|
15218
15265
|
const label = props["aria-label"] ?? (typeof tooltip === "string" ? tooltip : typeof description === "string" ? description : "\u60AC\u6D6E\u64CD\u4F5C");
|
|
15219
15266
|
const button = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
15220
15267
|
"button",
|
|
@@ -15252,10 +15299,10 @@ function FloatButtonGroup({
|
|
|
15252
15299
|
...props
|
|
15253
15300
|
}) {
|
|
15254
15301
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
15255
|
-
const rootRef = (0,
|
|
15256
|
-
const triggerRef = (0,
|
|
15257
|
-
const id = (0,
|
|
15258
|
-
(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)(() => {
|
|
15259
15306
|
if (!trigger || !visible) return;
|
|
15260
15307
|
const close = (event) => {
|
|
15261
15308
|
if (!rootRef.current?.contains(event.target)) setVisible(false);
|
|
@@ -15309,8 +15356,8 @@ function FloatButtonGroup({
|
|
|
15309
15356
|
) });
|
|
15310
15357
|
}
|
|
15311
15358
|
function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth", onClick, icon, tooltip = "\u8FD4\u56DE\u9876\u90E8", ...props }) {
|
|
15312
|
-
const [visible, setVisible] = (0,
|
|
15313
|
-
(0,
|
|
15359
|
+
const [visible, setVisible] = (0, import_react54.useState)(false);
|
|
15360
|
+
(0, import_react54.useEffect)(() => {
|
|
15314
15361
|
const element = target ? target() : window;
|
|
15315
15362
|
if (!element) return;
|
|
15316
15363
|
const update = () => setVisible((element === window ? window.scrollY : element.scrollTop) >= visibilityHeight);
|
|
@@ -15334,11 +15381,11 @@ var FloatButton2 = Object.assign(FloatButtonRoot, {
|
|
|
15334
15381
|
});
|
|
15335
15382
|
|
|
15336
15383
|
// src/components/ChartWhirlingLoading.tsx
|
|
15337
|
-
var
|
|
15384
|
+
var import_react55 = require("react");
|
|
15338
15385
|
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
15339
15386
|
function ChartWhirlingLoading({ width = 720, height = 360, text = "\u6570\u636E\u83B7\u53D6\u4E2D", textWidth, frame }) {
|
|
15340
|
-
const [tick, setTick] = (0,
|
|
15341
|
-
(0,
|
|
15387
|
+
const [tick, setTick] = (0, import_react55.useState)(0);
|
|
15388
|
+
(0, import_react55.useEffect)(() => {
|
|
15342
15389
|
if (frame != null) return;
|
|
15343
15390
|
const media = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
15344
15391
|
let timer;
|
|
@@ -15369,20 +15416,20 @@ function ChartWhirlingLoading({ width = 720, height = 360, text = "\u6570\u636E\
|
|
|
15369
15416
|
}
|
|
15370
15417
|
|
|
15371
15418
|
// src/components/SvgMapPlot.tsx
|
|
15372
|
-
var
|
|
15419
|
+
var import_react67 = require("react");
|
|
15373
15420
|
|
|
15374
15421
|
// src/components/ChartBrush.tsx
|
|
15375
|
-
var
|
|
15422
|
+
var import_react56 = require("react");
|
|
15376
15423
|
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
15377
15424
|
function ChartBrush({ bounds, onSelect, onCancel, selectionShape = "band", selectionStyle, minSelectionSize }) {
|
|
15378
|
-
const [vertical, setVertical] = (0,
|
|
15379
|
-
const startY = (0,
|
|
15425
|
+
const [vertical, setVertical] = (0, import_react56.useState)(null);
|
|
15426
|
+
const startY = (0, import_react56.useRef)(0);
|
|
15380
15427
|
const y = (event) => {
|
|
15381
15428
|
const matrix = event.currentTarget.ownerSVGElement?.getScreenCTM();
|
|
15382
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;
|
|
15383
15430
|
};
|
|
15384
|
-
const drag = (0,
|
|
15385
|
-
const [selection, setSelection] = (0,
|
|
15431
|
+
const drag = (0, import_react56.useRef)(null);
|
|
15432
|
+
const [selection, setSelection] = (0, import_react56.useState)(null);
|
|
15386
15433
|
const x = (event) => {
|
|
15387
15434
|
const matrix = event.currentTarget.ownerSVGElement?.getScreenCTM();
|
|
15388
15435
|
if (!matrix) return null;
|
|
@@ -15505,7 +15552,7 @@ function appendChartExportHeadings(original, clone, host) {
|
|
|
15505
15552
|
}
|
|
15506
15553
|
|
|
15507
15554
|
// src/components/ChartNodeTimeline.tsx
|
|
15508
|
-
var
|
|
15555
|
+
var import_react58 = require("react");
|
|
15509
15556
|
|
|
15510
15557
|
// src/components/timelinePositions.ts
|
|
15511
15558
|
function timelineRatios(count, dates) {
|
|
@@ -15531,7 +15578,7 @@ function nearestTimelineIndex(ratios, ratio) {
|
|
|
15531
15578
|
}
|
|
15532
15579
|
|
|
15533
15580
|
// src/components/ChartPointMotion.tsx
|
|
15534
|
-
var
|
|
15581
|
+
var import_react57 = require("react");
|
|
15535
15582
|
|
|
15536
15583
|
// src/components/chartMotion.ts
|
|
15537
15584
|
function chartMotionBaseline(points, horizontal = false) {
|
|
@@ -15552,11 +15599,11 @@ function interpolateChartPoints(from, to, progress) {
|
|
|
15552
15599
|
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
15553
15600
|
function ChartPointMotion({ points, enabled, duration, updateDuration = 500, animateInitial = true, easing = "linear", progress, horizontal = false, origin, children }) {
|
|
15554
15601
|
const baseline = (target) => origin ? target.map(() => origin) : chartMotionBaseline(target, horizontal);
|
|
15555
|
-
const [frame, setFrame] = (0,
|
|
15556
|
-
const displayed = (0,
|
|
15557
|
-
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);
|
|
15558
15605
|
const signature = JSON.stringify(points);
|
|
15559
|
-
(0,
|
|
15606
|
+
(0, import_react57.useEffect)(() => {
|
|
15560
15607
|
const target = points;
|
|
15561
15608
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
15562
15609
|
if (!enabled || progress != null || reduced.matches) {
|
|
@@ -15595,8 +15642,8 @@ function ChartPointMotion({ points, enabled, duration, updateDuration = 500, ani
|
|
|
15595
15642
|
// src/components/ChartNodeTimeline.tsx
|
|
15596
15643
|
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
15597
15644
|
function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, playInterval = 2e3, loop = true, x = 80, y = 520, width = 840 }) {
|
|
15598
|
-
const [playing, setPlaying] = (0,
|
|
15599
|
-
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)();
|
|
15600
15647
|
const shown = draft ?? value;
|
|
15601
15648
|
const cancelPending = () => {
|
|
15602
15649
|
clearTimeout(pending.current);
|
|
@@ -15604,8 +15651,8 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
15604
15651
|
draftRef.current = void 0;
|
|
15605
15652
|
setDraft(void 0);
|
|
15606
15653
|
};
|
|
15607
|
-
(0,
|
|
15608
|
-
(0,
|
|
15654
|
+
(0, import_react58.useEffect)(() => () => clearTimeout(pending.current), []);
|
|
15655
|
+
(0, import_react58.useEffect)(() => {
|
|
15609
15656
|
cancelPending();
|
|
15610
15657
|
}, [value]);
|
|
15611
15658
|
const preview = (index) => {
|
|
@@ -15620,8 +15667,8 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
15620
15667
|
draftRef.current = void 0;
|
|
15621
15668
|
}, 200);
|
|
15622
15669
|
};
|
|
15623
|
-
(0,
|
|
15624
|
-
(0,
|
|
15670
|
+
(0, import_react58.useEffect)(() => setPlaying(autoPlay), [autoPlay]);
|
|
15671
|
+
(0, import_react58.useEffect)(() => {
|
|
15625
15672
|
if (!playing || labels.length < 2) return;
|
|
15626
15673
|
const timer = window.setTimeout(() => {
|
|
15627
15674
|
if (value + 1 < labels.length) onChange(value + 1);
|
|
@@ -15730,7 +15777,7 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
15730
15777
|
}
|
|
15731
15778
|
|
|
15732
15779
|
// src/components/ChartVerticalRange.tsx
|
|
15733
|
-
var
|
|
15780
|
+
var import_react59 = require("react");
|
|
15734
15781
|
|
|
15735
15782
|
// src/components/chartColorRamp.ts
|
|
15736
15783
|
function chartColorRamp(colors, ratio) {
|
|
@@ -15750,16 +15797,16 @@ function chartColorRamp(colors, ratio) {
|
|
|
15750
15797
|
// src/components/ChartVerticalRange.tsx
|
|
15751
15798
|
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
15752
15799
|
function ChartVerticalRange({ min, max, x, y, length, thickness, colors, range, endLabels, onChange, indicatorValue, onHoverRange, realtime = true, readOnly = false }) {
|
|
15753
|
-
const id = (0,
|
|
15754
|
-
const drag = (0,
|
|
15755
|
-
const [draft, setDraft] = (0,
|
|
15756
|
-
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)();
|
|
15757
15804
|
const cancel = () => {
|
|
15758
15805
|
drag.current = void 0;
|
|
15759
15806
|
pending.current = void 0;
|
|
15760
15807
|
setDraft(void 0);
|
|
15761
15808
|
};
|
|
15762
|
-
(0,
|
|
15809
|
+
(0, import_react59.useEffect)(() => {
|
|
15763
15810
|
if (!realtime) cancel();
|
|
15764
15811
|
}, [range[0], range[1], min, max, realtime]);
|
|
15765
15812
|
const shown = draft ?? range;
|
|
@@ -15840,18 +15887,18 @@ function ChartVerticalRange({ min, max, x, y, length, thickness, colors, range,
|
|
|
15840
15887
|
}
|
|
15841
15888
|
|
|
15842
15889
|
// src/components/ChartHorizontalRange.tsx
|
|
15843
|
-
var
|
|
15890
|
+
var import_react60 = require("react");
|
|
15844
15891
|
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
15845
15892
|
function ChartHorizontalRange({ min, max, x, y, length, thickness, colors, range, endLabels, onChange, indicatorValue, onHoverRange, realtime = true }) {
|
|
15846
|
-
const id = (0,
|
|
15847
|
-
const drag = (0,
|
|
15848
|
-
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)();
|
|
15849
15896
|
const cancel = () => {
|
|
15850
15897
|
drag.current = void 0;
|
|
15851
15898
|
pending.current = void 0;
|
|
15852
15899
|
setDraft(void 0);
|
|
15853
15900
|
};
|
|
15854
|
-
(0,
|
|
15901
|
+
(0, import_react60.useEffect)(() => {
|
|
15855
15902
|
if (!realtime) cancel();
|
|
15856
15903
|
}, [range[0], range[1], min, max, realtime]);
|
|
15857
15904
|
const shown = draft ?? range, low = Math.max(min, Math.min(max, shown[0])), high = Math.max(low, Math.min(max, shown[1]));
|
|
@@ -15929,7 +15976,7 @@ function ChartHorizontalRange({ min, max, x, y, length, thickness, colors, range
|
|
|
15929
15976
|
}
|
|
15930
15977
|
|
|
15931
15978
|
// src/components/Chart.tsx
|
|
15932
|
-
var
|
|
15979
|
+
var import_react61 = require("react");
|
|
15933
15980
|
|
|
15934
15981
|
// src/components/chartCompositeExport.ts
|
|
15935
15982
|
function serializeChartComposite(host) {
|
|
@@ -16053,20 +16100,20 @@ var DEFAULT_CHART_PALETTE = [
|
|
|
16053
16100
|
"#2f54eb",
|
|
16054
16101
|
"#a0d911"
|
|
16055
16102
|
];
|
|
16056
|
-
var ChartContext = (0,
|
|
16103
|
+
var ChartContext = (0, import_react61.createContext)(null);
|
|
16057
16104
|
function toCssSize(value, fallback) {
|
|
16058
16105
|
if (typeof value === "number") return `${value}px`;
|
|
16059
16106
|
return value ?? fallback;
|
|
16060
16107
|
}
|
|
16061
|
-
var ChartComposite = (0,
|
|
16062
|
-
const host = (0,
|
|
16063
|
-
(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) }), []);
|
|
16064
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)) });
|
|
16065
16112
|
});
|
|
16066
|
-
var useTooltipLayoutEffect = typeof window === "undefined" ?
|
|
16113
|
+
var useTooltipLayoutEffect = typeof window === "undefined" ? import_react61.useEffect : import_react61.useLayoutEffect;
|
|
16067
16114
|
function ChartTooltip({ open, left, top, children, enterable = false, inheritTextStyle = false, placement = "above", className = "", style, ...props }) {
|
|
16068
|
-
const elementRef = (0,
|
|
16069
|
-
const [position, setPosition] = (0,
|
|
16115
|
+
const elementRef = (0, import_react61.useRef)(null);
|
|
16116
|
+
const [position, setPosition] = (0, import_react61.useState)([left, top]);
|
|
16070
16117
|
useTooltipLayoutEffect(() => {
|
|
16071
16118
|
const element = elementRef.current, host = element?.parentElement;
|
|
16072
16119
|
if (!open || placement !== "axis" || !element || !host) return;
|
|
@@ -16190,7 +16237,7 @@ function ChartToolbox({
|
|
|
16190
16237
|
))
|
|
16191
16238
|
] });
|
|
16192
16239
|
}
|
|
16193
|
-
var SiaChart = (0,
|
|
16240
|
+
var SiaChart = (0, import_react61.forwardRef)(function SiaChart2({
|
|
16194
16241
|
children,
|
|
16195
16242
|
width = "100%",
|
|
16196
16243
|
height = 320,
|
|
@@ -16217,19 +16264,19 @@ var SiaChart = (0, import_react60.forwardRef)(function SiaChart2({
|
|
|
16217
16264
|
style,
|
|
16218
16265
|
...rest
|
|
16219
16266
|
}, ref) {
|
|
16220
|
-
const hostRef = (0,
|
|
16221
|
-
const svgRef = (0,
|
|
16222
|
-
const titleId = (0,
|
|
16223
|
-
const descriptionId = (0,
|
|
16224
|
-
const [tooltip, setTooltip] = (0,
|
|
16225
|
-
const tooltipHideTimer = (0,
|
|
16226
|
-
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);
|
|
16227
16274
|
const cancelTooltipHide = () => {
|
|
16228
16275
|
clearTimeout(tooltipHideTimer.current);
|
|
16229
16276
|
};
|
|
16230
|
-
(0,
|
|
16231
|
-
const [linkedPosition, setLinkedPosition] = (0,
|
|
16232
|
-
(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)(() => {
|
|
16233
16280
|
const host = hostRef.current, svg = svgRef.current;
|
|
16234
16281
|
if (!controlledTooltip || !host || !svg) return;
|
|
16235
16282
|
const position = () => {
|
|
@@ -16244,12 +16291,12 @@ var SiaChart = (0, import_react60.forwardRef)(function SiaChart2({
|
|
|
16244
16291
|
observer.observe(host);
|
|
16245
16292
|
return () => observer.disconnect();
|
|
16246
16293
|
}, [controlledTooltip]);
|
|
16247
|
-
const [dataViewOpen, setDataViewOpen] = (0,
|
|
16248
|
-
const [markMode, setMarkMode] = (0,
|
|
16249
|
-
const [markStart, setMarkStart] = (0,
|
|
16250
|
-
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)([]);
|
|
16251
16298
|
const toolboxOptions = toolbox === true ? {} : toolbox || void 0;
|
|
16252
|
-
const rootStyle = (0,
|
|
16299
|
+
const rootStyle = (0, import_react61.useMemo)(() => ({
|
|
16253
16300
|
...style,
|
|
16254
16301
|
width: toCssSize(width, "100%"),
|
|
16255
16302
|
height: toCssSize(height, "320px"),
|
|
@@ -16307,13 +16354,13 @@ var SiaChart = (0, import_react60.forwardRef)(function SiaChart2({
|
|
|
16307
16354
|
anchor.href = canvas.toDataURL("image/png");
|
|
16308
16355
|
anchor.click();
|
|
16309
16356
|
}
|
|
16310
|
-
(0,
|
|
16357
|
+
(0, import_react61.useImperativeHandle)(ref, () => ({
|
|
16311
16358
|
getElement: () => svgRef.current,
|
|
16312
16359
|
focus: () => svgRef.current?.focus(),
|
|
16313
16360
|
toSvgString: serializeSvg,
|
|
16314
16361
|
toDataUrl: svgDataUrl
|
|
16315
16362
|
}), []);
|
|
16316
|
-
const context = (0,
|
|
16363
|
+
const context = (0, import_react61.useMemo)(() => ({
|
|
16317
16364
|
palette,
|
|
16318
16365
|
showTooltip: (event, content, point) => {
|
|
16319
16366
|
cancelTooltipHide();
|
|
@@ -16500,7 +16547,7 @@ var SiaChart = (0, import_react60.forwardRef)(function SiaChart2({
|
|
|
16500
16547
|
) });
|
|
16501
16548
|
});
|
|
16502
16549
|
function ChartMark({ tooltip, tooltipPoint, label, onPointerMove, onPointerLeave, onFocus, onBlur, ...props }) {
|
|
16503
|
-
const context = (0,
|
|
16550
|
+
const context = (0, import_react61.useContext)(ChartContext);
|
|
16504
16551
|
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
16505
16552
|
"g",
|
|
16506
16553
|
{
|
|
@@ -16529,7 +16576,7 @@ function ChartMark({ tooltip, tooltipPoint, label, onPointerMove, onPointerLeave
|
|
|
16529
16576
|
);
|
|
16530
16577
|
}
|
|
16531
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 }) {
|
|
16532
|
-
const paintId = (0,
|
|
16579
|
+
const paintId = (0, import_react61.useId)().replaceAll(":", "");
|
|
16533
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))));
|
|
16534
16581
|
const totalWidth = orientation === "horizontal" ? widths.reduce((sum, value) => sum + value, 0) + Math.max(0, items.length - 1) * itemGap : Math.max(0, ...widths);
|
|
16535
16582
|
const startX = align === "start" ? x : align === "end" ? x - totalWidth : x - totalWidth / 2;
|
|
@@ -16658,7 +16705,7 @@ function ChartAxis({ layer = "all", orientation, x, y, length, labels, positions
|
|
|
16658
16705
|
] });
|
|
16659
16706
|
}
|
|
16660
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 }) {
|
|
16661
|
-
const id = (0,
|
|
16708
|
+
const id = (0, import_react61.useId)().replaceAll(":", "");
|
|
16662
16709
|
const vertical = orientation === "vertical";
|
|
16663
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 });
|
|
16664
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 });
|
|
@@ -16686,8 +16733,8 @@ function ChartVisualMap({ min, max, colors = ["#e6f4ff", "#1677ff"], x = 16, y =
|
|
|
16686
16733
|
] });
|
|
16687
16734
|
}
|
|
16688
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 }) {
|
|
16689
|
-
const [activeHandle, setActiveHandle] = (0,
|
|
16690
|
-
const pan = (0,
|
|
16736
|
+
const [activeHandle, setActiveHandle] = (0, import_react61.useState)(null);
|
|
16737
|
+
const pan = (0, import_react61.useRef)();
|
|
16691
16738
|
const start = Math.min(value[0], value[1]);
|
|
16692
16739
|
const end = Math.max(value[0], value[1]);
|
|
16693
16740
|
const startPercent = (start - min) / Math.max(1, max - min) * 100;
|
|
@@ -16761,9 +16808,9 @@ function ChartDataZoom({ value, min = 0, max = 100, ariaLabel = "\u56FE\u8868\u5
|
|
|
16761
16808
|
] });
|
|
16762
16809
|
}
|
|
16763
16810
|
function ChartTimeline({ labels, value, onChange, autoPlay = false, playInterval = 2e3, loop = true, className = "", ...props }) {
|
|
16764
|
-
const [playing, setPlaying] = (0,
|
|
16765
|
-
(0,
|
|
16766
|
-
(0,
|
|
16811
|
+
const [playing, setPlaying] = (0, import_react61.useState)(autoPlay);
|
|
16812
|
+
(0, import_react61.useEffect)(() => setPlaying(autoPlay), [autoPlay]);
|
|
16813
|
+
(0, import_react61.useEffect)(() => {
|
|
16767
16814
|
if (!playing || labels.length <= 1) return void 0;
|
|
16768
16815
|
const timer = window.setInterval(() => {
|
|
16769
16816
|
const next = value + 1;
|
|
@@ -16873,7 +16920,7 @@ function parseSvgMapPaths(source) {
|
|
|
16873
16920
|
}
|
|
16874
16921
|
|
|
16875
16922
|
// src/components/useMapRoam.ts
|
|
16876
|
-
var
|
|
16923
|
+
var import_react62 = require("react");
|
|
16877
16924
|
|
|
16878
16925
|
// src/components/chartRoam.ts
|
|
16879
16926
|
function zoomChartViewport(view, factor, point, limit = { min: 0.05, max: 20 }) {
|
|
@@ -16890,14 +16937,14 @@ var initial = { x: 0, y: 0, scale: 1 };
|
|
|
16890
16937
|
function useMapRoam(mode, scaleLimit = { min: 0.65, max: 5 }, wheelFactors = [1.12, 0.9]) {
|
|
16891
16938
|
const [zoomIn, zoomOut] = wheelFactors;
|
|
16892
16939
|
const min = scaleLimit?.min, max = scaleLimit?.max, unlimited = scaleLimit === null;
|
|
16893
|
-
const host = (0,
|
|
16894
|
-
const [view, setView] = (0,
|
|
16895
|
-
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)();
|
|
16896
16943
|
const local = (x, y) => {
|
|
16897
16944
|
const matrix = host.current?.ownerSVGElement?.getScreenCTM();
|
|
16898
16945
|
return matrix ? new DOMPoint(x, y).matrixTransform(matrix.inverse()) : new DOMPoint(x, y);
|
|
16899
16946
|
};
|
|
16900
|
-
(0,
|
|
16947
|
+
(0, import_react62.useEffect)(() => {
|
|
16901
16948
|
const node = host.current;
|
|
16902
16949
|
if (!node || !mode || mode === "move") return;
|
|
16903
16950
|
const wheel = (event) => {
|
|
@@ -16959,7 +17006,7 @@ function useMapRoam(mode, scaleLimit = { min: 0.65, max: 5 }, wheelFactors = [1.
|
|
|
16959
17006
|
}
|
|
16960
17007
|
|
|
16961
17008
|
// src/components/ChartMapLineReveal.tsx
|
|
16962
|
-
var
|
|
17009
|
+
var import_react63 = require("react");
|
|
16963
17010
|
|
|
16964
17011
|
// src/components/mapLineGeometry.ts
|
|
16965
17012
|
function mapLineControl(source, target, curveness) {
|
|
@@ -16976,9 +17023,9 @@ function mapLineDuration(source, target, period) {
|
|
|
16976
17023
|
// src/components/ChartMapLineReveal.tsx
|
|
16977
17024
|
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
16978
17025
|
function ChartMapLineReveal({ source, control, target, enabled, initialDuration = 2e3, updateDuration = 500, children }) {
|
|
16979
|
-
const signature = JSON.stringify([source, control, target]), initialized = (0,
|
|
16980
|
-
const [frame, setFrame] = (0,
|
|
16981
|
-
(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)(() => {
|
|
16982
17029
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
16983
17030
|
const duration = Math.max(1, initialized.current ? updateDuration : initialDuration);
|
|
16984
17031
|
if (!enabled || reduced.matches) {
|
|
@@ -17011,15 +17058,15 @@ function ChartMapLineReveal({ source, control, target, enabled, initialDuration
|
|
|
17011
17058
|
}
|
|
17012
17059
|
|
|
17013
17060
|
// src/components/ChartMapLineEffect.tsx
|
|
17014
|
-
var
|
|
17061
|
+
var import_react64 = require("react");
|
|
17015
17062
|
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
17016
17063
|
function ChartMapLineEffect({ source, control, target, period = 30, color = "#fff", radius = 1, shadowBlur = 10, shadowColor = color, trailAlpha }) {
|
|
17017
|
-
const ref = (0,
|
|
17018
|
-
const trails = (0,
|
|
17064
|
+
const ref = (0, import_react64.useRef)(null);
|
|
17065
|
+
const trails = (0, import_react64.useRef)([]);
|
|
17019
17066
|
const alpha = trailAlpha === void 0 ? 0 : Math.max(0, Math.min(0.999, trailAlpha));
|
|
17020
17067
|
const count = alpha > 0 ? Math.min(240, Math.ceil(Math.log(5e-3) / Math.log(alpha))) : 0;
|
|
17021
17068
|
const duration = mapLineDuration(source, target, period);
|
|
17022
|
-
(0,
|
|
17069
|
+
(0, import_react64.useEffect)(() => {
|
|
17023
17070
|
const started = performance.now();
|
|
17024
17071
|
let frame = 0;
|
|
17025
17072
|
const history = [];
|
|
@@ -17052,7 +17099,7 @@ function ChartMapLineEffect({ source, control, target, period = 30, color = "#ff
|
|
|
17052
17099
|
}
|
|
17053
17100
|
|
|
17054
17101
|
// src/components/ChartMapPointPulse.tsx
|
|
17055
|
-
var
|
|
17102
|
+
var import_react65 = require("react");
|
|
17056
17103
|
|
|
17057
17104
|
// src/components/mapPointPulse.ts
|
|
17058
17105
|
function mapPointPulseDuration(period, random = Math.random) {
|
|
@@ -17062,7 +17109,7 @@ function mapPointPulseDuration(period, random = Math.random) {
|
|
|
17062
17109
|
// src/components/ChartMapPointPulse.tsx
|
|
17063
17110
|
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
17064
17111
|
function ChartMapPointPulse({ x, y, size, color, period = 15, scaleSize = 2 }) {
|
|
17065
|
-
const [duration] = (0,
|
|
17112
|
+
const [duration] = (0, import_react65.useState)(() => mapPointPulseDuration(period));
|
|
17066
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: [
|
|
17067
17114
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("animate", { attributeName: "r", values: `${size * scaleSize * 0.1};${size * scaleSize}`, dur: `${duration}ms`, repeatCount: "indefinite", calcMode: "linear" }),
|
|
17068
17115
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("animate", { attributeName: "stroke-width", values: ".1;1", dur: `${duration}ms`, repeatCount: "indefinite", calcMode: "linear" })
|
|
@@ -17070,11 +17117,11 @@ function ChartMapPointPulse({ x, y, size, color, period = 15, scaleSize = 2 }) {
|
|
|
17070
17117
|
}
|
|
17071
17118
|
|
|
17072
17119
|
// src/components/ChartMapPointEntrance.tsx
|
|
17073
|
-
var
|
|
17120
|
+
var import_react66 = require("react");
|
|
17074
17121
|
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
17075
17122
|
function ChartMapPointEntrance({ enabled, x, y, children }) {
|
|
17076
|
-
const [progress, setProgress] = (0,
|
|
17077
|
-
(0,
|
|
17123
|
+
const [progress, setProgress] = (0, import_react66.useState)(enabled ? 0.01 : 1);
|
|
17124
|
+
(0, import_react66.useEffect)(() => {
|
|
17078
17125
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
17079
17126
|
if (!enabled || reduced.matches) {
|
|
17080
17127
|
setProgress(1);
|
|
@@ -17117,8 +17164,8 @@ function mapLineEndLabel(source, target) {
|
|
|
17117
17164
|
// src/components/SvgMapPlot.tsx
|
|
17118
17165
|
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
17119
17166
|
function SvgMapRegion({ d, name, value, series, color, scale, offset, emphasized, onHover, stroke, strokeWidth, opacity, hoverable = true, showLabel = true, tooltipNameOnly = false }) {
|
|
17120
|
-
const path = (0,
|
|
17121
|
-
(0,
|
|
17167
|
+
const path = (0, import_react67.useRef)(null), [center, setCenter] = (0, import_react67.useState)([0, 0]);
|
|
17168
|
+
(0, import_react67.useLayoutEffect)(() => {
|
|
17122
17169
|
const box = path.current?.getBBox();
|
|
17123
17170
|
if (box) setCenter([box.x + box.width / 2, box.y + box.height / 2]);
|
|
17124
17171
|
}, [d]);
|
|
@@ -17136,9 +17183,9 @@ function SvgMapRegion({ d, name, value, series, color, scale, offset, emphasized
|
|
|
17136
17183
|
] }), onPointerMove: () => onHover(true), onPointerLeave: () => onHover(false), onFocus: () => onHover(true), onBlur: () => onHover(false), children: content });
|
|
17137
17184
|
}
|
|
17138
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" }) {
|
|
17139
|
-
const map = (0,
|
|
17140
|
-
const [hoveredLine, setHoveredLine] = (0,
|
|
17141
|
-
(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)(() => {
|
|
17142
17189
|
control.reset();
|
|
17143
17190
|
setHovered(void 0);
|
|
17144
17191
|
}, [resetKey]);
|
|
@@ -17201,16 +17248,16 @@ function SvgMapPlot({ source, name, data, x, y, width, height, domain, range = d
|
|
|
17201
17248
|
}
|
|
17202
17249
|
|
|
17203
17250
|
// src/components/ChartRoamController.tsx
|
|
17204
|
-
var
|
|
17251
|
+
var import_react68 = require("react");
|
|
17205
17252
|
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
17206
17253
|
function ChartRoamController({ x = 800, y = 5, onPan, onZoom }) {
|
|
17207
|
-
const [hovered, setHovered] = (0,
|
|
17208
|
-
const timer = (0,
|
|
17254
|
+
const [hovered, setHovered] = (0, import_react68.useState)(), [focused, setFocused] = (0, import_react68.useState)();
|
|
17255
|
+
const timer = (0, import_react68.useRef)();
|
|
17209
17256
|
const stop = () => {
|
|
17210
17257
|
if (timer.current !== void 0) clearInterval(timer.current);
|
|
17211
17258
|
timer.current = void 0;
|
|
17212
17259
|
};
|
|
17213
|
-
(0,
|
|
17260
|
+
(0, import_react68.useEffect)(() => {
|
|
17214
17261
|
window.addEventListener("blur", stop);
|
|
17215
17262
|
return () => {
|
|
17216
17263
|
stop();
|
|
@@ -17249,13 +17296,13 @@ function ChartRoamController({ x = 800, y = 5, onPan, onZoom }) {
|
|
|
17249
17296
|
}
|
|
17250
17297
|
|
|
17251
17298
|
// src/components/LineShareChart.tsx
|
|
17252
|
-
var
|
|
17299
|
+
var import_react88 = require("react");
|
|
17253
17300
|
|
|
17254
17301
|
// src/components/Charts.tsx
|
|
17255
|
-
var
|
|
17302
|
+
var import_react86 = require("react");
|
|
17256
17303
|
|
|
17257
17304
|
// src/components/ChartScatterMotion.tsx
|
|
17258
|
-
var
|
|
17305
|
+
var import_react69 = require("react");
|
|
17259
17306
|
|
|
17260
17307
|
// src/components/scatterMotion.ts
|
|
17261
17308
|
function scatterMotionEase(progress) {
|
|
@@ -17267,9 +17314,9 @@ function scatterMotionEase(progress) {
|
|
|
17267
17314
|
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
17268
17315
|
function ChartScatterMotion({ x, y, radius, enabled, duration = 2e3, updateDuration = 500, progress, children }) {
|
|
17269
17316
|
const target = { x, y, radius };
|
|
17270
|
-
const [frame, setFrame] = (0,
|
|
17271
|
-
const displayed = (0,
|
|
17272
|
-
(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)(() => {
|
|
17273
17320
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
17274
17321
|
let request = 0;
|
|
17275
17322
|
const publish = (next) => {
|
|
@@ -17380,12 +17427,12 @@ function layoutEventRiver(series, tailLength, area) {
|
|
|
17380
17427
|
}
|
|
17381
17428
|
|
|
17382
17429
|
// src/components/EventRiverBubble.tsx
|
|
17383
|
-
var
|
|
17430
|
+
var import_react70 = require("react");
|
|
17384
17431
|
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
17385
17432
|
function EventRiverBubble({ resetKey, draggable = true, tooltipPoint, onPointerUp, ...props }) {
|
|
17386
|
-
const [offset, setOffset] = (0,
|
|
17387
|
-
const drag = (0,
|
|
17388
|
-
(0,
|
|
17433
|
+
const [offset, setOffset] = (0, import_react70.useState)(0);
|
|
17434
|
+
const drag = (0, import_react70.useRef)();
|
|
17435
|
+
(0, import_react70.useEffect)(() => {
|
|
17389
17436
|
setOffset(0);
|
|
17390
17437
|
drag.current = void 0;
|
|
17391
17438
|
}, [resetKey]);
|
|
@@ -17436,13 +17483,13 @@ function EventRiverBubble({ resetKey, draggable = true, tooltipPoint, onPointerU
|
|
|
17436
17483
|
}
|
|
17437
17484
|
|
|
17438
17485
|
// src/components/EventRiverMotion.tsx
|
|
17439
|
-
var
|
|
17486
|
+
var import_react71 = require("react");
|
|
17440
17487
|
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
17441
17488
|
function EventRiverMotion({ geometry, enabled = true, duration = 2e3, updateDuration = 500, progress, children }) {
|
|
17442
|
-
const [frame, setFrame] = (0,
|
|
17443
|
-
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);
|
|
17444
17491
|
const signature = JSON.stringify(geometry);
|
|
17445
|
-
(0,
|
|
17492
|
+
(0, import_react71.useEffect)(() => {
|
|
17446
17493
|
const preference = window.matchMedia("(prefers-reduced-motion: reduce)"), target = { ...geometry, scale: 1 };
|
|
17447
17494
|
const from = started.current ? displayed.current : { ...geometry, scale: 0.1 };
|
|
17448
17495
|
let request = 0;
|
|
@@ -17559,7 +17606,7 @@ function transferPieValue(series, source, target, connector = " & ") {
|
|
|
17559
17606
|
}
|
|
17560
17607
|
|
|
17561
17608
|
// src/components/ChartValueIsland.tsx
|
|
17562
|
-
var
|
|
17609
|
+
var import_react72 = require("react");
|
|
17563
17610
|
|
|
17564
17611
|
// src/components/cartesianTransfer.ts
|
|
17565
17612
|
function addValues(a, b) {
|
|
@@ -17624,13 +17671,13 @@ function findCompositeValueTarget(element, x, y) {
|
|
|
17624
17671
|
// src/components/ChartValueIsland.tsx
|
|
17625
17672
|
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
17626
17673
|
function ChartValueIsland({ name, value, x, y, color = "#2ec7c9", onDrop, resolveTarget = findCompositeValueTarget }) {
|
|
17627
|
-
const drag = (0,
|
|
17628
|
-
const [offset, setOffset] = (0,
|
|
17674
|
+
const drag = (0, import_react72.useRef)(null);
|
|
17675
|
+
const [offset, setOffset] = (0, import_react72.useState)([0, 0]);
|
|
17629
17676
|
const cancel = () => {
|
|
17630
17677
|
drag.current = null;
|
|
17631
17678
|
setOffset([0, 0]);
|
|
17632
17679
|
};
|
|
17633
|
-
(0,
|
|
17680
|
+
(0, import_react72.useEffect)(cancel, [x, y]);
|
|
17634
17681
|
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
17635
17682
|
ChartMark,
|
|
17636
17683
|
{
|
|
@@ -17683,12 +17730,12 @@ function ChartValueIsland({ name, value, x, y, color = "#2ec7c9", onDrop, resolv
|
|
|
17683
17730
|
}
|
|
17684
17731
|
|
|
17685
17732
|
// src/components/ChartPulseRing.tsx
|
|
17686
|
-
var
|
|
17733
|
+
var import_react73 = require("react");
|
|
17687
17734
|
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
17688
17735
|
function ChartPulseRing({ center, radius, scaleSize = 2, color = "gold", shadowBlur = 10, period = 15, progress, enabled = true }) {
|
|
17689
|
-
const id = (0,
|
|
17690
|
-
const [reduced, setReduced] = (0,
|
|
17691
|
-
(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)(() => {
|
|
17692
17739
|
const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
17693
17740
|
setReduced(preference.matches);
|
|
17694
17741
|
let frame = 0;
|
|
@@ -17832,7 +17879,7 @@ function chartMarkerPath(kind, x, y, size) {
|
|
|
17832
17879
|
}
|
|
17833
17880
|
|
|
17834
17881
|
// src/components/ChartLargeMapPointCanvas.tsx
|
|
17835
|
-
var
|
|
17882
|
+
var import_react74 = require("react");
|
|
17836
17883
|
|
|
17837
17884
|
// src/components/largeMapPointPulse.ts
|
|
17838
17885
|
function largeMapPointPulse(elapsed, period, initial3, delay) {
|
|
@@ -17848,8 +17895,8 @@ function largeMapPointSize(size, pulse) {
|
|
|
17848
17895
|
// src/components/ChartLargeMapPointCanvas.tsx
|
|
17849
17896
|
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
17850
17897
|
function ChartLargeMapPointCanvas({ groups, width, height }) {
|
|
17851
|
-
const canvas = (0,
|
|
17852
|
-
(0,
|
|
17898
|
+
const canvas = (0, import_react74.useRef)(null), key = JSON.stringify(groups);
|
|
17899
|
+
(0, import_react74.useEffect)(() => {
|
|
17853
17900
|
const element = canvas.current, context = element?.getContext("2d");
|
|
17854
17901
|
if (!element || !context) return;
|
|
17855
17902
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -17908,12 +17955,12 @@ function ChartLargeMapPointCanvas({ groups, width, height }) {
|
|
|
17908
17955
|
}
|
|
17909
17956
|
|
|
17910
17957
|
// src/components/ChartCrosshair.tsx
|
|
17911
|
-
var
|
|
17958
|
+
var import_react75 = require("react");
|
|
17912
17959
|
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
17913
17960
|
function ChartCrosshair({ bounds, xDomain, yDomain, formatX = decimal, formatY = decimal }) {
|
|
17914
|
-
const ref = (0,
|
|
17915
|
-
const [point, setPoint] = (0,
|
|
17916
|
-
(0,
|
|
17961
|
+
const ref = (0, import_react75.useRef)(null);
|
|
17962
|
+
const [point, setPoint] = (0, import_react75.useState)(null);
|
|
17963
|
+
(0, import_react75.useEffect)(() => {
|
|
17917
17964
|
const svg = ref.current?.ownerSVGElement;
|
|
17918
17965
|
if (!svg) return;
|
|
17919
17966
|
const clear = () => setPoint(null);
|
|
@@ -17933,7 +17980,7 @@ function ChartCrosshair({ bounds, xDomain, yDomain, formatX = decimal, formatY =
|
|
|
17933
17980
|
svg.removeEventListener("pointercancel", clear);
|
|
17934
17981
|
};
|
|
17935
17982
|
}, [bounds.x, bounds.y, bounds.width, bounds.height]);
|
|
17936
|
-
(0,
|
|
17983
|
+
(0, import_react75.useEffect)(() => setPoint(null), [xDomain[0], xDomain[1], yDomain[0], yDomain[1]]);
|
|
17937
17984
|
const x = point ? xDomain[0] + (point.x - bounds.x) / bounds.width * (xDomain[1] - xDomain[0]) : 0;
|
|
17938
17985
|
const y = point ? yDomain[1] - (point.y - bounds.y) / bounds.height * (yDomain[1] - yDomain[0]) : 0;
|
|
17939
17986
|
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("g", { ref, className: "sia-chart__crosshair", "aria-hidden": "true", children: [
|
|
@@ -17950,7 +17997,7 @@ function decimal(value) {
|
|
|
17950
17997
|
}
|
|
17951
17998
|
|
|
17952
17999
|
// src/components/HeatmapRasterLayer.tsx
|
|
17953
|
-
var
|
|
18000
|
+
var import_react76 = require("react");
|
|
17954
18001
|
|
|
17955
18002
|
// src/components/heatmapRaster.ts
|
|
17956
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] }];
|
|
@@ -17997,9 +18044,9 @@ function rasterizeHeatmap(width, height, points, options = {}) {
|
|
|
17997
18044
|
// src/components/HeatmapRasterLayer.tsx
|
|
17998
18045
|
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
17999
18046
|
function HeatmapRaster({ width, height, points, options }) {
|
|
18000
|
-
const [url, setUrl] = (0,
|
|
18047
|
+
const [url, setUrl] = (0, import_react76.useState)();
|
|
18001
18048
|
const optionsKey = JSON.stringify(options);
|
|
18002
|
-
(0,
|
|
18049
|
+
(0, import_react76.useEffect)(() => {
|
|
18003
18050
|
const canvas = document.createElement("canvas");
|
|
18004
18051
|
canvas.width = width;
|
|
18005
18052
|
canvas.height = height;
|
|
@@ -18099,10 +18146,10 @@ function chordMatrixLayout(matrix, options = {}) {
|
|
|
18099
18146
|
}
|
|
18100
18147
|
|
|
18101
18148
|
// src/components/MatrixChordPlot.tsx
|
|
18102
|
-
var
|
|
18149
|
+
var import_react77 = require("react");
|
|
18103
18150
|
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
18104
18151
|
function MatrixChordPlot({ names, matrix, series, appearance, showNodeLabels = false, rotateNodeLabels = false, linkLabel, sort, sortSub, padAngle, clockwise, palette, geometry, legacySubSort = false, showScale = false }) {
|
|
18105
|
-
const [hoveredLink, setHoveredLink] = (0,
|
|
18152
|
+
const [hoveredLink, setHoveredLink] = (0, import_react77.useState)(null);
|
|
18106
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;
|
|
18107
18154
|
const point = (angle) => [cx + Math.cos(angle) * r, cy + Math.sin(angle) * r];
|
|
18108
18155
|
return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("g", { className: "sia-chart__matrix-chord", children: [
|
|
@@ -18449,13 +18496,13 @@ function transferRadarSeries(panels, source, target, connector = " & ") {
|
|
|
18449
18496
|
}
|
|
18450
18497
|
|
|
18451
18498
|
// src/components/ChartRoamGroup.tsx
|
|
18452
|
-
var
|
|
18499
|
+
var import_react78 = require("react");
|
|
18453
18500
|
var import_jsx_runtime79 = require("react/jsx-runtime");
|
|
18454
18501
|
var initial2 = { x: 0, y: 0, scale: 1 };
|
|
18455
18502
|
function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true, ariaLabel, resetSignal = 0 }) {
|
|
18456
|
-
const group = (0,
|
|
18457
|
-
const [view, setView] = (0,
|
|
18458
|
-
(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)(() => {
|
|
18459
18506
|
setView(initial2);
|
|
18460
18507
|
drag.current = void 0;
|
|
18461
18508
|
}, [resetSignal]);
|
|
@@ -18465,7 +18512,7 @@ function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true,
|
|
|
18465
18512
|
const local = new DOMPoint(clientX, clientY).matrixTransform(matrix.inverse());
|
|
18466
18513
|
return [local.x, local.y];
|
|
18467
18514
|
};
|
|
18468
|
-
(0,
|
|
18515
|
+
(0, import_react78.useEffect)(() => {
|
|
18469
18516
|
const target = group.current;
|
|
18470
18517
|
if (!target || !enabled || !zoomEnabled) return;
|
|
18471
18518
|
const wheel = (event) => {
|
|
@@ -18526,11 +18573,11 @@ function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true,
|
|
|
18526
18573
|
}
|
|
18527
18574
|
|
|
18528
18575
|
// src/components/TreeNodeGlyph.tsx
|
|
18529
|
-
var
|
|
18576
|
+
var import_react79 = require("react");
|
|
18530
18577
|
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
18531
18578
|
function TreeNodeGlyph({ symbol = "circle", x, y, width, height, color, itemStyle }) {
|
|
18532
|
-
const [failed, setFailed] = (0,
|
|
18533
|
-
(0,
|
|
18579
|
+
const [failed, setFailed] = (0, import_react79.useState)(false);
|
|
18580
|
+
(0, import_react79.useEffect)(() => setFailed(false), [symbol]);
|
|
18534
18581
|
const style = { fill: itemStyle.brushType === "stroke" ? "none" : color, stroke: itemStyle.borderColor, strokeWidth: itemStyle.borderWidth };
|
|
18535
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: [
|
|
18536
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" }),
|
|
@@ -18819,7 +18866,7 @@ function resolveMapRegionAppearance(base, datum, emphasized) {
|
|
|
18819
18866
|
}
|
|
18820
18867
|
|
|
18821
18868
|
// src/components/ChartBundledMapCanvas.tsx
|
|
18822
|
-
var
|
|
18869
|
+
var import_react80 = require("react");
|
|
18823
18870
|
|
|
18824
18871
|
// src/components/edgeBundling.ts
|
|
18825
18872
|
var distance = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]);
|
|
@@ -18963,9 +19010,9 @@ function sampleBundledPath(curves, progress) {
|
|
|
18963
19010
|
var import_jsx_runtime81 = require("react/jsx-runtime");
|
|
18964
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 }) {
|
|
18965
19012
|
const signature = JSON.stringify(edges), pointKey = JSON.stringify(points), effectKey = JSON.stringify(effect);
|
|
18966
|
-
const paths = (0,
|
|
18967
|
-
const base = (0,
|
|
18968
|
-
(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)(() => {
|
|
18969
19016
|
const node = base.current, ctx = node?.getContext("2d");
|
|
18970
19017
|
if (!node || !ctx) return;
|
|
18971
19018
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -18991,7 +19038,7 @@ function ChartBundledMapCanvas({ edges, points = [], smoothness = 0.1, color = "
|
|
|
18991
19038
|
ctx.fill();
|
|
18992
19039
|
}
|
|
18993
19040
|
}, [paths, pointKey, width, height, color, opacity, lineWidth, pointColor, pointRadius]);
|
|
18994
|
-
(0,
|
|
19041
|
+
(0, import_react80.useEffect)(() => {
|
|
18995
19042
|
const node = moving.current, ctx = node?.getContext("2d");
|
|
18996
19043
|
if (!node || !ctx) return;
|
|
18997
19044
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -19053,11 +19100,11 @@ function ChartBundledMapCanvas({ edges, points = [], smoothness = 0.1, color = "
|
|
|
19053
19100
|
}
|
|
19054
19101
|
|
|
19055
19102
|
// src/components/ChartMapEffectCanvas.tsx
|
|
19056
|
-
var
|
|
19103
|
+
var import_react81 = require("react");
|
|
19057
19104
|
var import_jsx_runtime82 = require("react/jsx-runtime");
|
|
19058
19105
|
function ChartMapEffectCanvas({ effects, width, height, alpha = 0.95 }) {
|
|
19059
|
-
const canvas = (0,
|
|
19060
|
-
(0,
|
|
19106
|
+
const canvas = (0, import_react81.useRef)(null), key = JSON.stringify(effects);
|
|
19107
|
+
(0, import_react81.useEffect)(() => {
|
|
19061
19108
|
const element = canvas.current;
|
|
19062
19109
|
if (!element) return;
|
|
19063
19110
|
const context = element.getContext("2d");
|
|
@@ -19203,12 +19250,12 @@ function layoutTreeNodes(root, options = {}) {
|
|
|
19203
19250
|
}
|
|
19204
19251
|
|
|
19205
19252
|
// src/components/ChartDataEditor.tsx
|
|
19206
|
-
var
|
|
19253
|
+
var import_react82 = require("react");
|
|
19207
19254
|
var import_jsx_runtime83 = require("react/jsx-runtime");
|
|
19208
19255
|
function ChartDataEditor({ series, onApply, readOnly = false, allowNull = false }) {
|
|
19209
|
-
const [draft, setDraft] = (0,
|
|
19210
|
-
const [error, setError] = (0,
|
|
19211
|
-
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);
|
|
19212
19259
|
function apply() {
|
|
19213
19260
|
try {
|
|
19214
19261
|
const values = JSON.parse(draft);
|
|
@@ -19239,11 +19286,11 @@ function ChartDataEditor({ series, onApply, readOnly = false, allowNull = false
|
|
|
19239
19286
|
}
|
|
19240
19287
|
|
|
19241
19288
|
// src/components/ChartBarStatistics.tsx
|
|
19242
|
-
var
|
|
19289
|
+
var import_react83 = require("react");
|
|
19243
19290
|
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
19244
19291
|
function ChartBarStatistics({ values, kinds, project, plot, horizontal, color, gradient, seriesName }) {
|
|
19245
|
-
const id = (0,
|
|
19246
|
-
const [active, setActive] = (0,
|
|
19292
|
+
const id = (0, import_react83.useId)().replaceAll(":", "");
|
|
19293
|
+
const [active, setActive] = (0, import_react83.useState)();
|
|
19247
19294
|
const paint = gradient ? `url(#${id})` : color;
|
|
19248
19295
|
return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("g", { children: [
|
|
19249
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,
|
|
@@ -19298,7 +19345,7 @@ function lineSegments(points) {
|
|
|
19298
19345
|
}
|
|
19299
19346
|
|
|
19300
19347
|
// src/components/useBarMagicState.ts
|
|
19301
|
-
var
|
|
19348
|
+
var import_react84 = require("react");
|
|
19302
19349
|
|
|
19303
19350
|
// src/components/cartesianMagicState.ts
|
|
19304
19351
|
function changeCartesianMagic(state, action) {
|
|
@@ -19313,8 +19360,8 @@ function changeCartesianMagic(state, action) {
|
|
|
19313
19360
|
function useBarMagicState(toolbox, shape = "bar") {
|
|
19314
19361
|
const initial3 = { shape, layout: "original" };
|
|
19315
19362
|
const options = toolbox === true ? {} : typeof toolbox === "object" ? toolbox : void 0;
|
|
19316
|
-
const [state, setState] = (0,
|
|
19317
|
-
(0,
|
|
19363
|
+
const [state, setState] = (0, import_react84.useState)(() => changeCartesianMagic(initial3, options?.activeMagicType ?? shape));
|
|
19364
|
+
(0, import_react84.useEffect)(() => {
|
|
19318
19365
|
if (options?.activeMagicType) setState((s) => changeCartesianMagic(s, options.activeMagicType));
|
|
19319
19366
|
}, [options?.activeMagicType]);
|
|
19320
19367
|
const resolved = options ? { ...options, activeMagicType: state.shape, activeMagicTypes: options.activeMagicTypes ?? (state.layout === "original" ? [state.shape] : [state.shape, state.layout]), onMagicTypeChange: (action) => {
|
|
@@ -19328,7 +19375,7 @@ function useBarMagicState(toolbox, shape = "bar") {
|
|
|
19328
19375
|
}
|
|
19329
19376
|
|
|
19330
19377
|
// src/components/useBarValueTransfer.ts
|
|
19331
|
-
var
|
|
19378
|
+
var import_react85 = require("react");
|
|
19332
19379
|
|
|
19333
19380
|
// src/components/barTransfer.ts
|
|
19334
19381
|
function transferBarValue(series, source, target, categories) {
|
|
@@ -19345,10 +19392,10 @@ function transferBarValue(series, source, target, categories) {
|
|
|
19345
19392
|
|
|
19346
19393
|
// src/components/useBarValueTransfer.ts
|
|
19347
19394
|
function useBarValueTransfer(series, initial3, categories, enabled, publish, onError) {
|
|
19348
|
-
const [islands, setIslands] = (0,
|
|
19349
|
-
const drag = (0,
|
|
19350
|
-
const [offset, setOffset] = (0,
|
|
19351
|
-
(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)(() => {
|
|
19352
19399
|
setIslands([]);
|
|
19353
19400
|
drag.current = void 0;
|
|
19354
19401
|
setOffset(void 0);
|
|
@@ -19449,12 +19496,12 @@ function logarithmicValueAt(progress, domain) {
|
|
|
19449
19496
|
|
|
19450
19497
|
// src/components/Charts.tsx
|
|
19451
19498
|
var import_jsx_runtime85 = require("react/jsx-runtime");
|
|
19452
|
-
var
|
|
19499
|
+
var import_react87 = require("react");
|
|
19453
19500
|
var PLOT = { x: 62, y: 48, width: 628, height: 250 };
|
|
19454
19501
|
var PLOT_BOTTOM = PLOT.y + PLOT.height;
|
|
19455
19502
|
function useLegendSelection(names, controlled, onChange) {
|
|
19456
|
-
const [internal, setInternal] = (0,
|
|
19457
|
-
(0,
|
|
19503
|
+
const [internal, setInternal] = (0, import_react86.useState)(() => Object.fromEntries(names.map((name) => [name, true])));
|
|
19504
|
+
(0, import_react86.useEffect)(() => {
|
|
19458
19505
|
setInternal((current) => {
|
|
19459
19506
|
const next = { ...current };
|
|
19460
19507
|
names.forEach((name) => {
|
|
@@ -19554,7 +19601,7 @@ function lineSymbol(type, x, y, size, color, image, strokeWidth = 2) {
|
|
|
19554
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 });
|
|
19555
19602
|
}
|
|
19556
19603
|
function useZoom(value, defaultValue, onChange) {
|
|
19557
|
-
const [internal, setInternal] = (0,
|
|
19604
|
+
const [internal, setInternal] = (0, import_react86.useState)([...defaultValue ?? [0, 100]]);
|
|
19558
19605
|
const current = value ?? internal;
|
|
19559
19606
|
const update = (next) => {
|
|
19560
19607
|
if (!value) setInternal(next);
|
|
@@ -19564,8 +19611,8 @@ function useZoom(value, defaultValue, onChange) {
|
|
|
19564
19611
|
}
|
|
19565
19612
|
function useToolboxMagicType(toolbox, fallback) {
|
|
19566
19613
|
const options = toolbox === true ? {} : typeof toolbox === "object" ? toolbox : void 0;
|
|
19567
|
-
const [internal, setInternal] = (0,
|
|
19568
|
-
(0,
|
|
19614
|
+
const [internal, setInternal] = (0, import_react86.useState)(options?.activeMagicType ?? fallback);
|
|
19615
|
+
(0, import_react86.useEffect)(() => {
|
|
19569
19616
|
if (options?.activeMagicType) setInternal(options.activeMagicType);
|
|
19570
19617
|
}, [options?.activeMagicType]);
|
|
19571
19618
|
const active = options?.activeMagicType ?? internal;
|
|
@@ -19583,15 +19630,15 @@ function useToolboxMagicType(toolbox, fallback) {
|
|
|
19583
19630
|
} : toolbox;
|
|
19584
19631
|
return [active, resolved];
|
|
19585
19632
|
}
|
|
19586
|
-
var LineChart = (0,
|
|
19587
|
-
const [hoverIndex, setHoverIndex] = (0,
|
|
19588
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
19589
|
-
const [dragPoint, setDragPoint] = (0,
|
|
19590
|
-
const linePaintId = (0,
|
|
19591
|
-
const [hoveredLinePoint, setHoveredLinePoint] = (0,
|
|
19592
|
-
(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]);
|
|
19593
19640
|
const series = externalValueTransfer ? sourceSeries : editableSeries;
|
|
19594
|
-
const initialTransferSeries = (0,
|
|
19641
|
+
const initialTransferSeries = (0, import_react86.useMemo)(() => sourceSeries.map((item) => ({ ...item, data: item.data.map(lineValue) })), [sourceSeries]);
|
|
19595
19642
|
const localTransfer = useBarValueTransfer(series.map((item) => ({ ...item, data: item.data.map(lineValue) })), initialTransferSeries, categories, calculable && calculableMode === "transfer" && !externalValueTransfer, (nextBars) => {
|
|
19596
19643
|
const next = series.map((item, row) => ({ ...item, data: item.data.map((datum, index) => {
|
|
19597
19644
|
const value = barDatum(nextBars[row].data[index]).value;
|
|
@@ -19608,8 +19655,8 @@ var LineChart = (0, import_react85.forwardRef)(function LineChart2({ calculableM
|
|
|
19608
19655
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
19609
19656
|
const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
|
|
19610
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;
|
|
19611
|
-
const [zoomBrushActive, setZoomBrushActive] = (0,
|
|
19612
|
-
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]] : []);
|
|
19613
19660
|
const zoomBrush = dataZoom && zoomBrushActive ? { minSelectionSize: zoomMinSelectionSize, selectionStyle: zoomSelectionStyle, selectionShape: zoomSelectionShape, bounds: PLOT2, onCancel: () => setZoomBrushActive(false), onSelect: (range) => {
|
|
19614
19661
|
const start = Math.min(...zoomValue), span = Math.max(...zoomValue) - start;
|
|
19615
19662
|
const next = [start + range[0] * span, start + range[1] * span];
|
|
@@ -19996,17 +20043,17 @@ function ChartPin({ point, color, label }) {
|
|
|
19996
20043
|
function barDatum(datum) {
|
|
19997
20044
|
return typeof datum === "number" ? { value: datum } : datum;
|
|
19998
20045
|
}
|
|
19999
|
-
var BarChart = (0,
|
|
20000
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
20001
|
-
const [dragBar, setDragBar] = (0,
|
|
20002
|
-
const [hoveredBar, setHoveredBar] = (0,
|
|
20003
|
-
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(":", "");
|
|
20004
20051
|
const localTransfer = useBarValueTransfer(editableSeries, sourceSeries, categories, calculable && calculableMode === "transfer" && !externalValueTransfer, (next) => {
|
|
20005
20052
|
setEditableSeries(next);
|
|
20006
20053
|
onDataChange?.(next);
|
|
20007
20054
|
}, onTransferError);
|
|
20008
20055
|
const transfer = externalValueTransfer ?? localTransfer;
|
|
20009
|
-
(0,
|
|
20056
|
+
(0, import_react86.useEffect)(() => setEditableSeries(sourceSeries), [sourceSeries]);
|
|
20010
20057
|
const series = externalValueTransfer ? sourceSeries : editableSeries;
|
|
20011
20058
|
const legacy = appearance === "macarons";
|
|
20012
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 };
|
|
@@ -20253,17 +20300,17 @@ var BarChart = (0, import_react85.forwardRef)(function BarChart2({ valueTransfer
|
|
|
20253
20300
|
] }, `bar-island-${index}`)) : null
|
|
20254
20301
|
] });
|
|
20255
20302
|
});
|
|
20256
|
-
var ScatterChart = (0,
|
|
20257
|
-
const [data, setData] = (0,
|
|
20258
|
-
const [emphasizedPoint, setEmphasizedPoint] = (0,
|
|
20259
|
-
const [emphasizedAnnotation, setEmphasizedAnnotation] = (0,
|
|
20260
|
-
(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]);
|
|
20261
20308
|
const plot = plotBounds ?? PLOT, bottom = plot.y + plot.height;
|
|
20262
20309
|
const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
|
|
20263
20310
|
const allCategories = [...new Set(data.map((item) => item.category).filter((value) => Boolean(value)))];
|
|
20264
20311
|
const legend = useLegendSelection(allCategories, legendSelected, onLegendSelectionChange);
|
|
20265
20312
|
const activeData = data.filter((item) => !item.category || legend.isSelected(item.category));
|
|
20266
|
-
const sorted = (0,
|
|
20313
|
+
const sorted = (0, import_react86.useMemo)(() => [...activeData].sort((left, right) => left.x - right.x), [activeData]);
|
|
20267
20314
|
const startIndex = dataZoom ? Math.floor(Math.min(...zoomValue) / 100 * Math.max(0, sorted.length - 1)) : 0;
|
|
20268
20315
|
const endIndex = dataZoom ? Math.max(startIndex + 1, Math.ceil(Math.max(...zoomValue) / 100 * sorted.length)) : sorted.length;
|
|
20269
20316
|
const categoryWindow = xCategories ? scatterCategoryWindow(xCategories, dataZoom ? zoomValue : [0, 100]) : void 0;
|
|
@@ -20278,10 +20325,10 @@ var ScatterChart = (0, import_react85.forwardRef)(function ScatterChart2({ symbo
|
|
|
20278
20325
|
const visualMinimum = visualMap?.min ?? (visualValues.length ? Math.min(...visualValues) : 0);
|
|
20279
20326
|
const visualMaximum = visualMap?.max ?? (visualValues.length ? Math.max(...visualValues) : 1);
|
|
20280
20327
|
const visualColors = visualMap?.colors ?? ["#e6f4ff", "#1677ff"];
|
|
20281
|
-
const [selectedPieces, setSelectedPieces] = (0,
|
|
20282
|
-
const [visualRange, setVisualRange] = (0,
|
|
20328
|
+
const [selectedPieces, setSelectedPieces] = (0, import_react86.useState)([]);
|
|
20329
|
+
const [visualRange, setVisualRange] = (0, import_react86.useState)();
|
|
20283
20330
|
const piecesKey = JSON.stringify(visualMap?.pieces ?? []);
|
|
20284
|
-
(0,
|
|
20331
|
+
(0, import_react86.useEffect)(() => setSelectedPieces([]), [piecesKey]);
|
|
20285
20332
|
const statistics = scatterStatistics(visibleData, markByCategory);
|
|
20286
20333
|
const plotted = visibleData.map((item, index) => {
|
|
20287
20334
|
const x = linearScale(categoryWindow ? categoryWindow.indexOf(item.x) : item.x, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]);
|
|
@@ -20439,8 +20486,8 @@ var ScatterChart = (0, import_react85.forwardRef)(function ScatterChart2({ symbo
|
|
|
20439
20486
|
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChartDataZoom, { value: zoomValue, onChange: setZoomValue })
|
|
20440
20487
|
] }) : content;
|
|
20441
20488
|
});
|
|
20442
|
-
var CandlestickChart = (0,
|
|
20443
|
-
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);
|
|
20444
20491
|
const active = activeIndex === void 0 ? internalActive : activeIndex;
|
|
20445
20492
|
const seriesVisible = controlledVisible ?? internalVisible;
|
|
20446
20493
|
const setActive = (index) => {
|
|
@@ -20451,7 +20498,7 @@ var CandlestickChart = (0, import_react85.forwardRef)(function CandlestickChart2
|
|
|
20451
20498
|
if (controlledVisible === void 0) setInternalVisible(visible);
|
|
20452
20499
|
onSeriesVisibilityChange?.(visible);
|
|
20453
20500
|
};
|
|
20454
|
-
(0,
|
|
20501
|
+
(0, import_react86.useEffect)(() => {
|
|
20455
20502
|
setData(initialData);
|
|
20456
20503
|
}, [initialData]);
|
|
20457
20504
|
const legacy = appearance === "macarons";
|
|
@@ -20542,20 +20589,20 @@ var CandlestickChart = (0, import_react85.forwardRef)(function CandlestickChart2
|
|
|
20542
20589
|
] }) : content;
|
|
20543
20590
|
});
|
|
20544
20591
|
var EMPTY_PIE_DATA = [];
|
|
20545
|
-
var PieChart = (0,
|
|
20546
|
-
const pieGradientId = (0,
|
|
20547
|
-
const [pieIslands, setPieIslands] = (0,
|
|
20548
|
-
const sourceRings = (0,
|
|
20549
|
-
const [editableRings, setEditableRings] = (0,
|
|
20550
|
-
const valueDrag = (0,
|
|
20551
|
-
const [valueOffset, setValueOffset] = (0,
|
|
20552
|
-
(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]);
|
|
20553
20600
|
const allData = editableRings.flatMap((ring) => ring.data).filter((item) => !item.missing);
|
|
20554
20601
|
const names = [...new Set(allData.map((item) => item.name))];
|
|
20555
20602
|
const legend = useLegendSelection(names, legendSelected, onLegendSelectionChange);
|
|
20556
20603
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u997C\u56FE");
|
|
20557
|
-
const [hovered, setHovered] = (0,
|
|
20558
|
-
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)]);
|
|
20559
20606
|
const selectedNames = selected ?? internalSelected;
|
|
20560
20607
|
const legacy = appearance === "macarons";
|
|
20561
20608
|
const colorNames = [...new Set(allData.filter((item) => item.showInLegend !== false).map((item) => item.name))];
|
|
@@ -20775,15 +20822,15 @@ var PieChart = (0, import_react85.forwardRef)(function PieChart2({ pulseRing, ca
|
|
|
20775
20822
|
});
|
|
20776
20823
|
var EMPTY_RADAR_INDICATORS = [];
|
|
20777
20824
|
var EMPTY_RADAR_SERIES = [];
|
|
20778
|
-
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) {
|
|
20779
20826
|
const legacy = appearance === "macarons";
|
|
20780
|
-
const initialPanels = (0,
|
|
20781
|
-
const [sourcePanels, setSourcePanels] = (0,
|
|
20782
|
-
const [hoveredRadar, setHoveredRadar] = (0,
|
|
20783
|
-
const radarPaintId = `sia-radar-${(0,
|
|
20784
|
-
const radarDrag = (0,
|
|
20785
|
-
const [radarOffset, setRadarOffset] = (0,
|
|
20786
|
-
(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)(() => {
|
|
20787
20834
|
setSourcePanels(initialPanels);
|
|
20788
20835
|
radarDrag.current = null;
|
|
20789
20836
|
setRadarOffset(null);
|
|
@@ -20937,7 +20984,7 @@ var RadarChart = (0, import_react85.forwardRef)(function RadarChart2({ indicator
|
|
|
20937
20984
|
})
|
|
20938
20985
|
] });
|
|
20939
20986
|
});
|
|
20940
|
-
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) {
|
|
20941
20988
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u548C\u5F26");
|
|
20942
20989
|
if (/force|力导向|关系/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
|
|
20943
20990
|
GraphChart,
|
|
@@ -21010,11 +21057,11 @@ var ChordChart = (0, import_react85.forwardRef)(function ChordChart2({ nodes, li
|
|
|
21010
21057
|
})
|
|
21011
21058
|
] });
|
|
21012
21059
|
});
|
|
21013
|
-
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) {
|
|
21014
21061
|
const categories = [...new Set(nodes.map((node) => node.category).filter((value) => Boolean(value)))];
|
|
21015
21062
|
const legend = useLegendSelection(categories, legendSelected, onLegendSelectionChange);
|
|
21016
21063
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, layout === "force" ? "\u529B\u5BFC\u5411" : "\u5173\u7CFB");
|
|
21017
|
-
const [roamReset, setRoamReset] = (0,
|
|
21064
|
+
const [roamReset, setRoamReset] = (0, import_react86.useState)(0);
|
|
21018
21065
|
const chartToolbox = typeof resolvedToolbox === "object" ? {
|
|
21019
21066
|
...resolvedToolbox,
|
|
21020
21067
|
onRestore: () => {
|
|
@@ -21023,23 +21070,23 @@ var GraphChart = (0, import_react85.forwardRef)(function GraphChart2({ nodes, li
|
|
|
21023
21070
|
resolvedToolbox.onRestore?.();
|
|
21024
21071
|
}
|
|
21025
21072
|
} : resolvedToolbox;
|
|
21026
|
-
const activeNodes = (0,
|
|
21027
|
-
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)(() => {
|
|
21028
21075
|
const activeIds = new Set(activeNodes.map((node) => node.id));
|
|
21029
21076
|
return links.filter((link) => activeIds.has(link.source) && activeIds.has(link.target));
|
|
21030
21077
|
}, [activeNodes, links]);
|
|
21031
21078
|
const progressive = progressiveForce && layout === "force" && props.animation !== false && !/chord|和弦/i.test(magicType);
|
|
21032
|
-
const calculatedPositions = (0,
|
|
21033
|
-
const [positions, setPositions] = (0,
|
|
21034
|
-
const [dragging, setDragging] = (0,
|
|
21035
|
-
const heldNode = (0,
|
|
21036
|
-
const [forceRestart, setForceRestart] = (0,
|
|
21037
|
-
(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)(() => {
|
|
21038
21085
|
setPositions(calculatedPositions);
|
|
21039
21086
|
setDragging(null);
|
|
21040
21087
|
heldNode.current = null;
|
|
21041
21088
|
}, [calculatedPositions, roamReset]);
|
|
21042
|
-
(0,
|
|
21089
|
+
(0, import_react86.useEffect)(() => {
|
|
21043
21090
|
if (!progressive || activeNodes.length > (forceOptions?.maxNodes ?? 80)) return;
|
|
21044
21091
|
let frame = 0, remaining = Math.max(0, forceOptions?.iterations ?? 140), previous, carry = 0;
|
|
21045
21092
|
const tick = (time) => {
|
|
@@ -21157,7 +21204,7 @@ var GraphChart = (0, import_react85.forwardRef)(function GraphChart2({ nodes, li
|
|
|
21157
21204
|
] })
|
|
21158
21205
|
] });
|
|
21159
21206
|
});
|
|
21160
|
-
var ForceGraphChart = (0,
|
|
21207
|
+
var ForceGraphChart = (0, import_react86.forwardRef)(function ForceGraphChart2(props, ref) {
|
|
21161
21208
|
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(GraphChart, { ...props, layout: "force", ref });
|
|
21162
21209
|
});
|
|
21163
21210
|
var ForceChart = ForceGraphChart;
|
|
@@ -21186,12 +21233,12 @@ function colorBetween(start, end, ratio) {
|
|
|
21186
21233
|
const to = read(end);
|
|
21187
21234
|
return `rgb(${from.map((value, index) => Math.round(value + ((to[index] ?? value) - value) * Math.max(0, Math.min(1, ratio)))).join(" ")})`;
|
|
21188
21235
|
}
|
|
21189
|
-
var MapChart = (0,
|
|
21190
|
-
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)]);
|
|
21191
21238
|
const selectedNames = selected ?? internalSelected;
|
|
21192
|
-
const [hoveredRegion, setHoveredRegion] = (0,
|
|
21193
|
-
const [hoveredMarkPoint, setHoveredMarkPoint] = (0,
|
|
21194
|
-
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)();
|
|
21195
21242
|
const hoveredValueRange = emphasisValueRange ?? internalHoveredValueRange;
|
|
21196
21243
|
const roamControl = useMapRoam(roam, scaleLimit, wheelZoomFactors);
|
|
21197
21244
|
const { view } = roamControl;
|
|
@@ -21206,8 +21253,8 @@ var MapChart = (0, import_react85.forwardRef)(function MapChart2({ overlayProjec
|
|
|
21206
21253
|
const values = data.map((item) => item.value);
|
|
21207
21254
|
const minimum = valueDomain?.[0] ?? (values.length ? Math.min(...values) : 0);
|
|
21208
21255
|
const maximum = valueDomain?.[1] ?? (values.length ? Math.max(...values) : 1);
|
|
21209
|
-
const [internalVisualRange, setInternalVisualRange] = (0,
|
|
21210
|
-
(0,
|
|
21256
|
+
const [internalVisualRange, setInternalVisualRange] = (0, import_react86.useState)(() => [...defaultVisualRange ?? [minimum, maximum]]);
|
|
21257
|
+
(0, import_react86.useEffect)(() => {
|
|
21211
21258
|
if (!visualRange && !defaultVisualRange) setInternalVisualRange([minimum, maximum]);
|
|
21212
21259
|
}, [defaultVisualRange, maximum, minimum, visualRange]);
|
|
21213
21260
|
const currentVisualRange = visualRange ?? internalVisualRange;
|
|
@@ -21383,7 +21430,7 @@ var MapChart = (0, import_react85.forwardRef)(function MapChart2({ overlayProjec
|
|
|
21383
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
|
|
21384
21431
|
] });
|
|
21385
21432
|
});
|
|
21386
|
-
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) {
|
|
21387
21434
|
const count = Math.max(1, data.length);
|
|
21388
21435
|
const legacy = appearance === "macarons";
|
|
21389
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) => {
|
|
@@ -21466,12 +21513,12 @@ var GaugeChart = (0, import_react85.forwardRef)(function GaugeChart2({ tooltipFo
|
|
|
21466
21513
|
] }, `${item.name}-${index}`);
|
|
21467
21514
|
}) });
|
|
21468
21515
|
});
|
|
21469
|
-
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) {
|
|
21470
21517
|
const legacy = appearance === "macarons";
|
|
21471
|
-
const [activeFunnel, setActiveFunnel] = (0,
|
|
21472
|
-
const initialFunnels = (0,
|
|
21473
|
-
const [sourceFunnels, setSourceFunnels] = (0,
|
|
21474
|
-
(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]);
|
|
21475
21522
|
const allData = sourceFunnels.flatMap((funnel) => funnel.data);
|
|
21476
21523
|
const legendData = [...new Map(allData.map((item) => [item.name, item])).values()];
|
|
21477
21524
|
const legend = useLegendSelection(legendData.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -21562,7 +21609,7 @@ var FunnelChart = (0, import_react85.forwardRef)(function FunnelChart2({ data =
|
|
|
21562
21609
|
})
|
|
21563
21610
|
] });
|
|
21564
21611
|
});
|
|
21565
|
-
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) {
|
|
21566
21613
|
const pointMode = points.length > 0;
|
|
21567
21614
|
const values = pointMode ? points.map((point) => point.value) : data.flatMap((row) => [...row]);
|
|
21568
21615
|
const minimum = values.length ? Math.min(...values) : 0;
|
|
@@ -21571,7 +21618,7 @@ var HeatmapChart = (0, import_react85.forwardRef)(function HeatmapChart2({ raste
|
|
|
21571
21618
|
const cellHeight = PLOT.height / Math.max(1, yLabels.length);
|
|
21572
21619
|
const pointXDomain = niceChartDomain(points.map((point) => point.x), false);
|
|
21573
21620
|
const pointYDomain = niceChartDomain(points.map((point) => point.y), false);
|
|
21574
|
-
const filterId = `sia-heat-${(0,
|
|
21621
|
+
const filterId = `sia-heat-${(0, import_react86.useId)().replaceAll(":", "")}`;
|
|
21575
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: [
|
|
21576
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,
|
|
21577
21624
|
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)(HeatmapRaster, { width: raster.width, height: raster.height, points, options: raster })
|
|
@@ -21607,7 +21654,7 @@ var HeatmapChart = (0, import_react85.forwardRef)(function HeatmapChart2({ raste
|
|
|
21607
21654
|
] })
|
|
21608
21655
|
] });
|
|
21609
21656
|
});
|
|
21610
|
-
var ThemeRiverChart = (0,
|
|
21657
|
+
var ThemeRiverChart = (0, import_react86.forwardRef)(function ThemeRiverChart2({ categories, series, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, ...props }, ref) {
|
|
21611
21658
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
21612
21659
|
const activeSeries = series.filter((item) => legend.isSelected(item.name));
|
|
21613
21660
|
const totals = categories.map((_, index) => activeSeries.reduce((sum, item) => sum + Math.max(0, item.data[index] ?? 0), 0));
|
|
@@ -21645,8 +21692,8 @@ function eventTime(value) {
|
|
|
21645
21692
|
if (typeof value === "number") return value;
|
|
21646
21693
|
return Date.parse(/^\d{4}-\d{2}-\d{2}$/.test(value) ? value.replace(/-/g, "/") : value);
|
|
21647
21694
|
}
|
|
21648
|
-
var EventRiverChart = (0,
|
|
21649
|
-
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);
|
|
21650
21697
|
const area = plot;
|
|
21651
21698
|
palette = palette ?? (appearance === "macarons" ? ["#2ec7c9", "#b6a2de"] : void 0);
|
|
21652
21699
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -21719,9 +21766,9 @@ function vennDistance(radiusA, radiusB, overlap) {
|
|
|
21719
21766
|
}
|
|
21720
21767
|
return (low + high) / 2;
|
|
21721
21768
|
}
|
|
21722
|
-
var VennChart = (0,
|
|
21723
|
-
const [sets, setSets] = (0,
|
|
21724
|
-
(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)(() => {
|
|
21725
21772
|
setSets(initialSets);
|
|
21726
21773
|
setIntersection(initialIntersection);
|
|
21727
21774
|
}, [initialSets, initialIntersection]);
|
|
@@ -21784,17 +21831,17 @@ function layoutTreemap(nodes, x, y, width, height, gap, maxDepth, depth = 0, see
|
|
|
21784
21831
|
});
|
|
21785
21832
|
return result;
|
|
21786
21833
|
}
|
|
21787
|
-
var TreemapChart = (0,
|
|
21788
|
-
const [path, setPath] = (0,
|
|
21789
|
-
const [sourceData, setSourceData] = (0,
|
|
21790
|
-
const [active, setActive] = (0,
|
|
21791
|
-
(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)(() => {
|
|
21792
21839
|
setSourceData(data);
|
|
21793
21840
|
setPath([]);
|
|
21794
21841
|
}, [data]);
|
|
21795
21842
|
const currentData = path.reduce((nodes, name) => nodes.find((node) => node.name === name)?.children ?? nodes, sourceData);
|
|
21796
21843
|
const top = drilldown && showBreadcrumb ? 52 : 28;
|
|
21797
|
-
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]);
|
|
21798
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) => {
|
|
21799
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);
|
|
21800
21847
|
setSourceData(update(sourceData, 0));
|
|
@@ -21862,15 +21909,15 @@ function flattenTree2(root, collapsed) {
|
|
|
21862
21909
|
visit(root, 0);
|
|
21863
21910
|
return { nodes, leafCount: Math.max(1, leafOrder), maxDepth: Math.max(0, ...nodes.map((item) => item.depth)) };
|
|
21864
21911
|
}
|
|
21865
|
-
var TreeChart = (0,
|
|
21866
|
-
const [sourceData, setSourceData] = (0,
|
|
21867
|
-
const [roamReset, setRoamReset] = (0,
|
|
21868
|
-
const [active, setActive] = (0,
|
|
21869
|
-
(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)(() => {
|
|
21870
21917
|
setSourceData(data);
|
|
21871
21918
|
setActive(void 0);
|
|
21872
21919
|
}, [data]);
|
|
21873
|
-
const [collapsed, setCollapsed] = (0,
|
|
21920
|
+
const [collapsed, setCollapsed] = (0, import_react86.useState)(() => {
|
|
21874
21921
|
const result = /* @__PURE__ */ new Set();
|
|
21875
21922
|
const visit = (node) => {
|
|
21876
21923
|
if (node.collapsed) result.add(node.name);
|
|
@@ -21879,8 +21926,8 @@ var TreeChart = (0, import_react85.forwardRef)(function TreeChart2({ data, itemS
|
|
|
21879
21926
|
visit(data);
|
|
21880
21927
|
return result;
|
|
21881
21928
|
});
|
|
21882
|
-
const layout = (0,
|
|
21883
|
-
const fixedLayout = (0,
|
|
21929
|
+
const layout = (0, import_react86.useMemo)(() => flattenTree2(sourceData, collapsed), [collapsed, sourceData]);
|
|
21930
|
+
const fixedLayout = (0, import_react86.useMemo)(() => {
|
|
21884
21931
|
const visible = (node) => ({ ...node, children: collapsed.has(node.name) ? [] : node.children?.map(visible) });
|
|
21885
21932
|
return rootPosition ? layoutTreeNodes(visible(sourceData), { nodeSize, nodePadding, layerPadding, rootPosition, orientation }) : void 0;
|
|
21886
21933
|
}, [sourceData, collapsed, rootPosition, nodeSize, nodePadding, layerPadding, orientation]);
|
|
@@ -21950,15 +21997,15 @@ var TreeChart = (0, import_react85.forwardRef)(function TreeChart2({ data, itemS
|
|
|
21950
21997
|
})
|
|
21951
21998
|
] }) });
|
|
21952
21999
|
});
|
|
21953
|
-
var WordCloudChart = (0,
|
|
21954
|
-
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)(() => {
|
|
21955
22002
|
const context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
|
|
21956
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) => {
|
|
21957
22004
|
context.font = `${word.fontWeight ?? fontWeight} ${size}px ${word.fontFamily ?? fontFamily ?? "Arial"}`;
|
|
21958
22005
|
return context.measureText(word.name).width;
|
|
21959
22006
|
} : void 0 });
|
|
21960
22007
|
}, [data, bounds, autoFit, areaSizing, maxFontSize, minFontSize, padding, rotations, shape, spiralStep, fontFamily, fontWeight]);
|
|
21961
|
-
(0,
|
|
22008
|
+
(0, import_react86.useEffect)(() => {
|
|
21962
22009
|
const present = new Set(placements.map((p) => p.index));
|
|
21963
22010
|
onLayout?.({ placed: placements.length, unplaced: data.filter((_, i) => !present.has(i)).map((item) => item.name) });
|
|
21964
22011
|
}, [placements, data, onLayout]);
|
|
@@ -21967,30 +22014,30 @@ var WordCloudChart = (0, import_react85.forwardRef)(function WordCloudChart2({ d
|
|
|
21967
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}`);
|
|
21968
22015
|
}) });
|
|
21969
22016
|
});
|
|
21970
|
-
var MixedChart = (0,
|
|
21971
|
-
const plotClipId = `sia-mixed-plot-${(0,
|
|
21972
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
21973
|
-
const [geometry, setGeometry] = (0,
|
|
21974
|
-
const [pointerIndex, setPointerIndex] = (0,
|
|
21975
|
-
const [pointerAxisIndex, setPointerAxisIndex] = (0,
|
|
21976
|
-
const [motionRevision, setMotionRevision] = (0,
|
|
21977
|
-
const [stackMode, setStackMode] = (0,
|
|
21978
|
-
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);
|
|
21979
22026
|
const publishData = (next) => {
|
|
21980
22027
|
lastPublished.current = next;
|
|
21981
22028
|
onDataChange?.(next);
|
|
21982
22029
|
};
|
|
21983
|
-
const [islands, setIslands] = (0,
|
|
21984
|
-
const drag = (0,
|
|
21985
|
-
const [dragOffset, setDragOffset] = (0,
|
|
21986
|
-
(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)(() => {
|
|
21987
22034
|
if (sourceSeries === lastPublished.current) return;
|
|
21988
22035
|
setEditableSeries(sourceSeries);
|
|
21989
22036
|
setIslands([]);
|
|
21990
22037
|
drag.current = null;
|
|
21991
22038
|
setDragOffset(void 0);
|
|
21992
22039
|
}, [sourceSeries]);
|
|
21993
|
-
const series = (0,
|
|
22040
|
+
const series = (0, import_react86.useMemo)(() => editableSeries.map((item) => geometry ? { ...item, type: geometry } : item), [editableSeries, geometry]);
|
|
21994
22041
|
const stacked = stackMode ?? sourceStacked;
|
|
21995
22042
|
const PLOT2 = plotBounds ?? { x: 62, y: 48, width: 628, height: 250 }, PLOT_BOTTOM2 = PLOT2.y + PLOT2.height;
|
|
21996
22043
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -22154,7 +22201,7 @@ var MixedChart = (0, import_react85.forwardRef)(function MixedChart2({ axisPoint
|
|
|
22154
22201
|
})
|
|
22155
22202
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(CartesianAxes, { categories, domain, band: categoryGap }),
|
|
22156
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,
|
|
22157
|
-
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,
|
|
22158
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,
|
|
22159
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 }) }) }),
|
|
22160
22207
|
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("g", { "data-mixed-plot": "", clipPath: clipPlot ? `url(#${plotClipId})` : void 0, children: renderSeries.map((item) => {
|
|
@@ -22193,7 +22240,7 @@ var MixedChart = (0, import_react85.forwardRef)(function MixedChart2({ axisPoint
|
|
|
22193
22240
|
const zero = linearScale(placement.start, [valueDomain[0], valueDomain[1]], [PLOT_BOTTOM2, PLOT2.y]);
|
|
22194
22241
|
const rectY = barSpacing?.pixelAlign ? Math.floor(Math.min(y, zero)) : Math.min(y, zero);
|
|
22195
22242
|
const rectHeight = barSpacing?.pixelAlign ? Math.ceil(Math.abs(zero - y)) : Math.abs(zero - y);
|
|
22196
|
-
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) => {
|
|
22197
22244
|
if (!finishDrag(event)) onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event });
|
|
22198
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}`);
|
|
22199
22246
|
})
|
|
@@ -22222,7 +22269,7 @@ var MixedChart = (0, import_react85.forwardRef)(function MixedChart2({ axisPoint
|
|
|
22222
22269
|
if (!placements[index]) return null;
|
|
22223
22270
|
const name = categoryName(index, item.categoryAxisIndex);
|
|
22224
22271
|
const value = item.data[index] ?? 0;
|
|
22225
|
-
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) => {
|
|
22226
22273
|
if (!finishDrag(event)) onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event });
|
|
22227
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 }));
|
|
22228
22275
|
})
|
|
@@ -22263,9 +22310,9 @@ var KLineChart = CandlestickChart;
|
|
|
22263
22310
|
|
|
22264
22311
|
// src/components/LineShareChart.tsx
|
|
22265
22312
|
var import_jsx_runtime86 = require("react/jsx-runtime");
|
|
22266
|
-
var LineShareChart = (0,
|
|
22267
|
-
const [selected, setSelected] = (0,
|
|
22268
|
-
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);
|
|
22269
22316
|
const width = props.viewBoxSize?.[0] ?? 900, height = props.viewBoxSize?.[1] ?? 450;
|
|
22270
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;
|
|
22271
22318
|
const maximum = data.reduce((best, item2, i) => item2.value >= data[best].value ? i : best, 0);
|
|
@@ -22343,16 +22390,16 @@ function paddedValueExtent(values, padding = 0.05) {
|
|
|
22343
22390
|
}
|
|
22344
22391
|
|
|
22345
22392
|
// src/components/XYChart.tsx
|
|
22346
|
-
var
|
|
22393
|
+
var import_react89 = require("react");
|
|
22347
22394
|
var import_jsx_runtime87 = require("react/jsx-runtime");
|
|
22348
|
-
var XYChart = (0,
|
|
22349
|
-
const [series, setSeries] = (0,
|
|
22350
|
-
const [hidden, setHidden] = (0,
|
|
22351
|
-
const [crosshair, setCrosshair] = (0,
|
|
22352
|
-
const [drag, setDrag] = (0,
|
|
22353
|
-
const [geometry, setGeometry] = (0,
|
|
22354
|
-
const [zoom, setZoom] = (0,
|
|
22355
|
-
(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]);
|
|
22356
22403
|
const window2 = dataZoom || xAxisType === "time" ? scatterValueWindow(series.flatMap((item) => item.data.map((point) => point[0])), dataZoom ? zoom : [0, 100]) : void 0;
|
|
22357
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 }));
|
|
22358
22405
|
const width = props.viewBoxSize?.[0] ?? 663, height = props.viewBoxSize?.[1] ?? 379;
|
|
@@ -22481,7 +22528,7 @@ var XYChart = (0, import_react88.forwardRef)(function XYChart2({ series: source,
|
|
|
22481
22528
|
});
|
|
22482
22529
|
|
|
22483
22530
|
// src/components/ChartMapOverlay.tsx
|
|
22484
|
-
var
|
|
22531
|
+
var import_react90 = require("react");
|
|
22485
22532
|
|
|
22486
22533
|
// src/components/mapOverlayHost.ts
|
|
22487
22534
|
function observeMapOverlayHost(host, onChange) {
|
|
@@ -22520,11 +22567,11 @@ function observeMapOverlayHost(host, onChange) {
|
|
|
22520
22567
|
// src/components/ChartMapOverlay.tsx
|
|
22521
22568
|
var import_jsx_runtime88 = require("react/jsx-runtime");
|
|
22522
22569
|
function ChartMapOverlay({ createHost, children, className, style, ariaLabel = "\u5730\u56FE\u53E0\u52A0\u56FE\u8868", onError }) {
|
|
22523
|
-
const container = (0,
|
|
22524
|
-
const errorHandler = (0,
|
|
22570
|
+
const container = (0, import_react90.useRef)(null);
|
|
22571
|
+
const errorHandler = (0, import_react90.useRef)(onError);
|
|
22525
22572
|
errorHandler.current = onError;
|
|
22526
|
-
const [snapshot, setSnapshot] = (0,
|
|
22527
|
-
(0,
|
|
22573
|
+
const [snapshot, setSnapshot] = (0, import_react90.useState)();
|
|
22574
|
+
(0, import_react90.useEffect)(() => {
|
|
22528
22575
|
setSnapshot(void 0);
|
|
22529
22576
|
if (!container.current) return;
|
|
22530
22577
|
try {
|
|
@@ -22601,9 +22648,9 @@ function createBaiduMapHost(element, sdk, options) {
|
|
|
22601
22648
|
}
|
|
22602
22649
|
|
|
22603
22650
|
// src/components/InputSelect.tsx
|
|
22604
|
-
var
|
|
22651
|
+
var import_react91 = require("react");
|
|
22605
22652
|
var import_jsx_runtime89 = require("react/jsx-runtime");
|
|
22606
|
-
var InputSelect = (0,
|
|
22653
|
+
var InputSelect = (0, import_react91.forwardRef)(function InputSelect2({
|
|
22607
22654
|
options,
|
|
22608
22655
|
value,
|
|
22609
22656
|
defaultValue,
|
|
@@ -22629,22 +22676,22 @@ var InputSelect = (0, import_react90.forwardRef)(function InputSelect2({
|
|
|
22629
22676
|
...inputProps
|
|
22630
22677
|
}, forwardedRef) {
|
|
22631
22678
|
const size = useControlSize(sizeProp);
|
|
22632
|
-
const [internal, setInternal] = (0,
|
|
22679
|
+
const [internal, setInternal] = (0, import_react91.useState)(defaultValue);
|
|
22633
22680
|
const current = value !== void 0 ? value : internal;
|
|
22634
22681
|
const values = current == null ? [] : Array.isArray(current) ? current : [current];
|
|
22635
22682
|
const text = values.map((item) => displayField === "label" ? String(options.find((option) => option.optionType !== "divider" && option.value === item)?.label ?? item) : String(item)).join(",");
|
|
22636
|
-
const [draft, setDraft] = (0,
|
|
22637
|
-
(0,
|
|
22683
|
+
const [draft, setDraft] = (0, import_react91.useState)(text);
|
|
22684
|
+
(0, import_react91.useEffect)(() => {
|
|
22638
22685
|
setDraft(text);
|
|
22639
22686
|
}, [text, current]);
|
|
22640
|
-
const [open, setOpen] = (0,
|
|
22641
|
-
const [search, setSearch] = (0,
|
|
22642
|
-
const [modalOpen, setModalOpen] = (0,
|
|
22643
|
-
const [modalValues, setModalValues] = (0,
|
|
22644
|
-
const [selectedOnly, setSelectedOnly] = (0,
|
|
22645
|
-
const rootRef = (0,
|
|
22646
|
-
const popupRef = (0,
|
|
22647
|
-
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);
|
|
22648
22695
|
const config = typeof enableModal === "object" ? enableModal : {};
|
|
22649
22696
|
function changeOpen(next) {
|
|
22650
22697
|
if (next && (disabled || loading)) return;
|
|
@@ -22664,7 +22711,7 @@ var InputSelect = (0, import_react90.forwardRef)(function InputSelect2({
|
|
|
22664
22711
|
inputRef.current?.focus();
|
|
22665
22712
|
}
|
|
22666
22713
|
}
|
|
22667
|
-
(0,
|
|
22714
|
+
(0, import_react91.useEffect)(() => {
|
|
22668
22715
|
if (!open) return;
|
|
22669
22716
|
const outside = (event) => {
|
|
22670
22717
|
if (!rootRef.current?.contains(event.target) && !popupRef.current?.contains(event.target)) changeOpen(false);
|
|
@@ -22672,7 +22719,7 @@ var InputSelect = (0, import_react90.forwardRef)(function InputSelect2({
|
|
|
22672
22719
|
document.addEventListener("pointerdown", outside);
|
|
22673
22720
|
return () => document.removeEventListener("pointerdown", outside);
|
|
22674
22721
|
}, [open, onOpenChange]);
|
|
22675
|
-
(0,
|
|
22722
|
+
(0, import_react91.useEffect)(() => {
|
|
22676
22723
|
if (disabled || loading) {
|
|
22677
22724
|
changeOpen(false);
|
|
22678
22725
|
setModalOpen(false);
|
|
@@ -22805,7 +22852,7 @@ var InputSelect = (0, import_react90.forwardRef)(function InputSelect2({
|
|
|
22805
22852
|
});
|
|
22806
22853
|
|
|
22807
22854
|
// src/components/QueryForm.tsx
|
|
22808
|
-
var
|
|
22855
|
+
var import_react92 = require("react");
|
|
22809
22856
|
var import_jsx_runtime90 = require("react/jsx-runtime");
|
|
22810
22857
|
function QueryForm({
|
|
22811
22858
|
fields,
|
|
@@ -22839,29 +22886,29 @@ function QueryForm({
|
|
|
22839
22886
|
...formProps
|
|
22840
22887
|
}) {
|
|
22841
22888
|
const [form] = useForm(providedForm);
|
|
22842
|
-
const [internalCollapsed, setInternalCollapsed] = (0,
|
|
22889
|
+
const [internalCollapsed, setInternalCollapsed] = (0, import_react92.useState)(defaultCollapsed);
|
|
22843
22890
|
const collapsed = collapsible && (controlledCollapsed ?? internalCollapsed);
|
|
22844
|
-
const [searching, setSearching] = (0,
|
|
22845
|
-
const [saving, setSaving] = (0,
|
|
22846
|
-
const [removing, setRemoving] = (0,
|
|
22847
|
-
const [saveOpen, setSaveOpen] = (0,
|
|
22848
|
-
const [saveName, setSaveName] = (0,
|
|
22849
|
-
const [saveError, setSaveError] = (0,
|
|
22850
|
-
const [error, setError] = (0,
|
|
22851
|
-
const [activeShortcut, setActiveShortcut] = (0,
|
|
22852
|
-
const source = (0,
|
|
22853
|
-
const searchLock = (0,
|
|
22854
|
-
const saveLock = (0,
|
|
22855
|
-
const removeLock = (0,
|
|
22856
|
-
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)();
|
|
22857
22904
|
const busy = disabled || loading || searching;
|
|
22858
22905
|
const shortcutBusy = busy || shortcutsLoading || saving || removing;
|
|
22859
|
-
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 }));
|
|
22860
22907
|
const limit = Math.max(1, Math.floor(collapsedCount));
|
|
22861
|
-
const rowRef = (0,
|
|
22862
|
-
const actionsRef = (0,
|
|
22863
|
-
const [fittingCount, setFittingCount] = (0,
|
|
22864
|
-
(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)(() => {
|
|
22865
22912
|
if (!collapsed) return;
|
|
22866
22913
|
const row = rowRef.current;
|
|
22867
22914
|
const actions = actionsRef.current;
|