{"version":3,"sources":["../src/use-chart-axis.ts"],"sourcesContent":["import type { CSSUIObject, PropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { SVGProps } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport type {\n AreaChartType,\n ChartAxisType,\n ChartLayoutType,\n LabelProps,\n XAxisProps,\n YAxisProps,\n} from \"./chart.types\"\nimport { useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport {\n labelProperties,\n xAxisProperties,\n yAxisProperties,\n} from \"./rechart-properties\"\n\nexport interface UseChartAxisOptions {\n /**\n * The key of a group of data which should be unique in an chart.\n */\n dataKey: string\n /**\n * Controls how chart areas are positioned relative to each other\n *\n * @default `default`\n */\n type?: AreaChartType\n /**\n * Specifies which lines should be displayed in the grid.\n *\n * @default 'x'\n */\n gridAxis?: ChartAxisType\n /**\n * Chart orientation.\n *\n * @default 'horizontal'\n */\n layoutType?: ChartLayoutType\n /**\n * The option is the configuration of tick lines.\n *\n * @default 'y'\n */\n tickLine?: ChartAxisType\n /**\n * Unit displayed next to each tick in y-axis.\n */\n unit?: string\n /**\n * If `true`, X axis is visible.\n *\n * @default true\n */\n withXAxis?: boolean\n /**\n * If `true`, Y axis is visible.\n *\n * @default true\n */\n withYAxis?: boolean\n /**\n * A label to display below the X axis.\n */\n xAxisLabel?: string\n /**\n * A function to format X axis tick.\n */\n xAxisTickFormatter?: (value: any) => string\n /**\n * A label to display below the Y axis.\n */\n yAxisLabel?: string\n /**\n * A function to format Y axis tick.\n */\n yAxisTickFormatter?: (value: any) => string\n /**\n * Props passed down to recharts 'XAxisLabel' component.\n */\n xAxisLabelProps?: LabelProps\n /**\n * Props passed down to recharts 'XAxis' component.\n */\n xAxisProps?: XAxisProps\n /**\n * Props passed down to recharts 'YAxisLabel' component.\n */\n yAxisLabelProps?: LabelProps\n /**\n * Props passed down to recharts 'YAxis' component.\n */\n yAxisProps?: YAxisProps\n}\n\nexport interface UseChartAxisProps extends UseChartAxisOptions {\n styles: Dict\n}\n\nexport const useChartAxis = ({\n type,\n dataKey,\n gridAxis = \"x\",\n layoutType = \"horizontal\",\n styles,\n tickLine = \"y\",\n unit,\n withXAxis = true,\n withYAxis = true,\n xAxisLabel: xAxisLabelProp,\n xAxisTickFormatter = type === \"percent\" && layoutType === \"vertical\"\n ? valueToPercent\n : undefined,\n yAxisLabel: yAxisLabelProp,\n yAxisTickFormatter = type === \"percent\" && layoutType === \"horizontal\"\n ? valueToPercent\n : undefined,\n ...rest\n}: UseChartAxisProps) => {\n const { theme } = useTheme()\n const xAxisKey: Recharts.XAxisProps = useMemo(\n () => (layoutType === \"vertical\" ? { type: \"number\" } : { dataKey }),\n [dataKey, layoutType],\n )\n\n const yAxisKey: Recharts.YAxisProps = useMemo(\n () =>\n layoutType === \"vertical\"\n ? { type: \"category\", dataKey }\n : { type: \"number\" },\n [dataKey, layoutType],\n )\n const withXTickLine =\n gridAxis !== \"none\" && (tickLine === \"x\" || tickLine === \"xy\")\n const withYTickLine =\n gridAxis !== \"none\" && (tickLine === \"y\" || tickLine === \"xy\")\n const getTickLine = (\n withTickLine: boolean,\n ): boolean | SVGProps =>\n withTickLine ? { stroke: \"currentColor\" } : false\n const xTickLine = getTickLine(withXTickLine)\n const yTickLine = getTickLine(withYTickLine)\n\n const xAxisLabel = layoutType === \"vertical\" ? yAxisLabelProp : xAxisLabelProp\n const yAxisLabel = layoutType === \"vertical\" ? xAxisLabelProp : yAxisLabelProp\n\n const [xAxisProps, xAxisClassName] = getComponentProps(\n [rest.xAxisProps ?? {}, xAxisProperties],\n styles.xAxis,\n )(theme)\n\n const [yAxisProps, yAxisClassName] = getComponentProps(\n [rest.yAxisProps ?? {}, yAxisProperties],\n styles.yAxis,\n )(theme)\n\n const [xAxisLabelProps, xAxisLabelClassName] = getComponentProps<\n Dict,\n string\n >(\n [rest.xAxisLabelProps ?? {}, labelProperties],\n styles.xAxisLabel,\n )(theme)\n\n const [yAxisLabelProps, yAxisLabelClassName] = getComponentProps<\n Dict,\n string\n >(\n [rest.yAxisLabelProps ?? {}, labelProperties],\n styles.yAxisLabel,\n )(theme)\n\n const getXAxisProps: PropGetter<\n Partial,\n Recharts.XAxisProps\n > = useCallback(\n ({ className, ...props } = {}) => ({\n className: cx(className, xAxisClassName),\n hide: !withXAxis,\n ...xAxisKey,\n interval: \"preserveStartEnd\",\n minTickGap: 5,\n stroke: \"\",\n tick: {\n fill: \"currentColor\",\n transform: \"translate(0, 10)\",\n },\n tickFormatter: xAxisTickFormatter,\n tickLine: xTickLine,\n ...props,\n ...(xAxisProps as Recharts.XAxisProps),\n }),\n [\n xAxisClassName,\n withXAxis,\n xAxisKey,\n xTickLine,\n xAxisTickFormatter,\n xAxisProps,\n ],\n )\n\n const getYAxisProps: PropGetter<\n Partial,\n Recharts.YAxisProps\n > = useCallback(\n ({ className, ...props } = {}) => ({\n className: cx(className, yAxisClassName),\n axisLine: false,\n hide: !withYAxis,\n ...yAxisKey,\n allowDecimals: true,\n tick: {\n fill: \"currentColor\",\n transform: \"translate(-10, 0)\",\n },\n tickFormatter: yAxisTickFormatter,\n tickLine: yTickLine,\n unit: unit,\n ...props,\n ...(yAxisProps as Recharts.YAxisProps),\n }),\n [\n yAxisClassName,\n withYAxis,\n yAxisKey,\n yTickLine,\n unit,\n yAxisTickFormatter,\n yAxisProps,\n ],\n )\n\n const getXAxisLabelProps: PropGetter<\n Partial,\n Recharts.LabelProps\n > = useCallback(\n ({ className, ...props } = {}) => ({\n className: cx(className, xAxisLabelClassName),\n offset: -20,\n position: \"insideBottom\",\n value: xAxisLabel,\n ...props,\n ...xAxisLabelProps,\n }),\n [xAxisLabel, xAxisLabelClassName, xAxisLabelProps],\n )\n\n const getYAxisLabelProps: PropGetter<\n Partial,\n Recharts.LabelProps\n > = useCallback(\n ({ className, ...props } = {}) => ({\n className: cx(className, yAxisLabelClassName),\n angle: -90,\n offset: -5,\n position: \"insideLeft\",\n textAnchor: \"middle\",\n value: yAxisLabel,\n ...props,\n ...yAxisLabelProps,\n }),\n [yAxisLabel, yAxisLabelClassName, yAxisLabelProps],\n )\n\n return {\n getXAxisLabelProps,\n getXAxisProps,\n getYAxisLabelProps,\n getYAxisProps,\n }\n}\n\nconst valueToPercent = (value: any) => {\n return `${(value * 100).toFixed(0)}%`\n}\n"],"mappings":"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","names":[]}