@sia.soul/sia-react-ui 0.1.51 → 0.1.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-FJ3FP4YV.js → chunk-MFR2FYQA.js} +4 -1
- package/dist/{core-murmERqF.d.ts → core-DXJ4b0lT.d.ts} +2 -0
- package/dist/{core-KIaXZ4_O.d.cts → core-DtGYdU61.d.cts} +2 -0
- package/dist/core.cjs +4 -1
- package/dist/core.css +22 -4
- package/dist/core.d.cts +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/core.js +1 -1
- package/dist/index.cjs +516 -433
- package/dist/index.css +22 -4
- package/dist/index.d.cts +16 -3
- package/dist/index.d.ts +16 -3
- package/dist/index.js +121 -41
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -8769,6 +8769,7 @@ var UploadRoot = (0, import_react37.forwardRef)(function UploadRoot2({
|
|
|
8769
8769
|
downloadRequest,
|
|
8770
8770
|
itemRender,
|
|
8771
8771
|
children,
|
|
8772
|
+
onChoose,
|
|
8772
8773
|
className = "",
|
|
8773
8774
|
style,
|
|
8774
8775
|
onDragOver,
|
|
@@ -8971,7 +8972,9 @@ var UploadRoot = (0, import_react37.forwardRef)(function UploadRoot2({
|
|
|
8971
8972
|
event.preventDefault();
|
|
8972
8973
|
ingest(selected.map((file) => ({ file, path: file.name })));
|
|
8973
8974
|
}
|
|
8974
|
-
const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "sia-upload__trigger", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { className: "sia-upload__choose", "aria-label": compactCard ? directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6" : void 0, disabled: disabled || full, onClick: () =>
|
|
8975
|
+
const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "sia-upload__trigger", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { className: "sia-upload__choose", "aria-label": compactCard ? directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6" : void 0, disabled: disabled || full, onClick: () => {
|
|
8976
|
+
if (!disabled && !full && onChoose?.() !== false) inputRef.current?.click();
|
|
8977
|
+
}, children: children ?? (listType === "picture-card" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
|
|
8975
8978
|
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "plus", size: 24 }),
|
|
8976
8979
|
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "\u4E0A\u4F20\u56FE\u7247" })
|
|
8977
8980
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
|
|
@@ -12001,8 +12004,86 @@ function TableCellContent({ children, ellipsis, title }) {
|
|
|
12001
12004
|
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref, className: "sia-table__cell-content", "data-custom-content": customContent || void 0, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children: title ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Tooltip, { title, className: "sia-table__cell-tooltip", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children }) }) : children });
|
|
12002
12005
|
}
|
|
12003
12006
|
|
|
12004
|
-
// src/components/Table/
|
|
12007
|
+
// src/components/Table/useRemainingHeight.ts
|
|
12005
12008
|
var import_react50 = require("react");
|
|
12009
|
+
function useRemainingHeight(rootRef, options) {
|
|
12010
|
+
const [height, setHeight] = (0, import_react50.useState)();
|
|
12011
|
+
const enabled = !!options;
|
|
12012
|
+
const container = typeof options === "object" ? options.container : void 0;
|
|
12013
|
+
const bottomOffset = typeof options === "object" ? options.bottomOffset ?? 0 : 0;
|
|
12014
|
+
const minHeight = typeof options === "object" ? options.minHeight ?? 0 : 0;
|
|
12015
|
+
(0, import_react50.useLayoutEffect)(() => {
|
|
12016
|
+
const root = rootRef.current;
|
|
12017
|
+
if (!enabled || !root) return;
|
|
12018
|
+
const win = root.ownerDocument.defaultView;
|
|
12019
|
+
if (!win) return;
|
|
12020
|
+
let frame = 0;
|
|
12021
|
+
let disposed = false;
|
|
12022
|
+
const observed = /* @__PURE__ */ new Set();
|
|
12023
|
+
const observe = (element) => {
|
|
12024
|
+
if (observed.has(element)) return;
|
|
12025
|
+
observed.add(element);
|
|
12026
|
+
resize?.observe(element);
|
|
12027
|
+
};
|
|
12028
|
+
const measure = () => {
|
|
12029
|
+
frame = 0;
|
|
12030
|
+
if (disposed || !root.isConnected || !root.getClientRects().length) return;
|
|
12031
|
+
const target = container?.();
|
|
12032
|
+
if (container && (!target || !target.getClientRects().length)) return;
|
|
12033
|
+
let branch = root;
|
|
12034
|
+
while (branch.parentElement) {
|
|
12035
|
+
const parent = branch.parentElement;
|
|
12036
|
+
observe(parent);
|
|
12037
|
+
for (const sibling of parent.children) if (sibling !== branch) observe(sibling);
|
|
12038
|
+
branch = parent;
|
|
12039
|
+
}
|
|
12040
|
+
if (target) observe(target);
|
|
12041
|
+
const viewport = win.visualViewport;
|
|
12042
|
+
const bottom = target ? target.getBoundingClientRect().top + target.clientTop + target.clientHeight - (parseFloat(win.getComputedStyle(target).paddingBottom) || 0) : viewport ? viewport.offsetTop + viewport.height : win.innerHeight;
|
|
12043
|
+
const next = Math.max(0, minHeight, Math.floor(bottom - root.getBoundingClientRect().top - bottomOffset));
|
|
12044
|
+
setHeight((previous) => previous === next ? previous : next);
|
|
12045
|
+
};
|
|
12046
|
+
const schedule = () => {
|
|
12047
|
+
if (!disposed && !frame) frame = win.requestAnimationFrame(measure);
|
|
12048
|
+
};
|
|
12049
|
+
const onScroll = (event) => {
|
|
12050
|
+
if (event.target instanceof Node && root.contains(event.target)) return;
|
|
12051
|
+
schedule();
|
|
12052
|
+
};
|
|
12053
|
+
const onMotionEnd = (event) => {
|
|
12054
|
+
if (event.target instanceof Element && event.target.contains(root)) schedule();
|
|
12055
|
+
};
|
|
12056
|
+
const resize = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(schedule);
|
|
12057
|
+
const mutation = new MutationObserver(schedule);
|
|
12058
|
+
for (let node = root.parentElement; node; node = node.parentElement) {
|
|
12059
|
+
mutation.observe(node, { attributes: true, attributeFilter: ["style", "class", "hidden"], childList: true });
|
|
12060
|
+
}
|
|
12061
|
+
measure();
|
|
12062
|
+
schedule();
|
|
12063
|
+
win.addEventListener("resize", schedule);
|
|
12064
|
+
win.addEventListener("scroll", onScroll, true);
|
|
12065
|
+
win.addEventListener("transitionend", onMotionEnd, true);
|
|
12066
|
+
win.addEventListener("animationend", onMotionEnd, true);
|
|
12067
|
+
win.visualViewport?.addEventListener("resize", schedule);
|
|
12068
|
+
win.visualViewport?.addEventListener("scroll", schedule);
|
|
12069
|
+
return () => {
|
|
12070
|
+
disposed = true;
|
|
12071
|
+
win.cancelAnimationFrame(frame);
|
|
12072
|
+
resize?.disconnect();
|
|
12073
|
+
mutation.disconnect();
|
|
12074
|
+
win.removeEventListener("resize", schedule);
|
|
12075
|
+
win.removeEventListener("scroll", onScroll, true);
|
|
12076
|
+
win.removeEventListener("transitionend", onMotionEnd, true);
|
|
12077
|
+
win.removeEventListener("animationend", onMotionEnd, true);
|
|
12078
|
+
win.visualViewport?.removeEventListener("resize", schedule);
|
|
12079
|
+
win.visualViewport?.removeEventListener("scroll", schedule);
|
|
12080
|
+
};
|
|
12081
|
+
}, [rootRef, enabled, container, bottomOffset, minHeight]);
|
|
12082
|
+
return enabled ? height : void 0;
|
|
12083
|
+
}
|
|
12084
|
+
|
|
12085
|
+
// src/components/Table/TableCanvasLayer.tsx
|
|
12086
|
+
var import_react51 = require("react");
|
|
12006
12087
|
|
|
12007
12088
|
// src/components/Table/utils.ts
|
|
12008
12089
|
var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
|
|
@@ -12057,8 +12138,8 @@ function toTablePageParams(current, pageSize) {
|
|
|
12057
12138
|
// src/components/Table/TableCanvasLayer.tsx
|
|
12058
12139
|
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
12059
12140
|
function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHeight }) {
|
|
12060
|
-
const canvasRef = (0,
|
|
12061
|
-
(0,
|
|
12141
|
+
const canvasRef = (0, import_react51.useRef)(null);
|
|
12142
|
+
(0, import_react51.useLayoutEffect)(() => {
|
|
12062
12143
|
const canvas = canvasRef.current;
|
|
12063
12144
|
const scroller = viewport.current;
|
|
12064
12145
|
if (!canvas || !scroller) return;
|
|
@@ -12185,10 +12266,10 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
|
|
|
12185
12266
|
}
|
|
12186
12267
|
|
|
12187
12268
|
// src/components/Table/Table.tsx
|
|
12188
|
-
var
|
|
12269
|
+
var import_react53 = require("react");
|
|
12189
12270
|
|
|
12190
12271
|
// src/components/Table/plugins.tsx
|
|
12191
|
-
var
|
|
12272
|
+
var import_react52 = require("react");
|
|
12192
12273
|
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
12193
12274
|
function TableCheckbox({
|
|
12194
12275
|
checked,
|
|
@@ -12815,7 +12896,7 @@ function TableSelectedItemsPanel({
|
|
|
12815
12896
|
onRemove,
|
|
12816
12897
|
onClear
|
|
12817
12898
|
}) {
|
|
12818
|
-
const [showAll, setShowAll] = (0,
|
|
12899
|
+
const [showAll, setShowAll] = (0, import_react52.useState)(false);
|
|
12819
12900
|
const visibleEntries = showAll ? entries : entries.slice(0, maxCount2);
|
|
12820
12901
|
const hiddenCount = Math.max(0, entries.length - visibleEntries.length);
|
|
12821
12902
|
const baseColumnMap = new Map(
|
|
@@ -13214,10 +13295,10 @@ function TableFilterControl({
|
|
|
13214
13295
|
placeholder,
|
|
13215
13296
|
onApply
|
|
13216
13297
|
}) {
|
|
13217
|
-
const [open, setOpen] = (0,
|
|
13218
|
-
const [draft, setDraft] = (0,
|
|
13298
|
+
const [open, setOpen] = (0, import_react52.useState)(false);
|
|
13299
|
+
const [draft, setDraft] = (0, import_react52.useState)(value);
|
|
13219
13300
|
const label = getColumnLabel(column);
|
|
13220
|
-
(0,
|
|
13301
|
+
(0, import_react52.useEffect)(() => {
|
|
13221
13302
|
if (open) setDraft(value);
|
|
13222
13303
|
}, [open, value]);
|
|
13223
13304
|
const apply = (nextValue) => {
|
|
@@ -13642,17 +13723,17 @@ function EditableTableCell({
|
|
|
13642
13723
|
trigger
|
|
13643
13724
|
}) {
|
|
13644
13725
|
const config = typeof editable === "object" ? editable : { type: "input" };
|
|
13645
|
-
const [editValue, setEditValue] = (0,
|
|
13646
|
-
const [saving, setSaving] = (0,
|
|
13647
|
-
const inputRef = (0,
|
|
13648
|
-
const editorRef = (0,
|
|
13649
|
-
const editValueRef = (0,
|
|
13650
|
-
const savingRef = (0,
|
|
13651
|
-
const saveRef = (0,
|
|
13726
|
+
const [editValue, setEditValue] = (0, import_react52.useState)(value);
|
|
13727
|
+
const [saving, setSaving] = (0, import_react52.useState)(false);
|
|
13728
|
+
const inputRef = (0, import_react52.useRef)(null);
|
|
13729
|
+
const editorRef = (0, import_react52.useRef)(null);
|
|
13730
|
+
const editValueRef = (0, import_react52.useRef)(value);
|
|
13731
|
+
const savingRef = (0, import_react52.useRef)(false);
|
|
13732
|
+
const saveRef = (0, import_react52.useRef)(
|
|
13652
13733
|
async () => {
|
|
13653
13734
|
}
|
|
13654
13735
|
);
|
|
13655
|
-
(0,
|
|
13736
|
+
(0, import_react52.useEffect)(() => {
|
|
13656
13737
|
if (!active) return;
|
|
13657
13738
|
editValueRef.current = value;
|
|
13658
13739
|
setEditValue(value);
|
|
@@ -13683,7 +13764,7 @@ function EditableTableCell({
|
|
|
13683
13764
|
}
|
|
13684
13765
|
}
|
|
13685
13766
|
saveRef.current = save;
|
|
13686
|
-
(0,
|
|
13767
|
+
(0, import_react52.useEffect)(() => {
|
|
13687
13768
|
if (!active || config.type === "select" || config.type === "custom") return;
|
|
13688
13769
|
const handleOutsidePointerDown = (event) => {
|
|
13689
13770
|
const target = event.target;
|
|
@@ -13988,15 +14069,15 @@ function ColumnSettingPanel({
|
|
|
13988
14069
|
onClose,
|
|
13989
14070
|
onApply
|
|
13990
14071
|
}) {
|
|
13991
|
-
const [draft, setDraft] = (0,
|
|
13992
|
-
const listRef = (0,
|
|
13993
|
-
const cancelDrag = (0,
|
|
13994
|
-
const [preview, setPreview] = (0,
|
|
13995
|
-
(0,
|
|
14072
|
+
const [draft, setDraft] = (0, import_react52.useState)(items);
|
|
14073
|
+
const listRef = (0, import_react52.useRef)(null);
|
|
14074
|
+
const cancelDrag = (0, import_react52.useRef)(null);
|
|
14075
|
+
const [preview, setPreview] = (0, import_react52.useState)(null);
|
|
14076
|
+
(0, import_react52.useEffect)(() => {
|
|
13996
14077
|
cancelDrag.current?.();
|
|
13997
14078
|
if (open) setDraft(orderColumnSettings(items));
|
|
13998
14079
|
}, [items, open]);
|
|
13999
|
-
(0,
|
|
14080
|
+
(0, import_react52.useEffect)(() => () => cancelDrag.current?.(), []);
|
|
14000
14081
|
const labels = new Map(
|
|
14001
14082
|
flattenTableColumns(columns).map((column) => [
|
|
14002
14083
|
column.key,
|
|
@@ -14521,7 +14602,7 @@ function tableExportText(node) {
|
|
|
14521
14602
|
if (typeof node === "string" || typeof node === "number" || typeof node === "bigint")
|
|
14522
14603
|
return String(node);
|
|
14523
14604
|
if (Array.isArray(node)) return node.map(tableExportText).join("");
|
|
14524
|
-
if ((0,
|
|
14605
|
+
if ((0, import_react52.isValidElement)(node))
|
|
14525
14606
|
return tableExportText(node.props.children);
|
|
14526
14607
|
return "";
|
|
14527
14608
|
}
|
|
@@ -14620,7 +14701,7 @@ var SIZE_ROW_HEIGHT = { small: 28, medium: 36, large: 46 };
|
|
|
14620
14701
|
function getHeaderTitleText(content) {
|
|
14621
14702
|
if (typeof content === "string" || typeof content === "number") return String(content);
|
|
14622
14703
|
if (Array.isArray(content)) return content.map(getHeaderTitleText).join("");
|
|
14623
|
-
if ((0,
|
|
14704
|
+
if ((0, import_react53.isValidElement)(content)) return getHeaderTitleText(content.props.children);
|
|
14624
14705
|
return "";
|
|
14625
14706
|
}
|
|
14626
14707
|
function getColumnDepth(columns) {
|
|
@@ -14700,7 +14781,7 @@ function getTableHorizontalMetrics(viewport, table) {
|
|
|
14700
14781
|
const contentWidth = Math.max(viewport.clientWidth, table?.getBoundingClientRect().width ?? viewport.clientWidth);
|
|
14701
14782
|
return { contentWidth, maxLeft: Math.max(0, contentWidth - viewport.clientWidth) };
|
|
14702
14783
|
}
|
|
14703
|
-
var TableBodyRow = (0,
|
|
14784
|
+
var TableBodyRow = (0, import_react53.memo)(function TableBodyRow2({
|
|
14704
14785
|
canvas,
|
|
14705
14786
|
visibleColumns,
|
|
14706
14787
|
row,
|
|
@@ -14791,6 +14872,7 @@ function TableInner(props, ref) {
|
|
|
14791
14872
|
emptyText = "\u6682\u65E0\u6570\u636E",
|
|
14792
14873
|
height,
|
|
14793
14874
|
tableHeight,
|
|
14875
|
+
fillRemaining,
|
|
14794
14876
|
size = "medium",
|
|
14795
14877
|
bordered = true,
|
|
14796
14878
|
rowBordered = true,
|
|
@@ -14815,23 +14897,24 @@ function TableInner(props, ref) {
|
|
|
14815
14897
|
style,
|
|
14816
14898
|
...htmlProps
|
|
14817
14899
|
} = props;
|
|
14818
|
-
const rootRef = (0,
|
|
14819
|
-
const
|
|
14820
|
-
const
|
|
14900
|
+
const rootRef = (0, import_react53.useRef)(null);
|
|
14901
|
+
const remainingHeight = useRemainingHeight(rootRef, height == null && tableHeight == null ? fillRemaining : false);
|
|
14902
|
+
const scrollRef = (0, import_react53.useRef)(null);
|
|
14903
|
+
const tableRef = (0, import_react53.useRef)(null);
|
|
14821
14904
|
useScrollbarProximity();
|
|
14822
|
-
const scrollbarDragRef = (0,
|
|
14823
|
-
const [internalLoading, setInternalLoading] = (0,
|
|
14824
|
-
const [scrollTop, setScrollTop] = (0,
|
|
14825
|
-
const [scrollLeft, setScrollLeft] = (0,
|
|
14826
|
-
const [viewportHeight, setViewportHeight] = (0,
|
|
14827
|
-
const [viewportWidth, setViewportWidth] = (0,
|
|
14828
|
-
const [autoColumnWidths, setAutoColumnWidths] = (0,
|
|
14829
|
-
const getRowKey = (0,
|
|
14830
|
-
const builtInResizePlugin = (0,
|
|
14831
|
-
const builtInHighlightPlugin = (0,
|
|
14832
|
-
const builtInCellSelectionPlugin = (0,
|
|
14833
|
-
const builtInIndexPlugin = (0,
|
|
14834
|
-
const activePlugins = (0,
|
|
14905
|
+
const scrollbarDragRef = (0, import_react53.useRef)(null);
|
|
14906
|
+
const [internalLoading, setInternalLoading] = (0, import_react53.useState)(false);
|
|
14907
|
+
const [scrollTop, setScrollTop] = (0, import_react53.useState)(0);
|
|
14908
|
+
const [scrollLeft, setScrollLeft] = (0, import_react53.useState)(0);
|
|
14909
|
+
const [viewportHeight, setViewportHeight] = (0, import_react53.useState)(420);
|
|
14910
|
+
const [viewportWidth, setViewportWidth] = (0, import_react53.useState)(0);
|
|
14911
|
+
const [autoColumnWidths, setAutoColumnWidths] = (0, import_react53.useState)({});
|
|
14912
|
+
const getRowKey = (0, import_react53.useCallback)((record, index) => typeof rowKey === "function" ? rowKey(record, index) : record[String(rowKey)] ?? index, [rowKey]);
|
|
14913
|
+
const builtInResizePlugin = (0, import_react53.useMemo)(() => createResizePlugin(), []);
|
|
14914
|
+
const builtInHighlightPlugin = (0, import_react53.useMemo)(() => createHighlightPlugin(), []);
|
|
14915
|
+
const builtInCellSelectionPlugin = (0, import_react53.useMemo)(() => createCellSelectionPlugin(), []);
|
|
14916
|
+
const builtInIndexPlugin = (0, import_react53.useMemo)(() => createIndexPlugin(), []);
|
|
14917
|
+
const activePlugins = (0, import_react53.useMemo)(() => {
|
|
14835
14918
|
const plugins = providedPlugins.filter((plugin) => (resizable || plugin.id !== "resize") && (cellSelection || plugin.id !== "cellSelection") && (showIndex || plugin.id !== "index"));
|
|
14836
14919
|
if (!plugins.some((plugin) => plugin.id === "highlight")) plugins.push(builtInHighlightPlugin);
|
|
14837
14920
|
if (resizable && !plugins.some((plugin) => plugin.id === "resize")) plugins.push(builtInResizePlugin);
|
|
@@ -14839,19 +14922,19 @@ function TableInner(props, ref) {
|
|
|
14839
14922
|
if (showIndex && !plugins.some((plugin) => plugin.id === "index")) plugins.push(builtInIndexPlugin);
|
|
14840
14923
|
return plugins;
|
|
14841
14924
|
}, [builtInHighlightPlugin, builtInResizePlugin, builtInCellSelectionPlugin, builtInIndexPlugin, providedPlugins, resizable, cellSelection, showIndex]);
|
|
14842
|
-
const sortedPlugins = (0,
|
|
14843
|
-
const pluginsByIdRef = (0,
|
|
14925
|
+
const sortedPlugins = (0, import_react53.useMemo)(() => [...activePlugins].sort((a, b) => (a.order ?? 100) - (b.order ?? 100)), [activePlugins]);
|
|
14926
|
+
const pluginsByIdRef = (0, import_react53.useRef)(/* @__PURE__ */ new Map());
|
|
14844
14927
|
pluginsByIdRef.current = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
|
|
14845
|
-
const [pluginStates, setPluginStates] = (0,
|
|
14928
|
+
const [pluginStates, setPluginStates] = (0, import_react53.useState)(() => Object.fromEntries(
|
|
14846
14929
|
sortedPlugins.map((plugin) => [plugin.id, resolveInitialState(plugin)])
|
|
14847
14930
|
));
|
|
14848
|
-
const pluginApisRef = (0,
|
|
14849
|
-
const contextsRef = (0,
|
|
14850
|
-
const mountedPluginsRef = (0,
|
|
14931
|
+
const pluginApisRef = (0, import_react53.useRef)({});
|
|
14932
|
+
const contextsRef = (0, import_react53.useRef)(/* @__PURE__ */ new Map());
|
|
14933
|
+
const mountedPluginsRef = (0, import_react53.useRef)(/* @__PURE__ */ new Map());
|
|
14851
14934
|
const pipeline = { columns: baseColumns, rows: createTableRows(dataSource, getRowKey) };
|
|
14852
14935
|
const nextApis = {};
|
|
14853
14936
|
const contexts = /* @__PURE__ */ new Map();
|
|
14854
|
-
const setPluginState = (0,
|
|
14937
|
+
const setPluginState = (0, import_react53.useCallback)((pluginId, next) => {
|
|
14855
14938
|
setPluginStates((previous) => {
|
|
14856
14939
|
const plugin = pluginsByIdRef.current.get(pluginId);
|
|
14857
14940
|
const previousValue = previous[pluginId] !== void 0 ? previous[pluginId] : plugin ? resolveInitialState(plugin) : void 0;
|
|
@@ -14904,7 +14987,7 @@ function TableInner(props, ref) {
|
|
|
14904
14987
|
});
|
|
14905
14988
|
pluginApisRef.current = nextApis;
|
|
14906
14989
|
contextsRef.current = contexts;
|
|
14907
|
-
(0,
|
|
14990
|
+
(0, import_react53.useEffect)(() => {
|
|
14908
14991
|
const activePlugins2 = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
|
|
14909
14992
|
for (const [pluginId, mounted] of mountedPluginsRef.current) {
|
|
14910
14993
|
if (activePlugins2.get(pluginId) === mounted.plugin) continue;
|
|
@@ -14916,11 +14999,11 @@ function TableInner(props, ref) {
|
|
|
14916
14999
|
mountedPluginsRef.current.set(plugin.id, { plugin, cleanup: plugin.onMount(contextsRef.current.get(plugin.id)) });
|
|
14917
15000
|
}
|
|
14918
15001
|
}, [sortedPlugins]);
|
|
14919
|
-
(0,
|
|
15002
|
+
(0, import_react53.useEffect)(() => () => {
|
|
14920
15003
|
for (const mounted of mountedPluginsRef.current.values()) mounted.cleanup?.();
|
|
14921
15004
|
mountedPluginsRef.current.clear();
|
|
14922
15005
|
}, []);
|
|
14923
|
-
const updateScrollMetrics = (0,
|
|
15006
|
+
const updateScrollMetrics = (0, import_react53.useCallback)(() => {
|
|
14924
15007
|
const root = rootRef.current;
|
|
14925
15008
|
const element = scrollRef.current;
|
|
14926
15009
|
if (!root || !element) return;
|
|
@@ -14960,7 +15043,7 @@ function TableInner(props, ref) {
|
|
|
14960
15043
|
verticalTrackElement?.style.setProperty("--sia-table-scrollbar-y-size", `${verticalThumb}px`);
|
|
14961
15044
|
verticalTrackElement?.style.setProperty("--sia-table-scrollbar-y-position", `${verticalPosition}px`);
|
|
14962
15045
|
}, []);
|
|
14963
|
-
(0,
|
|
15046
|
+
(0, import_react53.useEffect)(() => {
|
|
14964
15047
|
const element = scrollRef.current;
|
|
14965
15048
|
if (!element || typeof ResizeObserver === "undefined") return;
|
|
14966
15049
|
const observer = new ResizeObserver(() => {
|
|
@@ -14973,19 +15056,19 @@ function TableInner(props, ref) {
|
|
|
14973
15056
|
updateScrollMetrics();
|
|
14974
15057
|
return () => observer.disconnect();
|
|
14975
15058
|
}, [updateScrollMetrics]);
|
|
14976
|
-
(0,
|
|
15059
|
+
(0, import_react53.useEffect)(() => {
|
|
14977
15060
|
updateScrollMetrics();
|
|
14978
15061
|
});
|
|
14979
|
-
const orderedColumns = (0,
|
|
14980
|
-
const leafColumns = (0,
|
|
14981
|
-
const headerRows = (0,
|
|
14982
|
-
const measuredCells = (0,
|
|
15062
|
+
const orderedColumns = (0, import_react53.useMemo)(() => sortTableColumnsByFixed(pipeline.columns), [pipeline.columns]);
|
|
15063
|
+
const leafColumns = (0, import_react53.useMemo)(() => flattenTableColumns(orderedColumns), [orderedColumns]);
|
|
15064
|
+
const headerRows = (0, import_react53.useMemo)(() => buildHeaderRows(orderedColumns), [orderedColumns]);
|
|
15065
|
+
const measuredCells = (0, import_react53.useRef)(/* @__PURE__ */ new WeakSet());
|
|
14983
15066
|
const autoWidthSignature = leafColumns.map((column) => `${column.key}:${column.autoWidth}:${resizedWidths[column.key] ?? ""}`).join("|");
|
|
14984
|
-
(0,
|
|
15067
|
+
(0, import_react53.useEffect)(() => {
|
|
14985
15068
|
measuredCells.current = /* @__PURE__ */ new WeakSet();
|
|
14986
15069
|
setAutoColumnWidths({});
|
|
14987
15070
|
}, [dataSource, baseColumns, size, autoWidthSignature]);
|
|
14988
|
-
(0,
|
|
15071
|
+
(0, import_react53.useEffect)(() => {
|
|
14989
15072
|
const autoWidthColumns = leafColumns.filter((column) => column.autoWidth && resizedWidths[column.key] === void 0);
|
|
14990
15073
|
const root = rootRef.current;
|
|
14991
15074
|
if (!root || autoWidthColumns.length === 0) return;
|
|
@@ -15069,7 +15152,7 @@ function TableInner(props, ref) {
|
|
|
15069
15152
|
}
|
|
15070
15153
|
const topSpacer = shouldVirtualize ? startIndex * rowHeight : 0;
|
|
15071
15154
|
const bottomSpacer = shouldVirtualize ? Math.max(0, (pipeline.rows.length - endIndex) * rowHeight) : 0;
|
|
15072
|
-
const rowElements = (0,
|
|
15155
|
+
const rowElements = (0, import_react53.useMemo)(() => /* @__PURE__ */ new Map(), [
|
|
15073
15156
|
dataSource,
|
|
15074
15157
|
baseColumns,
|
|
15075
15158
|
sortedPlugins,
|
|
@@ -15088,35 +15171,35 @@ function TableInner(props, ref) {
|
|
|
15088
15171
|
]);
|
|
15089
15172
|
const toolbarStart = sortedPlugins.map((plugin) => {
|
|
15090
15173
|
const content = plugin.renderToolbarStart?.(getContext(plugin));
|
|
15091
|
-
return content ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
15174
|
+
return content ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react53.Fragment, { children: content }, `toolbar-start-${plugin.id}`) : null;
|
|
15092
15175
|
}).filter(Boolean);
|
|
15093
15176
|
const toolbarEnd = sortedPlugins.map((plugin) => {
|
|
15094
15177
|
const content = plugin.renderToolbarEnd?.(getContext(plugin));
|
|
15095
|
-
return content ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
15178
|
+
return content ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react53.Fragment, { children: content }, `toolbar-end-${plugin.id}`) : null;
|
|
15096
15179
|
}).filter(Boolean);
|
|
15097
15180
|
const summaries = sortedPlugins.flatMap((plugin) => plugin.renderSummary?.(getContext(plugin)) ?? []);
|
|
15098
15181
|
const footers = sortedPlugins.map((plugin) => {
|
|
15099
15182
|
const content = plugin.renderFooter?.(getContext(plugin));
|
|
15100
|
-
return content ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
15183
|
+
return content ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react53.Fragment, { children: content }, `footer-${plugin.id}`) : null;
|
|
15101
15184
|
}).filter(Boolean);
|
|
15102
15185
|
const overlays = sortedPlugins.map((plugin) => {
|
|
15103
15186
|
const content = plugin.renderOverlay?.(getContext(plugin));
|
|
15104
|
-
return content ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
15187
|
+
return content ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react53.Fragment, { children: content }, `overlay-${plugin.id}`) : null;
|
|
15105
15188
|
}).filter(Boolean);
|
|
15106
15189
|
const hasToolbar = toolbarStart.length > 0 || toolbarEnd.length > 0;
|
|
15107
|
-
const effectiveHeight = height ?? tableHeight ?? (shouldVirtualize ? 420 : void 0);
|
|
15190
|
+
const effectiveHeight = height ?? tableHeight ?? remainingHeight ?? (shouldVirtualize ? 420 : void 0);
|
|
15108
15191
|
const rootStyle = {
|
|
15109
15192
|
...style,
|
|
15110
15193
|
height: effectiveHeight,
|
|
15111
15194
|
"--sia-table-header-height": `${headerRows.length * rowHeight}px`
|
|
15112
15195
|
};
|
|
15113
|
-
const handleScroll = (0,
|
|
15196
|
+
const handleScroll = (0, import_react53.useCallback)((event) => {
|
|
15114
15197
|
const element = event.currentTarget;
|
|
15115
15198
|
if (shouldVirtualize) setScrollTop((previous) => Math.floor(previous / rowHeight) === Math.floor(element.scrollTop / rowHeight) ? previous : element.scrollTop);
|
|
15116
15199
|
if (canvas) setScrollLeft(element.scrollLeft);
|
|
15117
15200
|
updateScrollMetrics();
|
|
15118
15201
|
}, [canvas, shouldVirtualize, rowHeight, updateScrollMetrics]);
|
|
15119
|
-
const handleScrollbarPointerDown = (0,
|
|
15202
|
+
const handleScrollbarPointerDown = (0, import_react53.useCallback)((axis, event, track = event.currentTarget) => {
|
|
15120
15203
|
const element = scrollRef.current;
|
|
15121
15204
|
const thumb = track.firstElementChild;
|
|
15122
15205
|
if (!element || !thumb || event.button !== 0) return;
|
|
@@ -15145,7 +15228,7 @@ function TableInner(props, ref) {
|
|
|
15145
15228
|
};
|
|
15146
15229
|
if (rootRef.current) rootRef.current.dataset.scrollbarDragging = "true";
|
|
15147
15230
|
}, []);
|
|
15148
|
-
const handleScrollbarPointerMove = (0,
|
|
15231
|
+
const handleScrollbarPointerMove = (0, import_react53.useCallback)((event) => {
|
|
15149
15232
|
const drag = scrollbarDragRef.current;
|
|
15150
15233
|
const element = scrollRef.current;
|
|
15151
15234
|
if (!drag || !element || drag.pointerId !== event.pointerId) return;
|
|
@@ -15154,12 +15237,12 @@ function TableInner(props, ref) {
|
|
|
15154
15237
|
if (drag.axis === "x") element.scrollLeft = nextScroll;
|
|
15155
15238
|
else element.scrollTop = nextScroll;
|
|
15156
15239
|
}, []);
|
|
15157
|
-
const handleScrollbarPointerEnd = (0,
|
|
15240
|
+
const handleScrollbarPointerEnd = (0, import_react53.useCallback)((event) => {
|
|
15158
15241
|
if (scrollbarDragRef.current?.pointerId !== event.pointerId) return;
|
|
15159
15242
|
scrollbarDragRef.current = null;
|
|
15160
15243
|
if (rootRef.current) rootRef.current.dataset.scrollbarDragging = "false";
|
|
15161
15244
|
}, []);
|
|
15162
|
-
(0,
|
|
15245
|
+
(0, import_react53.useImperativeHandle)(ref, () => ({
|
|
15163
15246
|
getRows: () => pipeline.rows.map((row) => row.record),
|
|
15164
15247
|
getColumns: () => pipeline.columns,
|
|
15165
15248
|
getPluginApi: (pluginId) => pluginApisRef.current[pluginId],
|
|
@@ -15438,12 +15521,12 @@ function TableInner(props, ref) {
|
|
|
15438
15521
|
}
|
|
15439
15522
|
);
|
|
15440
15523
|
}
|
|
15441
|
-
var Table2 = (0,
|
|
15524
|
+
var Table2 = (0, import_react53.forwardRef)(TableInner);
|
|
15442
15525
|
|
|
15443
15526
|
// src/components/ThemeSwitch.tsx
|
|
15444
|
-
var
|
|
15527
|
+
var import_react54 = require("react");
|
|
15445
15528
|
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
15446
|
-
var ThemeSwitch = (0,
|
|
15529
|
+
var ThemeSwitch = (0, import_react54.forwardRef)(function ThemeSwitch2({
|
|
15447
15530
|
checked,
|
|
15448
15531
|
onCheckedChange,
|
|
15449
15532
|
lightLabel = "\u4EAE\u8272\u6A21\u5F0F",
|
|
@@ -15537,7 +15620,7 @@ function Breadcrumb({ items, separator = "/", itemRender, className = "", ...pro
|
|
|
15537
15620
|
}
|
|
15538
15621
|
|
|
15539
15622
|
// src/components/Typography.tsx
|
|
15540
|
-
var
|
|
15623
|
+
var import_react55 = require("react");
|
|
15541
15624
|
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
15542
15625
|
function TypographyContent({
|
|
15543
15626
|
as: Tag2 = "span",
|
|
@@ -15557,26 +15640,26 @@ function TypographyContent({
|
|
|
15557
15640
|
className = "",
|
|
15558
15641
|
...props
|
|
15559
15642
|
}) {
|
|
15560
|
-
const contentRef = (0,
|
|
15561
|
-
const editRef = (0,
|
|
15562
|
-
const timer = (0,
|
|
15563
|
-
const [localText, setLocalText] = (0,
|
|
15564
|
-
const [draft, setDraft] = (0,
|
|
15565
|
-
const [editing, setEditing] = (0,
|
|
15566
|
-
const [copied, setCopied] = (0,
|
|
15567
|
-
const [copyError, setCopyError] = (0,
|
|
15568
|
-
const [expanded, setExpanded] = (0,
|
|
15569
|
-
const [overflow, setOverflow] = (0,
|
|
15643
|
+
const contentRef = (0, import_react55.useRef)(null);
|
|
15644
|
+
const editRef = (0, import_react55.useRef)(null);
|
|
15645
|
+
const timer = (0, import_react55.useRef)();
|
|
15646
|
+
const [localText, setLocalText] = (0, import_react55.useState)();
|
|
15647
|
+
const [draft, setDraft] = (0, import_react55.useState)("");
|
|
15648
|
+
const [editing, setEditing] = (0, import_react55.useState)(false);
|
|
15649
|
+
const [copied, setCopied] = (0, import_react55.useState)(false);
|
|
15650
|
+
const [copyError, setCopyError] = (0, import_react55.useState)(false);
|
|
15651
|
+
const [expanded, setExpanded] = (0, import_react55.useState)(false);
|
|
15652
|
+
const [overflow, setOverflow] = (0, import_react55.useState)(false);
|
|
15570
15653
|
const editConfig = typeof editable === "object" ? editable : void 0;
|
|
15571
15654
|
const content = editConfig?.text ?? localText ?? children;
|
|
15572
15655
|
const requestedRows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
|
|
15573
15656
|
const rows = Number.isFinite(requestedRows) ? Math.max(1, Math.floor(requestedRows)) : 1;
|
|
15574
15657
|
const expandable = typeof ellipsis === "object" && ellipsis.expandable;
|
|
15575
|
-
(0,
|
|
15658
|
+
(0, import_react55.useEffect)(() => {
|
|
15576
15659
|
setLocalText(void 0);
|
|
15577
15660
|
}, [children]);
|
|
15578
|
-
(0,
|
|
15579
|
-
(0,
|
|
15661
|
+
(0, import_react55.useEffect)(() => () => clearTimeout(timer.current), []);
|
|
15662
|
+
(0, import_react55.useLayoutEffect)(() => {
|
|
15580
15663
|
const element = contentRef.current;
|
|
15581
15664
|
if (!element || !ellipsis || !expandable || editing || expanded) return;
|
|
15582
15665
|
const measure = () => setOverflow(element.scrollHeight > element.clientHeight + 1 || element.scrollWidth > element.clientWidth + 1);
|
|
@@ -15694,10 +15777,10 @@ var Typography = Object.assign(TypographyRoot, {
|
|
|
15694
15777
|
});
|
|
15695
15778
|
|
|
15696
15779
|
// src/components/FloatButton.tsx
|
|
15697
|
-
var
|
|
15780
|
+
var import_react56 = require("react");
|
|
15698
15781
|
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
15699
|
-
var GroupShape = (0,
|
|
15700
|
-
var FloatButtonRoot = (0,
|
|
15782
|
+
var GroupShape = (0, import_react56.createContext)(void 0);
|
|
15783
|
+
var FloatButtonRoot = (0, import_react56.forwardRef)(function FloatButton({
|
|
15701
15784
|
icon,
|
|
15702
15785
|
description,
|
|
15703
15786
|
tooltip,
|
|
@@ -15710,7 +15793,7 @@ var FloatButtonRoot = (0, import_react55.forwardRef)(function FloatButton({
|
|
|
15710
15793
|
children,
|
|
15711
15794
|
...props
|
|
15712
15795
|
}, ref) {
|
|
15713
|
-
const groupShape = (0,
|
|
15796
|
+
const groupShape = (0, import_react56.useContext)(GroupShape);
|
|
15714
15797
|
const label = props["aria-label"] ?? (typeof tooltip === "string" ? tooltip : typeof description === "string" ? description : "\u60AC\u6D6E\u64CD\u4F5C");
|
|
15715
15798
|
const button = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
15716
15799
|
"button",
|
|
@@ -15748,10 +15831,10 @@ function FloatButtonGroup({
|
|
|
15748
15831
|
...props
|
|
15749
15832
|
}) {
|
|
15750
15833
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
15751
|
-
const rootRef = (0,
|
|
15752
|
-
const triggerRef = (0,
|
|
15753
|
-
const id = (0,
|
|
15754
|
-
(0,
|
|
15834
|
+
const rootRef = (0, import_react56.useRef)(null);
|
|
15835
|
+
const triggerRef = (0, import_react56.useRef)(null);
|
|
15836
|
+
const id = (0, import_react56.useId)();
|
|
15837
|
+
(0, import_react56.useEffect)(() => {
|
|
15755
15838
|
if (!trigger || !visible) return;
|
|
15756
15839
|
const close = (event) => {
|
|
15757
15840
|
if (!rootRef.current?.contains(event.target)) setVisible(false);
|
|
@@ -15805,8 +15888,8 @@ function FloatButtonGroup({
|
|
|
15805
15888
|
) });
|
|
15806
15889
|
}
|
|
15807
15890
|
function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth", onClick, icon, tooltip = "\u8FD4\u56DE\u9876\u90E8", ...props }) {
|
|
15808
|
-
const [visible, setVisible] = (0,
|
|
15809
|
-
(0,
|
|
15891
|
+
const [visible, setVisible] = (0, import_react56.useState)(false);
|
|
15892
|
+
(0, import_react56.useEffect)(() => {
|
|
15810
15893
|
const element = target ? target() : window;
|
|
15811
15894
|
if (!element) return;
|
|
15812
15895
|
const update = () => setVisible((element === window ? window.scrollY : element.scrollTop) >= visibilityHeight);
|
|
@@ -15830,11 +15913,11 @@ var FloatButton2 = Object.assign(FloatButtonRoot, {
|
|
|
15830
15913
|
});
|
|
15831
15914
|
|
|
15832
15915
|
// src/components/ChartWhirlingLoading.tsx
|
|
15833
|
-
var
|
|
15916
|
+
var import_react57 = require("react");
|
|
15834
15917
|
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
15835
15918
|
function ChartWhirlingLoading({ width = 720, height = 360, text = "\u6570\u636E\u83B7\u53D6\u4E2D", textWidth, frame }) {
|
|
15836
|
-
const [tick, setTick] = (0,
|
|
15837
|
-
(0,
|
|
15919
|
+
const [tick, setTick] = (0, import_react57.useState)(0);
|
|
15920
|
+
(0, import_react57.useEffect)(() => {
|
|
15838
15921
|
if (frame != null) return;
|
|
15839
15922
|
const media = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
15840
15923
|
let timer;
|
|
@@ -15865,20 +15948,20 @@ function ChartWhirlingLoading({ width = 720, height = 360, text = "\u6570\u636E\
|
|
|
15865
15948
|
}
|
|
15866
15949
|
|
|
15867
15950
|
// src/components/SvgMapPlot.tsx
|
|
15868
|
-
var
|
|
15951
|
+
var import_react69 = require("react");
|
|
15869
15952
|
|
|
15870
15953
|
// src/components/ChartBrush.tsx
|
|
15871
|
-
var
|
|
15954
|
+
var import_react58 = require("react");
|
|
15872
15955
|
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
15873
15956
|
function ChartBrush({ bounds, onSelect, onCancel, selectionShape = "band", selectionStyle, minSelectionSize }) {
|
|
15874
|
-
const [vertical, setVertical] = (0,
|
|
15875
|
-
const startY = (0,
|
|
15957
|
+
const [vertical, setVertical] = (0, import_react58.useState)(null);
|
|
15958
|
+
const startY = (0, import_react58.useRef)(0);
|
|
15876
15959
|
const y = (event) => {
|
|
15877
15960
|
const matrix = event.currentTarget.ownerSVGElement?.getScreenCTM();
|
|
15878
15961
|
return matrix ? Math.max(bounds.y, Math.min(bounds.y + bounds.height, new DOMPoint(event.clientX, event.clientY).matrixTransform(matrix.inverse()).y)) : bounds.y;
|
|
15879
15962
|
};
|
|
15880
|
-
const drag = (0,
|
|
15881
|
-
const [selection, setSelection] = (0,
|
|
15963
|
+
const drag = (0, import_react58.useRef)(null);
|
|
15964
|
+
const [selection, setSelection] = (0, import_react58.useState)(null);
|
|
15882
15965
|
const x = (event) => {
|
|
15883
15966
|
const matrix = event.currentTarget.ownerSVGElement?.getScreenCTM();
|
|
15884
15967
|
if (!matrix) return null;
|
|
@@ -16001,7 +16084,7 @@ function appendChartExportHeadings(original, clone, host) {
|
|
|
16001
16084
|
}
|
|
16002
16085
|
|
|
16003
16086
|
// src/components/ChartNodeTimeline.tsx
|
|
16004
|
-
var
|
|
16087
|
+
var import_react60 = require("react");
|
|
16005
16088
|
|
|
16006
16089
|
// src/components/timelinePositions.ts
|
|
16007
16090
|
function timelineRatios(count, dates) {
|
|
@@ -16027,7 +16110,7 @@ function nearestTimelineIndex(ratios, ratio) {
|
|
|
16027
16110
|
}
|
|
16028
16111
|
|
|
16029
16112
|
// src/components/ChartPointMotion.tsx
|
|
16030
|
-
var
|
|
16113
|
+
var import_react59 = require("react");
|
|
16031
16114
|
|
|
16032
16115
|
// src/components/chartMotion.ts
|
|
16033
16116
|
function chartMotionBaseline(points, horizontal = false) {
|
|
@@ -16048,11 +16131,11 @@ function interpolateChartPoints(from, to, progress) {
|
|
|
16048
16131
|
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
16049
16132
|
function ChartPointMotion({ points, enabled, duration, updateDuration = 500, animateInitial = true, easing = "linear", progress, horizontal = false, origin, children }) {
|
|
16050
16133
|
const baseline = (target) => origin ? target.map(() => origin) : chartMotionBaseline(target, horizontal);
|
|
16051
|
-
const [frame, setFrame] = (0,
|
|
16052
|
-
const displayed = (0,
|
|
16053
|
-
const initialized = (0,
|
|
16134
|
+
const [frame, setFrame] = (0, import_react59.useState)(() => enabled && animateInitial ? baseline(points) : points);
|
|
16135
|
+
const displayed = (0, import_react59.useRef)(frame);
|
|
16136
|
+
const initialized = (0, import_react59.useRef)(!animateInitial);
|
|
16054
16137
|
const signature = JSON.stringify(points);
|
|
16055
|
-
(0,
|
|
16138
|
+
(0, import_react59.useEffect)(() => {
|
|
16056
16139
|
const target = points;
|
|
16057
16140
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
16058
16141
|
if (!enabled || progress != null || reduced.matches) {
|
|
@@ -16091,8 +16174,8 @@ function ChartPointMotion({ points, enabled, duration, updateDuration = 500, ani
|
|
|
16091
16174
|
// src/components/ChartNodeTimeline.tsx
|
|
16092
16175
|
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
16093
16176
|
function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, playInterval = 2e3, loop = true, x = 80, y = 520, width = 840 }) {
|
|
16094
|
-
const [playing, setPlaying] = (0,
|
|
16095
|
-
const [draft, setDraft] = (0,
|
|
16177
|
+
const [playing, setPlaying] = (0, import_react60.useState)(autoPlay), dragging = (0, import_react60.useRef)();
|
|
16178
|
+
const [draft, setDraft] = (0, import_react60.useState)(), pending = (0, import_react60.useRef)(), draftRef = (0, import_react60.useRef)();
|
|
16096
16179
|
const shown = draft ?? value;
|
|
16097
16180
|
const cancelPending = () => {
|
|
16098
16181
|
clearTimeout(pending.current);
|
|
@@ -16100,8 +16183,8 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
16100
16183
|
draftRef.current = void 0;
|
|
16101
16184
|
setDraft(void 0);
|
|
16102
16185
|
};
|
|
16103
|
-
(0,
|
|
16104
|
-
(0,
|
|
16186
|
+
(0, import_react60.useEffect)(() => () => clearTimeout(pending.current), []);
|
|
16187
|
+
(0, import_react60.useEffect)(() => {
|
|
16105
16188
|
cancelPending();
|
|
16106
16189
|
}, [value]);
|
|
16107
16190
|
const preview = (index) => {
|
|
@@ -16116,8 +16199,8 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
16116
16199
|
draftRef.current = void 0;
|
|
16117
16200
|
}, 200);
|
|
16118
16201
|
};
|
|
16119
|
-
(0,
|
|
16120
|
-
(0,
|
|
16202
|
+
(0, import_react60.useEffect)(() => setPlaying(autoPlay), [autoPlay]);
|
|
16203
|
+
(0, import_react60.useEffect)(() => {
|
|
16121
16204
|
if (!playing || labels.length < 2) return;
|
|
16122
16205
|
const timer = window.setTimeout(() => {
|
|
16123
16206
|
if (value + 1 < labels.length) onChange(value + 1);
|
|
@@ -16226,7 +16309,7 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
16226
16309
|
}
|
|
16227
16310
|
|
|
16228
16311
|
// src/components/ChartVerticalRange.tsx
|
|
16229
|
-
var
|
|
16312
|
+
var import_react61 = require("react");
|
|
16230
16313
|
|
|
16231
16314
|
// src/components/chartColorRamp.ts
|
|
16232
16315
|
function chartColorRamp(colors, ratio) {
|
|
@@ -16246,16 +16329,16 @@ function chartColorRamp(colors, ratio) {
|
|
|
16246
16329
|
// src/components/ChartVerticalRange.tsx
|
|
16247
16330
|
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
16248
16331
|
function ChartVerticalRange({ min, max, x, y, length, thickness, colors, range, endLabels, onChange, indicatorValue, onHoverRange, realtime = true, readOnly = false }) {
|
|
16249
|
-
const id = (0,
|
|
16250
|
-
const drag = (0,
|
|
16251
|
-
const [draft, setDraft] = (0,
|
|
16252
|
-
const pending = (0,
|
|
16332
|
+
const id = (0, import_react61.useId)().replaceAll(":", "");
|
|
16333
|
+
const drag = (0, import_react61.useRef)();
|
|
16334
|
+
const [draft, setDraft] = (0, import_react61.useState)();
|
|
16335
|
+
const pending = (0, import_react61.useRef)();
|
|
16253
16336
|
const cancel = () => {
|
|
16254
16337
|
drag.current = void 0;
|
|
16255
16338
|
pending.current = void 0;
|
|
16256
16339
|
setDraft(void 0);
|
|
16257
16340
|
};
|
|
16258
|
-
(0,
|
|
16341
|
+
(0, import_react61.useEffect)(() => {
|
|
16259
16342
|
if (!realtime) cancel();
|
|
16260
16343
|
}, [range[0], range[1], min, max, realtime]);
|
|
16261
16344
|
const shown = draft ?? range;
|
|
@@ -16336,18 +16419,18 @@ function ChartVerticalRange({ min, max, x, y, length, thickness, colors, range,
|
|
|
16336
16419
|
}
|
|
16337
16420
|
|
|
16338
16421
|
// src/components/ChartHorizontalRange.tsx
|
|
16339
|
-
var
|
|
16422
|
+
var import_react62 = require("react");
|
|
16340
16423
|
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
16341
16424
|
function ChartHorizontalRange({ min, max, x, y, length, thickness, colors, range, endLabels, onChange, indicatorValue, onHoverRange, realtime = true }) {
|
|
16342
|
-
const id = (0,
|
|
16343
|
-
const drag = (0,
|
|
16344
|
-
const [draft, setDraft] = (0,
|
|
16425
|
+
const id = (0, import_react62.useId)().replaceAll(":", ""), span = max - min;
|
|
16426
|
+
const drag = (0, import_react62.useRef)();
|
|
16427
|
+
const [draft, setDraft] = (0, import_react62.useState)(), pending = (0, import_react62.useRef)();
|
|
16345
16428
|
const cancel = () => {
|
|
16346
16429
|
drag.current = void 0;
|
|
16347
16430
|
pending.current = void 0;
|
|
16348
16431
|
setDraft(void 0);
|
|
16349
16432
|
};
|
|
16350
|
-
(0,
|
|
16433
|
+
(0, import_react62.useEffect)(() => {
|
|
16351
16434
|
if (!realtime) cancel();
|
|
16352
16435
|
}, [range[0], range[1], min, max, realtime]);
|
|
16353
16436
|
const shown = draft ?? range, low = Math.max(min, Math.min(max, shown[0])), high = Math.max(low, Math.min(max, shown[1]));
|
|
@@ -16425,7 +16508,7 @@ function ChartHorizontalRange({ min, max, x, y, length, thickness, colors, range
|
|
|
16425
16508
|
}
|
|
16426
16509
|
|
|
16427
16510
|
// src/components/Chart.tsx
|
|
16428
|
-
var
|
|
16511
|
+
var import_react63 = require("react");
|
|
16429
16512
|
|
|
16430
16513
|
// src/components/chartCompositeExport.ts
|
|
16431
16514
|
function serializeChartComposite(host) {
|
|
@@ -16549,20 +16632,20 @@ var DEFAULT_CHART_PALETTE = [
|
|
|
16549
16632
|
"#2f54eb",
|
|
16550
16633
|
"#a0d911"
|
|
16551
16634
|
];
|
|
16552
|
-
var ChartContext = (0,
|
|
16635
|
+
var ChartContext = (0, import_react63.createContext)(null);
|
|
16553
16636
|
function toCssSize(value, fallback) {
|
|
16554
16637
|
if (typeof value === "number") return `${value}px`;
|
|
16555
16638
|
return value ?? fallback;
|
|
16556
16639
|
}
|
|
16557
|
-
var ChartComposite = (0,
|
|
16558
|
-
const host = (0,
|
|
16559
|
-
(0,
|
|
16640
|
+
var ChartComposite = (0, import_react63.forwardRef)(function ChartComposite2({ layers, width = "100%", height = 320, ariaLabel = "\u7EC4\u5408\u56FE\u8868", className = "", style, ...props }, ref) {
|
|
16641
|
+
const host = (0, import_react63.useRef)(null);
|
|
16642
|
+
(0, import_react63.useImperativeHandle)(ref, () => ({ toSvgString: () => host.current ? serializeChartComposite(host.current) : null, saveAsImage: (filename) => saveCompositeImage(host.current ? serializeChartComposite(host.current) : null, filename) }), []);
|
|
16560
16643
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { ...withTitleTooltip(props), ref: host, className: `sia-chart-composite${className ? ` ${className}` : ""}`, style: { ...style, width: toCssSize(width, "100%"), height: toCssSize(height, "320px") }, role: "group", "aria-label": ariaLabel, children: layers.map((layer, index) => /* @__PURE__ */ (0, import_jsx_runtime63.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)) });
|
|
16561
16644
|
});
|
|
16562
|
-
var useTooltipLayoutEffect = typeof window === "undefined" ?
|
|
16645
|
+
var useTooltipLayoutEffect = typeof window === "undefined" ? import_react63.useEffect : import_react63.useLayoutEffect;
|
|
16563
16646
|
function ChartTooltip({ open, left, top, children, enterable = false, inheritTextStyle = false, placement = "above", className = "", style, ...props }) {
|
|
16564
|
-
const elementRef = (0,
|
|
16565
|
-
const [position, setPosition] = (0,
|
|
16647
|
+
const elementRef = (0, import_react63.useRef)(null);
|
|
16648
|
+
const [position, setPosition] = (0, import_react63.useState)([left, top]);
|
|
16566
16649
|
useTooltipLayoutEffect(() => {
|
|
16567
16650
|
const element = elementRef.current, host = element?.parentElement;
|
|
16568
16651
|
if (!open || placement !== "axis" || !element || !host) return;
|
|
@@ -16686,7 +16769,7 @@ function ChartToolbox({
|
|
|
16686
16769
|
))
|
|
16687
16770
|
] });
|
|
16688
16771
|
}
|
|
16689
|
-
var SiaChart = (0,
|
|
16772
|
+
var SiaChart = (0, import_react63.forwardRef)(function SiaChart2({
|
|
16690
16773
|
children,
|
|
16691
16774
|
width = "100%",
|
|
16692
16775
|
height = 320,
|
|
@@ -16713,19 +16796,19 @@ var SiaChart = (0, import_react62.forwardRef)(function SiaChart2({
|
|
|
16713
16796
|
style,
|
|
16714
16797
|
...rest
|
|
16715
16798
|
}, ref) {
|
|
16716
|
-
const hostRef = (0,
|
|
16717
|
-
const svgRef = (0,
|
|
16718
|
-
const titleId = (0,
|
|
16719
|
-
const descriptionId = (0,
|
|
16720
|
-
const [tooltip, setTooltip] = (0,
|
|
16721
|
-
const tooltipHideTimer = (0,
|
|
16722
|
-
const tooltipHeld = (0,
|
|
16799
|
+
const hostRef = (0, import_react63.useRef)(null);
|
|
16800
|
+
const svgRef = (0, import_react63.useRef)(null);
|
|
16801
|
+
const titleId = (0, import_react63.useId)();
|
|
16802
|
+
const descriptionId = (0, import_react63.useId)();
|
|
16803
|
+
const [tooltip, setTooltip] = (0, import_react63.useState)(null);
|
|
16804
|
+
const tooltipHideTimer = (0, import_react63.useRef)();
|
|
16805
|
+
const tooltipHeld = (0, import_react63.useRef)(false);
|
|
16723
16806
|
const cancelTooltipHide = () => {
|
|
16724
16807
|
clearTimeout(tooltipHideTimer.current);
|
|
16725
16808
|
};
|
|
16726
|
-
(0,
|
|
16727
|
-
const [linkedPosition, setLinkedPosition] = (0,
|
|
16728
|
-
(0,
|
|
16809
|
+
(0, import_react63.useEffect)(() => () => clearTimeout(tooltipHideTimer.current), []);
|
|
16810
|
+
const [linkedPosition, setLinkedPosition] = (0, import_react63.useState)({ left: 0, top: 0 });
|
|
16811
|
+
(0, import_react63.useEffect)(() => {
|
|
16729
16812
|
const host = hostRef.current, svg = svgRef.current;
|
|
16730
16813
|
if (!controlledTooltip || !host || !svg) return;
|
|
16731
16814
|
const position = () => {
|
|
@@ -16740,12 +16823,12 @@ var SiaChart = (0, import_react62.forwardRef)(function SiaChart2({
|
|
|
16740
16823
|
observer.observe(host);
|
|
16741
16824
|
return () => observer.disconnect();
|
|
16742
16825
|
}, [controlledTooltip]);
|
|
16743
|
-
const [dataViewOpen, setDataViewOpen] = (0,
|
|
16744
|
-
const [markMode, setMarkMode] = (0,
|
|
16745
|
-
const [markStart, setMarkStart] = (0,
|
|
16746
|
-
const [userMarks, setUserMarks] = (0,
|
|
16826
|
+
const [dataViewOpen, setDataViewOpen] = (0, import_react63.useState)(false);
|
|
16827
|
+
const [markMode, setMarkMode] = (0, import_react63.useState)(false);
|
|
16828
|
+
const [markStart, setMarkStart] = (0, import_react63.useState)(null);
|
|
16829
|
+
const [userMarks, setUserMarks] = (0, import_react63.useState)([]);
|
|
16747
16830
|
const toolboxOptions = toolbox === true ? {} : toolbox || void 0;
|
|
16748
|
-
const rootStyle = (0,
|
|
16831
|
+
const rootStyle = (0, import_react63.useMemo)(() => ({
|
|
16749
16832
|
...style,
|
|
16750
16833
|
width: toCssSize(width, "100%"),
|
|
16751
16834
|
height: toCssSize(height, "320px"),
|
|
@@ -16803,13 +16886,13 @@ var SiaChart = (0, import_react62.forwardRef)(function SiaChart2({
|
|
|
16803
16886
|
anchor.href = canvas.toDataURL("image/png");
|
|
16804
16887
|
anchor.click();
|
|
16805
16888
|
}
|
|
16806
|
-
(0,
|
|
16889
|
+
(0, import_react63.useImperativeHandle)(ref, () => ({
|
|
16807
16890
|
getElement: () => svgRef.current,
|
|
16808
16891
|
focus: () => svgRef.current?.focus(),
|
|
16809
16892
|
toSvgString: serializeSvg,
|
|
16810
16893
|
toDataUrl: svgDataUrl
|
|
16811
16894
|
}), []);
|
|
16812
|
-
const context = (0,
|
|
16895
|
+
const context = (0, import_react63.useMemo)(() => ({
|
|
16813
16896
|
palette,
|
|
16814
16897
|
showTooltip: (event, content, point) => {
|
|
16815
16898
|
cancelTooltipHide();
|
|
@@ -16996,7 +17079,7 @@ var SiaChart = (0, import_react62.forwardRef)(function SiaChart2({
|
|
|
16996
17079
|
) });
|
|
16997
17080
|
});
|
|
16998
17081
|
function ChartMark({ tooltip, tooltipPoint, label, onPointerMove, onPointerLeave, onFocus, onBlur, ...props }) {
|
|
16999
|
-
const context = (0,
|
|
17082
|
+
const context = (0, import_react63.useContext)(ChartContext);
|
|
17000
17083
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
17001
17084
|
"g",
|
|
17002
17085
|
{
|
|
@@ -17025,7 +17108,7 @@ function ChartMark({ tooltip, tooltipPoint, label, onPointerMove, onPointerLeave
|
|
|
17025
17108
|
);
|
|
17026
17109
|
}
|
|
17027
17110
|
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 }) {
|
|
17028
|
-
const paintId = (0,
|
|
17111
|
+
const paintId = (0, import_react63.useId)().replaceAll(":", "");
|
|
17029
17112
|
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))));
|
|
17030
17113
|
const totalWidth = orientation === "horizontal" ? widths.reduce((sum, value) => sum + value, 0) + Math.max(0, items.length - 1) * itemGap : Math.max(0, ...widths);
|
|
17031
17114
|
const startX = align === "start" ? x : align === "end" ? x - totalWidth : x - totalWidth / 2;
|
|
@@ -17154,7 +17237,7 @@ function ChartAxis({ layer = "all", orientation, x, y, length, labels, positions
|
|
|
17154
17237
|
] });
|
|
17155
17238
|
}
|
|
17156
17239
|
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 }) {
|
|
17157
|
-
const id = (0,
|
|
17240
|
+
const id = (0, import_react63.useId)().replaceAll(":", "");
|
|
17158
17241
|
const vertical = orientation === "vertical";
|
|
17159
17242
|
if (svgHandles && vertical && !calculable && !pieces?.length) return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ChartVerticalRange, { readOnly: true, min, max, x, y, length: width, thickness: height, colors, range: [min, max], endLabels, indicatorValue, onHoverRange });
|
|
17160
17243
|
if (svgHandles && vertical && calculable && range && !pieces?.length) return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ChartVerticalRange, { min, max, x, y, length: width, thickness: height, colors, range, onChange: onRangeChange, endLabels, indicatorValue, onHoverRange, realtime });
|
|
@@ -17182,8 +17265,8 @@ function ChartVisualMap({ min, max, colors = ["#e6f4ff", "#1677ff"], x = 16, y =
|
|
|
17182
17265
|
] });
|
|
17183
17266
|
}
|
|
17184
17267
|
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 }) {
|
|
17185
|
-
const [activeHandle, setActiveHandle] = (0,
|
|
17186
|
-
const pan = (0,
|
|
17268
|
+
const [activeHandle, setActiveHandle] = (0, import_react63.useState)(null);
|
|
17269
|
+
const pan = (0, import_react63.useRef)();
|
|
17187
17270
|
const start = Math.min(value[0], value[1]);
|
|
17188
17271
|
const end = Math.max(value[0], value[1]);
|
|
17189
17272
|
const startPercent = (start - min) / Math.max(1, max - min) * 100;
|
|
@@ -17257,9 +17340,9 @@ function ChartDataZoom({ value, min = 0, max = 100, ariaLabel = "\u56FE\u8868\u5
|
|
|
17257
17340
|
] });
|
|
17258
17341
|
}
|
|
17259
17342
|
function ChartTimeline({ labels, value, onChange, autoPlay = false, playInterval = 2e3, loop = true, className = "", ...props }) {
|
|
17260
|
-
const [playing, setPlaying] = (0,
|
|
17261
|
-
(0,
|
|
17262
|
-
(0,
|
|
17343
|
+
const [playing, setPlaying] = (0, import_react63.useState)(autoPlay);
|
|
17344
|
+
(0, import_react63.useEffect)(() => setPlaying(autoPlay), [autoPlay]);
|
|
17345
|
+
(0, import_react63.useEffect)(() => {
|
|
17263
17346
|
if (!playing || labels.length <= 1) return void 0;
|
|
17264
17347
|
const timer = window.setInterval(() => {
|
|
17265
17348
|
const next = value + 1;
|
|
@@ -17369,7 +17452,7 @@ function parseSvgMapPaths(source) {
|
|
|
17369
17452
|
}
|
|
17370
17453
|
|
|
17371
17454
|
// src/components/useMapRoam.ts
|
|
17372
|
-
var
|
|
17455
|
+
var import_react64 = require("react");
|
|
17373
17456
|
|
|
17374
17457
|
// src/components/chartRoam.ts
|
|
17375
17458
|
function zoomChartViewport(view, factor, point, limit = { min: 0.05, max: 20 }) {
|
|
@@ -17386,14 +17469,14 @@ var initial = { x: 0, y: 0, scale: 1 };
|
|
|
17386
17469
|
function useMapRoam(mode, scaleLimit = { min: 0.65, max: 5 }, wheelFactors = [1.12, 0.9]) {
|
|
17387
17470
|
const [zoomIn, zoomOut] = wheelFactors;
|
|
17388
17471
|
const min = scaleLimit?.min, max = scaleLimit?.max, unlimited = scaleLimit === null;
|
|
17389
|
-
const host = (0,
|
|
17390
|
-
const [view, setView] = (0,
|
|
17391
|
-
const drag = (0,
|
|
17472
|
+
const host = (0, import_react64.useRef)(null);
|
|
17473
|
+
const [view, setView] = (0, import_react64.useState)(initial);
|
|
17474
|
+
const drag = (0, import_react64.useRef)();
|
|
17392
17475
|
const local = (x, y) => {
|
|
17393
17476
|
const matrix = host.current?.ownerSVGElement?.getScreenCTM();
|
|
17394
17477
|
return matrix ? new DOMPoint(x, y).matrixTransform(matrix.inverse()) : new DOMPoint(x, y);
|
|
17395
17478
|
};
|
|
17396
|
-
(0,
|
|
17479
|
+
(0, import_react64.useEffect)(() => {
|
|
17397
17480
|
const node = host.current;
|
|
17398
17481
|
if (!node || !mode || mode === "move") return;
|
|
17399
17482
|
const wheel = (event) => {
|
|
@@ -17455,7 +17538,7 @@ function useMapRoam(mode, scaleLimit = { min: 0.65, max: 5 }, wheelFactors = [1.
|
|
|
17455
17538
|
}
|
|
17456
17539
|
|
|
17457
17540
|
// src/components/ChartMapLineReveal.tsx
|
|
17458
|
-
var
|
|
17541
|
+
var import_react65 = require("react");
|
|
17459
17542
|
|
|
17460
17543
|
// src/components/mapLineGeometry.ts
|
|
17461
17544
|
function mapLineControl(source, target, curveness) {
|
|
@@ -17472,9 +17555,9 @@ function mapLineDuration(source, target, period) {
|
|
|
17472
17555
|
// src/components/ChartMapLineReveal.tsx
|
|
17473
17556
|
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
17474
17557
|
function ChartMapLineReveal({ source, control, target, enabled, initialDuration = 2e3, updateDuration = 500, children }) {
|
|
17475
|
-
const signature = JSON.stringify([source, control, target]), initialized = (0,
|
|
17476
|
-
const [frame, setFrame] = (0,
|
|
17477
|
-
(0,
|
|
17558
|
+
const signature = JSON.stringify([source, control, target]), initialized = (0, import_react65.useRef)(false);
|
|
17559
|
+
const [frame, setFrame] = (0, import_react65.useState)({ signature, progress: enabled ? 0 : 1 });
|
|
17560
|
+
(0, import_react65.useEffect)(() => {
|
|
17478
17561
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
17479
17562
|
const duration = Math.max(1, initialized.current ? updateDuration : initialDuration);
|
|
17480
17563
|
if (!enabled || reduced.matches) {
|
|
@@ -17507,15 +17590,15 @@ function ChartMapLineReveal({ source, control, target, enabled, initialDuration
|
|
|
17507
17590
|
}
|
|
17508
17591
|
|
|
17509
17592
|
// src/components/ChartMapLineEffect.tsx
|
|
17510
|
-
var
|
|
17593
|
+
var import_react66 = require("react");
|
|
17511
17594
|
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
17512
17595
|
function ChartMapLineEffect({ source, control, target, period = 30, color = "#fff", radius = 1, shadowBlur = 10, shadowColor = color, trailAlpha }) {
|
|
17513
|
-
const ref = (0,
|
|
17514
|
-
const trails = (0,
|
|
17596
|
+
const ref = (0, import_react66.useRef)(null);
|
|
17597
|
+
const trails = (0, import_react66.useRef)([]);
|
|
17515
17598
|
const alpha = trailAlpha === void 0 ? 0 : Math.max(0, Math.min(0.999, trailAlpha));
|
|
17516
17599
|
const count = alpha > 0 ? Math.min(240, Math.ceil(Math.log(5e-3) / Math.log(alpha))) : 0;
|
|
17517
17600
|
const duration = mapLineDuration(source, target, period);
|
|
17518
|
-
(0,
|
|
17601
|
+
(0, import_react66.useEffect)(() => {
|
|
17519
17602
|
const started = performance.now();
|
|
17520
17603
|
let frame = 0;
|
|
17521
17604
|
const history = [];
|
|
@@ -17548,7 +17631,7 @@ function ChartMapLineEffect({ source, control, target, period = 30, color = "#ff
|
|
|
17548
17631
|
}
|
|
17549
17632
|
|
|
17550
17633
|
// src/components/ChartMapPointPulse.tsx
|
|
17551
|
-
var
|
|
17634
|
+
var import_react67 = require("react");
|
|
17552
17635
|
|
|
17553
17636
|
// src/components/mapPointPulse.ts
|
|
17554
17637
|
function mapPointPulseDuration(period, random = Math.random) {
|
|
@@ -17558,7 +17641,7 @@ function mapPointPulseDuration(period, random = Math.random) {
|
|
|
17558
17641
|
// src/components/ChartMapPointPulse.tsx
|
|
17559
17642
|
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
17560
17643
|
function ChartMapPointPulse({ x, y, size, color, period = 15, scaleSize = 2 }) {
|
|
17561
|
-
const [duration] = (0,
|
|
17644
|
+
const [duration] = (0, import_react67.useState)(() => mapPointPulseDuration(period));
|
|
17562
17645
|
return /* @__PURE__ */ (0, import_jsx_runtime66.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: [
|
|
17563
17646
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("animate", { attributeName: "r", values: `${size * scaleSize * 0.1};${size * scaleSize}`, dur: `${duration}ms`, repeatCount: "indefinite", calcMode: "linear" }),
|
|
17564
17647
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("animate", { attributeName: "stroke-width", values: ".1;1", dur: `${duration}ms`, repeatCount: "indefinite", calcMode: "linear" })
|
|
@@ -17566,11 +17649,11 @@ function ChartMapPointPulse({ x, y, size, color, period = 15, scaleSize = 2 }) {
|
|
|
17566
17649
|
}
|
|
17567
17650
|
|
|
17568
17651
|
// src/components/ChartMapPointEntrance.tsx
|
|
17569
|
-
var
|
|
17652
|
+
var import_react68 = require("react");
|
|
17570
17653
|
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
17571
17654
|
function ChartMapPointEntrance({ enabled, x, y, children }) {
|
|
17572
|
-
const [progress, setProgress] = (0,
|
|
17573
|
-
(0,
|
|
17655
|
+
const [progress, setProgress] = (0, import_react68.useState)(enabled ? 0.01 : 1);
|
|
17656
|
+
(0, import_react68.useEffect)(() => {
|
|
17574
17657
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
17575
17658
|
if (!enabled || reduced.matches) {
|
|
17576
17659
|
setProgress(1);
|
|
@@ -17613,8 +17696,8 @@ function mapLineEndLabel(source, target) {
|
|
|
17613
17696
|
// src/components/SvgMapPlot.tsx
|
|
17614
17697
|
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
17615
17698
|
function SvgMapRegion({ d, name, value, series, color, scale, offset, emphasized, onHover, stroke, strokeWidth, opacity, hoverable = true, showLabel = true, tooltipNameOnly = false }) {
|
|
17616
|
-
const path = (0,
|
|
17617
|
-
(0,
|
|
17699
|
+
const path = (0, import_react69.useRef)(null), [center, setCenter] = (0, import_react69.useState)([0, 0]);
|
|
17700
|
+
(0, import_react69.useLayoutEffect)(() => {
|
|
17618
17701
|
const box = path.current?.getBBox();
|
|
17619
17702
|
if (box) setCenter([box.x + box.width / 2, box.y + box.height / 2]);
|
|
17620
17703
|
}, [d]);
|
|
@@ -17632,9 +17715,9 @@ function SvgMapRegion({ d, name, value, series, color, scale, offset, emphasized
|
|
|
17632
17715
|
] }), onPointerMove: () => onHover(true), onPointerLeave: () => onHover(false), onFocus: () => onHover(true), onBlur: () => onHover(false), children: content });
|
|
17633
17716
|
}
|
|
17634
17717
|
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" }) {
|
|
17635
|
-
const map = (0,
|
|
17636
|
-
const [hoveredLine, setHoveredLine] = (0,
|
|
17637
|
-
(0,
|
|
17718
|
+
const map = (0, import_react69.useMemo)(() => parseSvgMapPaths(source), [source]), control = useMapRoam(roam, null, [1.2, 1 / 1.2]), [hovered, setHovered] = (0, import_react69.useState)();
|
|
17719
|
+
const [hoveredLine, setHoveredLine] = (0, import_react69.useState)();
|
|
17720
|
+
(0, import_react69.useEffect)(() => {
|
|
17638
17721
|
control.reset();
|
|
17639
17722
|
setHovered(void 0);
|
|
17640
17723
|
}, [resetKey]);
|
|
@@ -17697,16 +17780,16 @@ function SvgMapPlot({ source, name, data, x, y, width, height, domain, range = d
|
|
|
17697
17780
|
}
|
|
17698
17781
|
|
|
17699
17782
|
// src/components/ChartRoamController.tsx
|
|
17700
|
-
var
|
|
17783
|
+
var import_react70 = require("react");
|
|
17701
17784
|
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
17702
17785
|
function ChartRoamController({ x = 800, y = 5, onPan, onZoom }) {
|
|
17703
|
-
const [hovered, setHovered] = (0,
|
|
17704
|
-
const timer = (0,
|
|
17786
|
+
const [hovered, setHovered] = (0, import_react70.useState)(), [focused, setFocused] = (0, import_react70.useState)();
|
|
17787
|
+
const timer = (0, import_react70.useRef)();
|
|
17705
17788
|
const stop = () => {
|
|
17706
17789
|
if (timer.current !== void 0) clearInterval(timer.current);
|
|
17707
17790
|
timer.current = void 0;
|
|
17708
17791
|
};
|
|
17709
|
-
(0,
|
|
17792
|
+
(0, import_react70.useEffect)(() => {
|
|
17710
17793
|
window.addEventListener("blur", stop);
|
|
17711
17794
|
return () => {
|
|
17712
17795
|
stop();
|
|
@@ -17745,13 +17828,13 @@ function ChartRoamController({ x = 800, y = 5, onPan, onZoom }) {
|
|
|
17745
17828
|
}
|
|
17746
17829
|
|
|
17747
17830
|
// src/components/LineShareChart.tsx
|
|
17748
|
-
var
|
|
17831
|
+
var import_react90 = require("react");
|
|
17749
17832
|
|
|
17750
17833
|
// src/components/Charts.tsx
|
|
17751
|
-
var
|
|
17834
|
+
var import_react88 = require("react");
|
|
17752
17835
|
|
|
17753
17836
|
// src/components/ChartScatterMotion.tsx
|
|
17754
|
-
var
|
|
17837
|
+
var import_react71 = require("react");
|
|
17755
17838
|
|
|
17756
17839
|
// src/components/scatterMotion.ts
|
|
17757
17840
|
function scatterMotionEase(progress) {
|
|
@@ -17763,9 +17846,9 @@ function scatterMotionEase(progress) {
|
|
|
17763
17846
|
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
17764
17847
|
function ChartScatterMotion({ x, y, radius, enabled, duration = 2e3, updateDuration = 500, progress, children }) {
|
|
17765
17848
|
const target = { x, y, radius };
|
|
17766
|
-
const [frame, setFrame] = (0,
|
|
17767
|
-
const displayed = (0,
|
|
17768
|
-
(0,
|
|
17849
|
+
const [frame, setFrame] = (0, import_react71.useState)(() => ({ ...target, radius: enabled ? radius * 0.01 : radius }));
|
|
17850
|
+
const displayed = (0, import_react71.useRef)(frame), started = (0, import_react71.useRef)(false);
|
|
17851
|
+
(0, import_react71.useEffect)(() => {
|
|
17769
17852
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
17770
17853
|
let request = 0;
|
|
17771
17854
|
const publish = (next) => {
|
|
@@ -17876,12 +17959,12 @@ function layoutEventRiver(series, tailLength, area) {
|
|
|
17876
17959
|
}
|
|
17877
17960
|
|
|
17878
17961
|
// src/components/EventRiverBubble.tsx
|
|
17879
|
-
var
|
|
17962
|
+
var import_react72 = require("react");
|
|
17880
17963
|
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
17881
17964
|
function EventRiverBubble({ resetKey, draggable = true, tooltipPoint, onPointerUp, ...props }) {
|
|
17882
|
-
const [offset, setOffset] = (0,
|
|
17883
|
-
const drag = (0,
|
|
17884
|
-
(0,
|
|
17965
|
+
const [offset, setOffset] = (0, import_react72.useState)(0);
|
|
17966
|
+
const drag = (0, import_react72.useRef)();
|
|
17967
|
+
(0, import_react72.useEffect)(() => {
|
|
17885
17968
|
setOffset(0);
|
|
17886
17969
|
drag.current = void 0;
|
|
17887
17970
|
}, [resetKey]);
|
|
@@ -17932,13 +18015,13 @@ function EventRiverBubble({ resetKey, draggable = true, tooltipPoint, onPointerU
|
|
|
17932
18015
|
}
|
|
17933
18016
|
|
|
17934
18017
|
// src/components/EventRiverMotion.tsx
|
|
17935
|
-
var
|
|
18018
|
+
var import_react73 = require("react");
|
|
17936
18019
|
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
17937
18020
|
function EventRiverMotion({ geometry, enabled = true, duration = 2e3, updateDuration = 500, progress, children }) {
|
|
17938
|
-
const [frame, setFrame] = (0,
|
|
17939
|
-
const displayed = (0,
|
|
18021
|
+
const [frame, setFrame] = (0, import_react73.useState)(() => ({ ...geometry, scale: enabled ? 0.1 : 1 }));
|
|
18022
|
+
const displayed = (0, import_react73.useRef)(frame), started = (0, import_react73.useRef)(false);
|
|
17940
18023
|
const signature = JSON.stringify(geometry);
|
|
17941
|
-
(0,
|
|
18024
|
+
(0, import_react73.useEffect)(() => {
|
|
17942
18025
|
const preference = window.matchMedia("(prefers-reduced-motion: reduce)"), target = { ...geometry, scale: 1 };
|
|
17943
18026
|
const from = started.current ? displayed.current : { ...geometry, scale: 0.1 };
|
|
17944
18027
|
let request = 0;
|
|
@@ -18055,7 +18138,7 @@ function transferPieValue(series, source, target, connector = " & ") {
|
|
|
18055
18138
|
}
|
|
18056
18139
|
|
|
18057
18140
|
// src/components/ChartValueIsland.tsx
|
|
18058
|
-
var
|
|
18141
|
+
var import_react74 = require("react");
|
|
18059
18142
|
|
|
18060
18143
|
// src/components/cartesianTransfer.ts
|
|
18061
18144
|
function addValues(a, b) {
|
|
@@ -18120,13 +18203,13 @@ function findCompositeValueTarget(element, x, y) {
|
|
|
18120
18203
|
// src/components/ChartValueIsland.tsx
|
|
18121
18204
|
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
18122
18205
|
function ChartValueIsland({ name, value, x, y, color = "#2ec7c9", onDrop, resolveTarget = findCompositeValueTarget }) {
|
|
18123
|
-
const drag = (0,
|
|
18124
|
-
const [offset, setOffset] = (0,
|
|
18206
|
+
const drag = (0, import_react74.useRef)(null);
|
|
18207
|
+
const [offset, setOffset] = (0, import_react74.useState)([0, 0]);
|
|
18125
18208
|
const cancel = () => {
|
|
18126
18209
|
drag.current = null;
|
|
18127
18210
|
setOffset([0, 0]);
|
|
18128
18211
|
};
|
|
18129
|
-
(0,
|
|
18212
|
+
(0, import_react74.useEffect)(cancel, [x, y]);
|
|
18130
18213
|
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
18131
18214
|
ChartMark,
|
|
18132
18215
|
{
|
|
@@ -18179,12 +18262,12 @@ function ChartValueIsland({ name, value, x, y, color = "#2ec7c9", onDrop, resolv
|
|
|
18179
18262
|
}
|
|
18180
18263
|
|
|
18181
18264
|
// src/components/ChartPulseRing.tsx
|
|
18182
|
-
var
|
|
18265
|
+
var import_react75 = require("react");
|
|
18183
18266
|
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
18184
18267
|
function ChartPulseRing({ center, radius, scaleSize = 2, color = "gold", shadowBlur = 10, period = 15, progress, enabled = true }) {
|
|
18185
|
-
const id = (0,
|
|
18186
|
-
const [reduced, setReduced] = (0,
|
|
18187
|
-
(0,
|
|
18268
|
+
const id = (0, import_react75.useId)().replace(/:/g, ""), [phase, setPhase] = (0, import_react75.useState)(0);
|
|
18269
|
+
const [reduced, setReduced] = (0, import_react75.useState)(false);
|
|
18270
|
+
(0, import_react75.useEffect)(() => {
|
|
18188
18271
|
const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
18189
18272
|
setReduced(preference.matches);
|
|
18190
18273
|
let frame = 0;
|
|
@@ -18328,7 +18411,7 @@ function chartMarkerPath(kind, x, y, size) {
|
|
|
18328
18411
|
}
|
|
18329
18412
|
|
|
18330
18413
|
// src/components/ChartLargeMapPointCanvas.tsx
|
|
18331
|
-
var
|
|
18414
|
+
var import_react76 = require("react");
|
|
18332
18415
|
|
|
18333
18416
|
// src/components/largeMapPointPulse.ts
|
|
18334
18417
|
function largeMapPointPulse(elapsed, period, initial3, delay) {
|
|
@@ -18344,8 +18427,8 @@ function largeMapPointSize(size, pulse) {
|
|
|
18344
18427
|
// src/components/ChartLargeMapPointCanvas.tsx
|
|
18345
18428
|
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
18346
18429
|
function ChartLargeMapPointCanvas({ groups, width, height }) {
|
|
18347
|
-
const canvas = (0,
|
|
18348
|
-
(0,
|
|
18430
|
+
const canvas = (0, import_react76.useRef)(null), key = JSON.stringify(groups);
|
|
18431
|
+
(0, import_react76.useEffect)(() => {
|
|
18349
18432
|
const element = canvas.current, context = element?.getContext("2d");
|
|
18350
18433
|
if (!element || !context) return;
|
|
18351
18434
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -18404,12 +18487,12 @@ function ChartLargeMapPointCanvas({ groups, width, height }) {
|
|
|
18404
18487
|
}
|
|
18405
18488
|
|
|
18406
18489
|
// src/components/ChartCrosshair.tsx
|
|
18407
|
-
var
|
|
18490
|
+
var import_react77 = require("react");
|
|
18408
18491
|
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
18409
18492
|
function ChartCrosshair({ bounds, xDomain, yDomain, formatX = decimal, formatY = decimal }) {
|
|
18410
|
-
const ref = (0,
|
|
18411
|
-
const [point, setPoint] = (0,
|
|
18412
|
-
(0,
|
|
18493
|
+
const ref = (0, import_react77.useRef)(null);
|
|
18494
|
+
const [point, setPoint] = (0, import_react77.useState)(null);
|
|
18495
|
+
(0, import_react77.useEffect)(() => {
|
|
18413
18496
|
const svg = ref.current?.ownerSVGElement;
|
|
18414
18497
|
if (!svg) return;
|
|
18415
18498
|
const clear = () => setPoint(null);
|
|
@@ -18429,7 +18512,7 @@ function ChartCrosshair({ bounds, xDomain, yDomain, formatX = decimal, formatY =
|
|
|
18429
18512
|
svg.removeEventListener("pointercancel", clear);
|
|
18430
18513
|
};
|
|
18431
18514
|
}, [bounds.x, bounds.y, bounds.width, bounds.height]);
|
|
18432
|
-
(0,
|
|
18515
|
+
(0, import_react77.useEffect)(() => setPoint(null), [xDomain[0], xDomain[1], yDomain[0], yDomain[1]]);
|
|
18433
18516
|
const x = point ? xDomain[0] + (point.x - bounds.x) / bounds.width * (xDomain[1] - xDomain[0]) : 0;
|
|
18434
18517
|
const y = point ? yDomain[1] - (point.y - bounds.y) / bounds.height * (yDomain[1] - yDomain[0]) : 0;
|
|
18435
18518
|
return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("g", { ref, className: "sia-chart__crosshair", "aria-hidden": "true", children: [
|
|
@@ -18446,7 +18529,7 @@ function decimal(value) {
|
|
|
18446
18529
|
}
|
|
18447
18530
|
|
|
18448
18531
|
// src/components/HeatmapRasterLayer.tsx
|
|
18449
|
-
var
|
|
18532
|
+
var import_react78 = require("react");
|
|
18450
18533
|
|
|
18451
18534
|
// src/components/heatmapRaster.ts
|
|
18452
18535
|
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] }];
|
|
@@ -18493,9 +18576,9 @@ function rasterizeHeatmap(width, height, points, options = {}) {
|
|
|
18493
18576
|
// src/components/HeatmapRasterLayer.tsx
|
|
18494
18577
|
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
18495
18578
|
function HeatmapRaster({ width, height, points, options }) {
|
|
18496
|
-
const [url, setUrl] = (0,
|
|
18579
|
+
const [url, setUrl] = (0, import_react78.useState)();
|
|
18497
18580
|
const optionsKey = JSON.stringify(options);
|
|
18498
|
-
(0,
|
|
18581
|
+
(0, import_react78.useEffect)(() => {
|
|
18499
18582
|
const canvas = document.createElement("canvas");
|
|
18500
18583
|
canvas.width = width;
|
|
18501
18584
|
canvas.height = height;
|
|
@@ -18595,10 +18678,10 @@ function chordMatrixLayout(matrix, options = {}) {
|
|
|
18595
18678
|
}
|
|
18596
18679
|
|
|
18597
18680
|
// src/components/MatrixChordPlot.tsx
|
|
18598
|
-
var
|
|
18681
|
+
var import_react79 = require("react");
|
|
18599
18682
|
var import_jsx_runtime78 = require("react/jsx-runtime");
|
|
18600
18683
|
function MatrixChordPlot({ names, matrix, series, appearance, showNodeLabels = false, rotateNodeLabels = false, linkLabel, sort, sortSub, padAngle, clockwise, palette, geometry, legacySubSort = false, showScale = false }) {
|
|
18601
|
-
const [hoveredLink, setHoveredLink] = (0,
|
|
18684
|
+
const [hoveredLink, setHoveredLink] = (0, import_react79.useState)(null);
|
|
18602
18685
|
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;
|
|
18603
18686
|
const point = (angle) => [cx + Math.cos(angle) * r, cy + Math.sin(angle) * r];
|
|
18604
18687
|
return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("g", { className: "sia-chart__matrix-chord", children: [
|
|
@@ -18945,13 +19028,13 @@ function transferRadarSeries(panels, source, target, connector = " & ") {
|
|
|
18945
19028
|
}
|
|
18946
19029
|
|
|
18947
19030
|
// src/components/ChartRoamGroup.tsx
|
|
18948
|
-
var
|
|
19031
|
+
var import_react80 = require("react");
|
|
18949
19032
|
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
18950
19033
|
var initial2 = { x: 0, y: 0, scale: 1 };
|
|
18951
19034
|
function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true, ariaLabel, resetSignal = 0 }) {
|
|
18952
|
-
const group = (0,
|
|
18953
|
-
const [view, setView] = (0,
|
|
18954
|
-
(0,
|
|
19035
|
+
const group = (0, import_react80.useRef)(null), drag = (0, import_react80.useRef)();
|
|
19036
|
+
const [view, setView] = (0, import_react80.useState)(initial2);
|
|
19037
|
+
(0, import_react80.useEffect)(() => {
|
|
18955
19038
|
setView(initial2);
|
|
18956
19039
|
drag.current = void 0;
|
|
18957
19040
|
}, [resetSignal]);
|
|
@@ -18961,7 +19044,7 @@ function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true,
|
|
|
18961
19044
|
const local = new DOMPoint(clientX, clientY).matrixTransform(matrix.inverse());
|
|
18962
19045
|
return [local.x, local.y];
|
|
18963
19046
|
};
|
|
18964
|
-
(0,
|
|
19047
|
+
(0, import_react80.useEffect)(() => {
|
|
18965
19048
|
const target = group.current;
|
|
18966
19049
|
if (!target || !enabled || !zoomEnabled) return;
|
|
18967
19050
|
const wheel = (event) => {
|
|
@@ -19022,11 +19105,11 @@ function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true,
|
|
|
19022
19105
|
}
|
|
19023
19106
|
|
|
19024
19107
|
// src/components/TreeNodeGlyph.tsx
|
|
19025
|
-
var
|
|
19108
|
+
var import_react81 = require("react");
|
|
19026
19109
|
var import_jsx_runtime81 = require("react/jsx-runtime");
|
|
19027
19110
|
function TreeNodeGlyph({ symbol = "circle", x, y, width, height, color, itemStyle }) {
|
|
19028
|
-
const [failed, setFailed] = (0,
|
|
19029
|
-
(0,
|
|
19111
|
+
const [failed, setFailed] = (0, import_react81.useState)(false);
|
|
19112
|
+
(0, import_react81.useEffect)(() => setFailed(false), [symbol]);
|
|
19030
19113
|
const style = { fill: itemStyle.brushType === "stroke" ? "none" : color, stroke: itemStyle.borderColor, strokeWidth: itemStyle.borderWidth };
|
|
19031
19114
|
if (symbol.startsWith("image://")) return failed ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("g", { role: "img", "aria-label": "\u539F\u59CB\u8282\u70B9\u56FE\u7247\u52A0\u8F7D\u5931\u8D25", children: [
|
|
19032
19115
|
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)("rect", { x: x - width / 2, y: y - height / 2, width, height, fill: "none", stroke: "#999", strokeDasharray: "3 3" }),
|
|
@@ -19315,7 +19398,7 @@ function resolveMapRegionAppearance(base, datum, emphasized) {
|
|
|
19315
19398
|
}
|
|
19316
19399
|
|
|
19317
19400
|
// src/components/ChartBundledMapCanvas.tsx
|
|
19318
|
-
var
|
|
19401
|
+
var import_react82 = require("react");
|
|
19319
19402
|
|
|
19320
19403
|
// src/components/edgeBundling.ts
|
|
19321
19404
|
var distance = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]);
|
|
@@ -19459,9 +19542,9 @@ function sampleBundledPath(curves, progress) {
|
|
|
19459
19542
|
var import_jsx_runtime82 = require("react/jsx-runtime");
|
|
19460
19543
|
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 }) {
|
|
19461
19544
|
const signature = JSON.stringify(edges), pointKey = JSON.stringify(points), effectKey = JSON.stringify(effect);
|
|
19462
|
-
const paths = (0,
|
|
19463
|
-
const base = (0,
|
|
19464
|
-
(0,
|
|
19545
|
+
const paths = (0, import_react82.useMemo)(() => bundleEdges(JSON.parse(signature)).map((row) => ({ index: row.index, curves: smoothBundledPath(row.points, smoothness) })), [signature, smoothness]);
|
|
19546
|
+
const base = (0, import_react82.useRef)(null), moving = (0, import_react82.useRef)(null);
|
|
19547
|
+
(0, import_react82.useEffect)(() => {
|
|
19465
19548
|
const node = base.current, ctx = node?.getContext("2d");
|
|
19466
19549
|
if (!node || !ctx) return;
|
|
19467
19550
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -19487,7 +19570,7 @@ function ChartBundledMapCanvas({ edges, points = [], smoothness = 0.1, color = "
|
|
|
19487
19570
|
ctx.fill();
|
|
19488
19571
|
}
|
|
19489
19572
|
}, [paths, pointKey, width, height, color, opacity, lineWidth, pointColor, pointRadius]);
|
|
19490
|
-
(0,
|
|
19573
|
+
(0, import_react82.useEffect)(() => {
|
|
19491
19574
|
const node = moving.current, ctx = node?.getContext("2d");
|
|
19492
19575
|
if (!node || !ctx) return;
|
|
19493
19576
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -19549,11 +19632,11 @@ function ChartBundledMapCanvas({ edges, points = [], smoothness = 0.1, color = "
|
|
|
19549
19632
|
}
|
|
19550
19633
|
|
|
19551
19634
|
// src/components/ChartMapEffectCanvas.tsx
|
|
19552
|
-
var
|
|
19635
|
+
var import_react83 = require("react");
|
|
19553
19636
|
var import_jsx_runtime83 = require("react/jsx-runtime");
|
|
19554
19637
|
function ChartMapEffectCanvas({ effects, width, height, alpha = 0.95 }) {
|
|
19555
|
-
const canvas = (0,
|
|
19556
|
-
(0,
|
|
19638
|
+
const canvas = (0, import_react83.useRef)(null), key = JSON.stringify(effects);
|
|
19639
|
+
(0, import_react83.useEffect)(() => {
|
|
19557
19640
|
const element = canvas.current;
|
|
19558
19641
|
if (!element) return;
|
|
19559
19642
|
const context = element.getContext("2d");
|
|
@@ -19699,12 +19782,12 @@ function layoutTreeNodes(root, options = {}) {
|
|
|
19699
19782
|
}
|
|
19700
19783
|
|
|
19701
19784
|
// src/components/ChartDataEditor.tsx
|
|
19702
|
-
var
|
|
19785
|
+
var import_react84 = require("react");
|
|
19703
19786
|
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
19704
19787
|
function ChartDataEditor({ series, onApply, readOnly = false, allowNull = false }) {
|
|
19705
|
-
const [draft, setDraft] = (0,
|
|
19706
|
-
const [error, setError] = (0,
|
|
19707
|
-
const [applied, setApplied] = (0,
|
|
19788
|
+
const [draft, setDraft] = (0, import_react84.useState)(() => JSON.stringify(series.map((item) => item.data), null, 2));
|
|
19789
|
+
const [error, setError] = (0, import_react84.useState)("");
|
|
19790
|
+
const [applied, setApplied] = (0, import_react84.useState)(false);
|
|
19708
19791
|
function apply() {
|
|
19709
19792
|
try {
|
|
19710
19793
|
const values = JSON.parse(draft);
|
|
@@ -19735,11 +19818,11 @@ function ChartDataEditor({ series, onApply, readOnly = false, allowNull = false
|
|
|
19735
19818
|
}
|
|
19736
19819
|
|
|
19737
19820
|
// src/components/ChartBarStatistics.tsx
|
|
19738
|
-
var
|
|
19821
|
+
var import_react85 = require("react");
|
|
19739
19822
|
var import_jsx_runtime85 = require("react/jsx-runtime");
|
|
19740
19823
|
function ChartBarStatistics({ values, kinds, project, plot, horizontal, color, gradient, seriesName }) {
|
|
19741
|
-
const id = (0,
|
|
19742
|
-
const [active, setActive] = (0,
|
|
19824
|
+
const id = (0, import_react85.useId)().replaceAll(":", "");
|
|
19825
|
+
const [active, setActive] = (0, import_react85.useState)();
|
|
19743
19826
|
const paint = gradient ? `url(#${id})` : color;
|
|
19744
19827
|
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("g", { children: [
|
|
19745
19828
|
gradient ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime85.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_runtime85.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, i)) }) }) : null,
|
|
@@ -19794,7 +19877,7 @@ function lineSegments(points) {
|
|
|
19794
19877
|
}
|
|
19795
19878
|
|
|
19796
19879
|
// src/components/useBarMagicState.ts
|
|
19797
|
-
var
|
|
19880
|
+
var import_react86 = require("react");
|
|
19798
19881
|
|
|
19799
19882
|
// src/components/cartesianMagicState.ts
|
|
19800
19883
|
function changeCartesianMagic(state, action) {
|
|
@@ -19809,8 +19892,8 @@ function changeCartesianMagic(state, action) {
|
|
|
19809
19892
|
function useBarMagicState(toolbox, shape = "bar") {
|
|
19810
19893
|
const initial3 = { shape, layout: "original" };
|
|
19811
19894
|
const options = toolbox === true ? {} : typeof toolbox === "object" ? toolbox : void 0;
|
|
19812
|
-
const [state, setState] = (0,
|
|
19813
|
-
(0,
|
|
19895
|
+
const [state, setState] = (0, import_react86.useState)(() => changeCartesianMagic(initial3, options?.activeMagicType ?? shape));
|
|
19896
|
+
(0, import_react86.useEffect)(() => {
|
|
19814
19897
|
if (options?.activeMagicType) setState((s) => changeCartesianMagic(s, options.activeMagicType));
|
|
19815
19898
|
}, [options?.activeMagicType]);
|
|
19816
19899
|
const resolved = options ? { ...options, activeMagicType: state.shape, activeMagicTypes: options.activeMagicTypes ?? (state.layout === "original" ? [state.shape] : [state.shape, state.layout]), onMagicTypeChange: (action) => {
|
|
@@ -19824,7 +19907,7 @@ function useBarMagicState(toolbox, shape = "bar") {
|
|
|
19824
19907
|
}
|
|
19825
19908
|
|
|
19826
19909
|
// src/components/useBarValueTransfer.ts
|
|
19827
|
-
var
|
|
19910
|
+
var import_react87 = require("react");
|
|
19828
19911
|
|
|
19829
19912
|
// src/components/barTransfer.ts
|
|
19830
19913
|
function transferBarValue(series, source, target, categories) {
|
|
@@ -19841,10 +19924,10 @@ function transferBarValue(series, source, target, categories) {
|
|
|
19841
19924
|
|
|
19842
19925
|
// src/components/useBarValueTransfer.ts
|
|
19843
19926
|
function useBarValueTransfer(series, initial3, categories, enabled, publish, onError) {
|
|
19844
|
-
const [islands, setIslands] = (0,
|
|
19845
|
-
const drag = (0,
|
|
19846
|
-
const [offset, setOffset] = (0,
|
|
19847
|
-
(0,
|
|
19927
|
+
const [islands, setIslands] = (0, import_react87.useState)([]);
|
|
19928
|
+
const drag = (0, import_react87.useRef)();
|
|
19929
|
+
const [offset, setOffset] = (0, import_react87.useState)();
|
|
19930
|
+
(0, import_react87.useEffect)(() => {
|
|
19848
19931
|
setIslands([]);
|
|
19849
19932
|
drag.current = void 0;
|
|
19850
19933
|
setOffset(void 0);
|
|
@@ -19945,12 +20028,12 @@ function logarithmicValueAt(progress, domain) {
|
|
|
19945
20028
|
|
|
19946
20029
|
// src/components/Charts.tsx
|
|
19947
20030
|
var import_jsx_runtime86 = require("react/jsx-runtime");
|
|
19948
|
-
var
|
|
20031
|
+
var import_react89 = require("react");
|
|
19949
20032
|
var PLOT = { x: 62, y: 48, width: 628, height: 250 };
|
|
19950
20033
|
var PLOT_BOTTOM = PLOT.y + PLOT.height;
|
|
19951
20034
|
function useLegendSelection(names, controlled, onChange) {
|
|
19952
|
-
const [internal, setInternal] = (0,
|
|
19953
|
-
(0,
|
|
20035
|
+
const [internal, setInternal] = (0, import_react88.useState)(() => Object.fromEntries(names.map((name) => [name, true])));
|
|
20036
|
+
(0, import_react88.useEffect)(() => {
|
|
19954
20037
|
setInternal((current) => {
|
|
19955
20038
|
const next = { ...current };
|
|
19956
20039
|
names.forEach((name) => {
|
|
@@ -20050,7 +20133,7 @@ function lineSymbol(type, x, y, size, color, image, strokeWidth = 2) {
|
|
|
20050
20133
|
return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("circle", { cx: x, cy: y, r: size / 2, fill: color, stroke: "var(--sia-color-surface)", strokeWidth: 2 });
|
|
20051
20134
|
}
|
|
20052
20135
|
function useZoom(value, defaultValue, onChange) {
|
|
20053
|
-
const [internal, setInternal] = (0,
|
|
20136
|
+
const [internal, setInternal] = (0, import_react88.useState)([...defaultValue ?? [0, 100]]);
|
|
20054
20137
|
const current = value ?? internal;
|
|
20055
20138
|
const update = (next) => {
|
|
20056
20139
|
if (!value) setInternal(next);
|
|
@@ -20060,8 +20143,8 @@ function useZoom(value, defaultValue, onChange) {
|
|
|
20060
20143
|
}
|
|
20061
20144
|
function useToolboxMagicType(toolbox, fallback) {
|
|
20062
20145
|
const options = toolbox === true ? {} : typeof toolbox === "object" ? toolbox : void 0;
|
|
20063
|
-
const [internal, setInternal] = (0,
|
|
20064
|
-
(0,
|
|
20146
|
+
const [internal, setInternal] = (0, import_react88.useState)(options?.activeMagicType ?? fallback);
|
|
20147
|
+
(0, import_react88.useEffect)(() => {
|
|
20065
20148
|
if (options?.activeMagicType) setInternal(options.activeMagicType);
|
|
20066
20149
|
}, [options?.activeMagicType]);
|
|
20067
20150
|
const active = options?.activeMagicType ?? internal;
|
|
@@ -20079,15 +20162,15 @@ function useToolboxMagicType(toolbox, fallback) {
|
|
|
20079
20162
|
} : toolbox;
|
|
20080
20163
|
return [active, resolved];
|
|
20081
20164
|
}
|
|
20082
|
-
var LineChart = (0,
|
|
20083
|
-
const [hoverIndex, setHoverIndex] = (0,
|
|
20084
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
20085
|
-
const [dragPoint, setDragPoint] = (0,
|
|
20086
|
-
const linePaintId = (0,
|
|
20087
|
-
const [hoveredLinePoint, setHoveredLinePoint] = (0,
|
|
20088
|
-
(0,
|
|
20165
|
+
var LineChart = (0, import_react88.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) {
|
|
20166
|
+
const [hoverIndex, setHoverIndex] = (0, import_react88.useState)(null);
|
|
20167
|
+
const [editableSeries, setEditableSeries] = (0, import_react88.useState)(sourceSeries);
|
|
20168
|
+
const [dragPoint, setDragPoint] = (0, import_react88.useState)(null);
|
|
20169
|
+
const linePaintId = (0, import_react88.useId)().replaceAll(":", "");
|
|
20170
|
+
const [hoveredLinePoint, setHoveredLinePoint] = (0, import_react88.useState)();
|
|
20171
|
+
(0, import_react88.useEffect)(() => setEditableSeries(sourceSeries), [sourceSeries]);
|
|
20089
20172
|
const series = externalValueTransfer ? sourceSeries : editableSeries;
|
|
20090
|
-
const initialTransferSeries = (0,
|
|
20173
|
+
const initialTransferSeries = (0, import_react88.useMemo)(() => sourceSeries.map((item) => ({ ...item, data: item.data.map(lineValue) })), [sourceSeries]);
|
|
20091
20174
|
const localTransfer = useBarValueTransfer(series.map((item) => ({ ...item, data: item.data.map(lineValue) })), initialTransferSeries, categories, calculable && calculableMode === "transfer" && !externalValueTransfer, (nextBars) => {
|
|
20092
20175
|
const next = series.map((item, row) => ({ ...item, data: item.data.map((datum, index) => {
|
|
20093
20176
|
const value = barDatum(nextBars[row].data[index]).value;
|
|
@@ -20104,8 +20187,8 @@ var LineChart = (0, import_react87.forwardRef)(function LineChart2({ calculableM
|
|
|
20104
20187
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
20105
20188
|
const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
|
|
20106
20189
|
const inlineZoom = dataZoom && zoomControlBounds ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("foreignObject", { className: "sia-chart__inline-zoom sia-chart__inline-zoom--compact", ...withTitleTooltip(zoomControlBounds), children: /* @__PURE__ */ (0, import_jsx_runtime86.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;
|
|
20107
|
-
const [zoomBrushActive, setZoomBrushActive] = (0,
|
|
20108
|
-
const [zoomHistory, setZoomHistory] = (0,
|
|
20190
|
+
const [zoomBrushActive, setZoomBrushActive] = (0, import_react88.useState)(false);
|
|
20191
|
+
const [zoomHistory, setZoomHistory] = (0, import_react88.useState)(() => dataZoom ? [defaultZoom ?? zoom ?? [0, 100]] : []);
|
|
20109
20192
|
const zoomBrush = dataZoom && zoomBrushActive ? { minSelectionSize: zoomMinSelectionSize, selectionStyle: zoomSelectionStyle, selectionShape: zoomSelectionShape, bounds: PLOT2, onCancel: () => setZoomBrushActive(false), onSelect: (range) => {
|
|
20110
20193
|
const start = Math.min(...zoomValue), span = Math.max(...zoomValue) - start;
|
|
20111
20194
|
const next = [start + range[0] * span, start + range[1] * span];
|
|
@@ -20492,17 +20575,17 @@ function ChartPin({ point, color, label }) {
|
|
|
20492
20575
|
function barDatum(datum) {
|
|
20493
20576
|
return typeof datum === "number" ? { value: datum } : datum;
|
|
20494
20577
|
}
|
|
20495
|
-
var BarChart = (0,
|
|
20496
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
20497
|
-
const [dragBar, setDragBar] = (0,
|
|
20498
|
-
const [hoveredBar, setHoveredBar] = (0,
|
|
20499
|
-
const barPaintId = (0,
|
|
20578
|
+
var BarChart = (0, import_react88.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) {
|
|
20579
|
+
const [editableSeries, setEditableSeries] = (0, import_react88.useState)(sourceSeries);
|
|
20580
|
+
const [dragBar, setDragBar] = (0, import_react88.useState)(null);
|
|
20581
|
+
const [hoveredBar, setHoveredBar] = (0, import_react88.useState)();
|
|
20582
|
+
const barPaintId = (0, import_react88.useId)().replaceAll(":", "");
|
|
20500
20583
|
const localTransfer = useBarValueTransfer(editableSeries, sourceSeries, categories, calculable && calculableMode === "transfer" && !externalValueTransfer, (next) => {
|
|
20501
20584
|
setEditableSeries(next);
|
|
20502
20585
|
onDataChange?.(next);
|
|
20503
20586
|
}, onTransferError);
|
|
20504
20587
|
const transfer = externalValueTransfer ?? localTransfer;
|
|
20505
|
-
(0,
|
|
20588
|
+
(0, import_react88.useEffect)(() => setEditableSeries(sourceSeries), [sourceSeries]);
|
|
20506
20589
|
const series = externalValueTransfer ? sourceSeries : editableSeries;
|
|
20507
20590
|
const legacy = appearance === "macarons";
|
|
20508
20591
|
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 };
|
|
@@ -20749,17 +20832,17 @@ var BarChart = (0, import_react87.forwardRef)(function BarChart2({ valueTransfer
|
|
|
20749
20832
|
] }, `bar-island-${index}`)) : null
|
|
20750
20833
|
] });
|
|
20751
20834
|
});
|
|
20752
|
-
var ScatterChart = (0,
|
|
20753
|
-
const [data, setData] = (0,
|
|
20754
|
-
const [emphasizedPoint, setEmphasizedPoint] = (0,
|
|
20755
|
-
const [emphasizedAnnotation, setEmphasizedAnnotation] = (0,
|
|
20756
|
-
(0,
|
|
20835
|
+
var ScatterChart = (0, import_react88.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) {
|
|
20836
|
+
const [data, setData] = (0, import_react88.useState)(initialData);
|
|
20837
|
+
const [emphasizedPoint, setEmphasizedPoint] = (0, import_react88.useState)(null);
|
|
20838
|
+
const [emphasizedAnnotation, setEmphasizedAnnotation] = (0, import_react88.useState)();
|
|
20839
|
+
(0, import_react88.useEffect)(() => setData(initialData), [initialData]);
|
|
20757
20840
|
const plot = plotBounds ?? PLOT, bottom = plot.y + plot.height;
|
|
20758
20841
|
const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
|
|
20759
20842
|
const allCategories = [...new Set(data.map((item) => item.category).filter((value) => Boolean(value)))];
|
|
20760
20843
|
const legend = useLegendSelection(allCategories, legendSelected, onLegendSelectionChange);
|
|
20761
20844
|
const activeData = data.filter((item) => !item.category || legend.isSelected(item.category));
|
|
20762
|
-
const sorted = (0,
|
|
20845
|
+
const sorted = (0, import_react88.useMemo)(() => [...activeData].sort((left, right) => left.x - right.x), [activeData]);
|
|
20763
20846
|
const startIndex = dataZoom ? Math.floor(Math.min(...zoomValue) / 100 * Math.max(0, sorted.length - 1)) : 0;
|
|
20764
20847
|
const endIndex = dataZoom ? Math.max(startIndex + 1, Math.ceil(Math.max(...zoomValue) / 100 * sorted.length)) : sorted.length;
|
|
20765
20848
|
const categoryWindow = xCategories ? scatterCategoryWindow(xCategories, dataZoom ? zoomValue : [0, 100]) : void 0;
|
|
@@ -20774,10 +20857,10 @@ var ScatterChart = (0, import_react87.forwardRef)(function ScatterChart2({ symbo
|
|
|
20774
20857
|
const visualMinimum = visualMap?.min ?? (visualValues.length ? Math.min(...visualValues) : 0);
|
|
20775
20858
|
const visualMaximum = visualMap?.max ?? (visualValues.length ? Math.max(...visualValues) : 1);
|
|
20776
20859
|
const visualColors = visualMap?.colors ?? ["#e6f4ff", "#1677ff"];
|
|
20777
|
-
const [selectedPieces, setSelectedPieces] = (0,
|
|
20778
|
-
const [visualRange, setVisualRange] = (0,
|
|
20860
|
+
const [selectedPieces, setSelectedPieces] = (0, import_react88.useState)([]);
|
|
20861
|
+
const [visualRange, setVisualRange] = (0, import_react88.useState)();
|
|
20779
20862
|
const piecesKey = JSON.stringify(visualMap?.pieces ?? []);
|
|
20780
|
-
(0,
|
|
20863
|
+
(0, import_react88.useEffect)(() => setSelectedPieces([]), [piecesKey]);
|
|
20781
20864
|
const statistics = scatterStatistics(visibleData, markByCategory);
|
|
20782
20865
|
const plotted = visibleData.map((item, index) => {
|
|
20783
20866
|
const x = linearScale(categoryWindow ? categoryWindow.indexOf(item.x) : item.x, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]);
|
|
@@ -20935,8 +21018,8 @@ var ScatterChart = (0, import_react87.forwardRef)(function ScatterChart2({ symbo
|
|
|
20935
21018
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ChartDataZoom, { value: zoomValue, onChange: setZoomValue })
|
|
20936
21019
|
] }) : content;
|
|
20937
21020
|
});
|
|
20938
|
-
var CandlestickChart = (0,
|
|
20939
|
-
const [data, setData] = (0,
|
|
21021
|
+
var CandlestickChart = (0, import_react88.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) {
|
|
21022
|
+
const [data, setData] = (0, import_react88.useState)(initialData), [internalActive, setInternalActive] = (0, import_react88.useState)(null), [internalVisible, setInternalVisible] = (0, import_react88.useState)(true);
|
|
20940
21023
|
const active = activeIndex === void 0 ? internalActive : activeIndex;
|
|
20941
21024
|
const seriesVisible = controlledVisible ?? internalVisible;
|
|
20942
21025
|
const setActive = (index) => {
|
|
@@ -20947,7 +21030,7 @@ var CandlestickChart = (0, import_react87.forwardRef)(function CandlestickChart2
|
|
|
20947
21030
|
if (controlledVisible === void 0) setInternalVisible(visible);
|
|
20948
21031
|
onSeriesVisibilityChange?.(visible);
|
|
20949
21032
|
};
|
|
20950
|
-
(0,
|
|
21033
|
+
(0, import_react88.useEffect)(() => {
|
|
20951
21034
|
setData(initialData);
|
|
20952
21035
|
}, [initialData]);
|
|
20953
21036
|
const legacy = appearance === "macarons";
|
|
@@ -21038,20 +21121,20 @@ var CandlestickChart = (0, import_react87.forwardRef)(function CandlestickChart2
|
|
|
21038
21121
|
] }) : content;
|
|
21039
21122
|
});
|
|
21040
21123
|
var EMPTY_PIE_DATA = [];
|
|
21041
|
-
var PieChart = (0,
|
|
21042
|
-
const pieGradientId = (0,
|
|
21043
|
-
const [pieIslands, setPieIslands] = (0,
|
|
21044
|
-
const sourceRings = (0,
|
|
21045
|
-
const [editableRings, setEditableRings] = (0,
|
|
21046
|
-
const valueDrag = (0,
|
|
21047
|
-
const [valueOffset, setValueOffset] = (0,
|
|
21048
|
-
(0,
|
|
21124
|
+
var PieChart = (0, import_react88.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) {
|
|
21125
|
+
const pieGradientId = (0, import_react88.useId)().replace(/:/g, "");
|
|
21126
|
+
const [pieIslands, setPieIslands] = (0, import_react88.useState)([]);
|
|
21127
|
+
const sourceRings = (0, import_react88.useMemo)(() => series?.length ? series : [{ data, innerRadius, outerRadius, rose, showLabels }], [series, data, innerRadius, outerRadius, rose, showLabels]);
|
|
21128
|
+
const [editableRings, setEditableRings] = (0, import_react88.useState)(sourceRings);
|
|
21129
|
+
const valueDrag = (0, import_react88.useRef)(null);
|
|
21130
|
+
const [valueOffset, setValueOffset] = (0, import_react88.useState)();
|
|
21131
|
+
(0, import_react88.useEffect)(() => setEditableRings(sourceRings), [sourceRings]);
|
|
21049
21132
|
const allData = editableRings.flatMap((ring) => ring.data).filter((item) => !item.missing);
|
|
21050
21133
|
const names = [...new Set(allData.map((item) => item.name))];
|
|
21051
21134
|
const legend = useLegendSelection(names, legendSelected, onLegendSelectionChange);
|
|
21052
21135
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u997C\u56FE");
|
|
21053
|
-
const [hovered, setHovered] = (0,
|
|
21054
|
-
const [internalSelected, setInternalSelected] = (0,
|
|
21136
|
+
const [hovered, setHovered] = (0, import_react88.useState)();
|
|
21137
|
+
const [internalSelected, setInternalSelected] = (0, import_react88.useState)(() => [...defaultSelected ?? allData.filter((item) => item.selected).map((item) => item.name)]);
|
|
21055
21138
|
const selectedNames = selected ?? internalSelected;
|
|
21056
21139
|
const legacy = appearance === "macarons";
|
|
21057
21140
|
const colorNames = [...new Set(allData.filter((item) => item.showInLegend !== false).map((item) => item.name))];
|
|
@@ -21271,15 +21354,15 @@ var PieChart = (0, import_react87.forwardRef)(function PieChart2({ pulseRing, ca
|
|
|
21271
21354
|
});
|
|
21272
21355
|
var EMPTY_RADAR_INDICATORS = [];
|
|
21273
21356
|
var EMPTY_RADAR_SERIES = [];
|
|
21274
|
-
var RadarChart = (0,
|
|
21357
|
+
var RadarChart = (0, import_react88.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) {
|
|
21275
21358
|
const legacy = appearance === "macarons";
|
|
21276
|
-
const initialPanels = (0,
|
|
21277
|
-
const [sourcePanels, setSourcePanels] = (0,
|
|
21278
|
-
const [hoveredRadar, setHoveredRadar] = (0,
|
|
21279
|
-
const radarPaintId = `sia-radar-${(0,
|
|
21280
|
-
const radarDrag = (0,
|
|
21281
|
-
const [radarOffset, setRadarOffset] = (0,
|
|
21282
|
-
(0,
|
|
21359
|
+
const initialPanels = (0, import_react88.useMemo)(() => radars?.length ? radars : [{ indicators, series, levels }], [radars, indicators, series, levels]);
|
|
21360
|
+
const [sourcePanels, setSourcePanels] = (0, import_react88.useState)(initialPanels);
|
|
21361
|
+
const [hoveredRadar, setHoveredRadar] = (0, import_react88.useState)(null);
|
|
21362
|
+
const radarPaintId = `sia-radar-${(0, import_react88.useId)().replaceAll(":", "")}`;
|
|
21363
|
+
const radarDrag = (0, import_react88.useRef)(null);
|
|
21364
|
+
const [radarOffset, setRadarOffset] = (0, import_react88.useState)(null);
|
|
21365
|
+
(0, import_react88.useEffect)(() => {
|
|
21283
21366
|
setSourcePanels(initialPanels);
|
|
21284
21367
|
radarDrag.current = null;
|
|
21285
21368
|
setRadarOffset(null);
|
|
@@ -21433,7 +21516,7 @@ var RadarChart = (0, import_react87.forwardRef)(function RadarChart2({ indicator
|
|
|
21433
21516
|
})
|
|
21434
21517
|
] });
|
|
21435
21518
|
});
|
|
21436
|
-
var ChordChart = (0,
|
|
21519
|
+
var ChordChart = (0, import_react88.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) {
|
|
21437
21520
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u548C\u5F26");
|
|
21438
21521
|
if (/force|力导向|关系/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
21439
21522
|
GraphChart,
|
|
@@ -21506,11 +21589,11 @@ var ChordChart = (0, import_react87.forwardRef)(function ChordChart2({ nodes, li
|
|
|
21506
21589
|
})
|
|
21507
21590
|
] });
|
|
21508
21591
|
});
|
|
21509
|
-
var GraphChart = (0,
|
|
21592
|
+
var GraphChart = (0, import_react88.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) {
|
|
21510
21593
|
const categories = [...new Set(nodes.map((node) => node.category).filter((value) => Boolean(value)))];
|
|
21511
21594
|
const legend = useLegendSelection(categories, legendSelected, onLegendSelectionChange);
|
|
21512
21595
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, layout === "force" ? "\u529B\u5BFC\u5411" : "\u5173\u7CFB");
|
|
21513
|
-
const [roamReset, setRoamReset] = (0,
|
|
21596
|
+
const [roamReset, setRoamReset] = (0, import_react88.useState)(0);
|
|
21514
21597
|
const chartToolbox = typeof resolvedToolbox === "object" ? {
|
|
21515
21598
|
...resolvedToolbox,
|
|
21516
21599
|
onRestore: () => {
|
|
@@ -21519,23 +21602,23 @@ var GraphChart = (0, import_react87.forwardRef)(function GraphChart2({ nodes, li
|
|
|
21519
21602
|
resolvedToolbox.onRestore?.();
|
|
21520
21603
|
}
|
|
21521
21604
|
} : resolvedToolbox;
|
|
21522
|
-
const activeNodes = (0,
|
|
21523
|
-
const activeLinks = (0,
|
|
21605
|
+
const activeNodes = (0, import_react88.useMemo)(() => nodes.filter((node) => !node.category || legend.selected[node.category] !== false), [legend.selected, nodes]);
|
|
21606
|
+
const activeLinks = (0, import_react88.useMemo)(() => {
|
|
21524
21607
|
const activeIds = new Set(activeNodes.map((node) => node.id));
|
|
21525
21608
|
return links.filter((link) => activeIds.has(link.source) && activeIds.has(link.target));
|
|
21526
21609
|
}, [activeNodes, links]);
|
|
21527
21610
|
const progressive = progressiveForce && layout === "force" && props.animation !== false && !/chord|和弦/i.test(magicType);
|
|
21528
|
-
const calculatedPositions = (0,
|
|
21529
|
-
const [positions, setPositions] = (0,
|
|
21530
|
-
const [dragging, setDragging] = (0,
|
|
21531
|
-
const heldNode = (0,
|
|
21532
|
-
const [forceRestart, setForceRestart] = (0,
|
|
21533
|
-
(0,
|
|
21611
|
+
const calculatedPositions = (0, import_react88.useMemo)(() => graphLayout(activeNodes, activeLinks, layout === "force" && !progressive, forceOptions), [activeLinks, activeNodes, layout, forceOptions, progressive]);
|
|
21612
|
+
const [positions, setPositions] = (0, import_react88.useState)(calculatedPositions);
|
|
21613
|
+
const [dragging, setDragging] = (0, import_react88.useState)(null);
|
|
21614
|
+
const heldNode = (0, import_react88.useRef)(null);
|
|
21615
|
+
const [forceRestart, setForceRestart] = (0, import_react88.useState)(0);
|
|
21616
|
+
(0, import_react88.useEffect)(() => {
|
|
21534
21617
|
setPositions(calculatedPositions);
|
|
21535
21618
|
setDragging(null);
|
|
21536
21619
|
heldNode.current = null;
|
|
21537
21620
|
}, [calculatedPositions, roamReset]);
|
|
21538
|
-
(0,
|
|
21621
|
+
(0, import_react88.useEffect)(() => {
|
|
21539
21622
|
if (!progressive || activeNodes.length > (forceOptions?.maxNodes ?? 80)) return;
|
|
21540
21623
|
let frame = 0, remaining = Math.max(0, forceOptions?.iterations ?? 140), previous, carry = 0;
|
|
21541
21624
|
const tick = (time) => {
|
|
@@ -21653,7 +21736,7 @@ var GraphChart = (0, import_react87.forwardRef)(function GraphChart2({ nodes, li
|
|
|
21653
21736
|
] })
|
|
21654
21737
|
] });
|
|
21655
21738
|
});
|
|
21656
|
-
var ForceGraphChart = (0,
|
|
21739
|
+
var ForceGraphChart = (0, import_react88.forwardRef)(function ForceGraphChart2(props, ref) {
|
|
21657
21740
|
return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(GraphChart, { ...props, layout: "force", ref });
|
|
21658
21741
|
});
|
|
21659
21742
|
var ForceChart = ForceGraphChart;
|
|
@@ -21682,12 +21765,12 @@ function colorBetween(start, end, ratio) {
|
|
|
21682
21765
|
const to = read(end);
|
|
21683
21766
|
return `rgb(${from.map((value, index) => Math.round(value + ((to[index] ?? value) - value) * Math.max(0, Math.min(1, ratio)))).join(" ")})`;
|
|
21684
21767
|
}
|
|
21685
|
-
var MapChart = (0,
|
|
21686
|
-
const [internalSelected, setInternalSelected] = (0,
|
|
21768
|
+
var MapChart = (0, import_react88.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) {
|
|
21769
|
+
const [internalSelected, setInternalSelected] = (0, import_react88.useState)(() => [...defaultSelected ?? data.filter((item) => item.selected).map((item) => item.name)]);
|
|
21687
21770
|
const selectedNames = selected ?? internalSelected;
|
|
21688
|
-
const [hoveredRegion, setHoveredRegion] = (0,
|
|
21689
|
-
const [hoveredMarkPoint, setHoveredMarkPoint] = (0,
|
|
21690
|
-
const [internalHoveredValueRange, setHoveredValueRange] = (0,
|
|
21771
|
+
const [hoveredRegion, setHoveredRegion] = (0, import_react88.useState)();
|
|
21772
|
+
const [hoveredMarkPoint, setHoveredMarkPoint] = (0, import_react88.useState)();
|
|
21773
|
+
const [internalHoveredValueRange, setHoveredValueRange] = (0, import_react88.useState)();
|
|
21691
21774
|
const hoveredValueRange = emphasisValueRange ?? internalHoveredValueRange;
|
|
21692
21775
|
const roamControl = useMapRoam(roam, scaleLimit, wheelZoomFactors);
|
|
21693
21776
|
const { view } = roamControl;
|
|
@@ -21702,8 +21785,8 @@ var MapChart = (0, import_react87.forwardRef)(function MapChart2({ overlayProjec
|
|
|
21702
21785
|
const values = data.map((item) => item.value);
|
|
21703
21786
|
const minimum = valueDomain?.[0] ?? (values.length ? Math.min(...values) : 0);
|
|
21704
21787
|
const maximum = valueDomain?.[1] ?? (values.length ? Math.max(...values) : 1);
|
|
21705
|
-
const [internalVisualRange, setInternalVisualRange] = (0,
|
|
21706
|
-
(0,
|
|
21788
|
+
const [internalVisualRange, setInternalVisualRange] = (0, import_react88.useState)(() => [...defaultVisualRange ?? [minimum, maximum]]);
|
|
21789
|
+
(0, import_react88.useEffect)(() => {
|
|
21707
21790
|
if (!visualRange && !defaultVisualRange) setInternalVisualRange([minimum, maximum]);
|
|
21708
21791
|
}, [defaultVisualRange, maximum, minimum, visualRange]);
|
|
21709
21792
|
const currentVisualRange = visualRange ?? internalVisualRange;
|
|
@@ -21879,7 +21962,7 @@ var MapChart = (0, import_react87.forwardRef)(function MapChart2({ overlayProjec
|
|
|
21879
21962
|
roamController ? /* @__PURE__ */ (0, import_jsx_runtime86.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
|
|
21880
21963
|
] });
|
|
21881
21964
|
});
|
|
21882
|
-
var GaugeChart = (0,
|
|
21965
|
+
var GaugeChart = (0, import_react88.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) {
|
|
21883
21966
|
const count = Math.max(1, data.length);
|
|
21884
21967
|
const legacy = appearance === "macarons";
|
|
21885
21968
|
return /* @__PURE__ */ (0, import_jsx_runtime86.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) => {
|
|
@@ -21962,12 +22045,12 @@ var GaugeChart = (0, import_react87.forwardRef)(function GaugeChart2({ tooltipFo
|
|
|
21962
22045
|
] }, `${item.name}-${index}`);
|
|
21963
22046
|
}) });
|
|
21964
22047
|
});
|
|
21965
|
-
var FunnelChart = (0,
|
|
22048
|
+
var FunnelChart = (0, import_react88.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) {
|
|
21966
22049
|
const legacy = appearance === "macarons";
|
|
21967
|
-
const [activeFunnel, setActiveFunnel] = (0,
|
|
21968
|
-
const initialFunnels = (0,
|
|
21969
|
-
const [sourceFunnels, setSourceFunnels] = (0,
|
|
21970
|
-
(0,
|
|
22050
|
+
const [activeFunnel, setActiveFunnel] = (0, import_react88.useState)(null);
|
|
22051
|
+
const initialFunnels = (0, import_react88.useMemo)(() => series?.length ? series : [{ data, sort, gap, align, orientation }], [series, data, sort, gap, align, orientation]);
|
|
22052
|
+
const [sourceFunnels, setSourceFunnels] = (0, import_react88.useState)(initialFunnels);
|
|
22053
|
+
(0, import_react88.useEffect)(() => setSourceFunnels(initialFunnels), [initialFunnels]);
|
|
21971
22054
|
const allData = sourceFunnels.flatMap((funnel) => funnel.data);
|
|
21972
22055
|
const legendData = [...new Map(allData.map((item) => [item.name, item])).values()];
|
|
21973
22056
|
const legend = useLegendSelection(legendData.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -22058,7 +22141,7 @@ var FunnelChart = (0, import_react87.forwardRef)(function FunnelChart2({ data =
|
|
|
22058
22141
|
})
|
|
22059
22142
|
] });
|
|
22060
22143
|
});
|
|
22061
|
-
var HeatmapChart = (0,
|
|
22144
|
+
var HeatmapChart = (0, import_react88.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) {
|
|
22062
22145
|
const pointMode = points.length > 0;
|
|
22063
22146
|
const values = pointMode ? points.map((point) => point.value) : data.flatMap((row) => [...row]);
|
|
22064
22147
|
const minimum = values.length ? Math.min(...values) : 0;
|
|
@@ -22067,7 +22150,7 @@ var HeatmapChart = (0, import_react87.forwardRef)(function HeatmapChart2({ raste
|
|
|
22067
22150
|
const cellHeight = PLOT.height / Math.max(1, yLabels.length);
|
|
22068
22151
|
const pointXDomain = niceChartDomain(points.map((point) => point.x), false);
|
|
22069
22152
|
const pointYDomain = niceChartDomain(points.map((point) => point.y), false);
|
|
22070
|
-
const filterId = `sia-heat-${(0,
|
|
22153
|
+
const filterId = `sia-heat-${(0, import_react88.useId)().replaceAll(":", "")}`;
|
|
22071
22154
|
if (raster) return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(SiaChart, { ...props, ref, empty: !points.length, ariaLabel: props.ariaLabel ?? "\u50CF\u7D20\u70ED\u529B\u56FE", children: [
|
|
22072
22155
|
raster.backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("image", { href: raster.backgroundImage, x: 0, y: 0, width: raster.width, height: raster.height, preserveAspectRatio: "none", pointerEvents: "none" }) : null,
|
|
22073
22156
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(HeatmapRaster, { width: raster.width, height: raster.height, points, options: raster })
|
|
@@ -22103,7 +22186,7 @@ var HeatmapChart = (0, import_react87.forwardRef)(function HeatmapChart2({ raste
|
|
|
22103
22186
|
] })
|
|
22104
22187
|
] });
|
|
22105
22188
|
});
|
|
22106
|
-
var ThemeRiverChart = (0,
|
|
22189
|
+
var ThemeRiverChart = (0, import_react88.forwardRef)(function ThemeRiverChart2({ categories, series, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, ...props }, ref) {
|
|
22107
22190
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
22108
22191
|
const activeSeries = series.filter((item) => legend.isSelected(item.name));
|
|
22109
22192
|
const totals = categories.map((_, index) => activeSeries.reduce((sum, item) => sum + Math.max(0, item.data[index] ?? 0), 0));
|
|
@@ -22141,8 +22224,8 @@ function eventTime(value) {
|
|
|
22141
22224
|
if (typeof value === "number") return value;
|
|
22142
22225
|
return Date.parse(/^\d{4}-\d{2}-\d{2}$/.test(value) ? value.replace(/-/g, "/") : value);
|
|
22143
22226
|
}
|
|
22144
|
-
var EventRiverChart = (0,
|
|
22145
|
-
const [restoreVersion, setRestoreVersion] = (0,
|
|
22227
|
+
var EventRiverChart = (0, import_react88.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) {
|
|
22228
|
+
const [restoreVersion, setRestoreVersion] = (0, import_react88.useState)(0);
|
|
22146
22229
|
const area = plot;
|
|
22147
22230
|
palette = palette ?? (appearance === "macarons" ? ["#2ec7c9", "#b6a2de"] : void 0);
|
|
22148
22231
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -22215,9 +22298,9 @@ function vennDistance(radiusA, radiusB, overlap) {
|
|
|
22215
22298
|
}
|
|
22216
22299
|
return (low + high) / 2;
|
|
22217
22300
|
}
|
|
22218
|
-
var VennChart = (0,
|
|
22219
|
-
const [sets, setSets] = (0,
|
|
22220
|
-
(0,
|
|
22301
|
+
var VennChart = (0, import_react88.forwardRef)(function VennChart2({ sets: initialSets, intersection: initialIntersection, appearance = "sia", emphasisColor, emphasisBorderColor, emphasisBorderWidth, onDataClick, palette, toolbox, ...props }, ref) {
|
|
22302
|
+
const [sets, setSets] = (0, import_react88.useState)(initialSets), [intersection, setIntersection] = (0, import_react88.useState)(initialIntersection), [active, setActive] = (0, import_react88.useState)();
|
|
22303
|
+
(0, import_react88.useEffect)(() => {
|
|
22221
22304
|
setSets(initialSets);
|
|
22222
22305
|
setIntersection(initialIntersection);
|
|
22223
22306
|
}, [initialSets, initialIntersection]);
|
|
@@ -22280,17 +22363,17 @@ function layoutTreemap(nodes, x, y, width, height, gap, maxDepth, depth = 0, see
|
|
|
22280
22363
|
});
|
|
22281
22364
|
return result;
|
|
22282
22365
|
}
|
|
22283
|
-
var TreemapChart = (0,
|
|
22284
|
-
const [path, setPath] = (0,
|
|
22285
|
-
const [sourceData, setSourceData] = (0,
|
|
22286
|
-
const [active, setActive] = (0,
|
|
22287
|
-
(0,
|
|
22366
|
+
var TreemapChart = (0, import_react88.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) {
|
|
22367
|
+
const [path, setPath] = (0, import_react88.useState)([]);
|
|
22368
|
+
const [sourceData, setSourceData] = (0, import_react88.useState)(data);
|
|
22369
|
+
const [active, setActive] = (0, import_react88.useState)();
|
|
22370
|
+
(0, import_react88.useEffect)(() => {
|
|
22288
22371
|
setSourceData(data);
|
|
22289
22372
|
setPath([]);
|
|
22290
22373
|
}, [data]);
|
|
22291
22374
|
const currentData = path.reduce((nodes, name) => nodes.find((node) => node.name === name)?.children ?? nodes, sourceData);
|
|
22292
22375
|
const top = drilldown && showBreadcrumb ? 52 : 28;
|
|
22293
|
-
const rectangles = (0,
|
|
22376
|
+
const rectangles = (0, import_react88.useMemo)(() => layoutTreemap(currentData, bounds?.x ?? 24, bounds?.y ?? top, bounds?.width ?? 672, bounds?.height ?? 336 - top, gap, maxDepth), [currentData, gap, maxDepth, top, bounds]);
|
|
22294
22377
|
const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ChartDataEditor, { readOnly: toolbox.dataViewReadOnly, series: currentData.map((node) => ({ name: node.name, data: [treemapValue(node)] })), onApply: (values) => {
|
|
22295
22378
|
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);
|
|
22296
22379
|
setSourceData(update(sourceData, 0));
|
|
@@ -22358,15 +22441,15 @@ function flattenTree2(root, collapsed) {
|
|
|
22358
22441
|
visit(root, 0);
|
|
22359
22442
|
return { nodes, leafCount: Math.max(1, leafOrder), maxDepth: Math.max(0, ...nodes.map((item) => item.depth)) };
|
|
22360
22443
|
}
|
|
22361
|
-
var TreeChart = (0,
|
|
22362
|
-
const [sourceData, setSourceData] = (0,
|
|
22363
|
-
const [roamReset, setRoamReset] = (0,
|
|
22364
|
-
const [active, setActive] = (0,
|
|
22365
|
-
(0,
|
|
22444
|
+
var TreeChart = (0, import_react88.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) {
|
|
22445
|
+
const [sourceData, setSourceData] = (0, import_react88.useState)(data);
|
|
22446
|
+
const [roamReset, setRoamReset] = (0, import_react88.useState)(0);
|
|
22447
|
+
const [active, setActive] = (0, import_react88.useState)();
|
|
22448
|
+
(0, import_react88.useEffect)(() => {
|
|
22366
22449
|
setSourceData(data);
|
|
22367
22450
|
setActive(void 0);
|
|
22368
22451
|
}, [data]);
|
|
22369
|
-
const [collapsed, setCollapsed] = (0,
|
|
22452
|
+
const [collapsed, setCollapsed] = (0, import_react88.useState)(() => {
|
|
22370
22453
|
const result = /* @__PURE__ */ new Set();
|
|
22371
22454
|
const visit = (node) => {
|
|
22372
22455
|
if (node.collapsed) result.add(node.name);
|
|
@@ -22375,8 +22458,8 @@ var TreeChart = (0, import_react87.forwardRef)(function TreeChart2({ data, itemS
|
|
|
22375
22458
|
visit(data);
|
|
22376
22459
|
return result;
|
|
22377
22460
|
});
|
|
22378
|
-
const layout = (0,
|
|
22379
|
-
const fixedLayout = (0,
|
|
22461
|
+
const layout = (0, import_react88.useMemo)(() => flattenTree2(sourceData, collapsed), [collapsed, sourceData]);
|
|
22462
|
+
const fixedLayout = (0, import_react88.useMemo)(() => {
|
|
22380
22463
|
const visible = (node) => ({ ...node, children: collapsed.has(node.name) ? [] : node.children?.map(visible) });
|
|
22381
22464
|
return rootPosition ? layoutTreeNodes(visible(sourceData), { nodeSize, nodePadding, layerPadding, rootPosition, orientation }) : void 0;
|
|
22382
22465
|
}, [sourceData, collapsed, rootPosition, nodeSize, nodePadding, layerPadding, orientation]);
|
|
@@ -22446,15 +22529,15 @@ var TreeChart = (0, import_react87.forwardRef)(function TreeChart2({ data, itemS
|
|
|
22446
22529
|
})
|
|
22447
22530
|
] }) });
|
|
22448
22531
|
});
|
|
22449
|
-
var WordCloudChart = (0,
|
|
22450
|
-
const placements = (0,
|
|
22532
|
+
var WordCloudChart = (0, import_react88.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) {
|
|
22533
|
+
const placements = (0, import_react88.useMemo)(() => {
|
|
22451
22534
|
const context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
|
|
22452
22535
|
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) => {
|
|
22453
22536
|
context.font = `${word.fontWeight ?? fontWeight} ${size}px ${word.fontFamily ?? fontFamily ?? "Arial"}`;
|
|
22454
22537
|
return context.measureText(word.name).width;
|
|
22455
22538
|
} : void 0 });
|
|
22456
22539
|
}, [data, bounds, autoFit, areaSizing, maxFontSize, minFontSize, padding, rotations, shape, spiralStep, fontFamily, fontWeight]);
|
|
22457
|
-
(0,
|
|
22540
|
+
(0, import_react88.useEffect)(() => {
|
|
22458
22541
|
const present = new Set(placements.map((p) => p.index));
|
|
22459
22542
|
onLayout?.({ placed: placements.length, unplaced: data.filter((_, i) => !present.has(i)).map((item) => item.name) });
|
|
22460
22543
|
}, [placements, data, onLayout]);
|
|
@@ -22463,30 +22546,30 @@ var WordCloudChart = (0, import_react87.forwardRef)(function WordCloudChart2({ d
|
|
|
22463
22546
|
return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ChartMark, { label: `${placement.item.name}\uFF0C${placement.item.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.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}`);
|
|
22464
22547
|
}) });
|
|
22465
22548
|
});
|
|
22466
|
-
var MixedChart = (0,
|
|
22467
|
-
const plotClipId = `sia-mixed-plot-${(0,
|
|
22468
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
22469
|
-
const [geometry, setGeometry] = (0,
|
|
22470
|
-
const [pointerIndex, setPointerIndex] = (0,
|
|
22471
|
-
const [pointerAxisIndex, setPointerAxisIndex] = (0,
|
|
22472
|
-
const [motionRevision, setMotionRevision] = (0,
|
|
22473
|
-
const [stackMode, setStackMode] = (0,
|
|
22474
|
-
const lastPublished = (0,
|
|
22549
|
+
var MixedChart = (0, import_react88.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) {
|
|
22550
|
+
const plotClipId = `sia-mixed-plot-${(0, import_react88.useId)().replaceAll(":", "")}`;
|
|
22551
|
+
const [editableSeries, setEditableSeries] = (0, import_react88.useState)(sourceSeries);
|
|
22552
|
+
const [geometry, setGeometry] = (0, import_react88.useState)();
|
|
22553
|
+
const [pointerIndex, setPointerIndex] = (0, import_react88.useState)(null);
|
|
22554
|
+
const [pointerAxisIndex, setPointerAxisIndex] = (0, import_react88.useState)(0);
|
|
22555
|
+
const [motionRevision, setMotionRevision] = (0, import_react88.useState)(0);
|
|
22556
|
+
const [stackMode, setStackMode] = (0, import_react88.useState)();
|
|
22557
|
+
const lastPublished = (0, import_react88.useRef)(null);
|
|
22475
22558
|
const publishData = (next) => {
|
|
22476
22559
|
lastPublished.current = next;
|
|
22477
22560
|
onDataChange?.(next);
|
|
22478
22561
|
};
|
|
22479
|
-
const [islands, setIslands] = (0,
|
|
22480
|
-
const drag = (0,
|
|
22481
|
-
const [dragOffset, setDragOffset] = (0,
|
|
22482
|
-
(0,
|
|
22562
|
+
const [islands, setIslands] = (0, import_react88.useState)([]);
|
|
22563
|
+
const drag = (0, import_react88.useRef)(null);
|
|
22564
|
+
const [dragOffset, setDragOffset] = (0, import_react88.useState)();
|
|
22565
|
+
(0, import_react88.useEffect)(() => {
|
|
22483
22566
|
if (sourceSeries === lastPublished.current) return;
|
|
22484
22567
|
setEditableSeries(sourceSeries);
|
|
22485
22568
|
setIslands([]);
|
|
22486
22569
|
drag.current = null;
|
|
22487
22570
|
setDragOffset(void 0);
|
|
22488
22571
|
}, [sourceSeries]);
|
|
22489
|
-
const series = (0,
|
|
22572
|
+
const series = (0, import_react88.useMemo)(() => editableSeries.map((item) => geometry ? { ...item, type: geometry } : item), [editableSeries, geometry]);
|
|
22490
22573
|
const stacked = stackMode ?? sourceStacked;
|
|
22491
22574
|
const PLOT2 = plotBounds ?? { x: 62, y: 48, width: 628, height: 250 }, PLOT_BOTTOM2 = PLOT2.y + PLOT2.height;
|
|
22492
22575
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -22650,7 +22733,7 @@ var MixedChart = (0, import_react87.forwardRef)(function MixedChart2({ axisPoint
|
|
|
22650
22733
|
})
|
|
22651
22734
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CartesianAxes, { categories, domain, band: categoryGap }),
|
|
22652
22735
|
activeIndex != null && activeIndex >= 0 && activeIndex < categories.length ? /* @__PURE__ */ (0, import_jsx_runtime86.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,
|
|
22653
|
-
tooltipTrigger === "axis" ? categories.map((name, index) => /* @__PURE__ */ (0,
|
|
22736
|
+
tooltipTrigger === "axis" ? categories.map((name, index) => /* @__PURE__ */ (0, import_react89.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_runtime86.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,
|
|
22654
22737
|
calculable ? activeSeries.flatMap((item) => item.data.map((value, index) => value === null ? /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.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,
|
|
22655
22738
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("clipPath", { id: plotClipId, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("rect", { x: PLOT2.x, y: PLOT2.y, width: PLOT2.width, height: PLOT2.height }) }) }),
|
|
22656
22739
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("g", { "data-mixed-plot": "", clipPath: clipPlot ? `url(#${plotClipId})` : void 0, children: renderSeries.map((item) => {
|
|
@@ -22689,7 +22772,7 @@ var MixedChart = (0, import_react87.forwardRef)(function MixedChart2({ axisPoint
|
|
|
22689
22772
|
const zero = linearScale(placement.start, [valueDomain[0], valueDomain[1]], [PLOT_BOTTOM2, PLOT2.y]);
|
|
22690
22773
|
const rectY = barSpacing?.pixelAlign ? Math.floor(Math.min(y, zero)) : Math.min(y, zero);
|
|
22691
22774
|
const rectHeight = barSpacing?.pixelAlign ? Math.ceil(Math.abs(zero - y)) : Math.abs(zero - y);
|
|
22692
|
-
return /* @__PURE__ */ (0, import_jsx_runtime86.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,
|
|
22775
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.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_react89.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_runtime86.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }), tooltipPoint: [props.tooltipProps?.placement === "axis" ? Math.round(categoryAt(index)) : x + width / 2, y], onPointerUp: (event) => {
|
|
22693
22776
|
if (!finishDrag(event)) onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event });
|
|
22694
22777
|
} }, /* @__PURE__ */ (0, import_jsx_runtime86.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}`);
|
|
22695
22778
|
})
|
|
@@ -22718,7 +22801,7 @@ var MixedChart = (0, import_react87.forwardRef)(function MixedChart2({ axisPoint
|
|
|
22718
22801
|
if (!placements[index]) return null;
|
|
22719
22802
|
const name = categoryName(index, item.categoryAxisIndex);
|
|
22720
22803
|
const value = item.data[index] ?? 0;
|
|
22721
|
-
return /* @__PURE__ */ (0,
|
|
22804
|
+
return /* @__PURE__ */ (0, import_react89.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_runtime86.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }), tooltipPoint: props.tooltipProps?.placement === "axis" ? [Math.round(point[0]), point[1]] : point, onPointerUp: (event) => {
|
|
22722
22805
|
if (!finishDrag(event)) onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event });
|
|
22723
22806
|
} }, /* @__PURE__ */ (0, import_jsx_runtime86.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 }));
|
|
22724
22807
|
})
|
|
@@ -22759,9 +22842,9 @@ var KLineChart = CandlestickChart;
|
|
|
22759
22842
|
|
|
22760
22843
|
// src/components/LineShareChart.tsx
|
|
22761
22844
|
var import_jsx_runtime87 = require("react/jsx-runtime");
|
|
22762
|
-
var LineShareChart = (0,
|
|
22763
|
-
const [selected, setSelected] = (0,
|
|
22764
|
-
const [maskHovered, setMaskHovered] = (0,
|
|
22845
|
+
var LineShareChart = (0, import_react90.forwardRef)(function LineShareChart2({ data, lineColor = "#2ec7c9", shareColor = "#b6a2de", ...props }, ref) {
|
|
22846
|
+
const [selected, setSelected] = (0, import_react90.useState)(null);
|
|
22847
|
+
const [maskHovered, setMaskHovered] = (0, import_react90.useState)(false);
|
|
22765
22848
|
const width = props.viewBoxSize?.[0] ?? 900, height = props.viewBoxSize?.[1] ?? 450;
|
|
22766
22849
|
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;
|
|
22767
22850
|
const maximum = data.reduce((best, item2, i) => item2.value >= data[best].value ? i : best, 0);
|
|
@@ -22839,16 +22922,16 @@ function paddedValueExtent(values, padding = 0.05) {
|
|
|
22839
22922
|
}
|
|
22840
22923
|
|
|
22841
22924
|
// src/components/XYChart.tsx
|
|
22842
|
-
var
|
|
22925
|
+
var import_react91 = require("react");
|
|
22843
22926
|
var import_jsx_runtime88 = require("react/jsx-runtime");
|
|
22844
|
-
var XYChart = (0,
|
|
22845
|
-
const [series, setSeries] = (0,
|
|
22846
|
-
const [hidden, setHidden] = (0,
|
|
22847
|
-
const [crosshair, setCrosshair] = (0,
|
|
22848
|
-
const [drag, setDrag] = (0,
|
|
22849
|
-
const [geometry, setGeometry] = (0,
|
|
22850
|
-
const [zoom, setZoom] = (0,
|
|
22851
|
-
(0,
|
|
22927
|
+
var XYChart = (0, import_react91.forwardRef)(function XYChart2({ series: source, xDomain, yDomain, animationProgress, calculable = false, onDataChange, xAxisType = "value", xFormatter, tooltipFormatter, dataZoom = false, defaultZoom = [0, 100], onZoomChange, toolbox, ...props }, ref) {
|
|
22928
|
+
const [series, setSeries] = (0, import_react91.useState)(source);
|
|
22929
|
+
const [hidden, setHidden] = (0, import_react91.useState)([]);
|
|
22930
|
+
const [crosshair, setCrosshair] = (0, import_react91.useState)();
|
|
22931
|
+
const [drag, setDrag] = (0, import_react91.useState)();
|
|
22932
|
+
const [geometry, setGeometry] = (0, import_react91.useState)();
|
|
22933
|
+
const [zoom, setZoom] = (0, import_react91.useState)(defaultZoom);
|
|
22934
|
+
(0, import_react91.useEffect)(() => setSeries(source), [source]);
|
|
22852
22935
|
const window2 = dataZoom || xAxisType === "time" ? scatterValueWindow(series.flatMap((item) => item.data.map((point) => point[0])), dataZoom ? zoom : [0, 100]) : void 0;
|
|
22853
22936
|
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 }));
|
|
22854
22937
|
const width = props.viewBoxSize?.[0] ?? 663, height = props.viewBoxSize?.[1] ?? 379;
|
|
@@ -22977,7 +23060,7 @@ var XYChart = (0, import_react90.forwardRef)(function XYChart2({ series: source,
|
|
|
22977
23060
|
});
|
|
22978
23061
|
|
|
22979
23062
|
// src/components/ChartMapOverlay.tsx
|
|
22980
|
-
var
|
|
23063
|
+
var import_react92 = require("react");
|
|
22981
23064
|
|
|
22982
23065
|
// src/components/mapOverlayHost.ts
|
|
22983
23066
|
function observeMapOverlayHost(host, onChange) {
|
|
@@ -23016,11 +23099,11 @@ function observeMapOverlayHost(host, onChange) {
|
|
|
23016
23099
|
// src/components/ChartMapOverlay.tsx
|
|
23017
23100
|
var import_jsx_runtime89 = require("react/jsx-runtime");
|
|
23018
23101
|
function ChartMapOverlay({ createHost, children, className, style, ariaLabel = "\u5730\u56FE\u53E0\u52A0\u56FE\u8868", onError }) {
|
|
23019
|
-
const container = (0,
|
|
23020
|
-
const errorHandler = (0,
|
|
23102
|
+
const container = (0, import_react92.useRef)(null);
|
|
23103
|
+
const errorHandler = (0, import_react92.useRef)(onError);
|
|
23021
23104
|
errorHandler.current = onError;
|
|
23022
|
-
const [snapshot, setSnapshot] = (0,
|
|
23023
|
-
(0,
|
|
23105
|
+
const [snapshot, setSnapshot] = (0, import_react92.useState)();
|
|
23106
|
+
(0, import_react92.useEffect)(() => {
|
|
23024
23107
|
setSnapshot(void 0);
|
|
23025
23108
|
if (!container.current) return;
|
|
23026
23109
|
try {
|
|
@@ -23097,9 +23180,9 @@ function createBaiduMapHost(element, sdk, options) {
|
|
|
23097
23180
|
}
|
|
23098
23181
|
|
|
23099
23182
|
// src/components/InputSelect.tsx
|
|
23100
|
-
var
|
|
23183
|
+
var import_react93 = require("react");
|
|
23101
23184
|
var import_jsx_runtime90 = require("react/jsx-runtime");
|
|
23102
|
-
var InputSelect = (0,
|
|
23185
|
+
var InputSelect = (0, import_react93.forwardRef)(function InputSelect2({
|
|
23103
23186
|
options,
|
|
23104
23187
|
value,
|
|
23105
23188
|
defaultValue,
|
|
@@ -23125,22 +23208,22 @@ var InputSelect = (0, import_react92.forwardRef)(function InputSelect2({
|
|
|
23125
23208
|
...inputProps
|
|
23126
23209
|
}, forwardedRef) {
|
|
23127
23210
|
const size = useControlSize(sizeProp);
|
|
23128
|
-
const [internal, setInternal] = (0,
|
|
23211
|
+
const [internal, setInternal] = (0, import_react93.useState)(defaultValue);
|
|
23129
23212
|
const current = value !== void 0 ? value : internal;
|
|
23130
23213
|
const values = current == null ? [] : Array.isArray(current) ? current : [current];
|
|
23131
23214
|
const text = values.map((item) => displayField === "label" ? String(options.find((option) => option.optionType !== "divider" && option.value === item)?.label ?? item) : String(item)).join(",");
|
|
23132
|
-
const [draft, setDraft] = (0,
|
|
23133
|
-
(0,
|
|
23215
|
+
const [draft, setDraft] = (0, import_react93.useState)(text);
|
|
23216
|
+
(0, import_react93.useEffect)(() => {
|
|
23134
23217
|
setDraft(text);
|
|
23135
23218
|
}, [text, current]);
|
|
23136
|
-
const [open, setOpen] = (0,
|
|
23137
|
-
const [search, setSearch] = (0,
|
|
23138
|
-
const [modalOpen, setModalOpen] = (0,
|
|
23139
|
-
const [modalValues, setModalValues] = (0,
|
|
23140
|
-
const [selectedOnly, setSelectedOnly] = (0,
|
|
23141
|
-
const rootRef = (0,
|
|
23142
|
-
const popupRef = (0,
|
|
23143
|
-
const inputRef = (0,
|
|
23219
|
+
const [open, setOpen] = (0, import_react93.useState)(false);
|
|
23220
|
+
const [search, setSearch] = (0, import_react93.useState)("");
|
|
23221
|
+
const [modalOpen, setModalOpen] = (0, import_react93.useState)(false);
|
|
23222
|
+
const [modalValues, setModalValues] = (0, import_react93.useState)([]);
|
|
23223
|
+
const [selectedOnly, setSelectedOnly] = (0, import_react93.useState)(false);
|
|
23224
|
+
const rootRef = (0, import_react93.useRef)(null);
|
|
23225
|
+
const popupRef = (0, import_react93.useRef)(null);
|
|
23226
|
+
const inputRef = (0, import_react93.useRef)(null);
|
|
23144
23227
|
const config = typeof enableModal === "object" ? enableModal : {};
|
|
23145
23228
|
function changeOpen(next) {
|
|
23146
23229
|
if (next && (disabled || loading)) return;
|
|
@@ -23160,7 +23243,7 @@ var InputSelect = (0, import_react92.forwardRef)(function InputSelect2({
|
|
|
23160
23243
|
inputRef.current?.focus();
|
|
23161
23244
|
}
|
|
23162
23245
|
}
|
|
23163
|
-
(0,
|
|
23246
|
+
(0, import_react93.useEffect)(() => {
|
|
23164
23247
|
if (!open) return;
|
|
23165
23248
|
const outside = (event) => {
|
|
23166
23249
|
if (!rootRef.current?.contains(event.target) && !popupRef.current?.contains(event.target)) changeOpen(false);
|
|
@@ -23168,7 +23251,7 @@ var InputSelect = (0, import_react92.forwardRef)(function InputSelect2({
|
|
|
23168
23251
|
document.addEventListener("pointerdown", outside);
|
|
23169
23252
|
return () => document.removeEventListener("pointerdown", outside);
|
|
23170
23253
|
}, [open, onOpenChange]);
|
|
23171
|
-
(0,
|
|
23254
|
+
(0, import_react93.useEffect)(() => {
|
|
23172
23255
|
if (disabled || loading) {
|
|
23173
23256
|
changeOpen(false);
|
|
23174
23257
|
setModalOpen(false);
|
|
@@ -23301,7 +23384,7 @@ var InputSelect = (0, import_react92.forwardRef)(function InputSelect2({
|
|
|
23301
23384
|
});
|
|
23302
23385
|
|
|
23303
23386
|
// src/components/QueryForm.tsx
|
|
23304
|
-
var
|
|
23387
|
+
var import_react94 = require("react");
|
|
23305
23388
|
var import_jsx_runtime91 = require("react/jsx-runtime");
|
|
23306
23389
|
function QueryForm({
|
|
23307
23390
|
fields,
|
|
@@ -23335,31 +23418,31 @@ function QueryForm({
|
|
|
23335
23418
|
...formProps
|
|
23336
23419
|
}) {
|
|
23337
23420
|
const [form] = useForm(providedForm);
|
|
23338
|
-
const [internalCollapsed, setInternalCollapsed] = (0,
|
|
23339
|
-
const [needsCollapse, setNeedsCollapse] = (0,
|
|
23421
|
+
const [internalCollapsed, setInternalCollapsed] = (0, import_react94.useState)(defaultCollapsed);
|
|
23422
|
+
const [needsCollapse, setNeedsCollapse] = (0, import_react94.useState)(false);
|
|
23340
23423
|
const collapsed = collapsible && needsCollapse && (controlledCollapsed ?? internalCollapsed);
|
|
23341
|
-
const [searching, setSearching] = (0,
|
|
23342
|
-
const [saving, setSaving] = (0,
|
|
23343
|
-
const [removing, setRemoving] = (0,
|
|
23344
|
-
const [saveOpen, setSaveOpen] = (0,
|
|
23345
|
-
const [saveName, setSaveName] = (0,
|
|
23346
|
-
const [saveError, setSaveError] = (0,
|
|
23347
|
-
const [error, setError] = (0,
|
|
23348
|
-
const [activeShortcut, setActiveShortcut] = (0,
|
|
23349
|
-
const source = (0,
|
|
23350
|
-
const searchLock = (0,
|
|
23351
|
-
const saveLock = (0,
|
|
23352
|
-
const removeLock = (0,
|
|
23353
|
-
const snapshot = (0,
|
|
23424
|
+
const [searching, setSearching] = (0, import_react94.useState)(false);
|
|
23425
|
+
const [saving, setSaving] = (0, import_react94.useState)(false);
|
|
23426
|
+
const [removing, setRemoving] = (0, import_react94.useState)(false);
|
|
23427
|
+
const [saveOpen, setSaveOpen] = (0, import_react94.useState)(false);
|
|
23428
|
+
const [saveName, setSaveName] = (0, import_react94.useState)("");
|
|
23429
|
+
const [saveError, setSaveError] = (0, import_react94.useState)("");
|
|
23430
|
+
const [error, setError] = (0, import_react94.useState)("");
|
|
23431
|
+
const [activeShortcut, setActiveShortcut] = (0, import_react94.useState)("");
|
|
23432
|
+
const source = (0, import_react94.useRef)({ source: "submit" });
|
|
23433
|
+
const searchLock = (0, import_react94.useRef)(false);
|
|
23434
|
+
const saveLock = (0, import_react94.useRef)(false);
|
|
23435
|
+
const removeLock = (0, import_react94.useRef)(false);
|
|
23436
|
+
const snapshot = (0, import_react94.useRef)();
|
|
23354
23437
|
const busy = disabled || loading || searching;
|
|
23355
23438
|
const shortcutBusy = busy || shortcutsLoading || saving || removing;
|
|
23356
|
-
const entries = fields ? fields.map(({ key, width, ...item }) => ({ key, width, content: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Form.Item, { noStyle: true, ...item }) })) :
|
|
23439
|
+
const entries = fields ? fields.map(({ key, width, ...item }) => ({ key, width, content: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Form.Item, { noStyle: true, ...item }) })) : import_react94.Children.toArray(children).map((content, index) => ({ key: String(index), width: void 0, content }));
|
|
23357
23440
|
const limit = Math.max(1, Math.floor(collapsedCount));
|
|
23358
|
-
const rowRef = (0,
|
|
23359
|
-
const actionsRef = (0,
|
|
23360
|
-
const toggleRef = (0,
|
|
23361
|
-
const [fittingCount, setFittingCount] = (0,
|
|
23362
|
-
(0,
|
|
23441
|
+
const rowRef = (0, import_react94.useRef)(null);
|
|
23442
|
+
const actionsRef = (0, import_react94.useRef)(null);
|
|
23443
|
+
const toggleRef = (0, import_react94.useRef)(null);
|
|
23444
|
+
const [fittingCount, setFittingCount] = (0, import_react94.useState)(limit);
|
|
23445
|
+
(0, import_react94.useLayoutEffect)(() => {
|
|
23363
23446
|
const row = rowRef.current;
|
|
23364
23447
|
const actions = actionsRef.current;
|
|
23365
23448
|
if (!row || !actions) return;
|