@sia.soul/sia-react-ui 0.1.52 → 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/core.css +22 -4
- package/dist/index.cjs +512 -432
- package/dist/index.css +22 -4
- package/dist/index.d.cts +13 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +120 -40
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -12004,8 +12004,86 @@ function TableCellContent({ children, ellipsis, title }) {
|
|
|
12004
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 });
|
|
12005
12005
|
}
|
|
12006
12006
|
|
|
12007
|
-
// src/components/Table/
|
|
12007
|
+
// src/components/Table/useRemainingHeight.ts
|
|
12008
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");
|
|
12009
12087
|
|
|
12010
12088
|
// src/components/Table/utils.ts
|
|
12011
12089
|
var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
|
|
@@ -12060,8 +12138,8 @@ function toTablePageParams(current, pageSize) {
|
|
|
12060
12138
|
// src/components/Table/TableCanvasLayer.tsx
|
|
12061
12139
|
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
12062
12140
|
function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHeight }) {
|
|
12063
|
-
const canvasRef = (0,
|
|
12064
|
-
(0,
|
|
12141
|
+
const canvasRef = (0, import_react51.useRef)(null);
|
|
12142
|
+
(0, import_react51.useLayoutEffect)(() => {
|
|
12065
12143
|
const canvas = canvasRef.current;
|
|
12066
12144
|
const scroller = viewport.current;
|
|
12067
12145
|
if (!canvas || !scroller) return;
|
|
@@ -12188,10 +12266,10 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
|
|
|
12188
12266
|
}
|
|
12189
12267
|
|
|
12190
12268
|
// src/components/Table/Table.tsx
|
|
12191
|
-
var
|
|
12269
|
+
var import_react53 = require("react");
|
|
12192
12270
|
|
|
12193
12271
|
// src/components/Table/plugins.tsx
|
|
12194
|
-
var
|
|
12272
|
+
var import_react52 = require("react");
|
|
12195
12273
|
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
12196
12274
|
function TableCheckbox({
|
|
12197
12275
|
checked,
|
|
@@ -12818,7 +12896,7 @@ function TableSelectedItemsPanel({
|
|
|
12818
12896
|
onRemove,
|
|
12819
12897
|
onClear
|
|
12820
12898
|
}) {
|
|
12821
|
-
const [showAll, setShowAll] = (0,
|
|
12899
|
+
const [showAll, setShowAll] = (0, import_react52.useState)(false);
|
|
12822
12900
|
const visibleEntries = showAll ? entries : entries.slice(0, maxCount2);
|
|
12823
12901
|
const hiddenCount = Math.max(0, entries.length - visibleEntries.length);
|
|
12824
12902
|
const baseColumnMap = new Map(
|
|
@@ -13217,10 +13295,10 @@ function TableFilterControl({
|
|
|
13217
13295
|
placeholder,
|
|
13218
13296
|
onApply
|
|
13219
13297
|
}) {
|
|
13220
|
-
const [open, setOpen] = (0,
|
|
13221
|
-
const [draft, setDraft] = (0,
|
|
13298
|
+
const [open, setOpen] = (0, import_react52.useState)(false);
|
|
13299
|
+
const [draft, setDraft] = (0, import_react52.useState)(value);
|
|
13222
13300
|
const label = getColumnLabel(column);
|
|
13223
|
-
(0,
|
|
13301
|
+
(0, import_react52.useEffect)(() => {
|
|
13224
13302
|
if (open) setDraft(value);
|
|
13225
13303
|
}, [open, value]);
|
|
13226
13304
|
const apply = (nextValue) => {
|
|
@@ -13645,17 +13723,17 @@ function EditableTableCell({
|
|
|
13645
13723
|
trigger
|
|
13646
13724
|
}) {
|
|
13647
13725
|
const config = typeof editable === "object" ? editable : { type: "input" };
|
|
13648
|
-
const [editValue, setEditValue] = (0,
|
|
13649
|
-
const [saving, setSaving] = (0,
|
|
13650
|
-
const inputRef = (0,
|
|
13651
|
-
const editorRef = (0,
|
|
13652
|
-
const editValueRef = (0,
|
|
13653
|
-
const savingRef = (0,
|
|
13654
|
-
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)(
|
|
13655
13733
|
async () => {
|
|
13656
13734
|
}
|
|
13657
13735
|
);
|
|
13658
|
-
(0,
|
|
13736
|
+
(0, import_react52.useEffect)(() => {
|
|
13659
13737
|
if (!active) return;
|
|
13660
13738
|
editValueRef.current = value;
|
|
13661
13739
|
setEditValue(value);
|
|
@@ -13686,7 +13764,7 @@ function EditableTableCell({
|
|
|
13686
13764
|
}
|
|
13687
13765
|
}
|
|
13688
13766
|
saveRef.current = save;
|
|
13689
|
-
(0,
|
|
13767
|
+
(0, import_react52.useEffect)(() => {
|
|
13690
13768
|
if (!active || config.type === "select" || config.type === "custom") return;
|
|
13691
13769
|
const handleOutsidePointerDown = (event) => {
|
|
13692
13770
|
const target = event.target;
|
|
@@ -13991,15 +14069,15 @@ function ColumnSettingPanel({
|
|
|
13991
14069
|
onClose,
|
|
13992
14070
|
onApply
|
|
13993
14071
|
}) {
|
|
13994
|
-
const [draft, setDraft] = (0,
|
|
13995
|
-
const listRef = (0,
|
|
13996
|
-
const cancelDrag = (0,
|
|
13997
|
-
const [preview, setPreview] = (0,
|
|
13998
|
-
(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)(() => {
|
|
13999
14077
|
cancelDrag.current?.();
|
|
14000
14078
|
if (open) setDraft(orderColumnSettings(items));
|
|
14001
14079
|
}, [items, open]);
|
|
14002
|
-
(0,
|
|
14080
|
+
(0, import_react52.useEffect)(() => () => cancelDrag.current?.(), []);
|
|
14003
14081
|
const labels = new Map(
|
|
14004
14082
|
flattenTableColumns(columns).map((column) => [
|
|
14005
14083
|
column.key,
|
|
@@ -14524,7 +14602,7 @@ function tableExportText(node) {
|
|
|
14524
14602
|
if (typeof node === "string" || typeof node === "number" || typeof node === "bigint")
|
|
14525
14603
|
return String(node);
|
|
14526
14604
|
if (Array.isArray(node)) return node.map(tableExportText).join("");
|
|
14527
|
-
if ((0,
|
|
14605
|
+
if ((0, import_react52.isValidElement)(node))
|
|
14528
14606
|
return tableExportText(node.props.children);
|
|
14529
14607
|
return "";
|
|
14530
14608
|
}
|
|
@@ -14623,7 +14701,7 @@ var SIZE_ROW_HEIGHT = { small: 28, medium: 36, large: 46 };
|
|
|
14623
14701
|
function getHeaderTitleText(content) {
|
|
14624
14702
|
if (typeof content === "string" || typeof content === "number") return String(content);
|
|
14625
14703
|
if (Array.isArray(content)) return content.map(getHeaderTitleText).join("");
|
|
14626
|
-
if ((0,
|
|
14704
|
+
if ((0, import_react53.isValidElement)(content)) return getHeaderTitleText(content.props.children);
|
|
14627
14705
|
return "";
|
|
14628
14706
|
}
|
|
14629
14707
|
function getColumnDepth(columns) {
|
|
@@ -14703,7 +14781,7 @@ function getTableHorizontalMetrics(viewport, table) {
|
|
|
14703
14781
|
const contentWidth = Math.max(viewport.clientWidth, table?.getBoundingClientRect().width ?? viewport.clientWidth);
|
|
14704
14782
|
return { contentWidth, maxLeft: Math.max(0, contentWidth - viewport.clientWidth) };
|
|
14705
14783
|
}
|
|
14706
|
-
var TableBodyRow = (0,
|
|
14784
|
+
var TableBodyRow = (0, import_react53.memo)(function TableBodyRow2({
|
|
14707
14785
|
canvas,
|
|
14708
14786
|
visibleColumns,
|
|
14709
14787
|
row,
|
|
@@ -14794,6 +14872,7 @@ function TableInner(props, ref) {
|
|
|
14794
14872
|
emptyText = "\u6682\u65E0\u6570\u636E",
|
|
14795
14873
|
height,
|
|
14796
14874
|
tableHeight,
|
|
14875
|
+
fillRemaining,
|
|
14797
14876
|
size = "medium",
|
|
14798
14877
|
bordered = true,
|
|
14799
14878
|
rowBordered = true,
|
|
@@ -14818,23 +14897,24 @@ function TableInner(props, ref) {
|
|
|
14818
14897
|
style,
|
|
14819
14898
|
...htmlProps
|
|
14820
14899
|
} = props;
|
|
14821
|
-
const rootRef = (0,
|
|
14822
|
-
const
|
|
14823
|
-
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);
|
|
14824
14904
|
useScrollbarProximity();
|
|
14825
|
-
const scrollbarDragRef = (0,
|
|
14826
|
-
const [internalLoading, setInternalLoading] = (0,
|
|
14827
|
-
const [scrollTop, setScrollTop] = (0,
|
|
14828
|
-
const [scrollLeft, setScrollLeft] = (0,
|
|
14829
|
-
const [viewportHeight, setViewportHeight] = (0,
|
|
14830
|
-
const [viewportWidth, setViewportWidth] = (0,
|
|
14831
|
-
const [autoColumnWidths, setAutoColumnWidths] = (0,
|
|
14832
|
-
const getRowKey = (0,
|
|
14833
|
-
const builtInResizePlugin = (0,
|
|
14834
|
-
const builtInHighlightPlugin = (0,
|
|
14835
|
-
const builtInCellSelectionPlugin = (0,
|
|
14836
|
-
const builtInIndexPlugin = (0,
|
|
14837
|
-
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)(() => {
|
|
14838
14918
|
const plugins = providedPlugins.filter((plugin) => (resizable || plugin.id !== "resize") && (cellSelection || plugin.id !== "cellSelection") && (showIndex || plugin.id !== "index"));
|
|
14839
14919
|
if (!plugins.some((plugin) => plugin.id === "highlight")) plugins.push(builtInHighlightPlugin);
|
|
14840
14920
|
if (resizable && !plugins.some((plugin) => plugin.id === "resize")) plugins.push(builtInResizePlugin);
|
|
@@ -14842,19 +14922,19 @@ function TableInner(props, ref) {
|
|
|
14842
14922
|
if (showIndex && !plugins.some((plugin) => plugin.id === "index")) plugins.push(builtInIndexPlugin);
|
|
14843
14923
|
return plugins;
|
|
14844
14924
|
}, [builtInHighlightPlugin, builtInResizePlugin, builtInCellSelectionPlugin, builtInIndexPlugin, providedPlugins, resizable, cellSelection, showIndex]);
|
|
14845
|
-
const sortedPlugins = (0,
|
|
14846
|
-
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());
|
|
14847
14927
|
pluginsByIdRef.current = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
|
|
14848
|
-
const [pluginStates, setPluginStates] = (0,
|
|
14928
|
+
const [pluginStates, setPluginStates] = (0, import_react53.useState)(() => Object.fromEntries(
|
|
14849
14929
|
sortedPlugins.map((plugin) => [plugin.id, resolveInitialState(plugin)])
|
|
14850
14930
|
));
|
|
14851
|
-
const pluginApisRef = (0,
|
|
14852
|
-
const contextsRef = (0,
|
|
14853
|
-
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());
|
|
14854
14934
|
const pipeline = { columns: baseColumns, rows: createTableRows(dataSource, getRowKey) };
|
|
14855
14935
|
const nextApis = {};
|
|
14856
14936
|
const contexts = /* @__PURE__ */ new Map();
|
|
14857
|
-
const setPluginState = (0,
|
|
14937
|
+
const setPluginState = (0, import_react53.useCallback)((pluginId, next) => {
|
|
14858
14938
|
setPluginStates((previous) => {
|
|
14859
14939
|
const plugin = pluginsByIdRef.current.get(pluginId);
|
|
14860
14940
|
const previousValue = previous[pluginId] !== void 0 ? previous[pluginId] : plugin ? resolveInitialState(plugin) : void 0;
|
|
@@ -14907,7 +14987,7 @@ function TableInner(props, ref) {
|
|
|
14907
14987
|
});
|
|
14908
14988
|
pluginApisRef.current = nextApis;
|
|
14909
14989
|
contextsRef.current = contexts;
|
|
14910
|
-
(0,
|
|
14990
|
+
(0, import_react53.useEffect)(() => {
|
|
14911
14991
|
const activePlugins2 = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
|
|
14912
14992
|
for (const [pluginId, mounted] of mountedPluginsRef.current) {
|
|
14913
14993
|
if (activePlugins2.get(pluginId) === mounted.plugin) continue;
|
|
@@ -14919,11 +14999,11 @@ function TableInner(props, ref) {
|
|
|
14919
14999
|
mountedPluginsRef.current.set(plugin.id, { plugin, cleanup: plugin.onMount(contextsRef.current.get(plugin.id)) });
|
|
14920
15000
|
}
|
|
14921
15001
|
}, [sortedPlugins]);
|
|
14922
|
-
(0,
|
|
15002
|
+
(0, import_react53.useEffect)(() => () => {
|
|
14923
15003
|
for (const mounted of mountedPluginsRef.current.values()) mounted.cleanup?.();
|
|
14924
15004
|
mountedPluginsRef.current.clear();
|
|
14925
15005
|
}, []);
|
|
14926
|
-
const updateScrollMetrics = (0,
|
|
15006
|
+
const updateScrollMetrics = (0, import_react53.useCallback)(() => {
|
|
14927
15007
|
const root = rootRef.current;
|
|
14928
15008
|
const element = scrollRef.current;
|
|
14929
15009
|
if (!root || !element) return;
|
|
@@ -14963,7 +15043,7 @@ function TableInner(props, ref) {
|
|
|
14963
15043
|
verticalTrackElement?.style.setProperty("--sia-table-scrollbar-y-size", `${verticalThumb}px`);
|
|
14964
15044
|
verticalTrackElement?.style.setProperty("--sia-table-scrollbar-y-position", `${verticalPosition}px`);
|
|
14965
15045
|
}, []);
|
|
14966
|
-
(0,
|
|
15046
|
+
(0, import_react53.useEffect)(() => {
|
|
14967
15047
|
const element = scrollRef.current;
|
|
14968
15048
|
if (!element || typeof ResizeObserver === "undefined") return;
|
|
14969
15049
|
const observer = new ResizeObserver(() => {
|
|
@@ -14976,19 +15056,19 @@ function TableInner(props, ref) {
|
|
|
14976
15056
|
updateScrollMetrics();
|
|
14977
15057
|
return () => observer.disconnect();
|
|
14978
15058
|
}, [updateScrollMetrics]);
|
|
14979
|
-
(0,
|
|
15059
|
+
(0, import_react53.useEffect)(() => {
|
|
14980
15060
|
updateScrollMetrics();
|
|
14981
15061
|
});
|
|
14982
|
-
const orderedColumns = (0,
|
|
14983
|
-
const leafColumns = (0,
|
|
14984
|
-
const headerRows = (0,
|
|
14985
|
-
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());
|
|
14986
15066
|
const autoWidthSignature = leafColumns.map((column) => `${column.key}:${column.autoWidth}:${resizedWidths[column.key] ?? ""}`).join("|");
|
|
14987
|
-
(0,
|
|
15067
|
+
(0, import_react53.useEffect)(() => {
|
|
14988
15068
|
measuredCells.current = /* @__PURE__ */ new WeakSet();
|
|
14989
15069
|
setAutoColumnWidths({});
|
|
14990
15070
|
}, [dataSource, baseColumns, size, autoWidthSignature]);
|
|
14991
|
-
(0,
|
|
15071
|
+
(0, import_react53.useEffect)(() => {
|
|
14992
15072
|
const autoWidthColumns = leafColumns.filter((column) => column.autoWidth && resizedWidths[column.key] === void 0);
|
|
14993
15073
|
const root = rootRef.current;
|
|
14994
15074
|
if (!root || autoWidthColumns.length === 0) return;
|
|
@@ -15072,7 +15152,7 @@ function TableInner(props, ref) {
|
|
|
15072
15152
|
}
|
|
15073
15153
|
const topSpacer = shouldVirtualize ? startIndex * rowHeight : 0;
|
|
15074
15154
|
const bottomSpacer = shouldVirtualize ? Math.max(0, (pipeline.rows.length - endIndex) * rowHeight) : 0;
|
|
15075
|
-
const rowElements = (0,
|
|
15155
|
+
const rowElements = (0, import_react53.useMemo)(() => /* @__PURE__ */ new Map(), [
|
|
15076
15156
|
dataSource,
|
|
15077
15157
|
baseColumns,
|
|
15078
15158
|
sortedPlugins,
|
|
@@ -15091,35 +15171,35 @@ function TableInner(props, ref) {
|
|
|
15091
15171
|
]);
|
|
15092
15172
|
const toolbarStart = sortedPlugins.map((plugin) => {
|
|
15093
15173
|
const content = plugin.renderToolbarStart?.(getContext(plugin));
|
|
15094
|
-
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;
|
|
15095
15175
|
}).filter(Boolean);
|
|
15096
15176
|
const toolbarEnd = sortedPlugins.map((plugin) => {
|
|
15097
15177
|
const content = plugin.renderToolbarEnd?.(getContext(plugin));
|
|
15098
|
-
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;
|
|
15099
15179
|
}).filter(Boolean);
|
|
15100
15180
|
const summaries = sortedPlugins.flatMap((plugin) => plugin.renderSummary?.(getContext(plugin)) ?? []);
|
|
15101
15181
|
const footers = sortedPlugins.map((plugin) => {
|
|
15102
15182
|
const content = plugin.renderFooter?.(getContext(plugin));
|
|
15103
|
-
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;
|
|
15104
15184
|
}).filter(Boolean);
|
|
15105
15185
|
const overlays = sortedPlugins.map((plugin) => {
|
|
15106
15186
|
const content = plugin.renderOverlay?.(getContext(plugin));
|
|
15107
|
-
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;
|
|
15108
15188
|
}).filter(Boolean);
|
|
15109
15189
|
const hasToolbar = toolbarStart.length > 0 || toolbarEnd.length > 0;
|
|
15110
|
-
const effectiveHeight = height ?? tableHeight ?? (shouldVirtualize ? 420 : void 0);
|
|
15190
|
+
const effectiveHeight = height ?? tableHeight ?? remainingHeight ?? (shouldVirtualize ? 420 : void 0);
|
|
15111
15191
|
const rootStyle = {
|
|
15112
15192
|
...style,
|
|
15113
15193
|
height: effectiveHeight,
|
|
15114
15194
|
"--sia-table-header-height": `${headerRows.length * rowHeight}px`
|
|
15115
15195
|
};
|
|
15116
|
-
const handleScroll = (0,
|
|
15196
|
+
const handleScroll = (0, import_react53.useCallback)((event) => {
|
|
15117
15197
|
const element = event.currentTarget;
|
|
15118
15198
|
if (shouldVirtualize) setScrollTop((previous) => Math.floor(previous / rowHeight) === Math.floor(element.scrollTop / rowHeight) ? previous : element.scrollTop);
|
|
15119
15199
|
if (canvas) setScrollLeft(element.scrollLeft);
|
|
15120
15200
|
updateScrollMetrics();
|
|
15121
15201
|
}, [canvas, shouldVirtualize, rowHeight, updateScrollMetrics]);
|
|
15122
|
-
const handleScrollbarPointerDown = (0,
|
|
15202
|
+
const handleScrollbarPointerDown = (0, import_react53.useCallback)((axis, event, track = event.currentTarget) => {
|
|
15123
15203
|
const element = scrollRef.current;
|
|
15124
15204
|
const thumb = track.firstElementChild;
|
|
15125
15205
|
if (!element || !thumb || event.button !== 0) return;
|
|
@@ -15148,7 +15228,7 @@ function TableInner(props, ref) {
|
|
|
15148
15228
|
};
|
|
15149
15229
|
if (rootRef.current) rootRef.current.dataset.scrollbarDragging = "true";
|
|
15150
15230
|
}, []);
|
|
15151
|
-
const handleScrollbarPointerMove = (0,
|
|
15231
|
+
const handleScrollbarPointerMove = (0, import_react53.useCallback)((event) => {
|
|
15152
15232
|
const drag = scrollbarDragRef.current;
|
|
15153
15233
|
const element = scrollRef.current;
|
|
15154
15234
|
if (!drag || !element || drag.pointerId !== event.pointerId) return;
|
|
@@ -15157,12 +15237,12 @@ function TableInner(props, ref) {
|
|
|
15157
15237
|
if (drag.axis === "x") element.scrollLeft = nextScroll;
|
|
15158
15238
|
else element.scrollTop = nextScroll;
|
|
15159
15239
|
}, []);
|
|
15160
|
-
const handleScrollbarPointerEnd = (0,
|
|
15240
|
+
const handleScrollbarPointerEnd = (0, import_react53.useCallback)((event) => {
|
|
15161
15241
|
if (scrollbarDragRef.current?.pointerId !== event.pointerId) return;
|
|
15162
15242
|
scrollbarDragRef.current = null;
|
|
15163
15243
|
if (rootRef.current) rootRef.current.dataset.scrollbarDragging = "false";
|
|
15164
15244
|
}, []);
|
|
15165
|
-
(0,
|
|
15245
|
+
(0, import_react53.useImperativeHandle)(ref, () => ({
|
|
15166
15246
|
getRows: () => pipeline.rows.map((row) => row.record),
|
|
15167
15247
|
getColumns: () => pipeline.columns,
|
|
15168
15248
|
getPluginApi: (pluginId) => pluginApisRef.current[pluginId],
|
|
@@ -15441,12 +15521,12 @@ function TableInner(props, ref) {
|
|
|
15441
15521
|
}
|
|
15442
15522
|
);
|
|
15443
15523
|
}
|
|
15444
|
-
var Table2 = (0,
|
|
15524
|
+
var Table2 = (0, import_react53.forwardRef)(TableInner);
|
|
15445
15525
|
|
|
15446
15526
|
// src/components/ThemeSwitch.tsx
|
|
15447
|
-
var
|
|
15527
|
+
var import_react54 = require("react");
|
|
15448
15528
|
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
15449
|
-
var ThemeSwitch = (0,
|
|
15529
|
+
var ThemeSwitch = (0, import_react54.forwardRef)(function ThemeSwitch2({
|
|
15450
15530
|
checked,
|
|
15451
15531
|
onCheckedChange,
|
|
15452
15532
|
lightLabel = "\u4EAE\u8272\u6A21\u5F0F",
|
|
@@ -15540,7 +15620,7 @@ function Breadcrumb({ items, separator = "/", itemRender, className = "", ...pro
|
|
|
15540
15620
|
}
|
|
15541
15621
|
|
|
15542
15622
|
// src/components/Typography.tsx
|
|
15543
|
-
var
|
|
15623
|
+
var import_react55 = require("react");
|
|
15544
15624
|
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
15545
15625
|
function TypographyContent({
|
|
15546
15626
|
as: Tag2 = "span",
|
|
@@ -15560,26 +15640,26 @@ function TypographyContent({
|
|
|
15560
15640
|
className = "",
|
|
15561
15641
|
...props
|
|
15562
15642
|
}) {
|
|
15563
|
-
const contentRef = (0,
|
|
15564
|
-
const editRef = (0,
|
|
15565
|
-
const timer = (0,
|
|
15566
|
-
const [localText, setLocalText] = (0,
|
|
15567
|
-
const [draft, setDraft] = (0,
|
|
15568
|
-
const [editing, setEditing] = (0,
|
|
15569
|
-
const [copied, setCopied] = (0,
|
|
15570
|
-
const [copyError, setCopyError] = (0,
|
|
15571
|
-
const [expanded, setExpanded] = (0,
|
|
15572
|
-
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);
|
|
15573
15653
|
const editConfig = typeof editable === "object" ? editable : void 0;
|
|
15574
15654
|
const content = editConfig?.text ?? localText ?? children;
|
|
15575
15655
|
const requestedRows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
|
|
15576
15656
|
const rows = Number.isFinite(requestedRows) ? Math.max(1, Math.floor(requestedRows)) : 1;
|
|
15577
15657
|
const expandable = typeof ellipsis === "object" && ellipsis.expandable;
|
|
15578
|
-
(0,
|
|
15658
|
+
(0, import_react55.useEffect)(() => {
|
|
15579
15659
|
setLocalText(void 0);
|
|
15580
15660
|
}, [children]);
|
|
15581
|
-
(0,
|
|
15582
|
-
(0,
|
|
15661
|
+
(0, import_react55.useEffect)(() => () => clearTimeout(timer.current), []);
|
|
15662
|
+
(0, import_react55.useLayoutEffect)(() => {
|
|
15583
15663
|
const element = contentRef.current;
|
|
15584
15664
|
if (!element || !ellipsis || !expandable || editing || expanded) return;
|
|
15585
15665
|
const measure = () => setOverflow(element.scrollHeight > element.clientHeight + 1 || element.scrollWidth > element.clientWidth + 1);
|
|
@@ -15697,10 +15777,10 @@ var Typography = Object.assign(TypographyRoot, {
|
|
|
15697
15777
|
});
|
|
15698
15778
|
|
|
15699
15779
|
// src/components/FloatButton.tsx
|
|
15700
|
-
var
|
|
15780
|
+
var import_react56 = require("react");
|
|
15701
15781
|
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
15702
|
-
var GroupShape = (0,
|
|
15703
|
-
var FloatButtonRoot = (0,
|
|
15782
|
+
var GroupShape = (0, import_react56.createContext)(void 0);
|
|
15783
|
+
var FloatButtonRoot = (0, import_react56.forwardRef)(function FloatButton({
|
|
15704
15784
|
icon,
|
|
15705
15785
|
description,
|
|
15706
15786
|
tooltip,
|
|
@@ -15713,7 +15793,7 @@ var FloatButtonRoot = (0, import_react55.forwardRef)(function FloatButton({
|
|
|
15713
15793
|
children,
|
|
15714
15794
|
...props
|
|
15715
15795
|
}, ref) {
|
|
15716
|
-
const groupShape = (0,
|
|
15796
|
+
const groupShape = (0, import_react56.useContext)(GroupShape);
|
|
15717
15797
|
const label = props["aria-label"] ?? (typeof tooltip === "string" ? tooltip : typeof description === "string" ? description : "\u60AC\u6D6E\u64CD\u4F5C");
|
|
15718
15798
|
const button = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
15719
15799
|
"button",
|
|
@@ -15751,10 +15831,10 @@ function FloatButtonGroup({
|
|
|
15751
15831
|
...props
|
|
15752
15832
|
}) {
|
|
15753
15833
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
15754
|
-
const rootRef = (0,
|
|
15755
|
-
const triggerRef = (0,
|
|
15756
|
-
const id = (0,
|
|
15757
|
-
(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)(() => {
|
|
15758
15838
|
if (!trigger || !visible) return;
|
|
15759
15839
|
const close = (event) => {
|
|
15760
15840
|
if (!rootRef.current?.contains(event.target)) setVisible(false);
|
|
@@ -15808,8 +15888,8 @@ function FloatButtonGroup({
|
|
|
15808
15888
|
) });
|
|
15809
15889
|
}
|
|
15810
15890
|
function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth", onClick, icon, tooltip = "\u8FD4\u56DE\u9876\u90E8", ...props }) {
|
|
15811
|
-
const [visible, setVisible] = (0,
|
|
15812
|
-
(0,
|
|
15891
|
+
const [visible, setVisible] = (0, import_react56.useState)(false);
|
|
15892
|
+
(0, import_react56.useEffect)(() => {
|
|
15813
15893
|
const element = target ? target() : window;
|
|
15814
15894
|
if (!element) return;
|
|
15815
15895
|
const update = () => setVisible((element === window ? window.scrollY : element.scrollTop) >= visibilityHeight);
|
|
@@ -15833,11 +15913,11 @@ var FloatButton2 = Object.assign(FloatButtonRoot, {
|
|
|
15833
15913
|
});
|
|
15834
15914
|
|
|
15835
15915
|
// src/components/ChartWhirlingLoading.tsx
|
|
15836
|
-
var
|
|
15916
|
+
var import_react57 = require("react");
|
|
15837
15917
|
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
15838
15918
|
function ChartWhirlingLoading({ width = 720, height = 360, text = "\u6570\u636E\u83B7\u53D6\u4E2D", textWidth, frame }) {
|
|
15839
|
-
const [tick, setTick] = (0,
|
|
15840
|
-
(0,
|
|
15919
|
+
const [tick, setTick] = (0, import_react57.useState)(0);
|
|
15920
|
+
(0, import_react57.useEffect)(() => {
|
|
15841
15921
|
if (frame != null) return;
|
|
15842
15922
|
const media = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
15843
15923
|
let timer;
|
|
@@ -15868,20 +15948,20 @@ function ChartWhirlingLoading({ width = 720, height = 360, text = "\u6570\u636E\
|
|
|
15868
15948
|
}
|
|
15869
15949
|
|
|
15870
15950
|
// src/components/SvgMapPlot.tsx
|
|
15871
|
-
var
|
|
15951
|
+
var import_react69 = require("react");
|
|
15872
15952
|
|
|
15873
15953
|
// src/components/ChartBrush.tsx
|
|
15874
|
-
var
|
|
15954
|
+
var import_react58 = require("react");
|
|
15875
15955
|
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
15876
15956
|
function ChartBrush({ bounds, onSelect, onCancel, selectionShape = "band", selectionStyle, minSelectionSize }) {
|
|
15877
|
-
const [vertical, setVertical] = (0,
|
|
15878
|
-
const startY = (0,
|
|
15957
|
+
const [vertical, setVertical] = (0, import_react58.useState)(null);
|
|
15958
|
+
const startY = (0, import_react58.useRef)(0);
|
|
15879
15959
|
const y = (event) => {
|
|
15880
15960
|
const matrix = event.currentTarget.ownerSVGElement?.getScreenCTM();
|
|
15881
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;
|
|
15882
15962
|
};
|
|
15883
|
-
const drag = (0,
|
|
15884
|
-
const [selection, setSelection] = (0,
|
|
15963
|
+
const drag = (0, import_react58.useRef)(null);
|
|
15964
|
+
const [selection, setSelection] = (0, import_react58.useState)(null);
|
|
15885
15965
|
const x = (event) => {
|
|
15886
15966
|
const matrix = event.currentTarget.ownerSVGElement?.getScreenCTM();
|
|
15887
15967
|
if (!matrix) return null;
|
|
@@ -16004,7 +16084,7 @@ function appendChartExportHeadings(original, clone, host) {
|
|
|
16004
16084
|
}
|
|
16005
16085
|
|
|
16006
16086
|
// src/components/ChartNodeTimeline.tsx
|
|
16007
|
-
var
|
|
16087
|
+
var import_react60 = require("react");
|
|
16008
16088
|
|
|
16009
16089
|
// src/components/timelinePositions.ts
|
|
16010
16090
|
function timelineRatios(count, dates) {
|
|
@@ -16030,7 +16110,7 @@ function nearestTimelineIndex(ratios, ratio) {
|
|
|
16030
16110
|
}
|
|
16031
16111
|
|
|
16032
16112
|
// src/components/ChartPointMotion.tsx
|
|
16033
|
-
var
|
|
16113
|
+
var import_react59 = require("react");
|
|
16034
16114
|
|
|
16035
16115
|
// src/components/chartMotion.ts
|
|
16036
16116
|
function chartMotionBaseline(points, horizontal = false) {
|
|
@@ -16051,11 +16131,11 @@ function interpolateChartPoints(from, to, progress) {
|
|
|
16051
16131
|
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
16052
16132
|
function ChartPointMotion({ points, enabled, duration, updateDuration = 500, animateInitial = true, easing = "linear", progress, horizontal = false, origin, children }) {
|
|
16053
16133
|
const baseline = (target) => origin ? target.map(() => origin) : chartMotionBaseline(target, horizontal);
|
|
16054
|
-
const [frame, setFrame] = (0,
|
|
16055
|
-
const displayed = (0,
|
|
16056
|
-
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);
|
|
16057
16137
|
const signature = JSON.stringify(points);
|
|
16058
|
-
(0,
|
|
16138
|
+
(0, import_react59.useEffect)(() => {
|
|
16059
16139
|
const target = points;
|
|
16060
16140
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
16061
16141
|
if (!enabled || progress != null || reduced.matches) {
|
|
@@ -16094,8 +16174,8 @@ function ChartPointMotion({ points, enabled, duration, updateDuration = 500, ani
|
|
|
16094
16174
|
// src/components/ChartNodeTimeline.tsx
|
|
16095
16175
|
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
16096
16176
|
function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, playInterval = 2e3, loop = true, x = 80, y = 520, width = 840 }) {
|
|
16097
|
-
const [playing, setPlaying] = (0,
|
|
16098
|
-
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)();
|
|
16099
16179
|
const shown = draft ?? value;
|
|
16100
16180
|
const cancelPending = () => {
|
|
16101
16181
|
clearTimeout(pending.current);
|
|
@@ -16103,8 +16183,8 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
16103
16183
|
draftRef.current = void 0;
|
|
16104
16184
|
setDraft(void 0);
|
|
16105
16185
|
};
|
|
16106
|
-
(0,
|
|
16107
|
-
(0,
|
|
16186
|
+
(0, import_react60.useEffect)(() => () => clearTimeout(pending.current), []);
|
|
16187
|
+
(0, import_react60.useEffect)(() => {
|
|
16108
16188
|
cancelPending();
|
|
16109
16189
|
}, [value]);
|
|
16110
16190
|
const preview = (index) => {
|
|
@@ -16119,8 +16199,8 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
16119
16199
|
draftRef.current = void 0;
|
|
16120
16200
|
}, 200);
|
|
16121
16201
|
};
|
|
16122
|
-
(0,
|
|
16123
|
-
(0,
|
|
16202
|
+
(0, import_react60.useEffect)(() => setPlaying(autoPlay), [autoPlay]);
|
|
16203
|
+
(0, import_react60.useEffect)(() => {
|
|
16124
16204
|
if (!playing || labels.length < 2) return;
|
|
16125
16205
|
const timer = window.setTimeout(() => {
|
|
16126
16206
|
if (value + 1 < labels.length) onChange(value + 1);
|
|
@@ -16229,7 +16309,7 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
|
|
|
16229
16309
|
}
|
|
16230
16310
|
|
|
16231
16311
|
// src/components/ChartVerticalRange.tsx
|
|
16232
|
-
var
|
|
16312
|
+
var import_react61 = require("react");
|
|
16233
16313
|
|
|
16234
16314
|
// src/components/chartColorRamp.ts
|
|
16235
16315
|
function chartColorRamp(colors, ratio) {
|
|
@@ -16249,16 +16329,16 @@ function chartColorRamp(colors, ratio) {
|
|
|
16249
16329
|
// src/components/ChartVerticalRange.tsx
|
|
16250
16330
|
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
16251
16331
|
function ChartVerticalRange({ min, max, x, y, length, thickness, colors, range, endLabels, onChange, indicatorValue, onHoverRange, realtime = true, readOnly = false }) {
|
|
16252
|
-
const id = (0,
|
|
16253
|
-
const drag = (0,
|
|
16254
|
-
const [draft, setDraft] = (0,
|
|
16255
|
-
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)();
|
|
16256
16336
|
const cancel = () => {
|
|
16257
16337
|
drag.current = void 0;
|
|
16258
16338
|
pending.current = void 0;
|
|
16259
16339
|
setDraft(void 0);
|
|
16260
16340
|
};
|
|
16261
|
-
(0,
|
|
16341
|
+
(0, import_react61.useEffect)(() => {
|
|
16262
16342
|
if (!realtime) cancel();
|
|
16263
16343
|
}, [range[0], range[1], min, max, realtime]);
|
|
16264
16344
|
const shown = draft ?? range;
|
|
@@ -16339,18 +16419,18 @@ function ChartVerticalRange({ min, max, x, y, length, thickness, colors, range,
|
|
|
16339
16419
|
}
|
|
16340
16420
|
|
|
16341
16421
|
// src/components/ChartHorizontalRange.tsx
|
|
16342
|
-
var
|
|
16422
|
+
var import_react62 = require("react");
|
|
16343
16423
|
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
16344
16424
|
function ChartHorizontalRange({ min, max, x, y, length, thickness, colors, range, endLabels, onChange, indicatorValue, onHoverRange, realtime = true }) {
|
|
16345
|
-
const id = (0,
|
|
16346
|
-
const drag = (0,
|
|
16347
|
-
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)();
|
|
16348
16428
|
const cancel = () => {
|
|
16349
16429
|
drag.current = void 0;
|
|
16350
16430
|
pending.current = void 0;
|
|
16351
16431
|
setDraft(void 0);
|
|
16352
16432
|
};
|
|
16353
|
-
(0,
|
|
16433
|
+
(0, import_react62.useEffect)(() => {
|
|
16354
16434
|
if (!realtime) cancel();
|
|
16355
16435
|
}, [range[0], range[1], min, max, realtime]);
|
|
16356
16436
|
const shown = draft ?? range, low = Math.max(min, Math.min(max, shown[0])), high = Math.max(low, Math.min(max, shown[1]));
|
|
@@ -16428,7 +16508,7 @@ function ChartHorizontalRange({ min, max, x, y, length, thickness, colors, range
|
|
|
16428
16508
|
}
|
|
16429
16509
|
|
|
16430
16510
|
// src/components/Chart.tsx
|
|
16431
|
-
var
|
|
16511
|
+
var import_react63 = require("react");
|
|
16432
16512
|
|
|
16433
16513
|
// src/components/chartCompositeExport.ts
|
|
16434
16514
|
function serializeChartComposite(host) {
|
|
@@ -16552,20 +16632,20 @@ var DEFAULT_CHART_PALETTE = [
|
|
|
16552
16632
|
"#2f54eb",
|
|
16553
16633
|
"#a0d911"
|
|
16554
16634
|
];
|
|
16555
|
-
var ChartContext = (0,
|
|
16635
|
+
var ChartContext = (0, import_react63.createContext)(null);
|
|
16556
16636
|
function toCssSize(value, fallback) {
|
|
16557
16637
|
if (typeof value === "number") return `${value}px`;
|
|
16558
16638
|
return value ?? fallback;
|
|
16559
16639
|
}
|
|
16560
|
-
var ChartComposite = (0,
|
|
16561
|
-
const host = (0,
|
|
16562
|
-
(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) }), []);
|
|
16563
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)) });
|
|
16564
16644
|
});
|
|
16565
|
-
var useTooltipLayoutEffect = typeof window === "undefined" ?
|
|
16645
|
+
var useTooltipLayoutEffect = typeof window === "undefined" ? import_react63.useEffect : import_react63.useLayoutEffect;
|
|
16566
16646
|
function ChartTooltip({ open, left, top, children, enterable = false, inheritTextStyle = false, placement = "above", className = "", style, ...props }) {
|
|
16567
|
-
const elementRef = (0,
|
|
16568
|
-
const [position, setPosition] = (0,
|
|
16647
|
+
const elementRef = (0, import_react63.useRef)(null);
|
|
16648
|
+
const [position, setPosition] = (0, import_react63.useState)([left, top]);
|
|
16569
16649
|
useTooltipLayoutEffect(() => {
|
|
16570
16650
|
const element = elementRef.current, host = element?.parentElement;
|
|
16571
16651
|
if (!open || placement !== "axis" || !element || !host) return;
|
|
@@ -16689,7 +16769,7 @@ function ChartToolbox({
|
|
|
16689
16769
|
))
|
|
16690
16770
|
] });
|
|
16691
16771
|
}
|
|
16692
|
-
var SiaChart = (0,
|
|
16772
|
+
var SiaChart = (0, import_react63.forwardRef)(function SiaChart2({
|
|
16693
16773
|
children,
|
|
16694
16774
|
width = "100%",
|
|
16695
16775
|
height = 320,
|
|
@@ -16716,19 +16796,19 @@ var SiaChart = (0, import_react62.forwardRef)(function SiaChart2({
|
|
|
16716
16796
|
style,
|
|
16717
16797
|
...rest
|
|
16718
16798
|
}, ref) {
|
|
16719
|
-
const hostRef = (0,
|
|
16720
|
-
const svgRef = (0,
|
|
16721
|
-
const titleId = (0,
|
|
16722
|
-
const descriptionId = (0,
|
|
16723
|
-
const [tooltip, setTooltip] = (0,
|
|
16724
|
-
const tooltipHideTimer = (0,
|
|
16725
|
-
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);
|
|
16726
16806
|
const cancelTooltipHide = () => {
|
|
16727
16807
|
clearTimeout(tooltipHideTimer.current);
|
|
16728
16808
|
};
|
|
16729
|
-
(0,
|
|
16730
|
-
const [linkedPosition, setLinkedPosition] = (0,
|
|
16731
|
-
(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)(() => {
|
|
16732
16812
|
const host = hostRef.current, svg = svgRef.current;
|
|
16733
16813
|
if (!controlledTooltip || !host || !svg) return;
|
|
16734
16814
|
const position = () => {
|
|
@@ -16743,12 +16823,12 @@ var SiaChart = (0, import_react62.forwardRef)(function SiaChart2({
|
|
|
16743
16823
|
observer.observe(host);
|
|
16744
16824
|
return () => observer.disconnect();
|
|
16745
16825
|
}, [controlledTooltip]);
|
|
16746
|
-
const [dataViewOpen, setDataViewOpen] = (0,
|
|
16747
|
-
const [markMode, setMarkMode] = (0,
|
|
16748
|
-
const [markStart, setMarkStart] = (0,
|
|
16749
|
-
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)([]);
|
|
16750
16830
|
const toolboxOptions = toolbox === true ? {} : toolbox || void 0;
|
|
16751
|
-
const rootStyle = (0,
|
|
16831
|
+
const rootStyle = (0, import_react63.useMemo)(() => ({
|
|
16752
16832
|
...style,
|
|
16753
16833
|
width: toCssSize(width, "100%"),
|
|
16754
16834
|
height: toCssSize(height, "320px"),
|
|
@@ -16806,13 +16886,13 @@ var SiaChart = (0, import_react62.forwardRef)(function SiaChart2({
|
|
|
16806
16886
|
anchor.href = canvas.toDataURL("image/png");
|
|
16807
16887
|
anchor.click();
|
|
16808
16888
|
}
|
|
16809
|
-
(0,
|
|
16889
|
+
(0, import_react63.useImperativeHandle)(ref, () => ({
|
|
16810
16890
|
getElement: () => svgRef.current,
|
|
16811
16891
|
focus: () => svgRef.current?.focus(),
|
|
16812
16892
|
toSvgString: serializeSvg,
|
|
16813
16893
|
toDataUrl: svgDataUrl
|
|
16814
16894
|
}), []);
|
|
16815
|
-
const context = (0,
|
|
16895
|
+
const context = (0, import_react63.useMemo)(() => ({
|
|
16816
16896
|
palette,
|
|
16817
16897
|
showTooltip: (event, content, point) => {
|
|
16818
16898
|
cancelTooltipHide();
|
|
@@ -16999,7 +17079,7 @@ var SiaChart = (0, import_react62.forwardRef)(function SiaChart2({
|
|
|
16999
17079
|
) });
|
|
17000
17080
|
});
|
|
17001
17081
|
function ChartMark({ tooltip, tooltipPoint, label, onPointerMove, onPointerLeave, onFocus, onBlur, ...props }) {
|
|
17002
|
-
const context = (0,
|
|
17082
|
+
const context = (0, import_react63.useContext)(ChartContext);
|
|
17003
17083
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
17004
17084
|
"g",
|
|
17005
17085
|
{
|
|
@@ -17028,7 +17108,7 @@ function ChartMark({ tooltip, tooltipPoint, label, onPointerMove, onPointerLeave
|
|
|
17028
17108
|
);
|
|
17029
17109
|
}
|
|
17030
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 }) {
|
|
17031
|
-
const paintId = (0,
|
|
17111
|
+
const paintId = (0, import_react63.useId)().replaceAll(":", "");
|
|
17032
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))));
|
|
17033
17113
|
const totalWidth = orientation === "horizontal" ? widths.reduce((sum, value) => sum + value, 0) + Math.max(0, items.length - 1) * itemGap : Math.max(0, ...widths);
|
|
17034
17114
|
const startX = align === "start" ? x : align === "end" ? x - totalWidth : x - totalWidth / 2;
|
|
@@ -17157,7 +17237,7 @@ function ChartAxis({ layer = "all", orientation, x, y, length, labels, positions
|
|
|
17157
17237
|
] });
|
|
17158
17238
|
}
|
|
17159
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 }) {
|
|
17160
|
-
const id = (0,
|
|
17240
|
+
const id = (0, import_react63.useId)().replaceAll(":", "");
|
|
17161
17241
|
const vertical = orientation === "vertical";
|
|
17162
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 });
|
|
17163
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 });
|
|
@@ -17185,8 +17265,8 @@ function ChartVisualMap({ min, max, colors = ["#e6f4ff", "#1677ff"], x = 16, y =
|
|
|
17185
17265
|
] });
|
|
17186
17266
|
}
|
|
17187
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 }) {
|
|
17188
|
-
const [activeHandle, setActiveHandle] = (0,
|
|
17189
|
-
const pan = (0,
|
|
17268
|
+
const [activeHandle, setActiveHandle] = (0, import_react63.useState)(null);
|
|
17269
|
+
const pan = (0, import_react63.useRef)();
|
|
17190
17270
|
const start = Math.min(value[0], value[1]);
|
|
17191
17271
|
const end = Math.max(value[0], value[1]);
|
|
17192
17272
|
const startPercent = (start - min) / Math.max(1, max - min) * 100;
|
|
@@ -17260,9 +17340,9 @@ function ChartDataZoom({ value, min = 0, max = 100, ariaLabel = "\u56FE\u8868\u5
|
|
|
17260
17340
|
] });
|
|
17261
17341
|
}
|
|
17262
17342
|
function ChartTimeline({ labels, value, onChange, autoPlay = false, playInterval = 2e3, loop = true, className = "", ...props }) {
|
|
17263
|
-
const [playing, setPlaying] = (0,
|
|
17264
|
-
(0,
|
|
17265
|
-
(0,
|
|
17343
|
+
const [playing, setPlaying] = (0, import_react63.useState)(autoPlay);
|
|
17344
|
+
(0, import_react63.useEffect)(() => setPlaying(autoPlay), [autoPlay]);
|
|
17345
|
+
(0, import_react63.useEffect)(() => {
|
|
17266
17346
|
if (!playing || labels.length <= 1) return void 0;
|
|
17267
17347
|
const timer = window.setInterval(() => {
|
|
17268
17348
|
const next = value + 1;
|
|
@@ -17372,7 +17452,7 @@ function parseSvgMapPaths(source) {
|
|
|
17372
17452
|
}
|
|
17373
17453
|
|
|
17374
17454
|
// src/components/useMapRoam.ts
|
|
17375
|
-
var
|
|
17455
|
+
var import_react64 = require("react");
|
|
17376
17456
|
|
|
17377
17457
|
// src/components/chartRoam.ts
|
|
17378
17458
|
function zoomChartViewport(view, factor, point, limit = { min: 0.05, max: 20 }) {
|
|
@@ -17389,14 +17469,14 @@ var initial = { x: 0, y: 0, scale: 1 };
|
|
|
17389
17469
|
function useMapRoam(mode, scaleLimit = { min: 0.65, max: 5 }, wheelFactors = [1.12, 0.9]) {
|
|
17390
17470
|
const [zoomIn, zoomOut] = wheelFactors;
|
|
17391
17471
|
const min = scaleLimit?.min, max = scaleLimit?.max, unlimited = scaleLimit === null;
|
|
17392
|
-
const host = (0,
|
|
17393
|
-
const [view, setView] = (0,
|
|
17394
|
-
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)();
|
|
17395
17475
|
const local = (x, y) => {
|
|
17396
17476
|
const matrix = host.current?.ownerSVGElement?.getScreenCTM();
|
|
17397
17477
|
return matrix ? new DOMPoint(x, y).matrixTransform(matrix.inverse()) : new DOMPoint(x, y);
|
|
17398
17478
|
};
|
|
17399
|
-
(0,
|
|
17479
|
+
(0, import_react64.useEffect)(() => {
|
|
17400
17480
|
const node = host.current;
|
|
17401
17481
|
if (!node || !mode || mode === "move") return;
|
|
17402
17482
|
const wheel = (event) => {
|
|
@@ -17458,7 +17538,7 @@ function useMapRoam(mode, scaleLimit = { min: 0.65, max: 5 }, wheelFactors = [1.
|
|
|
17458
17538
|
}
|
|
17459
17539
|
|
|
17460
17540
|
// src/components/ChartMapLineReveal.tsx
|
|
17461
|
-
var
|
|
17541
|
+
var import_react65 = require("react");
|
|
17462
17542
|
|
|
17463
17543
|
// src/components/mapLineGeometry.ts
|
|
17464
17544
|
function mapLineControl(source, target, curveness) {
|
|
@@ -17475,9 +17555,9 @@ function mapLineDuration(source, target, period) {
|
|
|
17475
17555
|
// src/components/ChartMapLineReveal.tsx
|
|
17476
17556
|
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
17477
17557
|
function ChartMapLineReveal({ source, control, target, enabled, initialDuration = 2e3, updateDuration = 500, children }) {
|
|
17478
|
-
const signature = JSON.stringify([source, control, target]), initialized = (0,
|
|
17479
|
-
const [frame, setFrame] = (0,
|
|
17480
|
-
(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)(() => {
|
|
17481
17561
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
17482
17562
|
const duration = Math.max(1, initialized.current ? updateDuration : initialDuration);
|
|
17483
17563
|
if (!enabled || reduced.matches) {
|
|
@@ -17510,15 +17590,15 @@ function ChartMapLineReveal({ source, control, target, enabled, initialDuration
|
|
|
17510
17590
|
}
|
|
17511
17591
|
|
|
17512
17592
|
// src/components/ChartMapLineEffect.tsx
|
|
17513
|
-
var
|
|
17593
|
+
var import_react66 = require("react");
|
|
17514
17594
|
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
17515
17595
|
function ChartMapLineEffect({ source, control, target, period = 30, color = "#fff", radius = 1, shadowBlur = 10, shadowColor = color, trailAlpha }) {
|
|
17516
|
-
const ref = (0,
|
|
17517
|
-
const trails = (0,
|
|
17596
|
+
const ref = (0, import_react66.useRef)(null);
|
|
17597
|
+
const trails = (0, import_react66.useRef)([]);
|
|
17518
17598
|
const alpha = trailAlpha === void 0 ? 0 : Math.max(0, Math.min(0.999, trailAlpha));
|
|
17519
17599
|
const count = alpha > 0 ? Math.min(240, Math.ceil(Math.log(5e-3) / Math.log(alpha))) : 0;
|
|
17520
17600
|
const duration = mapLineDuration(source, target, period);
|
|
17521
|
-
(0,
|
|
17601
|
+
(0, import_react66.useEffect)(() => {
|
|
17522
17602
|
const started = performance.now();
|
|
17523
17603
|
let frame = 0;
|
|
17524
17604
|
const history = [];
|
|
@@ -17551,7 +17631,7 @@ function ChartMapLineEffect({ source, control, target, period = 30, color = "#ff
|
|
|
17551
17631
|
}
|
|
17552
17632
|
|
|
17553
17633
|
// src/components/ChartMapPointPulse.tsx
|
|
17554
|
-
var
|
|
17634
|
+
var import_react67 = require("react");
|
|
17555
17635
|
|
|
17556
17636
|
// src/components/mapPointPulse.ts
|
|
17557
17637
|
function mapPointPulseDuration(period, random = Math.random) {
|
|
@@ -17561,7 +17641,7 @@ function mapPointPulseDuration(period, random = Math.random) {
|
|
|
17561
17641
|
// src/components/ChartMapPointPulse.tsx
|
|
17562
17642
|
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
17563
17643
|
function ChartMapPointPulse({ x, y, size, color, period = 15, scaleSize = 2 }) {
|
|
17564
|
-
const [duration] = (0,
|
|
17644
|
+
const [duration] = (0, import_react67.useState)(() => mapPointPulseDuration(period));
|
|
17565
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: [
|
|
17566
17646
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("animate", { attributeName: "r", values: `${size * scaleSize * 0.1};${size * scaleSize}`, dur: `${duration}ms`, repeatCount: "indefinite", calcMode: "linear" }),
|
|
17567
17647
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("animate", { attributeName: "stroke-width", values: ".1;1", dur: `${duration}ms`, repeatCount: "indefinite", calcMode: "linear" })
|
|
@@ -17569,11 +17649,11 @@ function ChartMapPointPulse({ x, y, size, color, period = 15, scaleSize = 2 }) {
|
|
|
17569
17649
|
}
|
|
17570
17650
|
|
|
17571
17651
|
// src/components/ChartMapPointEntrance.tsx
|
|
17572
|
-
var
|
|
17652
|
+
var import_react68 = require("react");
|
|
17573
17653
|
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
17574
17654
|
function ChartMapPointEntrance({ enabled, x, y, children }) {
|
|
17575
|
-
const [progress, setProgress] = (0,
|
|
17576
|
-
(0,
|
|
17655
|
+
const [progress, setProgress] = (0, import_react68.useState)(enabled ? 0.01 : 1);
|
|
17656
|
+
(0, import_react68.useEffect)(() => {
|
|
17577
17657
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
17578
17658
|
if (!enabled || reduced.matches) {
|
|
17579
17659
|
setProgress(1);
|
|
@@ -17616,8 +17696,8 @@ function mapLineEndLabel(source, target) {
|
|
|
17616
17696
|
// src/components/SvgMapPlot.tsx
|
|
17617
17697
|
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
17618
17698
|
function SvgMapRegion({ d, name, value, series, color, scale, offset, emphasized, onHover, stroke, strokeWidth, opacity, hoverable = true, showLabel = true, tooltipNameOnly = false }) {
|
|
17619
|
-
const path = (0,
|
|
17620
|
-
(0,
|
|
17699
|
+
const path = (0, import_react69.useRef)(null), [center, setCenter] = (0, import_react69.useState)([0, 0]);
|
|
17700
|
+
(0, import_react69.useLayoutEffect)(() => {
|
|
17621
17701
|
const box = path.current?.getBBox();
|
|
17622
17702
|
if (box) setCenter([box.x + box.width / 2, box.y + box.height / 2]);
|
|
17623
17703
|
}, [d]);
|
|
@@ -17635,9 +17715,9 @@ function SvgMapRegion({ d, name, value, series, color, scale, offset, emphasized
|
|
|
17635
17715
|
] }), onPointerMove: () => onHover(true), onPointerLeave: () => onHover(false), onFocus: () => onHover(true), onBlur: () => onHover(false), children: content });
|
|
17636
17716
|
}
|
|
17637
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" }) {
|
|
17638
|
-
const map = (0,
|
|
17639
|
-
const [hoveredLine, setHoveredLine] = (0,
|
|
17640
|
-
(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)(() => {
|
|
17641
17721
|
control.reset();
|
|
17642
17722
|
setHovered(void 0);
|
|
17643
17723
|
}, [resetKey]);
|
|
@@ -17700,16 +17780,16 @@ function SvgMapPlot({ source, name, data, x, y, width, height, domain, range = d
|
|
|
17700
17780
|
}
|
|
17701
17781
|
|
|
17702
17782
|
// src/components/ChartRoamController.tsx
|
|
17703
|
-
var
|
|
17783
|
+
var import_react70 = require("react");
|
|
17704
17784
|
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
17705
17785
|
function ChartRoamController({ x = 800, y = 5, onPan, onZoom }) {
|
|
17706
|
-
const [hovered, setHovered] = (0,
|
|
17707
|
-
const timer = (0,
|
|
17786
|
+
const [hovered, setHovered] = (0, import_react70.useState)(), [focused, setFocused] = (0, import_react70.useState)();
|
|
17787
|
+
const timer = (0, import_react70.useRef)();
|
|
17708
17788
|
const stop = () => {
|
|
17709
17789
|
if (timer.current !== void 0) clearInterval(timer.current);
|
|
17710
17790
|
timer.current = void 0;
|
|
17711
17791
|
};
|
|
17712
|
-
(0,
|
|
17792
|
+
(0, import_react70.useEffect)(() => {
|
|
17713
17793
|
window.addEventListener("blur", stop);
|
|
17714
17794
|
return () => {
|
|
17715
17795
|
stop();
|
|
@@ -17748,13 +17828,13 @@ function ChartRoamController({ x = 800, y = 5, onPan, onZoom }) {
|
|
|
17748
17828
|
}
|
|
17749
17829
|
|
|
17750
17830
|
// src/components/LineShareChart.tsx
|
|
17751
|
-
var
|
|
17831
|
+
var import_react90 = require("react");
|
|
17752
17832
|
|
|
17753
17833
|
// src/components/Charts.tsx
|
|
17754
|
-
var
|
|
17834
|
+
var import_react88 = require("react");
|
|
17755
17835
|
|
|
17756
17836
|
// src/components/ChartScatterMotion.tsx
|
|
17757
|
-
var
|
|
17837
|
+
var import_react71 = require("react");
|
|
17758
17838
|
|
|
17759
17839
|
// src/components/scatterMotion.ts
|
|
17760
17840
|
function scatterMotionEase(progress) {
|
|
@@ -17766,9 +17846,9 @@ function scatterMotionEase(progress) {
|
|
|
17766
17846
|
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
17767
17847
|
function ChartScatterMotion({ x, y, radius, enabled, duration = 2e3, updateDuration = 500, progress, children }) {
|
|
17768
17848
|
const target = { x, y, radius };
|
|
17769
|
-
const [frame, setFrame] = (0,
|
|
17770
|
-
const displayed = (0,
|
|
17771
|
-
(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)(() => {
|
|
17772
17852
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
17773
17853
|
let request = 0;
|
|
17774
17854
|
const publish = (next) => {
|
|
@@ -17879,12 +17959,12 @@ function layoutEventRiver(series, tailLength, area) {
|
|
|
17879
17959
|
}
|
|
17880
17960
|
|
|
17881
17961
|
// src/components/EventRiverBubble.tsx
|
|
17882
|
-
var
|
|
17962
|
+
var import_react72 = require("react");
|
|
17883
17963
|
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
17884
17964
|
function EventRiverBubble({ resetKey, draggable = true, tooltipPoint, onPointerUp, ...props }) {
|
|
17885
|
-
const [offset, setOffset] = (0,
|
|
17886
|
-
const drag = (0,
|
|
17887
|
-
(0,
|
|
17965
|
+
const [offset, setOffset] = (0, import_react72.useState)(0);
|
|
17966
|
+
const drag = (0, import_react72.useRef)();
|
|
17967
|
+
(0, import_react72.useEffect)(() => {
|
|
17888
17968
|
setOffset(0);
|
|
17889
17969
|
drag.current = void 0;
|
|
17890
17970
|
}, [resetKey]);
|
|
@@ -17935,13 +18015,13 @@ function EventRiverBubble({ resetKey, draggable = true, tooltipPoint, onPointerU
|
|
|
17935
18015
|
}
|
|
17936
18016
|
|
|
17937
18017
|
// src/components/EventRiverMotion.tsx
|
|
17938
|
-
var
|
|
18018
|
+
var import_react73 = require("react");
|
|
17939
18019
|
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
17940
18020
|
function EventRiverMotion({ geometry, enabled = true, duration = 2e3, updateDuration = 500, progress, children }) {
|
|
17941
|
-
const [frame, setFrame] = (0,
|
|
17942
|
-
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);
|
|
17943
18023
|
const signature = JSON.stringify(geometry);
|
|
17944
|
-
(0,
|
|
18024
|
+
(0, import_react73.useEffect)(() => {
|
|
17945
18025
|
const preference = window.matchMedia("(prefers-reduced-motion: reduce)"), target = { ...geometry, scale: 1 };
|
|
17946
18026
|
const from = started.current ? displayed.current : { ...geometry, scale: 0.1 };
|
|
17947
18027
|
let request = 0;
|
|
@@ -18058,7 +18138,7 @@ function transferPieValue(series, source, target, connector = " & ") {
|
|
|
18058
18138
|
}
|
|
18059
18139
|
|
|
18060
18140
|
// src/components/ChartValueIsland.tsx
|
|
18061
|
-
var
|
|
18141
|
+
var import_react74 = require("react");
|
|
18062
18142
|
|
|
18063
18143
|
// src/components/cartesianTransfer.ts
|
|
18064
18144
|
function addValues(a, b) {
|
|
@@ -18123,13 +18203,13 @@ function findCompositeValueTarget(element, x, y) {
|
|
|
18123
18203
|
// src/components/ChartValueIsland.tsx
|
|
18124
18204
|
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
18125
18205
|
function ChartValueIsland({ name, value, x, y, color = "#2ec7c9", onDrop, resolveTarget = findCompositeValueTarget }) {
|
|
18126
|
-
const drag = (0,
|
|
18127
|
-
const [offset, setOffset] = (0,
|
|
18206
|
+
const drag = (0, import_react74.useRef)(null);
|
|
18207
|
+
const [offset, setOffset] = (0, import_react74.useState)([0, 0]);
|
|
18128
18208
|
const cancel = () => {
|
|
18129
18209
|
drag.current = null;
|
|
18130
18210
|
setOffset([0, 0]);
|
|
18131
18211
|
};
|
|
18132
|
-
(0,
|
|
18212
|
+
(0, import_react74.useEffect)(cancel, [x, y]);
|
|
18133
18213
|
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
18134
18214
|
ChartMark,
|
|
18135
18215
|
{
|
|
@@ -18182,12 +18262,12 @@ function ChartValueIsland({ name, value, x, y, color = "#2ec7c9", onDrop, resolv
|
|
|
18182
18262
|
}
|
|
18183
18263
|
|
|
18184
18264
|
// src/components/ChartPulseRing.tsx
|
|
18185
|
-
var
|
|
18265
|
+
var import_react75 = require("react");
|
|
18186
18266
|
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
18187
18267
|
function ChartPulseRing({ center, radius, scaleSize = 2, color = "gold", shadowBlur = 10, period = 15, progress, enabled = true }) {
|
|
18188
|
-
const id = (0,
|
|
18189
|
-
const [reduced, setReduced] = (0,
|
|
18190
|
-
(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)(() => {
|
|
18191
18271
|
const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
18192
18272
|
setReduced(preference.matches);
|
|
18193
18273
|
let frame = 0;
|
|
@@ -18331,7 +18411,7 @@ function chartMarkerPath(kind, x, y, size) {
|
|
|
18331
18411
|
}
|
|
18332
18412
|
|
|
18333
18413
|
// src/components/ChartLargeMapPointCanvas.tsx
|
|
18334
|
-
var
|
|
18414
|
+
var import_react76 = require("react");
|
|
18335
18415
|
|
|
18336
18416
|
// src/components/largeMapPointPulse.ts
|
|
18337
18417
|
function largeMapPointPulse(elapsed, period, initial3, delay) {
|
|
@@ -18347,8 +18427,8 @@ function largeMapPointSize(size, pulse) {
|
|
|
18347
18427
|
// src/components/ChartLargeMapPointCanvas.tsx
|
|
18348
18428
|
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
18349
18429
|
function ChartLargeMapPointCanvas({ groups, width, height }) {
|
|
18350
|
-
const canvas = (0,
|
|
18351
|
-
(0,
|
|
18430
|
+
const canvas = (0, import_react76.useRef)(null), key = JSON.stringify(groups);
|
|
18431
|
+
(0, import_react76.useEffect)(() => {
|
|
18352
18432
|
const element = canvas.current, context = element?.getContext("2d");
|
|
18353
18433
|
if (!element || !context) return;
|
|
18354
18434
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -18407,12 +18487,12 @@ function ChartLargeMapPointCanvas({ groups, width, height }) {
|
|
|
18407
18487
|
}
|
|
18408
18488
|
|
|
18409
18489
|
// src/components/ChartCrosshair.tsx
|
|
18410
|
-
var
|
|
18490
|
+
var import_react77 = require("react");
|
|
18411
18491
|
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
18412
18492
|
function ChartCrosshair({ bounds, xDomain, yDomain, formatX = decimal, formatY = decimal }) {
|
|
18413
|
-
const ref = (0,
|
|
18414
|
-
const [point, setPoint] = (0,
|
|
18415
|
-
(0,
|
|
18493
|
+
const ref = (0, import_react77.useRef)(null);
|
|
18494
|
+
const [point, setPoint] = (0, import_react77.useState)(null);
|
|
18495
|
+
(0, import_react77.useEffect)(() => {
|
|
18416
18496
|
const svg = ref.current?.ownerSVGElement;
|
|
18417
18497
|
if (!svg) return;
|
|
18418
18498
|
const clear = () => setPoint(null);
|
|
@@ -18432,7 +18512,7 @@ function ChartCrosshair({ bounds, xDomain, yDomain, formatX = decimal, formatY =
|
|
|
18432
18512
|
svg.removeEventListener("pointercancel", clear);
|
|
18433
18513
|
};
|
|
18434
18514
|
}, [bounds.x, bounds.y, bounds.width, bounds.height]);
|
|
18435
|
-
(0,
|
|
18515
|
+
(0, import_react77.useEffect)(() => setPoint(null), [xDomain[0], xDomain[1], yDomain[0], yDomain[1]]);
|
|
18436
18516
|
const x = point ? xDomain[0] + (point.x - bounds.x) / bounds.width * (xDomain[1] - xDomain[0]) : 0;
|
|
18437
18517
|
const y = point ? yDomain[1] - (point.y - bounds.y) / bounds.height * (yDomain[1] - yDomain[0]) : 0;
|
|
18438
18518
|
return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("g", { ref, className: "sia-chart__crosshair", "aria-hidden": "true", children: [
|
|
@@ -18449,7 +18529,7 @@ function decimal(value) {
|
|
|
18449
18529
|
}
|
|
18450
18530
|
|
|
18451
18531
|
// src/components/HeatmapRasterLayer.tsx
|
|
18452
|
-
var
|
|
18532
|
+
var import_react78 = require("react");
|
|
18453
18533
|
|
|
18454
18534
|
// src/components/heatmapRaster.ts
|
|
18455
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] }];
|
|
@@ -18496,9 +18576,9 @@ function rasterizeHeatmap(width, height, points, options = {}) {
|
|
|
18496
18576
|
// src/components/HeatmapRasterLayer.tsx
|
|
18497
18577
|
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
18498
18578
|
function HeatmapRaster({ width, height, points, options }) {
|
|
18499
|
-
const [url, setUrl] = (0,
|
|
18579
|
+
const [url, setUrl] = (0, import_react78.useState)();
|
|
18500
18580
|
const optionsKey = JSON.stringify(options);
|
|
18501
|
-
(0,
|
|
18581
|
+
(0, import_react78.useEffect)(() => {
|
|
18502
18582
|
const canvas = document.createElement("canvas");
|
|
18503
18583
|
canvas.width = width;
|
|
18504
18584
|
canvas.height = height;
|
|
@@ -18598,10 +18678,10 @@ function chordMatrixLayout(matrix, options = {}) {
|
|
|
18598
18678
|
}
|
|
18599
18679
|
|
|
18600
18680
|
// src/components/MatrixChordPlot.tsx
|
|
18601
|
-
var
|
|
18681
|
+
var import_react79 = require("react");
|
|
18602
18682
|
var import_jsx_runtime78 = require("react/jsx-runtime");
|
|
18603
18683
|
function MatrixChordPlot({ names, matrix, series, appearance, showNodeLabels = false, rotateNodeLabels = false, linkLabel, sort, sortSub, padAngle, clockwise, palette, geometry, legacySubSort = false, showScale = false }) {
|
|
18604
|
-
const [hoveredLink, setHoveredLink] = (0,
|
|
18684
|
+
const [hoveredLink, setHoveredLink] = (0, import_react79.useState)(null);
|
|
18605
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;
|
|
18606
18686
|
const point = (angle) => [cx + Math.cos(angle) * r, cy + Math.sin(angle) * r];
|
|
18607
18687
|
return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("g", { className: "sia-chart__matrix-chord", children: [
|
|
@@ -18948,13 +19028,13 @@ function transferRadarSeries(panels, source, target, connector = " & ") {
|
|
|
18948
19028
|
}
|
|
18949
19029
|
|
|
18950
19030
|
// src/components/ChartRoamGroup.tsx
|
|
18951
|
-
var
|
|
19031
|
+
var import_react80 = require("react");
|
|
18952
19032
|
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
18953
19033
|
var initial2 = { x: 0, y: 0, scale: 1 };
|
|
18954
19034
|
function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true, ariaLabel, resetSignal = 0 }) {
|
|
18955
|
-
const group = (0,
|
|
18956
|
-
const [view, setView] = (0,
|
|
18957
|
-
(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)(() => {
|
|
18958
19038
|
setView(initial2);
|
|
18959
19039
|
drag.current = void 0;
|
|
18960
19040
|
}, [resetSignal]);
|
|
@@ -18964,7 +19044,7 @@ function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true,
|
|
|
18964
19044
|
const local = new DOMPoint(clientX, clientY).matrixTransform(matrix.inverse());
|
|
18965
19045
|
return [local.x, local.y];
|
|
18966
19046
|
};
|
|
18967
|
-
(0,
|
|
19047
|
+
(0, import_react80.useEffect)(() => {
|
|
18968
19048
|
const target = group.current;
|
|
18969
19049
|
if (!target || !enabled || !zoomEnabled) return;
|
|
18970
19050
|
const wheel = (event) => {
|
|
@@ -19025,11 +19105,11 @@ function ChartRoamGroup({ children, enabled, width, height, zoomEnabled = true,
|
|
|
19025
19105
|
}
|
|
19026
19106
|
|
|
19027
19107
|
// src/components/TreeNodeGlyph.tsx
|
|
19028
|
-
var
|
|
19108
|
+
var import_react81 = require("react");
|
|
19029
19109
|
var import_jsx_runtime81 = require("react/jsx-runtime");
|
|
19030
19110
|
function TreeNodeGlyph({ symbol = "circle", x, y, width, height, color, itemStyle }) {
|
|
19031
|
-
const [failed, setFailed] = (0,
|
|
19032
|
-
(0,
|
|
19111
|
+
const [failed, setFailed] = (0, import_react81.useState)(false);
|
|
19112
|
+
(0, import_react81.useEffect)(() => setFailed(false), [symbol]);
|
|
19033
19113
|
const style = { fill: itemStyle.brushType === "stroke" ? "none" : color, stroke: itemStyle.borderColor, strokeWidth: itemStyle.borderWidth };
|
|
19034
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: [
|
|
19035
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" }),
|
|
@@ -19318,7 +19398,7 @@ function resolveMapRegionAppearance(base, datum, emphasized) {
|
|
|
19318
19398
|
}
|
|
19319
19399
|
|
|
19320
19400
|
// src/components/ChartBundledMapCanvas.tsx
|
|
19321
|
-
var
|
|
19401
|
+
var import_react82 = require("react");
|
|
19322
19402
|
|
|
19323
19403
|
// src/components/edgeBundling.ts
|
|
19324
19404
|
var distance = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]);
|
|
@@ -19462,9 +19542,9 @@ function sampleBundledPath(curves, progress) {
|
|
|
19462
19542
|
var import_jsx_runtime82 = require("react/jsx-runtime");
|
|
19463
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 }) {
|
|
19464
19544
|
const signature = JSON.stringify(edges), pointKey = JSON.stringify(points), effectKey = JSON.stringify(effect);
|
|
19465
|
-
const paths = (0,
|
|
19466
|
-
const base = (0,
|
|
19467
|
-
(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)(() => {
|
|
19468
19548
|
const node = base.current, ctx = node?.getContext("2d");
|
|
19469
19549
|
if (!node || !ctx) return;
|
|
19470
19550
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -19490,7 +19570,7 @@ function ChartBundledMapCanvas({ edges, points = [], smoothness = 0.1, color = "
|
|
|
19490
19570
|
ctx.fill();
|
|
19491
19571
|
}
|
|
19492
19572
|
}, [paths, pointKey, width, height, color, opacity, lineWidth, pointColor, pointRadius]);
|
|
19493
|
-
(0,
|
|
19573
|
+
(0, import_react82.useEffect)(() => {
|
|
19494
19574
|
const node = moving.current, ctx = node?.getContext("2d");
|
|
19495
19575
|
if (!node || !ctx) return;
|
|
19496
19576
|
const ratio = window.devicePixelRatio || 1;
|
|
@@ -19552,11 +19632,11 @@ function ChartBundledMapCanvas({ edges, points = [], smoothness = 0.1, color = "
|
|
|
19552
19632
|
}
|
|
19553
19633
|
|
|
19554
19634
|
// src/components/ChartMapEffectCanvas.tsx
|
|
19555
|
-
var
|
|
19635
|
+
var import_react83 = require("react");
|
|
19556
19636
|
var import_jsx_runtime83 = require("react/jsx-runtime");
|
|
19557
19637
|
function ChartMapEffectCanvas({ effects, width, height, alpha = 0.95 }) {
|
|
19558
|
-
const canvas = (0,
|
|
19559
|
-
(0,
|
|
19638
|
+
const canvas = (0, import_react83.useRef)(null), key = JSON.stringify(effects);
|
|
19639
|
+
(0, import_react83.useEffect)(() => {
|
|
19560
19640
|
const element = canvas.current;
|
|
19561
19641
|
if (!element) return;
|
|
19562
19642
|
const context = element.getContext("2d");
|
|
@@ -19702,12 +19782,12 @@ function layoutTreeNodes(root, options = {}) {
|
|
|
19702
19782
|
}
|
|
19703
19783
|
|
|
19704
19784
|
// src/components/ChartDataEditor.tsx
|
|
19705
|
-
var
|
|
19785
|
+
var import_react84 = require("react");
|
|
19706
19786
|
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
19707
19787
|
function ChartDataEditor({ series, onApply, readOnly = false, allowNull = false }) {
|
|
19708
|
-
const [draft, setDraft] = (0,
|
|
19709
|
-
const [error, setError] = (0,
|
|
19710
|
-
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);
|
|
19711
19791
|
function apply() {
|
|
19712
19792
|
try {
|
|
19713
19793
|
const values = JSON.parse(draft);
|
|
@@ -19738,11 +19818,11 @@ function ChartDataEditor({ series, onApply, readOnly = false, allowNull = false
|
|
|
19738
19818
|
}
|
|
19739
19819
|
|
|
19740
19820
|
// src/components/ChartBarStatistics.tsx
|
|
19741
|
-
var
|
|
19821
|
+
var import_react85 = require("react");
|
|
19742
19822
|
var import_jsx_runtime85 = require("react/jsx-runtime");
|
|
19743
19823
|
function ChartBarStatistics({ values, kinds, project, plot, horizontal, color, gradient, seriesName }) {
|
|
19744
|
-
const id = (0,
|
|
19745
|
-
const [active, setActive] = (0,
|
|
19824
|
+
const id = (0, import_react85.useId)().replaceAll(":", "");
|
|
19825
|
+
const [active, setActive] = (0, import_react85.useState)();
|
|
19746
19826
|
const paint = gradient ? `url(#${id})` : color;
|
|
19747
19827
|
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("g", { children: [
|
|
19748
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,
|
|
@@ -19797,7 +19877,7 @@ function lineSegments(points) {
|
|
|
19797
19877
|
}
|
|
19798
19878
|
|
|
19799
19879
|
// src/components/useBarMagicState.ts
|
|
19800
|
-
var
|
|
19880
|
+
var import_react86 = require("react");
|
|
19801
19881
|
|
|
19802
19882
|
// src/components/cartesianMagicState.ts
|
|
19803
19883
|
function changeCartesianMagic(state, action) {
|
|
@@ -19812,8 +19892,8 @@ function changeCartesianMagic(state, action) {
|
|
|
19812
19892
|
function useBarMagicState(toolbox, shape = "bar") {
|
|
19813
19893
|
const initial3 = { shape, layout: "original" };
|
|
19814
19894
|
const options = toolbox === true ? {} : typeof toolbox === "object" ? toolbox : void 0;
|
|
19815
|
-
const [state, setState] = (0,
|
|
19816
|
-
(0,
|
|
19895
|
+
const [state, setState] = (0, import_react86.useState)(() => changeCartesianMagic(initial3, options?.activeMagicType ?? shape));
|
|
19896
|
+
(0, import_react86.useEffect)(() => {
|
|
19817
19897
|
if (options?.activeMagicType) setState((s) => changeCartesianMagic(s, options.activeMagicType));
|
|
19818
19898
|
}, [options?.activeMagicType]);
|
|
19819
19899
|
const resolved = options ? { ...options, activeMagicType: state.shape, activeMagicTypes: options.activeMagicTypes ?? (state.layout === "original" ? [state.shape] : [state.shape, state.layout]), onMagicTypeChange: (action) => {
|
|
@@ -19827,7 +19907,7 @@ function useBarMagicState(toolbox, shape = "bar") {
|
|
|
19827
19907
|
}
|
|
19828
19908
|
|
|
19829
19909
|
// src/components/useBarValueTransfer.ts
|
|
19830
|
-
var
|
|
19910
|
+
var import_react87 = require("react");
|
|
19831
19911
|
|
|
19832
19912
|
// src/components/barTransfer.ts
|
|
19833
19913
|
function transferBarValue(series, source, target, categories) {
|
|
@@ -19844,10 +19924,10 @@ function transferBarValue(series, source, target, categories) {
|
|
|
19844
19924
|
|
|
19845
19925
|
// src/components/useBarValueTransfer.ts
|
|
19846
19926
|
function useBarValueTransfer(series, initial3, categories, enabled, publish, onError) {
|
|
19847
|
-
const [islands, setIslands] = (0,
|
|
19848
|
-
const drag = (0,
|
|
19849
|
-
const [offset, setOffset] = (0,
|
|
19850
|
-
(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)(() => {
|
|
19851
19931
|
setIslands([]);
|
|
19852
19932
|
drag.current = void 0;
|
|
19853
19933
|
setOffset(void 0);
|
|
@@ -19948,12 +20028,12 @@ function logarithmicValueAt(progress, domain) {
|
|
|
19948
20028
|
|
|
19949
20029
|
// src/components/Charts.tsx
|
|
19950
20030
|
var import_jsx_runtime86 = require("react/jsx-runtime");
|
|
19951
|
-
var
|
|
20031
|
+
var import_react89 = require("react");
|
|
19952
20032
|
var PLOT = { x: 62, y: 48, width: 628, height: 250 };
|
|
19953
20033
|
var PLOT_BOTTOM = PLOT.y + PLOT.height;
|
|
19954
20034
|
function useLegendSelection(names, controlled, onChange) {
|
|
19955
|
-
const [internal, setInternal] = (0,
|
|
19956
|
-
(0,
|
|
20035
|
+
const [internal, setInternal] = (0, import_react88.useState)(() => Object.fromEntries(names.map((name) => [name, true])));
|
|
20036
|
+
(0, import_react88.useEffect)(() => {
|
|
19957
20037
|
setInternal((current) => {
|
|
19958
20038
|
const next = { ...current };
|
|
19959
20039
|
names.forEach((name) => {
|
|
@@ -20053,7 +20133,7 @@ function lineSymbol(type, x, y, size, color, image, strokeWidth = 2) {
|
|
|
20053
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 });
|
|
20054
20134
|
}
|
|
20055
20135
|
function useZoom(value, defaultValue, onChange) {
|
|
20056
|
-
const [internal, setInternal] = (0,
|
|
20136
|
+
const [internal, setInternal] = (0, import_react88.useState)([...defaultValue ?? [0, 100]]);
|
|
20057
20137
|
const current = value ?? internal;
|
|
20058
20138
|
const update = (next) => {
|
|
20059
20139
|
if (!value) setInternal(next);
|
|
@@ -20063,8 +20143,8 @@ function useZoom(value, defaultValue, onChange) {
|
|
|
20063
20143
|
}
|
|
20064
20144
|
function useToolboxMagicType(toolbox, fallback) {
|
|
20065
20145
|
const options = toolbox === true ? {} : typeof toolbox === "object" ? toolbox : void 0;
|
|
20066
|
-
const [internal, setInternal] = (0,
|
|
20067
|
-
(0,
|
|
20146
|
+
const [internal, setInternal] = (0, import_react88.useState)(options?.activeMagicType ?? fallback);
|
|
20147
|
+
(0, import_react88.useEffect)(() => {
|
|
20068
20148
|
if (options?.activeMagicType) setInternal(options.activeMagicType);
|
|
20069
20149
|
}, [options?.activeMagicType]);
|
|
20070
20150
|
const active = options?.activeMagicType ?? internal;
|
|
@@ -20082,15 +20162,15 @@ function useToolboxMagicType(toolbox, fallback) {
|
|
|
20082
20162
|
} : toolbox;
|
|
20083
20163
|
return [active, resolved];
|
|
20084
20164
|
}
|
|
20085
|
-
var LineChart = (0,
|
|
20086
|
-
const [hoverIndex, setHoverIndex] = (0,
|
|
20087
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
20088
|
-
const [dragPoint, setDragPoint] = (0,
|
|
20089
|
-
const linePaintId = (0,
|
|
20090
|
-
const [hoveredLinePoint, setHoveredLinePoint] = (0,
|
|
20091
|
-
(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]);
|
|
20092
20172
|
const series = externalValueTransfer ? sourceSeries : editableSeries;
|
|
20093
|
-
const initialTransferSeries = (0,
|
|
20173
|
+
const initialTransferSeries = (0, import_react88.useMemo)(() => sourceSeries.map((item) => ({ ...item, data: item.data.map(lineValue) })), [sourceSeries]);
|
|
20094
20174
|
const localTransfer = useBarValueTransfer(series.map((item) => ({ ...item, data: item.data.map(lineValue) })), initialTransferSeries, categories, calculable && calculableMode === "transfer" && !externalValueTransfer, (nextBars) => {
|
|
20095
20175
|
const next = series.map((item, row) => ({ ...item, data: item.data.map((datum, index) => {
|
|
20096
20176
|
const value = barDatum(nextBars[row].data[index]).value;
|
|
@@ -20107,8 +20187,8 @@ var LineChart = (0, import_react87.forwardRef)(function LineChart2({ calculableM
|
|
|
20107
20187
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
20108
20188
|
const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
|
|
20109
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;
|
|
20110
|
-
const [zoomBrushActive, setZoomBrushActive] = (0,
|
|
20111
|
-
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]] : []);
|
|
20112
20192
|
const zoomBrush = dataZoom && zoomBrushActive ? { minSelectionSize: zoomMinSelectionSize, selectionStyle: zoomSelectionStyle, selectionShape: zoomSelectionShape, bounds: PLOT2, onCancel: () => setZoomBrushActive(false), onSelect: (range) => {
|
|
20113
20193
|
const start = Math.min(...zoomValue), span = Math.max(...zoomValue) - start;
|
|
20114
20194
|
const next = [start + range[0] * span, start + range[1] * span];
|
|
@@ -20495,17 +20575,17 @@ function ChartPin({ point, color, label }) {
|
|
|
20495
20575
|
function barDatum(datum) {
|
|
20496
20576
|
return typeof datum === "number" ? { value: datum } : datum;
|
|
20497
20577
|
}
|
|
20498
|
-
var BarChart = (0,
|
|
20499
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
20500
|
-
const [dragBar, setDragBar] = (0,
|
|
20501
|
-
const [hoveredBar, setHoveredBar] = (0,
|
|
20502
|
-
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(":", "");
|
|
20503
20583
|
const localTransfer = useBarValueTransfer(editableSeries, sourceSeries, categories, calculable && calculableMode === "transfer" && !externalValueTransfer, (next) => {
|
|
20504
20584
|
setEditableSeries(next);
|
|
20505
20585
|
onDataChange?.(next);
|
|
20506
20586
|
}, onTransferError);
|
|
20507
20587
|
const transfer = externalValueTransfer ?? localTransfer;
|
|
20508
|
-
(0,
|
|
20588
|
+
(0, import_react88.useEffect)(() => setEditableSeries(sourceSeries), [sourceSeries]);
|
|
20509
20589
|
const series = externalValueTransfer ? sourceSeries : editableSeries;
|
|
20510
20590
|
const legacy = appearance === "macarons";
|
|
20511
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 };
|
|
@@ -20752,17 +20832,17 @@ var BarChart = (0, import_react87.forwardRef)(function BarChart2({ valueTransfer
|
|
|
20752
20832
|
] }, `bar-island-${index}`)) : null
|
|
20753
20833
|
] });
|
|
20754
20834
|
});
|
|
20755
|
-
var ScatterChart = (0,
|
|
20756
|
-
const [data, setData] = (0,
|
|
20757
|
-
const [emphasizedPoint, setEmphasizedPoint] = (0,
|
|
20758
|
-
const [emphasizedAnnotation, setEmphasizedAnnotation] = (0,
|
|
20759
|
-
(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]);
|
|
20760
20840
|
const plot = plotBounds ?? PLOT, bottom = plot.y + plot.height;
|
|
20761
20841
|
const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
|
|
20762
20842
|
const allCategories = [...new Set(data.map((item) => item.category).filter((value) => Boolean(value)))];
|
|
20763
20843
|
const legend = useLegendSelection(allCategories, legendSelected, onLegendSelectionChange);
|
|
20764
20844
|
const activeData = data.filter((item) => !item.category || legend.isSelected(item.category));
|
|
20765
|
-
const sorted = (0,
|
|
20845
|
+
const sorted = (0, import_react88.useMemo)(() => [...activeData].sort((left, right) => left.x - right.x), [activeData]);
|
|
20766
20846
|
const startIndex = dataZoom ? Math.floor(Math.min(...zoomValue) / 100 * Math.max(0, sorted.length - 1)) : 0;
|
|
20767
20847
|
const endIndex = dataZoom ? Math.max(startIndex + 1, Math.ceil(Math.max(...zoomValue) / 100 * sorted.length)) : sorted.length;
|
|
20768
20848
|
const categoryWindow = xCategories ? scatterCategoryWindow(xCategories, dataZoom ? zoomValue : [0, 100]) : void 0;
|
|
@@ -20777,10 +20857,10 @@ var ScatterChart = (0, import_react87.forwardRef)(function ScatterChart2({ symbo
|
|
|
20777
20857
|
const visualMinimum = visualMap?.min ?? (visualValues.length ? Math.min(...visualValues) : 0);
|
|
20778
20858
|
const visualMaximum = visualMap?.max ?? (visualValues.length ? Math.max(...visualValues) : 1);
|
|
20779
20859
|
const visualColors = visualMap?.colors ?? ["#e6f4ff", "#1677ff"];
|
|
20780
|
-
const [selectedPieces, setSelectedPieces] = (0,
|
|
20781
|
-
const [visualRange, setVisualRange] = (0,
|
|
20860
|
+
const [selectedPieces, setSelectedPieces] = (0, import_react88.useState)([]);
|
|
20861
|
+
const [visualRange, setVisualRange] = (0, import_react88.useState)();
|
|
20782
20862
|
const piecesKey = JSON.stringify(visualMap?.pieces ?? []);
|
|
20783
|
-
(0,
|
|
20863
|
+
(0, import_react88.useEffect)(() => setSelectedPieces([]), [piecesKey]);
|
|
20784
20864
|
const statistics = scatterStatistics(visibleData, markByCategory);
|
|
20785
20865
|
const plotted = visibleData.map((item, index) => {
|
|
20786
20866
|
const x = linearScale(categoryWindow ? categoryWindow.indexOf(item.x) : item.x, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]);
|
|
@@ -20938,8 +21018,8 @@ var ScatterChart = (0, import_react87.forwardRef)(function ScatterChart2({ symbo
|
|
|
20938
21018
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ChartDataZoom, { value: zoomValue, onChange: setZoomValue })
|
|
20939
21019
|
] }) : content;
|
|
20940
21020
|
});
|
|
20941
|
-
var CandlestickChart = (0,
|
|
20942
|
-
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);
|
|
20943
21023
|
const active = activeIndex === void 0 ? internalActive : activeIndex;
|
|
20944
21024
|
const seriesVisible = controlledVisible ?? internalVisible;
|
|
20945
21025
|
const setActive = (index) => {
|
|
@@ -20950,7 +21030,7 @@ var CandlestickChart = (0, import_react87.forwardRef)(function CandlestickChart2
|
|
|
20950
21030
|
if (controlledVisible === void 0) setInternalVisible(visible);
|
|
20951
21031
|
onSeriesVisibilityChange?.(visible);
|
|
20952
21032
|
};
|
|
20953
|
-
(0,
|
|
21033
|
+
(0, import_react88.useEffect)(() => {
|
|
20954
21034
|
setData(initialData);
|
|
20955
21035
|
}, [initialData]);
|
|
20956
21036
|
const legacy = appearance === "macarons";
|
|
@@ -21041,20 +21121,20 @@ var CandlestickChart = (0, import_react87.forwardRef)(function CandlestickChart2
|
|
|
21041
21121
|
] }) : content;
|
|
21042
21122
|
});
|
|
21043
21123
|
var EMPTY_PIE_DATA = [];
|
|
21044
|
-
var PieChart = (0,
|
|
21045
|
-
const pieGradientId = (0,
|
|
21046
|
-
const [pieIslands, setPieIslands] = (0,
|
|
21047
|
-
const sourceRings = (0,
|
|
21048
|
-
const [editableRings, setEditableRings] = (0,
|
|
21049
|
-
const valueDrag = (0,
|
|
21050
|
-
const [valueOffset, setValueOffset] = (0,
|
|
21051
|
-
(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]);
|
|
21052
21132
|
const allData = editableRings.flatMap((ring) => ring.data).filter((item) => !item.missing);
|
|
21053
21133
|
const names = [...new Set(allData.map((item) => item.name))];
|
|
21054
21134
|
const legend = useLegendSelection(names, legendSelected, onLegendSelectionChange);
|
|
21055
21135
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u997C\u56FE");
|
|
21056
|
-
const [hovered, setHovered] = (0,
|
|
21057
|
-
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)]);
|
|
21058
21138
|
const selectedNames = selected ?? internalSelected;
|
|
21059
21139
|
const legacy = appearance === "macarons";
|
|
21060
21140
|
const colorNames = [...new Set(allData.filter((item) => item.showInLegend !== false).map((item) => item.name))];
|
|
@@ -21274,15 +21354,15 @@ var PieChart = (0, import_react87.forwardRef)(function PieChart2({ pulseRing, ca
|
|
|
21274
21354
|
});
|
|
21275
21355
|
var EMPTY_RADAR_INDICATORS = [];
|
|
21276
21356
|
var EMPTY_RADAR_SERIES = [];
|
|
21277
|
-
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) {
|
|
21278
21358
|
const legacy = appearance === "macarons";
|
|
21279
|
-
const initialPanels = (0,
|
|
21280
|
-
const [sourcePanels, setSourcePanels] = (0,
|
|
21281
|
-
const [hoveredRadar, setHoveredRadar] = (0,
|
|
21282
|
-
const radarPaintId = `sia-radar-${(0,
|
|
21283
|
-
const radarDrag = (0,
|
|
21284
|
-
const [radarOffset, setRadarOffset] = (0,
|
|
21285
|
-
(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)(() => {
|
|
21286
21366
|
setSourcePanels(initialPanels);
|
|
21287
21367
|
radarDrag.current = null;
|
|
21288
21368
|
setRadarOffset(null);
|
|
@@ -21436,7 +21516,7 @@ var RadarChart = (0, import_react87.forwardRef)(function RadarChart2({ indicator
|
|
|
21436
21516
|
})
|
|
21437
21517
|
] });
|
|
21438
21518
|
});
|
|
21439
|
-
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) {
|
|
21440
21520
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u548C\u5F26");
|
|
21441
21521
|
if (/force|力导向|关系/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
21442
21522
|
GraphChart,
|
|
@@ -21509,11 +21589,11 @@ var ChordChart = (0, import_react87.forwardRef)(function ChordChart2({ nodes, li
|
|
|
21509
21589
|
})
|
|
21510
21590
|
] });
|
|
21511
21591
|
});
|
|
21512
|
-
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) {
|
|
21513
21593
|
const categories = [...new Set(nodes.map((node) => node.category).filter((value) => Boolean(value)))];
|
|
21514
21594
|
const legend = useLegendSelection(categories, legendSelected, onLegendSelectionChange);
|
|
21515
21595
|
const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, layout === "force" ? "\u529B\u5BFC\u5411" : "\u5173\u7CFB");
|
|
21516
|
-
const [roamReset, setRoamReset] = (0,
|
|
21596
|
+
const [roamReset, setRoamReset] = (0, import_react88.useState)(0);
|
|
21517
21597
|
const chartToolbox = typeof resolvedToolbox === "object" ? {
|
|
21518
21598
|
...resolvedToolbox,
|
|
21519
21599
|
onRestore: () => {
|
|
@@ -21522,23 +21602,23 @@ var GraphChart = (0, import_react87.forwardRef)(function GraphChart2({ nodes, li
|
|
|
21522
21602
|
resolvedToolbox.onRestore?.();
|
|
21523
21603
|
}
|
|
21524
21604
|
} : resolvedToolbox;
|
|
21525
|
-
const activeNodes = (0,
|
|
21526
|
-
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)(() => {
|
|
21527
21607
|
const activeIds = new Set(activeNodes.map((node) => node.id));
|
|
21528
21608
|
return links.filter((link) => activeIds.has(link.source) && activeIds.has(link.target));
|
|
21529
21609
|
}, [activeNodes, links]);
|
|
21530
21610
|
const progressive = progressiveForce && layout === "force" && props.animation !== false && !/chord|和弦/i.test(magicType);
|
|
21531
|
-
const calculatedPositions = (0,
|
|
21532
|
-
const [positions, setPositions] = (0,
|
|
21533
|
-
const [dragging, setDragging] = (0,
|
|
21534
|
-
const heldNode = (0,
|
|
21535
|
-
const [forceRestart, setForceRestart] = (0,
|
|
21536
|
-
(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)(() => {
|
|
21537
21617
|
setPositions(calculatedPositions);
|
|
21538
21618
|
setDragging(null);
|
|
21539
21619
|
heldNode.current = null;
|
|
21540
21620
|
}, [calculatedPositions, roamReset]);
|
|
21541
|
-
(0,
|
|
21621
|
+
(0, import_react88.useEffect)(() => {
|
|
21542
21622
|
if (!progressive || activeNodes.length > (forceOptions?.maxNodes ?? 80)) return;
|
|
21543
21623
|
let frame = 0, remaining = Math.max(0, forceOptions?.iterations ?? 140), previous, carry = 0;
|
|
21544
21624
|
const tick = (time) => {
|
|
@@ -21656,7 +21736,7 @@ var GraphChart = (0, import_react87.forwardRef)(function GraphChart2({ nodes, li
|
|
|
21656
21736
|
] })
|
|
21657
21737
|
] });
|
|
21658
21738
|
});
|
|
21659
|
-
var ForceGraphChart = (0,
|
|
21739
|
+
var ForceGraphChart = (0, import_react88.forwardRef)(function ForceGraphChart2(props, ref) {
|
|
21660
21740
|
return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(GraphChart, { ...props, layout: "force", ref });
|
|
21661
21741
|
});
|
|
21662
21742
|
var ForceChart = ForceGraphChart;
|
|
@@ -21685,12 +21765,12 @@ function colorBetween(start, end, ratio) {
|
|
|
21685
21765
|
const to = read(end);
|
|
21686
21766
|
return `rgb(${from.map((value, index) => Math.round(value + ((to[index] ?? value) - value) * Math.max(0, Math.min(1, ratio)))).join(" ")})`;
|
|
21687
21767
|
}
|
|
21688
|
-
var MapChart = (0,
|
|
21689
|
-
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)]);
|
|
21690
21770
|
const selectedNames = selected ?? internalSelected;
|
|
21691
|
-
const [hoveredRegion, setHoveredRegion] = (0,
|
|
21692
|
-
const [hoveredMarkPoint, setHoveredMarkPoint] = (0,
|
|
21693
|
-
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)();
|
|
21694
21774
|
const hoveredValueRange = emphasisValueRange ?? internalHoveredValueRange;
|
|
21695
21775
|
const roamControl = useMapRoam(roam, scaleLimit, wheelZoomFactors);
|
|
21696
21776
|
const { view } = roamControl;
|
|
@@ -21705,8 +21785,8 @@ var MapChart = (0, import_react87.forwardRef)(function MapChart2({ overlayProjec
|
|
|
21705
21785
|
const values = data.map((item) => item.value);
|
|
21706
21786
|
const minimum = valueDomain?.[0] ?? (values.length ? Math.min(...values) : 0);
|
|
21707
21787
|
const maximum = valueDomain?.[1] ?? (values.length ? Math.max(...values) : 1);
|
|
21708
|
-
const [internalVisualRange, setInternalVisualRange] = (0,
|
|
21709
|
-
(0,
|
|
21788
|
+
const [internalVisualRange, setInternalVisualRange] = (0, import_react88.useState)(() => [...defaultVisualRange ?? [minimum, maximum]]);
|
|
21789
|
+
(0, import_react88.useEffect)(() => {
|
|
21710
21790
|
if (!visualRange && !defaultVisualRange) setInternalVisualRange([minimum, maximum]);
|
|
21711
21791
|
}, [defaultVisualRange, maximum, minimum, visualRange]);
|
|
21712
21792
|
const currentVisualRange = visualRange ?? internalVisualRange;
|
|
@@ -21882,7 +21962,7 @@ var MapChart = (0, import_react87.forwardRef)(function MapChart2({ overlayProjec
|
|
|
21882
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
|
|
21883
21963
|
] });
|
|
21884
21964
|
});
|
|
21885
|
-
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) {
|
|
21886
21966
|
const count = Math.max(1, data.length);
|
|
21887
21967
|
const legacy = appearance === "macarons";
|
|
21888
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) => {
|
|
@@ -21965,12 +22045,12 @@ var GaugeChart = (0, import_react87.forwardRef)(function GaugeChart2({ tooltipFo
|
|
|
21965
22045
|
] }, `${item.name}-${index}`);
|
|
21966
22046
|
}) });
|
|
21967
22047
|
});
|
|
21968
|
-
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) {
|
|
21969
22049
|
const legacy = appearance === "macarons";
|
|
21970
|
-
const [activeFunnel, setActiveFunnel] = (0,
|
|
21971
|
-
const initialFunnels = (0,
|
|
21972
|
-
const [sourceFunnels, setSourceFunnels] = (0,
|
|
21973
|
-
(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]);
|
|
21974
22054
|
const allData = sourceFunnels.flatMap((funnel) => funnel.data);
|
|
21975
22055
|
const legendData = [...new Map(allData.map((item) => [item.name, item])).values()];
|
|
21976
22056
|
const legend = useLegendSelection(legendData.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -22061,7 +22141,7 @@ var FunnelChart = (0, import_react87.forwardRef)(function FunnelChart2({ data =
|
|
|
22061
22141
|
})
|
|
22062
22142
|
] });
|
|
22063
22143
|
});
|
|
22064
|
-
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) {
|
|
22065
22145
|
const pointMode = points.length > 0;
|
|
22066
22146
|
const values = pointMode ? points.map((point) => point.value) : data.flatMap((row) => [...row]);
|
|
22067
22147
|
const minimum = values.length ? Math.min(...values) : 0;
|
|
@@ -22070,7 +22150,7 @@ var HeatmapChart = (0, import_react87.forwardRef)(function HeatmapChart2({ raste
|
|
|
22070
22150
|
const cellHeight = PLOT.height / Math.max(1, yLabels.length);
|
|
22071
22151
|
const pointXDomain = niceChartDomain(points.map((point) => point.x), false);
|
|
22072
22152
|
const pointYDomain = niceChartDomain(points.map((point) => point.y), false);
|
|
22073
|
-
const filterId = `sia-heat-${(0,
|
|
22153
|
+
const filterId = `sia-heat-${(0, import_react88.useId)().replaceAll(":", "")}`;
|
|
22074
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: [
|
|
22075
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,
|
|
22076
22156
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(HeatmapRaster, { width: raster.width, height: raster.height, points, options: raster })
|
|
@@ -22106,7 +22186,7 @@ var HeatmapChart = (0, import_react87.forwardRef)(function HeatmapChart2({ raste
|
|
|
22106
22186
|
] })
|
|
22107
22187
|
] });
|
|
22108
22188
|
});
|
|
22109
|
-
var ThemeRiverChart = (0,
|
|
22189
|
+
var ThemeRiverChart = (0, import_react88.forwardRef)(function ThemeRiverChart2({ categories, series, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, ...props }, ref) {
|
|
22110
22190
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
22111
22191
|
const activeSeries = series.filter((item) => legend.isSelected(item.name));
|
|
22112
22192
|
const totals = categories.map((_, index) => activeSeries.reduce((sum, item) => sum + Math.max(0, item.data[index] ?? 0), 0));
|
|
@@ -22144,8 +22224,8 @@ function eventTime(value) {
|
|
|
22144
22224
|
if (typeof value === "number") return value;
|
|
22145
22225
|
return Date.parse(/^\d{4}-\d{2}-\d{2}$/.test(value) ? value.replace(/-/g, "/") : value);
|
|
22146
22226
|
}
|
|
22147
|
-
var EventRiverChart = (0,
|
|
22148
|
-
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);
|
|
22149
22229
|
const area = plot;
|
|
22150
22230
|
palette = palette ?? (appearance === "macarons" ? ["#2ec7c9", "#b6a2de"] : void 0);
|
|
22151
22231
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -22218,9 +22298,9 @@ function vennDistance(radiusA, radiusB, overlap) {
|
|
|
22218
22298
|
}
|
|
22219
22299
|
return (low + high) / 2;
|
|
22220
22300
|
}
|
|
22221
|
-
var VennChart = (0,
|
|
22222
|
-
const [sets, setSets] = (0,
|
|
22223
|
-
(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)(() => {
|
|
22224
22304
|
setSets(initialSets);
|
|
22225
22305
|
setIntersection(initialIntersection);
|
|
22226
22306
|
}, [initialSets, initialIntersection]);
|
|
@@ -22283,17 +22363,17 @@ function layoutTreemap(nodes, x, y, width, height, gap, maxDepth, depth = 0, see
|
|
|
22283
22363
|
});
|
|
22284
22364
|
return result;
|
|
22285
22365
|
}
|
|
22286
|
-
var TreemapChart = (0,
|
|
22287
|
-
const [path, setPath] = (0,
|
|
22288
|
-
const [sourceData, setSourceData] = (0,
|
|
22289
|
-
const [active, setActive] = (0,
|
|
22290
|
-
(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)(() => {
|
|
22291
22371
|
setSourceData(data);
|
|
22292
22372
|
setPath([]);
|
|
22293
22373
|
}, [data]);
|
|
22294
22374
|
const currentData = path.reduce((nodes, name) => nodes.find((node) => node.name === name)?.children ?? nodes, sourceData);
|
|
22295
22375
|
const top = drilldown && showBreadcrumb ? 52 : 28;
|
|
22296
|
-
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]);
|
|
22297
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) => {
|
|
22298
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);
|
|
22299
22379
|
setSourceData(update(sourceData, 0));
|
|
@@ -22361,15 +22441,15 @@ function flattenTree2(root, collapsed) {
|
|
|
22361
22441
|
visit(root, 0);
|
|
22362
22442
|
return { nodes, leafCount: Math.max(1, leafOrder), maxDepth: Math.max(0, ...nodes.map((item) => item.depth)) };
|
|
22363
22443
|
}
|
|
22364
|
-
var TreeChart = (0,
|
|
22365
|
-
const [sourceData, setSourceData] = (0,
|
|
22366
|
-
const [roamReset, setRoamReset] = (0,
|
|
22367
|
-
const [active, setActive] = (0,
|
|
22368
|
-
(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)(() => {
|
|
22369
22449
|
setSourceData(data);
|
|
22370
22450
|
setActive(void 0);
|
|
22371
22451
|
}, [data]);
|
|
22372
|
-
const [collapsed, setCollapsed] = (0,
|
|
22452
|
+
const [collapsed, setCollapsed] = (0, import_react88.useState)(() => {
|
|
22373
22453
|
const result = /* @__PURE__ */ new Set();
|
|
22374
22454
|
const visit = (node) => {
|
|
22375
22455
|
if (node.collapsed) result.add(node.name);
|
|
@@ -22378,8 +22458,8 @@ var TreeChart = (0, import_react87.forwardRef)(function TreeChart2({ data, itemS
|
|
|
22378
22458
|
visit(data);
|
|
22379
22459
|
return result;
|
|
22380
22460
|
});
|
|
22381
|
-
const layout = (0,
|
|
22382
|
-
const fixedLayout = (0,
|
|
22461
|
+
const layout = (0, import_react88.useMemo)(() => flattenTree2(sourceData, collapsed), [collapsed, sourceData]);
|
|
22462
|
+
const fixedLayout = (0, import_react88.useMemo)(() => {
|
|
22383
22463
|
const visible = (node) => ({ ...node, children: collapsed.has(node.name) ? [] : node.children?.map(visible) });
|
|
22384
22464
|
return rootPosition ? layoutTreeNodes(visible(sourceData), { nodeSize, nodePadding, layerPadding, rootPosition, orientation }) : void 0;
|
|
22385
22465
|
}, [sourceData, collapsed, rootPosition, nodeSize, nodePadding, layerPadding, orientation]);
|
|
@@ -22449,15 +22529,15 @@ var TreeChart = (0, import_react87.forwardRef)(function TreeChart2({ data, itemS
|
|
|
22449
22529
|
})
|
|
22450
22530
|
] }) });
|
|
22451
22531
|
});
|
|
22452
|
-
var WordCloudChart = (0,
|
|
22453
|
-
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)(() => {
|
|
22454
22534
|
const context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
|
|
22455
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) => {
|
|
22456
22536
|
context.font = `${word.fontWeight ?? fontWeight} ${size}px ${word.fontFamily ?? fontFamily ?? "Arial"}`;
|
|
22457
22537
|
return context.measureText(word.name).width;
|
|
22458
22538
|
} : void 0 });
|
|
22459
22539
|
}, [data, bounds, autoFit, areaSizing, maxFontSize, minFontSize, padding, rotations, shape, spiralStep, fontFamily, fontWeight]);
|
|
22460
|
-
(0,
|
|
22540
|
+
(0, import_react88.useEffect)(() => {
|
|
22461
22541
|
const present = new Set(placements.map((p) => p.index));
|
|
22462
22542
|
onLayout?.({ placed: placements.length, unplaced: data.filter((_, i) => !present.has(i)).map((item) => item.name) });
|
|
22463
22543
|
}, [placements, data, onLayout]);
|
|
@@ -22466,30 +22546,30 @@ var WordCloudChart = (0, import_react87.forwardRef)(function WordCloudChart2({ d
|
|
|
22466
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}`);
|
|
22467
22547
|
}) });
|
|
22468
22548
|
});
|
|
22469
|
-
var MixedChart = (0,
|
|
22470
|
-
const plotClipId = `sia-mixed-plot-${(0,
|
|
22471
|
-
const [editableSeries, setEditableSeries] = (0,
|
|
22472
|
-
const [geometry, setGeometry] = (0,
|
|
22473
|
-
const [pointerIndex, setPointerIndex] = (0,
|
|
22474
|
-
const [pointerAxisIndex, setPointerAxisIndex] = (0,
|
|
22475
|
-
const [motionRevision, setMotionRevision] = (0,
|
|
22476
|
-
const [stackMode, setStackMode] = (0,
|
|
22477
|
-
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);
|
|
22478
22558
|
const publishData = (next) => {
|
|
22479
22559
|
lastPublished.current = next;
|
|
22480
22560
|
onDataChange?.(next);
|
|
22481
22561
|
};
|
|
22482
|
-
const [islands, setIslands] = (0,
|
|
22483
|
-
const drag = (0,
|
|
22484
|
-
const [dragOffset, setDragOffset] = (0,
|
|
22485
|
-
(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)(() => {
|
|
22486
22566
|
if (sourceSeries === lastPublished.current) return;
|
|
22487
22567
|
setEditableSeries(sourceSeries);
|
|
22488
22568
|
setIslands([]);
|
|
22489
22569
|
drag.current = null;
|
|
22490
22570
|
setDragOffset(void 0);
|
|
22491
22571
|
}, [sourceSeries]);
|
|
22492
|
-
const series = (0,
|
|
22572
|
+
const series = (0, import_react88.useMemo)(() => editableSeries.map((item) => geometry ? { ...item, type: geometry } : item), [editableSeries, geometry]);
|
|
22493
22573
|
const stacked = stackMode ?? sourceStacked;
|
|
22494
22574
|
const PLOT2 = plotBounds ?? { x: 62, y: 48, width: 628, height: 250 }, PLOT_BOTTOM2 = PLOT2.y + PLOT2.height;
|
|
22495
22575
|
const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
|
|
@@ -22653,7 +22733,7 @@ var MixedChart = (0, import_react87.forwardRef)(function MixedChart2({ axisPoint
|
|
|
22653
22733
|
})
|
|
22654
22734
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CartesianAxes, { categories, domain, band: categoryGap }),
|
|
22655
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,
|
|
22656
|
-
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,
|
|
22657
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,
|
|
22658
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 }) }) }),
|
|
22659
22739
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("g", { "data-mixed-plot": "", clipPath: clipPlot ? `url(#${plotClipId})` : void 0, children: renderSeries.map((item) => {
|
|
@@ -22692,7 +22772,7 @@ var MixedChart = (0, import_react87.forwardRef)(function MixedChart2({ axisPoint
|
|
|
22692
22772
|
const zero = linearScale(placement.start, [valueDomain[0], valueDomain[1]], [PLOT_BOTTOM2, PLOT2.y]);
|
|
22693
22773
|
const rectY = barSpacing?.pixelAlign ? Math.floor(Math.min(y, zero)) : Math.min(y, zero);
|
|
22694
22774
|
const rectHeight = barSpacing?.pixelAlign ? Math.ceil(Math.abs(zero - y)) : Math.abs(zero - y);
|
|
22695
|
-
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) => {
|
|
22696
22776
|
if (!finishDrag(event)) onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event });
|
|
22697
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}`);
|
|
22698
22778
|
})
|
|
@@ -22721,7 +22801,7 @@ var MixedChart = (0, import_react87.forwardRef)(function MixedChart2({ axisPoint
|
|
|
22721
22801
|
if (!placements[index]) return null;
|
|
22722
22802
|
const name = categoryName(index, item.categoryAxisIndex);
|
|
22723
22803
|
const value = item.data[index] ?? 0;
|
|
22724
|
-
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) => {
|
|
22725
22805
|
if (!finishDrag(event)) onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event });
|
|
22726
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 }));
|
|
22727
22807
|
})
|
|
@@ -22762,9 +22842,9 @@ var KLineChart = CandlestickChart;
|
|
|
22762
22842
|
|
|
22763
22843
|
// src/components/LineShareChart.tsx
|
|
22764
22844
|
var import_jsx_runtime87 = require("react/jsx-runtime");
|
|
22765
|
-
var LineShareChart = (0,
|
|
22766
|
-
const [selected, setSelected] = (0,
|
|
22767
|
-
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);
|
|
22768
22848
|
const width = props.viewBoxSize?.[0] ?? 900, height = props.viewBoxSize?.[1] ?? 450;
|
|
22769
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;
|
|
22770
22850
|
const maximum = data.reduce((best, item2, i) => item2.value >= data[best].value ? i : best, 0);
|
|
@@ -22842,16 +22922,16 @@ function paddedValueExtent(values, padding = 0.05) {
|
|
|
22842
22922
|
}
|
|
22843
22923
|
|
|
22844
22924
|
// src/components/XYChart.tsx
|
|
22845
|
-
var
|
|
22925
|
+
var import_react91 = require("react");
|
|
22846
22926
|
var import_jsx_runtime88 = require("react/jsx-runtime");
|
|
22847
|
-
var XYChart = (0,
|
|
22848
|
-
const [series, setSeries] = (0,
|
|
22849
|
-
const [hidden, setHidden] = (0,
|
|
22850
|
-
const [crosshair, setCrosshair] = (0,
|
|
22851
|
-
const [drag, setDrag] = (0,
|
|
22852
|
-
const [geometry, setGeometry] = (0,
|
|
22853
|
-
const [zoom, setZoom] = (0,
|
|
22854
|
-
(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]);
|
|
22855
22935
|
const window2 = dataZoom || xAxisType === "time" ? scatterValueWindow(series.flatMap((item) => item.data.map((point) => point[0])), dataZoom ? zoom : [0, 100]) : void 0;
|
|
22856
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 }));
|
|
22857
22937
|
const width = props.viewBoxSize?.[0] ?? 663, height = props.viewBoxSize?.[1] ?? 379;
|
|
@@ -22980,7 +23060,7 @@ var XYChart = (0, import_react90.forwardRef)(function XYChart2({ series: source,
|
|
|
22980
23060
|
});
|
|
22981
23061
|
|
|
22982
23062
|
// src/components/ChartMapOverlay.tsx
|
|
22983
|
-
var
|
|
23063
|
+
var import_react92 = require("react");
|
|
22984
23064
|
|
|
22985
23065
|
// src/components/mapOverlayHost.ts
|
|
22986
23066
|
function observeMapOverlayHost(host, onChange) {
|
|
@@ -23019,11 +23099,11 @@ function observeMapOverlayHost(host, onChange) {
|
|
|
23019
23099
|
// src/components/ChartMapOverlay.tsx
|
|
23020
23100
|
var import_jsx_runtime89 = require("react/jsx-runtime");
|
|
23021
23101
|
function ChartMapOverlay({ createHost, children, className, style, ariaLabel = "\u5730\u56FE\u53E0\u52A0\u56FE\u8868", onError }) {
|
|
23022
|
-
const container = (0,
|
|
23023
|
-
const errorHandler = (0,
|
|
23102
|
+
const container = (0, import_react92.useRef)(null);
|
|
23103
|
+
const errorHandler = (0, import_react92.useRef)(onError);
|
|
23024
23104
|
errorHandler.current = onError;
|
|
23025
|
-
const [snapshot, setSnapshot] = (0,
|
|
23026
|
-
(0,
|
|
23105
|
+
const [snapshot, setSnapshot] = (0, import_react92.useState)();
|
|
23106
|
+
(0, import_react92.useEffect)(() => {
|
|
23027
23107
|
setSnapshot(void 0);
|
|
23028
23108
|
if (!container.current) return;
|
|
23029
23109
|
try {
|
|
@@ -23100,9 +23180,9 @@ function createBaiduMapHost(element, sdk, options) {
|
|
|
23100
23180
|
}
|
|
23101
23181
|
|
|
23102
23182
|
// src/components/InputSelect.tsx
|
|
23103
|
-
var
|
|
23183
|
+
var import_react93 = require("react");
|
|
23104
23184
|
var import_jsx_runtime90 = require("react/jsx-runtime");
|
|
23105
|
-
var InputSelect = (0,
|
|
23185
|
+
var InputSelect = (0, import_react93.forwardRef)(function InputSelect2({
|
|
23106
23186
|
options,
|
|
23107
23187
|
value,
|
|
23108
23188
|
defaultValue,
|
|
@@ -23128,22 +23208,22 @@ var InputSelect = (0, import_react92.forwardRef)(function InputSelect2({
|
|
|
23128
23208
|
...inputProps
|
|
23129
23209
|
}, forwardedRef) {
|
|
23130
23210
|
const size = useControlSize(sizeProp);
|
|
23131
|
-
const [internal, setInternal] = (0,
|
|
23211
|
+
const [internal, setInternal] = (0, import_react93.useState)(defaultValue);
|
|
23132
23212
|
const current = value !== void 0 ? value : internal;
|
|
23133
23213
|
const values = current == null ? [] : Array.isArray(current) ? current : [current];
|
|
23134
23214
|
const text = values.map((item) => displayField === "label" ? String(options.find((option) => option.optionType !== "divider" && option.value === item)?.label ?? item) : String(item)).join(",");
|
|
23135
|
-
const [draft, setDraft] = (0,
|
|
23136
|
-
(0,
|
|
23215
|
+
const [draft, setDraft] = (0, import_react93.useState)(text);
|
|
23216
|
+
(0, import_react93.useEffect)(() => {
|
|
23137
23217
|
setDraft(text);
|
|
23138
23218
|
}, [text, current]);
|
|
23139
|
-
const [open, setOpen] = (0,
|
|
23140
|
-
const [search, setSearch] = (0,
|
|
23141
|
-
const [modalOpen, setModalOpen] = (0,
|
|
23142
|
-
const [modalValues, setModalValues] = (0,
|
|
23143
|
-
const [selectedOnly, setSelectedOnly] = (0,
|
|
23144
|
-
const rootRef = (0,
|
|
23145
|
-
const popupRef = (0,
|
|
23146
|
-
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);
|
|
23147
23227
|
const config = typeof enableModal === "object" ? enableModal : {};
|
|
23148
23228
|
function changeOpen(next) {
|
|
23149
23229
|
if (next && (disabled || loading)) return;
|
|
@@ -23163,7 +23243,7 @@ var InputSelect = (0, import_react92.forwardRef)(function InputSelect2({
|
|
|
23163
23243
|
inputRef.current?.focus();
|
|
23164
23244
|
}
|
|
23165
23245
|
}
|
|
23166
|
-
(0,
|
|
23246
|
+
(0, import_react93.useEffect)(() => {
|
|
23167
23247
|
if (!open) return;
|
|
23168
23248
|
const outside = (event) => {
|
|
23169
23249
|
if (!rootRef.current?.contains(event.target) && !popupRef.current?.contains(event.target)) changeOpen(false);
|
|
@@ -23171,7 +23251,7 @@ var InputSelect = (0, import_react92.forwardRef)(function InputSelect2({
|
|
|
23171
23251
|
document.addEventListener("pointerdown", outside);
|
|
23172
23252
|
return () => document.removeEventListener("pointerdown", outside);
|
|
23173
23253
|
}, [open, onOpenChange]);
|
|
23174
|
-
(0,
|
|
23254
|
+
(0, import_react93.useEffect)(() => {
|
|
23175
23255
|
if (disabled || loading) {
|
|
23176
23256
|
changeOpen(false);
|
|
23177
23257
|
setModalOpen(false);
|
|
@@ -23304,7 +23384,7 @@ var InputSelect = (0, import_react92.forwardRef)(function InputSelect2({
|
|
|
23304
23384
|
});
|
|
23305
23385
|
|
|
23306
23386
|
// src/components/QueryForm.tsx
|
|
23307
|
-
var
|
|
23387
|
+
var import_react94 = require("react");
|
|
23308
23388
|
var import_jsx_runtime91 = require("react/jsx-runtime");
|
|
23309
23389
|
function QueryForm({
|
|
23310
23390
|
fields,
|
|
@@ -23338,31 +23418,31 @@ function QueryForm({
|
|
|
23338
23418
|
...formProps
|
|
23339
23419
|
}) {
|
|
23340
23420
|
const [form] = useForm(providedForm);
|
|
23341
|
-
const [internalCollapsed, setInternalCollapsed] = (0,
|
|
23342
|
-
const [needsCollapse, setNeedsCollapse] = (0,
|
|
23421
|
+
const [internalCollapsed, setInternalCollapsed] = (0, import_react94.useState)(defaultCollapsed);
|
|
23422
|
+
const [needsCollapse, setNeedsCollapse] = (0, import_react94.useState)(false);
|
|
23343
23423
|
const collapsed = collapsible && needsCollapse && (controlledCollapsed ?? internalCollapsed);
|
|
23344
|
-
const [searching, setSearching] = (0,
|
|
23345
|
-
const [saving, setSaving] = (0,
|
|
23346
|
-
const [removing, setRemoving] = (0,
|
|
23347
|
-
const [saveOpen, setSaveOpen] = (0,
|
|
23348
|
-
const [saveName, setSaveName] = (0,
|
|
23349
|
-
const [saveError, setSaveError] = (0,
|
|
23350
|
-
const [error, setError] = (0,
|
|
23351
|
-
const [activeShortcut, setActiveShortcut] = (0,
|
|
23352
|
-
const source = (0,
|
|
23353
|
-
const searchLock = (0,
|
|
23354
|
-
const saveLock = (0,
|
|
23355
|
-
const removeLock = (0,
|
|
23356
|
-
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)();
|
|
23357
23437
|
const busy = disabled || loading || searching;
|
|
23358
23438
|
const shortcutBusy = busy || shortcutsLoading || saving || removing;
|
|
23359
|
-
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 }));
|
|
23360
23440
|
const limit = Math.max(1, Math.floor(collapsedCount));
|
|
23361
|
-
const rowRef = (0,
|
|
23362
|
-
const actionsRef = (0,
|
|
23363
|
-
const toggleRef = (0,
|
|
23364
|
-
const [fittingCount, setFittingCount] = (0,
|
|
23365
|
-
(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)(() => {
|
|
23366
23446
|
const row = rowRef.current;
|
|
23367
23447
|
const actions = actionsRef.current;
|
|
23368
23448
|
if (!row || !actions) return;
|