@ant-design/agentic-ui 2.30.31 → 2.31.0
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/AILabel/index.d.ts +2 -0
- package/dist/AILabel/index.js +4 -2
- package/dist/AgentRunBar/Robot.js +0 -1
- package/dist/AgentRunBar/index.js +1 -0
- package/dist/AgenticLayout/index.js +1 -0
- package/dist/AnswerAlert/index.js +1 -0
- package/dist/BackTo/ScrollVisibleButton.d.ts +2 -0
- package/dist/BackTo/ScrollVisibleButton.js +4 -2
- package/dist/Bubble/List/PureBubbleList.js +2 -0
- package/dist/Bubble/style.js +0 -1
- package/dist/ChatBootPage/ButtonTab.js +1 -0
- package/dist/ChatBootPage/ButtonTabGroup.js +1 -0
- package/dist/ChatBootPage/CaseReply.js +1 -0
- package/dist/ChatBootPage/Title.js +1 -0
- package/dist/ChatLayout/index.js +1 -0
- package/dist/Components/ActionItemBox/ActionItemBox.js +1 -0
- package/dist/Components/Button/IconButton/index.js +1 -0
- package/dist/Components/Button/SwitchButton/index.js +1 -0
- package/dist/Components/Button/ToggleButton/index.js +1 -0
- package/dist/Components/GradientText/index.js +1 -0
- package/dist/Components/LayoutHeader/index.js +2 -1
- package/dist/Components/Loading/Loading.js +2 -0
- package/dist/Components/Robot/index.js +1 -0
- package/dist/Components/Robot/lotties/BlowingWindLottie/index.js +16 -3
- package/dist/Components/Robot/lotties/BouncingLottie/index.js +16 -3
- package/dist/Components/Robot/lotties/DazingLottie/index.js +16 -3
- package/dist/Components/Robot/lotties/PeekLottie/index.js +16 -3
- package/dist/Components/Robot/lotties/ThinkingLottie/index.js +16 -3
- package/dist/Components/SuggestionList/index.js +1 -0
- package/dist/Components/TextAnimate/index.js +1 -0
- package/dist/Components/TypingAnimation/index.js +2 -1
- package/dist/Components/VisualList/index.js +3 -0
- package/dist/Components/lotties/CreativeSparkLottie/index.js +16 -3
- package/dist/Components/lotties/DazingLottie/index.js +16 -3
- package/dist/Components/lotties/LoadingLottie/index.js +16 -3
- package/dist/Components/lotties/ThinkingLottie/index.js +16 -3
- package/dist/Components/lotties/ThreeThinkingLottie/index.d.ts +68 -0
- package/dist/Components/lotties/ThreeThinkingLottie/index.js +103 -0
- package/dist/Components/lotties/ThreeThinkingLottie/three-thinking.json +130 -0
- package/dist/Components/lotties/bubble-actions/Copy/index.js +12 -3
- package/dist/Components/lotties/bubble-actions/Dislike/index.js +12 -3
- package/dist/Components/lotties/bubble-actions/Like/index.js +12 -3
- package/dist/Components/lotties/bubble-actions/More/index.js +12 -3
- package/dist/Components/lotties/bubble-actions/Play/index.js +12 -3
- package/dist/Components/lotties/bubble-actions/Quote/index.js +12 -3
- package/dist/Components/lotties/bubble-actions/Refresh/index.js +12 -3
- package/dist/Components/lotties/bubble-actions/Share/index.js +12 -3
- package/dist/Components/lotties/index.d.ts +2 -0
- package/dist/Components/lotties/index.js +2 -0
- package/dist/Components/lotties/useAsyncLottieData.d.ts +9 -0
- package/dist/Components/lotties/useAsyncLottieData.js +83 -0
- package/dist/History/index.js +1 -0
- package/dist/Hooks/useLanguage.d.ts +1 -0
- package/dist/I18n/locales.d.ts +1 -0
- package/dist/I18n/locales.js +2 -0
- package/dist/Icons/animated/VoicePlayLottie/index.js +16 -3
- package/dist/Icons/animated/VoicingLottie/index.js +16 -3
- package/dist/MarkdownEditor/BaseMarkdownEditor.js +2 -0
- package/dist/MarkdownEditor/editor/elements/Paragraph/index.js +10 -10
- package/dist/MarkdownInputField/BorderBeamAnimation.d.ts +1 -1
- package/dist/MarkdownInputField/BorderBeamAnimation.js +6 -3
- package/dist/MarkdownRenderer/MarkdownRenderer.js +1 -0
- package/dist/Plugins/chart/AreaChart/index.js +10 -8
- package/dist/Plugins/chart/BarChart/index.js +10 -8
- package/dist/Plugins/chart/BoxPlotChart/index.d.ts +1 -1
- package/dist/Plugins/chart/BoxPlotChart/index.js +11 -8
- package/dist/Plugins/chart/DonutChart/index.js +14 -12
- package/dist/Plugins/chart/FunnelChart/index.js +10 -8
- package/dist/Plugins/chart/HistogramChart/index.d.ts +1 -1
- package/dist/Plugins/chart/HistogramChart/index.js +11 -8
- package/dist/Plugins/chart/LineChart/index.js +10 -8
- package/dist/Plugins/chart/RadarChart/index.js +14 -12
- package/dist/Plugins/chart/ScatterChart/index.js +14 -12
- package/dist/Plugins/chart/components/ChartContainer/ChartContainer.d.ts +13 -3
- package/dist/Plugins/chart/components/ChartContainer/ChartContainer.js +21 -4
- package/dist/Plugins/chart/components/ChartContainer/ChartErrorBoundary.d.ts +2 -0
- package/dist/Plugins/chart/hooks/index.d.ts +2 -0
- package/dist/Plugins/chart/hooks/index.js +1 -0
- package/dist/Plugins/chart/hooks/useChartTheme.d.ts +1 -1
- package/dist/Plugins/chart/hooks/useChartTheme.js +1 -1
- package/dist/Plugins/chart/hooks/useDetectTheme.d.ts +45 -0
- package/dist/Plugins/chart/hooks/useDetectTheme.js +249 -0
- package/dist/Schema/SchemaEditor/index.js +1 -0
- package/dist/Schema/SchemaForm/index.js +1 -0
- package/dist/TaskList/TaskList.js +21 -4
- package/dist/TaskList/components/TaskListItem.js +2 -1
- package/dist/TaskList/style.js +1 -1
- package/dist/ThoughtChainList/index.js +1 -0
- package/dist/ThoughtChainList/style.js +14 -3
- package/dist/ToolUseBar/index.js +7 -6
- package/dist/ToolUseBarThink/style.js +0 -7
- package/dist/WelcomeMessage/index.js +1 -0
- package/dist/Workspace/File/FileComponent.js +15 -9
- package/dist/Workspace/File/FileTree/FileTreeComponent.js +6 -1
- package/dist/Workspace/File/PreviewComponent.js +23 -6
- package/package.json +3 -3
|
@@ -154,7 +154,7 @@ import { useLocale } from "../../../I18n";
|
|
|
154
154
|
import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
|
|
155
155
|
import { defaultColorList } from "../const";
|
|
156
156
|
import { isWindowDefined } from "../env";
|
|
157
|
-
import { useChartTheme } from "../hooks";
|
|
157
|
+
import { useChartTheme, useDetectTheme } from "../hooks";
|
|
158
158
|
import { resolveCssVariable } from "../utils";
|
|
159
159
|
import { SINGLE_MODE_DESKTOP_CUTOUT, SINGLE_MODE_MOBILE_CUTOUT } from "./constants";
|
|
160
160
|
import { useAutoCategory, useFilterLabels, useMobile, useResponsiveDimensions } from "./hooks";
|
|
@@ -199,7 +199,7 @@ import { useStyle } from "./style";
|
|
|
199
199
|
*
|
|
200
200
|
* @since 1.0.0
|
|
201
201
|
*/ var DonutChart = function DonutChart(_0) {
|
|
202
|
-
var data = _0.data, configs = _0.configs, _0_width = _0.width, width = _0_width === void 0 ? 200 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 200 : _0_height, className = _0.className, classNamesProp = _0.classNames, title = _0.title, _0_showToolbar = _0.showToolbar, showToolbar = _0_showToolbar === void 0 ? true : _0_showToolbar, onDownload = _0.onDownload,
|
|
202
|
+
var data = _0.data, configs = _0.configs, _0_width = _0.width, width = _0_width === void 0 ? 200 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 200 : _0_height, className = _0.className, classNamesProp = _0.classNames, title = _0.title, _0_showToolbar = _0.showToolbar, showToolbar = _0_showToolbar === void 0 ? true : _0_showToolbar, onDownload = _0.onDownload, theme = _0.theme, dataTime = _0.dataTime, filterList = _0.filterList, selectedFilter = _0.selectedFilter, onFilterChange = _0.onFilterChange, _0_enableAutoCategory = _0.enableAutoCategory, enableAutoCategory = _0_enableAutoCategory === void 0 ? true : _0_enableAutoCategory, _0_singleMode = _0.singleMode, singleMode = _0_singleMode === void 0 ? false : _0_singleMode, toolbarExtra = _0.toolbarExtra, _0_renderFilterInToolbar = _0.renderFilterInToolbar, renderFilterInToolbar = _0_renderFilterInToolbar === void 0 ? false : _0_renderFilterInToolbar, statisticConfig = _0.statistic, _0_loading = _0.loading, loading = _0_loading === void 0 ? false : _0_loading, props = _object_without_properties(_0, [
|
|
203
203
|
"data",
|
|
204
204
|
"configs",
|
|
205
205
|
"width",
|
|
@@ -236,7 +236,9 @@ import { useStyle } from "./style";
|
|
|
236
236
|
var _useMobile = useMobile(), isMobile = _useMobile.isMobile, windowWidth = _useMobile.windowWidth;
|
|
237
237
|
var locale = useLocale();
|
|
238
238
|
// 使用 useChartTheme hook 获取主题相关颜色
|
|
239
|
-
var
|
|
239
|
+
var detectedTheme = useDetectTheme();
|
|
240
|
+
var resolvedTheme = theme !== null && theme !== void 0 ? theme : detectedTheme;
|
|
241
|
+
var isLight = useChartTheme(resolvedTheme).isLight;
|
|
240
242
|
// 默认配置:当 configs 不传时,使用默认配置,showLegend 默认为 true
|
|
241
243
|
var defaultConfigs = [
|
|
242
244
|
{
|
|
@@ -376,7 +378,7 @@ import { useStyle } from "./style";
|
|
|
376
378
|
var finalSelectedFilter = selectedFilter || internalSelectedCategory;
|
|
377
379
|
var finalOnFilterChange = onFilterChange || handleInternalCategoryChange;
|
|
378
380
|
// 使用组件级别的 theme prop,而不是从 configs 中获取
|
|
379
|
-
var chartFilterTheme =
|
|
381
|
+
var chartFilterTheme = resolvedTheme;
|
|
380
382
|
var dimensions = useResponsiveDimensions(isMobile, windowWidth, width, height);
|
|
381
383
|
var renderConfigs = singleMode && !configs ? Array.from({
|
|
382
384
|
length: filteredData.length
|
|
@@ -394,13 +396,13 @@ import { useStyle } from "./style";
|
|
|
394
396
|
baseClassName: baseClassName,
|
|
395
397
|
className: classNames(classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp.root, className),
|
|
396
398
|
variant: props.variant,
|
|
397
|
-
theme:
|
|
399
|
+
theme: resolvedTheme,
|
|
398
400
|
isMobile: isMobile,
|
|
399
401
|
style: _object_spread(_define_property({}, '--donut-item-min-width', "".concat(dimensions.width, "px")), props.style, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root)
|
|
400
402
|
}, showToolbar && /*#__PURE__*/ React.createElement(ChartContainer, {
|
|
401
403
|
baseClassName: "".concat(baseClassName, "-toolbar-wrapper"),
|
|
402
404
|
variant: "borderless",
|
|
403
|
-
theme:
|
|
405
|
+
theme: resolvedTheme,
|
|
404
406
|
isMobile: isMobile
|
|
405
407
|
}, title && /*#__PURE__*/ React.createElement(ChartToolBar, {
|
|
406
408
|
title: title,
|
|
@@ -455,7 +457,7 @@ import { useStyle } from "./style";
|
|
|
455
457
|
}))), /*#__PURE__*/ React.createElement(ChartContainer, {
|
|
456
458
|
baseClassName: "".concat(baseClassName, "-content"),
|
|
457
459
|
variant: "borderless",
|
|
458
|
-
theme:
|
|
460
|
+
theme: resolvedTheme,
|
|
459
461
|
isMobile: isMobile
|
|
460
462
|
}, renderConfigs.map(function(cfg, idx) {
|
|
461
463
|
var _ref;
|
|
@@ -699,12 +701,12 @@ import { useStyle } from "./style";
|
|
|
699
701
|
key: idx,
|
|
700
702
|
baseClassName: "".concat(baseClassName, "-chart-wrapper"),
|
|
701
703
|
variant: "borderless",
|
|
702
|
-
theme:
|
|
704
|
+
theme: resolvedTheme,
|
|
703
705
|
isMobile: isMobile
|
|
704
706
|
}, isSingleValueMode ? /*#__PURE__*/ React.createElement(ChartContainer, {
|
|
705
707
|
baseClassName: "".concat(baseClassName, "-single"),
|
|
706
708
|
variant: "borderless",
|
|
707
|
-
theme:
|
|
709
|
+
theme: resolvedTheme,
|
|
708
710
|
isMobile: isMobile,
|
|
709
711
|
style: _object_spread((_obj = {}, _define_property(_obj, '--donut-chart-height', "".concat(dimensions.height, "px")), _define_property(_obj, '--donut-chart-width', "".concat(dimensions.width, "px")), _define_property(_obj, "width", dimensions.width), _define_property(_obj, "height", dimensions.height), _define_property(_obj, "marginTop", '20px'), _obj), isMobile ? {
|
|
710
712
|
margin: '0 auto'
|
|
@@ -723,7 +725,7 @@ import { useStyle } from "./style";
|
|
|
723
725
|
})) : /*#__PURE__*/ React.createElement(ChartContainer, {
|
|
724
726
|
baseClassName: "".concat(baseClassName, "-row"),
|
|
725
727
|
variant: "borderless",
|
|
726
|
-
theme:
|
|
728
|
+
theme: resolvedTheme,
|
|
727
729
|
isMobile: isMobile,
|
|
728
730
|
style: _object_spread({}, isMobile ? {
|
|
729
731
|
flexDirection: 'column',
|
|
@@ -732,7 +734,7 @@ import { useStyle } from "./style";
|
|
|
732
734
|
}, /*#__PURE__*/ React.createElement(ChartContainer, {
|
|
733
735
|
baseClassName: "".concat(baseClassName, "-chart"),
|
|
734
736
|
variant: "borderless",
|
|
735
|
-
theme:
|
|
737
|
+
theme: resolvedTheme,
|
|
736
738
|
isMobile: isMobile,
|
|
737
739
|
style: (_obj1 = {}, _define_property(_obj1, '--donut-chart-width', "".concat(dimensions.chartWidth, "px")), _define_property(_obj1, '--donut-chart-height', "".concat(dimensions.chartHeight, "px")), _define_property(_obj1, "width", dimensions.chartWidth), _define_property(_obj1, "height", dimensions.chartHeight), _define_property(_obj1, "marginTop", '20px'), _obj1)
|
|
738
740
|
}, /*#__PURE__*/ React.createElement(Doughnut, {
|
|
@@ -759,7 +761,7 @@ import { useStyle } from "./style";
|
|
|
759
761
|
baseClassName: baseClassName,
|
|
760
762
|
hashId: hashId,
|
|
761
763
|
isMobile: isMobile,
|
|
762
|
-
theme:
|
|
764
|
+
theme: resolvedTheme
|
|
763
765
|
})));
|
|
764
766
|
})));
|
|
765
767
|
};
|
|
@@ -152,12 +152,12 @@ import { Bar } from "react-chartjs-2";
|
|
|
152
152
|
import ChartStatistic from "../ChartStatistic";
|
|
153
153
|
import { ChartContainer, ChartFilter, ChartToolBar, downloadChart } from "../components";
|
|
154
154
|
import { defaultColorList } from "../const";
|
|
155
|
-
import { useChartTheme } from "../hooks";
|
|
155
|
+
import { useChartTheme, useDetectTheme } from "../hooks";
|
|
156
156
|
import { findDataPointByXValue, isXValueEqual, resolveCssVariable, toNumber } from "../utils";
|
|
157
157
|
import { useStyle } from "./style";
|
|
158
158
|
var funnelChartComponentsRegistered = false;
|
|
159
159
|
var FunnelChart = function FunnelChart(_0) {
|
|
160
|
-
var title = _0.title, data = _0.data, color = _0.color, _0_width = _0.width, width = _0_width === void 0 ? 600 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 400 : _0_height, className = _0.className, classNamesProp = _0.classNames, dataTime = _0.dataTime,
|
|
160
|
+
var title = _0.title, data = _0.data, color = _0.color, _0_width = _0.width, width = _0_width === void 0 ? 600 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 400 : _0_height, className = _0.className, classNamesProp = _0.classNames, dataTime = _0.dataTime, theme = _0.theme, _0_showLegend = _0.showLegend, showLegend = _0_showLegend === void 0 ? true : _0_showLegend, _0_legendPosition = _0.legendPosition, legendPosition = _0_legendPosition === void 0 ? 'bottom' : _0_legendPosition, _0_legendAlign = _0.legendAlign, legendAlign = _0_legendAlign === void 0 ? 'start' : _0_legendAlign, _0_showPercent = _0.showPercent, showPercent = _0_showPercent === void 0 ? true : _0_showPercent, toolbarExtra = _0.toolbarExtra, _0_renderFilterInToolbar = _0.renderFilterInToolbar, renderFilterInToolbar = _0_renderFilterInToolbar === void 0 ? false : _0_renderFilterInToolbar, _0_bottomLayerMinWidth = _0.bottomLayerMinWidth, bottomLayerMinWidth = _0_bottomLayerMinWidth === void 0 ? 0 : _0_bottomLayerMinWidth, typeNames = _0.typeNames, statisticConfig = _0.statistic, _0_loading = _0.loading, loading = _0_loading === void 0 ? false : _0_loading, props = _object_without_properties(_0, [
|
|
161
161
|
"title",
|
|
162
162
|
"data",
|
|
163
163
|
"color",
|
|
@@ -510,7 +510,9 @@ var FunnelChart = function FunnelChart(_0) {
|
|
|
510
510
|
filterLabels
|
|
511
511
|
]);
|
|
512
512
|
// 使用 useChartTheme hook 获取主题相关颜色
|
|
513
|
-
var
|
|
513
|
+
var detectedTheme = useDetectTheme();
|
|
514
|
+
var resolvedTheme = theme !== null && theme !== void 0 ? theme : detectedTheme;
|
|
515
|
+
var _useChartTheme = useChartTheme(resolvedTheme), axisTextColor = _useChartTheme.axisTextColor, isLight = _useChartTheme.isLight;
|
|
514
516
|
var options = {
|
|
515
517
|
responsive: true,
|
|
516
518
|
maintainAspectRatio: false,
|
|
@@ -835,13 +837,13 @@ var FunnelChart = function FunnelChart(_0) {
|
|
|
835
837
|
return wrapSSR(/*#__PURE__*/ React.createElement(ChartContainer, {
|
|
836
838
|
baseClassName: baseClassName,
|
|
837
839
|
className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.root, className, containerClassName),
|
|
838
|
-
theme:
|
|
840
|
+
theme: resolvedTheme,
|
|
839
841
|
isMobile: isMobile,
|
|
840
842
|
variant: props.variant,
|
|
841
843
|
style: _object_spread({}, containerStyle, props.style, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root)
|
|
842
844
|
}, /*#__PURE__*/ React.createElement(ChartToolBar, {
|
|
843
845
|
title: title,
|
|
844
|
-
theme:
|
|
846
|
+
theme: resolvedTheme,
|
|
845
847
|
onDownload: handleDownload,
|
|
846
848
|
dataTime: dataTime,
|
|
847
849
|
extra: toolbarExtra,
|
|
@@ -857,7 +859,7 @@ var FunnelChart = function FunnelChart(_0) {
|
|
|
857
859
|
selectedCustomSelection: selectedFilterLabel,
|
|
858
860
|
onSelectionChange: setSelectedFilterLabel
|
|
859
861
|
}), {
|
|
860
|
-
theme:
|
|
862
|
+
theme: resolvedTheme,
|
|
861
863
|
variant: "compact"
|
|
862
864
|
})) : undefined
|
|
863
865
|
}), !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /*#__PURE__*/ React.createElement(ChartFilter, _object_spread_props(_object_spread({
|
|
@@ -869,7 +871,7 @@ var FunnelChart = function FunnelChart(_0) {
|
|
|
869
871
|
selectedCustomSelection: selectedFilterLabel,
|
|
870
872
|
onSelectionChange: setSelectedFilterLabel
|
|
871
873
|
}), {
|
|
872
|
-
theme:
|
|
874
|
+
theme: resolvedTheme
|
|
873
875
|
})), statistics && /*#__PURE__*/ React.createElement("div", {
|
|
874
876
|
className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.statisticContainer, "".concat(baseClassName, "-statistic-container")),
|
|
875
877
|
style: (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.statisticContainer
|
|
@@ -877,7 +879,7 @@ var FunnelChart = function FunnelChart(_0) {
|
|
|
877
879
|
return /*#__PURE__*/ React.createElement(ChartStatistic, _object_spread_props(_object_spread({
|
|
878
880
|
key: index
|
|
879
881
|
}, config), {
|
|
880
|
-
theme:
|
|
882
|
+
theme: resolvedTheme
|
|
881
883
|
}));
|
|
882
884
|
})), /*#__PURE__*/ React.createElement("div", {
|
|
883
885
|
className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.wrapper, "".concat(baseClassName, "-wrapper")),
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ChartContainerProps } from '../components';
|
|
3
|
-
import { StatisticConfigType } from '../hooks
|
|
3
|
+
import { StatisticConfigType } from '../hooks';
|
|
4
4
|
import type { ChartClassNames, ChartStyles } from '../types/classNames';
|
|
5
5
|
/**
|
|
6
6
|
* 直方图数据项接口
|
|
@@ -152,6 +152,7 @@ import { Bar } from "react-chartjs-2";
|
|
|
152
152
|
import ChartStatistic from "../ChartStatistic";
|
|
153
153
|
import { ChartContainer, ChartFilter, ChartToolBar, downloadChart } from "../components";
|
|
154
154
|
import { defaultColorList } from "../const";
|
|
155
|
+
import { useDetectTheme } from "../hooks";
|
|
155
156
|
import { hexToRgba, resolveCssVariable } from "../utils";
|
|
156
157
|
import { useStyle } from "./style";
|
|
157
158
|
var histogramChartComponentsRegistered = false;
|
|
@@ -216,7 +217,7 @@ var histogramChartComponentsRegistered = false;
|
|
|
216
217
|
return "".concat(formatNum(start), " - ").concat(formatNum(end));
|
|
217
218
|
}
|
|
218
219
|
var HistogramChart = function HistogramChart(_0) {
|
|
219
|
-
var title = _0.title, data = _0.data, _0_width = _0.width, width = _0_width === void 0 ? 600 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 400 : _0_height, className = _0.className, classNamesProp = _0.classNames, style = _0.style, styles = _0.styles, dataTime = _0.dataTime,
|
|
220
|
+
var title = _0.title, data = _0.data, _0_width = _0.width, width = _0_width === void 0 ? 600 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 400 : _0_height, className = _0.className, classNamesProp = _0.classNames, style = _0.style, styles = _0.styles, dataTime = _0.dataTime, theme = _0.theme, color = _0.color, _0_showLegend = _0.showLegend, showLegend = _0_showLegend === void 0 ? true : _0_showLegend, _0_legendPosition = _0.legendPosition, legendPosition = _0_legendPosition === void 0 ? 'bottom' : _0_legendPosition, _0_showGrid = _0.showGrid, showGrid = _0_showGrid === void 0 ? true : _0_showGrid, xAxisLabel = _0.xAxisLabel, yAxisLabel = _0.yAxisLabel, _0_stacked = _0.stacked, stacked = _0_stacked === void 0 ? true : _0_stacked, customBinCount = _0.binCount, _0_showFrequency = _0.showFrequency, showFrequency = _0_showFrequency === void 0 ? false : _0_showFrequency, toolbarExtra = _0.toolbarExtra, _0_renderFilterInToolbar = _0.renderFilterInToolbar, renderFilterInToolbar = _0_renderFilterInToolbar === void 0 ? false : _0_renderFilterInToolbar, statisticConfig = _0.statistic, _0_loading = _0.loading, loading = _0_loading === void 0 ? false : _0_loading, props = _object_without_properties(_0, [
|
|
220
221
|
"title",
|
|
221
222
|
"data",
|
|
222
223
|
"width",
|
|
@@ -523,7 +524,9 @@ var HistogramChart = function HistogramChart(_0) {
|
|
|
523
524
|
color,
|
|
524
525
|
stacked
|
|
525
526
|
]);
|
|
526
|
-
var
|
|
527
|
+
var detectedTheme = useDetectTheme();
|
|
528
|
+
var resolvedTheme = theme !== null && theme !== void 0 ? theme : detectedTheme;
|
|
529
|
+
var isLight = resolvedTheme === 'light';
|
|
527
530
|
var axisTextColor = isLight ? 'rgba(0, 25, 61, 0.3255)' : 'rgba(255, 255, 255, 0.8)';
|
|
528
531
|
var gridColor = isLight ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.2)';
|
|
529
532
|
// 图表配置选项
|
|
@@ -644,7 +647,7 @@ var HistogramChart = function HistogramChart(_0) {
|
|
|
644
647
|
if (safeData.length === 0 || filteredData.length === 0) {
|
|
645
648
|
return wrapSSR(/*#__PURE__*/ React.createElement(ChartContainer, {
|
|
646
649
|
baseClassName: classNames("".concat(prefixCls, "-container"), hashId),
|
|
647
|
-
theme:
|
|
650
|
+
theme: resolvedTheme,
|
|
648
651
|
className: classNames(classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp.root, className),
|
|
649
652
|
isMobile: isMobile,
|
|
650
653
|
variant: props.variant,
|
|
@@ -672,7 +675,7 @@ var HistogramChart = function HistogramChart(_0) {
|
|
|
672
675
|
}
|
|
673
676
|
return wrapSSR(/*#__PURE__*/ React.createElement(ChartContainer, {
|
|
674
677
|
baseClassName: classNames("".concat(prefixCls, "-container"), hashId),
|
|
675
|
-
theme:
|
|
678
|
+
theme: resolvedTheme,
|
|
676
679
|
className: classNames(classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp.root, className),
|
|
677
680
|
isMobile: isMobile,
|
|
678
681
|
variant: props.variant,
|
|
@@ -682,7 +685,7 @@ var HistogramChart = function HistogramChart(_0) {
|
|
|
682
685
|
}, style, styles === null || styles === void 0 ? void 0 : styles.root)
|
|
683
686
|
}, /*#__PURE__*/ React.createElement(ChartToolBar, {
|
|
684
687
|
title: title || '直方图',
|
|
685
|
-
theme:
|
|
688
|
+
theme: resolvedTheme,
|
|
686
689
|
onDownload: handleDownload,
|
|
687
690
|
extra: toolbarExtra,
|
|
688
691
|
dataTime: dataTime,
|
|
@@ -696,7 +699,7 @@ var HistogramChart = function HistogramChart(_0) {
|
|
|
696
699
|
selectedCustomSelection: selectedFilterLabel,
|
|
697
700
|
onSelectionChange: setSelectedFilterLabel
|
|
698
701
|
}), {
|
|
699
|
-
theme:
|
|
702
|
+
theme: resolvedTheme,
|
|
700
703
|
variant: "compact"
|
|
701
704
|
})) : undefined
|
|
702
705
|
}), statistics && /*#__PURE__*/ React.createElement("div", {
|
|
@@ -706,7 +709,7 @@ var HistogramChart = function HistogramChart(_0) {
|
|
|
706
709
|
return /*#__PURE__*/ React.createElement(ChartStatistic, _object_spread_props(_object_spread({
|
|
707
710
|
key: index
|
|
708
711
|
}, config), {
|
|
709
|
-
theme:
|
|
712
|
+
theme: resolvedTheme
|
|
710
713
|
}));
|
|
711
714
|
})), !renderFilterInToolbar && filterOptions.length > 1 && /*#__PURE__*/ React.createElement(ChartFilter, _object_spread_props(_object_spread({
|
|
712
715
|
filterOptions: filterOptions,
|
|
@@ -717,7 +720,7 @@ var HistogramChart = function HistogramChart(_0) {
|
|
|
717
720
|
selectedCustomSelection: selectedFilterLabel,
|
|
718
721
|
onSelectionChange: setSelectedFilterLabel
|
|
719
722
|
}), {
|
|
720
|
-
theme:
|
|
723
|
+
theme: resolvedTheme
|
|
721
724
|
})), /*#__PURE__*/ React.createElement("div", {
|
|
722
725
|
className: classNames(classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp.wrapper, "".concat(prefixCls, "-wrapper")),
|
|
723
726
|
style: _object_spread({
|
|
@@ -117,11 +117,11 @@ import React, { useContext, useLayoutEffect, useMemo, useRef } from "react";
|
|
|
117
117
|
import { Line } from "react-chartjs-2";
|
|
118
118
|
import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
|
|
119
119
|
import { defaultColorList } from "../const";
|
|
120
|
-
import { useChartDataFilter, useChartStatistics, useChartTheme, useResponsiveSize } from "../hooks";
|
|
120
|
+
import { useChartDataFilter, useChartStatistics, useChartTheme, useDetectTheme, useResponsiveSize } from "../hooks";
|
|
121
121
|
import { extractAndSortXValues, findDataPointByXValue, hexToRgba, registerLineChartComponents, resolveCssVariable } from "../utils";
|
|
122
122
|
import { useStyle } from "./style";
|
|
123
123
|
var LineChart = function LineChart(_0) {
|
|
124
|
-
var title = _0.title, data = _0.data, _0_width = _0.width, width = _0_width === void 0 ? 600 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 400 : _0_height, className = _0.className, classNamesProp = _0.classNames, dataTime = _0.dataTime,
|
|
124
|
+
var title = _0.title, data = _0.data, _0_width = _0.width, width = _0_width === void 0 ? 600 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 400 : _0_height, className = _0.className, classNamesProp = _0.classNames, dataTime = _0.dataTime, theme = _0.theme, color = _0.color, _0_showLegend = _0.showLegend, showLegend = _0_showLegend === void 0 ? true : _0_showLegend, _0_legendPosition = _0.legendPosition, legendPosition = _0_legendPosition === void 0 ? 'bottom' : _0_legendPosition, _0_legendAlign = _0.legendAlign, legendAlign = _0_legendAlign === void 0 ? 'start' : _0_legendAlign, _0_showGrid = _0.showGrid, showGrid = _0_showGrid === void 0 ? true : _0_showGrid, _0_xPosition = _0.xPosition, xPosition = _0_xPosition === void 0 ? 'bottom' : _0_xPosition, _0_yPosition = _0.yPosition, yPosition = _0_yPosition === void 0 ? 'left' : _0_yPosition, _0_hiddenX = _0.hiddenX, hiddenX = _0_hiddenX === void 0 ? false : _0_hiddenX, _0_hiddenY = _0.hiddenY, hiddenY = _0_hiddenY === void 0 ? false : _0_hiddenY, toolbarExtra = _0.toolbarExtra, _0_renderFilterInToolbar = _0.renderFilterInToolbar, renderFilterInToolbar = _0_renderFilterInToolbar === void 0 ? false : _0_renderFilterInToolbar, statisticConfig = _0.statistic, _0_loading = _0.loading, loading = _0_loading === void 0 ? false : _0_loading, props = _object_without_properties(_0, [
|
|
125
125
|
"title",
|
|
126
126
|
"data",
|
|
127
127
|
"width",
|
|
@@ -161,7 +161,9 @@ var LineChart = function LineChart(_0) {
|
|
|
161
161
|
// 数据筛选
|
|
162
162
|
var _useChartDataFilter = useChartDataFilter(data), filteredData = _useChartDataFilter.filteredData, filterOptions = _useChartDataFilter.filterOptions, filterLabels = _useChartDataFilter.filterLabels, selectedFilter = _useChartDataFilter.selectedFilter, setSelectedFilter = _useChartDataFilter.setSelectedFilter, selectedFilterLabel = _useChartDataFilter.selectedFilterLabel, setSelectedFilterLabel = _useChartDataFilter.setSelectedFilterLabel, filteredDataByFilterLabel = _useChartDataFilter.filteredDataByFilterLabel;
|
|
163
163
|
// 主题颜色
|
|
164
|
-
var
|
|
164
|
+
var detectedTheme = useDetectTheme();
|
|
165
|
+
var resolvedTheme = theme !== null && theme !== void 0 ? theme : detectedTheme;
|
|
166
|
+
var _useChartTheme = useChartTheme(resolvedTheme), axisTextColor = _useChartTheme.axisTextColor, gridColor = _useChartTheme.gridColor, isLight = _useChartTheme.isLight;
|
|
165
167
|
// 从数据中提取唯一的类型
|
|
166
168
|
var types = useMemo(function() {
|
|
167
169
|
return _to_consumable_array(new Set(filteredData.map(function(item) {
|
|
@@ -368,13 +370,13 @@ var LineChart = function LineChart(_0) {
|
|
|
368
370
|
return wrapSSR(/*#__PURE__*/ React.createElement(ChartContainer, {
|
|
369
371
|
baseClassName: baseClassName,
|
|
370
372
|
className: rootClassName,
|
|
371
|
-
theme:
|
|
373
|
+
theme: resolvedTheme,
|
|
372
374
|
isMobile: isMobile,
|
|
373
375
|
variant: props.variant,
|
|
374
376
|
style: rootStyle
|
|
375
377
|
}, /*#__PURE__*/ React.createElement(ChartToolBar, {
|
|
376
378
|
title: title,
|
|
377
|
-
theme:
|
|
379
|
+
theme: resolvedTheme,
|
|
378
380
|
className: toolbarClassName,
|
|
379
381
|
style: toolbarStyle,
|
|
380
382
|
onDownload: handleDownload,
|
|
@@ -390,7 +392,7 @@ var LineChart = function LineChart(_0) {
|
|
|
390
392
|
selectedCustomSelection: selectedFilterLabel,
|
|
391
393
|
onSelectionChange: setSelectedFilterLabel
|
|
392
394
|
}), {
|
|
393
|
-
theme:
|
|
395
|
+
theme: resolvedTheme,
|
|
394
396
|
variant: "compact"
|
|
395
397
|
})) : undefined
|
|
396
398
|
}), statistics && /*#__PURE__*/ React.createElement("div", {
|
|
@@ -399,7 +401,7 @@ var LineChart = function LineChart(_0) {
|
|
|
399
401
|
return /*#__PURE__*/ React.createElement(ChartStatistic, _object_spread_props(_object_spread({
|
|
400
402
|
key: index
|
|
401
403
|
}, config), {
|
|
402
|
-
theme:
|
|
404
|
+
theme: resolvedTheme
|
|
403
405
|
}));
|
|
404
406
|
})), !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /*#__PURE__*/ React.createElement(ChartFilter, _object_spread_props(_object_spread({
|
|
405
407
|
filterOptions: filterOptions,
|
|
@@ -410,7 +412,7 @@ var LineChart = function LineChart(_0) {
|
|
|
410
412
|
selectedCustomSelection: selectedFilterLabel,
|
|
411
413
|
onSelectionChange: setSelectedFilterLabel
|
|
412
414
|
}), {
|
|
413
|
-
theme:
|
|
415
|
+
theme: resolvedTheme
|
|
414
416
|
})), /*#__PURE__*/ React.createElement("div", {
|
|
415
417
|
className: "".concat(baseClassName, "-wrapper"),
|
|
416
418
|
style: {
|
|
@@ -144,12 +144,12 @@ import { Radar } from "react-chartjs-2";
|
|
|
144
144
|
import ChartStatistic from "../ChartStatistic";
|
|
145
145
|
import { ChartContainer, ChartFilter, ChartToolBar, downloadChart } from "../components";
|
|
146
146
|
import { defaultColorList } from "../const";
|
|
147
|
-
import { useChartTheme } from "../hooks";
|
|
147
|
+
import { useChartTheme, useDetectTheme } from "../hooks";
|
|
148
148
|
import { hexToRgba, resolveCssVariable } from "../utils";
|
|
149
149
|
import { useStyle } from "./style";
|
|
150
150
|
var radarChartComponentsRegistered = false;
|
|
151
151
|
var RadarChart = function RadarChart(_0) {
|
|
152
|
-
var data = _0.data, title = _0.title, _0_width = _0.width, width = _0_width === void 0 ? 600 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 400 : _0_height, className = _0.className, classNamesProp = _0.classNames, toolbarExtra = _0.toolbarExtra, _0_renderFilterInToolbar = _0.renderFilterInToolbar, renderFilterInToolbar = _0_renderFilterInToolbar === void 0 ? false : _0_renderFilterInToolbar, dataTime = _0.dataTime,
|
|
152
|
+
var data = _0.data, title = _0.title, _0_width = _0.width, width = _0_width === void 0 ? 600 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 400 : _0_height, className = _0.className, classNamesProp = _0.classNames, toolbarExtra = _0.toolbarExtra, _0_renderFilterInToolbar = _0.renderFilterInToolbar, renderFilterInToolbar = _0_renderFilterInToolbar === void 0 ? false : _0_renderFilterInToolbar, dataTime = _0.dataTime, theme = _0.theme, color = _0.color, statisticConfig = _0.statistic, _0_textMaxWidth = _0.textMaxWidth, textMaxWidth = _0_textMaxWidth === void 0 ? 80 : _0_textMaxWidth, _0_loading = _0.loading, loading = _0_loading === void 0 ? false : _0_loading, props = _object_without_properties(_0, [
|
|
153
153
|
"data",
|
|
154
154
|
"title",
|
|
155
155
|
"width",
|
|
@@ -180,7 +180,9 @@ var RadarChart = function RadarChart(_0) {
|
|
|
180
180
|
var prefixCls = getPrefixCls('radar-chart');
|
|
181
181
|
var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
|
|
182
182
|
// 主题颜色 - 必须在所有条件返回之前调用
|
|
183
|
-
var
|
|
183
|
+
var detectedTheme = useDetectTheme();
|
|
184
|
+
var resolvedTheme = theme !== null && theme !== void 0 ? theme : detectedTheme;
|
|
185
|
+
var _useChartTheme = useChartTheme(resolvedTheme), axisTextColor = _useChartTheme.axisTextColor, gridColor = _useChartTheme.gridColor, isLight = _useChartTheme.isLight;
|
|
184
186
|
// 处理 ChartStatistic 组件配置
|
|
185
187
|
var statistics = useMemo(function() {
|
|
186
188
|
if (!statisticConfig) return null;
|
|
@@ -273,7 +275,7 @@ var RadarChart = function RadarChart(_0) {
|
|
|
273
275
|
var _props_styles;
|
|
274
276
|
return wrapSSR(/*#__PURE__*/ React.createElement(ChartContainer, {
|
|
275
277
|
baseClassName: classNames("".concat(prefixCls, "-container")),
|
|
276
|
-
theme:
|
|
278
|
+
theme: resolvedTheme,
|
|
277
279
|
className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.root, hashId, className),
|
|
278
280
|
isMobile: isMobile,
|
|
279
281
|
variant: props.variant,
|
|
@@ -283,7 +285,7 @@ var RadarChart = function RadarChart(_0) {
|
|
|
283
285
|
}, props.style, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root)
|
|
284
286
|
}, /*#__PURE__*/ React.createElement(ChartToolBar, {
|
|
285
287
|
title: title || '雷达图',
|
|
286
|
-
theme:
|
|
288
|
+
theme: resolvedTheme,
|
|
287
289
|
onDownload: function onDownload() {},
|
|
288
290
|
extra: toolbarExtra,
|
|
289
291
|
dataTime: dataTime,
|
|
@@ -559,7 +561,7 @@ var RadarChart = function RadarChart(_0) {
|
|
|
559
561
|
var _props_styles1;
|
|
560
562
|
return wrapSSR(/*#__PURE__*/ React.createElement(ChartContainer, {
|
|
561
563
|
baseClassName: classNames("".concat(prefixCls, "-container")),
|
|
562
|
-
theme:
|
|
564
|
+
theme: resolvedTheme,
|
|
563
565
|
className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.root, hashId, className),
|
|
564
566
|
isMobile: isMobile,
|
|
565
567
|
variant: props.variant,
|
|
@@ -569,7 +571,7 @@ var RadarChart = function RadarChart(_0) {
|
|
|
569
571
|
}, props.style, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.root)
|
|
570
572
|
}, /*#__PURE__*/ React.createElement(ChartToolBar, {
|
|
571
573
|
title: title || '雷达图',
|
|
572
|
-
theme:
|
|
574
|
+
theme: resolvedTheme,
|
|
573
575
|
onDownload: handleDownload,
|
|
574
576
|
extra: toolbarExtra,
|
|
575
577
|
dataTime: dataTime,
|
|
@@ -583,7 +585,7 @@ var RadarChart = function RadarChart(_0) {
|
|
|
583
585
|
selectedCustomSelection: selectedFilterLabel,
|
|
584
586
|
onSelectionChange: setSelectedFilterLabel
|
|
585
587
|
}), {
|
|
586
|
-
theme:
|
|
588
|
+
theme: resolvedTheme,
|
|
587
589
|
variant: "compact"
|
|
588
590
|
})) : undefined
|
|
589
591
|
}), !renderFilterInToolbar && filterEnum.length > 0 && /*#__PURE__*/ React.createElement(ChartFilter, _object_spread_props(_object_spread({
|
|
@@ -595,14 +597,14 @@ var RadarChart = function RadarChart(_0) {
|
|
|
595
597
|
selectedCustomSelection: selectedFilterLabel,
|
|
596
598
|
onSelectionChange: setSelectedFilterLabel
|
|
597
599
|
}), {
|
|
598
|
-
theme:
|
|
600
|
+
theme: resolvedTheme
|
|
599
601
|
})), statistics && /*#__PURE__*/ React.createElement("div", {
|
|
600
602
|
className: classNames("".concat(prefixCls, "-statistic-container"), hashId)
|
|
601
603
|
}, statistics.map(function(config, index) {
|
|
602
604
|
return /*#__PURE__*/ React.createElement(ChartStatistic, _object_spread_props(_object_spread({
|
|
603
605
|
key: index
|
|
604
606
|
}, config), {
|
|
605
|
-
theme:
|
|
607
|
+
theme: resolvedTheme
|
|
606
608
|
}));
|
|
607
609
|
})), /*#__PURE__*/ React.createElement("div", {
|
|
608
610
|
className: classNames("".concat(prefixCls, "-chart-wrapper"), hashId)
|
|
@@ -616,7 +618,7 @@ var RadarChart = function RadarChart(_0) {
|
|
|
616
618
|
console.error('RadarChart 渲染错误:', error);
|
|
617
619
|
return wrapSSR(/*#__PURE__*/ React.createElement(ChartContainer, {
|
|
618
620
|
baseClassName: classNames("".concat(prefixCls, "-container")),
|
|
619
|
-
theme:
|
|
621
|
+
theme: resolvedTheme,
|
|
620
622
|
className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.root, hashId, className),
|
|
621
623
|
isMobile: isMobile,
|
|
622
624
|
variant: props.variant,
|
|
@@ -626,7 +628,7 @@ var RadarChart = function RadarChart(_0) {
|
|
|
626
628
|
}, props.style, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.root)
|
|
627
629
|
}, /*#__PURE__*/ React.createElement(ChartToolBar, {
|
|
628
630
|
title: title || '雷达图',
|
|
629
|
-
theme:
|
|
631
|
+
theme: resolvedTheme,
|
|
630
632
|
onDownload: function onDownload() {},
|
|
631
633
|
extra: toolbarExtra,
|
|
632
634
|
dataTime: dataTime,
|
|
@@ -156,12 +156,12 @@ import { Scatter } from "react-chartjs-2";
|
|
|
156
156
|
import ChartStatistic from "../ChartStatistic";
|
|
157
157
|
import { ChartContainer, ChartFilter, ChartToolBar, downloadChart } from "../components";
|
|
158
158
|
import { defaultColorList } from "../const";
|
|
159
|
-
import { useChartTheme } from "../hooks";
|
|
159
|
+
import { useChartTheme, useDetectTheme } from "../hooks";
|
|
160
160
|
import { hexToRgba, resolveCssVariable } from "../utils";
|
|
161
161
|
import { useStyle } from "./style";
|
|
162
162
|
var scatterChartComponentsRegistered = false;
|
|
163
163
|
var ScatterChart = function ScatterChart(_0) {
|
|
164
|
-
var data = _0.data, _0_width = _0.width, width = _0_width === void 0 ? 600 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 400 : _0_height, className = _0.className, classNamesProp = _0.classNames, title = _0.title, toolbarExtra = _0.toolbarExtra, _0_renderFilterInToolbar = _0.renderFilterInToolbar, renderFilterInToolbar = _0_renderFilterInToolbar === void 0 ? false : _0_renderFilterInToolbar, dataTime = _0.dataTime, _0_xUnit = _0.xUnit, xUnit = _0_xUnit === void 0 ? '月' : _0_xUnit, yUnit = _0.yUnit, xAxisLabel = _0.xAxisLabel, yAxisLabel = _0.yAxisLabel, _0_xPosition = _0.xPosition, xPosition = _0_xPosition === void 0 ? 'bottom' : _0_xPosition, _0_yPosition = _0.yPosition, yPosition = _0_yPosition === void 0 ? 'left' : _0_yPosition, _0_hiddenX = _0.hiddenX, hiddenX = _0_hiddenX === void 0 ? false : _0_hiddenX, _0_hiddenY = _0.hiddenY, hiddenY = _0_hiddenY === void 0 ? false : _0_hiddenY, _0_showGrid = _0.showGrid, showGrid = _0_showGrid === void 0 ? true : _0_showGrid,
|
|
164
|
+
var data = _0.data, _0_width = _0.width, width = _0_width === void 0 ? 600 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 400 : _0_height, className = _0.className, classNamesProp = _0.classNames, title = _0.title, toolbarExtra = _0.toolbarExtra, _0_renderFilterInToolbar = _0.renderFilterInToolbar, renderFilterInToolbar = _0_renderFilterInToolbar === void 0 ? false : _0_renderFilterInToolbar, dataTime = _0.dataTime, _0_xUnit = _0.xUnit, xUnit = _0_xUnit === void 0 ? '月' : _0_xUnit, yUnit = _0.yUnit, xAxisLabel = _0.xAxisLabel, yAxisLabel = _0.yAxisLabel, _0_xPosition = _0.xPosition, xPosition = _0_xPosition === void 0 ? 'bottom' : _0_xPosition, _0_yPosition = _0.yPosition, yPosition = _0_yPosition === void 0 ? 'left' : _0_yPosition, _0_hiddenX = _0.hiddenX, hiddenX = _0_hiddenX === void 0 ? false : _0_hiddenX, _0_hiddenY = _0.hiddenY, hiddenY = _0_hiddenY === void 0 ? false : _0_hiddenY, _0_showGrid = _0.showGrid, showGrid = _0_showGrid === void 0 ? true : _0_showGrid, theme = _0.theme, color = _0.color, statisticConfig = _0.statistic, _0_textMaxWidth = _0.textMaxWidth, textMaxWidth = _0_textMaxWidth === void 0 ? 80 : _0_textMaxWidth, _0_loading = _0.loading, loading = _0_loading === void 0 ? false : _0_loading, xMinProp = _0.xMin, xMaxProp = _0.xMax, yMinProp = _0.yMin, yMaxProp = _0.yMax, props = _object_without_properties(_0, [
|
|
165
165
|
"data",
|
|
166
166
|
"width",
|
|
167
167
|
"height",
|
|
@@ -205,7 +205,9 @@ var ScatterChart = function ScatterChart(_0) {
|
|
|
205
205
|
var prefixCls = getPrefixCls('scatter-chart');
|
|
206
206
|
var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
|
|
207
207
|
// 主题颜色 - 必须在所有条件返回之前调用
|
|
208
|
-
var
|
|
208
|
+
var detectedTheme = useDetectTheme();
|
|
209
|
+
var resolvedTheme = theme !== null && theme !== void 0 ? theme : detectedTheme;
|
|
210
|
+
var _useChartTheme = useChartTheme(resolvedTheme), axisTextColor = _useChartTheme.axisTextColor, gridColor = _useChartTheme.gridColor, isLight = _useChartTheme.isLight;
|
|
209
211
|
// 处理 ChartStatistic 组件配置
|
|
210
212
|
var statistics = useMemo(function() {
|
|
211
213
|
if (!statisticConfig) return null;
|
|
@@ -293,7 +295,7 @@ var ScatterChart = function ScatterChart(_0) {
|
|
|
293
295
|
var _props_styles;
|
|
294
296
|
return wrapSSR(/*#__PURE__*/ React.createElement(ChartContainer, {
|
|
295
297
|
baseClassName: classNames("".concat(prefixCls, "-container")),
|
|
296
|
-
theme:
|
|
298
|
+
theme: resolvedTheme,
|
|
297
299
|
className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.root, hashId, className),
|
|
298
300
|
isMobile: isMobile,
|
|
299
301
|
variant: props.variant,
|
|
@@ -303,7 +305,7 @@ var ScatterChart = function ScatterChart(_0) {
|
|
|
303
305
|
}, props.style, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root)
|
|
304
306
|
}, /*#__PURE__*/ React.createElement(ChartToolBar, {
|
|
305
307
|
title: title || '散点图',
|
|
306
|
-
theme:
|
|
308
|
+
theme: resolvedTheme,
|
|
307
309
|
onDownload: function onDownload() {},
|
|
308
310
|
extra: toolbarExtra,
|
|
309
311
|
dataTime: dataTime,
|
|
@@ -693,7 +695,7 @@ var ScatterChart = function ScatterChart(_0) {
|
|
|
693
695
|
var _props_styles1, _props_styles2, _props_styles3;
|
|
694
696
|
return wrapSSR(/*#__PURE__*/ React.createElement(ChartContainer, {
|
|
695
697
|
baseClassName: classNames("".concat(prefixCls, "-container")),
|
|
696
|
-
theme:
|
|
698
|
+
theme: resolvedTheme,
|
|
697
699
|
className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.root, hashId, className),
|
|
698
700
|
isMobile: isMobile,
|
|
699
701
|
variant: props.variant,
|
|
@@ -703,7 +705,7 @@ var ScatterChart = function ScatterChart(_0) {
|
|
|
703
705
|
}, props.style, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.root)
|
|
704
706
|
}, /*#__PURE__*/ React.createElement(ChartToolBar, {
|
|
705
707
|
title: title || '散点图',
|
|
706
|
-
theme:
|
|
708
|
+
theme: resolvedTheme,
|
|
707
709
|
onDownload: handleDownload,
|
|
708
710
|
extra: toolbarExtra,
|
|
709
711
|
dataTime: dataTime,
|
|
@@ -717,7 +719,7 @@ var ScatterChart = function ScatterChart(_0) {
|
|
|
717
719
|
selectedCustomSelection: selectedFilterLabel,
|
|
718
720
|
onSelectionChange: setSelectedFilterLabel
|
|
719
721
|
}), {
|
|
720
|
-
theme:
|
|
722
|
+
theme: resolvedTheme,
|
|
721
723
|
variant: "compact"
|
|
722
724
|
})) : undefined
|
|
723
725
|
}), !renderFilterInToolbar && filterEnum.length > 0 && /*#__PURE__*/ React.createElement(ChartFilter, _object_spread_props(_object_spread({
|
|
@@ -729,7 +731,7 @@ var ScatterChart = function ScatterChart(_0) {
|
|
|
729
731
|
selectedCustomSelection: selectedFilterLabel,
|
|
730
732
|
onSelectionChange: setSelectedFilterLabel
|
|
731
733
|
}), {
|
|
732
|
-
theme:
|
|
734
|
+
theme: resolvedTheme
|
|
733
735
|
})), statistics && /*#__PURE__*/ React.createElement("div", {
|
|
734
736
|
className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.statisticContainer, "".concat(prefixCls, "-statistic-container")),
|
|
735
737
|
style: (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.statisticContainer
|
|
@@ -737,7 +739,7 @@ var ScatterChart = function ScatterChart(_0) {
|
|
|
737
739
|
return /*#__PURE__*/ React.createElement(ChartStatistic, _object_spread_props(_object_spread({
|
|
738
740
|
key: index
|
|
739
741
|
}, config), {
|
|
740
|
-
theme:
|
|
742
|
+
theme: resolvedTheme
|
|
741
743
|
}));
|
|
742
744
|
})), /*#__PURE__*/ React.createElement("div", {
|
|
743
745
|
className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.wrapper, "".concat(prefixCls, "-chart-wrapper")),
|
|
@@ -754,7 +756,7 @@ var ScatterChart = function ScatterChart(_0) {
|
|
|
754
756
|
console.error('ScatterChart 渲染错误:', error);
|
|
755
757
|
return wrapSSR(/*#__PURE__*/ React.createElement(ChartContainer, {
|
|
756
758
|
baseClassName: classNames("".concat(prefixCls, "-container")),
|
|
757
|
-
theme:
|
|
759
|
+
theme: resolvedTheme,
|
|
758
760
|
isMobile: isMobile,
|
|
759
761
|
className: classNames(hashId, className),
|
|
760
762
|
variant: props.variant,
|
|
@@ -764,7 +766,7 @@ var ScatterChart = function ScatterChart(_0) {
|
|
|
764
766
|
}, props.style, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.root)
|
|
765
767
|
}, /*#__PURE__*/ React.createElement(ChartToolBar, {
|
|
766
768
|
title: title || '散点图',
|
|
767
|
-
theme:
|
|
769
|
+
theme: resolvedTheme,
|
|
768
770
|
onDownload: function onDownload() {},
|
|
769
771
|
extra: toolbarExtra,
|
|
770
772
|
dataTime: dataTime,
|
|
@@ -7,6 +7,8 @@ export interface ChartContainerProps {
|
|
|
7
7
|
style?: React.CSSProperties;
|
|
8
8
|
/** 图表主题 */
|
|
9
9
|
theme?: 'light' | 'dark';
|
|
10
|
+
/** 是否自动检测主题(检测 html[data-theme='dark'] 和 CSS 变量亮度) */
|
|
11
|
+
autoDetectTheme?: boolean;
|
|
10
12
|
/** 是否为移动端 */
|
|
11
13
|
isMobile?: boolean;
|
|
12
14
|
/** 图表变体 */
|
|
@@ -42,7 +44,7 @@ export interface ChartContainerRef {
|
|
|
42
44
|
* @param {string} [props.className] - 自定义CSS类名
|
|
43
45
|
* @param {React.ReactNode} props.children - 子元素
|
|
44
46
|
* @param {React.CSSProperties} [props.style] - 样式对象
|
|
45
|
-
* @param {'light' | 'dark'} [props.theme='
|
|
47
|
+
* @param {'light' | 'dark'} [props.theme] - 图表主题,不传时自动检测(检测 html[data-theme='dark'] 或 CSS 变量亮度)
|
|
46
48
|
* @param {boolean} [props.isMobile=false] - 是否为移动端
|
|
47
49
|
* @param {object} [props.errorBoundary] - 错误边界配置
|
|
48
50
|
* @param {boolean} [props.errorBoundary.enabled=true] - 是否启用错误边界
|
|
@@ -52,17 +54,24 @@ export interface ChartContainerRef {
|
|
|
52
54
|
*
|
|
53
55
|
* @example
|
|
54
56
|
* ```tsx
|
|
55
|
-
* //
|
|
57
|
+
* // 基础使用(自动检测主题)
|
|
56
58
|
* <ChartContainer
|
|
57
59
|
* baseClassName="area-chart-container"
|
|
58
60
|
* className="custom-chart"
|
|
59
|
-
* theme="light"
|
|
60
61
|
* isMobile={false}
|
|
61
62
|
* style={{ width: 600, height: 400 }}
|
|
62
63
|
* >
|
|
63
64
|
* <div>图表内容</div>
|
|
64
65
|
* </ChartContainer>
|
|
65
66
|
*
|
|
67
|
+
* // 显式指定主题
|
|
68
|
+
* <ChartContainer
|
|
69
|
+
* baseClassName="area-chart-container"
|
|
70
|
+
* theme="dark"
|
|
71
|
+
* >
|
|
72
|
+
* <div>图表内容</div>
|
|
73
|
+
* </ChartContainer>
|
|
74
|
+
*
|
|
66
75
|
* // 自定义错误边界
|
|
67
76
|
* <ChartContainer
|
|
68
77
|
* baseClassName="line-chart-container"
|
|
@@ -98,6 +107,7 @@ export interface ChartContainerRef {
|
|
|
98
107
|
* - 内置错误边界保护,防止图表错误影响整个应用
|
|
99
108
|
* - 错误边界默认启用,可通过配置禁用或自定义
|
|
100
109
|
* - `theme="dark"` 时在本容器内嵌套 Ant Design 暗色算法,工具栏/筛选等 antd 控件与画布暗色一致(嵌套容器不重复包裹)
|
|
110
|
+
* - 支持自动主题检测:当 theme 未指定时,会自动检测 html[data-theme='dark'] 属性或 CSS 变量亮度判断主题
|
|
101
111
|
*/
|
|
102
112
|
declare const ChartContainer: React.FC<ChartContainerProps & {
|
|
103
113
|
baseClassName: string;
|