@lobehub/charts 1.0.0

package/es/BarChart/index.js

@@ -0,0 +1,354 @@
+'use client';
+
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["data", "categories", "index", "colors", "valueFormatter", "layout", "stack", "relative", "startEndOnly", "animationDuration", "showAnimation", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "minValue", "maxValue", "allowDecimals", "noDataText", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "barCategoryGap", "tickGap", "xAxisLabel", "yAxisLabel", "className", "width", "height"];
+import { css } from 'antd-style';
+import { forwardRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Bar, CartesianGrid, Label, Legend, BarChart as ReChartsBarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import ChartLegend from "../common/ChartLegend";
+import ChartTooltip from "../common/ChartTooltip";
+import NoData from "../common/NoData";
+import { constructCategoryColors, deepEqual, getYAxisDomain } from "../common/utils";
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
+import { defaultValueFormatter } from "../utils";
+import { renderShape } from "./renderShape";
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    theme = _useStyles.theme,
+    styles = _useStyles.styles;
+  var themeColorRange = useThemeColorRange();
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$categories = props.categories,
+    categories = _props$categories === void 0 ? [] : _props$categories,
+    index = props.index,
+    _props$colors = props.colors,
+    colors = _props$colors === void 0 ? themeColorRange : _props$colors,
+    _props$valueFormatter = props.valueFormatter,
+    valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? 'horizontal' : _props$layout,
+    _props$stack = props.stack,
+    stack = _props$stack === void 0 ? false : _props$stack,
+    _props$relative = props.relative,
+    relative = _props$relative === void 0 ? false : _props$relative,
+    _props$startEndOnly = props.startEndOnly,
+    startEndOnly = _props$startEndOnly === void 0 ? false : _props$startEndOnly,
+    _props$animationDurat = props.animationDuration,
+    animationDuration = _props$animationDurat === void 0 ? 900 : _props$animationDurat,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    _props$showXAxis = props.showXAxis,
+    showXAxis = _props$showXAxis === void 0 ? true : _props$showXAxis,
+    _props$showYAxis = props.showYAxis,
+    showYAxis = _props$showYAxis === void 0 ? true : _props$showYAxis,
+    _props$yAxisWidth = props.yAxisWidth,
+    yAxisWidth = _props$yAxisWidth === void 0 ? 56 : _props$yAxisWidth,
+    _props$intervalType = props.intervalType,
+    intervalType = _props$intervalType === void 0 ? 'equidistantPreserveStart' : _props$intervalType,
+    _props$showTooltip = props.showTooltip,
+    showTooltip = _props$showTooltip === void 0 ? true : _props$showTooltip,
+    _props$showLegend = props.showLegend,
+    showLegend = _props$showLegend === void 0 ? true : _props$showLegend,
+    _props$showGridLines = props.showGridLines,
+    showGridLines = _props$showGridLines === void 0 ? true : _props$showGridLines,
+    _props$autoMinValue = props.autoMinValue,
+    autoMinValue = _props$autoMinValue === void 0 ? false : _props$autoMinValue,
+    minValue = props.minValue,
+    maxValue = props.maxValue,
+    _props$allowDecimals = props.allowDecimals,
+    allowDecimals = _props$allowDecimals === void 0 ? true : _props$allowDecimals,
+    noDataText = props.noDataText,
+    onValueChange = props.onValueChange,
+    _props$enableLegendSl = props.enableLegendSlider,
+    enableLegendSlider = _props$enableLegendSl === void 0 ? false : _props$enableLegendSl,
+    customTooltip = props.customTooltip,
+    rotateLabelX = props.rotateLabelX,
+    barCategoryGap = props.barCategoryGap,
+    _props$tickGap = props.tickGap,
+    tickGap = _props$tickGap === void 0 ? 5 : _props$tickGap,
+    xAxisLabel = props.xAxisLabel,
+    yAxisLabel = props.yAxisLabel,
+    className = props.className,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '100%' : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? '20rem' : _props$height,
+    rest = _objectWithoutProperties(props, _excluded);
+  var CustomTooltip = customTooltip;
+  var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
+  var _useState = useState(60),
+    _useState2 = _slicedToArray(_useState, 2),
+    legendHeight = _useState2[0],
+    setLegendHeight = _useState2[1];
+  var categoryColors = constructCategoryColors(categories, colors);
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeBar = _useState4[0],
+    setActiveBar = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeLegend = _useState6[0],
+    setActiveLegend = _useState6[1];
+  var hasOnValueChange = !!onValueChange;
+  var onBarClick = function onBarClick(data, idx, event) {
+    event.stopPropagation();
+    if (!onValueChange) return;
+    if (deepEqual(activeBar, _objectSpread(_objectSpread({}, data.payload), {}, {
+      value: data.value
+    }))) {
+      setActiveLegend(undefined);
+      setActiveBar(undefined);
+      onValueChange === null || onValueChange === void 0 || onValueChange(null);
+    } else {
+      var _data$tooltipPayload, _data$tooltipPayload2;
+      setActiveLegend((_data$tooltipPayload = data.tooltipPayload) === null || _data$tooltipPayload === void 0 || (_data$tooltipPayload = _data$tooltipPayload[0]) === null || _data$tooltipPayload === void 0 ? void 0 : _data$tooltipPayload.dataKey);
+      setActiveBar(_objectSpread(_objectSpread({}, data.payload), {}, {
+        value: data.value
+      }));
+      onValueChange === null || onValueChange === void 0 || onValueChange(_objectSpread({
+        categoryClicked: (_data$tooltipPayload2 = data.tooltipPayload) === null || _data$tooltipPayload2 === void 0 || (_data$tooltipPayload2 = _data$tooltipPayload2[0]) === null || _data$tooltipPayload2 === void 0 ? void 0 : _data$tooltipPayload2.dataKey,
+        eventType: 'bar'
+      }, data.payload));
+    }
+  };
+  var onCategoryClick = function onCategoryClick(dataKey) {
+    if (!hasOnValueChange) return;
+    if (dataKey === activeLegend && !activeBar) {
+      setActiveLegend(undefined);
+      onValueChange === null || onValueChange === void 0 || onValueChange(null);
+    } else {
+      setActiveLegend(dataKey);
+      onValueChange === null || onValueChange === void 0 || onValueChange({
+        categoryClicked: dataKey,
+        eventType: 'category'
+      });
+    }
+    setActiveBar(undefined);
+  };
+  var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: className,
+    height: height,
+    ref: ref,
+    width: width
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(ResponsiveContainer, {
+      children: data !== null && data !== void 0 && data.length ? /*#__PURE__*/_jsxs(ReChartsBarChart, {
+        barCategoryGap: barCategoryGap,
+        data: data,
+        layout: layout === 'vertical' ? 'vertical' : 'horizontal',
+        margin: {
+          bottom: xAxisLabel ? 30 : undefined,
+          left: yAxisLabel ? 20 : undefined,
+          right: yAxisLabel ? 5 : undefined,
+          top: 5
+        },
+        onClick: hasOnValueChange && (activeLegend || activeBar) ? function () {
+          setActiveBar(undefined);
+          setActiveLegend(undefined);
+          onValueChange === null || onValueChange === void 0 || onValueChange(null);
+        } : undefined,
+        stackOffset: stack ? 'sign' : relative ? 'expand' : 'none',
+        children: [showGridLines ? /*#__PURE__*/_jsx(CartesianGrid, {
+          className: styles.gridLines,
+          horizontal: layout !== 'vertical',
+          vertical: layout === 'vertical'
+        }) : undefined, layout === 'vertical' ? /*#__PURE__*/_jsx(XAxis, {
+          allowDecimals: allowDecimals,
+          angle: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.angle,
+          axisLine: false,
+          className: styles.label,
+          domain: yAxisDomain,
+          dy: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.verticalShift,
+          fill: "",
+          height: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.xAxisHeight,
+          hide: !showXAxis,
+          minTickGap: tickGap,
+          stroke: "",
+          tick: {
+            transform: 'translate(-3, 0)'
+          },
+          tickFormatter: valueFormatter,
+          tickLine: false,
+          type: "number",
+          children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
+            className: cx(styles.strongLabel, styles.emphasis),
+            offset: -20,
+            position: "insideBottom",
+            style: {
+              fill: theme.colorTextSecondary,
+              fontWeight: 500,
+              textAnchor: 'middle'
+            },
+            children: xAxisLabel
+          })
+        }) : /*#__PURE__*/_jsx(XAxis, {
+          angle: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.angle,
+          axisLine: false,
+          className: styles.label,
+          dataKey: index,
+          dy: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.verticalShift,
+          fill: "",
+          height: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.xAxisHeight,
+          hide: !showXAxis,
+          interval: startEndOnly ? 'preserveStartEnd' : intervalType,
+          minTickGap: tickGap,
+          padding: {
+            left: paddingValue,
+            right: paddingValue
+          },
+          stroke: "",
+          tick: {
+            transform: 'translate(0, 6)'
+          },
+          tickLine: false,
+          ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
+          children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
+            className: cx(styles.strongLabel, styles.emphasis),
+            offset: -20,
+            position: "insideBottom",
+            style: {
+              fill: theme.colorTextSecondary,
+              fontWeight: 500,
+              textAnchor: 'middle'
+            },
+            children: xAxisLabel
+          })
+        }), layout === 'vertical' ? /*#__PURE__*/_jsx(YAxis, {
+          axisLine: false,
+          className: styles.label,
+          dataKey: index,
+          fill: "",
+          hide: !showYAxis,
+          interval: "preserveStartEnd",
+          stroke: "",
+          tick: {
+            transform: 'translate(0, 6)'
+          },
+          tickLine: false,
+          ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
+          type: "category",
+          width: yAxisWidth,
+          children: yAxisLabel && /*#__PURE__*/_jsx(Label, {
+            angle: -90,
+            className: styles.emphasis,
+            offset: -15,
+            position: "insideLeft",
+            style: {
+              fill: theme.colorTextSecondary,
+              fontWeight: 500,
+              textAnchor: 'middle'
+            },
+            children: yAxisLabel
+          })
+        }) : /*#__PURE__*/_jsx(YAxis, {
+          allowDecimals: allowDecimals,
+          axisLine: false,
+          className: styles.label,
+          domain: yAxisDomain,
+          fill: "",
+          hide: !showYAxis,
+          stroke: "",
+          tick: {
+            transform: 'translate(-3, 0)'
+          },
+          tickFormatter: relative ? function (value) {
+            return "".concat((value * 100).toString(), " %");
+          } : valueFormatter,
+          tickLine: false,
+          type: "number",
+          width: yAxisWidth,
+          children: yAxisLabel && /*#__PURE__*/_jsx(Label, {
+            angle: -90,
+            className: styles.emphasis,
+            offset: -15,
+            position: "insideLeft",
+            style: {
+              fill: theme.colorTextSecondary,
+              fontWeight: 500,
+              textAnchor: 'middle'
+            },
+            children: yAxisLabel
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          content: showTooltip ? function (_ref) {
+            var active = _ref.active,
+              payload = _ref.payload,
+              label = _ref.label;
+            return CustomTooltip ? /*#__PURE__*/_jsx(CustomTooltip, {
+              active: active,
+              label: label,
+              payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
+                var _categoryColors$get;
+                return _objectSpread(_objectSpread({}, payloadItem), {}, {
+                  color: (_categoryColors$get = categoryColors.get(payloadItem.dataKey)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary
+                });
+              })
+            }) : /*#__PURE__*/_jsx(ChartTooltip, {
+              active: active,
+              categoryColors: categoryColors,
+              label: label,
+              payload: payload,
+              valueFormatter: valueFormatter
+            });
+          } : undefined,
+          cursor: {
+            fill: theme.colorFillTertiary
+          },
+          isAnimationActive: false,
+          position: {
+            y: 0
+          },
+          wrapperStyle: {
+            outline: 'none'
+          }
+        }), showLegend ? /*#__PURE__*/_jsx(Legend, {
+          content: function content(_ref2) {
+            var payload = _ref2.payload;
+            return ChartLegend({
+              payload: payload
+            }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange ? function (clickedLegendItem) {
+              return onCategoryClick(clickedLegendItem);
+            } : undefined, enableLegendSlider);
+          },
+          height: legendHeight,
+          verticalAlign: "top"
+        }) : undefined, categories.map(function (category) {
+          var _categoryColors$get2;
+          console.log(categoryColors.get(category));
+          return /*#__PURE__*/_jsx(Bar, {
+            animationDuration: animationDuration,
+            className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                    fill: ", ";\n                  "])), (_categoryColors$get2 = categoryColors.get(category)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary)),
+            dataKey: category,
+            fill: '',
+            isAnimationActive: showAnimation,
+            name: category,
+            onClick: onBarClick,
+            shape: function shape(props) {
+              return renderShape(props, activeBar, activeLegend, layout);
+            },
+            stackId: stack || relative ? 'a' : undefined,
+            style: {
+              cursor: onValueChange ? 'pointer' : undefined
+            },
+            type: "linear"
+          }, category);
+        })]
+      }) : /*#__PURE__*/_jsx(NoData, {
+        noDataText: noDataText
+      })
+    })
+  }));
+});
+BarChart.displayName = 'BarChart';
+export default BarChart;

package/es/BarChart/renderShape.d.ts

@@ -0,0 +1 @@
+export declare const renderShape: (props: any, activeBar: any | undefined, activeLegend: string | undefined, layout: string) => import("react/jsx-runtime").JSX.Element;

package/es/BarChart/renderShape.js

@@ -0,0 +1,29 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { deepEqual } from "../common/utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var renderShape = function renderShape(props, activeBar, activeLegend, layout) {
+  var fillOpacity = props.fillOpacity,
+    name = props.name,
+    payload = props.payload,
+    value = props.value;
+  var x = props.x,
+    width = props.width,
+    y = props.y,
+    height = props.height;
+  if (layout === 'horizontal' && height < 0) {
+    y += height;
+    height = Math.abs(height); // height must be a positive number
+  } else if (layout === 'vertical' && width < 0) {
+    x += width;
+    width = Math.abs(width); // width must be a positive number
+  }
+  return /*#__PURE__*/_jsx("rect", {
+    height: height,
+    opacity: activeBar || activeLegend && activeLegend !== name ? deepEqual(activeBar, _objectSpread(_objectSpread({}, payload), {}, {
+      value: value
+    })) ? fillOpacity : 0.3 : fillOpacity,
+    width: width,
+    x: x,
+    y: y
+  });
+};

package/es/BarChart/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    emphasis: import("antd-style").SerializedStyles;
+    gridLines: import("antd-style").SerializedStyles;
+    label: import("antd-style").SerializedStyles;
+    strongLabel: import("antd-style").SerializedStyles;
+}>;

package/es/BarChart/styles.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
+    gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    stroke: ", ";\n    stroke-width: 1;\n  "])), token.colorBorderSecondary),
+    label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextDescription),
+    strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextSecondary)
+  };
+});

package/es/DonutChart/DonutChartTooltip.d.ts

@@ -0,0 +1,7 @@
+import { ValueFormatter } from "../types";
+export interface DonutChartTooltipProps {
+    active: boolean | undefined;
+    payload: any;
+    valueFormatter: ValueFormatter;
+}
+export declare const DonutChartTooltip: ({ active, payload, valueFormatter }: DonutChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;

package/es/DonutChart/DonutChartTooltip.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Flexbox } from 'react-layout-kit';
+import ChartTooltipFrame from "../common/ChartTooltip/ChartTooltipFrame";
+import ChartTooltipRow from "../common/ChartTooltip/ChartTooltipRow";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DonutChartTooltip = function DonutChartTooltip(_ref) {
+  var active = _ref.active,
+    payload = _ref.payload,
+    valueFormatter = _ref.valueFormatter;
+  if (active && payload !== null && payload !== void 0 && payload[0]) {
+    var payloadRow = payload === null || payload === void 0 ? void 0 : payload[0];
+    return /*#__PURE__*/_jsx(ChartTooltipFrame, {
+      children: /*#__PURE__*/_jsx(Flexbox, {
+        paddingBlock: 8,
+        paddingInline: 16,
+        children: /*#__PURE__*/_jsx(ChartTooltipRow, {
+          color: payloadRow.payload.color,
+          name: payloadRow.name,
+          value: valueFormatter(payloadRow.value)
+        })
+      })
+    });
+  }
+  return null;
+};

package/es/DonutChart/index.d.ts

@@ -0,0 +1,25 @@
+import { ComponentType } from 'react';
+import type BaseAnimationTimingProps from "../common/BaseAnimationTimingProps";
+import { CustomTooltipProps } from "../common/CustomTooltipProps";
+import { type NoDataProps } from "../common/NoData";
+import type { EventProps } from "../types";
+import { ValueFormatter } from "../types";
+type DonutChartVariant = 'donut' | 'pie';
+export interface DonutChartProps extends BaseAnimationTimingProps {
+    category?: string;
+    className?: string;
+    colors?: string[];
+    customTooltip?: ComponentType<CustomTooltipProps>;
+    data: any[];
+    index?: string;
+    label?: string;
+    noDataText?: NoDataProps['noDataText'];
+    onValueChange?: (value: EventProps) => void;
+    showAnimation?: boolean;
+    showLabel?: boolean;
+    showTooltip?: boolean;
+    valueFormatter?: ValueFormatter;
+    variant?: DonutChartVariant;
+}
+declare const DonutChart: import("react").ForwardRefExoticComponent<DonutChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DonutChart;

package/es/DonutChart/index.js

@@ -0,0 +1,186 @@
+'use client';
+
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["data", "category", "index", "colors", "variant", "valueFormatter", "label", "showLabel", "animationDuration", "showAnimation", "showTooltip", "noDataText", "onValueChange", "customTooltip", "className", "width", "height"];
+import { css } from 'antd-style';
+import { forwardRef, useEffect, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Pie, PieChart as ReChartsDonutChart, ResponsiveContainer, Tooltip } from 'recharts';
+import NoData from "../common/NoData";
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
+import { defaultValueFormatter } from "../utils";
+import { DonutChartTooltip } from "./DonutChartTooltip";
+import { parseLabelInput } from "./inputParser";
+import { renderInactiveShape } from "./renderInactiveShape";
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    theme = _useStyles.theme,
+    styles = _useStyles.styles;
+  var themeColorRange = useThemeColorRange();
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$category = props.category,
+    category = _props$category === void 0 ? 'value' : _props$category,
+    _props$index = props.index,
+    index = _props$index === void 0 ? 'name' : _props$index,
+    _props$colors = props.colors,
+    colors = _props$colors === void 0 ? themeColorRange : _props$colors,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'donut' : _props$variant,
+    _props$valueFormatter = props.valueFormatter,
+    valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
+    label = props.label,
+    _props$showLabel = props.showLabel,
+    showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
+    _props$animationDurat = props.animationDuration,
+    animationDuration = _props$animationDurat === void 0 ? 900 : _props$animationDurat,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    _props$showTooltip = props.showTooltip,
+    showTooltip = _props$showTooltip === void 0 ? true : _props$showTooltip,
+    noDataText = props.noDataText,
+    onValueChange = props.onValueChange,
+    customTooltip = props.customTooltip,
+    className = props.className,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '100%' : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? '10rem' : _props$height,
+    rest = _objectWithoutProperties(props, _excluded);
+  var CustomTooltip = customTooltip;
+  var isDonut = variant === 'donut';
+  var parsedLabelInput = parseLabelInput(label, valueFormatter, data, category);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  var hasOnValueChange = !!onValueChange;
+  function onShapeClick(data, index, event) {
+    event.stopPropagation();
+    if (!hasOnValueChange) return;
+    if (activeIndex === index) {
+      setActiveIndex(undefined);
+      onValueChange === null || onValueChange === void 0 || onValueChange(null);
+    } else {
+      setActiveIndex(index);
+      onValueChange === null || onValueChange === void 0 || onValueChange(_objectSpread({
+        eventType: 'slice'
+      }, data.payload.payload));
+    }
+  }
+  useEffect(function () {
+    var pieSectors = document.querySelectorAll('.recharts-pie-sector');
+    if (pieSectors) {
+      var _iterator = _createForOfIteratorHelper(pieSectors),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var sector = _step.value;
+          sector.setAttribute('style', 'outline: none');
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  }, [activeIndex]);
+  var parseData = function parseData(data, colors) {
+    return data.map(function (dataPoint, idx) {
+      var baseColor = idx < colors.length ? colors[idx] : theme.colorPrimary;
+      return _objectSpread(_objectSpread({}, dataPoint), {}, {
+        className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          fill: ", ";\n        "])), baseColor !== null && baseColor !== void 0 ? baseColor : theme.colorPrimary)),
+        color: baseColor,
+        fill: ''
+      });
+    });
+  };
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: className,
+    height: height,
+    ref: ref,
+    width: width
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(ResponsiveContainer, {
+      children: data !== null && data !== void 0 && data.length ? /*#__PURE__*/_jsxs(ReChartsDonutChart, {
+        margin: {
+          bottom: 0,
+          left: 0,
+          right: 0,
+          top: 0
+        },
+        onClick: hasOnValueChange && activeIndex ? function () {
+          setActiveIndex(undefined);
+          onValueChange === null || onValueChange === void 0 || onValueChange(null);
+        } : undefined,
+        children: [showLabel && isDonut ? /*#__PURE__*/_jsx("text", {
+          className: cx(styles.strongLabel, styles.emphasis),
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          x: "50%",
+          y: "50%",
+          children: parsedLabelInput
+        }) : null, /*#__PURE__*/_jsx(Pie, {
+          activeIndex: activeIndex,
+          animationDuration: animationDuration,
+          cx: "50%",
+          cy: "50%",
+          data: parseData(data, colors),
+          dataKey: category,
+          endAngle: -270,
+          inactiveShape: renderInactiveShape,
+          innerRadius: isDonut ? '75%' : '0%',
+          isAnimationActive: showAnimation,
+          nameKey: index,
+          onClick: onShapeClick,
+          outerRadius: "100%",
+          startAngle: 90,
+          stroke: "",
+          strokeLinejoin: "round",
+          style: {
+            cursor: onValueChange ? 'pointer' : undefined,
+            outline: 'none',
+            stroke: theme.colorBgContainer
+          }
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          content: showTooltip ? function (_ref) {
+            var _payload$;
+            var active = _ref.active,
+              payload = _ref.payload;
+            return CustomTooltip ? /*#__PURE__*/_jsx(CustomTooltip, {
+              active: active,
+              label: payload === null || payload === void 0 || (_payload$ = payload[0]) === null || _payload$ === void 0 ? void 0 : _payload$.name,
+              payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
+                var _payload$0$payload$co, _payload$2;
+                return _objectSpread(_objectSpread({}, payloadItem), {}, {
+                  color: (_payload$0$payload$co = payload === null || payload === void 0 || (_payload$2 = payload[0]) === null || _payload$2 === void 0 || (_payload$2 = _payload$2.payload) === null || _payload$2 === void 0 ? void 0 : _payload$2.color) !== null && _payload$0$payload$co !== void 0 ? _payload$0$payload$co : theme.colorPrimary
+                });
+              })
+            }) : /*#__PURE__*/_jsx(DonutChartTooltip, {
+              active: active,
+              payload: payload,
+              valueFormatter: valueFormatter
+            });
+          } : undefined,
+          isAnimationActive: false,
+          wrapperStyle: {
+            outline: 'none'
+          }
+        })]
+      }) : /*#__PURE__*/_jsx(NoData, {
+        noDataText: noDataText
+      })
+    })
+  }));
+});
+DonutChart.displayName = 'DonutChart';
+export default DonutChart;

package/es/DonutChart/inputParser.d.ts

@@ -0,0 +1,2 @@
+import { ValueFormatter } from "../types";
+export declare const parseLabelInput: (labelInput: string | undefined, valueFormatter: ValueFormatter, data: any[], category: string) => string;

package/es/DonutChart/inputParser.js

@@ -0,0 +1,9 @@
+import { sumNumericArray } from "../utils";
+var calculateDefaultLabel = function calculateDefaultLabel(data, category) {
+  return sumNumericArray(data.map(function (dataPoint) {
+    return dataPoint[category];
+  }));
+};
+export var parseLabelInput = function parseLabelInput(labelInput, valueFormatter, data, category) {
+  return labelInput ? labelInput : valueFormatter(calculateDefaultLabel(data, category));
+};

package/es/DonutChart/renderInactiveShape.d.ts

@@ -0,0 +1 @@
+export declare const renderInactiveShape: (props: any) => import("react/jsx-runtime").JSX.Element;