{"version":3,"file":"index.mjs","names":["ReChartsDonutChart","Tooltip"],"sources":["../../src/DonutChart/index.tsx"],"sourcesContent":["'use client';\n\nimport { Flexbox } from '@lobehub/ui';\nimport { Skeleton } from '@lobehub/ui/base-ui';\nimport { css, cssVar, cx, useThemeMode } from 'antd-style';\nimport { CSSProperties, ComponentType, MouseEvent, forwardRef, useEffect, useState } from 'react';\nimport { Pie, PieChart as ReChartsDonutChart, ResponsiveContainer, Tooltip } from 'recharts';\n\nimport type BaseAnimationTimingProps from '@/common/BaseAnimationTimingProps';\nimport { CustomTooltipProps } from '@/common/CustomTooltipProps';\nimport NoData, { type NoDataProps } from '@/common/NoData';\nimport { useThemeColorRange } from '@/hooks/useThemeColorRange';\nimport type { EventProps } from '@/types/charts';\nimport { ValueFormatter } from '@/types/charts';\nimport { defaultValueFormatter, isOnSeverSide } from '@/utils';\n\nimport { DonutChartTooltip } from './DonutChartTooltip';\nimport { parseLabelInput } from './inputParser';\nimport { renderInactiveShape } from './renderInactiveShape';\nimport { styles } from './styles';\n\ntype DonutChartVariant = 'donut' | 'pie';\n\nexport interface DonutChartProps extends BaseAnimationTimingProps {\n  category?: string;\n  className?: string;\n  colors?: string[];\n  customCategories?: {\n    [key: string]: string;\n  };\n  customTooltip?: ComponentType<CustomTooltipProps>;\n  data: any[];\n  donutLabel?: string;\n  index?: string;\n  label?: string;\n  loading?: boolean;\n  noDataText?: NoDataProps['noDataText'];\n  onValueChange?: (value: EventProps) => void;\n  showAnimation?: boolean;\n  showLabel?: boolean;\n  showTooltip?: boolean;\n  style?: CSSProperties;\n  valueFormatter?: ValueFormatter;\n  variant?: DonutChartVariant;\n}\n\nconst DonutChart = forwardRef<HTMLDivElement, DonutChartProps>((props, ref) => {\n  const themeColorRange = useThemeColorRange();\n  const {\n    data = [],\n    category = 'value',\n    index = 'name',\n    colors = themeColorRange,\n    variant = 'donut',\n    valueFormatter = defaultValueFormatter,\n    label,\n    showLabel = true,\n    animationDuration = 900,\n    showAnimation = false,\n    showTooltip = true,\n    noDataText,\n    onValueChange,\n    customTooltip,\n    className,\n    width = '100%',\n    loading,\n    height = '10rem',\n    style,\n    customCategories,\n    donutLabel,\n    ...rest\n  } = props;\n  const { isDarkMode } = useThemeMode();\n  const CustomTooltip = customTooltip;\n  const isDonut = variant === 'donut';\n  const parsedLabelInput = parseLabelInput(label, valueFormatter, data, category);\n\n  const [activeIndex, setActiveIndex] = useState<number | undefined>();\n  const hasOnValueChange = !!onValueChange;\n\n  useEffect(() => {\n    if (isOnSeverSide) return;\n    const pieSectors = document.querySelectorAll('.recharts-pie-sector');\n    if (pieSectors) {\n      for (const sector of pieSectors) {\n        sector.setAttribute('style', 'outline: none');\n      }\n    }\n  }, [activeIndex]);\n\n  if (loading || !data) return <Skeleton height={height} width={width} />;\n\n  const onShapeClick = (data: any, index: number, event: MouseEvent) => {\n    event.stopPropagation();\n\n    if (!hasOnValueChange) return;\n    if (activeIndex === index) {\n      setActiveIndex(undefined);\n      onValueChange?.(null);\n    } else {\n      setActiveIndex(index);\n      onValueChange?.({\n        eventType: 'slice',\n        ...data.payload.payload,\n      });\n    }\n  };\n\n  const parseData = (data: any[], colors: string[]) =>\n    data.map((dataPoint: any, idx: number) => {\n      const baseColor = idx < colors.length ? colors[idx] : cssVar.colorPrimary;\n      return {\n        ...dataPoint,\n        className: cx(css`\n          fill: ${baseColor ?? cssVar.colorPrimary};\n        `),\n        color: baseColor,\n        fill: '',\n      };\n    });\n\n  return (\n    <Flexbox\n      className={className}\n      height={height}\n      ref={ref}\n      style={{ position: 'relative', ...style }}\n      width={width}\n      {...rest}\n    >\n      <ResponsiveContainer>\n        {data?.length ? (\n          <ReChartsDonutChart\n            margin={{ bottom: 0, left: 0, right: 0, top: 0 }}\n            onClick={\n              hasOnValueChange && activeIndex\n                ? () => {\n                    setActiveIndex(undefined);\n                    onValueChange?.(null);\n                  }\n                : undefined\n            }\n          >\n            {showLabel && isDonut ? (\n              <text\n                className={cx(styles.strongLabel, styles.emphasis)}\n                dominantBaseline=\"middle\"\n                textAnchor=\"middle\"\n                x=\"50%\"\n                y=\"50%\"\n              >\n                {donutLabel ||\n                  (typeof activeIndex === 'number'\n                    ? valueFormatter(data?.[activeIndex as any]?.[category])\n                    : parsedLabelInput)}\n              </text>\n            ) : null}\n            <Pie\n              activeIndex={activeIndex}\n              animationDuration={animationDuration}\n              cx=\"50%\"\n              cy=\"50%\"\n              data={parseData(data, colors)}\n              dataKey={category}\n              endAngle={-270}\n              inactiveShape={renderInactiveShape}\n              innerRadius={isDonut ? '75%' : '0%'}\n              isAnimationActive={showAnimation}\n              nameKey={index}\n              onClick={onShapeClick}\n              outerRadius=\"100%\"\n              startAngle={90}\n              stroke=\"\"\n              strokeLinejoin=\"round\"\n              style={{\n                cursor: onValueChange ? 'pointer' : undefined,\n                outline: 'none',\n                stroke: cssVar.colorBgContainer,\n              }}\n            />\n            {isDonut && (\n              <Pie\n                activeIndex={activeIndex}\n                animationDuration={animationDuration}\n                cx=\"50%\"\n                cy=\"50%\"\n                data={parseData(\n                  [{ [category]: 1 }],\n                  [\n                    isDarkMode\n                      ? 'color-mix(in srgb, #000000 33%, transparent)'\n                      : 'color-mix(in srgb, #000000 10%, transparent)',\n                  ],\n                )}\n                dataKey={category}\n                endAngle={-270}\n                inactiveShape={renderInactiveShape}\n                innerRadius={isDonut ? '75%' : '0%'}\n                isAnimationActive={false}\n                nameKey={index}\n                outerRadius=\"80%\"\n                startAngle={90}\n                stroke=\"\"\n                strokeLinejoin=\"round\"\n                style={{\n                  outline: 'none',\n                  pointerEvents: 'none',\n                }}\n              />\n            )}\n            <Tooltip\n              content={\n                showTooltip\n                  ? ({ active, payload }) =>\n                      CustomTooltip ? (\n                        <CustomTooltip\n                          active={active}\n                          customCategories={customCategories}\n                          label={payload?.[0]?.name}\n                          payload={payload?.map((payloadItem) => ({\n                            ...payloadItem,\n                            color: payload?.[0]?.payload?.color ?? cssVar.colorPrimary,\n                          }))}\n                          valueFormatter={valueFormatter}\n                        />\n                      ) : (\n                        <DonutChartTooltip\n                          active={active}\n                          customCategories={customCategories}\n                          payload={payload}\n                          valueFormatter={valueFormatter}\n                        />\n                      )\n                  : undefined\n              }\n              isAnimationActive={false}\n              wrapperStyle={{ outline: 'none' }}\n            />\n          </ReChartsDonutChart>\n        ) : (\n          <NoData noDataText={noDataText} />\n        )}\n      </ResponsiveContainer>\n    </Flexbox>\n  );\n});\n\nDonutChart.displayName = 'DonutChart';\n\nexport default DonutChart;\n"],"mappings":"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"}