@ant-design/agentic-ui 2.30.2 → 2.30.4

package/dist/Plugins/chart/ChartRender.js

@@ -6,6 +6,9 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -48,6 +51,9 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -75,6 +81,9 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -117,6 +126,9 @@ function _object_spread_props(target, source) {
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
 function _unsupported_iterable_to_array(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _array_like_to_array(o, minLen);
@@ -224,9 +236,10 @@ function _ts_generator(thisArg, body) {
         };
     }
 }
-import { DownOutlined, SettingOutlined } from "@ant-design/icons";
+import { CopyOutlined, DownOutlined, SettingOutlined } from "@ant-design/icons";
 import { ProForm, ProFormSelect } from "@ant-design/pro-components";
-import { ConfigProvider, Descriptions, Dropdown, Popover, Table } from "antd";
+import { ConfigProvider, Descriptions, Dropdown, message, Popover, Table } from "antd";
+import copy from "copy-to-clipboard";
 import React, { lazy, Suspense, useContext, useMemo, useState } from "react";
 import { ActionIconBox } from "../../Components/ActionIconBox";
 import { Loading } from "../../Components/Loading";
@@ -260,7 +273,7 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
  *
  * @since 1.0.0
  */ var getChartMap = function getChartMap(i18n) {
-    var _i18n_locale, _i18n_locale1, _i18n_locale2, _i18n_locale3, _i18n_locale4, _i18n_locale5, _i18n_locale6, _i18n_locale7, _i18n_locale8, _i18n_locale9, _i18n_locale10;
+    var _i18n_locale, _i18n_locale1, _i18n_locale2, _i18n_locale3, _i18n_locale4, _i18n_locale5, _i18n_locale6, _i18n_locale7, _i18n_locale8, _i18n_locale9, _i18n_locale10, _i18n_locale11, _i18n_locale12;
     return {
         pie: {
             title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale = i18n.locale) === null || _i18n_locale === void 0 ? void 0 : _i18n_locale.pieChart) || '饼图',
@@ -282,6 +295,8 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
                 'column',
                 'line',
                 'area',
+                'histogram',
+                'boxplot',
                 'table'
             ]
         },
@@ -291,6 +306,8 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
                 'column',
                 'bar',
                 'area',
+                'histogram',
+                'boxplot',
                 'table'
             ]
         },
@@ -300,6 +317,8 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
                 'bar',
                 'line',
                 'area',
+                'histogram',
+                'boxplot',
                 'table'
             ]
         },
@@ -309,6 +328,8 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
                 'column',
                 'bar',
                 'line',
+                'histogram',
+                'boxplot',
                 'table'
             ]
         },
@@ -321,6 +342,8 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
         scatter: {
             title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale7 = i18n.locale) === null || _i18n_locale7 === void 0 ? void 0 : _i18n_locale7.scatterChart) || '散点图',
             changeData: [
+                'histogram',
+                'boxplot',
                 'table'
             ]
         },
@@ -330,8 +353,26 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
                 'table'
             ]
         },
+        boxplot: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale9 = i18n.locale) === null || _i18n_locale9 === void 0 ? void 0 : _i18n_locale9.boxplotChart) || '箱线图',
+            changeData: [
+                'histogram',
+                'column',
+                'bar',
+                'table'
+            ]
+        },
+        histogram: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale10 = i18n.locale) === null || _i18n_locale10 === void 0 ? void 0 : _i18n_locale10.histogramChart) || '直方图',
+            changeData: [
+                'boxplot',
+                'column',
+                'bar',
+                'table'
+            ]
+        },
         table: {
-            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale9 = i18n.locale) === null || _i18n_locale9 === void 0 ? void 0 : _i18n_locale9.table) || '表格',
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale11 = i18n.locale) === null || _i18n_locale11 === void 0 ? void 0 : _i18n_locale11.table) || '表格',
             changeData: [
                 'column',
                 'line',
@@ -341,11 +382,13 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
                 'bar',
                 'radar',
                 'scatter',
-                'funnel'
+                'funnel',
+                'boxplot',
+                'histogram'
             ]
         },
         descriptions: {
-            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale10 = i18n.locale) === null || _i18n_locale10 === void 0 ? void 0 : _i18n_locale10.descriptions) || '定义列表',
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale12 = i18n.locale) === null || _i18n_locale12 === void 0 ? void 0 : _i18n_locale12.descriptions) || '定义列表',
             changeData: [
                 'column',
                 'line',
@@ -361,9 +404,9 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
  * 图表运行时渲染器组件实现
  * 负责使用已加载的 runtime 渲染图表
  */ var ChartRuntimeRendererImpl = function ChartRuntimeRendererImpl(param) {
-    var chartType = param.chartType, runtime = param.runtime, convertDonutData = param.convertDonutData, convertFlatData = param.convertFlatData, config = param.config, title = param.title, dataTime = param.dataTime, toolBar = param.toolBar, filterBy = param.filterBy, groupBy = param.groupBy, colorLegend = param.colorLegend, chartData = param.chartData, getFieldValue = param.getFieldValue, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading;
+    var chartType = param.chartType, runtime = param.runtime, convertDonutData = param.convertDonutData, convertFlatData = param.convertFlatData, config = param.config, title = param.title, dataTime = param.dataTime, toolBar = param.toolBar, filterBy = param.filterBy, groupBy = param.groupBy, colorLegend = param.colorLegend, chartData = param.chartData, getFieldValue = param.getFieldValue, getFieldValueSafely = param.getFieldValueSafely, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading;
     var i18n = useContext(I18nContext);
-    var DonutChart = runtime.DonutChart, FunnelChart = runtime.FunnelChart, AreaChart = runtime.AreaChart, BarChart = runtime.BarChart, LineChart = runtime.LineChart, RadarChart = runtime.RadarChart, ScatterChart = runtime.ScatterChart;
+    var DonutChart = runtime.DonutChart, FunnelChart = runtime.FunnelChart, AreaChart = runtime.AreaChart, BarChart = runtime.BarChart, BoxPlotChart = runtime.BoxPlotChart, HistogramChart = runtime.HistogramChart, LineChart = runtime.LineChart, RadarChart = runtime.RadarChart, ScatterChart = runtime.ScatterChart;
     if (chartType === 'pie') {
         return /*#__PURE__*/ React.createElement(DonutChart, {
             key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-pie"),
@@ -558,6 +601,84 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
             loading: loading
         });
     }
+    if (chartType === 'boxplot') {
+        // 箱线图数据转换：将原始数据按标签分组
+        var boxplotData = [];
+        var groupedByLabel = {};
+        (chartData || []).forEach(function(row) {
+            var label = getFieldValue(row, config === null || config === void 0 ? void 0 : config.x) || '默认';
+            var value = getFieldValueSafely(row, config === null || config === void 0 ? void 0 : config.y);
+            var type = getFieldValue(row, colorLegend);
+            var category = getFieldValue(row, groupBy);
+            // filterLabel 用于未来扩展，暂不使用
+            var key = "".concat(label, "_").concat(type || 'default');
+            if (!groupedByLabel[key]) {
+                groupedByLabel[key] = {
+                    values: [],
+                    type: type || undefined,
+                    category: category || undefined
+                };
+            }
+            var numValue = typeof value === 'number' ? value : toNumber(value, Number.NaN);
+            if (Number.isFinite(numValue)) {
+                groupedByLabel[key].values.push(numValue);
+            }
+        });
+        Object.entries(groupedByLabel).forEach(function(param) {
+            var _param = _sliced_to_array(param, 2), key = _param[0], data = _param[1];
+            var label = key.split('_')[0];
+            if (data.values.length > 0) {
+                boxplotData.push(_object_spread({
+                    label: label,
+                    values: data.values
+                }, data.type ? {
+                    type: data.type
+                } : {}, data.category ? {
+                    category: data.category
+                } : {}));
+            }
+        });
+        return /*#__PURE__*/ React.createElement(BoxPlotChart, {
+            key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-boxplot"),
+            data: boxplotData,
+            height: (config === null || config === void 0 ? void 0 : config.height) || 400,
+            title: title || '',
+            dataTime: dataTime,
+            toolbarExtra: toolBar,
+            loading: loading
+        });
+    }
+    if (chartType === 'histogram') {
+        var _ref8;
+        var _config_rest10;
+        // 直方图数据转换：提取原始值
+        var histogramData = (chartData || []).map(function(row) {
+            var value = getFieldValueSafely(row, config === null || config === void 0 ? void 0 : config.y);
+            var type = getFieldValue(row, colorLegend);
+            var category = getFieldValue(row, groupBy);
+            var filterLabel = getFieldValue(row, filterBy);
+            var numValue = typeof value === 'number' ? value : toNumber(value, Number.NaN);
+            return _object_spread({
+                value: Number.isFinite(numValue) ? numValue : 0
+            }, type ? {
+                type: type
+            } : {}, category ? {
+                category: category
+            } : {}, filterLabel ? {
+                filterLabel: filterLabel
+            } : {});
+        });
+        return /*#__PURE__*/ React.createElement(HistogramChart, {
+            key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-histogram"),
+            data: histogramData,
+            height: (config === null || config === void 0 ? void 0 : config.height) || 400,
+            title: title || '',
+            stacked: (_ref8 = config === null || config === void 0 ? void 0 : (_config_rest10 = config.rest) === null || _config_rest10 === void 0 ? void 0 : _config_rest10.stacked) !== null && _ref8 !== void 0 ? _ref8 : true,
+            dataTime: dataTime,
+            toolbarExtra: toolBar,
+            loading: loading
+        });
+    }
     return null;
 };
 /**
@@ -887,9 +1008,53 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
     ]);
     var chartConfigFormPrefixCls = (_getPrefixCls = getPrefixCls('agentic-chart-config-form')) !== null && _getPrefixCls !== void 0 ? _getPrefixCls : 'ant-agentic-chart-config-form';
     /**
+   * 将表格数据转换为 Markdown 格式
+   */ var generateMarkdownTable = function generateMarkdownTable() {
+        var columns = (config === null || config === void 0 ? void 0 : config.columns) || [];
+        var data = chartData || [];
+        if (columns.length === 0 || data.length === 0) {
+            return '';
+        }
+        // 表头
+        var headerRow = columns.filter(function(col) {
+            return col === null || col === void 0 ? void 0 : col.title;
+        }).map(function(col) {
+            return col.title;
+        }).join(' | ');
+        // 分隔行
+        var separatorRow = columns.filter(function(col) {
+            return col === null || col === void 0 ? void 0 : col.title;
+        }).map(function() {
+            return '---';
+        }).join(' | ');
+        // 数据行
+        var dataRows = data.map(function(row) {
+            return columns.filter(function(col) {
+                return col === null || col === void 0 ? void 0 : col.title;
+            }).map(function(col) {
+                var value = row[col.dataIndex];
+                return value !== undefined && value !== null ? String(value) : '';
+            }).join(' | ');
+        });
+        return [
+            headerRow,
+            separatorRow
+        ].concat(_to_consumable_array(dataRows)).join('\n');
+    };
+    /**
+   * 复制表格 Markdown
+   */ var handleCopyMarkdown = function handleCopyMarkdown() {
+        var markdown = generateMarkdownTable();
+        if (markdown) {
+            var _i18n_locale;
+            copy(markdown);
+            message.success((i18n === null || i18n === void 0 ? void 0 : (_i18n_locale = i18n.locale) === null || _i18n_locale === void 0 ? void 0 : _i18n_locale.copySuccess) || '复制成功');
+        }
+    };
+    /**
    * 图表配置
    */ var toolBar = useMemo(function() {
-        var _ChartMap_chartType_changeData, _ChartMap_chartType, _ChartMap_chartType1, _i18n_locale, _i18n_locale1, _i18n_locale2, _config_columns_filter, _config_columns, _config_columns_filter1, _config_columns1, _i18n_locale3;
+        var _ChartMap_chartType_changeData, _ChartMap_chartType, _ChartMap_chartType1, _i18n_locale, _i18n_locale1, _i18n_locale2, _config_columns_filter, _config_columns, _config_columns_filter1, _config_columns1, _i18n_locale3, _i18n_locale4;
         return [
             /*#__PURE__*/ React.createElement(Dropdown, {
                 key: "dropdown",
@@ -1037,7 +1202,16 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
                 style: {
                     color: 'rgba(0, 25, 61, 0.3255)'
                 }
-            })))
+            }))),
+            /*#__PURE__*/ React.createElement(ActionIconBox, {
+                key: "copy-markdown",
+                title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale4 = i18n.locale) === null || _i18n_locale4 === void 0 ? void 0 : _i18n_locale4.copyMarkdown) || '复制表格'
+            }, /*#__PURE__*/ React.createElement(CopyOutlined, {
+                style: {
+                    color: 'rgba(0, 25, 61, 0.3255)'
+                },
+                onClick: handleCopyMarkdown
+            }))
         ].filter(function(item) {
             return !!item;
         });
@@ -1050,7 +1224,8 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
         onColumnLengthChange,
         config,
         props.config,
-        chartConfigFormPrefixCls
+        chartConfigFormPrefixCls,
+        chartData
     ]);
     var chartDom = useMemo(function() {
         var _window;
@@ -1183,7 +1358,8 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
                 groupBy: groupBy,
                 colorLegend: colorLegend,
                 chartData: chartData,
-                getFieldValue: getFieldValue
+                getFieldValue: getFieldValue,
+                getFieldValueSafely: getFieldValueSafely
             }));
         }
         return null;

package/dist/Plugins/chart/DonutChart/Legend.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DonutChartData } from './types';
-interface LegendProps {
+export interface DonutLegendProps {
     chartData: DonutChartData[];
     backgroundColors: string[];
     /** 按图索引维护的隐藏集合 */
@@ -12,6 +12,8 @@ interface LegendProps {
     baseClassName: string;
     hashId: string;
     isMobile: boolean;
+    /** 与 ChartContainer / 图表 theme 一致，用于图例文字与分页按钮 */
+    theme?: 'light' | 'dark';
 }
-declare const Legend: React.FC<LegendProps>;
-export default Legend;
+declare const DonutChartLegend: React.FC<DonutLegendProps>;
+export default DonutChartLegend;

package/dist/Plugins/chart/DonutChart/Legend.js

@@ -72,12 +72,18 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
+import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useLocale } from "../../../I18n";
 /** 图例每页显示条数，超过则显示分页 */ var LEGEND_PAGE_SIZE = 12;
-var Legend = function Legend(param) {
-    var chartData = param.chartData, backgroundColors = param.backgroundColors, hiddenDataIndicesByChart = param.hiddenDataIndicesByChart, chartIndex = param.chartIndex, onLegendItemClick = param.onLegendItemClick, total = param.total, baseClassName = param.baseClassName, hashId = param.hashId, isMobile = param.isMobile;
+var DonutChartLegend = function DonutChartLegend(param) {
+    var chartData = param.chartData, backgroundColors = param.backgroundColors, hiddenDataIndicesByChart = param.hiddenDataIndicesByChart, chartIndex = param.chartIndex, onLegendItemClick = param.onLegendItemClick, total = param.total, baseClassName = param.baseClassName, hashId = param.hashId, isMobile = param.isMobile, _param_theme = param.theme, theme = _param_theme === void 0 ? 'light' : _param_theme;
     var locale = useLocale();
+    var isDark = theme === 'dark';
+    var legendMutedColor = isDark ? 'rgba(255, 255, 255, 0.55)' : '#767E8B';
+    var legendStrongColor = isDark ? 'rgba(255, 255, 255, 0.88)' : '#343A45';
+    var paginationBorder = isDark ? '1px solid rgba(255, 255, 255, 0.2)' : '1px solid rgba(0,0,0,0.15)';
+    var paginationBg = isDark ? 'rgba(255, 255, 255, 0.08)' : '#fff';
     var hiddenDataIndices = React.useMemo(function() {
         return hiddenDataIndicesByChart[chartIndex] || new Set();
     }, [
@@ -105,10 +111,7 @@ var Legend = function Legend(param) {
         });
     };
     return /*#__PURE__*/ React.createElement("div", {
-        className: [
-            "".concat(baseClassName, "-legend"),
-            hashId
-        ].filter(Boolean).join(' '),
+        className: clsx("".concat(baseClassName, "-legend"), hashId),
         style: _object_spread({
             marginLeft: isMobile ? 0 : 12
         }, isMobile ? {
@@ -131,10 +134,7 @@ var Legend = function Legend(param) {
         var _obj;
         return /*#__PURE__*/ React.createElement("div", {
             key: dataIndex,
-            className: [
-                "".concat(baseClassName, "-legend-item"),
-                hashId
-            ].filter(Boolean).join(' '),
+            className: clsx("".concat(baseClassName, "-legend-item"), hashId),
             style: {
                 cursor: 'pointer',
                 padding: isMobile ? '4px 0' : '6px 0',
@@ -155,27 +155,20 @@ var Legend = function Legend(param) {
             role: "button",
             "aria-label": "".concat(isHidden ? locale['chart.legend.show'] : locale['chart.legend.hide'], " ").concat(d.label)
         }, /*#__PURE__*/ React.createElement("span", {
-            className: [
-                "".concat(baseClassName, "-legend-color"),
-                hashId
-            ].filter(Boolean).join(' '),
+            className: clsx("".concat(baseClassName, "-legend-color"), hashId),
             style: (_obj = {}, _define_property(_obj, '--donut-legend-color', backgroundColors[dataIndex] || '#ccc'), _define_property(_obj, "width", isMobile ? 10 : 12), _define_property(_obj, "height", isMobile ? 10 : 12), _define_property(_obj, "borderRadius", 4), _define_property(_obj, "marginRight", isMobile ? 4 : 6), _obj)
         }), /*#__PURE__*/ React.createElement("span", {
-            className: [
-                "".concat(baseClassName, "-legend-label"),
-                hashId
-            ].filter(Boolean).join(' '),
+            className: clsx("".concat(baseClassName, "-legend-label"), hashId),
             style: {
+                color: legendMutedColor,
                 fontSize: isMobile ? 11 : 13,
                 flex: isMobile ? '0 1 auto' : 1,
                 minWidth: isMobile ? '60px' : 'auto'
             }
         }, d.label), /*#__PURE__*/ React.createElement("span", {
-            className: [
-                "".concat(baseClassName, "-legend-value"),
-                hashId
-            ].filter(Boolean).join(' '),
+            className: clsx("".concat(baseClassName, "-legend-value"), hashId),
             style: {
+                color: legendStrongColor,
                 fontSize: isMobile ? 11 : 13,
                 fontWeight: isMobile ? 400 : 500,
                 marginLeft: isMobile ? 8 : 15,
@@ -184,11 +177,9 @@ var Legend = function Legend(param) {
                 alignItems: 'center'
             }
         }, /*#__PURE__*/ React.createElement("span", null, d.value), /*#__PURE__*/ React.createElement("span", {
-            className: [
-                "".concat(baseClassName, "-legend-percent"),
-                hashId
-            ].filter(Boolean).join(' '),
+            className: clsx("".concat(baseClassName, "-legend-percent"), hashId),
             style: {
+                color: legendStrongColor,
                 fontSize: isMobile ? 10 : 12,
                 marginLeft: isMobile ? 6 : 8,
                 marginTop: 0
@@ -198,13 +189,12 @@ var Legend = function Legend(param) {
             return total > 0 && Number.isFinite(v) ? (v / total * 100).toFixed(0) : '0';
         }(), "%")));
     })), totalPages > 1 && /*#__PURE__*/ React.createElement("div", {
-        className: [
-            "".concat(baseClassName, "-legend-pagination"),
-            hashId
-        ].filter(Boolean).join(' '),
-        style: isMobile ? {
+        className: clsx("".concat(baseClassName, "-legend-pagination"), hashId),
+        style: isMobile || isDark ? _object_spread({}, isMobile ? {
             flexShrink: 0
-        } : undefined
+        } : {}, isDark ? {
+            borderTopColor: 'rgba(255,255,255,0.12)'
+        } : {}) : undefined
     }, /*#__PURE__*/ React.createElement("button", {
         type: "button",
         "aria-label": locale['chart.legend.prevPage'],
@@ -215,14 +205,15 @@ var Legend = function Legend(param) {
             fontSize: 12,
             cursor: currentPage <= 0 ? 'not-allowed' : 'pointer',
             opacity: currentPage <= 0 ? 0.5 : 1,
-            border: '1px solid rgba(0,0,0,0.15)',
+            border: paginationBorder,
             borderRadius: 4,
-            background: '#fff'
+            background: paginationBg,
+            color: legendStrongColor
         }
     }, "<"), /*#__PURE__*/ React.createElement("span", {
         style: {
             fontSize: 12,
-            color: '#767E8B'
+            color: legendMutedColor
         }
     }, currentPage + 1, "/", totalPages), /*#__PURE__*/ React.createElement("button", {
         type: "button",
@@ -234,10 +225,11 @@ var Legend = function Legend(param) {
             fontSize: 12,
             cursor: currentPage >= totalPages - 1 ? 'not-allowed' : 'pointer',
             opacity: currentPage >= totalPages - 1 ? 0.5 : 1,
-            border: '1px solid rgba(0,0,0,0.15)',
+            border: paginationBorder,
             borderRadius: 4,
-            background: '#fff'
+            background: paginationBg,
+            color: legendStrongColor
         }
     }, ">")));
 };
-export default Legend;
+export default DonutChartLegend;