@yamada-ui/charts 2.0.0-next-20240706062355 → 2.0.0-next-20240716070106
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/chart.types.d.mts +2 -2
- package/dist/chart.types.d.ts +2 -2
- package/dist/chart.types.js.map +1 -1
- package/dist/chunk-CPXE3PV4.mjs +84 -0
- package/dist/chunk-CPXE3PV4.mjs.map +1 -0
- package/dist/{chunk-YGKNNA34.mjs → chunk-ELXW3EQE.mjs} +35 -19
- package/dist/chunk-ELXW3EQE.mjs.map +1 -0
- package/dist/{chunk-P4MMHTAP.mjs → chunk-VVR3DSUX.mjs} +8 -5
- package/dist/chunk-VVR3DSUX.mjs.map +1 -0
- package/dist/{chunk-F2RBOLDY.mjs → chunk-XORRW2KT.mjs} +8 -5
- package/dist/chunk-XORRW2KT.mjs.map +1 -0
- package/dist/donut-chart.js +137 -43
- package/dist/donut-chart.js.map +1 -1
- package/dist/donut-chart.mjs +3 -2
- package/dist/index.js +161 -64
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4 -3
- package/dist/pie-chart-label.d.mts +40 -0
- package/dist/pie-chart-label.d.ts +40 -0
- package/dist/pie-chart-label.js +108 -0
- package/dist/pie-chart-label.js.map +1 -0
- package/dist/pie-chart-label.mjs +10 -0
- package/dist/pie-chart-label.mjs.map +1 -0
- package/dist/pie-chart.js +137 -43
- package/dist/pie-chart.js.map +1 -1
- package/dist/pie-chart.mjs +3 -2
- package/dist/use-pie-chart.d.mts +12 -5
- package/dist/use-pie-chart.d.ts +12 -5
- package/dist/use-pie-chart.js +113 -24
- package/dist/use-pie-chart.js.map +1 -1
- package/dist/use-pie-chart.mjs +2 -1
- package/package.json +2 -2
- package/dist/chunk-F2RBOLDY.mjs.map +0 -1
- package/dist/chunk-P4MMHTAP.mjs.map +0 -1
- package/dist/chunk-YGKNNA34.mjs.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/use-pie-chart.ts","../src/chart-utils.ts","../src/rechart-properties.ts"],"sourcesContent":["import { useTheme, type CSSUIObject, type CSSUIProps } from \"@yamada-ui/core\"\nimport { cx, type Dict } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef } from \"react\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport { getClassName, getComponentProps } from \"./chart-utils\"\nimport type {\n CellProps,\n ChartPropGetter,\n PieChartProps,\n PieProps,\n RequiredChartPropGetter,\n} from \"./chart.types\"\nimport { pieChartProperties, pieProperties } from \"./rechart-properties\"\n\nexport type UsePieChartOptions = {\n /**\n * Chart data.\n */\n data: CellProps[]\n /**\n * Props passed down to recharts `PieChart` component.\n */\n chartProps?: PieChartProps\n /**\n * Props for the pie.\n */\n pieProps?: Partial<PieProps>\n /**\n * Props for the cell.\n */\n cellProps?: Partial<CellProps>\n /**\n * Determines whether each segment should have associated label.\n *\n * @default false\n */\n withLabels?: boolean\n /**\n * Determines whether segments labels should have lines that connect the segment with the label.\n *\n * @default false\n */\n withLabelLines?: boolean\n /**\n * Controls innerRadius of the chart segments.\n * If it is a number, it is the width of the radius.\n * For example, `60` means the radius is `60px` and the diameter is `120px`.\n *\n * @default '0%'\n */\n innerRadius?: number | string\n /**\n * Controls thickness of the chart segments. If it is a number, it is calculated as px.\n * If it is a number, it is the width of the radius.\n * For example, `60` means the radius is `60px` and the diameter is `120px`.\n *\n * @default '80%'\n */\n outerRadius?: number | string\n /**\n * Controls padding between segments.\n *\n * @default 0\n */\n paddingAngle?: number\n /**\n * Stroke width for the chart pies.\n *\n * @default 1\n */\n strokeWidth?: number\n /**\n * Controls angle at which chart starts.\n *\n * @default 90\n */\n startAngle?: number\n /**\n * Controls angle at which chart ends.\n *\n * @default -270\n */\n endAngle?: number\n /**\n * Controls fill opacity of all pies.\n *\n * @default 1\n */\n fillOpacity?: number | [number, number]\n /**\n * A function to format values inside the tooltip.\n */\n valueFormatter?: (value: number) => string\n}\n\ntype UsePieChartProps = UsePieChartOptions & {\n styles: Dict<CSSUIObject>\n}\n\nexport const usePieChart = ({\n data,\n withLabels = false,\n withLabelLines = false,\n strokeWidth = 1,\n fillOpacity = 1,\n innerRadius = \"0%\",\n outerRadius = withLabels ? \"80%\" : \"100%\",\n paddingAngle = 0,\n startAngle = 90,\n endAngle = -270,\n styles,\n ...rest\n}: UsePieChartProps) => {\n const { theme } = useTheme()\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null)\n const shouldHighlight = highlightedArea !== null\n const { dimCell, ...computedCellProps } = rest.cellProps ?? {}\n const {\n activeShape = {},\n inactiveShape = {},\n label,\n labelLine,\n ...computedPieProps\n } = rest.pieProps ?? {}\n\n const cellColors: CSSUIProps[\"var\"] = useMemo(\n () =>\n data.map(({ color }, index) => ({\n __prefix: \"ui\",\n name: `cell-${index}`,\n token: \"colors\",\n value: color ?? \"transparent\",\n })),\n [data],\n )\n\n const pieVars: CSSUIProps[\"var\"] = useMemo(\n () =>\n [\n ...cellColors,\n { __prefix: \"ui\", name: \"fill-opacity\", value: fillOpacity },\n ] as Required<CSSUIProps>[\"var\"],\n [fillOpacity, cellColors],\n )\n\n const [chartProps, chartClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [rest.chartProps ?? {}, pieChartProperties],\n styles.chart,\n )(theme),\n [rest.chartProps, styles.chart, theme],\n )\n\n const [pieProps, pieClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [computedPieProps, pieProperties],\n styles.pie,\n )(theme),\n [computedPieProps, styles.pie, theme],\n )\n\n const cellClassName = useMemo(() => {\n const resolvedCellProps = {\n fillOpacity: \"var(--ui-fill-opacity)\",\n ...styles.cell,\n ...computedCellProps,\n }\n\n return getClassName(resolvedCellProps)(theme)\n }, [computedCellProps, styles.cell, theme])\n\n const dimCellClassName = useMemo(() => {\n const resolvedDimCell = { ...styles.dimCell, ...dimCell }\n\n return getClassName(resolvedDimCell)(theme)\n }, [dimCell, styles.dimCell, theme])\n\n const activeShapeProps = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [activeShape, pieProperties],\n styles.activeShape,\n )(theme, true),\n [activeShape, styles.activeShape, theme],\n )\n\n const inactiveShapeProps = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [inactiveShape, pieProperties],\n styles.inactiveShape,\n )(theme, true),\n [inactiveShape, styles.inactiveShape, theme],\n )\n\n const labelClassName = useMemo(\n () => getClassName({ ...styles.label, ...label })(theme),\n [label, styles.label, theme],\n )\n\n const labelLineClassName = useMemo(\n () => getClassName({ ...styles.labelLine, ...labelLine })(theme),\n [labelLine, styles.labelLine, theme],\n )\n\n const cellPropList = useMemo(\n () =>\n data.map((props, index) => {\n const { name, dimCell = {}, ...computedProps } = props\n const color = `var(--ui-cell-${index})`\n const dimmed = shouldHighlight && highlightedArea !== name\n const resolvedProps = {\n ...computedProps,\n ...(dimmed ? dimCell : {}),\n }\n\n const className = getClassName(\n {\n cellClassName,\n ...resolvedProps,\n },\n dimmed ? dimCellClassName : undefined,\n )(theme)\n\n return {\n color,\n className,\n }\n }),\n [\n cellClassName,\n data,\n dimCellClassName,\n highlightedArea,\n shouldHighlight,\n theme,\n ],\n )\n\n const getPieChartProps: ChartPropGetter<\n \"div\",\n ComponentPropsWithoutRef<typeof Recharts.PieChart>,\n ComponentPropsWithoutRef<typeof Recharts.PieChart>\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => ({\n ref,\n className: cx(className, chartClassName),\n ...props,\n ...chartProps,\n }),\n [chartProps, chartClassName],\n )\n\n const getPieProps: RequiredChartPropGetter<\n \"div\",\n Partial<Recharts.PieProps> & {\n labelClassName: string\n labelLineClassName: string\n },\n Omit<Recharts.PieProps, \"ref\">\n > = useCallback(\n (\n {\n className,\n labelClassName: labelClassNameProp,\n labelLineClassName: labelLineClassNameProp,\n ...props\n },\n ref = null,\n ) => ({\n ref,\n className: cx(className, pieClassName),\n dataKey: \"value\",\n data,\n rootTabIndex: -1,\n outerRadius,\n innerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n isAnimationActive: false,\n label: withLabels\n ? { className: cx(labelClassNameProp, labelClassName) }\n : false,\n labelLine: withLabelLines\n ? { className: cx(labelLineClassNameProp, labelLineClassName) }\n : false,\n activeShape: activeShapeProps,\n inactiveShape: inactiveShapeProps,\n ...(props as Omit<Recharts.PieProps, \"dataKey\">),\n ...pieProps,\n }),\n [\n pieClassName,\n data,\n outerRadius,\n innerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n withLabels,\n labelClassName,\n withLabelLines,\n labelLineClassName,\n activeShapeProps,\n inactiveShapeProps,\n pieProps,\n ],\n )\n\n const getCellProps: RequiredChartPropGetter<\n \"div\",\n Omit<Recharts.CellProps, \"ref\"> & { index: number },\n Omit<Recharts.CellProps, \"ref\">\n > = useCallback(\n ({ index, className: classNameProp, ...props }, ref = null) => {\n const { className, color } = cellPropList[index]\n\n return {\n ref,\n className: cx(classNameProp, className),\n fill: color,\n stroke: color,\n strokeWidth,\n ...(props as Recharts.CellProps),\n }\n },\n [cellPropList, strokeWidth],\n )\n\n return {\n pieVars,\n getPieProps,\n getPieChartProps,\n getCellProps,\n setHighlightedArea,\n }\n}\n\nexport type UsePieChartReturn = ReturnType<typeof usePieChart>\n","import type { StyledTheme } from \"@yamada-ui/core\"\nimport { getCSS } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { cx, isString, splitObject } from \"@yamada-ui/utils\"\n\nexport const getClassName =\n (...styles: (Dict | string | undefined)[]) =>\n (theme: StyledTheme) =>\n cx(\n ...styles.map((style) =>\n isString(style) ? style : getCSS(style)(theme),\n ),\n )\n\nexport const getComponentProps =\n <T extends Dict, K extends keyof T>(\n [obj, keys]: [T, K[]],\n ...props: (Dict | string | undefined)[]\n ) =>\n <P extends boolean = false>(theme: StyledTheme, isContain?: P) => {\n const [pickedProps, omittedProps] = splitObject<T, K>(obj, keys)\n const className = getClassName(...props, omittedProps)(theme)\n\n return (\n !isContain ? [pickedProps, className] : { ...pickedProps, className }\n ) as P extends false\n ? [{ [P in K]: T[P] }, string]\n : { [P in K]: T[P] } & { className: string }\n }\n","import type { ComponentPropsWithoutRef } from \"react\"\nimport type * as Recharts from \"recharts\"\n\nexport const areaChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.AreaChart\n>)[] = [\n \"layout\",\n \"syncId\",\n \"syncMethod\",\n \"width\",\n \"height\",\n \"data\",\n \"margin\",\n \"stackOffset\",\n \"onClick\",\n \"onMouseEnter\",\n \"onMouseMove\",\n \"onMouseLeave\",\n]\n\nexport const barChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.BarChart\n>)[] = [\n \"layout\",\n \"syncId\",\n \"syncMethod\",\n \"width\",\n \"height\",\n \"data\",\n \"margin\",\n \"barCategoryGap\",\n \"barGap\",\n \"barSize\",\n \"maxBarSize\",\n \"stackOffset\",\n \"reverseStackOrder\",\n \"onClick\",\n \"onMouseEnter\",\n \"onMouseMove\",\n \"onMouseLeave\",\n]\n\nexport const lineChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.LineChart\n>)[] = [\n \"layout\",\n \"syncId\",\n \"syncMethod\",\n \"width\",\n \"height\",\n \"data\",\n \"margin\",\n \"onClick\",\n \"onMouseEnter\",\n \"onMouseMove\",\n \"onMouseLeave\",\n]\n\nexport const radarChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.RadarChart\n>)[] = [\n \"width\",\n \"height\",\n \"data\",\n \"cx\",\n \"cy\",\n \"startAngle\",\n \"endAngle\",\n \"innerRadius\",\n \"outerRadius\",\n \"margin\",\n \"onMouseEnter\",\n \"onClick\",\n]\n\nexport const pieChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.PieChart\n>)[] = [\"width\", \"height\", \"margin\", \"onClick\", \"onMouseEnter\", \"onMouseLeave\"]\n\nexport const referenceLineProperties: (keyof Recharts.ReferenceLineProps)[] = [\n \"xAxisId\",\n \"yAxisId\",\n \"x\",\n \"y\",\n \"ifOverflow\",\n \"viewBox\",\n \"xAxis\",\n \"yAxis\",\n \"label\",\n \"isFront\",\n \"strokeWidth\",\n \"segment\",\n]\n\nexport const containerProperties: (keyof Omit<\n Recharts.ResponsiveContainerProps,\n \"children\"\n>)[] = [\n \"aspect\",\n \"width\",\n \"height\",\n \"minWidth\",\n \"minHeight\",\n \"debounce\",\n \"onResize\",\n]\n\nexport const gridProperties: (keyof Recharts.CartesianGridProps)[] = [\n \"x\",\n \"y\",\n \"width\",\n \"height\",\n \"horizontal\",\n \"vertical\",\n \"horizontalPoints\",\n \"horizontalCoordinatesGenerator\",\n \"verticalPoints\",\n \"verticalCoordinatesGenerator\",\n \"fill\",\n \"fillOpacity\",\n \"strokeDasharray\",\n]\n\nexport const xAxisProperties: (keyof Recharts.XAxisProps)[] = [\n \"hide\",\n \"dataKey\",\n \"xAxisId\",\n \"width\",\n \"height\",\n \"orientation\",\n \"type\",\n \"allowDecimals\",\n \"allowDataOverflow\",\n \"allowDuplicatedCategory\",\n \"angle\",\n \"tickCount\",\n \"domain\",\n \"includeHidden\",\n \"interval\",\n \"padding\",\n \"minTickGap\",\n \"axisLine\",\n \"tickLine\",\n \"tickSize\",\n \"tickFormatter\",\n \"ticks\",\n \"tick\",\n \"mirror\",\n \"reversed\",\n \"label\",\n \"scale\",\n \"unit\",\n \"name\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"tickMargin\",\n]\n\nexport const yAxisProperties: (keyof Recharts.YAxisProps)[] = [\n \"hide\",\n \"dataKey\",\n \"yAxisId\",\n \"width\",\n \"height\",\n \"orientation\",\n \"type\",\n \"tickCount\",\n \"domain\",\n \"includeHidden\",\n \"interval\",\n \"padding\",\n \"minTickGap\",\n \"allowDecimals\",\n \"allowDataOverflow\",\n \"allowDuplicatedCategory\",\n \"axisLine\",\n \"tickLine\",\n \"tickSize\",\n \"tickFormatter\",\n \"ticks\",\n \"tick\",\n \"mirror\",\n \"reversed\",\n \"label\",\n \"scale\",\n \"unit\",\n \"name\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"tickMargin\",\n]\n\nexport const legendProperties: (keyof Omit<Recharts.LegendProps, \"ref\">)[] = [\n \"width\",\n \"height\",\n \"layout\",\n \"align\",\n \"verticalAlign\",\n \"iconSize\",\n \"iconType\",\n \"payload\",\n \"chartWidth\",\n \"chartHeight\",\n \"margin\",\n \"content\",\n \"formatter\",\n \"wrapperStyle\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const tooltipProperties: (keyof Recharts.TooltipProps<any, any>)[] = [\n \"offset\",\n \"filterNull\",\n \"itemStyle\",\n \"wrapperStyle\",\n \"contentStyle\",\n \"labelStyle\",\n \"cursor\",\n \"viewBox\",\n \"allowEscapeViewBox\",\n \"active\",\n \"position\",\n \"coordinate\",\n \"payload\",\n \"label\",\n \"content\",\n \"formatter\",\n \"labelFormatter\",\n \"itemSorter\",\n \"isAnimationActive\",\n \"animationDuration\",\n \"animationEasing\",\n]\n\nexport const areaProperties: (keyof Omit<Recharts.AreaProps, \"ref\">)[] = [\n \"type\",\n \"dataKey\",\n \"xAxisId\",\n \"yAxisId\",\n \"legendType\",\n \"dot\",\n \"activeDot\",\n \"label\",\n \"stroke\",\n \"strokeWidth\",\n \"layout\",\n \"baseLine\",\n \"points\",\n \"stackId\",\n \"connectNulls\",\n \"unit\",\n \"name\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"id\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const barProperties: (keyof Omit<Recharts.BarProps, \"ref\">)[] = [\n \"layout\",\n \"dataKey\",\n \"xAxisId\",\n \"yAxisId\",\n \"legendType\",\n \"label\",\n \"data\",\n \"barSize\",\n \"maxBarSize\",\n \"minPointSize\",\n \"background\",\n \"shape\",\n \"activeBar\",\n \"stackId\",\n \"unit\",\n \"name\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"id\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"radius\",\n]\n\nexport const radarProperties: (keyof Omit<Recharts.RadarProps, \"ref\">)[] = [\n \"dataKey\",\n \"points\",\n \"shape\",\n \"dot\",\n \"activeDot\",\n \"legendType\",\n \"label\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n]\n\nexport const lineProperties: (keyof Omit<Recharts.LineProps, \"ref\">)[] = [\n \"type\",\n \"dataKey\",\n \"xAxisId\",\n \"yAxisId\",\n \"legendType\",\n \"dot\",\n \"activeDot\",\n \"label\",\n \"hide\",\n \"points\",\n \"stroke\",\n \"strokeWidth\",\n \"layout\",\n \"connectNulls\",\n \"unit\",\n \"name\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"id\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"strokeDasharray\",\n]\n\nexport const pieProperties: (keyof Omit<Recharts.PieProps, \"ref\">)[] = [\n \"cx\",\n \"cy\",\n \"innerRadius\",\n \"outerRadius\",\n \"startAngle\",\n \"endAngle\",\n \"minAngle\",\n \"paddingAngle\",\n \"nameKey\",\n \"dataKey\",\n \"legendType\",\n \"label\",\n \"labelLine\",\n \"data\",\n \"activeIndex\",\n \"activeShape\",\n \"inactiveShape\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const dotProperties: (keyof Omit<Recharts.DotProps, \"ref\">)[] = [\n \"cx\",\n \"cy\",\n \"r\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const polarGridProperties: (keyof Recharts.PolarGridProps)[] = [\n \"cx\",\n \"cy\",\n \"innerRadius\",\n \"outerRadius\",\n \"polarAngles\",\n \"polarRadius\",\n \"gridType\",\n]\n\nexport const polarAngleAxisProperties: (keyof Recharts.PolarAngleAxisProps)[] =\n [\n \"dataKey\",\n \"cx\",\n \"cy\",\n \"radius\",\n \"axisLine\",\n \"axisLineType\",\n \"tickLine\",\n \"tickSize\",\n \"tick\",\n \"ticks\",\n \"orient\",\n \"tickFormatter\",\n \"type\",\n \"allowDuplicatedCategory\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n ]\n\nexport const polarRadiusAxisProperties: (keyof Recharts.PolarRadiusAxisProps)[] =\n [\n \"angle\",\n \"type\",\n \"allowDuplicatedCategory\",\n \"cx\",\n \"cy\",\n \"domain\",\n \"reversed\",\n \"label\",\n \"orientation\",\n \"axisLine\",\n \"tick\",\n \"tickSize\",\n \"tickFormatter\",\n \"tickCount\",\n \"scale\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n ]\n\nexport const labelProperties: (keyof Recharts.LabelProps)[] = [\n \"viewBox\",\n \"formatter\",\n \"value\",\n \"position\",\n \"offset\",\n \"children\",\n \"content\",\n \"id\",\n]\n"],"mappings":"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","names":["import_core","import_utils","_a","dimCell"]}
|
1
|
+
{"version":3,"sources":["../src/use-pie-chart.ts","../src/chart-utils.ts","../src/pie-chart-label.tsx","../src/rechart-properties.ts"],"sourcesContent":["import { useTheme, type CSSUIObject, type CSSUIProps } from \"@yamada-ui/core\"\nimport { cx, type Dict } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef } from \"react\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport { getClassName, getComponentProps } from \"./chart-utils\"\nimport type {\n CellProps,\n ChartPropGetter,\n PieChartProps,\n PieProps,\n RequiredChartPropGetter,\n} from \"./chart.types\"\nimport { pieChartLabel, pieChartLabelLine } from \"./pie-chart-label\"\nimport { pieChartProperties, pieProperties } from \"./rechart-properties\"\n\nexport type UsePieChartOptions = {\n /**\n * Chart data.\n */\n data: CellProps[]\n /**\n * Props passed down to recharts `PieChart` component.\n */\n chartProps?: PieChartProps\n /**\n * Props for the pie.\n */\n pieProps?: Partial<PieProps>\n /**\n * Props for the cell.\n */\n cellProps?: Partial<CellProps>\n /**\n * Determines whether each segment should have associated label.\n *\n * @default false\n */\n withLabels?: boolean\n /**\n * Determines whether segments labels should have lines that connect the segment with the label.\n *\n * @default false\n */\n withLabelLines?: boolean\n /**\n * Distance between chart and label.\n */\n labelOffset?: number\n /**\n * Determines whether labels should be displayed as percentages.\n *\n * @default false\n */\n isParcent?: boolean\n /**\n * Controls innerRadius of the chart segments.\n * If it is a number, it is the width of the radius.\n * For example, `60` means the radius is `60px` and the diameter is `120px`.\n *\n * @default '0%'\n */\n innerRadius?: number | string\n /**\n * Controls thickness of the chart segments. If it is a number, it is calculated as px.\n * If it is a number, it is the width of the radius.\n * For example, `60` means the radius is `60px` and the diameter is `120px`.\n *\n * @default '80%'\n */\n outerRadius?: number | string\n /**\n * Controls padding between segments.\n *\n * @default 0\n */\n paddingAngle?: number\n /**\n * Stroke width for the chart pies.\n *\n * @default 1\n */\n strokeWidth?: number\n /**\n * Controls angle at which chart starts.\n *\n * @default 90\n */\n startAngle?: number\n /**\n * Controls angle at which chart ends.\n *\n * @default -270\n */\n endAngle?: number\n /**\n * Controls fill opacity of all pies.\n *\n * @default 1\n */\n fillOpacity?: number | [number, number]\n /**\n * A function to format values inside the tooltip.\n */\n valueFormatter?: (value: number) => string\n}\n\ntype UsePieChartProps = UsePieChartOptions & {\n styles: Dict<CSSUIObject>\n}\n\nexport const usePieChart = ({\n data,\n withLabels = false,\n withLabelLines = false,\n labelOffset,\n isParcent = false,\n strokeWidth = 1,\n fillOpacity = 1,\n innerRadius = \"0%\",\n outerRadius = withLabels ? \"80%\" : \"100%\",\n paddingAngle = 0,\n startAngle = 90,\n endAngle = -270,\n valueFormatter,\n styles,\n ...rest\n}: UsePieChartProps) => {\n const { theme } = useTheme()\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null)\n const shouldHighlight = highlightedArea !== null\n const { dimCell, ...computedCellProps } = rest.cellProps ?? {}\n const {\n activeShape = {},\n inactiveShape = {},\n label: labelProps,\n labelLine: labelLineProps,\n ...computedPieProps\n } = rest.pieProps ?? {}\n\n const cellColors: CSSUIProps[\"var\"] = useMemo(\n () =>\n data.map(({ color }, index) => ({\n __prefix: \"ui\",\n name: `cell-${index}`,\n token: \"colors\",\n value: color ?? \"transparent\",\n })),\n [data],\n )\n\n const pieVars: CSSUIProps[\"var\"] = useMemo(\n () =>\n [\n ...cellColors,\n { __prefix: \"ui\", name: \"fill-opacity\", value: fillOpacity },\n ] as Required<CSSUIProps>[\"var\"],\n [fillOpacity, cellColors],\n )\n\n const [chartProps, chartClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [rest.chartProps ?? {}, pieChartProperties],\n styles.chart,\n )(theme),\n [rest.chartProps, styles.chart, theme],\n )\n\n const [pieProps, pieClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [computedPieProps, pieProperties],\n styles.pie,\n )(theme),\n [computedPieProps, styles.pie, theme],\n )\n\n const cellClassName = useMemo(() => {\n const resolvedCellProps = {\n fillOpacity: \"var(--ui-fill-opacity)\",\n ...styles.cell,\n ...computedCellProps,\n }\n\n return getClassName(resolvedCellProps)(theme)\n }, [computedCellProps, styles.cell, theme])\n\n const dimCellClassName = useMemo(() => {\n const resolvedDimCell = { ...styles.dimCell, ...dimCell }\n\n return getClassName(resolvedDimCell)(theme)\n }, [dimCell, styles.dimCell, theme])\n\n const activeShapeProps = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [activeShape, pieProperties],\n styles.activeShape,\n )(theme, true),\n [activeShape, styles.activeShape, theme],\n )\n\n const inactiveShapeProps = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [inactiveShape, pieProperties],\n styles.inactiveShape,\n )(theme, true),\n [inactiveShape, styles.inactiveShape, theme],\n )\n\n const label: Recharts.PieLabel = useCallback(\n (props: any) =>\n pieChartLabel({\n labelOffset,\n isParcent,\n labelProps,\n valueFormatter,\n styles: styles.label,\n ...props,\n }),\n [isParcent, labelOffset, labelProps, styles.label, valueFormatter],\n )\n\n const labelLine = useCallback(\n (props: any) => {\n return pieChartLabelLine({\n labelOffset,\n labelLineProps,\n styles: styles.labelLine,\n ...props,\n })\n },\n [labelLineProps, labelOffset, styles.labelLine],\n )\n\n const cellPropList = useMemo(\n () =>\n data.map((props, index) => {\n const { name, dimCell = {}, ...computedProps } = props\n const color = `var(--ui-cell-${index})`\n const dimmed = shouldHighlight && highlightedArea !== name\n const resolvedProps = {\n ...computedProps,\n ...(dimmed ? dimCell : {}),\n }\n\n const className = getClassName(\n {\n cellClassName,\n ...resolvedProps,\n },\n dimmed ? dimCellClassName : undefined,\n )(theme)\n\n return {\n color,\n className,\n }\n }),\n [\n cellClassName,\n data,\n dimCellClassName,\n highlightedArea,\n shouldHighlight,\n theme,\n ],\n )\n\n const getPieChartProps: ChartPropGetter<\n \"div\",\n ComponentPropsWithoutRef<typeof Recharts.PieChart>,\n ComponentPropsWithoutRef<typeof Recharts.PieChart>\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => ({\n ref,\n className: cx(className, chartClassName),\n ...props,\n ...chartProps,\n }),\n [chartProps, chartClassName],\n )\n\n const getPieProps: RequiredChartPropGetter<\n \"div\",\n Partial<Recharts.PieProps>,\n Omit<Recharts.PieProps, \"ref\">\n > = useCallback(\n ({ className, ...props }, ref = null) => ({\n ref,\n className: cx(className, pieClassName),\n dataKey: \"value\",\n data,\n rootTabIndex: -1,\n outerRadius,\n innerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n isAnimationActive: false,\n label: withLabels ? label : false,\n labelLine: withLabelLines ? labelLine : false,\n activeShape: activeShapeProps,\n inactiveShape: inactiveShapeProps,\n ...(props as Omit<Recharts.PieProps, \"dataKey\">),\n ...pieProps,\n }),\n [\n pieClassName,\n data,\n outerRadius,\n innerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n withLabels,\n label,\n withLabelLines,\n labelLine,\n activeShapeProps,\n inactiveShapeProps,\n pieProps,\n ],\n )\n\n const getCellProps: RequiredChartPropGetter<\n \"div\",\n Omit<Recharts.CellProps, \"ref\"> & { index: number },\n Omit<Recharts.CellProps, \"ref\">\n > = useCallback(\n ({ index, className: classNameProp, ...props }, ref = null) => {\n const { className, color } = cellPropList[index]\n\n return {\n ref,\n className: cx(classNameProp, className),\n fill: color,\n stroke: color,\n strokeWidth,\n ...(props as Recharts.CellProps),\n }\n },\n [cellPropList, strokeWidth],\n )\n\n return {\n pieVars,\n getPieProps,\n getPieChartProps,\n getCellProps,\n setHighlightedArea,\n }\n}\n\nexport type UsePieChartReturn = ReturnType<typeof usePieChart>\n","import type { StyledTheme } from \"@yamada-ui/core\"\nimport { getCSS } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { cx, isString, splitObject } from \"@yamada-ui/utils\"\n\nexport const getClassName =\n (...styles: (Dict | string | undefined)[]) =>\n (theme: StyledTheme) =>\n cx(\n ...styles.map((style) =>\n isString(style) ? style : getCSS(style)(theme),\n ),\n )\n\nexport const getComponentProps =\n <T extends Dict, K extends keyof T>(\n [obj, keys]: [T, K[]],\n ...props: (Dict | string | undefined)[]\n ) =>\n <P extends boolean = false>(theme: StyledTheme, isContain?: P) => {\n const [pickedProps, omittedProps] = splitObject<T, K>(obj, keys)\n const className = getClassName(...props, omittedProps)(theme)\n\n return (\n !isContain ? [pickedProps, className] : { ...pickedProps, className }\n ) as P extends false\n ? [{ [P in K]: T[P] }, string]\n : { [P in K]: T[P] } & { className: string }\n }\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { cx, isUndefined } from \"@yamada-ui/utils\"\n\nconst RADIAN = Math.PI / 180\nconst DEFAULT_LABEL_OFFSET = 22\n\nexport type PieChartLabelProps = {\n className?: string\n cx?: number\n cy?: number\n midAngle?: number\n innerRadius?: number\n outerRadius?: number\n middleRadius?: number\n percent?: number\n value?: number\n labelOffset?: number\n isParcent?: boolean\n labelProps?: HTMLUIProps<\"text\">\n valueFormatter?: (value: number) => string\n styles: Dict<CSSUIObject>\n}\n\nexport const pieChartLabel: (props: PieChartLabelProps) => React.ReactNode = ({\n className: cellClassName,\n cx: cxProp = 0,\n cy: cyProp = 0,\n midAngle = 0,\n innerRadius = 0,\n outerRadius = 0,\n middleRadius = 0,\n percent = 0,\n value = 0,\n labelOffset: labelOffsetProp,\n isParcent,\n labelProps,\n valueFormatter,\n styles,\n}) => {\n const labelOffset =\n labelOffsetProp ?? (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET\n\n const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN)\n const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN)\n\n const textAnchor = x > cxProp ? \"start\" : x < cxProp ? \"end\" : \"middle\"\n const displayLabel = () => {\n if (isParcent) {\n return (\n parseFloat((percent * 100).toFixed(0)) > 0 &&\n `${(percent * 100).toFixed(0)}%`\n )\n } else if (!isUndefined(valueFormatter)) {\n return valueFormatter(value)\n } else {\n return value\n }\n }\n\n return (\n <ui.text\n className={cx(cellClassName, \"ui-chart__label\")}\n x={x}\n y={y}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n __css={styles}\n {...labelProps}\n >\n {displayLabel()}\n </ui.text>\n )\n}\n\ntype Point = { x: number; y: number }\n\nexport type PieChartLabelLineProps = {\n className?: string\n cx?: number\n cy?: number\n innerRadius?: number\n midAngle?: number\n middleRadius?: number\n outerRadius?: number\n points?: Array<Point>\n labelOffset?: number\n labelLineProps?: HTMLUIProps<\"path\">\n styles: Dict<CSSUIObject>\n}\n\nexport const pieChartLabelLine: (\n props: PieChartLabelLineProps,\n) => React.ReactElement<SVGElement> = ({\n className: cellClassName,\n cx: cxProp = 0,\n cy: cyProp = 0,\n innerRadius = 0,\n midAngle = 0,\n middleRadius = 0,\n outerRadius = 0,\n points = [{ x: 0, y: 0 }],\n labelOffset: labelOffsetProp,\n labelLineProps,\n styles,\n}) => {\n const labelOffset =\n labelOffsetProp ?? (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET\n\n const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN)\n const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN)\n\n const d: string = `M ${points[0].x} ${points[0].y} L ${x} ${y}`\n\n return (\n <ui.path\n className={cx(cellClassName, \"ui-chart__label-line\")}\n d={d}\n __css={styles}\n {...labelLineProps}\n />\n )\n}\n","import type { ComponentPropsWithoutRef } from \"react\"\nimport type * as Recharts from \"recharts\"\n\nexport const areaChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.AreaChart\n>)[] = [\n \"layout\",\n \"syncId\",\n \"syncMethod\",\n \"width\",\n \"height\",\n \"data\",\n \"margin\",\n \"stackOffset\",\n \"onClick\",\n \"onMouseEnter\",\n \"onMouseMove\",\n \"onMouseLeave\",\n]\n\nexport const barChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.BarChart\n>)[] = [\n \"layout\",\n \"syncId\",\n \"syncMethod\",\n \"width\",\n \"height\",\n \"data\",\n \"margin\",\n \"barCategoryGap\",\n \"barGap\",\n \"barSize\",\n \"maxBarSize\",\n \"stackOffset\",\n \"reverseStackOrder\",\n \"onClick\",\n \"onMouseEnter\",\n \"onMouseMove\",\n \"onMouseLeave\",\n]\n\nexport const lineChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.LineChart\n>)[] = [\n \"layout\",\n \"syncId\",\n \"syncMethod\",\n \"width\",\n \"height\",\n \"data\",\n \"margin\",\n \"onClick\",\n \"onMouseEnter\",\n \"onMouseMove\",\n \"onMouseLeave\",\n]\n\nexport const radarChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.RadarChart\n>)[] = [\n \"width\",\n \"height\",\n \"data\",\n \"cx\",\n \"cy\",\n \"startAngle\",\n \"endAngle\",\n \"innerRadius\",\n \"outerRadius\",\n \"margin\",\n \"onMouseEnter\",\n \"onClick\",\n]\n\nexport const pieChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.PieChart\n>)[] = [\"width\", \"height\", \"margin\", \"onClick\", \"onMouseEnter\", \"onMouseLeave\"]\n\nexport const referenceLineProperties: (keyof Recharts.ReferenceLineProps)[] = [\n \"xAxisId\",\n \"yAxisId\",\n \"x\",\n \"y\",\n \"ifOverflow\",\n \"viewBox\",\n \"xAxis\",\n \"yAxis\",\n \"label\",\n \"isFront\",\n \"strokeWidth\",\n \"segment\",\n]\n\nexport const containerProperties: (keyof Omit<\n Recharts.ResponsiveContainerProps,\n \"children\"\n>)[] = [\n \"aspect\",\n \"width\",\n \"height\",\n \"minWidth\",\n \"minHeight\",\n \"debounce\",\n \"onResize\",\n]\n\nexport const gridProperties: (keyof Recharts.CartesianGridProps)[] = [\n \"x\",\n \"y\",\n \"width\",\n \"height\",\n \"horizontal\",\n \"vertical\",\n \"horizontalPoints\",\n \"horizontalCoordinatesGenerator\",\n \"verticalPoints\",\n \"verticalCoordinatesGenerator\",\n \"fill\",\n \"fillOpacity\",\n \"strokeDasharray\",\n]\n\nexport const xAxisProperties: (keyof Recharts.XAxisProps)[] = [\n \"hide\",\n \"dataKey\",\n \"xAxisId\",\n \"width\",\n \"height\",\n \"orientation\",\n \"type\",\n \"allowDecimals\",\n \"allowDataOverflow\",\n \"allowDuplicatedCategory\",\n \"angle\",\n \"tickCount\",\n \"domain\",\n \"includeHidden\",\n \"interval\",\n \"padding\",\n \"minTickGap\",\n \"axisLine\",\n \"tickLine\",\n \"tickSize\",\n \"tickFormatter\",\n \"ticks\",\n \"tick\",\n \"mirror\",\n \"reversed\",\n \"label\",\n \"scale\",\n \"unit\",\n \"name\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"tickMargin\",\n]\n\nexport const yAxisProperties: (keyof Recharts.YAxisProps)[] = [\n \"hide\",\n \"dataKey\",\n \"yAxisId\",\n \"width\",\n \"height\",\n \"orientation\",\n \"type\",\n \"tickCount\",\n \"domain\",\n \"includeHidden\",\n \"interval\",\n \"padding\",\n \"minTickGap\",\n \"allowDecimals\",\n \"allowDataOverflow\",\n \"allowDuplicatedCategory\",\n \"axisLine\",\n \"tickLine\",\n \"tickSize\",\n \"tickFormatter\",\n \"ticks\",\n \"tick\",\n \"mirror\",\n \"reversed\",\n \"label\",\n \"scale\",\n \"unit\",\n \"name\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"tickMargin\",\n]\n\nexport const legendProperties: (keyof Omit<Recharts.LegendProps, \"ref\">)[] = [\n \"width\",\n \"height\",\n \"layout\",\n \"align\",\n \"verticalAlign\",\n \"iconSize\",\n \"iconType\",\n \"payload\",\n \"chartWidth\",\n \"chartHeight\",\n \"margin\",\n \"content\",\n \"formatter\",\n \"wrapperStyle\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const tooltipProperties: (keyof Recharts.TooltipProps<any, any>)[] = [\n \"offset\",\n \"filterNull\",\n \"itemStyle\",\n \"wrapperStyle\",\n \"contentStyle\",\n \"labelStyle\",\n \"cursor\",\n \"viewBox\",\n \"allowEscapeViewBox\",\n \"active\",\n \"position\",\n \"coordinate\",\n \"payload\",\n \"label\",\n \"content\",\n \"formatter\",\n \"labelFormatter\",\n \"itemSorter\",\n \"isAnimationActive\",\n \"animationDuration\",\n \"animationEasing\",\n]\n\nexport const areaProperties: (keyof Omit<Recharts.AreaProps, \"ref\">)[] = [\n \"type\",\n \"dataKey\",\n \"xAxisId\",\n \"yAxisId\",\n \"legendType\",\n \"dot\",\n \"activeDot\",\n \"label\",\n \"stroke\",\n \"strokeWidth\",\n \"layout\",\n \"baseLine\",\n \"points\",\n \"stackId\",\n \"connectNulls\",\n \"unit\",\n \"name\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"id\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const barProperties: (keyof Omit<Recharts.BarProps, \"ref\">)[] = [\n \"layout\",\n \"dataKey\",\n \"xAxisId\",\n \"yAxisId\",\n \"legendType\",\n \"label\",\n \"data\",\n \"barSize\",\n \"maxBarSize\",\n \"minPointSize\",\n \"background\",\n \"shape\",\n \"activeBar\",\n \"stackId\",\n \"unit\",\n \"name\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"id\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"radius\",\n]\n\nexport const radarProperties: (keyof Omit<Recharts.RadarProps, \"ref\">)[] = [\n \"dataKey\",\n \"points\",\n \"shape\",\n \"dot\",\n \"activeDot\",\n \"legendType\",\n \"label\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n]\n\nexport const lineProperties: (keyof Omit<Recharts.LineProps, \"ref\">)[] = [\n \"type\",\n \"dataKey\",\n \"xAxisId\",\n \"yAxisId\",\n \"legendType\",\n \"dot\",\n \"activeDot\",\n \"label\",\n \"hide\",\n \"points\",\n \"stroke\",\n \"strokeWidth\",\n \"layout\",\n \"connectNulls\",\n \"unit\",\n \"name\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"id\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"strokeDasharray\",\n]\n\nexport const pieProperties: (keyof Omit<Recharts.PieProps, \"ref\">)[] = [\n \"cx\",\n \"cy\",\n \"innerRadius\",\n \"outerRadius\",\n \"startAngle\",\n \"endAngle\",\n \"minAngle\",\n \"paddingAngle\",\n \"nameKey\",\n \"dataKey\",\n \"legendType\",\n \"label\",\n \"labelLine\",\n \"data\",\n \"activeIndex\",\n \"activeShape\",\n \"inactiveShape\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const dotProperties: (keyof Omit<Recharts.DotProps, \"ref\">)[] = [\n \"cx\",\n \"cy\",\n \"r\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const polarGridProperties: (keyof Recharts.PolarGridProps)[] = [\n \"cx\",\n \"cy\",\n \"innerRadius\",\n \"outerRadius\",\n \"polarAngles\",\n \"polarRadius\",\n \"gridType\",\n]\n\nexport const polarAngleAxisProperties: (keyof Recharts.PolarAngleAxisProps)[] =\n [\n \"dataKey\",\n \"cx\",\n \"cy\",\n \"radius\",\n \"axisLine\",\n \"axisLineType\",\n \"tickLine\",\n \"tickSize\",\n \"tick\",\n \"ticks\",\n \"orient\",\n \"tickFormatter\",\n \"type\",\n \"allowDuplicatedCategory\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n ]\n\nexport const polarRadiusAxisProperties: (keyof Recharts.PolarRadiusAxisProps)[] =\n [\n \"angle\",\n \"type\",\n \"allowDuplicatedCategory\",\n \"cx\",\n \"cy\",\n \"domain\",\n \"reversed\",\n \"label\",\n \"orientation\",\n \"axisLine\",\n \"tick\",\n \"tickSize\",\n \"tickFormatter\",\n \"tickCount\",\n \"scale\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n ]\n\nexport const labelProperties: (keyof Recharts.LabelProps)[] = [\n \"viewBox\",\n \"formatter\",\n \"value\",\n \"position\",\n \"offset\",\n \"children\",\n \"content\",\n \"id\",\n]\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","_a","dimCell"]}
|
package/dist/use-pie-chart.mjs
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@yamada-ui/charts",
|
3
|
-
"version": "2.0.0-next-
|
3
|
+
"version": "2.0.0-next-20240716070106",
|
4
4
|
"description": "Yamada UI charts component",
|
5
5
|
"keywords": [
|
6
6
|
"yamada",
|
@@ -37,7 +37,7 @@
|
|
37
37
|
},
|
38
38
|
"dependencies": {
|
39
39
|
"recharts": "^2.12.4",
|
40
|
-
"@yamada-ui/core": "1.
|
40
|
+
"@yamada-ui/core": "1.10.0",
|
41
41
|
"@yamada-ui/utils": "1.3.1"
|
42
42
|
},
|
43
43
|
"devDependencies": {
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/pie-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n Cell,\n Legend,\n Pie,\n PieChart as RechartsPieChart,\n ResponsiveContainer,\n Tooltip,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { TooltipDataSourceType } from \"./chart.types\"\nimport type { UseChartProps } from \"./use-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport {\n useChartTooltip,\n type UseChartTooltipOptions,\n} from \"./use-chart-tooltip\"\nimport type { UsePieChartOptions } from \"./use-pie-chart\"\nimport { usePieChart } from \"./use-pie-chart\"\n\ntype PieChartOptions = {\n /**\n * If `true`, tooltip is visible.\n *\n * @default true\n */\n withTooltip?: boolean\n /**\n * If `true`, legend is visible.\n *\n * @default false\n */\n withLegend?: boolean\n /**\n * Determines which data is displayed in the tooltip.\n *\n * @default 'all'\n */\n tooltipDataSource?: TooltipDataSourceType\n /**\n * A function to format values inside the tooltip\n */\n valueFormatter?: (value: number) => string\n /**\n * Unit displayed next to each tick in y-axis.\n */\n unit?: string\n}\n\nexport type PieChartProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"pieChart\"> &\n PieChartOptions &\n UsePieChartOptions &\n UseChartTooltipOptions &\n UseChartLegendProps &\n UseChartProps\n\n/**\n * `PieChart` is a component for drawing pie charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/feedback/pie-chart\n */\nexport const PieChart = forwardRef<PieChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"PieChart\", props)\n const {\n className,\n data,\n pieProps,\n chartProps,\n cellProps,\n containerProps,\n withTooltip = true,\n withLegend = false,\n tooltipProps,\n tooltipAnimationDuration,\n tooltipDataSource = \"all\",\n valueFormatter,\n unit,\n innerRadius,\n outerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n withLabels,\n withLabelLines,\n strokeWidth,\n legendProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n pieVars,\n getPieProps,\n getPieChartProps,\n getCellProps,\n setHighlightedArea,\n } = usePieChart({\n data,\n pieProps,\n chartProps,\n cellProps,\n innerRadius,\n outerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n strokeWidth,\n withLabels,\n withLabelLines,\n styles,\n })\n const { getContainerProps } = useChart({ containerProps })\n const { tooltipProps: computedTooltipProps, getTooltipProps } =\n useChartTooltip({\n tooltipProps,\n tooltipAnimationDuration,\n styles,\n })\n const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n legendProps,\n })\n\n const cells = useMemo(\n () =>\n data.map(({ name }, index) => (\n <Cell\n key={`pie-cell-${name}`}\n {...getCellProps({ index, className: \"ui-pie-chart__cell\" })}\n />\n )),\n [data, getCellProps],\n )\n\n return (\n <ChartProvider value={{ styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-pie-chart\", className)}\n var={pieVars}\n __css={{ ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-pie-chart__container\" })}\n >\n <RechartsPieChart\n {...getPieChartProps({ className: \"ui-pie-chart__chart\" })}\n >\n <Pie\n {...getPieProps({\n className: \"ui-pie-chart__pie\",\n labelClassName: \"ui-pie-chart__label\",\n labelLineClassName: \"ui-pie-chart__label-line\",\n })}\n >\n {cells}\n </Pie>\n\n {withLegend ? (\n <Legend\n content={({ payload }) => (\n <ChartLegend\n className=\"ui-pie-chart__legend\"\n payload={payload}\n onHighlight={setHighlightedArea}\n {...computedLegendProps}\n />\n )}\n {...getLegendProps()}\n />\n ) : null}\n\n {withTooltip ? (\n <Tooltip\n content={({ label, payload }) => (\n <ChartTooltip\n className=\"ui-pie-chart__tooltip\"\n label={label}\n payload={tooltipDataSource === \"segment\" ? payload : data}\n valueFormatter={valueFormatter}\n unit={unit}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n </RechartsPieChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n"],"mappings":"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","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/donut-chart.tsx"],"sourcesContent":["import {\n forwardRef,\n omitThemeProps,\n ui,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n Cell,\n Legend,\n Pie,\n PieChart as RechartsPieChart,\n ResponsiveContainer,\n Tooltip,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { PieChartProps } from \"./pie-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePieChart } from \"./use-pie-chart\"\n\ntype DonutChartOptions = {\n /**\n * Controls innerRadius of the chart segments.\n * If it is a number, it is the width of the radius.\n * For example, `60` means the radius is `60px` and the diameter is `120px`.\n *\n * @default '60%'\n */\n innerRadius?: number | string\n}\n\nexport type DonutChartProps = PieChartProps & DonutChartOptions\n\n/**\n * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/feedback/donut-chart\n */\nexport const DonutChart = forwardRef<DonutChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"DonutChart\", props)\n const {\n className,\n data,\n pieProps,\n chartProps,\n cellProps,\n containerProps,\n withTooltip = true,\n withLegend = false,\n tooltipProps,\n tooltipAnimationDuration,\n tooltipDataSource = \"all\",\n valueFormatter,\n unit,\n paddingAngle,\n startAngle,\n endAngle,\n withLabels,\n withLabelLines,\n innerRadius = withLabels ? \"60%\" : \"80%\",\n outerRadius,\n strokeWidth,\n legendProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n pieVars,\n getPieProps,\n getPieChartProps,\n getCellProps,\n setHighlightedArea,\n } = usePieChart({\n data,\n pieProps,\n chartProps,\n cellProps,\n innerRadius,\n outerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n strokeWidth,\n withLabels,\n withLabelLines,\n styles,\n })\n const { getContainerProps } = useChart({ containerProps })\n const { tooltipProps: computedTooltipProps, getTooltipProps } =\n useChartTooltip({\n tooltipProps,\n tooltipAnimationDuration,\n styles,\n })\n const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n legendProps,\n })\n\n const cells = useMemo(\n () =>\n data.map(({ name }, index) => (\n <Cell\n key={`donut-cell-${name}`}\n {...getCellProps({ index, className: \"ui-donut-chart__cell\" })}\n />\n )),\n [data, getCellProps],\n )\n\n return (\n <ChartProvider value={{ styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-donut-chart\", className)}\n var={pieVars}\n __css={{ ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-donut-chart__container\" })}\n >\n <RechartsPieChart\n {...getPieChartProps({ className: \"ui-donut-chart__chart\" })}\n >\n <Pie\n {...getPieProps({\n className: \"ui-donut-chart__donut\",\n labelClassName: \"ui-donut-chart__label\",\n labelLineClassName: \"ui-donut-chart__label-line\",\n })}\n >\n {cells}\n </Pie>\n\n {withLegend ? (\n <Legend\n content={({ payload }) => (\n <ChartLegend\n className=\"ui-donut-chart__legend\"\n payload={payload}\n onHighlight={setHighlightedArea}\n {...computedLegendProps}\n />\n )}\n {...getLegendProps()}\n />\n ) : null}\n\n {withTooltip ? (\n <Tooltip\n content={({ label, payload }) => (\n <ChartTooltip\n className=\"ui-donut-chart__tooltip\"\n label={label}\n payload={tooltipDataSource === \"segment\" ? payload : data}\n valueFormatter={valueFormatter}\n unit={unit}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n </RechartsPieChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n"],"mappings":"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","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/use-pie-chart.ts"],"sourcesContent":["import { useTheme, type CSSUIObject, type CSSUIProps } from \"@yamada-ui/core\"\nimport { cx, type Dict } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef } from \"react\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport { getClassName, getComponentProps } from \"./chart-utils\"\nimport type {\n CellProps,\n ChartPropGetter,\n PieChartProps,\n PieProps,\n RequiredChartPropGetter,\n} from \"./chart.types\"\nimport { pieChartProperties, pieProperties } from \"./rechart-properties\"\n\nexport type UsePieChartOptions = {\n /**\n * Chart data.\n */\n data: CellProps[]\n /**\n * Props passed down to recharts `PieChart` component.\n */\n chartProps?: PieChartProps\n /**\n * Props for the pie.\n */\n pieProps?: Partial<PieProps>\n /**\n * Props for the cell.\n */\n cellProps?: Partial<CellProps>\n /**\n * Determines whether each segment should have associated label.\n *\n * @default false\n */\n withLabels?: boolean\n /**\n * Determines whether segments labels should have lines that connect the segment with the label.\n *\n * @default false\n */\n withLabelLines?: boolean\n /**\n * Controls innerRadius of the chart segments.\n * If it is a number, it is the width of the radius.\n * For example, `60` means the radius is `60px` and the diameter is `120px`.\n *\n * @default '0%'\n */\n innerRadius?: number | string\n /**\n * Controls thickness of the chart segments. If it is a number, it is calculated as px.\n * If it is a number, it is the width of the radius.\n * For example, `60` means the radius is `60px` and the diameter is `120px`.\n *\n * @default '80%'\n */\n outerRadius?: number | string\n /**\n * Controls padding between segments.\n *\n * @default 0\n */\n paddingAngle?: number\n /**\n * Stroke width for the chart pies.\n *\n * @default 1\n */\n strokeWidth?: number\n /**\n * Controls angle at which chart starts.\n *\n * @default 90\n */\n startAngle?: number\n /**\n * Controls angle at which chart ends.\n *\n * @default -270\n */\n endAngle?: number\n /**\n * Controls fill opacity of all pies.\n *\n * @default 1\n */\n fillOpacity?: number | [number, number]\n /**\n * A function to format values inside the tooltip.\n */\n valueFormatter?: (value: number) => string\n}\n\ntype UsePieChartProps = UsePieChartOptions & {\n styles: Dict<CSSUIObject>\n}\n\nexport const usePieChart = ({\n data,\n withLabels = false,\n withLabelLines = false,\n strokeWidth = 1,\n fillOpacity = 1,\n innerRadius = \"0%\",\n outerRadius = withLabels ? \"80%\" : \"100%\",\n paddingAngle = 0,\n startAngle = 90,\n endAngle = -270,\n styles,\n ...rest\n}: UsePieChartProps) => {\n const { theme } = useTheme()\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null)\n const shouldHighlight = highlightedArea !== null\n const { dimCell, ...computedCellProps } = rest.cellProps ?? {}\n const {\n activeShape = {},\n inactiveShape = {},\n label,\n labelLine,\n ...computedPieProps\n } = rest.pieProps ?? {}\n\n const cellColors: CSSUIProps[\"var\"] = useMemo(\n () =>\n data.map(({ color }, index) => ({\n __prefix: \"ui\",\n name: `cell-${index}`,\n token: \"colors\",\n value: color ?? \"transparent\",\n })),\n [data],\n )\n\n const pieVars: CSSUIProps[\"var\"] = useMemo(\n () =>\n [\n ...cellColors,\n { __prefix: \"ui\", name: \"fill-opacity\", value: fillOpacity },\n ] as Required<CSSUIProps>[\"var\"],\n [fillOpacity, cellColors],\n )\n\n const [chartProps, chartClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [rest.chartProps ?? {}, pieChartProperties],\n styles.chart,\n )(theme),\n [rest.chartProps, styles.chart, theme],\n )\n\n const [pieProps, pieClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [computedPieProps, pieProperties],\n styles.pie,\n )(theme),\n [computedPieProps, styles.pie, theme],\n )\n\n const cellClassName = useMemo(() => {\n const resolvedCellProps = {\n fillOpacity: \"var(--ui-fill-opacity)\",\n ...styles.cell,\n ...computedCellProps,\n }\n\n return getClassName(resolvedCellProps)(theme)\n }, [computedCellProps, styles.cell, theme])\n\n const dimCellClassName = useMemo(() => {\n const resolvedDimCell = { ...styles.dimCell, ...dimCell }\n\n return getClassName(resolvedDimCell)(theme)\n }, [dimCell, styles.dimCell, theme])\n\n const activeShapeProps = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [activeShape, pieProperties],\n styles.activeShape,\n )(theme, true),\n [activeShape, styles.activeShape, theme],\n )\n\n const inactiveShapeProps = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [inactiveShape, pieProperties],\n styles.inactiveShape,\n )(theme, true),\n [inactiveShape, styles.inactiveShape, theme],\n )\n\n const labelClassName = useMemo(\n () => getClassName({ ...styles.label, ...label })(theme),\n [label, styles.label, theme],\n )\n\n const labelLineClassName = useMemo(\n () => getClassName({ ...styles.labelLine, ...labelLine })(theme),\n [labelLine, styles.labelLine, theme],\n )\n\n const cellPropList = useMemo(\n () =>\n data.map((props, index) => {\n const { name, dimCell = {}, ...computedProps } = props\n const color = `var(--ui-cell-${index})`\n const dimmed = shouldHighlight && highlightedArea !== name\n const resolvedProps = {\n ...computedProps,\n ...(dimmed ? dimCell : {}),\n }\n\n const className = getClassName(\n {\n cellClassName,\n ...resolvedProps,\n },\n dimmed ? dimCellClassName : undefined,\n )(theme)\n\n return {\n color,\n className,\n }\n }),\n [\n cellClassName,\n data,\n dimCellClassName,\n highlightedArea,\n shouldHighlight,\n theme,\n ],\n )\n\n const getPieChartProps: ChartPropGetter<\n \"div\",\n ComponentPropsWithoutRef<typeof Recharts.PieChart>,\n ComponentPropsWithoutRef<typeof Recharts.PieChart>\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => ({\n ref,\n className: cx(className, chartClassName),\n ...props,\n ...chartProps,\n }),\n [chartProps, chartClassName],\n )\n\n const getPieProps: RequiredChartPropGetter<\n \"div\",\n Partial<Recharts.PieProps> & {\n labelClassName: string\n labelLineClassName: string\n },\n Omit<Recharts.PieProps, \"ref\">\n > = useCallback(\n (\n {\n className,\n labelClassName: labelClassNameProp,\n labelLineClassName: labelLineClassNameProp,\n ...props\n },\n ref = null,\n ) => ({\n ref,\n className: cx(className, pieClassName),\n dataKey: \"value\",\n data,\n rootTabIndex: -1,\n outerRadius,\n innerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n isAnimationActive: false,\n label: withLabels\n ? { className: cx(labelClassNameProp, labelClassName) }\n : false,\n labelLine: withLabelLines\n ? { className: cx(labelLineClassNameProp, labelLineClassName) }\n : false,\n activeShape: activeShapeProps,\n inactiveShape: inactiveShapeProps,\n ...(props as Omit<Recharts.PieProps, \"dataKey\">),\n ...pieProps,\n }),\n [\n pieClassName,\n data,\n outerRadius,\n innerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n withLabels,\n labelClassName,\n withLabelLines,\n labelLineClassName,\n activeShapeProps,\n inactiveShapeProps,\n pieProps,\n ],\n )\n\n const getCellProps: RequiredChartPropGetter<\n \"div\",\n Omit<Recharts.CellProps, \"ref\"> & { index: number },\n Omit<Recharts.CellProps, \"ref\">\n > = useCallback(\n ({ index, className: classNameProp, ...props }, ref = null) => {\n const { className, color } = cellPropList[index]\n\n return {\n ref,\n className: cx(classNameProp, className),\n fill: color,\n stroke: color,\n strokeWidth,\n ...(props as Recharts.CellProps),\n }\n },\n [cellPropList, strokeWidth],\n )\n\n return {\n pieVars,\n getPieProps,\n getPieChartProps,\n getCellProps,\n setHighlightedArea,\n }\n}\n\nexport type UsePieChartReturn = ReturnType<typeof usePieChart>\n"],"mappings":"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","names":["_a","dimCell"]}
|