@yamada-ui/charts 1.5.11-dev-20241212095817 → 1.5.11-dev-20241212135810
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/area-chart.js +2 -2
- package/dist/area-chart.js.map +1 -1
- package/dist/area-chart.mjs +2 -2
- package/dist/bar-chart.js +2 -2
- package/dist/bar-chart.js.map +1 -1
- package/dist/bar-chart.mjs +2 -2
- package/dist/chart-tooltip.d.mts +1 -1
- package/dist/chart-tooltip.d.ts +1 -1
- package/dist/chart-tooltip.js +2 -2
- package/dist/chart-tooltip.js.map +1 -1
- package/dist/chart-tooltip.mjs +1 -1
- package/dist/{chunk-FDALM73K.mjs → chunk-3YP5OGSD.mjs} +3 -3
- package/dist/chunk-3YP5OGSD.mjs.map +1 -0
- package/dist/{chunk-TA7YJAW4.mjs → chunk-7H24OXIK.mjs} +5 -4
- package/dist/chunk-7H24OXIK.mjs.map +1 -0
- package/dist/{chunk-NQPC5LPY.mjs → chunk-AKTABDUE.mjs} +2 -2
- package/dist/{chunk-NMPNNSBN.mjs → chunk-AZ36BOAU.mjs} +2 -2
- package/dist/{chunk-SCY5V45W.mjs → chunk-CQGVVUB5.mjs} +2 -2
- package/dist/{chunk-TU6MKMMV.mjs → chunk-H5B4LIY3.mjs} +5 -4
- package/dist/chunk-H5B4LIY3.mjs.map +1 -0
- package/dist/{chunk-ZRV4LO67.mjs → chunk-OYBDHU4O.mjs} +5 -3
- package/dist/chunk-OYBDHU4O.mjs.map +1 -0
- package/dist/{chunk-YTUEG4IY.mjs → chunk-SSEHHGNG.mjs} +5 -3
- package/dist/chunk-SSEHHGNG.mjs.map +1 -0
- package/dist/{chunk-5VLSGWQD.mjs → chunk-Z5AOXBHZ.mjs} +3 -3
- package/dist/chunk-Z5AOXBHZ.mjs.map +1 -0
- package/dist/{chunk-SYBJTMPL.mjs → chunk-ZEAVTRPO.mjs} +2 -2
- package/dist/donut-chart.js +9 -6
- package/dist/donut-chart.js.map +1 -1
- package/dist/donut-chart.mjs +4 -4
- package/dist/index.js +14 -8
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +10 -10
- package/dist/line-chart.js +2 -2
- package/dist/line-chart.js.map +1 -1
- package/dist/line-chart.mjs +2 -2
- package/dist/pie-chart-label.d.mts +1 -1
- package/dist/pie-chart-label.d.ts +1 -1
- package/dist/pie-chart-label.js +2 -2
- package/dist/pie-chart-label.js.map +1 -1
- package/dist/pie-chart-label.mjs +1 -1
- package/dist/pie-chart.js +9 -6
- package/dist/pie-chart.js.map +1 -1
- package/dist/pie-chart.mjs +4 -4
- package/dist/radar-chart.js +2 -2
- package/dist/radar-chart.js.map +1 -1
- package/dist/radar-chart.mjs +2 -2
- package/dist/radial-chart.js +5 -4
- package/dist/radial-chart.js.map +1 -1
- package/dist/radial-chart.mjs +2 -2
- package/dist/use-pie-chart.d.mts +9 -1
- package/dist/use-pie-chart.d.ts +9 -1
- package/dist/use-pie-chart.js +5 -4
- package/dist/use-pie-chart.js.map +1 -1
- package/dist/use-pie-chart.mjs +2 -2
- package/package.json +3 -3
- package/dist/chunk-5VLSGWQD.mjs.map +0 -1
- package/dist/chunk-FDALM73K.mjs.map +0 -1
- package/dist/chunk-TA7YJAW4.mjs.map +0 -1
- package/dist/chunk-TU6MKMMV.mjs.map +0 -1
- package/dist/chunk-YTUEG4IY.mjs.map +0 -1
- package/dist/chunk-ZRV4LO67.mjs.map +0 -1
- /package/dist/{chunk-NQPC5LPY.mjs.map → chunk-AKTABDUE.mjs.map} +0 -0
- /package/dist/{chunk-NMPNNSBN.mjs.map → chunk-AZ36BOAU.mjs.map} +0 -0
- /package/dist/{chunk-SCY5V45W.mjs.map → chunk-CQGVVUB5.mjs.map} +0 -0
- /package/dist/{chunk-SYBJTMPL.mjs.map → chunk-ZEAVTRPO.mjs.map} +0 -0
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/chart-tooltip.tsx"],"sourcesContent":["import type { Dict } from \"@yamada-ui/utils\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport { useTooltip } from \"./use-chart\"\n\nexport interface ChartTooltipProps {\n payload: Dict[] | undefined\n dataKey?: string\n isRadialChart?: boolean\n label?: string\n labelFormatter?: (label: string) => string\n unit?: string\n valueFormatter?: (value: any) => string\n}\n\nexport const ChartTooltip = forwardRef<ChartTooltipProps, \"div\">(\n (\n {\n className,\n dataKey = \"value\",\n isRadialChart,\n label,\n labelFormatter,\n payload = [],\n unit,\n valueFormatter,\n ...rest\n },\n ref,\n ) => {\n const { styles } = useTooltip()\n\n const items = payload.map(\n (\n {\n name: nameProp,\n color: colorProp,\n [dataKey]: valueProp,\n payload,\n } = {},\n index,\n ) => {\n const name = isRadialChart ? payload?.name : nameProp\n const color = colorProp ?? payload?.color\n let value: string\n\n if (isArray(valueProp)) {\n value = valueProp\n .map((value) => {\n return `${valueFormatter?.(value) ?? value}`\n })\n .join(\" - \")\n } else {\n value = valueFormatter?.(valueProp) ?? valueProp\n }\n\n return (\n <ui.div\n key={`tooltip-payload-${index}`}\n className=\"ui-chart__tooltip-item\"\n __css={styles.tooltipItem}\n >\n <ui.div\n className=\"ui-chart__tooltip-swatch\"\n background={color}\n __css={styles.tooltipSwatch}\n />\n\n <ui.span\n className=\"ui-chart__tooltip-label\"\n __css={styles.tooltipLabel}\n >\n {name}\n </ui.span>\n\n <ui.span\n className=\"ui-chart__tooltip-value\"\n __css={styles.tooltipValue}\n >\n {value}\n {unit ? unit : \"\"}\n </ui.span>\n </ui.div>\n )\n },\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-chart__tooltip\", className)}\n __css={styles.tooltip}\n {...rest}\n >\n {label ? (\n <ui.p className=\"ui-chart__tooltip-title\" __css={styles.tooltipTitle}>\n {labelFormatter?.(label) ?? label}\n </ui.p>\n ) : null}\n\n <ui.div className=\"ui-chart__tooltip-list\" __css={styles.tooltipList}>\n {items}\n </ui.div>\n </ui.div>\n )\n },\n)\n\nChartTooltip.displayName = \"ChartTooltip\"\nChartTooltip.__ui__ = \"ChartTooltip\"\n"],"mappings":";;;;;;AACA,SAAS,YAAY,UAAU;AAC/B,SAAS,IAAI,eAAe;AA4DhB,cAaA,YAbA;AA/CL,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AA7BP;AA8BI,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,QAAQ,QAAQ;AAAA,MACpB,CACE;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,CAAC,UAAU;AAAA,QACX,SAAAA;AAAA,MACF,IAAI,CAAC,GACL,UACG;AAzCX,YAAAC;AA0CQ,cAAM,OAAO,gBAAgBD,YAAA,gBAAAA,SAAS,OAAO;AAC7C,cAAM,QAAQ,gCAAaA,YAAA,gBAAAA,SAAS;AACpC,YAAI;AAEJ,YAAI,QAAQ,SAAS,GAAG;AACtB,kBAAQ,UACL,IAAI,CAACE,WAAU;AAhD5B,gBAAAD;AAiDc,mBAAO,IAAGA,MAAA,iDAAiBC,YAAjB,OAAAD,MAA2BC,MAAK;AAAA,UAC5C,CAAC,EACA,KAAK,KAAK;AAAA,QACf,OAAO;AACL,mBAAQD,MAAA,iDAAiB,eAAjB,OAAAA,MAA+B;AAAA,QACzC;AAEA,eACE;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YAEC,WAAU;AAAA,YACV,OAAO,OAAO;AAAA,YAEd;AAAA;AAAA,gBAAC,GAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,OAAO,OAAO;AAAA;AAAA,cAChB;AAAA,cAEA;AAAA,gBAAC,GAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,OAAO;AAAA,kBAEb;AAAA;AAAA,cACH;AAAA,cAEA;AAAA,gBAAC,GAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,OAAO;AAAA,kBAEb;AAAA;AAAA,oBACA,OAAO,OAAO;AAAA;AAAA;AAAA,cACjB;AAAA;AAAA;AAAA,UAvBK,mBAAmB,KAAK;AAAA,QAwB/B;AAAA,MAEJ;AAAA,IACF;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qBAAqB,SAAS;AAAA,QAC5C,OAAO,OAAO;AAAA,QACb,GAAG;AAAA,QAEH;AAAA,kBACC,oBAAC,GAAG,GAAH,EAAK,WAAU,2BAA0B,OAAO,OAAO,cACrD,iEAAiB,WAAjB,YAA2B,OAC9B,IACE;AAAA,UAEJ,oBAAC,GAAG,KAAH,EAAO,WAAU,0BAAyB,OAAO,OAAO,aACtD,iBACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;","names":["payload","_a","value"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/pie-chart-label.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport { cx, isUndefined } from \"@yamada-ui/utils\"\n\nconst RADIAN = Math.PI / 180\nconst DEFAULT_LABEL_OFFSET = 22\n\nexport interface PieChartLabelProps {\n styles: Dict<CSSUIObject | undefined>\n className?: string\n cx?: number\n cy?: number\n innerRadius?: number\n isPercent?: boolean\n labelFormatter?: (value: number) => string\n labelOffset?: number\n midAngle?: number\n middleRadius?: number\n outerRadius?: number\n percent?: number\n value?: number\n labelProps?: HTMLUIProps<\"text\">\n}\n\nexport const pieChartLabel: (props: PieChartLabelProps) => ReactNode = ({\n className: cellClassName,\n cx: cxProp = 0,\n cy: cyProp = 0,\n innerRadius = 0,\n isPercent,\n labelFormatter,\n labelOffset: labelOffsetProp,\n midAngle = 0,\n middleRadius = 0,\n outerRadius = 0,\n percent = 0,\n styles,\n value = 0,\n labelProps,\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 (isPercent) {\n return (\n parseFloat((percent * 100).toFixed(0)) > 0 &&\n `${(percent * 100).toFixed(0)}%`\n )\n } else if (!isUndefined(labelFormatter)) {\n return labelFormatter(value)\n } else {\n return value\n }\n }\n\n return (\n <ui.text\n className={cx(cellClassName, \"ui-chart__label\")}\n dominantBaseline=\"central\"\n textAnchor={textAnchor}\n x={x}\n y={y}\n __css={styles}\n {...labelProps}\n >\n {displayLabel()}\n </ui.text>\n )\n}\n\ninterface Point {\n x: number\n y: number\n}\n\nexport interface PieChartLabelLineProps {\n styles: Dict<CSSUIObject | undefined>\n className?: string\n cx?: number\n cy?: number\n innerRadius?: number\n labelOffset?: number\n midAngle?: number\n middleRadius?: number\n outerRadius?: number\n points?: Point[]\n labelLineProps?: HTMLUIProps<\"path\">\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 labelOffset: labelOffsetProp,\n midAngle = 0,\n middleRadius = 0,\n outerRadius = 0,\n points = [{ x: 0, y: 0 }],\n styles,\n labelLineProps,\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 = `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"],"mappings":";;;AAGA,SAAS,UAAU;AACnB,SAAS,IAAI,mBAAmB;AA2D5B;AAzDJ,IAAM,SAAS,KAAK,KAAK;AACzB,IAAM,uBAAuB;AAmBtB,IAAM,gBAA0D,CAAC;AAAA,EACtE,WAAW;AAAA,EACX,IAAI,SAAS;AAAA,EACb,IAAI,SAAS;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAAM;AACJ,QAAM,cACJ,6CAAoB,cAAc,eAAe,MAAM;AAEzD,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAC7E,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAE7E,QAAM,aAAa,IAAI,SAAS,UAAU,IAAI,SAAS,QAAQ;AAC/D,QAAM,eAAe,MAAM;AACzB,QAAI,WAAW;AACb,aACE,YAAY,UAAU,KAAK,QAAQ,CAAC,CAAC,IAAI,KACzC,IAAI,UAAU,KAAK,QAAQ,CAAC,CAAC;AAAA,IAEjC,WAAW,CAAC,YAAY,cAAc,GAAG;AACvC,aAAO,eAAe,KAAK;AAAA,IAC7B,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,WAAW,GAAG,eAAe,iBAAiB;AAAA,MAC9C,kBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,uBAAa;AAAA;AAAA,EAChB;AAEJ;AAqBO,IAAM,oBAEyB,CAAC;AAAA,EACrC,WAAW;AAAA,EACX,IAAI,SAAS;AAAA,EACb,IAAI,SAAS;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,cAAc;AAAA,EACd,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;AAAA,EACxB;AAAA,EACA;AACF,MAAM;AA9GN;AA+GE,QAAM,cACJ,6CAAoB,cAAc,eAAe,MAAM;AAEzD,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAC7E,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAE7E,QAAM,IAAI,MAAK,YAAO,CAAC,MAAR,mBAAW,CAAC,KAAI,YAAO,CAAC,MAAR,mBAAW,CAAC,MAAM,CAAC,IAAI,CAAC;AAEvD,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,WAAW,GAAG,eAAe,sBAAsB;AAAA,MACnD;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/radial-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TooltipDataSourceType } from \"./chart.types\"\nimport type { UseChartProps } from \"./use-chart\"\nimport type { UseChartLabelListOptions } from \"./use-chart-label-list\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport type { UsePolarGridOptions } from \"./use-polar-grid\"\nimport type { UseRadialChartOptions } from \"./use-radial-chart\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n LabelList,\n Legend,\n PolarGrid,\n RadialBar,\n RadialBarChart as RechartsRadialChart,\n ResponsiveContainer,\n Tooltip,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLabelList } from \"./use-chart-label-list\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePolarGrid } from \"./use-polar-grid\"\nimport { useRadialChart } from \"./use-radial-chart\"\n\ninterface RadialChartOptions {\n /**\n * Determines which data is displayed in the tooltip.\n *\n * @default 'all'\n */\n tooltipDataSource?: TooltipDataSourceType\n /**\n * Unit displayed next to each value in tooltip.\n */\n unit?: string\n /**\n * If `true`, legend is visible.\n *\n * @default false\n */\n withLegend?: boolean\n /**\n * Determines whether polarGrid should be displayed.\n *\n * @default false\n */\n withPolarGrid?: boolean\n /**\n * If `true`, tooltip is visible.\n *\n * @default true\n */\n withTooltip?: boolean\n}\n\nexport interface RadialChartProps\n extends Omit<HTMLUIProps, \"fillOpacity\" | \"strokeDasharray\">,\n ThemeProps<\"radialChart\">,\n RadialChartOptions,\n UseRadialChartOptions,\n UseChartTooltipOptions,\n UseChartLegendProps,\n UseChartLabelListOptions,\n UsePolarGridOptions,\n UseChartProps {}\n\n/**\n * `RadialChart` is a component for drawing radial charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/data-display/radial-chart\n */\nexport const RadialChart = forwardRef<RadialChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"RadialChart\", props)\n const {\n className,\n data,\n dataKey,\n endAngle,\n fillOpacity,\n innerRadius,\n outerRadius,\n startAngle,\n strokeDasharray,\n tooltipAnimationDuration,\n tooltipDataSource = \"all\",\n unit,\n valueFormatter,\n withLegend = false,\n withPolarGrid = false,\n withTooltip = true,\n chartProps,\n containerProps,\n labelListProps = [],\n legendProps,\n polarGridProps,\n radialBarProps,\n tooltipProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n radialVars,\n setHighlightedArea,\n getRadialBarProps,\n getRadialChartProps,\n } = useRadialChart({\n data,\n dataKey,\n endAngle,\n fillOpacity,\n innerRadius,\n outerRadius,\n startAngle,\n styles,\n chartProps,\n radialBarProps,\n })\n const { getContainerProps } = useChart({ containerProps })\n const { getTooltipProps, tooltipProps: computedTooltipProps } =\n useChartTooltip({\n styles,\n tooltipAnimationDuration,\n tooltipProps,\n })\n const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({\n legendProps,\n })\n const { getLabelLineProps } = useChartLabelList({ styles, labelListProps })\n const { getPolarGridProps } = usePolarGrid({\n strokeDasharray,\n styles,\n polarGridProps,\n })\n\n const labelLists = useMemo(\n () =>\n labelListProps.map((_, index) => (\n <LabelList\n key={`labelList-${index}`}\n {...getLabelLineProps({\n className: \"ui-radial-chart__label-list\",\n index,\n })}\n />\n )),\n [getLabelLineProps, labelListProps],\n )\n\n return (\n <ChartProvider value={{ styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-radial-chart\", className)}\n __css={{ maxW: \"full\", vars: radialVars, ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-radial-chart__container\" })}\n >\n <RechartsRadialChart\n {...getRadialChartProps({\n className: \"ui-radial-chart__chart\",\n })}\n >\n {withPolarGrid ? (\n <PolarGrid\n {...getPolarGridProps({\n className: \"ui-radial-chart__polar-grid\",\n })}\n />\n ) : null}\n\n <RadialBar\n {...getRadialBarProps({\n className: \"ui-radial-chart__radial-bar\",\n })}\n >\n {labelLists}\n </RadialBar>\n\n {withLegend ? (\n <Legend\n content={({ payload }) => (\n <ChartLegend\n className=\"ui-radial-chart__legend\"\n payload={payload}\n onHighlight={setHighlightedArea}\n {...computedLegendProps}\n />\n )}\n {...getLegendProps()}\n />\n ) : null}\n\n {withTooltip ? (\n <Tooltip\n content={({ payload }) => (\n <ChartTooltip\n className=\"ui-radial-chart__tooltip\"\n isRadialChart={\n tooltipDataSource === \"segment\" ? true : false\n }\n payload={tooltipDataSource === \"segment\" ? payload : data}\n unit={unit}\n valueFormatter={valueFormatter}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n </RechartsRadialChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n\nRadialChart.displayName = \"RadialChart\"\nRadialChart.__ui__ = \"RadialChart\"\n"],"mappings":"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","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/use-pie-chart.ts"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n PropGetter,\n RequiredPropGetter,\n} from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport type { CellProps, PieChartProps, PieProps } from \"./chart.types\"\nimport { getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { getClassName, getComponentProps } from \"./chart-utils\"\nimport { pieChartLabel, pieChartLabelLine } from \"./pie-chart-label\"\nimport { pieChartProperties, pieProperties } from \"./rechart-properties\"\n\nexport interface UsePieChartOptions {\n /**\n * Chart data.\n */\n data: CellProps[]\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 * 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 * Determines whether labels should be displayed as percentages.\n *\n * @default false\n */\n isPercent?: boolean\n /**\n * A function to format labels.\n */\n labelFormatter?: (value: number) => string\n /**\n * Distance between chart and label.\n */\n labelOffset?: number\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 * Controls angle at which chart starts.\n *\n * @default 90\n */\n startAngle?: number\n /**\n * Stroke width for the chart pies.\n *\n * @default 1\n */\n strokeWidth?: number\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 * Determines whether each segment should have associated label.\n *\n * @default false\n */\n withLabels?: boolean\n /**\n * Props for the cell.\n */\n cellProps?: Partial<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\ninterface UsePieChartProps extends UsePieChartOptions {\n styles: Dict<CSSUIObject | undefined>\n}\n\nexport const usePieChart = ({\n data,\n endAngle = -270,\n fillOpacity = 1,\n innerRadius = \"0%\",\n isPercent = false,\n labelFormatter,\n labelOffset,\n withLabels = false,\n outerRadius = withLabels ? \"80%\" : \"100%\",\n paddingAngle = 0,\n startAngle = 90,\n strokeWidth = 1,\n styles,\n withLabelLines = false,\n ...rest\n}: UsePieChartProps) => {\n const { theme } = useTheme()\n const [highlightedArea, setHighlightedArea] = useState<null | string>(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[\"vars\"] = useMemo(\n () =>\n data.map(({ color }, index) => ({\n name: `cell-${index}`,\n token: \"colors\",\n value: color ?? \"transparent\",\n })),\n [data],\n )\n\n const pieVars: CSSUIProps[\"vars\"] = useMemo(\n () =>\n [\n ...cellColors,\n { name: \"fill-opacity\", value: fillOpacity },\n ] as Required<CSSUIProps>[\"vars\"],\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: \"$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 = { fillOpacity: 0.3, strokeOpacity: 0, ...dimCell }\n\n return getClassName(resolvedDimCell)(theme)\n }, [dimCell, theme])\n\n const activeShapeProps = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [{ _focus: { outline: \"none\" }, ...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 isPercent,\n labelFormatter,\n labelOffset,\n styles: styles.label,\n labelProps,\n ...props,\n }),\n [isPercent, labelOffset, labelProps, styles.label, labelFormatter],\n )\n\n const labelLine = useCallback(\n (props: any) => {\n return pieChartLabelLine({\n labelOffset,\n styles: styles.labelLine,\n labelLineProps,\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 = getVar(`cell-${index}`)(theme)\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 className,\n color,\n }\n }),\n [\n cellClassName,\n data,\n dimCellClassName,\n highlightedArea,\n shouldHighlight,\n theme,\n ],\n )\n\n const getPieChartProps: PropGetter<\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: RequiredPropGetter<\n Partial<Recharts.PieProps>,\n Omit<Recharts.PieProps, \"ref\">\n > = useCallback(\n ({ className, ...props }, ref = null) => ({\n ref,\n className: cx(className, pieClassName),\n activeShape: activeShapeProps,\n data,\n dataKey: \"value\",\n endAngle,\n inactiveShape: inactiveShapeProps,\n innerRadius,\n isAnimationActive: false,\n label: withLabels ? label : false,\n labelLine: withLabelLines ? labelLine : false,\n outerRadius,\n paddingAngle,\n rootTabIndex: -1,\n startAngle,\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: RequiredPropGetter<\n { index: number } & Omit<Recharts.CellProps, \"ref\">,\n Recharts.CellProps\n > = useCallback(\n ({ className: classNameProp, index, ...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 setHighlightedArea,\n getCellProps,\n getPieChartProps,\n getPieProps,\n }\n}\n\nexport type UsePieChartReturn = ReturnType<typeof usePieChart>\n"],"mappings":"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","names":["_a","dimCell"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/donut-chart.tsx"],"sourcesContent":["import type { PieChartProps } from \"./pie-chart\"\nimport type { UseChartLabelOptions } from \"./use-chart-label\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n Cell,\n Label,\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 { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLabel } from \"./use-chart-label\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePieChart } from \"./use-pie-chart\"\n\ninterface 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 interface DonutChartProps\n extends PieChartProps,\n DonutChartOptions,\n UseChartLabelOptions {}\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/data-display/donut-chart\n */\nexport const DonutChart = forwardRef<DonutChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"DonutChart\", props)\n const {\n className,\n data,\n endAngle,\n withLabels,\n innerRadius = withLabels ? \"60%\" : \"80%\",\n isPercent,\n labelFormatter,\n labelOffset,\n outerRadius,\n paddingAngle,\n startAngle,\n strokeWidth,\n tooltipAnimationDuration,\n tooltipDataSource = \"all\",\n unit,\n valueFormatter,\n withLabelLines,\n withLegend = false,\n withTooltip = true,\n cellProps,\n chartProps,\n containerProps,\n labelProps,\n legendProps,\n pieProps,\n tooltipProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n pieVars,\n setHighlightedArea,\n getCellProps,\n getPieChartProps,\n getPieProps,\n } = usePieChart({\n data,\n endAngle,\n innerRadius,\n isPercent,\n labelFormatter,\n labelOffset,\n outerRadius,\n paddingAngle,\n startAngle,\n strokeWidth,\n styles,\n withLabelLines,\n withLabels,\n cellProps,\n chartProps,\n pieProps,\n })\n const { getContainerProps } = useChart({ containerProps })\n const { getTooltipProps, tooltipProps: computedTooltipProps } =\n useChartTooltip({\n styles,\n tooltipAnimationDuration,\n tooltipProps,\n })\n const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({\n legendProps,\n })\n const { getLabelProps } = useChartLabel({ styles, labelProps })\n\n const cells = useMemo(\n () =>\n data.map(({ name }, index) => (\n <Cell\n key={`donut-cell-${name}`}\n {...getCellProps({ className: \"ui-donut-chart__cell\", index })}\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 __css={{ maxW: \"full\", vars: pieVars, ...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 })}\n >\n {cells}\n <Label\n {...getLabelProps({ className: \"ui-donut-chart__label\" })}\n />\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 unit={unit}\n valueFormatter={valueFormatter}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n </RechartsPieChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n\nDonutChart.displayName = \"DonutChart\"\nDonutChart.__ui__ = \"DonutChart\"\n"],"mappings":"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","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/pie-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TooltipDataSourceType } from \"./chart.types\"\nimport type { UseChartProps } from \"./use-chart\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport type { UsePieChartOptions } from \"./use-pie-chart\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\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 { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePieChart } from \"./use-pie-chart\"\n\ninterface PieChartOptions {\n /**\n * Determines which data is displayed in the tooltip.\n *\n * @default 'all'\n */\n tooltipDataSource?: TooltipDataSourceType\n /**\n * Unit displayed next to each value in tooltip.\n */\n unit?: string\n /**\n * If `true`, legend is visible.\n *\n * @default false\n */\n withLegend?: boolean\n /**\n * If `true`, tooltip is visible.\n *\n * @default true\n */\n withTooltip?: boolean\n}\n\nexport interface PieChartProps\n extends Omit<HTMLUIProps, \"fillOpacity\" | \"strokeWidth\">,\n ThemeProps<\"pieChart\">,\n PieChartOptions,\n UsePieChartOptions,\n Omit<UseChartTooltipOptions, \"labelFormatter\">,\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/data-display/pie-chart\n */\nexport const PieChart = forwardRef<PieChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"PieChart\", props)\n const {\n className,\n data,\n endAngle,\n innerRadius,\n isPercent,\n labelFormatter,\n labelOffset,\n outerRadius,\n paddingAngle,\n startAngle,\n strokeWidth,\n tooltipAnimationDuration,\n tooltipDataSource = \"all\",\n unit,\n valueFormatter,\n withLabelLines,\n withLabels,\n withLegend = false,\n withTooltip = true,\n cellProps,\n chartProps,\n containerProps,\n legendProps,\n pieProps,\n tooltipProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n pieVars,\n setHighlightedArea,\n getCellProps,\n getPieChartProps,\n getPieProps,\n } = usePieChart({\n data,\n endAngle,\n innerRadius,\n isPercent,\n labelFormatter,\n labelOffset,\n outerRadius,\n paddingAngle,\n startAngle,\n strokeWidth,\n styles,\n withLabelLines,\n withLabels,\n cellProps,\n chartProps,\n pieProps,\n })\n const { getContainerProps } = useChart({ containerProps })\n const { getTooltipProps, tooltipProps: computedTooltipProps } =\n useChartTooltip({\n styles,\n tooltipAnimationDuration,\n tooltipProps,\n })\n const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({\n legendProps,\n })\n\n const cells = useMemo(\n () =>\n data.map(({ name }, index) => (\n <Cell\n key={`pie-cell-${name}`}\n {...getCellProps({ className: \"ui-pie-chart__cell\", index })}\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 __css={{ maxW: \"full\", vars: pieVars, ...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 })}\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 unit={unit}\n valueFormatter={valueFormatter}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n </RechartsPieChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n\nPieChart.displayName = \"PieChart\"\nPieChart.__ui__ = \"PieChart\"\n"],"mappings":"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","names":[]}
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|