@sia.soul/sia-react-ui 0.1.4 → 0.1.6
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/core.css +94 -18
- package/dist/index.cjs +615 -441
- package/dist/index.css +94 -18
- package/dist/index.d.cts +6 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +218 -44
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -4323,7 +4323,7 @@ function openDrawer(config) {
|
|
|
4323
4323
|
let currentOpen = true;
|
|
4324
4324
|
let destroyed = false;
|
|
4325
4325
|
let cleanupTimer;
|
|
4326
|
-
function
|
|
4326
|
+
function cleanup2() {
|
|
4327
4327
|
if (destroyed) return;
|
|
4328
4328
|
destroyed = true;
|
|
4329
4329
|
if (cleanupTimer !== void 0) window.clearTimeout(cleanupTimer);
|
|
@@ -4335,7 +4335,7 @@ function openDrawer(config) {
|
|
|
4335
4335
|
if (destroyed || !currentOpen) return;
|
|
4336
4336
|
currentOpen = false;
|
|
4337
4337
|
render();
|
|
4338
|
-
cleanupTimer = window.setTimeout(
|
|
4338
|
+
cleanupTimer = window.setTimeout(cleanup2, DRAWER_MOTION_DURATION + 100);
|
|
4339
4339
|
}
|
|
4340
4340
|
function render() {
|
|
4341
4341
|
root.render(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
@@ -4350,7 +4350,7 @@ function openDrawer(config) {
|
|
|
4350
4350
|
afterOpen: () => currentConfig.afterOpen?.(),
|
|
4351
4351
|
afterClose: () => {
|
|
4352
4352
|
currentConfig.afterClose?.();
|
|
4353
|
-
|
|
4353
|
+
cleanup2();
|
|
4354
4354
|
}
|
|
4355
4355
|
}
|
|
4356
4356
|
));
|
|
@@ -8691,7 +8691,7 @@ function Markdown2({ content, emptyText = "\u6682\u65E0 Markdown \u5185\u5BB9",
|
|
|
8691
8691
|
});
|
|
8692
8692
|
return () => {
|
|
8693
8693
|
cancelled = true;
|
|
8694
|
-
cleanups.forEach((
|
|
8694
|
+
cleanups.forEach((cleanup2) => cleanup2());
|
|
8695
8695
|
};
|
|
8696
8696
|
}, [html, imagePreview, resolveImageSrc]);
|
|
8697
8697
|
function openImagePreview(target) {
|
|
@@ -9102,7 +9102,7 @@ function openModal(config) {
|
|
|
9102
9102
|
let currentOpen = true;
|
|
9103
9103
|
let destroyed = false;
|
|
9104
9104
|
let cleanupTimer;
|
|
9105
|
-
function
|
|
9105
|
+
function cleanup2() {
|
|
9106
9106
|
if (destroyed) return;
|
|
9107
9107
|
destroyed = true;
|
|
9108
9108
|
if (cleanupTimer !== void 0) window.clearTimeout(cleanupTimer);
|
|
@@ -9114,7 +9114,7 @@ function openModal(config) {
|
|
|
9114
9114
|
if (destroyed || !currentOpen) return;
|
|
9115
9115
|
currentOpen = false;
|
|
9116
9116
|
render();
|
|
9117
|
-
cleanupTimer = window.setTimeout(
|
|
9117
|
+
cleanupTimer = window.setTimeout(cleanup2, MODAL_MOTION_DURATION);
|
|
9118
9118
|
}
|
|
9119
9119
|
function render() {
|
|
9120
9120
|
root.render(/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalRoot, { ...currentConfig, open: currentOpen, onOpenChange: (nextOpen) => {
|
|
@@ -9797,31 +9797,111 @@ function Treemap({
|
|
|
9797
9797
|
);
|
|
9798
9798
|
}
|
|
9799
9799
|
|
|
9800
|
-
// src/components/
|
|
9800
|
+
// src/components/useScrollbarProximity.ts
|
|
9801
9801
|
var import_react41 = require("react");
|
|
9802
|
+
var users = 0;
|
|
9803
|
+
var cleanup;
|
|
9804
|
+
function useScrollbarProximity() {
|
|
9805
|
+
(0, import_react41.useEffect)(() => {
|
|
9806
|
+
if (users++ === 0) {
|
|
9807
|
+
let frame = 0;
|
|
9808
|
+
let x = -Infinity;
|
|
9809
|
+
let y = -Infinity;
|
|
9810
|
+
const nearby = /* @__PURE__ */ new Set();
|
|
9811
|
+
const clear = () => {
|
|
9812
|
+
nearby.forEach((track) => track.removeAttribute("data-scrollbar-near"));
|
|
9813
|
+
nearby.clear();
|
|
9814
|
+
};
|
|
9815
|
+
const update = () => {
|
|
9816
|
+
frame = 0;
|
|
9817
|
+
const next = /* @__PURE__ */ new Set();
|
|
9818
|
+
document.querySelectorAll(".sia-scrollbar-track").forEach((track) => {
|
|
9819
|
+
const rect = track.getBoundingClientRect();
|
|
9820
|
+
const proximity = Number.parseFloat(getComputedStyle(track).getPropertyValue("--sia-scrollbar-proximity")) || 16;
|
|
9821
|
+
if (rect.width && rect.height && x >= rect.left - proximity && x <= rect.right + proximity && y >= rect.top - proximity && y <= rect.bottom + proximity) {
|
|
9822
|
+
next.add(track);
|
|
9823
|
+
if (!nearby.has(track)) track.setAttribute("data-scrollbar-near", "true");
|
|
9824
|
+
}
|
|
9825
|
+
});
|
|
9826
|
+
nearby.forEach((track) => {
|
|
9827
|
+
if (!next.has(track)) track.removeAttribute("data-scrollbar-near");
|
|
9828
|
+
});
|
|
9829
|
+
nearby.clear();
|
|
9830
|
+
next.forEach((track) => nearby.add(track));
|
|
9831
|
+
};
|
|
9832
|
+
const move = (event) => {
|
|
9833
|
+
if (event.pointerType === "touch") return;
|
|
9834
|
+
x = event.clientX;
|
|
9835
|
+
y = event.clientY;
|
|
9836
|
+
if (!frame) frame = requestAnimationFrame(update);
|
|
9837
|
+
};
|
|
9838
|
+
const leave = () => {
|
|
9839
|
+
x = y = -Infinity;
|
|
9840
|
+
clear();
|
|
9841
|
+
};
|
|
9842
|
+
document.addEventListener("pointermove", move, { passive: true });
|
|
9843
|
+
document.documentElement.addEventListener("pointerleave", leave);
|
|
9844
|
+
window.addEventListener("blur", leave);
|
|
9845
|
+
cleanup = () => {
|
|
9846
|
+
if (frame) cancelAnimationFrame(frame);
|
|
9847
|
+
document.removeEventListener("pointermove", move);
|
|
9848
|
+
document.documentElement.removeEventListener("pointerleave", leave);
|
|
9849
|
+
window.removeEventListener("blur", leave);
|
|
9850
|
+
clear();
|
|
9851
|
+
};
|
|
9852
|
+
}
|
|
9853
|
+
return () => {
|
|
9854
|
+
if (--users === 0) {
|
|
9855
|
+
cleanup?.();
|
|
9856
|
+
cleanup = void 0;
|
|
9857
|
+
}
|
|
9858
|
+
};
|
|
9859
|
+
}, []);
|
|
9860
|
+
}
|
|
9861
|
+
|
|
9862
|
+
// src/components/Table/TableCellContent.tsx
|
|
9863
|
+
var import_react42 = require("react");
|
|
9802
9864
|
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
9803
9865
|
function TableCellContent({ children, ellipsis, title }) {
|
|
9804
|
-
const ref = (0,
|
|
9805
|
-
const [overflowing, setOverflowing] = (0,
|
|
9866
|
+
const ref = (0, import_react42.useRef)(null);
|
|
9867
|
+
const [overflowing, setOverflowing] = (0, import_react42.useState)(false);
|
|
9806
9868
|
const customContent = typeof children !== "string" && typeof children !== "number" && children != null;
|
|
9807
|
-
(0,
|
|
9869
|
+
(0, import_react42.useLayoutEffect)(() => {
|
|
9808
9870
|
const element = ref.current;
|
|
9809
9871
|
if (!element || !ellipsis || !customContent) return;
|
|
9810
|
-
const
|
|
9872
|
+
const layouts = [];
|
|
9873
|
+
const normalizeLayouts = (parent) => {
|
|
9874
|
+
for (const child of parent.children) {
|
|
9875
|
+
if (!(child instanceof HTMLElement)) continue;
|
|
9876
|
+
const component = [...child.classList].some((name) => name.startsWith("sia-") && !name.startsWith("sia-space") && name !== "sia-flex");
|
|
9877
|
+
if (component || child.matches("button, input, textarea, select, [contenteditable]")) continue;
|
|
9878
|
+
const display = getComputedStyle(child).display;
|
|
9879
|
+
if (["flex", "inline-flex", "grid", "inline-grid"].includes(display)) {
|
|
9880
|
+
child.setAttribute("data-table-inline-layout", "");
|
|
9881
|
+
layouts.push(child);
|
|
9882
|
+
}
|
|
9883
|
+
normalizeLayouts(child);
|
|
9884
|
+
}
|
|
9885
|
+
};
|
|
9886
|
+
normalizeLayouts(element);
|
|
9887
|
+
const update = () => setOverflowing(element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1);
|
|
9811
9888
|
update();
|
|
9812
9889
|
const observer = new ResizeObserver(update);
|
|
9813
9890
|
observer.observe(element);
|
|
9814
9891
|
for (const child of element.children) observer.observe(child);
|
|
9815
|
-
return () =>
|
|
9892
|
+
return () => {
|
|
9893
|
+
observer.disconnect();
|
|
9894
|
+
layouts.forEach((layout) => layout.removeAttribute("data-table-inline-layout"));
|
|
9895
|
+
};
|
|
9816
9896
|
}, [children, ellipsis, customContent]);
|
|
9817
|
-
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ref, className: "sia-table__cell-content", title, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children });
|
|
9897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ref, className: "sia-table__cell-content", title, "data-custom-content": customContent || void 0, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children });
|
|
9818
9898
|
}
|
|
9819
9899
|
|
|
9820
9900
|
// src/components/Table/Table.tsx
|
|
9821
|
-
var
|
|
9901
|
+
var import_react44 = require("react");
|
|
9822
9902
|
|
|
9823
9903
|
// src/components/Table/plugins.tsx
|
|
9824
|
-
var
|
|
9904
|
+
var import_react43 = require("react");
|
|
9825
9905
|
|
|
9826
9906
|
// src/components/Table/utils.ts
|
|
9827
9907
|
var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
|
|
@@ -10328,7 +10408,7 @@ function TableSelectedItemsPanel({
|
|
|
10328
10408
|
onRemove,
|
|
10329
10409
|
onClear
|
|
10330
10410
|
}) {
|
|
10331
|
-
const [showAll, setShowAll] = (0,
|
|
10411
|
+
const [showAll, setShowAll] = (0, import_react43.useState)(false);
|
|
10332
10412
|
const visibleEntries = showAll ? entries : entries.slice(0, maxCount2);
|
|
10333
10413
|
const hiddenCount = Math.max(0, entries.length - visibleEntries.length);
|
|
10334
10414
|
const baseColumnMap = new Map(flattenTableColumns(baseColumns).map((column) => [column.key, column]));
|
|
@@ -10568,10 +10648,10 @@ function TableFilterControl({
|
|
|
10568
10648
|
placeholder,
|
|
10569
10649
|
onApply
|
|
10570
10650
|
}) {
|
|
10571
|
-
const [open, setOpen] = (0,
|
|
10572
|
-
const [draft, setDraft] = (0,
|
|
10651
|
+
const [open, setOpen] = (0, import_react43.useState)(false);
|
|
10652
|
+
const [draft, setDraft] = (0, import_react43.useState)(value);
|
|
10573
10653
|
const label = getColumnLabel(column);
|
|
10574
|
-
(0,
|
|
10654
|
+
(0, import_react43.useEffect)(() => {
|
|
10575
10655
|
if (open) setDraft(value);
|
|
10576
10656
|
}, [open, value]);
|
|
10577
10657
|
const apply = (nextValue) => {
|
|
@@ -10836,15 +10916,15 @@ function EditableTableCell({
|
|
|
10836
10916
|
trigger
|
|
10837
10917
|
}) {
|
|
10838
10918
|
const config = typeof editable === "object" ? editable : { type: "input" };
|
|
10839
|
-
const [editValue, setEditValue] = (0,
|
|
10840
|
-
const [saving, setSaving] = (0,
|
|
10841
|
-
const inputRef = (0,
|
|
10842
|
-
const editorRef = (0,
|
|
10843
|
-
const editValueRef = (0,
|
|
10844
|
-
const savingRef = (0,
|
|
10845
|
-
const saveRef = (0,
|
|
10919
|
+
const [editValue, setEditValue] = (0, import_react43.useState)(value);
|
|
10920
|
+
const [saving, setSaving] = (0, import_react43.useState)(false);
|
|
10921
|
+
const inputRef = (0, import_react43.useRef)(null);
|
|
10922
|
+
const editorRef = (0, import_react43.useRef)(null);
|
|
10923
|
+
const editValueRef = (0, import_react43.useRef)(value);
|
|
10924
|
+
const savingRef = (0, import_react43.useRef)(false);
|
|
10925
|
+
const saveRef = (0, import_react43.useRef)(async () => {
|
|
10846
10926
|
});
|
|
10847
|
-
(0,
|
|
10927
|
+
(0, import_react43.useEffect)(() => {
|
|
10848
10928
|
if (!active) return;
|
|
10849
10929
|
editValueRef.current = value;
|
|
10850
10930
|
setEditValue(value);
|
|
@@ -10875,7 +10955,7 @@ function EditableTableCell({
|
|
|
10875
10955
|
}
|
|
10876
10956
|
}
|
|
10877
10957
|
saveRef.current = save;
|
|
10878
|
-
(0,
|
|
10958
|
+
(0, import_react43.useEffect)(() => {
|
|
10879
10959
|
if (!active || config.type === "select" || config.type === "custom") return;
|
|
10880
10960
|
const handleOutsidePointerDown = (event) => {
|
|
10881
10961
|
const target = event.target;
|
|
@@ -11034,9 +11114,9 @@ function applyColumnSettingsToTree(columns, items) {
|
|
|
11034
11114
|
return walk(columns).map((entry) => entry.column);
|
|
11035
11115
|
}
|
|
11036
11116
|
function ColumnSettingPanel({ open, items, columns, onClose, onApply }) {
|
|
11037
|
-
const [draft, setDraft] = (0,
|
|
11038
|
-
const dragIndex = (0,
|
|
11039
|
-
(0,
|
|
11117
|
+
const [draft, setDraft] = (0, import_react43.useState)(items);
|
|
11118
|
+
const dragIndex = (0, import_react43.useRef)(null);
|
|
11119
|
+
(0, import_react43.useEffect)(() => {
|
|
11040
11120
|
if (open) setDraft(items);
|
|
11041
11121
|
}, [items, open]);
|
|
11042
11122
|
const labels = new Map(flattenTableColumns(columns).map((column) => [column.key, getColumnLabel(column)]));
|
|
@@ -11131,7 +11211,30 @@ function createColumnSettingPlugin(options = {}) {
|
|
|
11131
11211
|
void save({ columns: currentItems(context), pageSize, version: 1 });
|
|
11132
11212
|
}
|
|
11133
11213
|
},
|
|
11134
|
-
renderToolbarEnd: options.showButton === false ? void 0 : (context) =>
|
|
11214
|
+
renderToolbarEnd: options.showButton === false ? void 0 : (context) => {
|
|
11215
|
+
const exportApi = () => context.getPluginApi("export") ?? createExportPlugin().getApi({ ...context, state: void 0, setState: () => {
|
|
11216
|
+
} });
|
|
11217
|
+
const customItems = (options.menuItems ?? []).filter((item) => !(item.hidden === true || typeof item.hidden === "function" && item.hidden(context)));
|
|
11218
|
+
const items = [
|
|
11219
|
+
...options.showExport === false ? [] : [
|
|
11220
|
+
{ key: "builtin:export", label: "\u8868\u683C\u5BFC\u51FA", icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, { name: "download", size: 18 }), disabled: exportApi().getRows().length === 0 },
|
|
11221
|
+
{ key: "builtin:divider", type: "divider" }
|
|
11222
|
+
],
|
|
11223
|
+
{ key: "builtin:columns", label: "\u5217\u8BBE\u7F6E", icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, { name: "settings", size: 18 }) },
|
|
11224
|
+
...customItems.map((item) => ({
|
|
11225
|
+
key: "custom:" + item.key,
|
|
11226
|
+
label: item.label,
|
|
11227
|
+
icon: item.icon,
|
|
11228
|
+
danger: item.danger,
|
|
11229
|
+
disabled: item.disabled === true || typeof item.disabled === "function" && item.disabled(context)
|
|
11230
|
+
}))
|
|
11231
|
+
];
|
|
11232
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Dropdown, { trigger: ["hover", "click"], placement: "bottomRight", popupClassName: "sia-table__settings-dropdown", menu: { items, onClick: ({ key }) => {
|
|
11233
|
+
if (key === "builtin:export") void exportApi().download();
|
|
11234
|
+
else if (key === "builtin:columns") context.setState((state) => ({ ...state, open: true }));
|
|
11235
|
+
else void customItems.find((item) => "custom:" + item.key === key)?.onClick?.(context);
|
|
11236
|
+
} }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { size: "small", variant: "text", className: "sia-table__toolbar-icon", icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, { name: "settings", size: 16 }), "aria-label": "\u8868\u683C\u8BBE\u7F6E" }) });
|
|
11237
|
+
},
|
|
11135
11238
|
renderOverlay: (context) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ColumnSettingPanel, { open: context.state.open, items: currentItems(context), columns: context.baseColumns, onClose: () => context.setState((state) => ({ ...state, open: false })), onApply: (items) => apply(items, context) }),
|
|
11136
11239
|
getApi: (context) => ({ open: () => context.setState((state) => ({ ...state, open: true })), close: () => context.setState((state) => ({ ...state, open: false })), getSettings: () => currentItems(context), apply: (items) => apply(items, context) })
|
|
11137
11240
|
};
|
|
@@ -11185,7 +11288,7 @@ function tableExportText(node) {
|
|
|
11185
11288
|
if (node === null || node === void 0 || typeof node === "boolean") return "";
|
|
11186
11289
|
if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") return String(node);
|
|
11187
11290
|
if (Array.isArray(node)) return node.map(tableExportText).join("");
|
|
11188
|
-
if ((0,
|
|
11291
|
+
if ((0, import_react43.isValidElement)(node)) return tableExportText(node.props.children);
|
|
11189
11292
|
return "";
|
|
11190
11293
|
}
|
|
11191
11294
|
function tableExportCell(value, sanitizeFormula) {
|
|
@@ -11334,7 +11437,7 @@ function getTableHorizontalMetrics(viewport, table) {
|
|
|
11334
11437
|
const contentWidth = Math.max(viewport.clientWidth, table?.getBoundingClientRect().width ?? viewport.clientWidth);
|
|
11335
11438
|
return { contentWidth, maxLeft: Math.max(0, contentWidth - viewport.clientWidth) };
|
|
11336
11439
|
}
|
|
11337
|
-
var TableBodyRow = (0,
|
|
11440
|
+
var TableBodyRow = (0, import_react44.memo)(function TableBodyRow2({
|
|
11338
11441
|
row,
|
|
11339
11442
|
rowIndex,
|
|
11340
11443
|
columns,
|
|
@@ -11416,6 +11519,7 @@ function TableInner(props, ref) {
|
|
|
11416
11519
|
tableHeight,
|
|
11417
11520
|
size = "medium",
|
|
11418
11521
|
bordered = true,
|
|
11522
|
+
toolbarBordered = false,
|
|
11419
11523
|
striped = true,
|
|
11420
11524
|
virtual,
|
|
11421
11525
|
virtualThreshold = 100,
|
|
@@ -11432,37 +11536,38 @@ function TableInner(props, ref) {
|
|
|
11432
11536
|
style,
|
|
11433
11537
|
...htmlProps
|
|
11434
11538
|
} = props;
|
|
11435
|
-
const rootRef = (0,
|
|
11436
|
-
const scrollRef = (0,
|
|
11437
|
-
const tableRef = (0,
|
|
11438
|
-
|
|
11439
|
-
const
|
|
11440
|
-
const [
|
|
11441
|
-
const [
|
|
11442
|
-
const [
|
|
11443
|
-
const [
|
|
11444
|
-
const
|
|
11445
|
-
const
|
|
11446
|
-
const
|
|
11447
|
-
const
|
|
11539
|
+
const rootRef = (0, import_react44.useRef)(null);
|
|
11540
|
+
const scrollRef = (0, import_react44.useRef)(null);
|
|
11541
|
+
const tableRef = (0, import_react44.useRef)(null);
|
|
11542
|
+
useScrollbarProximity();
|
|
11543
|
+
const scrollbarDragRef = (0, import_react44.useRef)(null);
|
|
11544
|
+
const [internalLoading, setInternalLoading] = (0, import_react44.useState)(false);
|
|
11545
|
+
const [scrollTop, setScrollTop] = (0, import_react44.useState)(0);
|
|
11546
|
+
const [viewportHeight, setViewportHeight] = (0, import_react44.useState)(420);
|
|
11547
|
+
const [viewportWidth, setViewportWidth] = (0, import_react44.useState)(0);
|
|
11548
|
+
const [autoColumnWidths, setAutoColumnWidths] = (0, import_react44.useState)({});
|
|
11549
|
+
const getRowKey = (0, import_react44.useCallback)((record, index) => typeof rowKey === "function" ? rowKey(record, index) : record[String(rowKey)] ?? index, [rowKey]);
|
|
11550
|
+
const builtInResizePlugin = (0, import_react44.useMemo)(() => createResizePlugin(), []);
|
|
11551
|
+
const builtInHighlightPlugin = (0, import_react44.useMemo)(() => createHighlightPlugin(), []);
|
|
11552
|
+
const activePlugins = (0, import_react44.useMemo)(() => {
|
|
11448
11553
|
const plugins = providedPlugins.filter((plugin) => resizable || plugin.id !== "resize");
|
|
11449
11554
|
if (!plugins.some((plugin) => plugin.id === "highlight")) plugins.push(builtInHighlightPlugin);
|
|
11450
11555
|
if (resizable && !plugins.some((plugin) => plugin.id === "resize")) plugins.push(builtInResizePlugin);
|
|
11451
11556
|
return plugins;
|
|
11452
11557
|
}, [builtInHighlightPlugin, builtInResizePlugin, providedPlugins, resizable]);
|
|
11453
|
-
const sortedPlugins = (0,
|
|
11454
|
-
const pluginsByIdRef = (0,
|
|
11558
|
+
const sortedPlugins = (0, import_react44.useMemo)(() => [...activePlugins].sort((a, b) => (a.order ?? 100) - (b.order ?? 100)), [activePlugins]);
|
|
11559
|
+
const pluginsByIdRef = (0, import_react44.useRef)(/* @__PURE__ */ new Map());
|
|
11455
11560
|
pluginsByIdRef.current = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
|
|
11456
|
-
const [pluginStates, setPluginStates] = (0,
|
|
11561
|
+
const [pluginStates, setPluginStates] = (0, import_react44.useState)(() => Object.fromEntries(
|
|
11457
11562
|
sortedPlugins.map((plugin) => [plugin.id, resolveInitialState(plugin)])
|
|
11458
11563
|
));
|
|
11459
|
-
const pluginApisRef = (0,
|
|
11460
|
-
const contextsRef = (0,
|
|
11461
|
-
const mountedPluginsRef = (0,
|
|
11564
|
+
const pluginApisRef = (0, import_react44.useRef)({});
|
|
11565
|
+
const contextsRef = (0, import_react44.useRef)(/* @__PURE__ */ new Map());
|
|
11566
|
+
const mountedPluginsRef = (0, import_react44.useRef)(/* @__PURE__ */ new Map());
|
|
11462
11567
|
const pipeline = { columns: baseColumns, rows: createTableRows(dataSource, getRowKey) };
|
|
11463
11568
|
const nextApis = {};
|
|
11464
11569
|
const contexts = /* @__PURE__ */ new Map();
|
|
11465
|
-
const setPluginState = (0,
|
|
11570
|
+
const setPluginState = (0, import_react44.useCallback)((pluginId, next) => {
|
|
11466
11571
|
setPluginStates((previous) => {
|
|
11467
11572
|
const plugin = pluginsByIdRef.current.get(pluginId);
|
|
11468
11573
|
const previousValue = previous[pluginId] !== void 0 ? previous[pluginId] : plugin ? resolveInitialState(plugin) : void 0;
|
|
@@ -11515,7 +11620,7 @@ function TableInner(props, ref) {
|
|
|
11515
11620
|
});
|
|
11516
11621
|
pluginApisRef.current = nextApis;
|
|
11517
11622
|
contextsRef.current = contexts;
|
|
11518
|
-
(0,
|
|
11623
|
+
(0, import_react44.useEffect)(() => {
|
|
11519
11624
|
const activePlugins2 = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
|
|
11520
11625
|
for (const [pluginId, mounted] of mountedPluginsRef.current) {
|
|
11521
11626
|
if (activePlugins2.get(pluginId) === mounted.plugin) continue;
|
|
@@ -11527,11 +11632,11 @@ function TableInner(props, ref) {
|
|
|
11527
11632
|
mountedPluginsRef.current.set(plugin.id, { plugin, cleanup: plugin.onMount(contextsRef.current.get(plugin.id)) });
|
|
11528
11633
|
}
|
|
11529
11634
|
}, [sortedPlugins]);
|
|
11530
|
-
(0,
|
|
11635
|
+
(0, import_react44.useEffect)(() => () => {
|
|
11531
11636
|
for (const mounted of mountedPluginsRef.current.values()) mounted.cleanup?.();
|
|
11532
11637
|
mountedPluginsRef.current.clear();
|
|
11533
11638
|
}, []);
|
|
11534
|
-
const updateScrollMetrics = (0,
|
|
11639
|
+
const updateScrollMetrics = (0, import_react44.useCallback)(() => {
|
|
11535
11640
|
const root = rootRef.current;
|
|
11536
11641
|
const element = scrollRef.current;
|
|
11537
11642
|
if (!root || !element) return;
|
|
@@ -11539,8 +11644,10 @@ function TableInner(props, ref) {
|
|
|
11539
11644
|
if (element.scrollLeft > maxLeft) element.scrollLeft = maxLeft > 1 ? maxLeft : 0;
|
|
11540
11645
|
const logicalScrollLeft = Math.min(element.scrollLeft, maxLeft);
|
|
11541
11646
|
const maxTop = Math.max(0, element.scrollHeight - element.clientHeight);
|
|
11542
|
-
|
|
11543
|
-
|
|
11647
|
+
root.dataset.overflowX = String(maxLeft > 1);
|
|
11648
|
+
root.dataset.overflowY = String(maxTop > 1);
|
|
11649
|
+
const horizontalTrack = root.querySelector(".sia-table__scrollbar--horizontal")?.clientWidth ?? 0;
|
|
11650
|
+
const verticalTrack = root.querySelector(".sia-table__scrollbar--vertical")?.clientHeight ?? 0;
|
|
11544
11651
|
const horizontalThumb = maxLeft > 1 ? Math.min(horizontalTrack, Math.max(36, horizontalTrack * element.clientWidth / horizontalContentWidth)) : 0;
|
|
11545
11652
|
const verticalThumb = maxTop > 1 ? Math.min(verticalTrack, Math.max(36, verticalTrack * element.clientHeight / element.scrollHeight)) : 0;
|
|
11546
11653
|
const horizontalPosition = maxLeft > 0 ? logicalScrollLeft / maxLeft * Math.max(0, horizontalTrack - horizontalThumb) : 0;
|
|
@@ -11565,7 +11672,7 @@ function TableInner(props, ref) {
|
|
|
11565
11672
|
root.style.setProperty("--sia-table-scrollbar-y-size", `${verticalThumb}px`);
|
|
11566
11673
|
root.style.setProperty("--sia-table-scrollbar-y-position", `${verticalPosition}px`);
|
|
11567
11674
|
}, []);
|
|
11568
|
-
(0,
|
|
11675
|
+
(0, import_react44.useEffect)(() => {
|
|
11569
11676
|
const element = scrollRef.current;
|
|
11570
11677
|
if (!element || typeof ResizeObserver === "undefined") return;
|
|
11571
11678
|
const observer = new ResizeObserver(() => {
|
|
@@ -11578,13 +11685,13 @@ function TableInner(props, ref) {
|
|
|
11578
11685
|
updateScrollMetrics();
|
|
11579
11686
|
return () => observer.disconnect();
|
|
11580
11687
|
}, [updateScrollMetrics]);
|
|
11581
|
-
(0,
|
|
11688
|
+
(0, import_react44.useEffect)(() => {
|
|
11582
11689
|
updateScrollMetrics();
|
|
11583
11690
|
});
|
|
11584
|
-
const orderedColumns = (0,
|
|
11585
|
-
const leafColumns = (0,
|
|
11586
|
-
const headerRows = (0,
|
|
11587
|
-
(0,
|
|
11691
|
+
const orderedColumns = (0, import_react44.useMemo)(() => sortTableColumnsByFixed(pipeline.columns), [pipeline.columns]);
|
|
11692
|
+
const leafColumns = (0, import_react44.useMemo)(() => flattenTableColumns(orderedColumns), [orderedColumns]);
|
|
11693
|
+
const headerRows = (0, import_react44.useMemo)(() => buildHeaderRows(orderedColumns), [orderedColumns]);
|
|
11694
|
+
(0, import_react44.useEffect)(() => {
|
|
11588
11695
|
const autoWidthColumns = leafColumns.filter((column) => column.autoWidth && resizedWidths[column.key] === void 0);
|
|
11589
11696
|
const root = rootRef.current;
|
|
11590
11697
|
if (!root || autoWidthColumns.length === 0) return;
|
|
@@ -11654,20 +11761,20 @@ function TableInner(props, ref) {
|
|
|
11654
11761
|
const bottomSpacer = shouldVirtualize ? Math.max(0, (pipeline.rows.length - endIndex) * rowHeight) : 0;
|
|
11655
11762
|
const toolbarStart = sortedPlugins.map((plugin) => {
|
|
11656
11763
|
const content = plugin.renderToolbarStart?.(getContext(plugin));
|
|
11657
|
-
return content ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
11764
|
+
return content ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react44.Fragment, { children: content }, `toolbar-start-${plugin.id}`) : null;
|
|
11658
11765
|
}).filter(Boolean);
|
|
11659
11766
|
const toolbarEnd = sortedPlugins.map((plugin) => {
|
|
11660
11767
|
const content = plugin.renderToolbarEnd?.(getContext(plugin));
|
|
11661
|
-
return content ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
11768
|
+
return content ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react44.Fragment, { children: content }, `toolbar-end-${plugin.id}`) : null;
|
|
11662
11769
|
}).filter(Boolean);
|
|
11663
11770
|
const summaries = sortedPlugins.flatMap((plugin) => plugin.renderSummary?.(getContext(plugin)) ?? []);
|
|
11664
11771
|
const footers = sortedPlugins.map((plugin) => {
|
|
11665
11772
|
const content = plugin.renderFooter?.(getContext(plugin));
|
|
11666
|
-
return content ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
11773
|
+
return content ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react44.Fragment, { children: content }, `footer-${plugin.id}`) : null;
|
|
11667
11774
|
}).filter(Boolean);
|
|
11668
11775
|
const overlays = sortedPlugins.map((plugin) => {
|
|
11669
11776
|
const content = plugin.renderOverlay?.(getContext(plugin));
|
|
11670
|
-
return content ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
11777
|
+
return content ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react44.Fragment, { children: content }, `overlay-${plugin.id}`) : null;
|
|
11671
11778
|
}).filter(Boolean);
|
|
11672
11779
|
const hasToolbar = toolbarStart.length > 0 || toolbarEnd.length > 0;
|
|
11673
11780
|
const effectiveHeight = height ?? tableHeight ?? (shouldVirtualize ? 420 : void 0);
|
|
@@ -11676,21 +11783,31 @@ function TableInner(props, ref) {
|
|
|
11676
11783
|
height: effectiveHeight,
|
|
11677
11784
|
"--sia-table-header-height": `${headerRows.length * rowHeight}px`
|
|
11678
11785
|
};
|
|
11679
|
-
const handleScroll = (0,
|
|
11786
|
+
const handleScroll = (0, import_react44.useCallback)((event) => {
|
|
11680
11787
|
const element = event.currentTarget;
|
|
11681
11788
|
if (shouldVirtualize) setScrollTop(element.scrollTop);
|
|
11682
11789
|
updateScrollMetrics();
|
|
11683
11790
|
}, [shouldVirtualize, updateScrollMetrics]);
|
|
11684
|
-
const handleScrollbarPointerDown = (0,
|
|
11791
|
+
const handleScrollbarPointerDown = (0, import_react44.useCallback)((axis, event, track = event.currentTarget) => {
|
|
11685
11792
|
const element = scrollRef.current;
|
|
11686
|
-
const
|
|
11687
|
-
if (!element || !
|
|
11793
|
+
const thumb = track.firstElementChild;
|
|
11794
|
+
if (!element || !thumb || event.button !== 0) return;
|
|
11688
11795
|
event.preventDefault();
|
|
11689
11796
|
event.stopPropagation();
|
|
11690
|
-
|
|
11797
|
+
track.setPointerCapture(event.pointerId);
|
|
11691
11798
|
const trackLength = axis === "x" ? track.clientWidth : track.clientHeight;
|
|
11692
|
-
const thumbLength = axis === "x" ?
|
|
11799
|
+
const thumbLength = axis === "x" ? thumb.offsetWidth : thumb.offsetHeight;
|
|
11693
11800
|
const maxScroll = axis === "x" ? getTableHorizontalMetrics(element, tableRef.current).maxLeft : element.scrollHeight - element.clientHeight;
|
|
11801
|
+
const thumbRect = thumb.getBoundingClientRect();
|
|
11802
|
+
const coordinate = axis === "x" ? event.clientX : event.clientY;
|
|
11803
|
+
const thumbStart = axis === "x" ? thumbRect.left : thumbRect.top;
|
|
11804
|
+
if (coordinate < thumbStart || coordinate > thumbStart + thumbLength) {
|
|
11805
|
+
const trackRect = track.getBoundingClientRect();
|
|
11806
|
+
const trackStart = axis === "x" ? trackRect.left : trackRect.top;
|
|
11807
|
+
const ratio = Math.max(0, Math.min(1, (coordinate - trackStart - thumbLength / 2) / Math.max(1, trackLength - thumbLength)));
|
|
11808
|
+
if (axis === "x") element.scrollLeft = ratio * maxScroll;
|
|
11809
|
+
else element.scrollTop = ratio * maxScroll;
|
|
11810
|
+
}
|
|
11694
11811
|
scrollbarDragRef.current = {
|
|
11695
11812
|
axis,
|
|
11696
11813
|
pointerId: event.pointerId,
|
|
@@ -11700,7 +11817,7 @@ function TableInner(props, ref) {
|
|
|
11700
11817
|
};
|
|
11701
11818
|
if (rootRef.current) rootRef.current.dataset.scrollbarDragging = "true";
|
|
11702
11819
|
}, []);
|
|
11703
|
-
const handleScrollbarPointerMove = (0,
|
|
11820
|
+
const handleScrollbarPointerMove = (0, import_react44.useCallback)((event) => {
|
|
11704
11821
|
const drag = scrollbarDragRef.current;
|
|
11705
11822
|
const element = scrollRef.current;
|
|
11706
11823
|
if (!drag || !element || drag.pointerId !== event.pointerId) return;
|
|
@@ -11709,12 +11826,12 @@ function TableInner(props, ref) {
|
|
|
11709
11826
|
if (drag.axis === "x") element.scrollLeft = nextScroll;
|
|
11710
11827
|
else element.scrollTop = nextScroll;
|
|
11711
11828
|
}, []);
|
|
11712
|
-
const handleScrollbarPointerEnd = (0,
|
|
11829
|
+
const handleScrollbarPointerEnd = (0, import_react44.useCallback)((event) => {
|
|
11713
11830
|
if (scrollbarDragRef.current?.pointerId !== event.pointerId) return;
|
|
11714
11831
|
scrollbarDragRef.current = null;
|
|
11715
11832
|
if (rootRef.current) rootRef.current.dataset.scrollbarDragging = "false";
|
|
11716
11833
|
}, []);
|
|
11717
|
-
(0,
|
|
11834
|
+
(0, import_react44.useImperativeHandle)(ref, () => ({
|
|
11718
11835
|
getRows: () => pipeline.rows.map((row) => row.record),
|
|
11719
11836
|
getColumns: () => pipeline.columns,
|
|
11720
11837
|
getPluginApi: (pluginId) => pluginApisRef.current[pluginId],
|
|
@@ -11783,6 +11900,16 @@ function TableInner(props, ref) {
|
|
|
11783
11900
|
};
|
|
11784
11901
|
}, {});
|
|
11785
11902
|
}
|
|
11903
|
+
function scrollbarAtPoint(event) {
|
|
11904
|
+
const tracks = rootRef.current?.querySelectorAll(".sia-table__scrollbar");
|
|
11905
|
+
for (const track of tracks ?? []) {
|
|
11906
|
+
if (track.closest(".sia-table") !== rootRef.current) continue;
|
|
11907
|
+
const rect = track.getBoundingClientRect();
|
|
11908
|
+
if (rect.width > 0 && rect.height > 0 && event.clientX >= rect.left && event.clientX < rect.right && event.clientY >= rect.top && event.clientY < rect.bottom) {
|
|
11909
|
+
return { track, axis: track.classList.contains("sia-table__scrollbar--vertical") ? "y" : "x" };
|
|
11910
|
+
}
|
|
11911
|
+
}
|
|
11912
|
+
}
|
|
11786
11913
|
function renderSummaryRow(summary) {
|
|
11787
11914
|
let labelRendered = false;
|
|
11788
11915
|
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("tr", { className: `sia-table__summary-row ${summary.className ?? ""}`.trim(), children: leafColumns.map((column) => {
|
|
@@ -11798,13 +11925,51 @@ function TableInner(props, ref) {
|
|
|
11798
11925
|
"div",
|
|
11799
11926
|
{
|
|
11800
11927
|
ref: rootRef,
|
|
11801
|
-
className: `sia-table sia-table--${size}${bordered ? " sia-table--bordered" : ""} ${className}`.trim(),
|
|
11928
|
+
className: `sia-table sia-table--${size}${bordered ? " sia-table--bordered" : ""}${hasToolbar && !toolbarBordered ? " sia-table--borderless-toolbar" : ""} ${className}`.trim(),
|
|
11802
11929
|
style: rootStyle,
|
|
11803
11930
|
"data-has-fixed-left": left > 0,
|
|
11804
11931
|
"data-has-fixed-right": right > 0,
|
|
11805
11932
|
"data-scrolled-left": "false",
|
|
11806
11933
|
"data-scrolled-right": "true",
|
|
11807
11934
|
...htmlProps,
|
|
11935
|
+
onPointerDownCapture: (event) => {
|
|
11936
|
+
htmlProps.onPointerDownCapture?.(event);
|
|
11937
|
+
if (event.defaultPrevented || loading || internalLoading) return;
|
|
11938
|
+
const hit = scrollbarAtPoint(event);
|
|
11939
|
+
if (hit) handleScrollbarPointerDown(hit.axis, event, hit.track);
|
|
11940
|
+
},
|
|
11941
|
+
onPointerMoveCapture: (event) => {
|
|
11942
|
+
htmlProps.onPointerMoveCapture?.(event);
|
|
11943
|
+
const hit = scrollbarAtPoint(event);
|
|
11944
|
+
rootRef.current?.querySelectorAll(".sia-table__scrollbar").forEach((track) => {
|
|
11945
|
+
const hovered = track === hit?.track;
|
|
11946
|
+
if (hovered !== track.hasAttribute("data-pointer-hover")) track.toggleAttribute("data-pointer-hover", hovered);
|
|
11947
|
+
});
|
|
11948
|
+
if (hit || scrollbarDragRef.current) {
|
|
11949
|
+
handleScrollbarPointerMove(event);
|
|
11950
|
+
event.stopPropagation();
|
|
11951
|
+
}
|
|
11952
|
+
},
|
|
11953
|
+
onPointerLeave: (event) => {
|
|
11954
|
+
htmlProps.onPointerLeave?.(event);
|
|
11955
|
+
rootRef.current?.querySelectorAll("[data-pointer-hover]").forEach((track) => track.removeAttribute("data-pointer-hover"));
|
|
11956
|
+
},
|
|
11957
|
+
onClickCapture: (event) => {
|
|
11958
|
+
if (scrollbarAtPoint(event)) {
|
|
11959
|
+
event.preventDefault();
|
|
11960
|
+
event.stopPropagation();
|
|
11961
|
+
return;
|
|
11962
|
+
}
|
|
11963
|
+
htmlProps.onClickCapture?.(event);
|
|
11964
|
+
},
|
|
11965
|
+
onDoubleClickCapture: (event) => {
|
|
11966
|
+
if (scrollbarAtPoint(event)) {
|
|
11967
|
+
event.preventDefault();
|
|
11968
|
+
event.stopPropagation();
|
|
11969
|
+
return;
|
|
11970
|
+
}
|
|
11971
|
+
htmlProps.onDoubleClickCapture?.(event);
|
|
11972
|
+
},
|
|
11808
11973
|
children: [
|
|
11809
11974
|
hasToolbar ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "sia-table__toolbar", children: [
|
|
11810
11975
|
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: toolbarStart }),
|
|
@@ -11897,26 +12062,34 @@ function TableInner(props, ref) {
|
|
|
11897
12062
|
summaries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("tfoot", { className: "sia-table__summary", children: summaries.map(renderSummaryRow) }) : null
|
|
11898
12063
|
] }) }),
|
|
11899
12064
|
pipeline.rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-table__empty", role: "status", children: emptyText }) : null,
|
|
11900
|
-
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
12065
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
11901
12066
|
"div",
|
|
11902
12067
|
{
|
|
11903
|
-
className: "sia-table__scrollbar-
|
|
12068
|
+
className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--horizontal",
|
|
12069
|
+
"aria-hidden": "true",
|
|
11904
12070
|
onPointerDown: (event) => handleScrollbarPointerDown("x", event),
|
|
12071
|
+
onClick: (event) => event.stopPropagation(),
|
|
12072
|
+
onDoubleClick: (event) => event.stopPropagation(),
|
|
11905
12073
|
onPointerMove: handleScrollbarPointerMove,
|
|
11906
12074
|
onPointerUp: handleScrollbarPointerEnd,
|
|
11907
|
-
onPointerCancel: handleScrollbarPointerEnd
|
|
12075
|
+
onPointerCancel: handleScrollbarPointerEnd,
|
|
12076
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-table__scrollbar-thumb" })
|
|
11908
12077
|
}
|
|
11909
|
-
)
|
|
11910
|
-
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
12078
|
+
),
|
|
12079
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
11911
12080
|
"div",
|
|
11912
12081
|
{
|
|
11913
|
-
className: "sia-table__scrollbar-
|
|
12082
|
+
className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--vertical",
|
|
12083
|
+
"aria-hidden": "true",
|
|
11914
12084
|
onPointerDown: (event) => handleScrollbarPointerDown("y", event),
|
|
12085
|
+
onClick: (event) => event.stopPropagation(),
|
|
12086
|
+
onDoubleClick: (event) => event.stopPropagation(),
|
|
11915
12087
|
onPointerMove: handleScrollbarPointerMove,
|
|
11916
12088
|
onPointerUp: handleScrollbarPointerEnd,
|
|
11917
|
-
onPointerCancel: handleScrollbarPointerEnd
|
|
12089
|
+
onPointerCancel: handleScrollbarPointerEnd,
|
|
12090
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-table__scrollbar-thumb" })
|
|
11918
12091
|
}
|
|
11919
|
-
)
|
|
12092
|
+
)
|
|
11920
12093
|
] }),
|
|
11921
12094
|
footers.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-table__footer", children: footers }) : null,
|
|
11922
12095
|
loading || internalLoading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "sia-table__loading", role: "status", children: [
|
|
@@ -11928,12 +12101,12 @@ function TableInner(props, ref) {
|
|
|
11928
12101
|
}
|
|
11929
12102
|
);
|
|
11930
12103
|
}
|
|
11931
|
-
var Table2 = (0,
|
|
12104
|
+
var Table2 = (0, import_react44.forwardRef)(TableInner);
|
|
11932
12105
|
|
|
11933
12106
|
// src/components/ThemeSwitch.tsx
|
|
11934
|
-
var
|
|
12107
|
+
var import_react45 = require("react");
|
|
11935
12108
|
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
11936
|
-
var ThemeSwitch = (0,
|
|
12109
|
+
var ThemeSwitch = (0, import_react45.forwardRef)(function ThemeSwitch2({
|
|
11937
12110
|
checked,
|
|
11938
12111
|
onCheckedChange,
|
|
11939
12112
|
lightLabel = "\u4EAE\u8272\u6A21\u5F0F",
|
|
@@ -11970,7 +12143,7 @@ var ThemeSwitch = (0, import_react44.forwardRef)(function ThemeSwitch2({
|
|
|
11970
12143
|
});
|
|
11971
12144
|
|
|
11972
12145
|
// src/components/FloatingScrollbarProvider.tsx
|
|
11973
|
-
var
|
|
12146
|
+
var import_react46 = require("react");
|
|
11974
12147
|
var scrollableOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay"]);
|
|
11975
12148
|
var clippingOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay", "hidden", "clip"]);
|
|
11976
12149
|
function isRootScroller(target) {
|
|
@@ -12033,7 +12206,8 @@ function createTrack(axis) {
|
|
|
12033
12206
|
return { track, thumb };
|
|
12034
12207
|
}
|
|
12035
12208
|
function FloatingScrollbarProvider({ disabled = false }) {
|
|
12036
|
-
(
|
|
12209
|
+
useScrollbarProximity();
|
|
12210
|
+
(0, import_react46.useEffect)(() => {
|
|
12037
12211
|
if (disabled) return;
|
|
12038
12212
|
const layer = document.createElement("div");
|
|
12039
12213
|
layer.className = "sia-floating-scrollbar-layer";
|
|
@@ -12063,7 +12237,7 @@ function FloatingScrollbarProvider({ disabled = false }) {
|
|
|
12063
12237
|
const hasHorizontal = canScroll(target, "horizontal");
|
|
12064
12238
|
const hasVertical = canScroll(target, "vertical");
|
|
12065
12239
|
const rect = visibleRect(target);
|
|
12066
|
-
const thickness =
|
|
12240
|
+
const thickness = 10;
|
|
12067
12241
|
horizontalTrack.hidden = !hasHorizontal || rect.width <= thickness || rect.height <= 0;
|
|
12068
12242
|
verticalTrack.hidden = !hasVertical || rect.height <= thickness || rect.width <= 0;
|
|
12069
12243
|
if (!horizontalTrack.hidden) {
|
|
@@ -12323,7 +12497,7 @@ function Breadcrumb({ items, separator = "/", itemRender, className = "", ...pro
|
|
|
12323
12497
|
}
|
|
12324
12498
|
|
|
12325
12499
|
// src/components/Typography.tsx
|
|
12326
|
-
var
|
|
12500
|
+
var import_react47 = require("react");
|
|
12327
12501
|
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
12328
12502
|
function TypographyContent({
|
|
12329
12503
|
as: Tag2 = "span",
|
|
@@ -12343,26 +12517,26 @@ function TypographyContent({
|
|
|
12343
12517
|
className = "",
|
|
12344
12518
|
...props
|
|
12345
12519
|
}) {
|
|
12346
|
-
const contentRef = (0,
|
|
12347
|
-
const editRef = (0,
|
|
12348
|
-
const timer = (0,
|
|
12349
|
-
const [localText, setLocalText] = (0,
|
|
12350
|
-
const [draft, setDraft] = (0,
|
|
12351
|
-
const [editing, setEditing] = (0,
|
|
12352
|
-
const [copied, setCopied] = (0,
|
|
12353
|
-
const [copyError, setCopyError] = (0,
|
|
12354
|
-
const [expanded, setExpanded] = (0,
|
|
12355
|
-
const [overflow, setOverflow] = (0,
|
|
12520
|
+
const contentRef = (0, import_react47.useRef)(null);
|
|
12521
|
+
const editRef = (0, import_react47.useRef)(null);
|
|
12522
|
+
const timer = (0, import_react47.useRef)();
|
|
12523
|
+
const [localText, setLocalText] = (0, import_react47.useState)();
|
|
12524
|
+
const [draft, setDraft] = (0, import_react47.useState)("");
|
|
12525
|
+
const [editing, setEditing] = (0, import_react47.useState)(false);
|
|
12526
|
+
const [copied, setCopied] = (0, import_react47.useState)(false);
|
|
12527
|
+
const [copyError, setCopyError] = (0, import_react47.useState)(false);
|
|
12528
|
+
const [expanded, setExpanded] = (0, import_react47.useState)(false);
|
|
12529
|
+
const [overflow, setOverflow] = (0, import_react47.useState)(false);
|
|
12356
12530
|
const editConfig = typeof editable === "object" ? editable : void 0;
|
|
12357
12531
|
const content = editConfig?.text ?? localText ?? children;
|
|
12358
12532
|
const requestedRows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
|
|
12359
12533
|
const rows = Number.isFinite(requestedRows) ? Math.max(1, Math.floor(requestedRows)) : 1;
|
|
12360
12534
|
const expandable = typeof ellipsis === "object" && ellipsis.expandable;
|
|
12361
|
-
(0,
|
|
12535
|
+
(0, import_react47.useEffect)(() => {
|
|
12362
12536
|
setLocalText(void 0);
|
|
12363
12537
|
}, [children]);
|
|
12364
|
-
(0,
|
|
12365
|
-
(0,
|
|
12538
|
+
(0, import_react47.useEffect)(() => () => clearTimeout(timer.current), []);
|
|
12539
|
+
(0, import_react47.useLayoutEffect)(() => {
|
|
12366
12540
|
const element = contentRef.current;
|
|
12367
12541
|
if (!element || !ellipsis || editing || expanded) return;
|
|
12368
12542
|
const measure = () => setOverflow(element.scrollHeight > element.clientHeight + 1 || element.scrollWidth > element.clientWidth + 1);
|
|
@@ -12471,10 +12645,10 @@ function TypographyRoot({ className = "", ...props }) {
|
|
|
12471
12645
|
var Typography = Object.assign(TypographyRoot, { Title, Text, Paragraph, Link });
|
|
12472
12646
|
|
|
12473
12647
|
// src/components/FloatButton.tsx
|
|
12474
|
-
var
|
|
12648
|
+
var import_react48 = require("react");
|
|
12475
12649
|
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
12476
|
-
var GroupShape = (0,
|
|
12477
|
-
var FloatButtonRoot = (0,
|
|
12650
|
+
var GroupShape = (0, import_react48.createContext)(void 0);
|
|
12651
|
+
var FloatButtonRoot = (0, import_react48.forwardRef)(function FloatButton({
|
|
12478
12652
|
icon,
|
|
12479
12653
|
description,
|
|
12480
12654
|
tooltip,
|
|
@@ -12487,7 +12661,7 @@ var FloatButtonRoot = (0, import_react47.forwardRef)(function FloatButton({
|
|
|
12487
12661
|
children,
|
|
12488
12662
|
...props
|
|
12489
12663
|
}, ref) {
|
|
12490
|
-
const groupShape = (0,
|
|
12664
|
+
const groupShape = (0, import_react48.useContext)(GroupShape);
|
|
12491
12665
|
const label = props["aria-label"] ?? (typeof tooltip === "string" ? tooltip : typeof description === "string" ? description : "\u60AC\u6D6E\u64CD\u4F5C");
|
|
12492
12666
|
const button = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
12493
12667
|
"button",
|
|
@@ -12525,10 +12699,10 @@ function FloatButtonGroup({
|
|
|
12525
12699
|
...props
|
|
12526
12700
|
}) {
|
|
12527
12701
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
12528
|
-
const rootRef = (0,
|
|
12529
|
-
const triggerRef = (0,
|
|
12530
|
-
const id = (0,
|
|
12531
|
-
(0,
|
|
12702
|
+
const rootRef = (0, import_react48.useRef)(null);
|
|
12703
|
+
const triggerRef = (0, import_react48.useRef)(null);
|
|
12704
|
+
const id = (0, import_react48.useId)();
|
|
12705
|
+
(0, import_react48.useEffect)(() => {
|
|
12532
12706
|
if (!trigger || !visible) return;
|
|
12533
12707
|
const close = (event) => {
|
|
12534
12708
|
if (!rootRef.current?.contains(event.target)) setVisible(false);
|
|
@@ -12582,8 +12756,8 @@ function FloatButtonGroup({
|
|
|
12582
12756
|
) });
|
|
12583
12757
|
}
|
|
12584
12758
|
function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth", onClick, icon, tooltip = "\u8FD4\u56DE\u9876\u90E8", ...props }) {
|
|
12585
|
-
const [visible, setVisible] = (0,
|
|
12586
|
-
(0,
|
|
12759
|
+
const [visible, setVisible] = (0, import_react48.useState)(false);
|
|
12760
|
+
(0, import_react48.useEffect)(() => {
|
|
12587
12761
|
const element = target ? target() : window;
|
|
12588
12762
|
if (!element) return;
|
|
12589
12763
|
const update = () => setVisible((element === window ? window.scrollY : element.scrollTop) >= visibilityHeight);
|
|
@@ -12602,11 +12776,11 @@ function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth
|
|
|
12602
12776
|
var FloatButton2 = Object.assign(FloatButtonRoot, { Group: FloatButtonGroup, BackTop: FloatButtonBackTop });
|
|
12603
12777
|
|
|
12604
12778
|
// src/components/ChartWhirlingLoading.tsx
|
|
12605
|
-
var
|
|
12779
|
+
var import_react49 = require("react");
|
|
12606
12780
|
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
12607
12781
|
function ChartWhirlingLoading({ width = 720, height = 360, text = "\u6570\u636E\u83B7\u53D6\u4E2D", textWidth, frame }) {
|
|
12608
|
-
const [tick, setTick] = (0,
|
|
12609
|
-
(0,
|
|
12782
|
+
const [tick, setTick] = (0, import_react49.useState)(0);
|
|
12783
|
+
(0, import_react49.useEffect)(() => {
|
|
12610
12784
|
if (frame != null) return;
|
|
12611
12785
|
const media = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
12612
12786
|
let timer;
|
|
@@ -12637,20 +12811,20 @@ function ChartWhirlingLoading({ width = 720, height = 360, text = "\u6570\u636E\
|
|
|
12637
12811
|
}
|
|
12638
12812
|
|
|
12639
12813
|
// src/components/SvgMapPlot.tsx
|
|
12640
|
-
var
|
|
12814
|
+
var import_react61 = require("react");
|
|
12641
12815
|
|
|
12642
12816
|
// src/components/ChartBrush.tsx
|
|
12643
|
-
var
|
|
12817
|
+
var import_react50 = require("react");
|
|
12644
12818
|
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
12645
12819
|
function ChartBrush({ bounds, onSelect, onCancel, selectionShape = "band", selectionStyle, minSelectionSize }) {
|
|
12646
|
-
const [vertical, setVertical] = (0,
|
|
12647
|
-
const startY = (0,
|
|
12820
|
+
const [vertical, setVertical] = (0, import_react50.useState)(null);
|
|
12821
|
+
const startY = (0, import_react50.useRef)(0);
|
|
12648
12822
|
const y = (event) => {
|
|
12649
12823
|
const matrix = event.currentTarget.ownerSVGElement?.getScreenCTM();
|
|
12650
12824
|
return matrix ? Math.max(bounds.y, Math.min(bounds.y + bounds.height, new DOMPoint(event.clientX, event.clientY).matrixTransform(matrix.inverse()).y)) : bounds.y;
|
|
12651
12825
|
};
|
|
12652
|
-
const drag = (0,
|
|
12653
|
-
const [selection, setSelection] = (0,
|
|
12826
|
+
const drag = (0, import_react50.useRef)(null);
|
|
12827
|
+
const [selection, setSelection] = (0, import_react50.useState)(null);
|
|
12654
12828
|
const x = (event) => {
|
|
12655
12829
|
const matrix = event.currentTarget.ownerSVGElement?.getScreenCTM();
|
|
12656
12830
|
if (!matrix) return null;
|
|
@@ -12773,7 +12947,7 @@ function appendChartExportHeadings(original, clone, host) {
|
|
|
12773
12947
|
}
|
|
12774
12948
|
|
|
12775
12949
|
// src/components/ChartNodeTimeline.tsx
|
|
12776
|
-
var
|
|
12950
|
+
var import_react52 = require("react");
|
|
12777
12951
|
|
|
12778
12952
|
// src/components/timelinePositions.ts
|
|
12779
12953
|
function timelineRatios(count, dates) {
|
|
@@ -12799,7 +12973,7 @@ function nearestTimelineIndex(ratios, ratio) {
|
|
|
12799
12973
|
}
|
|
12800
12974
|
|
|
12801
12975
|
// src/components/ChartPointMotion.tsx
|
|
12802
|
-
var
|
|
12976
|
+
var import_react51 = require("react");
|
|
12803
12977
|
|
|
12804
12978
|
// src/components/chartMotion.ts
|
|
12805
12979
|
function chartMotionBaseline(points, horizontal = false) {
|
|
@@ -12820,11 +12994,11 @@ function interpolateChartPoints(from, to, progress) {
|
|
|
12820
12994
|
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
12821
12995
|
function ChartPointMotion({ points, enabled, duration, updateDuration = 500, animateInitial = true, easing = "linear", progress, horizontal = false, origin, children }) {
|
|
12822
12996
|
const baseline = (target) => origin ? target.map(() => origin) : chartMotionBaseline(target, horizontal);
|
|
12823
|
-
const [frame, setFrame] = (0,
|
|
12824
|
-
const displayed = (0,
|
|
12825
|
-
const initialized = (0,
|
|
12997
|
+
const [frame, setFrame] = (0, import_react51.useState)(() => enabled && animateInitial ? baseline(points) : points);
|
|
12998
|
+
const displayed = (0, import_react51.useRef)(frame);
|
|
12999
|
+
const initialized = (0, import_react51.useRef)(!animateInitial);
|
|
12826
13000
|
const signature = JSON.stringify(points);
|
|
12827
|
-
(0,
|
|
13001
|
+
(0, import_react51.useEffect)(() => {
|
|
12828
13002
|
const target = points;
|
|
12829
13003
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
12830
13004
|
if (!enabled || progress != null || reduced.matches) {
|
|
@@ -12863,8 +13037,8 @@ function ChartPointMotion({ points, enabled, duration, updateDuration = 500, ani
|
|
|
12863
13037
|
// src/components/ChartNodeTimeline.tsx
|
|
12864
13038
|
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
12865
13039
|
function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, playInterval = 2e3, loop = true, x = 80, y = 520, width = 840 }) {
|
|
12866
|
-
const [playing, setPlaying] = (0,
|
|
12867
|
-
const [draft, setDraft] = (0,
|
|
13040
|
+
const [playing, setPlaying] = (0, import_react52.useState)(autoPlay), dragging = (0, import_react52.useRef)();
|
|
13041
|
+
const [draft, setDraft] = (0, import_react52.useState)(), pending = (0, import_react52.useRef)(), draftRef = (0, import_react52.useRef)();
|
|
12868
13042
|
const shown = draft ?? value;
|
|
12869
13043
|
const cancelPending = () => {
|
|
12870
13044
|
clearTimeout(pending.current);
|
|
@@ -12872,8 +13046,8 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
12872
13046
|
draftRef.current = void 0;
|
|
12873
13047
|
setDraft(void 0);
|
|
12874
13048
|
};
|
|
12875
|
-
(0,
|
|
12876
|
-
(0,
|
|
13049
|
+
(0, import_react52.useEffect)(() => () => clearTimeout(pending.current), []);
|
|
13050
|
+
(0, import_react52.useEffect)(() => {
|
|
12877
13051
|
cancelPending();
|
|
12878
13052
|
}, [value]);
|
|
12879
13053
|
const preview = (index) => {
|
|
@@ -12888,8 +13062,8 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
12888
13062
|
draftRef.current = void 0;
|
|
12889
13063
|
}, 200);
|
|
12890
13064
|
};
|
|
12891
|
-
(0,
|
|
12892
|
-
(0,
|
|
13065
|
+
(0, import_react52.useEffect)(() => setPlaying(autoPlay), [autoPlay]);
|
|
13066
|
+
(0, import_react52.useEffect)(() => {
|
|
12893
13067
|
if (!playing || labels.length < 2) return;
|
|
12894
13068
|
const timer = window.setTimeout(() => {
|
|
12895
13069
|
if (value + 1 < labels.length) onChange(value + 1);
|
|
@@ -12998,7 +13172,7 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
12998
13172
|
}
|
|
12999
13173
|
|
|
13000
13174
|
// src/components/ChartVerticalRange.tsx
|
|
13001
|
-
var
|
|
13175
|
+
var import_react53 = require("react");
|
|
13002
13176
|
|
|
13003
13177
|
// src/components/chartColorRamp.ts
|
|
13004
13178
|
function chartColorRamp(colors, ratio) {
|
|
@@ -13018,16 +13192,16 @@ function chartColorRamp(colors, ratio) {
|
|
|
13018
13192
|
// src/components/ChartVerticalRange.tsx
|
|
13019
13193
|
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
13020
13194
|
function ChartVerticalRange({ min, max, x, y, length, thickness, colors, range, endLabels, onChange, indicatorValue, onHoverRange, realtime = true, readOnly = false }) {
|
|
13021
|
-
const id = (0,
|
|
13022
|
-
const drag = (0,
|
|
13023
|
-
const [draft, setDraft] = (0,
|
|
13024
|
-
const pending = (0,
|
|
13195
|
+
const id = (0, import_react53.useId)().replaceAll(":", "");
|
|
13196
|
+
const drag = (0, import_react53.useRef)();
|
|
13197
|
+
const [draft, setDraft] = (0, import_react53.useState)();
|
|
13198
|
+
const pending = (0, import_react53.useRef)();
|
|
13025
13199
|
const cancel = () => {
|
|
13026
13200
|
drag.current = void 0;
|
|
13027
13201
|
pending.current = void 0;
|
|
13028
13202
|
setDraft(void 0);
|
|
13029
13203
|
};
|
|
13030
|
-
(0,
|
|
13204
|
+
(0, import_react53.useEffect)(() => {
|
|
13031
13205
|
if (!realtime) cancel();
|
|
13032
13206
|
}, [range[0], range[1], min, max, realtime]);
|
|
13033
13207
|
const shown = draft ?? range;
|
|
@@ -13108,18 +13282,18 @@ function ChartVerticalRange({ min, max, x, y, length, thickness, colors, range,
|
|
|
13108
13282
|
}
|
|
13109
13283
|
|
|
13110
13284
|
// src/components/ChartHorizontalRange.tsx
|
|
13111
|
-
var
|
|
13285
|
+
var import_react54 = require("react");
|
|
13112
13286
|
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
13113
13287
|
function ChartHorizontalRange({ min, max, x, y, length, thickness, colors, range, endLabels, onChange, indicatorValue, onHoverRange, realtime = true }) {
|
|
13114
|
-
const id = (0,
|
|
13115
|
-
const drag = (0,
|
|
13116
|
-
const [draft, setDraft] = (0,
|
|
13288
|
+
const id = (0, import_react54.useId)().replaceAll(":", ""), span = max - min;
|
|
13289
|
+
const drag = (0, import_react54.useRef)();
|
|
13290
|
+
const [draft, setDraft] = (0, import_react54.useState)(), pending = (0, import_react54.useRef)();
|
|
13117
13291
|
const cancel = () => {
|
|
13118
13292
|
drag.current = void 0;
|
|
13119
13293
|
pending.current = void 0;
|
|
13120
13294
|
setDraft(void 0);
|
|
13121
13295
|
};
|
|
13122
|
-
(0,
|
|
13296
|
+
(0, import_react54.useEffect)(() => {
|
|
13123
13297
|
if (!realtime) cancel();
|
|
13124
13298
|
}, [range[0], range[1], min, max, realtime]);
|
|
13125
13299
|
const shown = draft ?? range, low = Math.max(min, Math.min(max, shown[0])), high = Math.max(low, Math.min(max, shown[1]));
|
|
@@ -13197,7 +13371,7 @@ function ChartHorizontalRange({ min, max, x, y, length, thickness, colors, range
|
|
|
13197
13371
|
}
|
|
13198
13372
|
|
|
13199
13373
|
// src/components/Chart.tsx
|
|
13200
|
-
var
|
|
13374
|
+
var import_react55 = require("react");
|
|
13201
13375
|
|
|
13202
13376
|
// src/components/chartCompositeExport.ts
|
|
13203
13377
|
function serializeChartComposite(host) {
|
|
@@ -13321,20 +13495,20 @@ var DEFAULT_CHART_PALETTE = [
|
|
|
13321
13495
|
"#2f54eb",
|
|
13322
13496
|
"#a0d911"
|
|
13323
13497
|
];
|
|
13324
|
-
var ChartContext = (0,
|
|
13498
|
+
var ChartContext = (0, import_react55.createContext)(null);
|
|
13325
13499
|
function toCssSize(value, fallback) {
|
|
13326
13500
|
if (typeof value === "number") return `${value}px`;
|
|
13327
13501
|
return value ?? fallback;
|
|
13328
13502
|
}
|
|
13329
|
-
var ChartComposite = (0,
|
|
13330
|
-
const host = (0,
|
|
13331
|
-
(0,
|
|
13503
|
+
var ChartComposite = (0, import_react55.forwardRef)(function ChartComposite2({ layers, width = "100%", height = 320, ariaLabel = "\u7EC4\u5408\u56FE\u8868", className = "", style, ...props }, ref) {
|
|
13504
|
+
const host = (0, import_react55.useRef)(null);
|
|
13505
|
+
(0, import_react55.useImperativeHandle)(ref, () => ({ toSvgString: () => host.current ? serializeChartComposite(host.current) : null, saveAsImage: (filename) => saveCompositeImage(host.current ? serializeChartComposite(host.current) : null, filename) }), []);
|
|
13332
13506
|
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ...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_runtime58.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)) });
|
|
13333
13507
|
});
|
|
13334
|
-
var useTooltipLayoutEffect = typeof window === "undefined" ?
|
|
13508
|
+
var useTooltipLayoutEffect = typeof window === "undefined" ? import_react55.useEffect : import_react55.useLayoutEffect;
|
|
13335
13509
|
function ChartTooltip({ open, left, top, children, enterable = false, inheritTextStyle = false, placement = "above", className = "", style, ...props }) {
|
|
13336
|
-
const elementRef = (0,
|
|
13337
|
-
const [position, setPosition] = (0,
|
|
13510
|
+
const elementRef = (0, import_react55.useRef)(null);
|
|
13511
|
+
const [position, setPosition] = (0, import_react55.useState)([left, top]);
|
|
13338
13512
|
useTooltipLayoutEffect(() => {
|
|
13339
13513
|
const element = elementRef.current, host = element?.parentElement;
|
|
13340
13514
|
if (!open || placement !== "axis" || !element || !host) return;
|
|
@@ -13458,7 +13632,7 @@ function ChartToolbox({
|
|
|
13458
13632
|
))
|
|
13459
13633
|
] });
|
|
13460
13634
|
}
|
|
13461
|
-
var SiaChart = (0,
|
|
13635
|
+
var SiaChart = (0, import_react55.forwardRef)(function SiaChart2({
|
|
13462
13636
|
children,
|
|
13463
13637
|
width = "100%",
|
|
13464
13638
|
height = 320,
|
|
@@ -13485,19 +13659,19 @@ var SiaChart = (0, import_react54.forwardRef)(function SiaChart2({
|
|
|
13485
13659
|
style,
|
|
13486
13660
|
...rest
|
|
13487
13661
|
}, ref) {
|
|
13488
|
-
const hostRef = (0,
|
|
13489
|
-
const svgRef = (0,
|
|
13490
|
-
const titleId = (0,
|
|
13491
|
-
const descriptionId = (0,
|
|
13492
|
-
const [tooltip, setTooltip] = (0,
|
|
13493
|
-
const tooltipHideTimer = (0,
|
|
13494
|
-
const tooltipHeld = (0,
|
|
13662
|
+
const hostRef = (0, import_react55.useRef)(null);
|
|
13663
|
+
const svgRef = (0, import_react55.useRef)(null);
|
|
13664
|
+
const titleId = (0, import_react55.useId)();
|
|
13665
|
+
const descriptionId = (0, import_react55.useId)();
|
|
13666
|
+
const [tooltip, setTooltip] = (0, import_react55.useState)(null);
|
|
13667
|
+
const tooltipHideTimer = (0, import_react55.useRef)();
|
|
13668
|
+
const tooltipHeld = (0, import_react55.useRef)(false);
|
|
13495
13669
|
const cancelTooltipHide = () => {
|
|
13496
13670
|
clearTimeout(tooltipHideTimer.current);
|
|
13497
13671
|
};
|
|
13498
|
-
(0,
|
|
13499
|
-
const [linkedPosition, setLinkedPosition] = (0,
|
|
13500
|
-
(0,
|
|
13672
|
+
(0, import_react55.useEffect)(() => () => clearTimeout(tooltipHideTimer.current), []);
|
|
13673
|
+
const [linkedPosition, setLinkedPosition] = (0, import_react55.useState)({ left: 0, top: 0 });
|
|
13674
|
+
(0, import_react55.useEffect)(() => {
|
|
13501
13675
|
const host = hostRef.current, svg = svgRef.current;
|
|
13502
13676
|
if (!controlledTooltip || !host || !svg) return;
|
|
13503
13677
|
const position = () => {
|
|
@@ -13512,12 +13686,12 @@ var SiaChart = (0, import_react54.forwardRef)(function SiaChart2({
|
|
|
13512
13686
|
observer.observe(host);
|
|
13513
13687
|
return () => observer.disconnect();
|
|
13514
13688
|
}, [controlledTooltip]);
|
|
13515
|
-
const [dataViewOpen, setDataViewOpen] = (0,
|
|
13516
|
-
const [markMode, setMarkMode] = (0,
|
|
13517
|
-
const [markStart, setMarkStart] = (0,
|
|
13518
|
-
const [userMarks, setUserMarks] = (0,
|
|
13689
|
+
const [dataViewOpen, setDataViewOpen] = (0, import_react55.useState)(false);
|
|
13690
|
+
const [markMode, setMarkMode] = (0, import_react55.useState)(false);
|
|
13691
|
+
const [markStart, setMarkStart] = (0, import_react55.useState)(null);
|
|
13692
|
+
const [userMarks, setUserMarks] = (0, import_react55.useState)([]);
|
|
13519
13693
|
const toolboxOptions = toolbox === true ? {} : toolbox || void 0;
|
|
13520
|
-
const rootStyle = (0,
|
|
13694
|
+
const rootStyle = (0, import_react55.useMemo)(() => ({
|
|
13521
13695
|
...style,
|
|
13522
13696
|
width: toCssSize(width, "100%"),
|
|
13523
13697
|
height: toCssSize(height, "320px"),
|
|
@@ -13575,13 +13749,13 @@ var SiaChart = (0, import_react54.forwardRef)(function SiaChart2({
|
|
|
13575
13749
|
anchor.href = canvas.toDataURL("image/png");
|
|
13576
13750
|
anchor.click();
|
|
13577
13751
|
}
|
|
13578
|
-
(0,
|
|
13752
|
+
(0, import_react55.useImperativeHandle)(ref, () => ({
|
|
13579
13753
|
getElement: () => svgRef.current,
|
|
13580
13754
|
focus: () => svgRef.current?.focus(),
|
|
13581
13755
|
toSvgString: serializeSvg,
|
|
13582
13756
|
toDataUrl: svgDataUrl
|
|
13583
13757
|
}), []);
|
|
13584
|
-
const context = (0,
|
|
13758
|
+
const context = (0, import_react55.useMemo)(() => ({
|
|
13585
13759
|
palette,
|
|
13586
13760
|
showTooltip: (event, content, point) => {
|
|
13587
13761
|
cancelTooltipHide();
|
|
@@ -13768,7 +13942,7 @@ var SiaChart = (0, import_react54.forwardRef)(function SiaChart2({
|
|
|
13768
13942
|
) });
|
|
13769
13943
|
});
|
|
13770
13944
|
function ChartMark({ tooltip, tooltipPoint, label, onPointerMove, onPointerLeave, onFocus, onBlur, ...props }) {
|
|
13771
|
-
const context = (0,
|
|
13945
|
+
const context = (0, import_react55.useContext)(ChartContext);
|
|
13772
13946
|
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
13773
13947
|
"g",
|
|
13774
13948
|
{
|
|
@@ -13797,7 +13971,7 @@ function ChartMark({ tooltip, tooltipPoint, label, onPointerMove, onPointerLeave
|
|
|
13797
13971
|
);
|
|
13798
13972
|
}
|
|
13799
13973
|
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 }) {
|
|
13800
|
-
const paintId = (0,
|
|
13974
|
+
const paintId = (0, import_react55.useId)().replaceAll(":", "");
|
|
13801
13975
|
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))));
|
|
13802
13976
|
const totalWidth = orientation === "horizontal" ? widths.reduce((sum, value) => sum + value, 0) + Math.max(0, items.length - 1) * itemGap : Math.max(0, ...widths);
|
|
13803
13977
|
const startX = align === "start" ? x : align === "end" ? x - totalWidth : x - totalWidth / 2;
|
|
@@ -13926,7 +14100,7 @@ function ChartAxis({ layer = "all", orientation, x, y, length, labels, positions
|
|
|
13926
14100
|
] });
|
|
13927
14101
|
}
|
|
13928
14102
|
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 }) {
|
|
13929
|
-
const id = (0,
|
|
14103
|
+
const id = (0, import_react55.useId)().replaceAll(":", "");
|
|
13930
14104
|
const vertical = orientation === "vertical";
|
|
13931
14105
|
if (svgHandles && vertical && !calculable && !pieces?.length) return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ChartVerticalRange, { readOnly: true, min, max, x, y, length: width, thickness: height, colors, range: [min, max], endLabels, indicatorValue, onHoverRange });
|
|
13932
14106
|
if (svgHandles && vertical && calculable && range && !pieces?.length) return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ChartVerticalRange, { min, max, x, y, length: width, thickness: height, colors, range, onChange: onRangeChange, endLabels, indicatorValue, onHoverRange, realtime });
|
|
@@ -13954,8 +14128,8 @@ function ChartVisualMap({ min, max, colors = ["#e6f4ff", "#1677ff"], x = 16, y =
|
|
|
13954
14128
|
] });
|
|
13955
14129
|
}
|
|
13956
14130
|
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 }) {
|
|
13957
|
-
const [activeHandle, setActiveHandle] = (0,
|
|
13958
|
-
const pan = (0,
|
|
14131
|
+
const [activeHandle, setActiveHandle] = (0, import_react55.useState)(null);
|
|
14132
|
+
const pan = (0, import_react55.useRef)();
|
|
13959
14133
|
const start = Math.min(value[0], value[1]);
|
|
13960
14134
|
const end = Math.max(value[0], value[1]);
|
|
13961
14135
|
const startPercent = (start - min) / Math.max(1, max - min) * 100;
|
|
@@ -14029,9 +14203,9 @@ function ChartDataZoom({ value, min = 0, max = 100, ariaLabel = "\u56FE\u8868\u5
|
|
|
14029
14203
|
] });
|
|
14030
14204
|
}
|
|
14031
14205
|
function ChartTimeline({ labels, value, onChange, autoPlay = false, playInterval = 2e3, loop = true, className = "", ...props }) {
|
|
14032
|
-
const [playing, setPlaying] = (0,
|
|
14033
|
-
(0,
|
|
14034
|
-
(0,
|
|
14206
|
+
const [playing, setPlaying] = (0, import_react55.useState)(autoPlay);
|
|
14207
|
+
(0, import_react55.useEffect)(() => setPlaying(autoPlay), [autoPlay]);
|
|
14208
|
+
(0, import_react55.useEffect)(() => {
|
|
14035
14209
|
if (!playing || labels.length <= 1) return void 0;
|
|
14036
14210
|
const timer = window.setInterval(() => {
|
|
14037
14211
|
const next = value + 1;
|
|
@@ -14141,7 +14315,7 @@ function parseSvgMapPaths(source) {
|
|
|
14141
14315
|
}
|
|
14142
14316
|
|
|
14143
14317
|
// src/components/useMapRoam.ts
|
|
14144
|
-
var
|
|
14318
|
+
var import_react56 = require("react");
|
|
14145
14319
|
|
|
14146
14320
|
// src/components/chartRoam.ts
|
|
14147
14321
|
function zoomChartViewport(view, factor, point, limit = { min: 0.05, max: 20 }) {
|
|
@@ -14158,14 +14332,14 @@ var initial = { x: 0, y: 0, scale: 1 };
|
|
|
14158
14332
|
function useMapRoam(mode, scaleLimit = { min: 0.65, max: 5 }, wheelFactors = [1.12, 0.9]) {
|
|
14159
14333
|
const [zoomIn, zoomOut] = wheelFactors;
|
|
14160
14334
|
const min = scaleLimit?.min, max = scaleLimit?.max, unlimited = scaleLimit === null;
|
|
14161
|
-
const host = (0,
|
|
14162
|
-
const [view, setView] = (0,
|
|
14163
|
-
const drag = (0,
|
|
14335
|
+
const host = (0, import_react56.useRef)(null);
|
|
14336
|
+
const [view, setView] = (0, import_react56.useState)(initial);
|
|
14337
|
+
const drag = (0, import_react56.useRef)();
|
|
14164
14338
|
const local = (x, y) => {
|
|
14165
14339
|
const matrix = host.current?.ownerSVGElement?.getScreenCTM();
|
|
14166
14340
|
return matrix ? new DOMPoint(x, y).matrixTransform(matrix.inverse()) : new DOMPoint(x, y);
|
|
14167
14341
|
};
|
|
14168
|
-
(0,
|
|
14342
|
+
(0, import_react56.useEffect)(() => {
|
|
14169
14343
|
const node = host.current;
|
|
14170
14344
|
if (!node || !mode || mode === "move") return;
|
|
14171
14345
|
const wheel = (event) => {
|
|
@@ -14227,7 +14401,7 @@ function useMapRoam(mode, scaleLimit = { min: 0.65, max: 5 }, wheelFactors = [1.
|
|
|
14227
14401
|
}
|
|
14228
14402
|
|
|
14229
14403
|
// src/components/ChartMapLineReveal.tsx
|
|
14230
|
-
var
|
|
14404
|
+
var import_react57 = require("react");
|
|
14231
14405
|
|
|
14232
14406
|
// src/components/mapLineGeometry.ts
|
|
14233
14407
|
function mapLineControl(source, target, curveness) {
|
|
@@ -14244,9 +14418,9 @@ function mapLineDuration(source, target, period) {
|
|
|
14244
14418
|
// src/components/ChartMapLineReveal.tsx
|
|
14245
14419
|
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
14246
14420
|
function ChartMapLineReveal({ source, control, target, enabled, initialDuration = 2e3, updateDuration = 500, children }) {
|
|
14247
|
-
const signature = JSON.stringify([source, control, target]), initialized = (0,
|
|
14248
|
-
const [frame, setFrame] = (0,
|
|
14249
|
-
(0,
|
|
14421
|
+
const signature = JSON.stringify([source, control, target]), initialized = (0, import_react57.useRef)(false);
|
|
14422
|
+
const [frame, setFrame] = (0, import_react57.useState)({ signature, progress: enabled ? 0 : 1 });
|
|
14423
|
+
(0, import_react57.useEffect)(() => {
|
|
14250
14424
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
14251
14425
|
const duration = Math.max(1, initialized.current ? updateDuration : initialDuration);
|
|
14252
14426
|
if (!enabled || reduced.matches) {
|
|
@@ -14279,15 +14453,15 @@ function ChartMapLineReveal({ source, control, target, enabled, initialDuration
|
|
|
14279
14453
|
}
|
|
14280
14454
|
|
|
14281
14455
|
// src/components/ChartMapLineEffect.tsx
|
|
14282
|
-
var
|
|
14456
|
+
var import_react58 = require("react");
|
|
14283
14457
|
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
14284
14458
|
function ChartMapLineEffect({ source, control, target, period = 30, color = "#fff", radius = 1, shadowBlur = 10, shadowColor = color, trailAlpha }) {
|
|
14285
|
-
const ref = (0,
|
|
14286
|
-
const trails = (0,
|
|
14459
|
+
const ref = (0, import_react58.useRef)(null);
|
|
14460
|
+
const trails = (0, import_react58.useRef)([]);
|
|
14287
14461
|
const alpha = trailAlpha === void 0 ? 0 : Math.max(0, Math.min(0.999, trailAlpha));
|
|
14288
14462
|
const count = alpha > 0 ? Math.min(240, Math.ceil(Math.log(5e-3) / Math.log(alpha))) : 0;
|
|
14289
14463
|
const duration = mapLineDuration(source, target, period);
|
|
14290
|
-
(0,
|
|
14464
|
+
(0, import_react58.useEffect)(() => {
|
|
14291
14465
|
const started = performance.now();
|
|
14292
14466
|
let frame = 0;
|
|
14293
14467
|
const history = [];
|
|
@@ -14320,7 +14494,7 @@ function ChartMapLineEffect({ source, control, target, period = 30, color = "#ff
|
|
|
14320
14494
|
}
|
|
14321
14495
|
|
|
14322
14496
|
// src/components/ChartMapPointPulse.tsx
|
|
14323
|
-
var
|
|
14497
|
+
var import_react59 = require("react");
|
|
14324
14498
|
|
|
14325
14499
|
// src/components/mapPointPulse.ts
|
|
14326
14500
|
function mapPointPulseDuration(period, random = Math.random) {
|
|
@@ -14330,7 +14504,7 @@ function mapPointPulseDuration(period, random = Math.random) {
|
|
|
14330
14504
|
// src/components/ChartMapPointPulse.tsx
|
|
14331
14505
|
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
14332
14506
|
function ChartMapPointPulse({ x, y, size, color, period = 15, scaleSize = 2 }) {
|
|
14333
|
-
const [duration] = (0,
|
|
14507
|
+
const [duration] = (0, import_react59.useState)(() => mapPointPulseDuration(period));
|
|
14334
14508
|
return /* @__PURE__ */ (0, import_jsx_runtime61.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: [
|
|
14335
14509
|
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("animate", { attributeName: "r", values: `${size * scaleSize * 0.1};${size * scaleSize}`, dur: `${duration}ms`, repeatCount: "indefinite", calcMode: "linear" }),
|
|
14336
14510
|
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("animate", { attributeName: "stroke-width", values: ".1;1", dur: `${duration}ms`, repeatCount: "indefinite", calcMode: "linear" })
|
|
@@ -14338,11 +14512,11 @@ function ChartMapPointPulse({ x, y, size, color, period = 15, scaleSize = 2 }) {
|
|
|
14338
14512
|
}
|
|
14339
14513
|
|
|
14340
14514
|
// src/components/ChartMapPointEntrance.tsx
|
|
14341
|
-
var
|
|
14515
|
+
var import_react60 = require("react");
|
|
14342
14516
|
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
14343
14517
|
function ChartMapPointEntrance({ enabled, x, y, children }) {
|
|
14344
|
-
const [progress, setProgress] = (0,
|
|
14345
|
-
(0,
|
|
14518
|
+
const [progress, setProgress] = (0, import_react60.useState)(enabled ? 0.01 : 1);
|
|
14519
|
+
(0, import_react60.useEffect)(() => {
|
|
14346
14520
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
14347
14521
|
if (!enabled || reduced.matches) {
|
|
14348
14522
|
setProgress(1);
|
|
@@ -14385,8 +14559,8 @@ function mapLineEndLabel(source, target) {
|
|
|
14385
14559
|
// src/components/SvgMapPlot.tsx
|
|
14386
14560
|
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
14387
14561
|
function SvgMapRegion({ d, name, value, series, color, scale, offset, emphasized, onHover, stroke, strokeWidth, opacity, hoverable = true, showLabel = true, tooltipNameOnly = false }) {
|
|
14388
|
-
const path = (0,
|
|
14389
|
-
(0,
|
|
14562
|
+
const path = (0, import_react61.useRef)(null), [center, setCenter] = (0, import_react61.useState)([0, 0]);
|
|
14563
|
+
(0, import_react61.useLayoutEffect)(() => {
|
|
14390
14564
|
const box = path.current?.getBBox();
|
|
14391
14565
|
if (box) setCenter([box.x + box.width / 2, box.y + box.height / 2]);
|
|
14392
14566
|
}, [d]);
|
|
@@ -14404,9 +14578,9 @@ function SvgMapRegion({ d, name, value, series, color, scale, offset, emphasized
|
|
|
14404
14578
|
] }), onPointerMove: () => onHover(true), onPointerLeave: () => onHover(false), onFocus: () => onHover(true), onBlur: () => onHover(false), children: content });
|
|
14405
14579
|
}
|
|
14406
14580
|
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" }) {
|
|
14407
|
-
const map = (0,
|
|
14408
|
-
const [hoveredLine, setHoveredLine] = (0,
|
|
14409
|
-
(0,
|
|
14581
|
+
const map = (0, import_react61.useMemo)(() => parseSvgMapPaths(source), [source]), control = useMapRoam(roam, null, [1.2, 1 / 1.2]), [hovered, setHovered] = (0, import_react61.useState)();
|
|
14582
|
+
const [hoveredLine, setHoveredLine] = (0, import_react61.useState)();
|
|
14583
|
+
(0, import_react61.useEffect)(() => {
|
|
14410
14584
|
control.reset();
|
|
14411
14585
|
setHovered(void 0);
|
|
14412
14586
|
}, [resetKey]);
|
|
@@ -14469,16 +14643,16 @@ function SvgMapPlot({ source, name, data, x, y, width, height, domain, range = d
|
|
|
14469
14643
|
}
|
|
14470
14644
|
|
|
14471
14645
|
// src/components/ChartRoamController.tsx
|
|
14472
|
-
var
|
|
14646
|
+
var import_react62 = require("react");
|
|
14473
14647
|
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
14474
14648
|
function ChartRoamController({ x = 800, y = 5, onPan, onZoom }) {
|
|
14475
|
-
const [hovered, setHovered] = (0,
|
|
14476
|
-
const timer = (0,
|
|
14649
|
+
const [hovered, setHovered] = (0, import_react62.useState)(), [focused, setFocused] = (0, import_react62.useState)();
|
|
14650
|
+
const timer = (0, import_react62.useRef)();
|
|
14477
14651
|
const stop = () => {
|
|
14478
14652
|
if (timer.current !== void 0) clearInterval(timer.current);
|
|
14479
14653
|
timer.current = void 0;
|
|
14480
14654
|
};
|
|
14481
|
-
(0,
|
|
14655
|
+
(0, import_react62.useEffect)(() => {
|
|
14482
14656
|
window.addEventListener("blur", stop);
|
|
14483
14657
|
return () => {
|
|
14484
14658
|
stop();
|
|
@@ -14517,13 +14691,13 @@ function ChartRoamController({ x = 800, y = 5, onPan, onZoom }) {
|
|
|
14517
14691
|
}
|
|
14518
14692
|
|
|
14519
14693
|
// src/components/LineShareChart.tsx
|
|
14520
|
-
var
|
|
14694
|
+
var import_react82 = require("react");
|
|
14521
14695
|
|
|
14522
14696
|
// src/components/Charts.tsx
|
|
14523
|
-
var
|
|
14697
|
+
var import_react80 = require("react");
|
|
14524
14698
|
|
|
14525
14699
|
// src/components/ChartScatterMotion.tsx
|
|
14526
|
-
var
|
|
14700
|
+
var import_react63 = require("react");
|
|
14527
14701
|
|
|
14528
14702
|
// src/components/scatterMotion.ts
|
|
14529
14703
|
function scatterMotionEase(progress) {
|
|
@@ -14535,9 +14709,9 @@ function scatterMotionEase(progress) {
|
|
|
14535
14709
|
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
14536
14710
|
function ChartScatterMotion({ x, y, radius, enabled, duration = 2e3, updateDuration = 500, progress, children }) {
|
|
14537
14711
|
const target = { x, y, radius };
|
|
14538
|
-
const [frame, setFrame] = (0,
|
|
14539
|
-
const displayed = (0,
|
|
14540
|
-
(0,
|
|
14712
|
+
const [frame, setFrame] = (0, import_react63.useState)(() => ({ ...target, radius: enabled ? radius * 0.01 : radius }));
|
|
14713
|
+
const displayed = (0, import_react63.useRef)(frame), started = (0, import_react63.useRef)(false);
|
|
14714
|
+
(0, import_react63.useEffect)(() => {
|
|
14541
14715
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
14542
14716
|
let request = 0;
|
|
14543
14717
|
const publish = (next) => {
|
|
@@ -14648,12 +14822,12 @@ function layoutEventRiver(series, tailLength, area) {
|
|
|
14648
14822
|
}
|
|
14649
14823
|
|
|
14650
14824
|
// src/components/EventRiverBubble.tsx
|
|
14651
|
-
var
|
|
14825
|
+
var import_react64 = require("react");
|
|
14652
14826
|
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
14653
14827
|
function EventRiverBubble({ resetKey, draggable = true, tooltipPoint, onPointerUp, ...props }) {
|
|
14654
|
-
const [offset, setOffset] = (0,
|
|
14655
|
-
const drag = (0,
|
|
14656
|
-
(0,
|
|
14828
|
+
const [offset, setOffset] = (0, import_react64.useState)(0);
|
|
14829
|
+
const drag = (0, import_react64.useRef)();
|
|
14830
|
+
(0, import_react64.useEffect)(() => {
|
|
14657
14831
|
setOffset(0);
|
|
14658
14832
|
drag.current = void 0;
|
|
14659
14833
|
}, [resetKey]);
|
|
@@ -14704,13 +14878,13 @@ function EventRiverBubble({ resetKey, draggable = true, tooltipPoint, onPointerU
|
|
|
14704
14878
|
}
|
|
14705
14879
|
|
|
14706
14880
|
// src/components/EventRiverMotion.tsx
|
|
14707
|
-
var
|
|
14881
|
+
var import_react65 = require("react");
|
|
14708
14882
|
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
14709
14883
|
function EventRiverMotion({ geometry, enabled = true, duration = 2e3, updateDuration = 500, progress, children }) {
|
|
14710
|
-
const [frame, setFrame] = (0,
|
|
14711
|
-
const displayed = (0,
|
|
14884
|
+
const [frame, setFrame] = (0, import_react65.useState)(() => ({ ...geometry, scale: enabled ? 0.1 : 1 }));
|
|
14885
|
+
const displayed = (0, import_react65.useRef)(frame), started = (0, import_react65.useRef)(false);
|
|
14712
14886
|
const signature = JSON.stringify(geometry);
|
|
14713
|
-
(0,
|
|
14887
|
+
(0, import_react65.useEffect)(() => {
|
|
14714
14888
|
const preference = window.matchMedia("(prefers-reduced-motion: reduce)"), target = { ...geometry, scale: 1 };
|
|
14715
14889
|
const from = started.current ? displayed.current : { ...geometry, scale: 0.1 };
|
|
14716
14890
|
let request = 0;
|
|
@@ -14827,7 +15001,7 @@ function transferPieValue(series, source, target, connector = " & ") {
|
|
|
14827
15001
|
}
|
|
14828
15002
|
|
|
14829
15003
|
// src/components/ChartValueIsland.tsx
|
|
14830
|
-
var
|
|
15004
|
+
var import_react66 = require("react");
|
|
14831
15005
|
|
|
14832
15006
|
// src/components/cartesianTransfer.ts
|
|
14833
15007
|
function addValues(a, b) {
|
|
@@ -14892,13 +15066,13 @@ function findCompositeValueTarget(element, x, y) {
|
|
|
14892
15066
|
// src/components/ChartValueIsland.tsx
|
|
14893
15067
|
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
14894
15068
|
function ChartValueIsland({ name, value, x, y, color = "#2ec7c9", onDrop, resolveTarget = findCompositeValueTarget }) {
|
|
14895
|
-
const drag = (0,
|
|
14896
|
-
const [offset, setOffset] = (0,
|
|
15069
|
+
const drag = (0, import_react66.useRef)(null);
|
|
15070
|
+
const [offset, setOffset] = (0, import_react66.useState)([0, 0]);
|
|
14897
15071
|
const cancel = () => {
|
|
14898
15072
|
drag.current = null;
|
|
14899
15073
|
setOffset([0, 0]);
|
|
14900
15074
|
};
|
|
14901
|
-
(0,
|
|
15075
|
+
(0, import_react66.useEffect)(cancel, [x, y]);
|
|
14902
15076
|
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
|
|
14903
15077
|
ChartMark,
|
|
14904
15078
|
{
|
|
@@ -14951,12 +15125,12 @@ function ChartValueIsland({ name, value, x, y, color = "#2ec7c9", onDrop, resolv
|
|
|
14951
15125
|
}
|
|
14952
15126
|
|
|
14953
15127
|
// src/components/ChartPulseRing.tsx
|
|
14954
|
-
var
|
|
15128
|
+
var import_react67 = require("react");
|
|
14955
15129
|
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
14956
15130
|
function ChartPulseRing({ center, radius, scaleSize = 2, color = "gold", shadowBlur = 10, period = 15, progress, enabled = true }) {
|
|
14957
|
-
const id = (0,
|
|
14958
|
-
const [reduced, setReduced] = (0,
|
|
14959
|
-
(0,
|
|
15131
|
+
const id = (0, import_react67.useId)().replace(/:/g, ""), [phase, setPhase] = (0, import_react67.useState)(0);
|
|
15132
|
+
const [reduced, setReduced] = (0, import_react67.useState)(false);
|
|
15133
|
+
(0, import_react67.useEffect)(() => {
|
|
14960
15134
|
const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
14961
15135
|
setReduced(preference.matches);
|
|
14962
15136
|
let frame = 0;
|
|
@@ -15100,7 +15274,7 @@ function chartMarkerPath(kind, x, y, size) {
|
|
|
15100
15274
|
}
|
|
15101
15275
|
|
|
15102
15276
|
// src/components/ChartLargeMapPointCanvas.tsx
|
|
15103
|
-
var
|
|
15277
|
+
var import_react68 = require("react");
|
|
15104
15278
|
|
|
15105
15279
|
// src/components/largeMapPointPulse.ts
|
|
15106
15280
|
function largeMapPointPulse(elapsed, period, initial3, delay) {
|
|
@@ -15116,8 +15290,8 @@ function largeMapPointSize(size, pulse) {
|
|
|
15116
15290
|
// src/components/ChartLargeMapPointCanvas.tsx
|
|
15117
15291
|
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
15118
15292
|
function ChartLargeMapPointCanvas({ groups, width, height }) {
|
|
15119
|
-
const canvas = (0,
|
|
15120
|
-
(0,
|
|
15293
|
+
const canvas = (0, import_react68.useRef)(null), key = JSON.stringify(groups);
|
|
15294
|
+
(0, import_react68.useEffect)(() => {
|
|
15121
15295
|
const element = canvas.current, context = element?.getContext("2d");
|
|
15122
15296
|
if (!element || !context) return;
|
|
15123
15297
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -15176,12 +15350,12 @@ function ChartLargeMapPointCanvas({ groups, width, height }) {
|
|
|
15176
15350
|
}
|
|
15177
15351
|
|
|
15178
15352
|
// src/components/ChartCrosshair.tsx
|
|
15179
|
-
var
|
|
15353
|
+
var import_react69 = require("react");
|
|
15180
15354
|
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
15181
15355
|
function ChartCrosshair({ bounds, xDomain, yDomain, formatX = decimal, formatY = decimal }) {
|
|
15182
|
-
const ref = (0,
|
|
15183
|
-
const [point, setPoint] = (0,
|
|
15184
|
-
(0,
|
|
15356
|
+
const ref = (0, import_react69.useRef)(null);
|
|
15357
|
+
const [point, setPoint] = (0, import_react69.useState)(null);
|
|
15358
|
+
(0, import_react69.useEffect)(() => {
|
|
15185
15359
|
const svg = ref.current?.ownerSVGElement;
|
|
15186
15360
|
if (!svg) return;
|
|
15187
15361
|
const clear = () => setPoint(null);
|
|
@@ -15201,7 +15375,7 @@ function ChartCrosshair({ bounds, xDomain, yDomain, formatX = decimal, formatY =
|
|
|
15201
15375
|
svg.removeEventListener("pointercancel", clear);
|
|
15202
15376
|
};
|
|
15203
15377
|
}, [bounds.x, bounds.y, bounds.width, bounds.height]);
|
|
15204
|
-
(0,
|
|
15378
|
+
(0, import_react69.useEffect)(() => setPoint(null), [xDomain[0], xDomain[1], yDomain[0], yDomain[1]]);
|
|
15205
15379
|
const x = point ? xDomain[0] + (point.x - bounds.x) / bounds.width * (xDomain[1] - xDomain[0]) : 0;
|
|
15206
15380
|
const y = point ? yDomain[1] - (point.y - bounds.y) / bounds.height * (yDomain[1] - yDomain[0]) : 0;
|
|
15207
15381
|
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("g", { ref, className: "sia-chart__crosshair", "aria-hidden": "true", children: [
|
|
@@ -15218,7 +15392,7 @@ function decimal(value) {
|
|
|
15218
15392
|
}
|
|
15219
15393
|
|
|
15220
15394
|
// src/components/HeatmapRasterLayer.tsx
|
|
15221
|
-
var
|
|
15395
|
+
var import_react70 = require("react");
|
|
15222
15396
|
|
|
15223
15397
|
// src/components/heatmapRaster.ts
|
|
15224
15398
|
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] }];
|
|
@@ -15265,9 +15439,9 @@ function rasterizeHeatmap(width, height, points, options = {}) {
|
|
|
15265
15439
|
// src/components/HeatmapRasterLayer.tsx
|
|
15266
15440
|
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
15267
15441
|
function HeatmapRaster({ width, height, points, options }) {
|
|
15268
|
-
const [url, setUrl] = (0,
|
|
15442
|
+
const [url, setUrl] = (0, import_react70.useState)();
|
|
15269
15443
|
const optionsKey = JSON.stringify(options);
|
|
15270
|
-
(0,
|
|
15444
|
+
(0, import_react70.useEffect)(() => {
|
|
15271
15445
|
const canvas = document.createElement("canvas");
|
|
15272
15446
|
canvas.width = width;
|
|
15273
15447
|
canvas.height = height;
|
|
@@ -15367,10 +15541,10 @@ function chordMatrixLayout(matrix, options = {}) {
|
|
|
15367
15541
|
}
|
|
15368
15542
|
|
|
15369
15543
|
// src/components/MatrixChordPlot.tsx
|
|
15370
|
-
var
|
|
15544
|
+
var import_react71 = require("react");
|
|
15371
15545
|
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
15372
15546
|
function MatrixChordPlot({ names, matrix, series, appearance, showNodeLabels = false, rotateNodeLabels = false, linkLabel, sort, sortSub, padAngle, clockwise, palette, geometry, legacySubSort = false, showScale = false }) {
|
|
15373
|
-
const [hoveredLink, setHoveredLink] = (0,
|
|
15547
|
+
const [hoveredLink, setHoveredLink] = (0, import_react71.useState)(null);
|
|
15374
15548
|
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;
|
|
15375
15549
|
const point = (angle) => [cx + Math.cos(angle) * r, cy + Math.sin(angle) * r];
|
|
15376
15550
|
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { className: "sia-chart__matrix-chord", children: [
|
|
@@ -15717,13 +15891,13 @@ function transferRadarSeries(panels, source, target, connector = " & ") {
|
|
|
15717
15891
|
}
|
|
15718
15892
|
|
|
15719
15893
|
// src/components/ChartRoamGroup.tsx
|
|
15720
|
-
var
|
|
15894
|
+
var import_react72 = require("react");
|
|
15721
15895
|
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
15722
15896
|
var initial2 = { x: 0, y: 0, scale: 1 };
|
|
15723
15897
|
function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true, ariaLabel, resetSignal = 0 }) {
|
|
15724
|
-
const group = (0,
|
|
15725
|
-
const [view, setView] = (0,
|
|
15726
|
-
(0,
|
|
15898
|
+
const group = (0, import_react72.useRef)(null), drag = (0, import_react72.useRef)();
|
|
15899
|
+
const [view, setView] = (0, import_react72.useState)(initial2);
|
|
15900
|
+
(0, import_react72.useEffect)(() => {
|
|
15727
15901
|
setView(initial2);
|
|
15728
15902
|
drag.current = void 0;
|
|
15729
15903
|
}, [resetSignal]);
|
|
@@ -15733,7 +15907,7 @@ function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true,
|
|
|
15733
15907
|
const local = new DOMPoint(clientX, clientY).matrixTransform(matrix.inverse());
|
|
15734
15908
|
return [local.x, local.y];
|
|
15735
15909
|
};
|
|
15736
|
-
(0,
|
|
15910
|
+
(0, import_react72.useEffect)(() => {
|
|
15737
15911
|
const target = group.current;
|
|
15738
15912
|
if (!target || !enabled || !zoomEnabled) return;
|
|
15739
15913
|
const wheel = (event) => {
|
|
@@ -15794,11 +15968,11 @@ function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true,
|
|
|
15794
15968
|
}
|
|
15795
15969
|
|
|
15796
15970
|
// src/components/TreeNodeGlyph.tsx
|
|
15797
|
-
var
|
|
15971
|
+
var import_react73 = require("react");
|
|
15798
15972
|
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
15799
15973
|
function TreeNodeGlyph({ symbol = "circle", x, y, width, height, color, itemStyle }) {
|
|
15800
|
-
const [failed, setFailed] = (0,
|
|
15801
|
-
(0,
|
|
15974
|
+
const [failed, setFailed] = (0, import_react73.useState)(false);
|
|
15975
|
+
(0, import_react73.useEffect)(() => setFailed(false), [symbol]);
|
|
15802
15976
|
const style = { fill: itemStyle.brushType === "stroke" ? "none" : color, stroke: itemStyle.borderColor, strokeWidth: itemStyle.borderWidth };
|
|
15803
15977
|
if (symbol.startsWith("image://")) return failed ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("g", { role: "img", "aria-label": "\u539F\u59CB\u8282\u70B9\u56FE\u7247\u52A0\u8F7D\u5931\u8D25", children: [
|
|
15804
15978
|
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("rect", { x: x - width / 2, y: y - height / 2, width, height, fill: "none", stroke: "#999", strokeDasharray: "3 3" }),
|
|
@@ -16087,7 +16261,7 @@ function resolveMapRegionAppearance(base, datum, emphasized) {
|
|
|
16087
16261
|
}
|
|
16088
16262
|
|
|
16089
16263
|
// src/components/ChartBundledMapCanvas.tsx
|
|
16090
|
-
var
|
|
16264
|
+
var import_react74 = require("react");
|
|
16091
16265
|
|
|
16092
16266
|
// src/components/edgeBundling.ts
|
|
16093
16267
|
var distance = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]);
|
|
@@ -16231,9 +16405,9 @@ function sampleBundledPath(curves, progress) {
|
|
|
16231
16405
|
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
16232
16406
|
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 }) {
|
|
16233
16407
|
const signature = JSON.stringify(edges), pointKey = JSON.stringify(points), effectKey = JSON.stringify(effect);
|
|
16234
|
-
const paths = (0,
|
|
16235
|
-
const base = (0,
|
|
16236
|
-
(0,
|
|
16408
|
+
const paths = (0, import_react74.useMemo)(() => bundleEdges(JSON.parse(signature)).map((row) => ({ index: row.index, curves: smoothBundledPath(row.points, smoothness) })), [signature, smoothness]);
|
|
16409
|
+
const base = (0, import_react74.useRef)(null), moving = (0, import_react74.useRef)(null);
|
|
16410
|
+
(0, import_react74.useEffect)(() => {
|
|
16237
16411
|
const node = base.current, ctx = node?.getContext("2d");
|
|
16238
16412
|
if (!node || !ctx) return;
|
|
16239
16413
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -16259,7 +16433,7 @@ function ChartBundledMapCanvas({ edges, points = [], smoothness = 0.1, color = "
|
|
|
16259
16433
|
ctx.fill();
|
|
16260
16434
|
}
|
|
16261
16435
|
}, [paths, pointKey, width, height, color, opacity, lineWidth, pointColor, pointRadius]);
|
|
16262
|
-
(0,
|
|
16436
|
+
(0, import_react74.useEffect)(() => {
|
|
16263
16437
|
const node = moving.current, ctx = node?.getContext("2d");
|
|
16264
16438
|
if (!node || !ctx) return;
|
|
16265
16439
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -16321,11 +16495,11 @@ function ChartBundledMapCanvas({ edges, points = [], smoothness = 0.1, color = "
|
|
|
16321
16495
|
}
|
|
16322
16496
|
|
|
16323
16497
|
// src/components/ChartMapEffectCanvas.tsx
|
|
16324
|
-
var
|
|
16498
|
+
var import_react75 = require("react");
|
|
16325
16499
|
var import_jsx_runtime78 = require("react/jsx-runtime");
|
|
16326
16500
|
function ChartMapEffectCanvas({ effects, width, height, alpha = 0.95 }) {
|
|
16327
|
-
const canvas = (0,
|
|
16328
|
-
(0,
|
|
16501
|
+
const canvas = (0, import_react75.useRef)(null), key = JSON.stringify(effects);
|
|
16502
|
+
(0, import_react75.useEffect)(() => {
|
|
16329
16503
|
const element = canvas.current;
|
|
16330
16504
|
if (!element) return;
|
|
16331
16505
|
const context = element.getContext("2d");
|
|
@@ -16471,12 +16645,12 @@ function layoutTreeNodes(root, options = {}) {
|
|
|
16471
16645
|
}
|
|
16472
16646
|
|
|
16473
16647
|
// src/components/ChartDataEditor.tsx
|
|
16474
|
-
var
|
|
16648
|
+
var import_react76 = require("react");
|
|
16475
16649
|
var import_jsx_runtime79 = require("react/jsx-runtime");
|
|
16476
16650
|
function ChartDataEditor({ series, onApply, readOnly = false, allowNull = false }) {
|
|
16477
|
-
const [draft, setDraft] = (0,
|
|
16478
|
-
const [error, setError] = (0,
|
|
16479
|
-
const [applied, setApplied] = (0,
|
|
16651
|
+
const [draft, setDraft] = (0, import_react76.useState)(() => JSON.stringify(series.map((item) => item.data), null, 2));
|
|
16652
|
+
const [error, setError] = (0, import_react76.useState)("");
|
|
16653
|
+
const [applied, setApplied] = (0, import_react76.useState)(false);
|
|
16480
16654
|
function apply() {
|
|
16481
16655
|
try {
|
|
16482
16656
|
const values = JSON.parse(draft);
|
|
@@ -16507,11 +16681,11 @@ function ChartDataEditor({ series, onApply, readOnly = false, allowNull = false
|
|
|
16507
16681
|
}
|
|
16508
16682
|
|
|
16509
16683
|
// src/components/ChartBarStatistics.tsx
|
|
16510
|
-
var
|
|
16684
|
+
var import_react77 = require("react");
|
|
16511
16685
|
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
16512
16686
|
function ChartBarStatistics({ values, kinds, project, plot, horizontal, color, gradient, seriesName }) {
|
|
16513
|
-
const id = (0,
|
|
16514
|
-
const [active, setActive] = (0,
|
|
16687
|
+
const id = (0, import_react77.useId)().replaceAll(":", "");
|
|
16688
|
+
const [active, setActive] = (0, import_react77.useState)();
|
|
16515
16689
|
const paint = gradient ? `url(#${id})` : color;
|
|
16516
16690
|
return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("g", { children: [
|
|
16517
16691
|
gradient ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime80.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, i)) }) }) : null,
|
|
@@ -16566,7 +16740,7 @@ function lineSegments(points) {
|
|
|
16566
16740
|
}
|
|
16567
16741
|
|
|
16568
16742
|
// src/components/useBarMagicState.ts
|
|
16569
|
-
var
|
|
16743
|
+
var import_react78 = require("react");
|
|
16570
16744
|
|
|
16571
16745
|
// src/components/cartesianMagicState.ts
|
|
16572
16746
|
function changeCartesianMagic(state, action) {
|
|
@@ -16581,8 +16755,8 @@ function changeCartesianMagic(state, action) {
|
|
|
16581
16755
|
function useBarMagicState(toolbox, shape = "bar") {
|
|
16582
16756
|
const initial3 = { shape, layout: "original" };
|
|
16583
16757
|
const options = toolbox === true ? {} : typeof toolbox === "object" ? toolbox : void 0;
|
|
16584
|
-
const [state, setState] = (0,
|
|
16585
|
-
(0,
|
|
16758
|
+
const [state, setState] = (0, import_react78.useState)(() => changeCartesianMagic(initial3, options?.activeMagicType ?? shape));
|
|
16759
|
+
(0, import_react78.useEffect)(() => {
|
|
16586
16760
|
if (options?.activeMagicType) setState((s) => changeCartesianMagic(s, options.activeMagicType));
|
|
16587
16761
|
}, [options?.activeMagicType]);
|
|
16588
16762
|
const resolved = options ? { ...options, activeMagicType: state.shape, activeMagicTypes: options.activeMagicTypes ?? (state.layout === "original" ? [state.shape] : [state.shape, state.layout]), onMagicTypeChange: (action) => {
|
|
@@ -16596,7 +16770,7 @@ function useBarMagicState(toolbox, shape = "bar") {
|
|
|
16596
16770
|
}
|
|
16597
16771
|
|
|
16598
16772
|
// src/components/useBarValueTransfer.ts
|
|
16599
|
-
var
|
|
16773
|
+
var import_react79 = require("react");
|
|
16600
16774
|
|
|
16601
16775
|
// src/components/barTransfer.ts
|
|
16602
16776
|
function transferBarValue(series, source, target, categories) {
|
|
@@ -16613,10 +16787,10 @@ function transferBarValue(series, source, target, categories) {
|
|
|
16613
16787
|
|
|
16614
16788
|
// src/components/useBarValueTransfer.ts
|
|
16615
16789
|
function useBarValueTransfer(series, initial3, categories, enabled, publish, onError) {
|
|
16616
|
-
const [islands, setIslands] = (0,
|
|
16617
|
-
const drag = (0,
|
|
16618
|
-
const [offset, setOffset] = (0,
|
|
16619
|
-
(0,
|
|
16790
|
+
const [islands, setIslands] = (0, import_react79.useState)([]);
|
|
16791
|
+
const drag = (0, import_react79.useRef)();
|
|
16792
|
+
const [offset, setOffset] = (0, import_react79.useState)();
|
|
16793
|
+
(0, import_react79.useEffect)(() => {
|
|
16620
16794
|
setIslands([]);
|
|
16621
16795
|
drag.current = void 0;
|
|
16622
16796
|
setOffset(void 0);
|
|
@@ -16717,12 +16891,12 @@ function logarithmicValueAt(progress, domain) {
|
|
|
16717
16891
|
|
|
16718
16892
|
// src/components/Charts.tsx
|
|
16719
16893
|
var import_jsx_runtime81 = require("react/jsx-runtime");
|
|
16720
|
-
var
|
|
16894
|
+
var import_react81 = require("react");
|
|
16721
16895
|
var PLOT = { x: 62, y: 48, width: 628, height: 250 };
|
|
16722
16896
|
var PLOT_BOTTOM = PLOT.y + PLOT.height;
|
|
16723
16897
|
function useLegendSelection(names, controlled, onChange) {
|
|
16724
|
-
const [internal, setInternal] = (0,
|
|
16725
|
-
(0,
|
|
16898
|
+
const [internal, setInternal] = (0, import_react80.useState)(() => Object.fromEntries(names.map((name) => [name, true])));
|
|
16899
|
+
(0, import_react80.useEffect)(() => {
|
|
16726
16900
|
setInternal((current) => {
|
|
16727
16901
|
const next = { ...current };
|
|
16728
16902
|
names.forEach((name) => {
|
|
@@ -16822,7 +16996,7 @@ function lineSymbol(type, x, y, size, color, image, strokeWidth = 2) {
|
|
|
16822
16996
|
return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("circle", { cx: x, cy: y, r: size / 2, fill: color, stroke: "var(--sia-color-surface)", strokeWidth: 2 });
|
|
16823
16997
|
}
|
|
16824
16998
|
function useZoom(value, defaultValue, onChange) {
|
|
16825
|
-
const [internal, setInternal] = (0,
|
|
16999
|
+
const [internal, setInternal] = (0, import_react80.useState)([...defaultValue ?? [0, 100]]);
|
|
16826
17000
|
const current = value ?? internal;
|
|
16827
17001
|
const update = (next) => {
|
|
16828
17002
|
if (!value) setInternal(next);
|
|
@@ -16832,8 +17006,8 @@ function useZoom(value, defaultValue, onChange) {
|
|
|
16832
17006
|
}
|
|
16833
17007
|
function useToolboxMagicType(toolbox, fallback) {
|
|
16834
17008
|
const options = toolbox === true ? {} : typeof toolbox === "object" ? toolbox : void 0;
|
|
16835
|
-
const [internal, setInternal] = (0,
|
|
16836
|
-
(0,
|
|
17009
|
+
const [internal, setInternal] = (0, import_react80.useState)(options?.activeMagicType ?? fallback);
|
|
17010
|
+
(0, import_react80.useEffect)(() => {
|
|
16837
17011
|
if (options?.activeMagicType) setInternal(options.activeMagicType);
|
|
16838
17012
|
}, [options?.activeMagicType]);
|
|
16839
17013
|
const active = options?.activeMagicType ?? internal;
|
|
@@ -16851,15 +17025,15 @@ function useToolboxMagicType(toolbox, fallback) {
|
|
|
16851
17025
|
} : toolbox;
|
|
16852
17026
|
return [active, resolved];
|
|
16853
17027
|
}
|
|
16854
|
-
var LineChart = (0,
|
|
16855
|
-
const [hoverIndex, setHoverIndex] = (0,
|
|
16856
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
16857
|
-
const [dragPoint, setDragPoint] = (0,
|
|
16858
|
-
const linePaintId = (0,
|
|
16859
|
-
const [hoveredLinePoint, setHoveredLinePoint] = (0,
|
|
16860
|
-
(0,
|
|
17028
|
+
var LineChart = (0, import_react80.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) {
|
|
17029
|
+
const [hoverIndex, setHoverIndex] = (0, import_react80.useState)(null);
|
|
17030
|
+
const [editableSeries, setEditableSeries] = (0, import_react80.useState)(sourceSeries);
|
|
17031
|
+
const [dragPoint, setDragPoint] = (0, import_react80.useState)(null);
|
|
17032
|
+
const linePaintId = (0, import_react80.useId)().replaceAll(":", "");
|
|
17033
|
+
const [hoveredLinePoint, setHoveredLinePoint] = (0, import_react80.useState)();
|
|
17034
|
+
(0, import_react80.useEffect)(() => setEditableSeries(sourceSeries), [sourceSeries]);
|
|
16861
17035
|
const series = externalValueTransfer ? sourceSeries : editableSeries;
|
|
16862
|
-
const initialTransferSeries = (0,
|
|
17036
|
+
const initialTransferSeries = (0, import_react80.useMemo)(() => sourceSeries.map((item) => ({ ...item, data: item.data.map(lineValue) })), [sourceSeries]);
|
|
16863
17037
|
const localTransfer = useBarValueTransfer(series.map((item) => ({ ...item, data: item.data.map(lineValue) })), initialTransferSeries, categories, calculable && calculableMode === "transfer" && !externalValueTransfer, (nextBars) => {
|
|
16864
17038
|
const next = series.map((item, row) => ({ ...item, data: item.data.map((datum, index) => {
|
|
16865
17039
|
const value = barDatum(nextBars[row].data[index]).value;
|
|
@@ -16876,8 +17050,8 @@ var LineChart = (0, import_react79.forwardRef)(function LineChart2({ calculableM
|
|
|
16876
17050
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
16877
17051
|
const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
|
|
16878
17052
|
const inlineZoom = dataZoom && zoomControlBounds ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("foreignObject", { className: "sia-chart__inline-zoom sia-chart__inline-zoom--compact", ...zoomControlBounds, children: /* @__PURE__ */ (0, import_jsx_runtime81.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;
|
|
16879
|
-
const [zoomBrushActive, setZoomBrushActive] = (0,
|
|
16880
|
-
const [zoomHistory, setZoomHistory] = (0,
|
|
17053
|
+
const [zoomBrushActive, setZoomBrushActive] = (0, import_react80.useState)(false);
|
|
17054
|
+
const [zoomHistory, setZoomHistory] = (0, import_react80.useState)(() => dataZoom ? [defaultZoom ?? zoom ?? [0, 100]] : []);
|
|
16881
17055
|
const zoomBrush = dataZoom && zoomBrushActive ? { minSelectionSize: zoomMinSelectionSize, selectionStyle: zoomSelectionStyle, selectionShape: zoomSelectionShape, bounds: PLOT2, onCancel: () => setZoomBrushActive(false), onSelect: (range) => {
|
|
16882
17056
|
const start = Math.min(...zoomValue), span = Math.max(...zoomValue) - start;
|
|
16883
17057
|
const next = [start + range[0] * span, start + range[1] * span];
|
|
@@ -17264,17 +17438,17 @@ function ChartPin({ point, color, label }) {
|
|
|
17264
17438
|
function barDatum(datum) {
|
|
17265
17439
|
return typeof datum === "number" ? { value: datum } : datum;
|
|
17266
17440
|
}
|
|
17267
|
-
var BarChart = (0,
|
|
17268
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
17269
|
-
const [dragBar, setDragBar] = (0,
|
|
17270
|
-
const [hoveredBar, setHoveredBar] = (0,
|
|
17271
|
-
const barPaintId = (0,
|
|
17441
|
+
var BarChart = (0, import_react80.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) {
|
|
17442
|
+
const [editableSeries, setEditableSeries] = (0, import_react80.useState)(sourceSeries);
|
|
17443
|
+
const [dragBar, setDragBar] = (0, import_react80.useState)(null);
|
|
17444
|
+
const [hoveredBar, setHoveredBar] = (0, import_react80.useState)();
|
|
17445
|
+
const barPaintId = (0, import_react80.useId)().replaceAll(":", "");
|
|
17272
17446
|
const localTransfer = useBarValueTransfer(editableSeries, sourceSeries, categories, calculable && calculableMode === "transfer" && !externalValueTransfer, (next) => {
|
|
17273
17447
|
setEditableSeries(next);
|
|
17274
17448
|
onDataChange?.(next);
|
|
17275
17449
|
}, onTransferError);
|
|
17276
17450
|
const transfer = externalValueTransfer ?? localTransfer;
|
|
17277
|
-
(0,
|
|
17451
|
+
(0, import_react80.useEffect)(() => setEditableSeries(sourceSeries), [sourceSeries]);
|
|
17278
17452
|
const series = externalValueTransfer ? sourceSeries : editableSeries;
|
|
17279
17453
|
const legacy = appearance === "macarons";
|
|
17280
17454
|
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 };
|
|
@@ -17521,17 +17695,17 @@ var BarChart = (0, import_react79.forwardRef)(function BarChart2({ valueTransfer
|
|
|
17521
17695
|
] }, `bar-island-${index}`)) : null
|
|
17522
17696
|
] });
|
|
17523
17697
|
});
|
|
17524
|
-
var ScatterChart = (0,
|
|
17525
|
-
const [data, setData] = (0,
|
|
17526
|
-
const [emphasizedPoint, setEmphasizedPoint] = (0,
|
|
17527
|
-
const [emphasizedAnnotation, setEmphasizedAnnotation] = (0,
|
|
17528
|
-
(0,
|
|
17698
|
+
var ScatterChart = (0, import_react80.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) {
|
|
17699
|
+
const [data, setData] = (0, import_react80.useState)(initialData);
|
|
17700
|
+
const [emphasizedPoint, setEmphasizedPoint] = (0, import_react80.useState)(null);
|
|
17701
|
+
const [emphasizedAnnotation, setEmphasizedAnnotation] = (0, import_react80.useState)();
|
|
17702
|
+
(0, import_react80.useEffect)(() => setData(initialData), [initialData]);
|
|
17529
17703
|
const plot = plotBounds ?? PLOT, bottom = plot.y + plot.height;
|
|
17530
17704
|
const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
|
|
17531
17705
|
const allCategories = [...new Set(data.map((item) => item.category).filter((value) => Boolean(value)))];
|
|
17532
17706
|
const legend = useLegendSelection(allCategories, legendSelected, onLegendSelectionChange);
|
|
17533
17707
|
const activeData = data.filter((item) => !item.category || legend.isSelected(item.category));
|
|
17534
|
-
const sorted = (0,
|
|
17708
|
+
const sorted = (0, import_react80.useMemo)(() => [...activeData].sort((left, right) => left.x - right.x), [activeData]);
|
|
17535
17709
|
const startIndex = dataZoom ? Math.floor(Math.min(...zoomValue) / 100 * Math.max(0, sorted.length - 1)) : 0;
|
|
17536
17710
|
const endIndex = dataZoom ? Math.max(startIndex + 1, Math.ceil(Math.max(...zoomValue) / 100 * sorted.length)) : sorted.length;
|
|
17537
17711
|
const categoryWindow = xCategories ? scatterCategoryWindow(xCategories, dataZoom ? zoomValue : [0, 100]) : void 0;
|
|
@@ -17546,10 +17720,10 @@ var ScatterChart = (0, import_react79.forwardRef)(function ScatterChart2({ symbo
|
|
|
17546
17720
|
const visualMinimum = visualMap?.min ?? (visualValues.length ? Math.min(...visualValues) : 0);
|
|
17547
17721
|
const visualMaximum = visualMap?.max ?? (visualValues.length ? Math.max(...visualValues) : 1);
|
|
17548
17722
|
const visualColors = visualMap?.colors ?? ["#e6f4ff", "#1677ff"];
|
|
17549
|
-
const [selectedPieces, setSelectedPieces] = (0,
|
|
17550
|
-
const [visualRange, setVisualRange] = (0,
|
|
17723
|
+
const [selectedPieces, setSelectedPieces] = (0, import_react80.useState)([]);
|
|
17724
|
+
const [visualRange, setVisualRange] = (0, import_react80.useState)();
|
|
17551
17725
|
const piecesKey = JSON.stringify(visualMap?.pieces ?? []);
|
|
17552
|
-
(0,
|
|
17726
|
+
(0, import_react80.useEffect)(() => setSelectedPieces([]), [piecesKey]);
|
|
17553
17727
|
const statistics = scatterStatistics(visibleData, markByCategory);
|
|
17554
17728
|
const plotted = visibleData.map((item, index) => {
|
|
17555
17729
|
const x = linearScale(categoryWindow ? categoryWindow.indexOf(item.x) : item.x, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]);
|
|
@@ -17707,8 +17881,8 @@ var ScatterChart = (0, import_react79.forwardRef)(function ScatterChart2({ symbo
|
|
|
17707
17881
|
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChartDataZoom, { value: zoomValue, onChange: setZoomValue })
|
|
17708
17882
|
] }) : content;
|
|
17709
17883
|
});
|
|
17710
|
-
var CandlestickChart = (0,
|
|
17711
|
-
const [data, setData] = (0,
|
|
17884
|
+
var CandlestickChart = (0, import_react80.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) {
|
|
17885
|
+
const [data, setData] = (0, import_react80.useState)(initialData), [internalActive, setInternalActive] = (0, import_react80.useState)(null), [internalVisible, setInternalVisible] = (0, import_react80.useState)(true);
|
|
17712
17886
|
const active = activeIndex === void 0 ? internalActive : activeIndex;
|
|
17713
17887
|
const seriesVisible = controlledVisible ?? internalVisible;
|
|
17714
17888
|
const setActive = (index) => {
|
|
@@ -17719,7 +17893,7 @@ var CandlestickChart = (0, import_react79.forwardRef)(function CandlestickChart2
|
|
|
17719
17893
|
if (controlledVisible === void 0) setInternalVisible(visible);
|
|
17720
17894
|
onSeriesVisibilityChange?.(visible);
|
|
17721
17895
|
};
|
|
17722
|
-
(0,
|
|
17896
|
+
(0, import_react80.useEffect)(() => {
|
|
17723
17897
|
setData(initialData);
|
|
17724
17898
|
}, [initialData]);
|
|
17725
17899
|
const legacy = appearance === "macarons";
|
|
@@ -17810,20 +17984,20 @@ var CandlestickChart = (0, import_react79.forwardRef)(function CandlestickChart2
|
|
|
17810
17984
|
] }) : content;
|
|
17811
17985
|
});
|
|
17812
17986
|
var EMPTY_PIE_DATA = [];
|
|
17813
|
-
var PieChart = (0,
|
|
17814
|
-
const pieGradientId = (0,
|
|
17815
|
-
const [pieIslands, setPieIslands] = (0,
|
|
17816
|
-
const sourceRings = (0,
|
|
17817
|
-
const [editableRings, setEditableRings] = (0,
|
|
17818
|
-
const valueDrag = (0,
|
|
17819
|
-
const [valueOffset, setValueOffset] = (0,
|
|
17820
|
-
(0,
|
|
17987
|
+
var PieChart = (0, import_react80.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) {
|
|
17988
|
+
const pieGradientId = (0, import_react80.useId)().replace(/:/g, "");
|
|
17989
|
+
const [pieIslands, setPieIslands] = (0, import_react80.useState)([]);
|
|
17990
|
+
const sourceRings = (0, import_react80.useMemo)(() => series?.length ? series : [{ data, innerRadius, outerRadius, rose, showLabels }], [series, data, innerRadius, outerRadius, rose, showLabels]);
|
|
17991
|
+
const [editableRings, setEditableRings] = (0, import_react80.useState)(sourceRings);
|
|
17992
|
+
const valueDrag = (0, import_react80.useRef)(null);
|
|
17993
|
+
const [valueOffset, setValueOffset] = (0, import_react80.useState)();
|
|
17994
|
+
(0, import_react80.useEffect)(() => setEditableRings(sourceRings), [sourceRings]);
|
|
17821
17995
|
const allData = editableRings.flatMap((ring) => ring.data).filter((item) => !item.missing);
|
|
17822
17996
|
const names = [...new Set(allData.map((item) => item.name))];
|
|
17823
17997
|
const legend = useLegendSelection(names, legendSelected, onLegendSelectionChange);
|
|
17824
17998
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u997C\u56FE");
|
|
17825
|
-
const [hovered, setHovered] = (0,
|
|
17826
|
-
const [internalSelected, setInternalSelected] = (0,
|
|
17999
|
+
const [hovered, setHovered] = (0, import_react80.useState)();
|
|
18000
|
+
const [internalSelected, setInternalSelected] = (0, import_react80.useState)(() => [...defaultSelected ?? allData.filter((item) => item.selected).map((item) => item.name)]);
|
|
17827
18001
|
const selectedNames = selected ?? internalSelected;
|
|
17828
18002
|
const legacy = appearance === "macarons";
|
|
17829
18003
|
const colorNames = [...new Set(allData.filter((item) => item.showInLegend !== false).map((item) => item.name))];
|
|
@@ -18043,15 +18217,15 @@ var PieChart = (0, import_react79.forwardRef)(function PieChart2({ pulseRing, ca
|
|
|
18043
18217
|
});
|
|
18044
18218
|
var EMPTY_RADAR_INDICATORS = [];
|
|
18045
18219
|
var EMPTY_RADAR_SERIES = [];
|
|
18046
|
-
var RadarChart = (0,
|
|
18220
|
+
var RadarChart = (0, import_react80.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) {
|
|
18047
18221
|
const legacy = appearance === "macarons";
|
|
18048
|
-
const initialPanels = (0,
|
|
18049
|
-
const [sourcePanels, setSourcePanels] = (0,
|
|
18050
|
-
const [hoveredRadar, setHoveredRadar] = (0,
|
|
18051
|
-
const radarPaintId = `sia-radar-${(0,
|
|
18052
|
-
const radarDrag = (0,
|
|
18053
|
-
const [radarOffset, setRadarOffset] = (0,
|
|
18054
|
-
(0,
|
|
18222
|
+
const initialPanels = (0, import_react80.useMemo)(() => radars?.length ? radars : [{ indicators, series, levels }], [radars, indicators, series, levels]);
|
|
18223
|
+
const [sourcePanels, setSourcePanels] = (0, import_react80.useState)(initialPanels);
|
|
18224
|
+
const [hoveredRadar, setHoveredRadar] = (0, import_react80.useState)(null);
|
|
18225
|
+
const radarPaintId = `sia-radar-${(0, import_react80.useId)().replaceAll(":", "")}`;
|
|
18226
|
+
const radarDrag = (0, import_react80.useRef)(null);
|
|
18227
|
+
const [radarOffset, setRadarOffset] = (0, import_react80.useState)(null);
|
|
18228
|
+
(0, import_react80.useEffect)(() => {
|
|
18055
18229
|
setSourcePanels(initialPanels);
|
|
18056
18230
|
radarDrag.current = null;
|
|
18057
18231
|
setRadarOffset(null);
|
|
@@ -18205,7 +18379,7 @@ var RadarChart = (0, import_react79.forwardRef)(function RadarChart2({ indicator
|
|
|
18205
18379
|
})
|
|
18206
18380
|
] });
|
|
18207
18381
|
});
|
|
18208
|
-
var ChordChart = (0,
|
|
18382
|
+
var ChordChart = (0, import_react80.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) {
|
|
18209
18383
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u548C\u5F26");
|
|
18210
18384
|
if (/force|力导向|关系/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
|
|
18211
18385
|
GraphChart,
|
|
@@ -18278,11 +18452,11 @@ var ChordChart = (0, import_react79.forwardRef)(function ChordChart2({ nodes, li
|
|
|
18278
18452
|
})
|
|
18279
18453
|
] });
|
|
18280
18454
|
});
|
|
18281
|
-
var GraphChart = (0,
|
|
18455
|
+
var GraphChart = (0, import_react80.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) {
|
|
18282
18456
|
const categories = [...new Set(nodes.map((node) => node.category).filter((value) => Boolean(value)))];
|
|
18283
18457
|
const legend = useLegendSelection(categories, legendSelected, onLegendSelectionChange);
|
|
18284
18458
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, layout === "force" ? "\u529B\u5BFC\u5411" : "\u5173\u7CFB");
|
|
18285
|
-
const [roamReset, setRoamReset] = (0,
|
|
18459
|
+
const [roamReset, setRoamReset] = (0, import_react80.useState)(0);
|
|
18286
18460
|
const chartToolbox = typeof resolvedToolbox === "object" ? {
|
|
18287
18461
|
...resolvedToolbox,
|
|
18288
18462
|
onRestore: () => {
|
|
@@ -18291,23 +18465,23 @@ var GraphChart = (0, import_react79.forwardRef)(function GraphChart2({ nodes, li
|
|
|
18291
18465
|
resolvedToolbox.onRestore?.();
|
|
18292
18466
|
}
|
|
18293
18467
|
} : resolvedToolbox;
|
|
18294
|
-
const activeNodes = (0,
|
|
18295
|
-
const activeLinks = (0,
|
|
18468
|
+
const activeNodes = (0, import_react80.useMemo)(() => nodes.filter((node) => !node.category || legend.selected[node.category] !== false), [legend.selected, nodes]);
|
|
18469
|
+
const activeLinks = (0, import_react80.useMemo)(() => {
|
|
18296
18470
|
const activeIds = new Set(activeNodes.map((node) => node.id));
|
|
18297
18471
|
return links.filter((link) => activeIds.has(link.source) && activeIds.has(link.target));
|
|
18298
18472
|
}, [activeNodes, links]);
|
|
18299
18473
|
const progressive = progressiveForce && layout === "force" && props.animation !== false && !/chord|和弦/i.test(magicType);
|
|
18300
|
-
const calculatedPositions = (0,
|
|
18301
|
-
const [positions, setPositions] = (0,
|
|
18302
|
-
const [dragging, setDragging] = (0,
|
|
18303
|
-
const heldNode = (0,
|
|
18304
|
-
const [forceRestart, setForceRestart] = (0,
|
|
18305
|
-
(0,
|
|
18474
|
+
const calculatedPositions = (0, import_react80.useMemo)(() => graphLayout(activeNodes, activeLinks, layout === "force" && !progressive, forceOptions), [activeLinks, activeNodes, layout, forceOptions, progressive]);
|
|
18475
|
+
const [positions, setPositions] = (0, import_react80.useState)(calculatedPositions);
|
|
18476
|
+
const [dragging, setDragging] = (0, import_react80.useState)(null);
|
|
18477
|
+
const heldNode = (0, import_react80.useRef)(null);
|
|
18478
|
+
const [forceRestart, setForceRestart] = (0, import_react80.useState)(0);
|
|
18479
|
+
(0, import_react80.useEffect)(() => {
|
|
18306
18480
|
setPositions(calculatedPositions);
|
|
18307
18481
|
setDragging(null);
|
|
18308
18482
|
heldNode.current = null;
|
|
18309
18483
|
}, [calculatedPositions, roamReset]);
|
|
18310
|
-
(0,
|
|
18484
|
+
(0, import_react80.useEffect)(() => {
|
|
18311
18485
|
if (!progressive || activeNodes.length > (forceOptions?.maxNodes ?? 80)) return;
|
|
18312
18486
|
let frame = 0, remaining = Math.max(0, forceOptions?.iterations ?? 140), previous, carry = 0;
|
|
18313
18487
|
const tick = (time) => {
|
|
@@ -18425,7 +18599,7 @@ var GraphChart = (0, import_react79.forwardRef)(function GraphChart2({ nodes, li
|
|
|
18425
18599
|
] })
|
|
18426
18600
|
] });
|
|
18427
18601
|
});
|
|
18428
|
-
var ForceGraphChart = (0,
|
|
18602
|
+
var ForceGraphChart = (0, import_react80.forwardRef)(function ForceGraphChart2(props, ref) {
|
|
18429
18603
|
return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(GraphChart, { ...props, layout: "force", ref });
|
|
18430
18604
|
});
|
|
18431
18605
|
var ForceChart = ForceGraphChart;
|
|
@@ -18454,12 +18628,12 @@ function colorBetween(start, end, ratio) {
|
|
|
18454
18628
|
const to = read(end);
|
|
18455
18629
|
return `rgb(${from.map((value, index) => Math.round(value + ((to[index] ?? value) - value) * Math.max(0, Math.min(1, ratio)))).join(" ")})`;
|
|
18456
18630
|
}
|
|
18457
|
-
var MapChart = (0,
|
|
18458
|
-
const [internalSelected, setInternalSelected] = (0,
|
|
18631
|
+
var MapChart = (0, import_react80.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) {
|
|
18632
|
+
const [internalSelected, setInternalSelected] = (0, import_react80.useState)(() => [...defaultSelected ?? data.filter((item) => item.selected).map((item) => item.name)]);
|
|
18459
18633
|
const selectedNames = selected ?? internalSelected;
|
|
18460
|
-
const [hoveredRegion, setHoveredRegion] = (0,
|
|
18461
|
-
const [hoveredMarkPoint, setHoveredMarkPoint] = (0,
|
|
18462
|
-
const [internalHoveredValueRange, setHoveredValueRange] = (0,
|
|
18634
|
+
const [hoveredRegion, setHoveredRegion] = (0, import_react80.useState)();
|
|
18635
|
+
const [hoveredMarkPoint, setHoveredMarkPoint] = (0, import_react80.useState)();
|
|
18636
|
+
const [internalHoveredValueRange, setHoveredValueRange] = (0, import_react80.useState)();
|
|
18463
18637
|
const hoveredValueRange = emphasisValueRange ?? internalHoveredValueRange;
|
|
18464
18638
|
const roamControl = useMapRoam(roam, scaleLimit, wheelZoomFactors);
|
|
18465
18639
|
const { view } = roamControl;
|
|
@@ -18474,8 +18648,8 @@ var MapChart = (0, import_react79.forwardRef)(function MapChart2({ overlayProjec
|
|
|
18474
18648
|
const values = data.map((item) => item.value);
|
|
18475
18649
|
const minimum = valueDomain?.[0] ?? (values.length ? Math.min(...values) : 0);
|
|
18476
18650
|
const maximum = valueDomain?.[1] ?? (values.length ? Math.max(...values) : 1);
|
|
18477
|
-
const [internalVisualRange, setInternalVisualRange] = (0,
|
|
18478
|
-
(0,
|
|
18651
|
+
const [internalVisualRange, setInternalVisualRange] = (0, import_react80.useState)(() => [...defaultVisualRange ?? [minimum, maximum]]);
|
|
18652
|
+
(0, import_react80.useEffect)(() => {
|
|
18479
18653
|
if (!visualRange && !defaultVisualRange) setInternalVisualRange([minimum, maximum]);
|
|
18480
18654
|
}, [defaultVisualRange, maximum, minimum, visualRange]);
|
|
18481
18655
|
const currentVisualRange = visualRange ?? internalVisualRange;
|
|
@@ -18651,7 +18825,7 @@ var MapChart = (0, import_react79.forwardRef)(function MapChart2({ overlayProjec
|
|
|
18651
18825
|
roamController ? /* @__PURE__ */ (0, import_jsx_runtime81.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
|
|
18652
18826
|
] });
|
|
18653
18827
|
});
|
|
18654
|
-
var GaugeChart = (0,
|
|
18828
|
+
var GaugeChart = (0, import_react80.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) {
|
|
18655
18829
|
const count = Math.max(1, data.length);
|
|
18656
18830
|
const legacy = appearance === "macarons";
|
|
18657
18831
|
return /* @__PURE__ */ (0, import_jsx_runtime81.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) => {
|
|
@@ -18734,12 +18908,12 @@ var GaugeChart = (0, import_react79.forwardRef)(function GaugeChart2({ tooltipFo
|
|
|
18734
18908
|
] }, `${item.name}-${index}`);
|
|
18735
18909
|
}) });
|
|
18736
18910
|
});
|
|
18737
|
-
var FunnelChart = (0,
|
|
18911
|
+
var FunnelChart = (0, import_react80.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) {
|
|
18738
18912
|
const legacy = appearance === "macarons";
|
|
18739
|
-
const [activeFunnel, setActiveFunnel] = (0,
|
|
18740
|
-
const initialFunnels = (0,
|
|
18741
|
-
const [sourceFunnels, setSourceFunnels] = (0,
|
|
18742
|
-
(0,
|
|
18913
|
+
const [activeFunnel, setActiveFunnel] = (0, import_react80.useState)(null);
|
|
18914
|
+
const initialFunnels = (0, import_react80.useMemo)(() => series?.length ? series : [{ data, sort, gap, align, orientation }], [series, data, sort, gap, align, orientation]);
|
|
18915
|
+
const [sourceFunnels, setSourceFunnels] = (0, import_react80.useState)(initialFunnels);
|
|
18916
|
+
(0, import_react80.useEffect)(() => setSourceFunnels(initialFunnels), [initialFunnels]);
|
|
18743
18917
|
const allData = sourceFunnels.flatMap((funnel) => funnel.data);
|
|
18744
18918
|
const legendData = [...new Map(allData.map((item) => [item.name, item])).values()];
|
|
18745
18919
|
const legend = useLegendSelection(legendData.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -18830,7 +19004,7 @@ var FunnelChart = (0, import_react79.forwardRef)(function FunnelChart2({ data =
|
|
|
18830
19004
|
})
|
|
18831
19005
|
] });
|
|
18832
19006
|
});
|
|
18833
|
-
var HeatmapChart = (0,
|
|
19007
|
+
var HeatmapChart = (0, import_react80.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) {
|
|
18834
19008
|
const pointMode = points.length > 0;
|
|
18835
19009
|
const values = pointMode ? points.map((point) => point.value) : data.flatMap((row) => [...row]);
|
|
18836
19010
|
const minimum = values.length ? Math.min(...values) : 0;
|
|
@@ -18839,7 +19013,7 @@ var HeatmapChart = (0, import_react79.forwardRef)(function HeatmapChart2({ raste
|
|
|
18839
19013
|
const cellHeight = PLOT.height / Math.max(1, yLabels.length);
|
|
18840
19014
|
const pointXDomain = niceChartDomain(points.map((point) => point.x), false);
|
|
18841
19015
|
const pointYDomain = niceChartDomain(points.map((point) => point.y), false);
|
|
18842
|
-
const filterId = `sia-heat-${(0,
|
|
19016
|
+
const filterId = `sia-heat-${(0, import_react80.useId)().replaceAll(":", "")}`;
|
|
18843
19017
|
if (raster) return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(SiaChart, { ...props, ref, empty: !points.length, ariaLabel: props.ariaLabel ?? "\u50CF\u7D20\u70ED\u529B\u56FE", children: [
|
|
18844
19018
|
raster.backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("image", { href: raster.backgroundImage, x: 0, y: 0, width: raster.width, height: raster.height, preserveAspectRatio: "none", pointerEvents: "none" }) : null,
|
|
18845
19019
|
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)(HeatmapRaster, { width: raster.width, height: raster.height, points, options: raster })
|
|
@@ -18875,7 +19049,7 @@ var HeatmapChart = (0, import_react79.forwardRef)(function HeatmapChart2({ raste
|
|
|
18875
19049
|
] })
|
|
18876
19050
|
] });
|
|
18877
19051
|
});
|
|
18878
|
-
var ThemeRiverChart = (0,
|
|
19052
|
+
var ThemeRiverChart = (0, import_react80.forwardRef)(function ThemeRiverChart2({ categories, series, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, ...props }, ref) {
|
|
18879
19053
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
18880
19054
|
const activeSeries = series.filter((item) => legend.isSelected(item.name));
|
|
18881
19055
|
const totals = categories.map((_, index) => activeSeries.reduce((sum, item) => sum + Math.max(0, item.data[index] ?? 0), 0));
|
|
@@ -18913,8 +19087,8 @@ function eventTime(value) {
|
|
|
18913
19087
|
if (typeof value === "number") return value;
|
|
18914
19088
|
return Date.parse(/^\d{4}-\d{2}-\d{2}$/.test(value) ? value.replace(/-/g, "/") : value);
|
|
18915
19089
|
}
|
|
18916
|
-
var EventRiverChart = (0,
|
|
18917
|
-
const [restoreVersion, setRestoreVersion] = (0,
|
|
19090
|
+
var EventRiverChart = (0, import_react80.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) {
|
|
19091
|
+
const [restoreVersion, setRestoreVersion] = (0, import_react80.useState)(0);
|
|
18918
19092
|
const area = plot;
|
|
18919
19093
|
palette = palette ?? (appearance === "macarons" ? ["#2ec7c9", "#b6a2de"] : void 0);
|
|
18920
19094
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -18987,9 +19161,9 @@ function vennDistance(radiusA, radiusB, overlap) {
|
|
|
18987
19161
|
}
|
|
18988
19162
|
return (low + high) / 2;
|
|
18989
19163
|
}
|
|
18990
|
-
var VennChart = (0,
|
|
18991
|
-
const [sets, setSets] = (0,
|
|
18992
|
-
(0,
|
|
19164
|
+
var VennChart = (0, import_react80.forwardRef)(function VennChart2({ sets: initialSets, intersection: initialIntersection, appearance = "sia", emphasisColor, emphasisBorderColor, emphasisBorderWidth, onDataClick, palette, toolbox, ...props }, ref) {
|
|
19165
|
+
const [sets, setSets] = (0, import_react80.useState)(initialSets), [intersection, setIntersection] = (0, import_react80.useState)(initialIntersection), [active, setActive] = (0, import_react80.useState)();
|
|
19166
|
+
(0, import_react80.useEffect)(() => {
|
|
18993
19167
|
setSets(initialSets);
|
|
18994
19168
|
setIntersection(initialIntersection);
|
|
18995
19169
|
}, [initialSets, initialIntersection]);
|
|
@@ -19052,17 +19226,17 @@ function layoutTreemap(nodes, x, y, width, height, gap, maxDepth, depth = 0, see
|
|
|
19052
19226
|
});
|
|
19053
19227
|
return result;
|
|
19054
19228
|
}
|
|
19055
|
-
var TreemapChart = (0,
|
|
19056
|
-
const [path, setPath] = (0,
|
|
19057
|
-
const [sourceData, setSourceData] = (0,
|
|
19058
|
-
const [active, setActive] = (0,
|
|
19059
|
-
(0,
|
|
19229
|
+
var TreemapChart = (0, import_react80.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) {
|
|
19230
|
+
const [path, setPath] = (0, import_react80.useState)([]);
|
|
19231
|
+
const [sourceData, setSourceData] = (0, import_react80.useState)(data);
|
|
19232
|
+
const [active, setActive] = (0, import_react80.useState)();
|
|
19233
|
+
(0, import_react80.useEffect)(() => {
|
|
19060
19234
|
setSourceData(data);
|
|
19061
19235
|
setPath([]);
|
|
19062
19236
|
}, [data]);
|
|
19063
19237
|
const currentData = path.reduce((nodes, name) => nodes.find((node) => node.name === name)?.children ?? nodes, sourceData);
|
|
19064
19238
|
const top = drilldown && showBreadcrumb ? 52 : 28;
|
|
19065
|
-
const rectangles = (0,
|
|
19239
|
+
const rectangles = (0, import_react80.useMemo)(() => layoutTreemap(currentData, bounds?.x ?? 24, bounds?.y ?? top, bounds?.width ?? 672, bounds?.height ?? 336 - top, gap, maxDepth), [currentData, gap, maxDepth, top, bounds]);
|
|
19066
19240
|
const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChartDataEditor, { readOnly: toolbox.dataViewReadOnly, series: currentData.map((node) => ({ name: node.name, data: [treemapValue(node)] })), onApply: (values) => {
|
|
19067
19241
|
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);
|
|
19068
19242
|
setSourceData(update(sourceData, 0));
|
|
@@ -19130,15 +19304,15 @@ function flattenTree2(root, collapsed) {
|
|
|
19130
19304
|
visit(root, 0);
|
|
19131
19305
|
return { nodes, leafCount: Math.max(1, leafOrder), maxDepth: Math.max(0, ...nodes.map((item) => item.depth)) };
|
|
19132
19306
|
}
|
|
19133
|
-
var TreeChart = (0,
|
|
19134
|
-
const [sourceData, setSourceData] = (0,
|
|
19135
|
-
const [roamReset, setRoamReset] = (0,
|
|
19136
|
-
const [active, setActive] = (0,
|
|
19137
|
-
(0,
|
|
19307
|
+
var TreeChart = (0, import_react80.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) {
|
|
19308
|
+
const [sourceData, setSourceData] = (0, import_react80.useState)(data);
|
|
19309
|
+
const [roamReset, setRoamReset] = (0, import_react80.useState)(0);
|
|
19310
|
+
const [active, setActive] = (0, import_react80.useState)();
|
|
19311
|
+
(0, import_react80.useEffect)(() => {
|
|
19138
19312
|
setSourceData(data);
|
|
19139
19313
|
setActive(void 0);
|
|
19140
19314
|
}, [data]);
|
|
19141
|
-
const [collapsed, setCollapsed] = (0,
|
|
19315
|
+
const [collapsed, setCollapsed] = (0, import_react80.useState)(() => {
|
|
19142
19316
|
const result = /* @__PURE__ */ new Set();
|
|
19143
19317
|
const visit = (node) => {
|
|
19144
19318
|
if (node.collapsed) result.add(node.name);
|
|
@@ -19147,8 +19321,8 @@ var TreeChart = (0, import_react79.forwardRef)(function TreeChart2({ data, itemS
|
|
|
19147
19321
|
visit(data);
|
|
19148
19322
|
return result;
|
|
19149
19323
|
});
|
|
19150
|
-
const layout = (0,
|
|
19151
|
-
const fixedLayout = (0,
|
|
19324
|
+
const layout = (0, import_react80.useMemo)(() => flattenTree2(sourceData, collapsed), [collapsed, sourceData]);
|
|
19325
|
+
const fixedLayout = (0, import_react80.useMemo)(() => {
|
|
19152
19326
|
const visible = (node) => ({ ...node, children: collapsed.has(node.name) ? [] : node.children?.map(visible) });
|
|
19153
19327
|
return rootPosition ? layoutTreeNodes(visible(sourceData), { nodeSize, nodePadding, layerPadding, rootPosition, orientation }) : void 0;
|
|
19154
19328
|
}, [sourceData, collapsed, rootPosition, nodeSize, nodePadding, layerPadding, orientation]);
|
|
@@ -19218,15 +19392,15 @@ var TreeChart = (0, import_react79.forwardRef)(function TreeChart2({ data, itemS
|
|
|
19218
19392
|
})
|
|
19219
19393
|
] }) });
|
|
19220
19394
|
});
|
|
19221
|
-
var WordCloudChart = (0,
|
|
19222
|
-
const placements = (0,
|
|
19395
|
+
var WordCloudChart = (0, import_react80.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) {
|
|
19396
|
+
const placements = (0, import_react80.useMemo)(() => {
|
|
19223
19397
|
const context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
|
|
19224
19398
|
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) => {
|
|
19225
19399
|
context.font = `${word.fontWeight ?? fontWeight} ${size}px ${word.fontFamily ?? fontFamily ?? "Arial"}`;
|
|
19226
19400
|
return context.measureText(word.name).width;
|
|
19227
19401
|
} : void 0 });
|
|
19228
19402
|
}, [data, bounds, autoFit, areaSizing, maxFontSize, minFontSize, padding, rotations, shape, spiralStep, fontFamily, fontWeight]);
|
|
19229
|
-
(0,
|
|
19403
|
+
(0, import_react80.useEffect)(() => {
|
|
19230
19404
|
const present = new Set(placements.map((p) => p.index));
|
|
19231
19405
|
onLayout?.({ placed: placements.length, unplaced: data.filter((_, i) => !present.has(i)).map((item) => item.name) });
|
|
19232
19406
|
}, [placements, data, onLayout]);
|
|
@@ -19235,30 +19409,30 @@ var WordCloudChart = (0, import_react79.forwardRef)(function WordCloudChart2({ d
|
|
|
19235
19409
|
return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChartMark, { label: `${placement.item.name}\uFF0C${placement.item.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime81.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_runtime81.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}`);
|
|
19236
19410
|
}) });
|
|
19237
19411
|
});
|
|
19238
|
-
var MixedChart = (0,
|
|
19239
|
-
const plotClipId = `sia-mixed-plot-${(0,
|
|
19240
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
19241
|
-
const [geometry, setGeometry] = (0,
|
|
19242
|
-
const [pointerIndex, setPointerIndex] = (0,
|
|
19243
|
-
const [pointerAxisIndex, setPointerAxisIndex] = (0,
|
|
19244
|
-
const [motionRevision, setMotionRevision] = (0,
|
|
19245
|
-
const [stackMode, setStackMode] = (0,
|
|
19246
|
-
const lastPublished = (0,
|
|
19412
|
+
var MixedChart = (0, import_react80.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) {
|
|
19413
|
+
const plotClipId = `sia-mixed-plot-${(0, import_react80.useId)().replaceAll(":", "")}`;
|
|
19414
|
+
const [editableSeries, setEditableSeries] = (0, import_react80.useState)(sourceSeries);
|
|
19415
|
+
const [geometry, setGeometry] = (0, import_react80.useState)();
|
|
19416
|
+
const [pointerIndex, setPointerIndex] = (0, import_react80.useState)(null);
|
|
19417
|
+
const [pointerAxisIndex, setPointerAxisIndex] = (0, import_react80.useState)(0);
|
|
19418
|
+
const [motionRevision, setMotionRevision] = (0, import_react80.useState)(0);
|
|
19419
|
+
const [stackMode, setStackMode] = (0, import_react80.useState)();
|
|
19420
|
+
const lastPublished = (0, import_react80.useRef)(null);
|
|
19247
19421
|
const publishData = (next) => {
|
|
19248
19422
|
lastPublished.current = next;
|
|
19249
19423
|
onDataChange?.(next);
|
|
19250
19424
|
};
|
|
19251
|
-
const [islands, setIslands] = (0,
|
|
19252
|
-
const drag = (0,
|
|
19253
|
-
const [dragOffset, setDragOffset] = (0,
|
|
19254
|
-
(0,
|
|
19425
|
+
const [islands, setIslands] = (0, import_react80.useState)([]);
|
|
19426
|
+
const drag = (0, import_react80.useRef)(null);
|
|
19427
|
+
const [dragOffset, setDragOffset] = (0, import_react80.useState)();
|
|
19428
|
+
(0, import_react80.useEffect)(() => {
|
|
19255
19429
|
if (sourceSeries === lastPublished.current) return;
|
|
19256
19430
|
setEditableSeries(sourceSeries);
|
|
19257
19431
|
setIslands([]);
|
|
19258
19432
|
drag.current = null;
|
|
19259
19433
|
setDragOffset(void 0);
|
|
19260
19434
|
}, [sourceSeries]);
|
|
19261
|
-
const series = (0,
|
|
19435
|
+
const series = (0, import_react80.useMemo)(() => editableSeries.map((item) => geometry ? { ...item, type: geometry } : item), [editableSeries, geometry]);
|
|
19262
19436
|
const stacked = stackMode ?? sourceStacked;
|
|
19263
19437
|
const PLOT2 = plotBounds ?? { x: 62, y: 48, width: 628, height: 250 }, PLOT_BOTTOM2 = PLOT2.y + PLOT2.height;
|
|
19264
19438
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -19422,7 +19596,7 @@ var MixedChart = (0, import_react79.forwardRef)(function MixedChart2({ axisPoint
|
|
|
19422
19596
|
})
|
|
19423
19597
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(CartesianAxes, { categories, domain, band: categoryGap }),
|
|
19424
19598
|
activeIndex != null && activeIndex >= 0 && activeIndex < categories.length ? /* @__PURE__ */ (0, import_jsx_runtime81.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,
|
|
19425
|
-
tooltipTrigger === "axis" ? categories.map((name, index) => /* @__PURE__ */ (0,
|
|
19599
|
+
tooltipTrigger === "axis" ? categories.map((name, index) => /* @__PURE__ */ (0, import_react81.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_runtime81.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,
|
|
19426
19600
|
calculable ? activeSeries.flatMap((item) => item.data.map((value, index) => value === null ? /* @__PURE__ */ (0, import_jsx_runtime81.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_runtime81.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,
|
|
19427
19601
|
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("clipPath", { id: plotClipId, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("rect", { x: PLOT2.x, y: PLOT2.y, width: PLOT2.width, height: PLOT2.height }) }) }),
|
|
19428
19602
|
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)("g", { "data-mixed-plot": "", clipPath: clipPlot ? `url(#${plotClipId})` : void 0, children: renderSeries.map((item) => {
|
|
@@ -19461,7 +19635,7 @@ var MixedChart = (0, import_react79.forwardRef)(function MixedChart2({ axisPoint
|
|
|
19461
19635
|
const zero = linearScale(placement.start, [valueDomain[0], valueDomain[1]], [PLOT_BOTTOM2, PLOT2.y]);
|
|
19462
19636
|
const rectY = barSpacing?.pixelAlign ? Math.floor(Math.min(y, zero)) : Math.min(y, zero);
|
|
19463
19637
|
const rectHeight = barSpacing?.pixelAlign ? Math.ceil(Math.abs(zero - y)) : Math.abs(zero - y);
|
|
19464
|
-
return /* @__PURE__ */ (0, import_jsx_runtime81.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,
|
|
19638
|
+
return /* @__PURE__ */ (0, import_jsx_runtime81.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_react81.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_runtime81.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }), tooltipPoint: [props.tooltipProps?.placement === "axis" ? Math.round(categoryAt(index)) : x + width / 2, y], onPointerUp: (event) => {
|
|
19465
19639
|
if (!finishDrag(event)) onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event });
|
|
19466
19640
|
} }, /* @__PURE__ */ (0, import_jsx_runtime81.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}`);
|
|
19467
19641
|
})
|
|
@@ -19490,7 +19664,7 @@ var MixedChart = (0, import_react79.forwardRef)(function MixedChart2({ axisPoint
|
|
|
19490
19664
|
if (!placements[index]) return null;
|
|
19491
19665
|
const name = categoryName(index, item.categoryAxisIndex);
|
|
19492
19666
|
const value = item.data[index] ?? 0;
|
|
19493
|
-
return /* @__PURE__ */ (0,
|
|
19667
|
+
return /* @__PURE__ */ (0, import_react81.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_runtime81.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }), tooltipPoint: props.tooltipProps?.placement === "axis" ? [Math.round(point[0]), point[1]] : point, onPointerUp: (event) => {
|
|
19494
19668
|
if (!finishDrag(event)) onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event });
|
|
19495
19669
|
} }, /* @__PURE__ */ (0, import_jsx_runtime81.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 }));
|
|
19496
19670
|
})
|
|
@@ -19531,9 +19705,9 @@ var KLineChart = CandlestickChart;
|
|
|
19531
19705
|
|
|
19532
19706
|
// src/components/LineShareChart.tsx
|
|
19533
19707
|
var import_jsx_runtime82 = require("react/jsx-runtime");
|
|
19534
|
-
var LineShareChart = (0,
|
|
19535
|
-
const [selected, setSelected] = (0,
|
|
19536
|
-
const [maskHovered, setMaskHovered] = (0,
|
|
19708
|
+
var LineShareChart = (0, import_react82.forwardRef)(function LineShareChart2({ data, lineColor = "#2ec7c9", shareColor = "#b6a2de", ...props }, ref) {
|
|
19709
|
+
const [selected, setSelected] = (0, import_react82.useState)(null);
|
|
19710
|
+
const [maskHovered, setMaskHovered] = (0, import_react82.useState)(false);
|
|
19537
19711
|
const width = props.viewBoxSize?.[0] ?? 900, height = props.viewBoxSize?.[1] ?? 450;
|
|
19538
19712
|
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;
|
|
19539
19713
|
const maximum = data.reduce((best, item2, i) => item2.value >= data[best].value ? i : best, 0);
|
|
@@ -19611,16 +19785,16 @@ function paddedValueExtent(values, padding = 0.05) {
|
|
|
19611
19785
|
}
|
|
19612
19786
|
|
|
19613
19787
|
// src/components/XYChart.tsx
|
|
19614
|
-
var
|
|
19788
|
+
var import_react83 = require("react");
|
|
19615
19789
|
var import_jsx_runtime83 = require("react/jsx-runtime");
|
|
19616
|
-
var XYChart = (0,
|
|
19617
|
-
const [series, setSeries] = (0,
|
|
19618
|
-
const [hidden, setHidden] = (0,
|
|
19619
|
-
const [crosshair, setCrosshair] = (0,
|
|
19620
|
-
const [drag, setDrag] = (0,
|
|
19621
|
-
const [geometry, setGeometry] = (0,
|
|
19622
|
-
const [zoom, setZoom] = (0,
|
|
19623
|
-
(0,
|
|
19790
|
+
var XYChart = (0, import_react83.forwardRef)(function XYChart2({ series: source, xDomain, yDomain, animationProgress, calculable = false, onDataChange, xAxisType = "value", xFormatter, tooltipFormatter, dataZoom = false, defaultZoom = [0, 100], onZoomChange, toolbox, ...props }, ref) {
|
|
19791
|
+
const [series, setSeries] = (0, import_react83.useState)(source);
|
|
19792
|
+
const [hidden, setHidden] = (0, import_react83.useState)([]);
|
|
19793
|
+
const [crosshair, setCrosshair] = (0, import_react83.useState)();
|
|
19794
|
+
const [drag, setDrag] = (0, import_react83.useState)();
|
|
19795
|
+
const [geometry, setGeometry] = (0, import_react83.useState)();
|
|
19796
|
+
const [zoom, setZoom] = (0, import_react83.useState)(defaultZoom);
|
|
19797
|
+
(0, import_react83.useEffect)(() => setSeries(source), [source]);
|
|
19624
19798
|
const window2 = dataZoom || xAxisType === "time" ? scatterValueWindow(series.flatMap((item) => item.data.map((point) => point[0])), dataZoom ? zoom : [0, 100]) : void 0;
|
|
19625
19799
|
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 }));
|
|
19626
19800
|
const width = props.viewBoxSize?.[0] ?? 663, height = props.viewBoxSize?.[1] ?? 379;
|
|
@@ -19749,7 +19923,7 @@ var XYChart = (0, import_react82.forwardRef)(function XYChart2({ series: source,
|
|
|
19749
19923
|
});
|
|
19750
19924
|
|
|
19751
19925
|
// src/components/ChartMapOverlay.tsx
|
|
19752
|
-
var
|
|
19926
|
+
var import_react84 = require("react");
|
|
19753
19927
|
|
|
19754
19928
|
// src/components/mapOverlayHost.ts
|
|
19755
19929
|
function observeMapOverlayHost(host, onChange) {
|
|
@@ -19765,9 +19939,9 @@ function observeMapOverlayHost(host, onChange) {
|
|
|
19765
19939
|
if (stopped) return;
|
|
19766
19940
|
stopped = true;
|
|
19767
19941
|
try {
|
|
19768
|
-
for (const
|
|
19942
|
+
for (const cleanup2 of cleanups.splice(0).reverse()) {
|
|
19769
19943
|
try {
|
|
19770
|
-
|
|
19944
|
+
cleanup2();
|
|
19771
19945
|
} catch {
|
|
19772
19946
|
}
|
|
19773
19947
|
}
|
|
@@ -19788,11 +19962,11 @@ function observeMapOverlayHost(host, onChange) {
|
|
|
19788
19962
|
// src/components/ChartMapOverlay.tsx
|
|
19789
19963
|
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
19790
19964
|
function ChartMapOverlay({ createHost, children, className, style, ariaLabel = "\u5730\u56FE\u53E0\u52A0\u56FE\u8868", onError }) {
|
|
19791
|
-
const container = (0,
|
|
19792
|
-
const errorHandler = (0,
|
|
19965
|
+
const container = (0, import_react84.useRef)(null);
|
|
19966
|
+
const errorHandler = (0, import_react84.useRef)(onError);
|
|
19793
19967
|
errorHandler.current = onError;
|
|
19794
|
-
const [snapshot, setSnapshot] = (0,
|
|
19795
|
-
(0,
|
|
19968
|
+
const [snapshot, setSnapshot] = (0, import_react84.useState)();
|
|
19969
|
+
(0, import_react84.useEffect)(() => {
|
|
19796
19970
|
setSnapshot(void 0);
|
|
19797
19971
|
if (!container.current) return;
|
|
19798
19972
|
try {
|
|
@@ -19869,7 +20043,7 @@ function createBaiduMapHost(element, sdk, options) {
|
|
|
19869
20043
|
}
|
|
19870
20044
|
|
|
19871
20045
|
// src/components/SelectionPanel.tsx
|
|
19872
|
-
var
|
|
20046
|
+
var import_react85 = require("react");
|
|
19873
20047
|
var import_jsx_runtime85 = require("react/jsx-runtime");
|
|
19874
20048
|
function SelectionPanel({
|
|
19875
20049
|
options,
|
|
@@ -19888,23 +20062,23 @@ function SelectionPanel({
|
|
|
19888
20062
|
maxHeight = 250,
|
|
19889
20063
|
autoFocusSearch = false
|
|
19890
20064
|
}) {
|
|
19891
|
-
const [localSearch, setLocalSearch] = (0,
|
|
20065
|
+
const [localSearch, setLocalSearch] = (0, import_react85.useState)("");
|
|
19892
20066
|
const search = searchValue ?? localSearch;
|
|
19893
|
-
const [scrollTop, setScrollTop] = (0,
|
|
19894
|
-
const [active, setActive] = (0,
|
|
19895
|
-
const listRef = (0,
|
|
19896
|
-
const id = (0,
|
|
19897
|
-
const selected = (0,
|
|
20067
|
+
const [scrollTop, setScrollTop] = (0, import_react85.useState)(0);
|
|
20068
|
+
const [active, setActive] = (0, import_react85.useState)();
|
|
20069
|
+
const listRef = (0, import_react85.useRef)(null);
|
|
20070
|
+
const id = (0, import_react85.useId)();
|
|
20071
|
+
const selected = (0, import_react85.useMemo)(() => new Set(value), [value]);
|
|
19898
20072
|
const count = Math.max(1, Math.floor(columns));
|
|
19899
|
-
const allOptions = (0,
|
|
20073
|
+
const allOptions = (0, import_react85.useMemo)(() => {
|
|
19900
20074
|
const known = new Set(options.filter((option) => option.optionType !== "divider").map((option) => option.value));
|
|
19901
20075
|
return [...value.filter((item) => !known.has(item)).map((item) => ({ value: item, label: String(item), group: "\u81EA\u5B9A\u4E49\u503C" })), ...options];
|
|
19902
20076
|
}, [options, value]);
|
|
19903
|
-
const filtered = (0,
|
|
20077
|
+
const filtered = (0, import_react85.useMemo)(
|
|
19904
20078
|
() => allOptions.filter((option) => (!selectedOnly || selected.has(option.value)) && (!search || option.optionType !== "divider" && [option.label, option.value].some((text) => String(text ?? "").toLowerCase().includes(search.toLowerCase())))),
|
|
19905
20079
|
[allOptions, selectedOnly, selected, search]
|
|
19906
20080
|
);
|
|
19907
|
-
const rows = (0,
|
|
20081
|
+
const rows = (0, import_react85.useMemo)(() => {
|
|
19908
20082
|
const groups = /* @__PURE__ */ new Map();
|
|
19909
20083
|
filtered.forEach((option) => {
|
|
19910
20084
|
const items = groups.get(option.group) ?? [];
|
|
@@ -19930,7 +20104,7 @@ function SelectionPanel({
|
|
|
19930
20104
|
const virtual = filtered.length > 100;
|
|
19931
20105
|
const renderedRows = virtual ? rows.filter((row) => row.top + row.height >= scrollTop - 100 && row.top <= scrollTop + maxHeight + 100) : rows;
|
|
19932
20106
|
const enabled = filtered.filter((option) => !option.disabled && option.optionType !== "divider");
|
|
19933
|
-
(0,
|
|
20107
|
+
(0, import_react85.useEffect)(() => {
|
|
19934
20108
|
setScrollTop(0);
|
|
19935
20109
|
if (listRef.current) listRef.current.scrollTop = 0;
|
|
19936
20110
|
setActive(void 0);
|
|
@@ -20040,9 +20214,9 @@ function SelectionPanel({
|
|
|
20040
20214
|
}
|
|
20041
20215
|
|
|
20042
20216
|
// src/components/InputSelect.tsx
|
|
20043
|
-
var
|
|
20217
|
+
var import_react86 = require("react");
|
|
20044
20218
|
var import_jsx_runtime86 = require("react/jsx-runtime");
|
|
20045
|
-
var InputSelect = (0,
|
|
20219
|
+
var InputSelect = (0, import_react86.forwardRef)(function InputSelect2({
|
|
20046
20220
|
options,
|
|
20047
20221
|
value,
|
|
20048
20222
|
defaultValue,
|
|
@@ -20067,22 +20241,22 @@ var InputSelect = (0, import_react85.forwardRef)(function InputSelect2({
|
|
|
20067
20241
|
onOpenChange,
|
|
20068
20242
|
...inputProps
|
|
20069
20243
|
}, forwardedRef) {
|
|
20070
|
-
const [internal, setInternal] = (0,
|
|
20244
|
+
const [internal, setInternal] = (0, import_react86.useState)(defaultValue);
|
|
20071
20245
|
const current = value !== void 0 ? value : internal;
|
|
20072
20246
|
const values = current == null ? [] : Array.isArray(current) ? current : [current];
|
|
20073
20247
|
const text = values.map((item) => displayField === "label" ? String(options.find((option) => option.optionType !== "divider" && option.value === item)?.label ?? item) : String(item)).join(",");
|
|
20074
|
-
const [draft, setDraft] = (0,
|
|
20075
|
-
(0,
|
|
20248
|
+
const [draft, setDraft] = (0, import_react86.useState)(text);
|
|
20249
|
+
(0, import_react86.useEffect)(() => {
|
|
20076
20250
|
setDraft(text);
|
|
20077
20251
|
}, [text, current]);
|
|
20078
|
-
const [open, setOpen] = (0,
|
|
20079
|
-
const [search, setSearch] = (0,
|
|
20080
|
-
const [modalOpen, setModalOpen] = (0,
|
|
20081
|
-
const [modalValues, setModalValues] = (0,
|
|
20082
|
-
const [selectedOnly, setSelectedOnly] = (0,
|
|
20083
|
-
const rootRef = (0,
|
|
20084
|
-
const popupRef = (0,
|
|
20085
|
-
const inputRef = (0,
|
|
20252
|
+
const [open, setOpen] = (0, import_react86.useState)(false);
|
|
20253
|
+
const [search, setSearch] = (0, import_react86.useState)("");
|
|
20254
|
+
const [modalOpen, setModalOpen] = (0, import_react86.useState)(false);
|
|
20255
|
+
const [modalValues, setModalValues] = (0, import_react86.useState)([]);
|
|
20256
|
+
const [selectedOnly, setSelectedOnly] = (0, import_react86.useState)(false);
|
|
20257
|
+
const rootRef = (0, import_react86.useRef)(null);
|
|
20258
|
+
const popupRef = (0, import_react86.useRef)(null);
|
|
20259
|
+
const inputRef = (0, import_react86.useRef)(null);
|
|
20086
20260
|
const config = typeof enableModal === "object" ? enableModal : {};
|
|
20087
20261
|
function changeOpen(next) {
|
|
20088
20262
|
if (next && (disabled || loading)) return;
|
|
@@ -20102,7 +20276,7 @@ var InputSelect = (0, import_react85.forwardRef)(function InputSelect2({
|
|
|
20102
20276
|
inputRef.current?.focus();
|
|
20103
20277
|
}
|
|
20104
20278
|
}
|
|
20105
|
-
(0,
|
|
20279
|
+
(0, import_react86.useEffect)(() => {
|
|
20106
20280
|
if (!open) return;
|
|
20107
20281
|
const outside = (event) => {
|
|
20108
20282
|
if (!rootRef.current?.contains(event.target) && !popupRef.current?.contains(event.target)) changeOpen(false);
|
|
@@ -20110,7 +20284,7 @@ var InputSelect = (0, import_react85.forwardRef)(function InputSelect2({
|
|
|
20110
20284
|
document.addEventListener("pointerdown", outside);
|
|
20111
20285
|
return () => document.removeEventListener("pointerdown", outside);
|
|
20112
20286
|
}, [open, onOpenChange]);
|
|
20113
|
-
(0,
|
|
20287
|
+
(0, import_react86.useEffect)(() => {
|
|
20114
20288
|
if (disabled || loading) {
|
|
20115
20289
|
changeOpen(false);
|
|
20116
20290
|
setModalOpen(false);
|