npm - @mantine/charts - Versions diffs - 9.6.1 → 9.6.3 - Mend

@mantine/charts 9.6.1 → 9.6.3

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.

Files changed (30) hide show

package/cjs/BarsList/BarsList.cjs.map +1 -1
package/cjs/BubbleChart/BubbleChart.cjs +1 -1
package/cjs/BubbleChart/BubbleChart.cjs.map +1 -1
package/cjs/CompositeChart/CompositeChart.cjs +1 -1
package/cjs/CompositeChart/CompositeChart.cjs.map +1 -1
package/cjs/DonutChart/DonutChart.cjs.map +1 -1
package/cjs/GaugeChart/GaugeChart.cjs +22 -10
package/cjs/GaugeChart/GaugeChart.cjs.map +1 -1
package/cjs/Heatmap/Heatmap.cjs.map +1 -1
package/cjs/LineChart/LineChart.cjs +1 -1
package/cjs/LineChart/LineChart.cjs.map +1 -1
package/cjs/PieChart/PieChart.cjs.map +1 -1
package/esm/BarsList/BarsList.mjs.map +1 -1
package/esm/BubbleChart/BubbleChart.mjs +1 -1
package/esm/BubbleChart/BubbleChart.mjs.map +1 -1
package/esm/CompositeChart/CompositeChart.mjs +1 -1
package/esm/CompositeChart/CompositeChart.mjs.map +1 -1
package/esm/DonutChart/DonutChart.mjs.map +1 -1
package/esm/GaugeChart/GaugeChart.mjs +23 -11
package/esm/GaugeChart/GaugeChart.mjs.map +1 -1
package/esm/Heatmap/Heatmap.mjs.map +1 -1
package/esm/LineChart/LineChart.mjs +1 -1
package/esm/LineChart/LineChart.mjs.map +1 -1
package/esm/PieChart/PieChart.mjs.map +1 -1
package/lib/BarsList/BarsList.d.ts +1 -1
package/lib/DonutChart/DonutChart.d.ts +1 -1
package/lib/GaugeChart/GaugeChart.d.ts +2 -2
package/lib/Heatmap/Heatmap.d.ts +1 -1
package/lib/PieChart/PieChart.d.ts +2 -2
package/package.json +3 -3

package/cjs/LineChart/LineChart.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LineChart.cjs","names":["createVarsResolver","getThemeColor","factory","useProps","useMantineTheme","useState","useResolvedStylesApi","useStyles","useId","Line","PointLabel","ReferenceLine","ReferenceArea","ReferenceDot","Box","ResponsiveContainer","ReChartsLineChart","Legend","ChartLegend","XAxis","Label","YAxis","CartesianGrid","Tooltip","ChartTooltip","ChartBrush","classes"],"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n CartesianGrid,\n Label,\n Legend,\n Line,\n LineProps,\n LineChart as ReChartsLineChart,\n ReferenceArea,\n ReferenceDot,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useId } from '@mantine/hooks';\nimport { ChartBrush } from '../ChartBrush';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { PointLabel } from '../PointLabel/PointLabel';\nimport type {\n BaseChartStylesNames,\n ChartSeries,\n GridChartBaseProps,\n MantineChartDotProps,\n} from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport type LineChartType = 'default' \| 'gradient';\n\nexport interface LineChartGradientStop {\n offset: number;\n color: MantineColor;\n}\n\nexport type LineChartCurveType =\n \| 'bump'\n \| 'linear'\n \| 'natural'\n \| 'monotone'\n \| 'step'\n \| 'stepBefore'\n \| 'stepAfter';\n\nexport interface LineChartSeries extends ChartSeries {\n strokeDasharray?: string \| number;\n curveType?: LineChartCurveType;\n}\n\nexport type LineChartStylesNames =\n \| 'line'\n \| BaseChartStylesNames\n \| ChartLegendStylesNames\n \| ChartTooltipStylesNames;\n\nexport type LineChartCssVariables = {\n root: '--chart-text-color' \| '--chart-grid-color';\n};\n\nexport interface LineChartProps\n extends BoxProps, GridChartBaseProps, StylesApiProps<LineChartFactory>, ElementProps<'div'> {\n /** Data used to display chart /\n data: Record<string, any>[];\n\n /* An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. /\n series: LineChartSeries[];\n\n /* Controls styles of the line @default 'default' /\n type?: LineChartType;\n\n /* Data used to generate gradient stops @default [{ offset: 0, color: 'red' }, { offset: 100, color: 'blue' }] /\n gradientStops?: LineChartGradientStop[];\n\n /* Type of the curve @default 'monotone' /\n curveType?: LineChartCurveType;\n\n /* Controls fill opacity of all lines @default 1 /\n fillOpacity?: number;\n\n /* Determines whether dots should be displayed @default true /\n withDots?: boolean;\n\n /* Props passed down to all dots. Ignored if `withDots={false}` is set. /\n dotProps?: MantineChartDotProps;\n\n /* Props passed down to all active dots. Ignored if `withDots={false}` is set. /\n activeDotProps?: MantineChartDotProps;\n\n /* Stroke width for the chart lines @default 2 /\n strokeWidth?: number;\n\n /* Props passed down to recharts `LineChart` component /\n lineChartProps?: React.ComponentProps<typeof ReChartsLineChart>;\n\n /* Determines whether points with `null` values should be connected @default true /\n connectNulls?: boolean;\n\n /* Additional components that are rendered inside recharts `LineChart` component /\n children?: React.ReactNode;\n\n /* Props passed down to recharts `Line` component /\n lineProps?:\n \| ((series: LineChartSeries) => Partial<Omit<LineProps, 'ref'>>)\n \| Partial<Omit<LineProps, 'ref'>>;\n\n /* Determines whether each point should have associated label @default false */\n withPointLabels?: boolean;\n}\n\nexport type LineChartFactory = Factory<{\n props: LineChartProps;\n ref: HTMLDivElement;\n stylesNames: LineChartStylesNames;\n vars: LineChartCssVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n fillOpacity: 1,\n tickLine: 'y',\n strokeDasharray: '5 5',\n gridAxis: 'x',\n withDots: true,\n connectNulls: true,\n strokeWidth: 2,\n curveType: 'monotone',\n gradientStops: [\n { offset: 0, color: 'red' },\n { offset: 100, color: 'blue' },\n ],\n accessibilityLayer: true,\n} satisfies Partial<LineChartProps>;\n\nconst varsResolver = createVarsResolver<LineChartFactory>((theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n}));\n\nexport const LineChart = factory<LineChartFactory>((_props) => {\n const props = useProps('LineChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withLegend,\n legendProps,\n series,\n onMouseLeave,\n dataKey,\n withTooltip,\n withXAxis,\n withYAxis,\n gridAxis,\n tickLine,\n xAxisProps,\n yAxisProps,\n unit,\n tooltipAnimationDuration,\n strokeDasharray,\n gridProps,\n tooltipProps,\n referenceLines,\n referenceAreas,\n referenceDots,\n withDots,\n dotProps,\n activeDotProps,\n strokeWidth,\n lineChartProps,\n connectNulls,\n fillOpacity,\n curveType,\n orientation,\n dir,\n valueFormatter,\n children,\n lineProps,\n xAxisLabel,\n yAxisLabel,\n type,\n gradientStops,\n withRightYAxis,\n rightYAxisLabel,\n rightYAxisProps,\n withPointLabels,\n attributes,\n gridColor,\n accessibilityLayer,\n withBrush,\n brushProps,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' \|\| tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' \|\| tickLine === 'xy');\n const [highlightedArea, setHighlightedArea] = useState<string \| number \| null>(null);\n const shouldHighlight = highlightedArea !== null;\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<LineChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const getStyles = useStyles<LineChartFactory>({\n name: 'LineChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const id = useId();\n const gradientId = `line-chart-gradient-${id}`;\n const stops = gradientStops?.map((stop) => (\n <stop\n key={stop.color}\n offset={`${stop.offset}%`}\n stopColor={getThemeColor(stop.color, theme)}\n />\n ));\n\n const lines = series.map((item) => {\n const color = getThemeColor(item.color, theme);\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n return (\n <Line\n {...getStyles('line')}\n key={item.name}\n name={item.name}\n dataKey={item.name}\n dot={\n withDots\n ? {\n fillOpacity: dimmed ? 0 : 1,\n strokeOpacity: dimmed ? 0 : 1,\n strokeWidth: 1,\n fill: type === 'gradient' ? 'var(--mantine-color-gray-7)' : color,\n stroke: type === 'gradient' ? 'white' : color,\n ...dotProps,\n }\n : false\n }\n activeDot={\n withDots\n ? {\n fill: type === 'gradient' ? 'var(--mantine-color-gray-7)' : color,\n stroke: type === 'gradient' ? 'white' : color,\n ...activeDotProps,\n }\n : false\n }\n fill={color}\n stroke={type === 'gradient' ? `url(#${gradientId})` : color}\n strokeWidth={strokeWidth}\n isAnimationActive={false}\n fillOpacity={dimmed ? 0 : fillOpacity}\n strokeOpacity={dimmed ? 0.5 : fillOpacity}\n connectNulls={connectNulls}\n type={item.curveType ?? curveType}\n strokeDasharray={item.strokeDasharray}\n yAxisId={item.yAxisId \|\| undefined}\n label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n {...(typeof lineProps === 'function' ? lineProps(item) : lineProps)}\n />\n );\n });\n\n const referenceLinesItems = referenceLines?.map(\n ({ color: lineColor, labelPosition, ...line }, index) => {\n const color = getThemeColor(lineColor, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={lineColor ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n yAxisId={line.yAxisId \|\| undefined}\n {...line}\n label={{\n fill: lineColor ? color : 'currentColor',\n fontSize: 12,\n position: labelPosition ?? 'insideBottomLeft',\n ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n }}\n {...getStyles('referenceLine')}\n />\n );\n }\n );\n\n const referenceAreasItems = referenceAreas?.map(\n ({ color: areaColor, labelPosition, ...area }, index) => {\n const color = getThemeColor(areaColor, theme);\n return (\n <ReferenceArea\n key={index}\n fill={areaColor ? color : 'var(--chart-grid-color)'}\n fillOpacity={0.2}\n stroke={areaColor ? color : 'var(--chart-grid-color)'}\n strokeOpacity={0.6}\n yAxisId={area.yAxisId \|\| undefined}\n {...area}\n label={{\n fill: areaColor ? color : 'currentColor',\n fontSize: 12,\n position: labelPosition ?? 'insideTop',\n ...(typeof area.label === 'object' ? area.label : { value: area.label }),\n }}\n {...getStyles('referenceArea')}\n />\n );\n }\n );\n\n const referenceDotsItems = referenceDots?.map(\n ({ color: dotColor, labelPosition, ...dot }, index) => {\n const color = getThemeColor(dotColor, theme);\n return (\n <ReferenceDot\n key={index}\n r={5}\n fill={dotColor ? color : 'var(--chart-grid-color)'}\n stroke=\"var(--mantine-color-body)\"\n strokeWidth={2}\n yAxisId={dot.yAxisId \|\| undefined}\n {...dot}\n label={{\n fill: dotColor ? color : 'currentColor',\n fontSize: 12,\n position: labelPosition ?? 'top',\n ...(typeof dot.label === 'object' ? dot.label : { value: dot.label }),\n }}\n {...getStyles('referenceDot')}\n />\n );\n }\n );\n\n const sharedYAxisProps = {\n axisLine: false,\n ...(orientation === 'vertical'\n ? { dataKey, type: 'category' as const }\n : { type: 'number' as const }),\n tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n allowDecimals: true,\n unit,\n tickFormatter: orientation === 'vertical' ? undefined : valueFormatter,\n ...getStyles('axis'),\n };\n\n return (\n <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir \|\| 'ltr'} {...others}>\n <ResponsiveContainer {...getStyles('container')}>\n <ReChartsLineChart\n data={data}\n layout={orientation}\n margin={{\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel ? 5 : undefined,\n }}\n accessibilityLayer={accessibilityLayer}\n {...lineChartProps}\n >\n {referenceAreasItems}\n {type === 'gradient' && (\n <defs>\n <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n {stops}\n </linearGradient>\n </defs>\n )}\n\n {withLegend && (\n <Legend\n verticalAlign=\"top\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign \|\| 'top'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n showColor={type !== 'gradient'}\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n <XAxis\n hide={!withXAxis}\n {...(orientation === 'vertical' ? { type: 'number' } : { dataKey })}\n tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n stroke=\"\"\n interval=\"preserveStartEnd\"\n tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n minTickGap={5}\n tickFormatter={orientation === 'vertical' ? valueFormatter : undefined}\n {...getStyles('axis')}\n {...xAxisProps}\n >\n {xAxisLabel && (\n <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n {xAxisLabel}\n </Label>\n )}\n {xAxisProps?.children}\n </XAxis>\n\n <YAxis\n // yAxisId=\"left\"\n // orientation=\"left\"\n tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withYAxis}\n {...sharedYAxisProps}\n {...yAxisProps}\n >\n {yAxisLabel && (\n <Label\n position=\"insideLeft\"\n angle={-90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {yAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <YAxis\n yAxisId=\"right\"\n orientation=\"right\"\n tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withRightYAxis}\n {...sharedYAxisProps}\n {...rightYAxisProps}\n >\n {rightYAxisLabel && (\n <Label\n position=\"insideRight\"\n angle={90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {rightYAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <CartesianGrid\n strokeDasharray={strokeDasharray as string}\n vertical={gridAxis === 'y' \|\| gridAxis === 'xy'}\n horizontal={gridAxis === 'x' \|\| gridAxis === 'xy'}\n {...getStyles('grid')}\n {...gridProps}\n />\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={tooltipAnimationDuration !== 0}\n position={orientation === 'vertical' ? {} : { y: 0 }}\n cursor={{\n stroke: 'var(--chart-grid-color)',\n strokeWidth: 1,\n strokeDasharray,\n }}\n content={({ label, payload, labelFormatter }) => (\n <ChartTooltip\n label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n payload={payload}\n unit={unit}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n valueFormatter={valueFormatter}\n showColor={type !== 'gradient'}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {lines}\n {referenceLinesItems}\n {referenceDotsItems}\n {withBrush && (\n <ChartBrush\n dataKey={dataKey}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n {...brushProps}\n />\n )}\n {children}\n </ReChartsLineChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nLineChart.displayName = '@mantine/charts/LineChart';\nLineChart.classes = classes;\nLineChart.varsResolver = varsResolver;\n\nexport namespace LineChart {\n export type Props = LineChartProps;\n export type CssVariables = LineChartCssVariables;\n export type Factory = LineChartFactory;\n export type Series = LineChartSeries;\n export type StylesNames = LineChartStylesNames;\n export type CurveType = LineChartCurveType;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"LineChart.cjs","names":["createVarsResolver","getThemeColor","factory","useProps","useMantineTheme","useState","useResolvedStylesApi","useStyles","useId","Line","PointLabel","ReferenceLine","ReferenceArea","ReferenceDot","Box","ResponsiveContainer","ReChartsLineChart","Legend","ChartLegend","XAxis","Label","YAxis","CartesianGrid","Tooltip","ChartTooltip","ChartBrush","classes"],"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n CartesianGrid,\n Label,\n Legend,\n Line,\n LineProps,\n LineChart as ReChartsLineChart,\n ReferenceArea,\n ReferenceDot,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useId } from '@mantine/hooks';\nimport { ChartBrush } from '../ChartBrush';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { PointLabel } from '../PointLabel/PointLabel';\nimport type {\n BaseChartStylesNames,\n ChartSeries,\n GridChartBaseProps,\n MantineChartDotProps,\n} from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport type LineChartType = 'default' \| 'gradient';\n\nexport interface LineChartGradientStop {\n offset: number;\n color: MantineColor;\n}\n\nexport type LineChartCurveType =\n \| 'bump'\n \| 'linear'\n \| 'natural'\n \| 'monotone'\n \| 'step'\n \| 'stepBefore'\n \| 'stepAfter';\n\nexport interface LineChartSeries extends ChartSeries {\n strokeDasharray?: string \| number;\n curveType?: LineChartCurveType;\n}\n\nexport type LineChartStylesNames =\n \| 'line'\n \| BaseChartStylesNames\n \| ChartLegendStylesNames\n \| ChartTooltipStylesNames;\n\nexport type LineChartCssVariables = {\n root: '--chart-text-color' \| '--chart-grid-color';\n};\n\nexport interface LineChartProps\n extends BoxProps, GridChartBaseProps, StylesApiProps<LineChartFactory>, ElementProps<'div'> {\n /** Data used to display chart /\n data: Record<string, any>[];\n\n /* An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. /\n series: LineChartSeries[];\n\n /* Controls styles of the line @default 'default' /\n type?: LineChartType;\n\n /* Data used to generate gradient stops @default [{ offset: 0, color: 'red' }, { offset: 100, color: 'blue' }] /\n gradientStops?: LineChartGradientStop[];\n\n /* Type of the curve @default 'monotone' /\n curveType?: LineChartCurveType;\n\n /* Controls fill opacity of all lines @default 1 /\n fillOpacity?: number;\n\n /* Determines whether dots should be displayed @default true /\n withDots?: boolean;\n\n /* Props passed down to all dots. Ignored if `withDots={false}` is set. /\n dotProps?: MantineChartDotProps;\n\n /* Props passed down to all active dots. Ignored if `withDots={false}` is set. /\n activeDotProps?: MantineChartDotProps;\n\n /* Stroke width for the chart lines @default 2 /\n strokeWidth?: number;\n\n /* Props passed down to recharts `LineChart` component /\n lineChartProps?: React.ComponentProps<typeof ReChartsLineChart>;\n\n /* Determines whether points with `null` values should be connected @default true /\n connectNulls?: boolean;\n\n /* Additional components that are rendered inside recharts `LineChart` component /\n children?: React.ReactNode;\n\n /* Props passed down to recharts `Line` component /\n lineProps?:\n \| ((series: LineChartSeries) => Partial<Omit<LineProps, 'ref'>>)\n \| Partial<Omit<LineProps, 'ref'>>;\n\n /* Determines whether each point should have associated label @default false */\n withPointLabels?: boolean;\n}\n\nexport type LineChartFactory = Factory<{\n props: LineChartProps;\n ref: HTMLDivElement;\n stylesNames: LineChartStylesNames;\n vars: LineChartCssVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n fillOpacity: 1,\n tickLine: 'y',\n strokeDasharray: '5 5',\n gridAxis: 'x',\n withDots: true,\n connectNulls: true,\n strokeWidth: 2,\n curveType: 'monotone',\n gradientStops: [\n { offset: 0, color: 'red' },\n { offset: 100, color: 'blue' },\n ],\n accessibilityLayer: true,\n} satisfies Partial<LineChartProps>;\n\nconst varsResolver = createVarsResolver<LineChartFactory>((theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n}));\n\nexport const LineChart = factory<LineChartFactory>((_props) => {\n const props = useProps('LineChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withLegend,\n legendProps,\n series,\n onMouseLeave,\n dataKey,\n withTooltip,\n withXAxis,\n withYAxis,\n gridAxis,\n tickLine,\n xAxisProps,\n yAxisProps,\n unit,\n tooltipAnimationDuration,\n strokeDasharray,\n gridProps,\n tooltipProps,\n referenceLines,\n referenceAreas,\n referenceDots,\n withDots,\n dotProps,\n activeDotProps,\n strokeWidth,\n lineChartProps,\n connectNulls,\n fillOpacity,\n curveType,\n orientation,\n dir,\n valueFormatter,\n children,\n lineProps,\n xAxisLabel,\n yAxisLabel,\n type,\n gradientStops,\n withRightYAxis,\n rightYAxisLabel,\n rightYAxisProps,\n withPointLabels,\n attributes,\n gridColor,\n textColor,\n accessibilityLayer,\n withBrush,\n brushProps,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' \|\| tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' \|\| tickLine === 'xy');\n const [highlightedArea, setHighlightedArea] = useState<string \| number \| null>(null);\n const shouldHighlight = highlightedArea !== null;\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<LineChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const getStyles = useStyles<LineChartFactory>({\n name: 'LineChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const id = useId();\n const gradientId = `line-chart-gradient-${id}`;\n const stops = gradientStops?.map((stop) => (\n <stop\n key={stop.color}\n offset={`${stop.offset}%`}\n stopColor={getThemeColor(stop.color, theme)}\n />\n ));\n\n const lines = series.map((item) => {\n const color = getThemeColor(item.color, theme);\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n return (\n <Line\n {...getStyles('line')}\n key={item.name}\n name={item.name}\n dataKey={item.name}\n dot={\n withDots\n ? {\n fillOpacity: dimmed ? 0 : 1,\n strokeOpacity: dimmed ? 0 : 1,\n strokeWidth: 1,\n fill: type === 'gradient' ? 'var(--mantine-color-gray-7)' : color,\n stroke: type === 'gradient' ? 'white' : color,\n ...dotProps,\n }\n : false\n }\n activeDot={\n withDots\n ? {\n fill: type === 'gradient' ? 'var(--mantine-color-gray-7)' : color,\n stroke: type === 'gradient' ? 'white' : color,\n ...activeDotProps,\n }\n : false\n }\n fill={color}\n stroke={type === 'gradient' ? `url(#${gradientId})` : color}\n strokeWidth={strokeWidth}\n isAnimationActive={false}\n fillOpacity={dimmed ? 0 : fillOpacity}\n strokeOpacity={dimmed ? 0.5 : fillOpacity}\n connectNulls={connectNulls}\n type={item.curveType ?? curveType}\n strokeDasharray={item.strokeDasharray}\n yAxisId={item.yAxisId \|\| undefined}\n label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n {...(typeof lineProps === 'function' ? lineProps(item) : lineProps)}\n />\n );\n });\n\n const referenceLinesItems = referenceLines?.map(\n ({ color: lineColor, labelPosition, ...line }, index) => {\n const color = getThemeColor(lineColor, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={lineColor ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n yAxisId={line.yAxisId \|\| undefined}\n {...line}\n label={{\n fill: lineColor ? color : 'currentColor',\n fontSize: 12,\n position: labelPosition ?? 'insideBottomLeft',\n ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n }}\n {...getStyles('referenceLine')}\n />\n );\n }\n );\n\n const referenceAreasItems = referenceAreas?.map(\n ({ color: areaColor, labelPosition, ...area }, index) => {\n const color = getThemeColor(areaColor, theme);\n return (\n <ReferenceArea\n key={index}\n fill={areaColor ? color : 'var(--chart-grid-color)'}\n fillOpacity={0.2}\n stroke={areaColor ? color : 'var(--chart-grid-color)'}\n strokeOpacity={0.6}\n yAxisId={area.yAxisId \|\| undefined}\n {...area}\n label={{\n fill: areaColor ? color : 'currentColor',\n fontSize: 12,\n position: labelPosition ?? 'insideTop',\n ...(typeof area.label === 'object' ? area.label : { value: area.label }),\n }}\n {...getStyles('referenceArea')}\n />\n );\n }\n );\n\n const referenceDotsItems = referenceDots?.map(\n ({ color: dotColor, labelPosition, ...dot }, index) => {\n const color = getThemeColor(dotColor, theme);\n return (\n <ReferenceDot\n key={index}\n r={5}\n fill={dotColor ? color : 'var(--chart-grid-color)'}\n stroke=\"var(--mantine-color-body)\"\n strokeWidth={2}\n yAxisId={dot.yAxisId \|\| undefined}\n {...dot}\n label={{\n fill: dotColor ? color : 'currentColor',\n fontSize: 12,\n position: labelPosition ?? 'top',\n ...(typeof dot.label === 'object' ? dot.label : { value: dot.label }),\n }}\n {...getStyles('referenceDot')}\n />\n );\n }\n );\n\n const sharedYAxisProps = {\n axisLine: false,\n ...(orientation === 'vertical'\n ? { dataKey, type: 'category' as const }\n : { type: 'number' as const }),\n tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n allowDecimals: true,\n unit,\n tickFormatter: orientation === 'vertical' ? undefined : valueFormatter,\n ...getStyles('axis'),\n };\n\n return (\n <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir \|\| 'ltr'} {...others}>\n <ResponsiveContainer {...getStyles('container')}>\n <ReChartsLineChart\n data={data}\n layout={orientation}\n margin={{\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel ? 5 : undefined,\n }}\n accessibilityLayer={accessibilityLayer}\n {...lineChartProps}\n >\n {referenceAreasItems}\n {type === 'gradient' && (\n <defs>\n <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n {stops}\n </linearGradient>\n </defs>\n )}\n\n {withLegend && (\n <Legend\n verticalAlign=\"top\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign \|\| 'top'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n showColor={type !== 'gradient'}\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n <XAxis\n hide={!withXAxis}\n {...(orientation === 'vertical' ? { type: 'number' } : { dataKey })}\n tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n stroke=\"\"\n interval=\"preserveStartEnd\"\n tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n minTickGap={5}\n tickFormatter={orientation === 'vertical' ? valueFormatter : undefined}\n {...getStyles('axis')}\n {...xAxisProps}\n >\n {xAxisLabel && (\n <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n {xAxisLabel}\n </Label>\n )}\n {xAxisProps?.children}\n </XAxis>\n\n <YAxis\n // yAxisId=\"left\"\n // orientation=\"left\"\n tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withYAxis}\n {...sharedYAxisProps}\n {...yAxisProps}\n >\n {yAxisLabel && (\n <Label\n position=\"insideLeft\"\n angle={-90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {yAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <YAxis\n yAxisId=\"right\"\n orientation=\"right\"\n tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withRightYAxis}\n {...sharedYAxisProps}\n {...rightYAxisProps}\n >\n {rightYAxisLabel && (\n <Label\n position=\"insideRight\"\n angle={90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {rightYAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <CartesianGrid\n strokeDasharray={strokeDasharray as string}\n vertical={gridAxis === 'y' \|\| gridAxis === 'xy'}\n horizontal={gridAxis === 'x' \|\| gridAxis === 'xy'}\n {...getStyles('grid')}\n {...gridProps}\n />\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={tooltipAnimationDuration !== 0}\n position={orientation === 'vertical' ? {} : { y: 0 }}\n cursor={{\n stroke: 'var(--chart-grid-color)',\n strokeWidth: 1,\n strokeDasharray,\n }}\n content={({ label, payload, labelFormatter }) => (\n <ChartTooltip\n label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n payload={payload}\n unit={unit}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n valueFormatter={valueFormatter}\n showColor={type !== 'gradient'}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {lines}\n {referenceLinesItems}\n {referenceDotsItems}\n {withBrush && (\n <ChartBrush\n dataKey={dataKey}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n {...brushProps}\n />\n )}\n {children}\n </ReChartsLineChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nLineChart.displayName = '@mantine/charts/LineChart';\nLineChart.classes = classes;\nLineChart.varsResolver = varsResolver;\n\nexport namespace LineChart {\n export type Props = LineChartProps;\n export type CssVariables = LineChartCssVariables;\n export type Factory = LineChartFactory;\n export type Series = LineChartSeries;\n export type StylesNames = LineChartStylesNames;\n export type CurveType = LineChartCurveType;\n}\n"],"mappings":"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"}

package/cjs/PieChart/PieChart.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PieChart.cjs","names":["createVarsResolver","getThemeColor","rem","classes","factory","useProps","useMantineTheme","useState","useStyles","useResolvedStylesApi","getPieChartData","Box","ResponsiveContainer","ReChartsPieChart","Pie","Tooltip","ChartTooltip","Legend","ChartLegend"],"sources":["../../src/PieChart/PieChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n Legend,\n LegendProps,\n Pie,\n PieLabel,\n PieProps,\n PieChart as ReChartsPieChart,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport { getPieChartData } from '../utils';\nimport classes from './PieChart.module.css';\n\nexport interface PieChartCell {\n key?: string \| number;\n name: string;\n value: number;\n color: MantineColor;\n}\n\nexport type PieChartStylesNames = 'root' \| ChartTooltipStylesNames \| ChartLegendStylesNames;\nexport type PieChartCssVariables = {\n root: '--chart-stroke-color' \| '--chart-labels-color' \| '--chart-size';\n};\n\nexport interface PieChartProps\n extends BoxProps, StylesApiProps<PieChartFactory>, ElementProps<'div'> {\n /** Data used to render chart /\n data: PieChartCell[];\n\n /* Determines whether the tooltip should be displayed when one of the section is hovered @default true /\n withTooltip?: boolean;\n\n /* Determines whether the legend should be displayed @default false /\n withLegend?: boolean;\n\n /* Props passed down to recharts `Legend` component /\n legendProps?: Omit<LegendProps, 'ref'>;\n\n /* Tooltip animation duration in ms @default 0 /\n tooltipAnimationDuration?: number;\n\n /* Props passed down to `Tooltip` recharts component /\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n /* Props passed down to recharts `Pie` component /\n pieProps?: Partial<Omit<PieProps, 'ref'>>;\n\n /* Controls color of the segments stroke, by default depends on color scheme /\n strokeColor?: MantineColor;\n\n /* Controls text color of all labels, white by default /\n labelColor?: MantineColor;\n\n /* Controls padding between segments @default 0 /\n paddingAngle?: number;\n\n /* Determines whether each segment should have associated label @default false /\n withLabels?: boolean;\n\n /* Determines whether segments labels should have lines that connect the segment with the label @default true /\n withLabelsLine?: boolean;\n\n /* Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default 80 /\n size?: number;\n\n /* Controls width of segments stroke @default 1 /\n strokeWidth?: number;\n\n /* Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default 0 /\n startAngle?: number;\n\n /* Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default 360 /\n endAngle?: number;\n\n /* Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' /\n tooltipDataSource?: 'segment' \| 'all';\n\n /* Additional elements rendered inside `PieChart` component /\n children?: React.ReactNode;\n\n /* Props passed down to recharts `PieChart` component /\n pieChartProps?: React.ComponentProps<typeof ReChartsPieChart>;\n\n /* Controls labels position relative to the segment @default 'outside' /\n labelsPosition?: 'inside' \| 'outside';\n\n /* Type of labels to display @default 'value' /\n labelsType?: 'value' \| 'percent' \| 'name';\n\n /* A function to format values inside the tooltip /\n valueFormatter?: (value: number) => string;\n\n /* Props passed down to each segment of the chart /\n cellProps?:\n \| ((series: PieChartCell) => Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>)\n \| Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>;\n\n /* Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default /\n accessibilityLayer?: boolean;\n}\n\nexport type PieChartFactory = Factory<{\n props: PieChartProps;\n ref: HTMLDivElement;\n stylesNames: PieChartStylesNames;\n vars: PieChartCssVariables;\n}>;\n\nconst defaultProps = {\n withTooltip: false,\n withLabelsLine: true,\n paddingAngle: 0,\n size: 160,\n strokeWidth: 1,\n startAngle: 0,\n endAngle: 360,\n tooltipDataSource: 'all',\n labelsPosition: 'outside',\n labelsType: 'value',\n accessibilityLayer: true,\n} satisfies Partial<PieChartProps>;\n\nconst varsResolver = createVarsResolver<PieChartFactory>(\n (theme, { strokeColor, labelColor, withLabels, withLegend, size, labelsPosition }) => ({\n root: {\n '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n '--chart-size': rem(\n size! + (withLabels && labelsPosition === 'outside' ? 80 : 0) + (withLegend ? 80 : 0)\n ),\n },\n })\n);\n\nconst getLabelValue = (\n labelsType: PieChartProps['labelsType'],\n value: number \| undefined,\n percent: number \| undefined,\n name: string \| undefined,\n valueFormatter?: PieChartProps['valueFormatter']\n) => {\n if (labelsType === 'name') {\n return name;\n }\n\n if (labelsType === 'percent' && typeof percent === 'number') {\n return `${(percent 100).toFixed(0)}%`;\n }\n\n if (typeof valueFormatter === 'function' && typeof value === 'number') {\n return valueFormatter(value);\n }\n\n return value;\n};\n\nconst getInsideLabel =\n (\n labelsType: 'value' \| 'percent' \| 'name',\n valueFormatter?: PieChartProps['valueFormatter']\n ): PieLabel =>\n ({ cx, cy, midAngle, innerRadius, outerRadius, value, percent, name }) => {\n const RADIAN = Math.PI / 180;\n const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * 0.5;\n const x = Number(cx) + radius * Math.cos(-(midAngle \|\| 0) * RADIAN);\n const y = Number(cy) + radius * Math.sin(-(midAngle \|\| 0) * RADIAN);\n\n return (\n <text\n x={x}\n y={y}\n textAnchor={x > Number(cx) ? 'start' : 'end'}\n dominantBaseline=\"central\"\n className={classes.label}\n >\n {getLabelValue(labelsType, Number(value), Number(percent), name as string, valueFormatter)}\n </text>\n );\n };\n\nconst getOutsideLabel =\n (\n labelsType: 'value' \| 'percent' \| 'name',\n valueFormatter?: PieChartProps['valueFormatter']\n ): PieLabel =>\n ({ x, y, cx, cy, percent, value, name }) => (\n <text\n x={x}\n y={y}\n cx={cx}\n cy={cy}\n textAnchor={x > Number(cx) ? 'start' : 'end'}\n fill=\"var(--chart-labels-color, var(--mantine-color-dimmed))\"\n fontFamily=\"var(--mantine-font-family)\"\n fontSize={12}\n >\n <tspan x={x}>\n {getLabelValue(labelsType, Number(value), Number(percent), name as string, valueFormatter)}\n </tspan>\n </text>\n );\n\nexport const PieChart = factory<PieChartFactory>((_props) => {\n const props = useProps('PieChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withTooltip,\n withLegend,\n legendProps,\n tooltipAnimationDuration,\n tooltipProps,\n pieProps,\n paddingAngle,\n withLabels,\n withLabelsLine,\n size,\n strokeWidth,\n startAngle,\n endAngle,\n tooltipDataSource,\n children,\n pieChartProps,\n labelsPosition,\n valueFormatter,\n labelsType,\n strokeColor,\n attributes,\n cellProps,\n accessibilityLayer,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const [highlightedIndex, setHighlightedIndex] = useState<number \| null>(null);\n\n const getStyles = useStyles<PieChartFactory>({\n name: 'PieChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PieChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const pieData = getPieChartData({ data, theme, strokeWidth, highlightedIndex, cellProps });\n\n return (\n <Box size={size} {...getStyles('root')} {...others}>\n <ResponsiveContainer>\n <ReChartsPieChart accessibilityLayer={accessibilityLayer} {...pieChartProps}>\n <Pie\n data={pieData as any}\n innerRadius={0}\n outerRadius={size / 2}\n dataKey=\"value\"\n isAnimationActive={false}\n paddingAngle={paddingAngle}\n startAngle={startAngle}\n endAngle={endAngle}\n label={\n withLabels\n ? labelsPosition === 'inside'\n ? getInsideLabel(labelsType \|\| 'value', valueFormatter)\n : getOutsideLabel(labelsType \|\| 'value', valueFormatter)\n : false\n }\n labelLine={\n withLabelsLine && labelsPosition === 'outside'\n ? {\n stroke: 'var(--chart-label-color, var(--mantine-color-dimmed))',\n strokeWidth: 1,\n }\n : false\n }\n {...pieProps}\n />\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => (\n <ChartTooltip\n payload={data}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n segmentId={\n tooltipDataSource === 'segment'\n ? (payload?.[0]?.payload?.__segmentIndex as number)\n : undefined\n }\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {withLegend && (\n <Legend\n verticalAlign=\"bottom\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload?.map((item) => ({\n ...item,\n dataKey: (item.payload as any)?.name,\n highlightKey: (item.payload as any)?.__segmentIndex,\n }))}\n onHighlight={(value) =>\n setHighlightedIndex(typeof value === 'number' ? value : null)\n }\n legendPosition={legendProps?.verticalAlign \|\| 'bottom'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n centered\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n {children}\n </ReChartsPieChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nPieChart.displayName = '@mantine/charts/PieChart';\nPieChart.classes = classes;\nPieChart.varsResolver = varsResolver;\n\nexport namespace PieChart {\n export type Props = PieChartProps;\n export type StylesNames = PieChartStylesNames;\n export type CssVariables = PieChartCssVariables;\n export type Factory = PieChartFactory;\n export type Cell = PieChartCell;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"PieChart.cjs","names":["createVarsResolver","getThemeColor","rem","classes","factory","useProps","useMantineTheme","useState","useStyles","useResolvedStylesApi","getPieChartData","Box","ResponsiveContainer","ReChartsPieChart","Pie","Tooltip","ChartTooltip","Legend","ChartLegend"],"sources":["../../src/PieChart/PieChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n Legend,\n LegendProps,\n Pie,\n PieLabel,\n PieProps,\n PieChart as ReChartsPieChart,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport { getPieChartData } from '../utils';\nimport classes from './PieChart.module.css';\n\nexport interface PieChartCell {\n key?: string \| number;\n name: string;\n value: number;\n color: MantineColor;\n}\n\nexport type PieChartStylesNames = 'root' \| ChartTooltipStylesNames \| ChartLegendStylesNames;\nexport type PieChartCssVariables = {\n root: '--chart-stroke-color' \| '--chart-labels-color' \| '--chart-size';\n};\n\nexport interface PieChartProps\n extends BoxProps, StylesApiProps<PieChartFactory>, ElementProps<'div'> {\n /** Data used to render chart /\n data: PieChartCell[];\n\n /* Determines whether the tooltip should be displayed when one of the section is hovered @default false /\n withTooltip?: boolean;\n\n /* Determines whether the legend should be displayed @default false /\n withLegend?: boolean;\n\n /* Props passed down to recharts `Legend` component /\n legendProps?: Omit<LegendProps, 'ref'>;\n\n /* Tooltip animation duration in ms @default 0 /\n tooltipAnimationDuration?: number;\n\n /* Props passed down to `Tooltip` recharts component /\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n /* Props passed down to recharts `Pie` component /\n pieProps?: Partial<Omit<PieProps, 'ref'>>;\n\n /* Controls color of the segments stroke, by default depends on color scheme /\n strokeColor?: MantineColor;\n\n /* Controls text color of all labels, white by default /\n labelColor?: MantineColor;\n\n /* Controls padding between segments @default 0 /\n paddingAngle?: number;\n\n /* Determines whether each segment should have associated label @default false /\n withLabels?: boolean;\n\n /* Determines whether segments labels should have lines that connect the segment with the label @default true /\n withLabelsLine?: boolean;\n\n /* Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default 160 /\n size?: number;\n\n /* Controls width of segments stroke @default 1 /\n strokeWidth?: number;\n\n /* Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default 0 /\n startAngle?: number;\n\n /* Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default 360 /\n endAngle?: number;\n\n /* Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' /\n tooltipDataSource?: 'segment' \| 'all';\n\n /* Additional elements rendered inside `PieChart` component /\n children?: React.ReactNode;\n\n /* Props passed down to recharts `PieChart` component /\n pieChartProps?: React.ComponentProps<typeof ReChartsPieChart>;\n\n /* Controls labels position relative to the segment @default 'outside' /\n labelsPosition?: 'inside' \| 'outside';\n\n /* Type of labels to display @default 'value' /\n labelsType?: 'value' \| 'percent' \| 'name';\n\n /* A function to format values inside the tooltip /\n valueFormatter?: (value: number) => string;\n\n /* Props passed down to each segment of the chart /\n cellProps?:\n \| ((series: PieChartCell) => Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>)\n \| Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>;\n\n /* Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default /\n accessibilityLayer?: boolean;\n}\n\nexport type PieChartFactory = Factory<{\n props: PieChartProps;\n ref: HTMLDivElement;\n stylesNames: PieChartStylesNames;\n vars: PieChartCssVariables;\n}>;\n\nconst defaultProps = {\n withTooltip: false,\n withLabelsLine: true,\n paddingAngle: 0,\n size: 160,\n strokeWidth: 1,\n startAngle: 0,\n endAngle: 360,\n tooltipDataSource: 'all',\n labelsPosition: 'outside',\n labelsType: 'value',\n accessibilityLayer: true,\n} satisfies Partial<PieChartProps>;\n\nconst varsResolver = createVarsResolver<PieChartFactory>(\n (theme, { strokeColor, labelColor, withLabels, withLegend, size, labelsPosition }) => ({\n root: {\n '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n '--chart-size': rem(\n size! + (withLabels && labelsPosition === 'outside' ? 80 : 0) + (withLegend ? 80 : 0)\n ),\n },\n })\n);\n\nconst getLabelValue = (\n labelsType: PieChartProps['labelsType'],\n value: number \| undefined,\n percent: number \| undefined,\n name: string \| undefined,\n valueFormatter?: PieChartProps['valueFormatter']\n) => {\n if (labelsType === 'name') {\n return name;\n }\n\n if (labelsType === 'percent' && typeof percent === 'number') {\n return `${(percent 100).toFixed(0)}%`;\n }\n\n if (typeof valueFormatter === 'function' && typeof value === 'number') {\n return valueFormatter(value);\n }\n\n return value;\n};\n\nconst getInsideLabel =\n (\n labelsType: 'value' \| 'percent' \| 'name',\n valueFormatter?: PieChartProps['valueFormatter']\n ): PieLabel =>\n ({ cx, cy, midAngle, innerRadius, outerRadius, value, percent, name }) => {\n const RADIAN = Math.PI / 180;\n const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * 0.5;\n const x = Number(cx) + radius * Math.cos(-(midAngle \|\| 0) * RADIAN);\n const y = Number(cy) + radius * Math.sin(-(midAngle \|\| 0) * RADIAN);\n\n return (\n <text\n x={x}\n y={y}\n textAnchor={x > Number(cx) ? 'start' : 'end'}\n dominantBaseline=\"central\"\n className={classes.label}\n >\n {getLabelValue(labelsType, Number(value), Number(percent), name as string, valueFormatter)}\n </text>\n );\n };\n\nconst getOutsideLabel =\n (\n labelsType: 'value' \| 'percent' \| 'name',\n valueFormatter?: PieChartProps['valueFormatter']\n ): PieLabel =>\n ({ x, y, cx, cy, percent, value, name }) => (\n <text\n x={x}\n y={y}\n cx={cx}\n cy={cy}\n textAnchor={x > Number(cx) ? 'start' : 'end'}\n fill=\"var(--chart-labels-color, var(--mantine-color-dimmed))\"\n fontFamily=\"var(--mantine-font-family)\"\n fontSize={12}\n >\n <tspan x={x}>\n {getLabelValue(labelsType, Number(value), Number(percent), name as string, valueFormatter)}\n </tspan>\n </text>\n );\n\nexport const PieChart = factory<PieChartFactory>((_props) => {\n const props = useProps('PieChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withTooltip,\n withLegend,\n legendProps,\n tooltipAnimationDuration,\n tooltipProps,\n pieProps,\n paddingAngle,\n withLabels,\n withLabelsLine,\n size,\n strokeWidth,\n startAngle,\n endAngle,\n tooltipDataSource,\n children,\n pieChartProps,\n labelsPosition,\n valueFormatter,\n labelsType,\n strokeColor,\n attributes,\n cellProps,\n accessibilityLayer,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const [highlightedIndex, setHighlightedIndex] = useState<number \| null>(null);\n\n const getStyles = useStyles<PieChartFactory>({\n name: 'PieChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PieChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const pieData = getPieChartData({ data, theme, strokeWidth, highlightedIndex, cellProps });\n\n return (\n <Box size={size} {...getStyles('root')} {...others}>\n <ResponsiveContainer>\n <ReChartsPieChart accessibilityLayer={accessibilityLayer} {...pieChartProps}>\n <Pie\n data={pieData as any}\n innerRadius={0}\n outerRadius={size / 2}\n dataKey=\"value\"\n isAnimationActive={false}\n paddingAngle={paddingAngle}\n startAngle={startAngle}\n endAngle={endAngle}\n label={\n withLabels\n ? labelsPosition === 'inside'\n ? getInsideLabel(labelsType \|\| 'value', valueFormatter)\n : getOutsideLabel(labelsType \|\| 'value', valueFormatter)\n : false\n }\n labelLine={\n withLabelsLine && labelsPosition === 'outside'\n ? {\n stroke: 'var(--chart-label-color, var(--mantine-color-dimmed))',\n strokeWidth: 1,\n }\n : false\n }\n {...pieProps}\n />\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => (\n <ChartTooltip\n payload={data}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n segmentId={\n tooltipDataSource === 'segment'\n ? (payload?.[0]?.payload?.__segmentIndex as number)\n : undefined\n }\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {withLegend && (\n <Legend\n verticalAlign=\"bottom\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload?.map((item) => ({\n ...item,\n dataKey: (item.payload as any)?.name,\n highlightKey: (item.payload as any)?.__segmentIndex,\n }))}\n onHighlight={(value) =>\n setHighlightedIndex(typeof value === 'number' ? value : null)\n }\n legendPosition={legendProps?.verticalAlign \|\| 'bottom'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n centered\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n {children}\n </ReChartsPieChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nPieChart.displayName = '@mantine/charts/PieChart';\nPieChart.classes = classes;\nPieChart.varsResolver = varsResolver;\n\nexport namespace PieChart {\n export type Props = PieChartProps;\n export type StylesNames = PieChartStylesNames;\n export type CssVariables = PieChartCssVariables;\n export type Factory = PieChartFactory;\n export type Cell = PieChartCell;\n}\n"],"mappings":";;;;;;;;;;AAiIA,MAAM,eAAe;CACnB,aAAa;CACb,gBAAgB;CAChB,cAAc;CACd,MAAM;CACN,aAAa;CACb,YAAY;CACZ,UAAU;CACV,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,oBAAoB;AACtB;AAEA,MAAM,gBAAA,GAAeA,cAAAA,mBAAAA,EAClB,OAAO,EAAE,aAAa,YAAY,YAAY,YAAY,MAAM,sBAAsB,EACrF,MAAM;CACJ,wBAAwB,eAAA,GAAcC,cAAAA,cAAAA,CAAc,aAAa,KAAK,IAAI,KAAA;CAC1E,wBAAwB,cAAA,GAAaA,cAAAA,cAAAA,CAAc,YAAY,KAAK,IAAI,KAAA;CACxE,iBAAA,GAAgBC,cAAAA,IAAAA,CACd,QAAS,cAAc,mBAAmB,YAAY,KAAK,MAAM,aAAa,KAAK,EACrF;AACF,EACF,EACF;AAEA,MAAM,iBACJ,YACA,OACA,SACA,MACA,mBACG;CACH,IAAI,eAAe,QACjB,OAAO;CAGT,IAAI,eAAe,aAAa,OAAO,YAAY,UACjD,OAAO,IAAI,UAAU,IAAA,CAAK,QAAQ,CAAC,EAAE;CAGvC,IAAI,OAAO,mBAAmB,cAAc,OAAO,UAAU,UAC3D,OAAO,eAAe,KAAK;CAG7B,OAAO;AACT;AAEA,MAAM,kBAEF,YACA,oBAED,EAAE,IAAI,IAAI,UAAU,aAAa,aAAa,OAAO,SAAS,WAAW;CACxE,MAAM,SAAS,KAAK,KAAK;CACzB,MAAM,SAAS,OAAO,WAAW,KAAK,OAAO,WAAW,IAAI,OAAO,WAAW,KAAK;CACnF,MAAM,IAAI,OAAO,EAAE,IAAI,SAAS,KAAK,IAAI,EAAE,YAAY,KAAK,MAAM;CAClE,MAAM,IAAI,OAAO,EAAE,IAAI,SAAS,KAAK,IAAI,EAAE,YAAY,KAAK,MAAM;CAElE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACK;EACA;EACH,YAAY,IAAI,OAAO,EAAE,IAAI,UAAU;EACvC,kBAAiB;EACjB,WAAWC,wBAAAA,QAAQ;EAElB,UAAA,cAAc,YAAY,OAAO,KAAK,GAAG,OAAO,OAAO,GAAG,MAAgB,cAAc;CACrF,CAAA;AAEV;AAEF,MAAM,mBAEF,YACA,oBAED,EAAE,GAAG,GAAG,IAAI,IAAI,SAAS,OAAO,WAC/B,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;CACK;CACA;CACC;CACA;CACJ,YAAY,IAAI,OAAO,EAAE,IAAI,UAAU;CACvC,MAAK;CACL,YAAW;CACX,UAAU;CAEV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EAAU;EACP,UAAA,cAAc,YAAY,OAAO,KAAK,GAAG,OAAO,OAAO,GAAG,MAAgB,cAAc;CACpF,CAAA;AACH,CAAA;AAGV,MAAa,YAAA,GAAWC,cAAAA,QAAAA,EAA0B,WAAW;CAC3D,MAAM,SAAA,GAAQC,cAAAA,SAAAA,CAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,aACA,YACA,aACA,0BACA,cACA,UACA,cACA,YACA,gBACA,MACA,aACA,YACA,UACA,mBACA,UACA,eACA,gBACA,gBACA,YACA,aACA,YACA,WACA,oBACA,GAAG,WACD;CAEJ,MAAM,SAAA,GAAQC,cAAAA,gBAAAA,CAAgB;CAC9B,MAAM,CAAC,kBAAkB,wBAAA,GAAuBC,MAAAA,SAAAA,CAAwB,IAAI;CAE5E,MAAM,aAAA,GAAYC,cAAAA,UAAAA,CAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,oBAAA,GAAmBC,cAAAA,qBAAAA,CAAsC;EACnF;EACA;EACA;CACF,CAAC;CAED,MAAM,UAAUC,2BAAAA,gBAAgB;EAAE;EAAM;EAAO;EAAa;EAAkB;CAAU,CAAC;CAEzF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,KAAD;EAAW;EAAM,GAAI,UAAU,MAAM;EAAG,GAAI;EAC1C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,qBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,SAAAA,UAAD;GAAsC;GAAoB,GAAI;GAA9D,UAAA;IACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,KAAD;KACE,MAAM;KACN,aAAa;KACb,aAAa,OAAO;KACpB,SAAQ;KACR,mBAAmB;KACL;KACF;KACF;KACV,OACE,aACI,mBAAmB,WACjB,eAAe,cAAc,SAAS,cAAc,IACpD,gBAAgB,cAAc,SAAS,cAAc,IACvD;KAEN,WACE,kBAAkB,mBAAmB,YACjC;MACE,QAAQ;MACR,aAAa;KACf,IACA;KAEN,GAAI;IACL,CAAA;IAEA,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,SAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,UAAU,EAAE,cACV,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,cAAD;MACE,SAAS;MACT,YAAY;MACZ,QAAQ;MACR,MAAK;MACL,WACE,sBAAsB,YACjB,UAAU,EAAE,EAAE,SAAS,iBACxB,KAAA;MAEU;MACJ;KACb,CAAA;KAEH,GAAI;IACL,CAAA;IAGF,cACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,QAAD;KACE,eAAc;KACd,UAAU,YACR,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,aAAD;MACE,SAAS,QAAQ,SAAS,KAAK,UAAU;OACvC,GAAG;OACH,SAAU,KAAK,SAAiB;OAChC,cAAe,KAAK,SAAiB;MACvC,EAAE;MACF,cAAc,UACZ,oBAAoB,OAAO,UAAU,WAAW,QAAQ,IAAI;MAE9D,gBAAgB,aAAa,iBAAiB;MAC9C,YAAY;MACZ,QAAQ;MACR,UAAA;MACY;KACb,CAAA;KAEH,GAAI;IACL,CAAA;IAGF;GACe;EACC,CAAA,EAAA,CAAA;CAClB,CAAA;AAET,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,UAAUf,wBAAAA;AACnB,SAAS,eAAe"}

package/esm/BarsList/BarsList.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BarsList.mjs","names":["classes"],"sources":["../../src/BarsList/BarsList.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n getThemeColor,\n MantineColor,\n MantineSpacing,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport classes from './BarsList.module.css';\n\nexport type BarsListStylesNames = 'root' \| 'bar' \| 'barLabel' \| 'barValue' \| 'labelsRow';\n\nexport type BarsListCssVariables = {\n root: '--bars-list-gap' \| '--bars-list-min-bar-size' \| '--bars-list-bar-height';\n};\n\nexport interface BarsListBarData {\n /** Name of the bar, displayed inside the bar /\n name: string;\n\n /* Numeric value of the bar /\n value: number;\n\n /* Bar background color /\n color?: MantineColor;\n\n /* Bar text color, overrides barTextColor and autoContrast for this specific bar /\n textColor?: MantineColor;\n\n /* Bar variant, used to calculate text color when autoContrast is enabled /\n variant?: 'light' \| 'filled';\n}\n\nexport interface BarsListProps\n extends BoxProps, StylesApiProps<BarsListFactory>, ElementProps<'div'> {\n /* Data for bars /\n data: BarsListBarData[];\n\n /* Function to format value display /\n valueFormatter?: (value: number) => string;\n\n /* Label displayed above the bars column /\n barsLabel?: string;\n\n /* Label displayed above the values column /\n valueLabel?: string;\n\n /* Function to pass props down to the bar depending on the bar data payload /\n getBarProps?: (data: BarsListBarData) => React.ComponentProps<'div'>;\n\n /* Function to completely customize bar rendering /\n renderBar?: (data: BarsListBarData, defaultBar: React.ReactNode) => React.ReactNode;\n\n /* Controls gap between bars @default 5 /\n barGap?: MantineSpacing;\n\n /* Minimum bar width @default ~~100~~ /\n minBarSize?: number \| string;\n\n /* Bar height @default 32 /\n barHeight?: number \| string;\n\n /* Default bar background color, used when item does not have color specified /\n barColor?: MantineColor;\n\n /* Bar text color, overrides autoContrast /\n barTextColor?: MantineColor;\n\n /* If set, adjusts text color based on background color /\n autoContrast?: boolean;\n}\n\nexport type BarsListFactory = Factory<{\n props: BarsListProps;\n ref: HTMLDivElement;\n stylesNames: BarsListStylesNames;\n vars: BarsListCssVariables;\n}>;\n\nconst defaultProps = {\n barGap: 5,\n minBarSize: 0,\n barHeight: 32,\n} satisfies Partial<BarsListProps>;\n\nconst varsResolver = createVarsResolver<BarsListFactory>(\n (_theme, { barGap, minBarSize, barHeight }) => ({\n root: {\n '--bars-list-gap': getSpacing(barGap),\n '--bars-list-min-bar-size': rem(minBarSize),\n '--bars-list-bar-height': rem(barHeight),\n },\n })\n);\n\nexport const BarsList = factory<BarsListFactory>((_props) => {\n const props = useProps('BarsList', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n data,\n valueFormatter,\n barsLabel,\n valueLabel,\n getBarProps,\n renderBar,\n barGap,\n minBarSize,\n barHeight,\n barColor,\n barTextColor,\n autoContrast,\n variant,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const getStyles = useStyles<BarsListFactory>({\n name: 'BarsList',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const maxValue = useMemo(() => Math.max(...data.map((item) => item.value), 0), [data]);\n\n const formatValue = (value: number) => {\n if (valueFormatter) {\n return valueFormatter(value);\n }\n return value.toString();\n };\n\n const bars = data.map((item, index) => {\n const percentage = maxValue > 0 ? (item.value / maxValue) 100 : 0;\n const barProps = getBarProps ? getBarProps(item) : {};\n const { style: barPropsStyle, className: barPropsClassName, ...restBarProps } = barProps;\n\n const itemBarColor = item.color \|\| barColor \|\| theme.primaryColor;\n const colors = theme.variantColorResolver({\n color: itemBarColor,\n theme,\n variant: item.variant \|\| variant \|\| 'light',\n autoContrast,\n });\n\n const backgroundColor = colors.background;\n\n const textColor =\n item.textColor \|\| barTextColor\n ? getThemeColor(item.textColor \|\| barTextColor, theme)\n : colors.color;\n\n const defaultBar = (\n <div key={index} {...getStyles('bar')}>\n <div\n {...getStyles('barLabel', {\n className: barPropsClassName,\n style: {\n width: `${percentage}%`,\n backgroundColor,\n color: textColor,\n padding: percentage === 0 ? 0 : undefined,\n ...barPropsStyle,\n },\n })}\n {...restBarProps}\n >\n {item.name}\n </div>\n <div {...getStyles('barValue')}>{formatValue(item.value)}</div>\n </div>\n );\n\n if (renderBar) {\n return <div key={index}>{renderBar(item, defaultBar)}</div>;\n }\n\n return defaultBar;\n });\n\n const labelsRow =\n barsLabel \|\| valueLabel ? (\n <div {...getStyles('labelsRow')}>\n <div>{barsLabel}</div>\n <div>{valueLabel}</div>\n </div>\n ) : null;\n\n return (\n <Box {...getStyles('root')} variant={variant} {...others}>\n {labelsRow}\n {bars}\n </Box>\n );\n});\n\nBarsList.displayName = '@mantine/charts/BarsList';\nBarsList.classes = classes;\nBarsList.varsResolver = varsResolver;\n\nexport namespace BarsList {\n export type Props = BarsListProps;\n export type StylesNames = BarsListStylesNames;\n export type Factory = BarsListFactory;\n export type BarData = BarsListBarData;\n}\n"],"mappings":";;;;;;AAyFA,MAAM,eAAe;CACnB,QAAQ;CACR,YAAY;CACZ,WAAW;AACb;AAEA,MAAM,eAAe,oBAClB,QAAQ,EAAE,QAAQ,YAAY,iBAAiB,EAC9C,MAAM;CACJ,mBAAmB,WAAW,MAAM;CACpC,4BAA4B,IAAI,UAAU;CAC1C,0BAA0B,IAAI,SAAS;AACzC,EACF,EACF;AAEA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,MACA,gBACA,WACA,YACA,aACA,WACA,QACA,YACA,WACA,UACA,cACA,cACA,SACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,WAAW,cAAc,KAAK,IAAI,GAAG,KAAK,KAAK,SAAS,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC;CAErF,MAAM,eAAe,UAAkB;EACrC,IAAI,gBACF,OAAO,eAAe,KAAK;EAE7B,OAAO,MAAM,SAAS;CACxB;CAEA,MAAM,OAAO,KAAK,KAAK,MAAM,UAAU;EACrC,MAAM,aAAa,WAAW,IAAK,KAAK,QAAQ,WAAY,MAAM;EAElE,MAAM,EAAE,OAAO,eAAe,WAAW,mBAAmB,GAAG,iBAD9C,cAAc,YAAY,IAAI,IAAI,CAAC;EAGpD,MAAM,eAAe,KAAK,SAAS,YAAY,MAAM;EACrD,MAAM,SAAS,MAAM,qBAAqB;GACxC,OAAO;GACP;GACA,SAAS,KAAK,WAAW,WAAW;GACpC;EACF,CAAC;EAED,MAAM,kBAAkB,OAAO;EAE/B,MAAM,YACJ,KAAK,aAAa,eACd,cAAc,KAAK,aAAa,cAAc,KAAK,IACnD,OAAO;EAEb,MAAM,aACJ,qBAAC,OAAD;GAAiB,GAAI,UAAU,KAAK;GAApC,UAAA,CACE,oBAAC,OAAD;IACE,GAAI,UAAU,YAAY;KACxB,WAAW;KACX,OAAO;MACL,OAAO,GAAG,WAAW;MACrB;MACA,OAAO;MACP,SAAS,eAAe,IAAI,IAAI,KAAA;MAChC,GAAG;KACL;IACF,CAAC;IACD,GAAI;IAEH,UAAA,KAAK;GACH,CAAA,GACL,oBAAC,OAAD;IAAK,GAAI,UAAU,UAAU;IAAI,UAAA,YAAY,KAAK,KAAK;GAAO,CAAA,CAC3D;EAjBK,GAAA,KAiBL;EAGP,IAAI,WACF,OAAO,oBAAC,OAAD,EAAA,UAAkB,UAAU,MAAM,UAAU,EAAO,GAAzC,KAAyC;EAG5D,OAAO;CACT,CAAC;CAED,MAAM,YACJ,aAAa,aACX,qBAAC,OAAD;EAAK,GAAI,UAAU,WAAW;EAA9B,UAAA,CACE,oBAAC,OAAD,EAAA,UAAM,UAAe,CAAA,GACrB,oBAAC,OAAD,EAAA,UAAM,WAAgB,CAAA,CACnB;CACH,CAAA,IAAA;CAEN,OACE,qBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAY;EAAS,GAAI;EAAlD,UAAA,CACG,WACA,IACE;;AAET,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,UAAUA;AACnB,SAAS,eAAe"}
1	+ {"version":3,"file":"BarsList.mjs","names":["classes"],"sources":["../../src/BarsList/BarsList.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n getThemeColor,\n MantineColor,\n MantineSpacing,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport classes from './BarsList.module.css';\n\nexport type BarsListStylesNames = 'root' \| 'bar' \| 'barLabel' \| 'barValue' \| 'labelsRow';\n\nexport type BarsListCssVariables = {\n root: '--bars-list-gap' \| '--bars-list-min-bar-size' \| '--bars-list-bar-height';\n};\n\nexport interface BarsListBarData {\n /** Name of the bar, displayed inside the bar /\n name: string;\n\n /* Numeric value of the bar /\n value: number;\n\n /* Bar background color /\n color?: MantineColor;\n\n /* Bar text color, overrides barTextColor and autoContrast for this specific bar /\n textColor?: MantineColor;\n\n /* Bar variant, used to calculate text color when autoContrast is enabled /\n variant?: 'light' \| 'filled';\n}\n\nexport interface BarsListProps\n extends BoxProps, StylesApiProps<BarsListFactory>, ElementProps<'div'> {\n /* Data for bars /\n data: BarsListBarData[];\n\n /* Function to format value display /\n valueFormatter?: (value: number) => string;\n\n /* Label displayed above the bars column /\n barsLabel?: string;\n\n /* Label displayed above the values column /\n valueLabel?: string;\n\n /* Function to pass props down to the bar depending on the bar data payload /\n getBarProps?: (data: BarsListBarData) => React.ComponentProps<'div'>;\n\n /* Function to completely customize bar rendering /\n renderBar?: (data: BarsListBarData, defaultBar: React.ReactNode) => React.ReactNode;\n\n /* Controls gap between bars @default 5 /\n barGap?: MantineSpacing;\n\n /* Minimum bar width @default 0 /\n minBarSize?: number \| string;\n\n /* Bar height @default 32 /\n barHeight?: number \| string;\n\n /* Default bar background color, used when item does not have color specified /\n barColor?: MantineColor;\n\n /* Bar text color, overrides autoContrast /\n barTextColor?: MantineColor;\n\n /* If set, adjusts text color based on background color /\n autoContrast?: boolean;\n}\n\nexport type BarsListFactory = Factory<{\n props: BarsListProps;\n ref: HTMLDivElement;\n stylesNames: BarsListStylesNames;\n vars: BarsListCssVariables;\n}>;\n\nconst defaultProps = {\n barGap: 5,\n minBarSize: 0,\n barHeight: 32,\n} satisfies Partial<BarsListProps>;\n\nconst varsResolver = createVarsResolver<BarsListFactory>(\n (_theme, { barGap, minBarSize, barHeight }) => ({\n root: {\n '--bars-list-gap': getSpacing(barGap),\n '--bars-list-min-bar-size': rem(minBarSize),\n '--bars-list-bar-height': rem(barHeight),\n },\n })\n);\n\nexport const BarsList = factory<BarsListFactory>((_props) => {\n const props = useProps('BarsList', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n data,\n valueFormatter,\n barsLabel,\n valueLabel,\n getBarProps,\n renderBar,\n barGap,\n minBarSize,\n barHeight,\n barColor,\n barTextColor,\n autoContrast,\n variant,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const getStyles = useStyles<BarsListFactory>({\n name: 'BarsList',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const maxValue = useMemo(() => Math.max(...data.map((item) => item.value), 0), [data]);\n\n const formatValue = (value: number) => {\n if (valueFormatter) {\n return valueFormatter(value);\n }\n return value.toString();\n };\n\n const bars = data.map((item, index) => {\n const percentage = maxValue > 0 ? (item.value / maxValue) 100 : 0;\n const barProps = getBarProps ? getBarProps(item) : {};\n const { style: barPropsStyle, className: barPropsClassName, ...restBarProps } = barProps;\n\n const itemBarColor = item.color \|\| barColor \|\| theme.primaryColor;\n const colors = theme.variantColorResolver({\n color: itemBarColor,\n theme,\n variant: item.variant \|\| variant \|\| 'light',\n autoContrast,\n });\n\n const backgroundColor = colors.background;\n\n const textColor =\n item.textColor \|\| barTextColor\n ? getThemeColor(item.textColor \|\| barTextColor, theme)\n : colors.color;\n\n const defaultBar = (\n <div key={index} {...getStyles('bar')}>\n <div\n {...getStyles('barLabel', {\n className: barPropsClassName,\n style: {\n width: `${percentage}%`,\n backgroundColor,\n color: textColor,\n padding: percentage === 0 ? 0 : undefined,\n ...barPropsStyle,\n },\n })}\n {...restBarProps}\n >\n {item.name}\n </div>\n <div {...getStyles('barValue')}>{formatValue(item.value)}</div>\n </div>\n );\n\n if (renderBar) {\n return <div key={index}>{renderBar(item, defaultBar)}</div>;\n }\n\n return defaultBar;\n });\n\n const labelsRow =\n barsLabel \|\| valueLabel ? (\n <div {...getStyles('labelsRow')}>\n <div>{barsLabel}</div>\n <div>{valueLabel}</div>\n </div>\n ) : null;\n\n return (\n <Box {...getStyles('root')} variant={variant} {...others}>\n {labelsRow}\n {bars}\n </Box>\n );\n});\n\nBarsList.displayName = '@mantine/charts/BarsList';\nBarsList.classes = classes;\nBarsList.varsResolver = varsResolver;\n\nexport namespace BarsList {\n export type Props = BarsListProps;\n export type StylesNames = BarsListStylesNames;\n export type Factory = BarsListFactory;\n export type BarData = BarsListBarData;\n}\n"],"mappings":";;;;;;AAyFA,MAAM,eAAe;CACnB,QAAQ;CACR,YAAY;CACZ,WAAW;AACb;AAEA,MAAM,eAAe,oBAClB,QAAQ,EAAE,QAAQ,YAAY,iBAAiB,EAC9C,MAAM;CACJ,mBAAmB,WAAW,MAAM;CACpC,4BAA4B,IAAI,UAAU;CAC1C,0BAA0B,IAAI,SAAS;AACzC,EACF,EACF;AAEA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,MACA,gBACA,WACA,YACA,aACA,WACA,QACA,YACA,WACA,UACA,cACA,cACA,SACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,WAAW,cAAc,KAAK,IAAI,GAAG,KAAK,KAAK,SAAS,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC;CAErF,MAAM,eAAe,UAAkB;EACrC,IAAI,gBACF,OAAO,eAAe,KAAK;EAE7B,OAAO,MAAM,SAAS;CACxB;CAEA,MAAM,OAAO,KAAK,KAAK,MAAM,UAAU;EACrC,MAAM,aAAa,WAAW,IAAK,KAAK,QAAQ,WAAY,MAAM;EAElE,MAAM,EAAE,OAAO,eAAe,WAAW,mBAAmB,GAAG,iBAD9C,cAAc,YAAY,IAAI,IAAI,CAAC;EAGpD,MAAM,eAAe,KAAK,SAAS,YAAY,MAAM;EACrD,MAAM,SAAS,MAAM,qBAAqB;GACxC,OAAO;GACP;GACA,SAAS,KAAK,WAAW,WAAW;GACpC;EACF,CAAC;EAED,MAAM,kBAAkB,OAAO;EAE/B,MAAM,YACJ,KAAK,aAAa,eACd,cAAc,KAAK,aAAa,cAAc,KAAK,IACnD,OAAO;EAEb,MAAM,aACJ,qBAAC,OAAD;GAAiB,GAAI,UAAU,KAAK;GAApC,UAAA,CACE,oBAAC,OAAD;IACE,GAAI,UAAU,YAAY;KACxB,WAAW;KACX,OAAO;MACL,OAAO,GAAG,WAAW;MACrB;MACA,OAAO;MACP,SAAS,eAAe,IAAI,IAAI,KAAA;MAChC,GAAG;KACL;IACF,CAAC;IACD,GAAI;IAEH,UAAA,KAAK;GACH,CAAA,GACL,oBAAC,OAAD;IAAK,GAAI,UAAU,UAAU;IAAI,UAAA,YAAY,KAAK,KAAK;GAAO,CAAA,CAC3D;EAjBK,GAAA,KAiBL;EAGP,IAAI,WACF,OAAO,oBAAC,OAAD,EAAA,UAAkB,UAAU,MAAM,UAAU,EAAO,GAAzC,KAAyC;EAG5D,OAAO;CACT,CAAC;CAED,MAAM,YACJ,aAAa,aACX,qBAAC,OAAD;EAAK,GAAI,UAAU,WAAW;EAA9B,UAAA,CACE,oBAAC,OAAD,EAAA,UAAM,UAAe,CAAA,GACrB,oBAAC,OAAD,EAAA,UAAM,WAAgB,CAAA,CACnB;CACH,CAAA,IAAA;CAEN,OACE,qBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAY;EAAS,GAAI;EAAlD,UAAA,CACG,WACA,IACE;;AAET,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,UAAUA;AACnB,SAAS,eAAe"}

package/esm/BubbleChart/BubbleChart.mjs CHANGED Viewed

@@ -38,7 +38,7 @@ const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({
 } }));
 const BubbleChart = factory((_props) => {
 	const props = useProps("BubbleChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, xAxisProps, yAxisProps, zAxisProps, tooltipProps, scatterProps, color, label, withTooltip, dataKey, range, valueFormatter, attributes, accessibilityLayer, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, xAxisProps, yAxisProps, zAxisProps, tooltipProps, scatterProps, color, label, withTooltip, dataKey, range, valueFormatter, attributes, accessibilityLayer, gridColor, textColor, ...others } = props;
 	const theme = useMantineTheme();
 	const getStyles = useStyles({
 		name: "BubbleChart",

package/esm/BubbleChart/BubbleChart.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BubbleChart.mjs","names":["Tooltip","classes"],"sources":["../../src/BubbleChart/BubbleChart.tsx"],"sourcesContent":["import {\n ResponsiveContainer,\n Scatter,\n ScatterChart,\n ScatterProps,\n Tooltip,\n TooltipProps,\n XAxis,\n XAxisProps,\n YAxis,\n YAxisProps,\n ZAxis,\n ZAxisProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n GetStylesApi,\n getThemeColor,\n Group,\n MantineColor,\n StylesApiProps,\n Text,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport classes from '../grid-chart.module.css';\n\nfunction getDomain(data: Record<string, any>[], key: string) {\n const values = data.map((item) => item[key]);\n return [Math.min(...values), Math.max(...values)];\n}\n\ninterface BubbleChartTooltipProps {\n payload: any;\n active: boolean \| undefined;\n getStyles: GetStylesApi<BubbleChartFactory>;\n valueFormatter?: (value: number) => string;\n dataKey: BubbleChartDataKey;\n}\n\nfunction BubbleChartTooltip({\n active,\n payload,\n getStyles,\n dataKey,\n valueFormatter,\n}: BubbleChartTooltipProps) {\n if (active && payload && payload.length) {\n const data = payload[0] && payload[0].payload;\n\n return (\n <div {...getStyles('tooltip')}>\n <Group justify=\"space-between\">\n <Text fz=\"sm\">{data[dataKey.x]}</Text>\n <Text fz=\"sm\">{valueFormatter ? valueFormatter(data[dataKey.z]) : data[dataKey.z]}</Text>\n </Group>\n </div>\n );\n }\n\n return null;\n}\n\nexport type BubbleChartStylesNames = 'root' \| 'axis' \| 'tooltip';\nexport type BubbleChartCssVariables = {\n root: '--chart-text-color' \| '--chart-grid-color';\n};\n\nexport interface BubbleChartDataKey {\n x: string;\n y: string;\n z: string;\n}\n\nexport interface BubbleChartProps\n extends BoxProps, StylesApiProps<BubbleChartFactory>, ElementProps<'div'> {\n /** Chart data /\n data: Record<string, any>[];\n\n /* Data keys for x, y and z axis /\n dataKey: BubbleChartDataKey;\n\n /* Z axis range /\n range: [number, number];\n\n /* Color of the chart items. Key of `theme.colors` or any valid CSS color. @default blue.6 /\n color?: MantineColor;\n\n /* Props passed down to the `XAxis` recharts component /\n xAxisProps?: Omit<XAxisProps, 'ref'>;\n\n /* Props passed down to the `YAxis` recharts component /\n yAxisProps?: Omit<YAxisProps, 'ref'>;\n\n /* Props passed down to the `ZAxis` recharts component /\n zAxisProps?: Omit<ZAxisProps, 'ref'>;\n\n /* Props passed down to the `Tooltip` component /\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n /* Props passed down to the `Scatter` component /\n scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n /* Color of the text displayed inside the chart @default 'dimmed' /\n textColor?: MantineColor;\n\n /* Color of the grid and cursor lines, by default depends on color scheme /\n gridColor?: MantineColor;\n\n /* Chart label displayed next to the x axis /\n label?: string;\n\n /* Determines whether the tooltip should be displayed @default true /\n withTooltip?: boolean;\n\n /* Function to format z axis values /\n valueFormatter?: (value: number) => string;\n\n /* Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */\n accessibilityLayer?: boolean;\n}\n\nexport type BubbleChartFactory = Factory<{\n props: BubbleChartProps;\n ref: HTMLDivElement;\n stylesNames: BubbleChartStylesNames;\n vars: BubbleChartCssVariables;\n}>;\n\nconst defaultProps = {\n color: 'blue.6',\n withTooltip: true,\n accessibilityLayer: true,\n} satisfies Partial<BubbleChartProps>;\n\nconst varsResolver = createVarsResolver<BubbleChartFactory>((theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n}));\n\nexport const BubbleChart = factory<BubbleChartFactory>((_props) => {\n const props = useProps('BubbleChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n xAxisProps,\n yAxisProps,\n zAxisProps,\n tooltipProps,\n scatterProps,\n color,\n label,\n withTooltip,\n dataKey,\n range,\n valueFormatter,\n attributes,\n accessibilityLayer,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const getStyles = useStyles<BubbleChartFactory>({\n name: 'BubbleChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const yAxisWidth = label ? undefined : { width: 0 };\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer>\n <ScatterChart accessibilityLayer={accessibilityLayer}>\n <XAxis\n type=\"category\"\n dataKey={dataKey.x}\n interval={0}\n tick={{ fontSize: 12, fill: 'currentColor' }}\n tickLine={{ transform: 'translate(0, -6)', stroke: 'currentColor' }}\n stroke=\"currentColor\"\n {...getStyles('axis')}\n {...xAxisProps}\n />\n\n <YAxis\n type=\"number\"\n dataKey={dataKey.y}\n height={10}\n {...yAxisWidth}\n tick={false}\n tickLine={false}\n axisLine={false}\n label={{ value: label, position: 'insideRight', fontSize: 12, fill: 'currentColor' }}\n {...getStyles('axis')}\n {...yAxisProps}\n />\n\n <ZAxis\n type=\"number\"\n dataKey={dataKey.z}\n domain={getDomain(data, dataKey.z)}\n range={range}\n {...zAxisProps}\n />\n\n {withTooltip && (\n <Tooltip\n animationDuration={100}\n isAnimationActive={false}\n cursor={{ stroke: 'var(--chart-grid-color)', strokeWidth: 1, strokeDasharray: '3 3' }}\n content={(payload) => (\n <BubbleChartTooltip\n dataKey={dataKey}\n active={payload.active}\n payload={payload.payload}\n getStyles={getStyles}\n valueFormatter={valueFormatter}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n <Scatter\n data={data}\n fill={getThemeColor(color, theme)}\n isAnimationActive={false}\n {...scatterProps}\n />\n </ScatterChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nBubbleChart.displayName = '@mantine/charts/BubbleChart';\nBubbleChart.classes = classes;\nBubbleChart.varsResolver = varsResolver;\n\nexport namespace BubbleChart {\n export type Props = BubbleChartProps;\n export type StylesNames = BubbleChartStylesNames;\n export type CssVariables = BubbleChartCssVariables;\n export type Factory = BubbleChartFactory;\n export type DataKey = BubbleChartDataKey;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"BubbleChart.mjs","names":["Tooltip","classes"],"sources":["../../src/BubbleChart/BubbleChart.tsx"],"sourcesContent":["import {\n ResponsiveContainer,\n Scatter,\n ScatterChart,\n ScatterProps,\n Tooltip,\n TooltipProps,\n XAxis,\n XAxisProps,\n YAxis,\n YAxisProps,\n ZAxis,\n ZAxisProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n GetStylesApi,\n getThemeColor,\n Group,\n MantineColor,\n StylesApiProps,\n Text,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport classes from '../grid-chart.module.css';\n\nfunction getDomain(data: Record<string, any>[], key: string) {\n const values = data.map((item) => item[key]);\n return [Math.min(...values), Math.max(...values)];\n}\n\ninterface BubbleChartTooltipProps {\n payload: any;\n active: boolean \| undefined;\n getStyles: GetStylesApi<BubbleChartFactory>;\n valueFormatter?: (value: number) => string;\n dataKey: BubbleChartDataKey;\n}\n\nfunction BubbleChartTooltip({\n active,\n payload,\n getStyles,\n dataKey,\n valueFormatter,\n}: BubbleChartTooltipProps) {\n if (active && payload && payload.length) {\n const data = payload[0] && payload[0].payload;\n\n return (\n <div {...getStyles('tooltip')}>\n <Group justify=\"space-between\">\n <Text fz=\"sm\">{data[dataKey.x]}</Text>\n <Text fz=\"sm\">{valueFormatter ? valueFormatter(data[dataKey.z]) : data[dataKey.z]}</Text>\n </Group>\n </div>\n );\n }\n\n return null;\n}\n\nexport type BubbleChartStylesNames = 'root' \| 'axis' \| 'tooltip';\nexport type BubbleChartCssVariables = {\n root: '--chart-text-color' \| '--chart-grid-color';\n};\n\nexport interface BubbleChartDataKey {\n x: string;\n y: string;\n z: string;\n}\n\nexport interface BubbleChartProps\n extends BoxProps, StylesApiProps<BubbleChartFactory>, ElementProps<'div'> {\n /** Chart data /\n data: Record<string, any>[];\n\n /* Data keys for x, y and z axis /\n dataKey: BubbleChartDataKey;\n\n /* Z axis range /\n range: [number, number];\n\n /* Color of the chart items. Key of `theme.colors` or any valid CSS color. @default blue.6 /\n color?: MantineColor;\n\n /* Props passed down to the `XAxis` recharts component /\n xAxisProps?: Omit<XAxisProps, 'ref'>;\n\n /* Props passed down to the `YAxis` recharts component /\n yAxisProps?: Omit<YAxisProps, 'ref'>;\n\n /* Props passed down to the `ZAxis` recharts component /\n zAxisProps?: Omit<ZAxisProps, 'ref'>;\n\n /* Props passed down to the `Tooltip` component /\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n /* Props passed down to the `Scatter` component /\n scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n /* Color of the text displayed inside the chart @default 'dimmed' /\n textColor?: MantineColor;\n\n /* Color of the grid and cursor lines, by default depends on color scheme /\n gridColor?: MantineColor;\n\n /* Chart label displayed next to the x axis /\n label?: string;\n\n /* Determines whether the tooltip should be displayed @default true /\n withTooltip?: boolean;\n\n /* Function to format z axis values /\n valueFormatter?: (value: number) => string;\n\n /* Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */\n accessibilityLayer?: boolean;\n}\n\nexport type BubbleChartFactory = Factory<{\n props: BubbleChartProps;\n ref: HTMLDivElement;\n stylesNames: BubbleChartStylesNames;\n vars: BubbleChartCssVariables;\n}>;\n\nconst defaultProps = {\n color: 'blue.6',\n withTooltip: true,\n accessibilityLayer: true,\n} satisfies Partial<BubbleChartProps>;\n\nconst varsResolver = createVarsResolver<BubbleChartFactory>((theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n}));\n\nexport const BubbleChart = factory<BubbleChartFactory>((_props) => {\n const props = useProps('BubbleChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n xAxisProps,\n yAxisProps,\n zAxisProps,\n tooltipProps,\n scatterProps,\n color,\n label,\n withTooltip,\n dataKey,\n range,\n valueFormatter,\n attributes,\n accessibilityLayer,\n gridColor,\n textColor,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const getStyles = useStyles<BubbleChartFactory>({\n name: 'BubbleChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const yAxisWidth = label ? undefined : { width: 0 };\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer>\n <ScatterChart accessibilityLayer={accessibilityLayer}>\n <XAxis\n type=\"category\"\n dataKey={dataKey.x}\n interval={0}\n tick={{ fontSize: 12, fill: 'currentColor' }}\n tickLine={{ transform: 'translate(0, -6)', stroke: 'currentColor' }}\n stroke=\"currentColor\"\n {...getStyles('axis')}\n {...xAxisProps}\n />\n\n <YAxis\n type=\"number\"\n dataKey={dataKey.y}\n height={10}\n {...yAxisWidth}\n tick={false}\n tickLine={false}\n axisLine={false}\n label={{ value: label, position: 'insideRight', fontSize: 12, fill: 'currentColor' }}\n {...getStyles('axis')}\n {...yAxisProps}\n />\n\n <ZAxis\n type=\"number\"\n dataKey={dataKey.z}\n domain={getDomain(data, dataKey.z)}\n range={range}\n {...zAxisProps}\n />\n\n {withTooltip && (\n <Tooltip\n animationDuration={100}\n isAnimationActive={false}\n cursor={{ stroke: 'var(--chart-grid-color)', strokeWidth: 1, strokeDasharray: '3 3' }}\n content={(payload) => (\n <BubbleChartTooltip\n dataKey={dataKey}\n active={payload.active}\n payload={payload.payload}\n getStyles={getStyles}\n valueFormatter={valueFormatter}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n <Scatter\n data={data}\n fill={getThemeColor(color, theme)}\n isAnimationActive={false}\n {...scatterProps}\n />\n </ScatterChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nBubbleChart.displayName = '@mantine/charts/BubbleChart';\nBubbleChart.classes = classes;\nBubbleChart.varsResolver = varsResolver;\n\nexport namespace BubbleChart {\n export type Props = BubbleChartProps;\n export type StylesNames = BubbleChartStylesNames;\n export type CssVariables = BubbleChartCssVariables;\n export type Factory = BubbleChartFactory;\n export type DataKey = BubbleChartDataKey;\n}\n"],"mappings":"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"}

package/esm/CompositeChart/CompositeChart.mjs CHANGED Viewed

@@ -29,7 +29,7 @@ const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({
 } }));
 const CompositeChart = factory((_props) => {
 	const props = useProps("CompositeChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, withLegend, legendProps, series, onMouseLeave, dataKey, withTooltip, withXAxis, withYAxis, gridAxis, tickLine, xAxisProps, yAxisProps, unit, tooltipAnimationDuration, strokeDasharray, gridProps, tooltipProps, referenceLines, referenceAreas, referenceDots, withDots, dotProps, activeDotProps, strokeWidth, connectNulls, curveType, dir, valueFormatter, children, lineProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, areaProps, barProps, withBarValueLabel, minBarSize, maxBarWidth, composedChartProps, attributes, accessibilityLayer, withBrush, brushProps, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, withLegend, legendProps, series, onMouseLeave, dataKey, withTooltip, withXAxis, withYAxis, gridAxis, tickLine, xAxisProps, yAxisProps, unit, tooltipAnimationDuration, strokeDasharray, gridProps, tooltipProps, referenceLines, referenceAreas, referenceDots, withDots, dotProps, activeDotProps, strokeWidth, connectNulls, curveType, dir, valueFormatter, children, lineProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, areaProps, barProps, withBarValueLabel, minBarSize, maxBarWidth, composedChartProps, attributes, accessibilityLayer, withBrush, brushProps, gridColor, textColor, ...others } = props;
 	const theme = useMantineTheme();
 	const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
 	const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");

package/esm/CompositeChart/CompositeChart.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CompositeChart.mjs","names":["ReChartsCompositeChart","Tooltip","classes"],"sources":["../../src/CompositeChart/CompositeChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n Area,\n AreaProps,\n Bar,\n BarProps,\n CartesianGrid,\n Label,\n LabelList,\n Legend,\n Line,\n LineProps,\n ComposedChart as ReChartsCompositeChart,\n ReferenceArea,\n ReferenceDot,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartBrush } from '../ChartBrush';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { PointLabel } from '../PointLabel/PointLabel';\nimport type {\n BaseChartStylesNames,\n ChartSeries,\n GridChartBaseProps,\n MantineChartDotProps,\n} from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport type CompositeChartCurveType =\n \| 'bump'\n \| 'linear'\n \| 'natural'\n \| 'monotone'\n \| 'step'\n \| 'stepBefore'\n \| 'stepAfter';\n\nexport interface CompositeChartSeries extends ChartSeries {\n type: 'line' \| 'area' \| 'bar';\n strokeDasharray?: string \| number;\n}\n\nexport type CompositeChartStylesNames =\n \| 'line'\n \| 'area'\n \| 'bar'\n \| BaseChartStylesNames\n \| ChartLegendStylesNames\n \| ChartTooltipStylesNames;\n\nexport type CompositeChartCssVariables = {\n root: '--chart-text-color' \| '--chart-grid-color';\n};\n\nexport interface CompositeChartProps\n extends\n BoxProps,\n Omit<GridChartBaseProps, 'orientation'>,\n StylesApiProps<CompositeChartFactory>,\n ElementProps<'div'> {\n /** Data used to display chart /\n data: Record<string, any>[];\n\n /* An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. /\n series: CompositeChartSeries[];\n\n /* Type of the curve @default 'monotone' /\n curveType?: CompositeChartCurveType;\n\n /* Determines whether dots should be displayed @default true /\n withDots?: boolean;\n\n /* Props passed down to all dots. Ignored if `withDots={false}` is set. /\n dotProps?: MantineChartDotProps;\n\n /* Props passed down to all active dots. Ignored if `withDots={false}` is set. /\n activeDotProps?: MantineChartDotProps;\n\n /* Stroke width for the chart lines @default 2 /\n strokeWidth?: number;\n\n /* Determines whether points with `null` values should be connected @default true /\n connectNulls?: boolean;\n\n /* Additional components that are rendered inside recharts `AreaChart` component /\n children?: React.ReactNode;\n\n /* Props passed down to recharts `Line` component /\n lineProps?:\n \| ((series: CompositeChartSeries) => Partial<Omit<LineProps, 'ref'>>)\n \| Partial<Omit<LineProps, 'ref'>>;\n\n /* Props passed down to recharts `Area` component /\n areaProps?:\n \| ((series: CompositeChartSeries) => Partial<Omit<AreaProps<any, any>, 'ref'>>)\n \| Partial<Omit<AreaProps<any, any>, 'ref'>>;\n\n /* Props passed down to recharts `Bar` component /\n barProps?:\n \| ((series: CompositeChartSeries) => Partial<Omit<BarProps, 'ref'>>)\n \| Partial<Omit<BarProps, 'ref'>>;\n\n /* Determines whether each point should have associated label @default false /\n withPointLabels?: boolean;\n\n /* Determines whether a label with bar value should be displayed on top of each bar @default false /\n withBarValueLabel?: boolean;\n\n /* Sets minimum height of the bar in px @default 0 /\n minBarSize?: number;\n\n /* Maximum bar width in px /\n maxBarWidth?: number;\n\n /* Props passed down to recharts `AreaChart` component */\n composedChartProps?: React.ComponentProps<typeof ReChartsCompositeChart>;\n}\n\nexport type CompositeChartFactory = Factory<{\n props: CompositeChartProps;\n ref: HTMLDivElement;\n stylesNames: CompositeChartStylesNames;\n vars: CompositeChartCssVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n tickLine: 'y',\n strokeDasharray: '5 5',\n gridAxis: 'x',\n withDots: true,\n connectNulls: true,\n strokeWidth: 2,\n curveType: 'monotone',\n accessibilityLayer: true,\n} satisfies Partial<CompositeChartProps>;\n\nconst varsResolver = createVarsResolver<CompositeChartFactory>(\n (theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n })\n);\n\nexport const CompositeChart = factory<CompositeChartFactory>((_props) => {\n const props = useProps('CompositeChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withLegend,\n legendProps,\n series,\n onMouseLeave,\n dataKey,\n withTooltip,\n withXAxis,\n withYAxis,\n gridAxis,\n tickLine,\n xAxisProps,\n yAxisProps,\n unit,\n tooltipAnimationDuration,\n strokeDasharray,\n gridProps,\n tooltipProps,\n referenceLines,\n referenceAreas,\n referenceDots,\n withDots,\n dotProps,\n activeDotProps,\n strokeWidth,\n connectNulls,\n curveType,\n dir,\n valueFormatter,\n children,\n lineProps,\n xAxisLabel,\n yAxisLabel,\n withRightYAxis,\n rightYAxisLabel,\n rightYAxisProps,\n withPointLabels,\n areaProps,\n barProps,\n withBarValueLabel,\n minBarSize,\n maxBarWidth,\n composedChartProps,\n attributes,\n accessibilityLayer,\n withBrush,\n brushProps,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' \|\| tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' \|\| tickLine === 'xy');\n const [highlightedArea, setHighlightedArea] = useState<string \| number \| null>(null);\n const shouldHighlight = highlightedArea !== null;\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<CompositeChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const getStyles = useStyles<CompositeChartFactory>({\n name: 'CompositeChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const lines = series.map((item) => {\n const color = getThemeColor(item.color, theme);\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n if (item.type === 'line') {\n return (\n <Line\n {...getStyles('line')}\n key={item.name}\n name={item.name}\n dataKey={item.name}\n dot={\n withDots\n ? {\n fillOpacity: dimmed ? 0 : 1,\n strokeOpacity: dimmed ? 0 : 1,\n strokeWidth: 1,\n fill: color,\n stroke: color,\n ...dotProps,\n }\n : false\n }\n activeDot={\n withDots\n ? { fill: 'var(--mantine-color-white)', stroke: color, ...activeDotProps }\n : false\n }\n fill={color}\n stroke={color}\n strokeWidth={strokeWidth}\n isAnimationActive={false}\n fillOpacity={dimmed ? 0 : 1}\n strokeOpacity={dimmed ? 0.5 : 1}\n connectNulls={connectNulls}\n type={curveType}\n strokeDasharray={item.strokeDasharray}\n yAxisId={item.yAxisId \|\| undefined}\n label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n {...(typeof lineProps === 'function' ? lineProps(item) : lineProps)}\n />\n );\n }\n\n if (item.type === 'area') {\n return (\n <Area\n {...getStyles('area')}\n key={item.name}\n name={item.name}\n type={curveType}\n dataKey={item.name}\n fill={color}\n strokeWidth={strokeWidth}\n stroke={color}\n isAnimationActive={false}\n connectNulls={connectNulls}\n dot={\n withDots\n ? {\n fillOpacity: dimmed ? 0 : 1,\n strokeOpacity: dimmed ? 0 : 1,\n strokeWidth: 1,\n fill: color,\n stroke: color,\n ...dotProps,\n }\n : false\n }\n activeDot={\n withDots\n ? {\n fill: theme.white,\n stroke: color,\n strokeWidth: 2,\n r: 4,\n ...activeDotProps,\n }\n : false\n }\n fillOpacity={dimmed ? 0 : 0.2}\n strokeOpacity={dimmed ? 0.5 : 1}\n strokeDasharray={item.strokeDasharray}\n yAxisId={item.yAxisId \|\| undefined}\n label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n />\n );\n }\n\n if (item.type === 'bar') {\n return (\n <Bar\n {...getStyles('bar')}\n key={item.name}\n name={item.name}\n dataKey={item.name}\n fill={color}\n stroke={color}\n isAnimationActive={false}\n fillOpacity={dimmed ? 0.1 : 1}\n strokeOpacity={dimmed ? 0.2 : 0}\n yAxisId={item.yAxisId \|\| undefined}\n minPointSize={minBarSize}\n {...(typeof barProps === 'function' ? barProps(item) : barProps)}\n >\n {withBarValueLabel && (\n <LabelList\n position=\"top\"\n fontSize={12}\n fill=\"var(--chart-bar-label-color, var(--mantine-color-dimmed))\"\n formatter={(val: any) => valueFormatter?.(val as any)}\n />\n )}\n </Bar>\n );\n }\n\n return null;\n });\n\n const referenceLinesItems = referenceLines?.map(\n ({ color: lineColor, labelPosition, ...line }, index) => {\n const color = getThemeColor(lineColor, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={lineColor ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n yAxisId={line.yAxisId \|\| undefined}\n {...line}\n label={{\n fill: lineColor ? color : 'currentColor',\n fontSize: 12,\n position: labelPosition ?? 'insideBottomLeft',\n ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n }}\n {...getStyles('referenceLine')}\n />\n );\n }\n );\n\n const referenceAreasItems = referenceAreas?.map(\n ({ color: areaColor, labelPosition, ...area }, index) => {\n const color = getThemeColor(areaColor, theme);\n return (\n <ReferenceArea\n key={index}\n fill={areaColor ? color : 'var(--chart-grid-color)'}\n fillOpacity={0.2}\n stroke={areaColor ? color : 'var(--chart-grid-color)'}\n strokeOpacity={0.6}\n yAxisId={area.yAxisId \|\| undefined}\n {...area}\n label={{\n fill: areaColor ? color : 'currentColor',\n fontSize: 12,\n position: labelPosition ?? 'insideTop',\n ...(typeof area.label === 'object' ? area.label : { value: area.label }),\n }}\n {...getStyles('referenceArea')}\n />\n );\n }\n );\n\n const referenceDotsItems = referenceDots?.map(\n ({ color: dotColor, labelPosition, ...dot }, index) => {\n const color = getThemeColor(dotColor, theme);\n return (\n <ReferenceDot\n key={index}\n r={5}\n fill={dotColor ? color : 'var(--chart-grid-color)'}\n stroke=\"var(--mantine-color-body)\"\n strokeWidth={2}\n yAxisId={dot.yAxisId \|\| undefined}\n {...dot}\n label={{\n fill: dotColor ? color : 'currentColor',\n fontSize: 12,\n position: labelPosition ?? 'top',\n ...(typeof dot.label === 'object' ? dot.label : { value: dot.label }),\n }}\n {...getStyles('referenceDot')}\n />\n );\n }\n );\n\n const sharedYAxisProps = {\n axisLine: false,\n type: 'number' as const,\n tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n allowDecimals: true,\n unit,\n tickFormatter: valueFormatter,\n ...getStyles('axis'),\n };\n\n return (\n <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir \|\| 'ltr'} {...others}>\n <ResponsiveContainer {...getStyles('container')}>\n <ReChartsCompositeChart\n data={data}\n maxBarSize={maxBarWidth}\n margin={{\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel ? 5 : undefined,\n }}\n accessibilityLayer={accessibilityLayer}\n {...composedChartProps}\n >\n {referenceAreasItems}\n {withLegend && (\n <Legend\n verticalAlign=\"top\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign \|\| 'top'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n <XAxis\n hide={!withXAxis}\n dataKey={dataKey}\n tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n stroke=\"\"\n interval=\"preserveStartEnd\"\n tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n minTickGap={5}\n {...getStyles('axis')}\n {...xAxisProps}\n >\n {xAxisLabel && (\n <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n {xAxisLabel}\n </Label>\n )}\n {xAxisProps?.children}\n </XAxis>\n\n <YAxis\n orientation=\"left\"\n tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withYAxis}\n {...sharedYAxisProps}\n {...yAxisProps}\n >\n {yAxisLabel && (\n <Label\n position=\"insideLeft\"\n angle={-90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {yAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <YAxis\n yAxisId=\"right\"\n orientation=\"right\"\n tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withRightYAxis}\n {...sharedYAxisProps}\n {...rightYAxisProps}\n >\n {rightYAxisLabel && (\n <Label\n position=\"insideRight\"\n angle={90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {rightYAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <CartesianGrid\n strokeDasharray={strokeDasharray as string}\n vertical={gridAxis === 'y' \|\| gridAxis === 'xy'}\n horizontal={gridAxis === 'x' \|\| gridAxis === 'xy'}\n {...getStyles('grid')}\n {...gridProps}\n />\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={tooltipAnimationDuration !== 0}\n position={{ y: 0 }}\n cursor={{\n stroke: 'var(--chart-grid-color)',\n strokeWidth: 1,\n strokeDasharray,\n }}\n content={({ label, payload, labelFormatter }) => (\n <ChartTooltip\n label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n payload={payload}\n unit={unit}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {lines}\n {referenceLinesItems}\n {referenceDotsItems}\n {withBrush && (\n <ChartBrush\n dataKey={dataKey}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n {...brushProps}\n />\n )}\n {children}\n </ReChartsCompositeChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nCompositeChart.displayName = '@mantine/charts/CompositeChart';\nCompositeChart.classes = classes;\nCompositeChart.varsResolver = varsResolver;\n\nexport namespace CompositeChart {\n export type Props = CompositeChartProps;\n export type StylesNames = CompositeChartStylesNames;\n export type CssVariables = CompositeChartCssVariables;\n export type Factory = CompositeChartFactory;\n export type Series = CompositeChartSeries;\n export type CurveType = CompositeChartCurveType;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"CompositeChart.mjs","names":["ReChartsCompositeChart","Tooltip","classes"],"sources":["../../src/CompositeChart/CompositeChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n Area,\n AreaProps,\n Bar,\n BarProps,\n CartesianGrid,\n Label,\n LabelList,\n Legend,\n Line,\n LineProps,\n ComposedChart as ReChartsCompositeChart,\n ReferenceArea,\n ReferenceDot,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartBrush } from '../ChartBrush';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { PointLabel } from '../PointLabel/PointLabel';\nimport type {\n BaseChartStylesNames,\n ChartSeries,\n GridChartBaseProps,\n MantineChartDotProps,\n} from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport type CompositeChartCurveType =\n \| 'bump'\n \| 'linear'\n \| 'natural'\n \| 'monotone'\n \| 'step'\n \| 'stepBefore'\n \| 'stepAfter';\n\nexport interface CompositeChartSeries extends ChartSeries {\n type: 'line' \| 'area' \| 'bar';\n strokeDasharray?: string \| number;\n}\n\nexport type CompositeChartStylesNames =\n \| 'line'\n \| 'area'\n \| 'bar'\n \| BaseChartStylesNames\n \| ChartLegendStylesNames\n \| ChartTooltipStylesNames;\n\nexport type CompositeChartCssVariables = {\n root: '--chart-text-color' \| '--chart-grid-color';\n};\n\nexport interface CompositeChartProps\n extends\n BoxProps,\n Omit<GridChartBaseProps, 'orientation'>,\n StylesApiProps<CompositeChartFactory>,\n ElementProps<'div'> {\n /** Data used to display chart /\n data: Record<string, any>[];\n\n /* An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. /\n series: CompositeChartSeries[];\n\n /* Type of the curve @default 'monotone' /\n curveType?: CompositeChartCurveType;\n\n /* Determines whether dots should be displayed @default true /\n withDots?: boolean;\n\n /* Props passed down to all dots. Ignored if `withDots={false}` is set. /\n dotProps?: MantineChartDotProps;\n\n /* Props passed down to all active dots. Ignored if `withDots={false}` is set. /\n activeDotProps?: MantineChartDotProps;\n\n /* Stroke width for the chart lines @default 2 /\n strokeWidth?: number;\n\n /* Determines whether points with `null` values should be connected @default true /\n connectNulls?: boolean;\n\n /* Additional components that are rendered inside recharts `AreaChart` component /\n children?: React.ReactNode;\n\n /* Props passed down to recharts `Line` component /\n lineProps?:\n \| ((series: CompositeChartSeries) => Partial<Omit<LineProps, 'ref'>>)\n \| Partial<Omit<LineProps, 'ref'>>;\n\n /* Props passed down to recharts `Area` component /\n areaProps?:\n \| ((series: CompositeChartSeries) => Partial<Omit<AreaProps<any, any>, 'ref'>>)\n \| Partial<Omit<AreaProps<any, any>, 'ref'>>;\n\n /* Props passed down to recharts `Bar` component /\n barProps?:\n \| ((series: CompositeChartSeries) => Partial<Omit<BarProps, 'ref'>>)\n \| Partial<Omit<BarProps, 'ref'>>;\n\n /* Determines whether each point should have associated label @default false /\n withPointLabels?: boolean;\n\n /* Determines whether a label with bar value should be displayed on top of each bar @default false /\n withBarValueLabel?: boolean;\n\n /* Sets minimum height of the bar in px @default 0 /\n minBarSize?: number;\n\n /* Maximum bar width in px /\n maxBarWidth?: number;\n\n /* Props passed down to recharts `AreaChart` component */\n composedChartProps?: React.ComponentProps<typeof ReChartsCompositeChart>;\n}\n\nexport type CompositeChartFactory = Factory<{\n props: CompositeChartProps;\n ref: HTMLDivElement;\n stylesNames: CompositeChartStylesNames;\n vars: CompositeChartCssVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n tickLine: 'y',\n strokeDasharray: '5 5',\n gridAxis: 'x',\n withDots: true,\n connectNulls: true,\n strokeWidth: 2,\n curveType: 'monotone',\n accessibilityLayer: true,\n} satisfies Partial<CompositeChartProps>;\n\nconst varsResolver = createVarsResolver<CompositeChartFactory>(\n (theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n })\n);\n\nexport const CompositeChart = factory<CompositeChartFactory>((_props) => {\n const props = useProps('CompositeChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withLegend,\n legendProps,\n series,\n onMouseLeave,\n dataKey,\n withTooltip,\n withXAxis,\n withYAxis,\n gridAxis,\n tickLine,\n xAxisProps,\n yAxisProps,\n unit,\n tooltipAnimationDuration,\n strokeDasharray,\n gridProps,\n tooltipProps,\n referenceLines,\n referenceAreas,\n referenceDots,\n withDots,\n dotProps,\n activeDotProps,\n strokeWidth,\n connectNulls,\n curveType,\n dir,\n valueFormatter,\n children,\n lineProps,\n xAxisLabel,\n yAxisLabel,\n withRightYAxis,\n rightYAxisLabel,\n rightYAxisProps,\n withPointLabels,\n areaProps,\n barProps,\n withBarValueLabel,\n minBarSize,\n maxBarWidth,\n composedChartProps,\n attributes,\n accessibilityLayer,\n withBrush,\n brushProps,\n gridColor,\n textColor,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' \|\| tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' \|\| tickLine === 'xy');\n const [highlightedArea, setHighlightedArea] = useState<string \| number \| null>(null);\n const shouldHighlight = highlightedArea !== null;\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<CompositeChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const getStyles = useStyles<CompositeChartFactory>({\n name: 'CompositeChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const lines = series.map((item) => {\n const color = getThemeColor(item.color, theme);\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n if (item.type === 'line') {\n return (\n <Line\n {...getStyles('line')}\n key={item.name}\n name={item.name}\n dataKey={item.name}\n dot={\n withDots\n ? {\n fillOpacity: dimmed ? 0 : 1,\n strokeOpacity: dimmed ? 0 : 1,\n strokeWidth: 1,\n fill: color,\n stroke: color,\n ...dotProps,\n }\n : false\n }\n activeDot={\n withDots\n ? { fill: 'var(--mantine-color-white)', stroke: color, ...activeDotProps }\n : false\n }\n fill={color}\n stroke={color}\n strokeWidth={strokeWidth}\n isAnimationActive={false}\n fillOpacity={dimmed ? 0 : 1}\n strokeOpacity={dimmed ? 0.5 : 1}\n connectNulls={connectNulls}\n type={curveType}\n strokeDasharray={item.strokeDasharray}\n yAxisId={item.yAxisId \|\| undefined}\n label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n {...(typeof lineProps === 'function' ? lineProps(item) : lineProps)}\n />\n );\n }\n\n if (item.type === 'area') {\n return (\n <Area\n {...getStyles('area')}\n key={item.name}\n name={item.name}\n type={curveType}\n dataKey={item.name}\n fill={color}\n strokeWidth={strokeWidth}\n stroke={color}\n isAnimationActive={false}\n connectNulls={connectNulls}\n dot={\n withDots\n ? {\n fillOpacity: dimmed ? 0 : 1,\n strokeOpacity: dimmed ? 0 : 1,\n strokeWidth: 1,\n fill: color,\n stroke: color,\n ...dotProps,\n }\n : false\n }\n activeDot={\n withDots\n ? {\n fill: theme.white,\n stroke: color,\n strokeWidth: 2,\n r: 4,\n ...activeDotProps,\n }\n : false\n }\n fillOpacity={dimmed ? 0 : 0.2}\n strokeOpacity={dimmed ? 0.5 : 1}\n strokeDasharray={item.strokeDasharray}\n yAxisId={item.yAxisId \|\| undefined}\n label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n />\n );\n }\n\n if (item.type === 'bar') {\n return (\n <Bar\n {...getStyles('bar')}\n key={item.name}\n name={item.name}\n dataKey={item.name}\n fill={color}\n stroke={color}\n isAnimationActive={false}\n fillOpacity={dimmed ? 0.1 : 1}\n strokeOpacity={dimmed ? 0.2 : 0}\n yAxisId={item.yAxisId \|\| undefined}\n minPointSize={minBarSize}\n {...(typeof barProps === 'function' ? barProps(item) : barProps)}\n >\n {withBarValueLabel && (\n <LabelList\n position=\"top\"\n fontSize={12}\n fill=\"var(--chart-bar-label-color, var(--mantine-color-dimmed))\"\n formatter={(val: any) => valueFormatter?.(val as any)}\n />\n )}\n </Bar>\n );\n }\n\n return null;\n });\n\n const referenceLinesItems = referenceLines?.map(\n ({ color: lineColor, labelPosition, ...line }, index) => {\n const color = getThemeColor(lineColor, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={lineColor ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n yAxisId={line.yAxisId \|\| undefined}\n {...line}\n label={{\n fill: lineColor ? color : 'currentColor',\n fontSize: 12,\n position: labelPosition ?? 'insideBottomLeft',\n ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n }}\n {...getStyles('referenceLine')}\n />\n );\n }\n );\n\n const referenceAreasItems = referenceAreas?.map(\n ({ color: areaColor, labelPosition, ...area }, index) => {\n const color = getThemeColor(areaColor, theme);\n return (\n <ReferenceArea\n key={index}\n fill={areaColor ? color : 'var(--chart-grid-color)'}\n fillOpacity={0.2}\n stroke={areaColor ? color : 'var(--chart-grid-color)'}\n strokeOpacity={0.6}\n yAxisId={area.yAxisId \|\| undefined}\n {...area}\n label={{\n fill: areaColor ? color : 'currentColor',\n fontSize: 12,\n position: labelPosition ?? 'insideTop',\n ...(typeof area.label === 'object' ? area.label : { value: area.label }),\n }}\n {...getStyles('referenceArea')}\n />\n );\n }\n );\n\n const referenceDotsItems = referenceDots?.map(\n ({ color: dotColor, labelPosition, ...dot }, index) => {\n const color = getThemeColor(dotColor, theme);\n return (\n <ReferenceDot\n key={index}\n r={5}\n fill={dotColor ? color : 'var(--chart-grid-color)'}\n stroke=\"var(--mantine-color-body)\"\n strokeWidth={2}\n yAxisId={dot.yAxisId \|\| undefined}\n {...dot}\n label={{\n fill: dotColor ? color : 'currentColor',\n fontSize: 12,\n position: labelPosition ?? 'top',\n ...(typeof dot.label === 'object' ? dot.label : { value: dot.label }),\n }}\n {...getStyles('referenceDot')}\n />\n );\n }\n );\n\n const sharedYAxisProps = {\n axisLine: false,\n type: 'number' as const,\n tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n allowDecimals: true,\n unit,\n tickFormatter: valueFormatter,\n ...getStyles('axis'),\n };\n\n return (\n <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir \|\| 'ltr'} {...others}>\n <ResponsiveContainer {...getStyles('container')}>\n <ReChartsCompositeChart\n data={data}\n maxBarSize={maxBarWidth}\n margin={{\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel ? 5 : undefined,\n }}\n accessibilityLayer={accessibilityLayer}\n {...composedChartProps}\n >\n {referenceAreasItems}\n {withLegend && (\n <Legend\n verticalAlign=\"top\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign \|\| 'top'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n <XAxis\n hide={!withXAxis}\n dataKey={dataKey}\n tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n stroke=\"\"\n interval=\"preserveStartEnd\"\n tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n minTickGap={5}\n {...getStyles('axis')}\n {...xAxisProps}\n >\n {xAxisLabel && (\n <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n {xAxisLabel}\n </Label>\n )}\n {xAxisProps?.children}\n </XAxis>\n\n <YAxis\n orientation=\"left\"\n tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withYAxis}\n {...sharedYAxisProps}\n {...yAxisProps}\n >\n {yAxisLabel && (\n <Label\n position=\"insideLeft\"\n angle={-90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {yAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <YAxis\n yAxisId=\"right\"\n orientation=\"right\"\n tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withRightYAxis}\n {...sharedYAxisProps}\n {...rightYAxisProps}\n >\n {rightYAxisLabel && (\n <Label\n position=\"insideRight\"\n angle={90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {rightYAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <CartesianGrid\n strokeDasharray={strokeDasharray as string}\n vertical={gridAxis === 'y' \|\| gridAxis === 'xy'}\n horizontal={gridAxis === 'x' \|\| gridAxis === 'xy'}\n {...getStyles('grid')}\n {...gridProps}\n />\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={tooltipAnimationDuration !== 0}\n position={{ y: 0 }}\n cursor={{\n stroke: 'var(--chart-grid-color)',\n strokeWidth: 1,\n strokeDasharray,\n }}\n content={({ label, payload, labelFormatter }) => (\n <ChartTooltip\n label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n payload={payload}\n unit={unit}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {lines}\n {referenceLinesItems}\n {referenceDotsItems}\n {withBrush && (\n <ChartBrush\n dataKey={dataKey}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n {...brushProps}\n />\n )}\n {children}\n </ReChartsCompositeChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nCompositeChart.displayName = '@mantine/charts/CompositeChart';\nCompositeChart.classes = classes;\nCompositeChart.varsResolver = varsResolver;\n\nexport namespace CompositeChart {\n export type Props = CompositeChartProps;\n export type StylesNames = CompositeChartStylesNames;\n export type CssVariables = CompositeChartCssVariables;\n export type Factory = CompositeChartFactory;\n export type Series = CompositeChartSeries;\n export type CurveType = CompositeChartCurveType;\n}\n"],"mappings":";;;;;;;;;;;AAgJA,MAAM,eAAe;CACnB,WAAW;CACX,WAAW;CACX,aAAa;CACb,0BAA0B;CAC1B,UAAU;CACV,iBAAiB;CACjB,UAAU;CACV,UAAU;CACV,cAAc;CACd,aAAa;CACb,WAAW;CACX,oBAAoB;AACtB;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,WAAW,iBAAiB,EACpC,MAAM;CACJ,sBAAsB,YAAY,cAAc,WAAW,KAAK,IAAI,KAAA;CACpE,sBAAsB,YAAY,cAAc,WAAW,KAAK,IAAI,KAAA;AACtE,EACF,EACF;AAEA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,YACA,aACA,QACA,cACA,SACA,aACA,WACA,WACA,UACA,UACA,YACA,YACA,MACA,0BACA,iBACA,WACA,cACA,gBACA,gBACA,eACA,UACA,UACA,gBACA,aACA,cACA,WACA,KACA,gBACA,UACA,WACA,YACA,YACA,gBACA,iBACA,iBACA,iBACA,WACA,UACA,mBACA,YACA,aACA,oBACA,YACA,oBACA,WACA,YACA,WACA,WACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,gBAAgB,aAAa,WAAW,aAAa,OAAO,aAAa;CAC/E,MAAM,gBAAgB,aAAa,WAAW,aAAa,OAAO,aAAa;CAC/E,MAAM,CAAC,iBAAiB,sBAAsB,SAAiC,IAAI;CACnF,MAAM,kBAAkB,oBAAoB;CAC5C,MAAM,oBAAoB,UAA4C;EACpE,mBAAmB,IAAI;EACvB,eAAe,KAAK;CACtB;CACA,MAAM,EAAE,oBAAoB,mBAAmB,qBAA4C;EACzF;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,QAAQ,OAAO,KAAK,SAAS;EACjC,MAAM,QAAQ,cAAc,KAAK,OAAO,KAAK;EAC7C,MAAM,SAAS,mBAAmB,oBAAoB,KAAK;EAE3D,IAAI,KAAK,SAAS,QAChB,OACE,8BAAC,MAAD;GACE,GAAI,UAAU,MAAM;GACpB,KAAK,KAAK;GACV,MAAM,KAAK;GACX,SAAS,KAAK;GACd,KACE,WACI;IACE,aAAa,SAAS,IAAI;IAC1B,eAAe,SAAS,IAAI;IAC5B,aAAa;IACb,MAAM;IACN,QAAQ;IACR,GAAG;GACL,IACA;GAEN,WACE,WACI;IAAE,MAAM;IAA8B,QAAQ;IAAO,GAAG;GAAe,IACvE;GAEN,MAAM;GACN,QAAQ;GACK;GACb,mBAAmB;GACnB,aAAa,SAAS,IAAI;GAC1B,eAAe,SAAS,KAAM;GAChB;GACd,MAAM;GACN,iBAAiB,KAAK;GACtB,SAAS,KAAK,WAAW,KAAA;GACzB,OAAO,kBAAkB,oBAAC,YAAD,EAA4B,eAAiB,CAAA,IAAI,KAAA;GAC1E,GAAK,OAAO,cAAc,aAAa,UAAU,IAAI,IAAI;EAC1D,CAAA;EAIL,IAAI,KAAK,SAAS,QAChB,OACE,8BAAC,MAAD;GACE,GAAI,UAAU,MAAM;GACpB,KAAK,KAAK;GACV,MAAM,KAAK;GACX,MAAM;GACN,SAAS,KAAK;GACd,MAAM;GACO;GACb,QAAQ;GACR,mBAAmB;GACL;GACd,KACE,WACI;IACE,aAAa,SAAS,IAAI;IAC1B,eAAe,SAAS,IAAI;IAC5B,aAAa;IACb,MAAM;IACN,QAAQ;IACR,GAAG;GACL,IACA;GAEN,WACE,WACI;IACE,MAAM,MAAM;IACZ,QAAQ;IACR,aAAa;IACb,GAAG;IACH,GAAG;GACL,IACA;GAEN,aAAa,SAAS,IAAI;GAC1B,eAAe,SAAS,KAAM;GAC9B,iBAAiB,KAAK;GACtB,SAAS,KAAK,WAAW,KAAA;GACzB,OAAO,kBAAkB,oBAAC,YAAD,EAA4B,eAAiB,CAAA,IAAI,KAAA;GAC1E,GAAK,OAAO,cAAc,aAAa,UAAU,IAAI,IAAI;EAC1D,CAAA;EAIL,IAAI,KAAK,SAAS,OAChB,OACE,8BAAC,KAAD;GACE,GAAI,UAAU,KAAK;GACnB,KAAK,KAAK;GACV,MAAM,KAAK;GACX,SAAS,KAAK;GACd,MAAM;GACN,QAAQ;GACR,mBAAmB;GACnB,aAAa,SAAS,KAAM;GAC5B,eAAe,SAAS,KAAM;GAC9B,SAAS,KAAK,WAAW,KAAA;GACzB,cAAc;GACd,GAAK,OAAO,aAAa,aAAa,SAAS,IAAI,IAAI;EAUpD,GARF,qBACC,oBAAC,WAAD;GACE,UAAS;GACT,UAAU;GACV,MAAK;GACL,YAAY,QAAa,iBAAiB,GAAU;EACrD,CAAA,CAEA;EAIT,OAAO;CACT,CAAC;CAED,MAAM,sBAAsB,gBAAgB,KACzC,EAAE,OAAO,WAAW,eAAe,GAAG,QAAQ,UAAU;EACvD,MAAM,QAAQ,cAAc,WAAW,KAAK;EAC5C,OACE,oBAAC,eAAD;GAEE,QAAQ,YAAY,QAAQ;GAC5B,aAAa;GACb,SAAS,KAAK,WAAW,KAAA;GACzB,GAAI;GACJ,OAAO;IACL,MAAM,YAAY,QAAQ;IAC1B,UAAU;IACV,UAAU,iBAAiB;IAC3B,GAAI,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,EAAE,OAAO,KAAK,MAAM;GACxE;GACA,GAAI,UAAU,eAAe;EAC9B,GAZM,KAYN;CAEL,CACF;CAEA,MAAM,sBAAsB,gBAAgB,KACzC,EAAE,OAAO,WAAW,eAAe,GAAG,QAAQ,UAAU;EACvD,MAAM,QAAQ,cAAc,WAAW,KAAK;EAC5C,OACE,oBAAC,eAAD;GAEE,MAAM,YAAY,QAAQ;GAC1B,aAAa;GACb,QAAQ,YAAY,QAAQ;GAC5B,eAAe;GACf,SAAS,KAAK,WAAW,KAAA;GACzB,GAAI;GACJ,OAAO;IACL,MAAM,YAAY,QAAQ;IAC1B,UAAU;IACV,UAAU,iBAAiB;IAC3B,GAAI,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,EAAE,OAAO,KAAK,MAAM;GACxE;GACA,GAAI,UAAU,eAAe;EAC9B,GAdM,KAcN;CAEL,CACF;CAEA,MAAM,qBAAqB,eAAe,KACvC,EAAE,OAAO,UAAU,eAAe,GAAG,OAAO,UAAU;EACrD,MAAM,QAAQ,cAAc,UAAU,KAAK;EAC3C,OACE,oBAAC,cAAD;GAEE,GAAG;GACH,MAAM,WAAW,QAAQ;GACzB,QAAO;GACP,aAAa;GACb,SAAS,IAAI,WAAW,KAAA;GACxB,GAAI;GACJ,OAAO;IACL,MAAM,WAAW,QAAQ;IACzB,UAAU;IACV,UAAU,iBAAiB;IAC3B,GAAI,OAAO,IAAI,UAAU,WAAW,IAAI,QAAQ,EAAE,OAAO,IAAI,MAAM;GACrE;GACA,GAAI,UAAU,cAAc;EAC7B,GAdM,KAcN;CAEL,CACF;CAEA,MAAM,mBAAmB;EACvB,UAAU;EACV,MAAM;EACN,UAAU,gBAAgB,EAAE,QAAQ,eAAe,IAAI;EACvD,eAAe;EACf;EACA,eAAe;EACf,GAAG,UAAU,MAAM;CACrB;CAEA,OACE,oBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,cAAc;EAAkB,KAAK,OAAO;EAAO,GAAI;EACjF,UAAA,oBAAC,qBAAD;GAAqB,GAAI,UAAU,WAAW;GAC5C,UAAA,qBAACA,eAAD;IACQ;IACN,YAAY;IACZ,QAAQ;KACN,QAAQ,aAAa,KAAK,KAAA;KAC1B,MAAM,aAAa,KAAK,KAAA;KACxB,OAAO,aAAa,IAAI,KAAA;IAC1B;IACoB;IACpB,GAAI;IATN,UAAA;KAWG;KACA,cACC,oBAAC,QAAD;MACE,eAAc;MACd,UAAU,YACR,oBAAC,aAAD;OACE,SAAS,QAAQ;OACjB,aAAa;OACb,gBAAgB,aAAa,iBAAiB;OAC9C,YAAY;OACZ,QAAQ;OACA;OACI;MACb,CAAA;MAEH,GAAI;KACL,CAAA;KAGH,qBAAC,OAAD;MACE,MAAM,CAAC;MACE;MACT,MAAM;OAAE,WAAW;OAAoB,UAAU;OAAI,MAAM;MAAe;MAC1E,QAAO;MACP,UAAS;MACT,UAAU,gBAAgB,EAAE,QAAQ,eAAe,IAAI;MACvD,YAAY;MACZ,GAAI,UAAU,MAAM;MACpB,GAAI;MATN,UAAA,CAWG,cACC,oBAAC,OAAD;OAAO,UAAS;OAAe,QAAQ;OAAK,UAAU;OAAI,GAAI,UAAU,WAAW;OAChF,UAAA;MACI,CAAA,GAER,YAAY,QACR;;KAEP,qBAAC,OAAD;MACE,aAAY;MACZ,MAAM;OAAE,WAAW;OAAqB,UAAU;OAAI,MAAM;MAAe;MAC3E,MAAM,CAAC;MACP,GAAI;MACJ,GAAI;MALN,UAAA,CAOG,cACC,oBAAC,OAAD;OACE,UAAS;OACT,OAAO;OACP,YAAW;OACX,UAAU;OACV,QAAQ;OACR,GAAI,UAAU,WAAW;OAExB,UAAA;MACI,CAAA,GAER,YAAY,QACR;;KAEP,qBAAC,OAAD;MACE,SAAQ;MACR,aAAY;MACZ,MAAM;OAAE,WAAW;OAAoB,UAAU;OAAI,MAAM;MAAe;MAC1E,MAAM,CAAC;MACP,GAAI;MACJ,GAAI;MANN,UAAA,CAQG,mBACC,oBAAC,OAAD;OACE,UAAS;OACT,OAAO;OACP,YAAW;OACX,UAAU;OACV,QAAQ;OACR,GAAI,UAAU,WAAW;OAExB,UAAA;MACI,CAAA,GAER,YAAY,QACR;;KAEP,oBAAC,eAAD;MACmB;MACjB,UAAU,aAAa,OAAO,aAAa;MAC3C,YAAY,aAAa,OAAO,aAAa;MAC7C,GAAI,UAAU,MAAM;MACpB,GAAI;KACL,CAAA;KAEA,eACC,oBAACC,WAAD;MACE,mBAAmB;MACnB,mBAAmB,6BAA6B;MAChD,UAAU,EAAE,GAAG,EAAE;MACjB,QAAQ;OACN,QAAQ;OACR,aAAa;OACb;MACF;MACA,UAAU,EAAE,OAAO,SAAS,qBAC1B,oBAAC,cAAD;OACE,OAAO,kBAAkB,UAAU,eAAe,OAAO,OAAO,IAAI;OAC3D;OACH;OACN,YAAY;OACZ,QAAQ;OACA;OACQ;OACJ;MACb,CAAA;MAEH,GAAI;KACL,CAAA;KAGF;KACA;KACA;KACA,aACC,oBAAC,YAAD;MACW;MACT,YAAY;MACZ,QAAQ;MACR,GAAI;KACL,CAAA;KAEF;IACqB;;EACL,CAAA;CAClB,CAAA;AAET,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUC;AACzB,eAAe,eAAe"}

package/esm/DonutChart/DonutChart.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.mjs","names":["ReChartsPieChart","Tooltip","classes"],"sources":["../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n Legend,\n LegendProps,\n Pie,\n PieLabel,\n PieProps,\n PieChart as ReChartsPieChart,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport { getPieChartData } from '../utils';\nimport classes from './DonutChart.module.css';\n\nexport interface DonutChartCell {\n name: string;\n value: number;\n color: MantineColor;\n}\n\nexport type DonutChartStylesNames =\n \| 'root'\n \| 'label'\n \| ChartTooltipStylesNames\n \| ChartLegendStylesNames;\nexport type DonutChartCssVariables = {\n root: '--chart-stroke-color' \| '--chart-labels-color' \| '--chart-size';\n};\n\nexport interface DonutChartProps\n extends BoxProps, StylesApiProps<DonutChartFactory>, ElementProps<'div'> {\n /** Data used to render chart /\n data: DonutChartCell[];\n\n /* Determines whether the tooltip should be displayed when one of the section is hovered @default true /\n withTooltip?: boolean;\n\n /* Determines whether the legend should be displayed @default false /\n withLegend?: boolean;\n\n /* Props passed down to recharts `Legend` component /\n legendProps?: Omit<LegendProps, 'ref'>;\n\n /* Tooltip animation duration in ms @default 0 /\n tooltipAnimationDuration?: number;\n\n /* Props passed down to `Tooltip` recharts component /\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n /* Props passed down to recharts `Pie` component /\n pieProps?: Partial<Omit<PieProps, 'ref'>>;\n\n /* Controls color of the segments stroke, by default depends on color scheme /\n strokeColor?: MantineColor;\n\n /* Controls text color of all labels, by default depends on color scheme /\n labelColor?: MantineColor;\n\n /* Controls padding between segments @default 0 /\n paddingAngle?: number;\n\n /* Determines whether each segment should have associated label @default false /\n withLabels?: boolean;\n\n /* Determines whether segments labels should have lines that connect the segment with the label @default true /\n withLabelsLine?: boolean;\n\n /* Controls thickness of the chart segments @default 20 /\n thickness?: number;\n\n /* Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default 80 /\n size?: number;\n\n /* Controls width of segments stroke @default 1 /\n strokeWidth?: number;\n\n /* Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default 0 /\n startAngle?: number;\n\n /* Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default 360 /\n endAngle?: number;\n\n /* Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' /\n tooltipDataSource?: 'segment' \| 'all';\n\n /* Chart label, displayed in the center of the chart /\n chartLabel?: string \| number;\n\n /* Additional elements rendered inside `PieChart` component /\n children?: React.ReactNode;\n\n /* Props passed down to recharts `PieChart` component /\n pieChartProps?: React.ComponentProps<typeof ReChartsPieChart>;\n\n /* Type of labels to display, `'value'` by default /\n labelsType?: 'value' \| 'percent' \| 'name';\n\n /* A function to format values inside the tooltip /\n valueFormatter?: (value: number) => string;\n\n /* Props passed down to each segment of the chart /\n cellProps?:\n \| ((series: DonutChartCell) => Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>)\n \| Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>;\n\n /* Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default /\n accessibilityLayer?: boolean;\n}\n\nexport type DonutChartFactory = Factory<{\n props: DonutChartProps;\n ref: HTMLDivElement;\n stylesNames: DonutChartStylesNames;\n vars: DonutChartCssVariables;\n}>;\n\nconst defaultProps = {\n withTooltip: true,\n withLabelsLine: true,\n paddingAngle: 0,\n thickness: 20,\n size: 160,\n strokeWidth: 1,\n startAngle: 0,\n endAngle: 360,\n labelsType: 'value',\n tooltipDataSource: 'all',\n accessibilityLayer: true,\n} satisfies Partial<DonutChartProps>;\n\nconst varsResolver = createVarsResolver<DonutChartFactory>(\n (theme, { strokeColor, labelColor, withLabels, withLegend, size }) => ({\n root: {\n '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n '--chart-size': rem(size! + (withLabels ? 80 : 0) + (withLegend ? 80 : 0)),\n },\n })\n);\n\nconst getLabelValue = (\n labelsType: DonutChartProps['labelsType'],\n value: number \| undefined,\n percent: number \| undefined,\n name: string \| undefined,\n valueFormatter?: DonutChartProps['valueFormatter']\n) => {\n if (labelsType === 'name') {\n return name;\n }\n\n if (labelsType === 'percent') {\n return `${((percent \|\| 0) 100).toFixed(0)}%`;\n }\n\n if (typeof valueFormatter === 'function') {\n return valueFormatter(value \|\| 0);\n }\n\n return value;\n};\n\nconst getLabel =\n (\n labelsType: 'value' \| 'percent' \| 'name',\n valueFormatter?: DonutChartProps['valueFormatter']\n ): PieLabel =>\n ({ x, y, cx, cy, percent, value, name }) => (\n <text\n x={x}\n y={y}\n cx={cx}\n cy={cy}\n textAnchor={x > Number(cx) ? 'start' : 'end'}\n fill=\"var(--chart-labels-color, var(--mantine-color-dimmed))\"\n fontFamily=\"var(--mantine-font-family)\"\n fontSize={12}\n >\n <tspan x={x}>\n {getLabelValue(labelsType, Number(value), Number(percent), name as string, valueFormatter)}\n </tspan>\n </text>\n );\n\nexport const DonutChart = factory<DonutChartFactory>((_props) => {\n const props = useProps('DonutChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withTooltip,\n withLegend,\n legendProps,\n tooltipAnimationDuration,\n tooltipProps,\n pieProps,\n paddingAngle,\n withLabels,\n withLabelsLine,\n size,\n thickness,\n strokeWidth,\n startAngle,\n endAngle,\n tooltipDataSource,\n chartLabel,\n children,\n pieChartProps,\n valueFormatter,\n strokeColor,\n labelsType,\n attributes,\n cellProps,\n accessibilityLayer,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const [highlightedIndex, setHighlightedIndex] = useState<number \| null>(null);\n\n const getStyles = useStyles<DonutChartFactory>({\n name: 'DonutChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DonutChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const pieData = getPieChartData({ data, theme, strokeWidth, highlightedIndex, cellProps });\n\n return (\n <Box size={size} {...getStyles('root')} {...others}>\n <ResponsiveContainer>\n <ReChartsPieChart accessibilityLayer={accessibilityLayer} {...pieChartProps}>\n <Pie\n data={pieData as any}\n innerRadius={size / 2 - thickness}\n outerRadius={size / 2}\n dataKey=\"value\"\n isAnimationActive={false}\n paddingAngle={paddingAngle}\n startAngle={startAngle}\n endAngle={endAngle}\n label={withLabels ? getLabel(labelsType \|\| 'value', valueFormatter) : false}\n labelLine={\n withLabelsLine\n ? {\n stroke: 'var(--chart-label-color, var(--mantine-color-dimmed))',\n strokeWidth: 1,\n }\n : false\n }\n {...pieProps}\n />\n\n {chartLabel && (\n <text\n x=\"50%\"\n y=\"50%\"\n textAnchor=\"middle\"\n dominantBaseline=\"middle\"\n {...getStyles('label')}\n >\n {chartLabel}\n </text>\n )}\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => (\n <ChartTooltip\n payload={data}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n segmentId={\n tooltipDataSource === 'segment'\n ? (payload?.[0]?.payload?.__segmentIndex as number)\n : undefined\n }\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {withLegend && (\n <Legend\n verticalAlign=\"bottom\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload?.map((item) => ({\n ...item,\n dataKey: (item.payload as any)?.name,\n highlightKey: (item.payload as any)?.__segmentIndex,\n }))}\n onHighlight={(value) =>\n setHighlightedIndex(typeof value === 'number' ? value : null)\n }\n legendPosition={legendProps?.verticalAlign \|\| 'bottom'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n centered\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n {children}\n </ReChartsPieChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nDonutChart.displayName = '@mantine/charts/DonutChart';\nDonutChart.classes = classes;\nDonutChart.varsResolver = varsResolver;\n\nexport namespace DonutChart {\n export type Props = DonutChartProps;\n export type StylesNames = DonutChartStylesNames;\n export type Factory = DonutChartFactory;\n export type CssVariables = DonutChartCssVariables;\n export type Cell = DonutChartCell;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"DonutChart.mjs","names":["ReChartsPieChart","Tooltip","classes"],"sources":["../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n Legend,\n LegendProps,\n Pie,\n PieLabel,\n PieProps,\n PieChart as ReChartsPieChart,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport { getPieChartData } from '../utils';\nimport classes from './DonutChart.module.css';\n\nexport interface DonutChartCell {\n name: string;\n value: number;\n color: MantineColor;\n}\n\nexport type DonutChartStylesNames =\n \| 'root'\n \| 'label'\n \| ChartTooltipStylesNames\n \| ChartLegendStylesNames;\nexport type DonutChartCssVariables = {\n root: '--chart-stroke-color' \| '--chart-labels-color' \| '--chart-size';\n};\n\nexport interface DonutChartProps\n extends BoxProps, StylesApiProps<DonutChartFactory>, ElementProps<'div'> {\n /** Data used to render chart /\n data: DonutChartCell[];\n\n /* Determines whether the tooltip should be displayed when one of the section is hovered @default true /\n withTooltip?: boolean;\n\n /* Determines whether the legend should be displayed @default false /\n withLegend?: boolean;\n\n /* Props passed down to recharts `Legend` component /\n legendProps?: Omit<LegendProps, 'ref'>;\n\n /* Tooltip animation duration in ms @default 0 /\n tooltipAnimationDuration?: number;\n\n /* Props passed down to `Tooltip` recharts component /\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n /* Props passed down to recharts `Pie` component /\n pieProps?: Partial<Omit<PieProps, 'ref'>>;\n\n /* Controls color of the segments stroke, by default depends on color scheme /\n strokeColor?: MantineColor;\n\n /* Controls text color of all labels, by default depends on color scheme /\n labelColor?: MantineColor;\n\n /* Controls padding between segments @default 0 /\n paddingAngle?: number;\n\n /* Determines whether each segment should have associated label @default false /\n withLabels?: boolean;\n\n /* Determines whether segments labels should have lines that connect the segment with the label @default true /\n withLabelsLine?: boolean;\n\n /* Controls thickness of the chart segments @default 20 /\n thickness?: number;\n\n /* Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default 160 /\n size?: number;\n\n /* Controls width of segments stroke @default 1 /\n strokeWidth?: number;\n\n /* Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default 0 /\n startAngle?: number;\n\n /* Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default 360 /\n endAngle?: number;\n\n /* Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' /\n tooltipDataSource?: 'segment' \| 'all';\n\n /* Chart label, displayed in the center of the chart /\n chartLabel?: string \| number;\n\n /* Additional elements rendered inside `PieChart` component /\n children?: React.ReactNode;\n\n /* Props passed down to recharts `PieChart` component /\n pieChartProps?: React.ComponentProps<typeof ReChartsPieChart>;\n\n /* Type of labels to display, `'value'` by default /\n labelsType?: 'value' \| 'percent' \| 'name';\n\n /* A function to format values inside the tooltip /\n valueFormatter?: (value: number) => string;\n\n /* Props passed down to each segment of the chart /\n cellProps?:\n \| ((series: DonutChartCell) => Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>)\n \| Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>;\n\n /* Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default /\n accessibilityLayer?: boolean;\n}\n\nexport type DonutChartFactory = Factory<{\n props: DonutChartProps;\n ref: HTMLDivElement;\n stylesNames: DonutChartStylesNames;\n vars: DonutChartCssVariables;\n}>;\n\nconst defaultProps = {\n withTooltip: true,\n withLabelsLine: true,\n paddingAngle: 0,\n thickness: 20,\n size: 160,\n strokeWidth: 1,\n startAngle: 0,\n endAngle: 360,\n labelsType: 'value',\n tooltipDataSource: 'all',\n accessibilityLayer: true,\n} satisfies Partial<DonutChartProps>;\n\nconst varsResolver = createVarsResolver<DonutChartFactory>(\n (theme, { strokeColor, labelColor, withLabels, withLegend, size }) => ({\n root: {\n '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n '--chart-size': rem(size! + (withLabels ? 80 : 0) + (withLegend ? 80 : 0)),\n },\n })\n);\n\nconst getLabelValue = (\n labelsType: DonutChartProps['labelsType'],\n value: number \| undefined,\n percent: number \| undefined,\n name: string \| undefined,\n valueFormatter?: DonutChartProps['valueFormatter']\n) => {\n if (labelsType === 'name') {\n return name;\n }\n\n if (labelsType === 'percent') {\n return `${((percent \|\| 0) 100).toFixed(0)}%`;\n }\n\n if (typeof valueFormatter === 'function') {\n return valueFormatter(value \|\| 0);\n }\n\n return value;\n};\n\nconst getLabel =\n (\n labelsType: 'value' \| 'percent' \| 'name',\n valueFormatter?: DonutChartProps['valueFormatter']\n ): PieLabel =>\n ({ x, y, cx, cy, percent, value, name }) => (\n <text\n x={x}\n y={y}\n cx={cx}\n cy={cy}\n textAnchor={x > Number(cx) ? 'start' : 'end'}\n fill=\"var(--chart-labels-color, var(--mantine-color-dimmed))\"\n fontFamily=\"var(--mantine-font-family)\"\n fontSize={12}\n >\n <tspan x={x}>\n {getLabelValue(labelsType, Number(value), Number(percent), name as string, valueFormatter)}\n </tspan>\n </text>\n );\n\nexport const DonutChart = factory<DonutChartFactory>((_props) => {\n const props = useProps('DonutChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withTooltip,\n withLegend,\n legendProps,\n tooltipAnimationDuration,\n tooltipProps,\n pieProps,\n paddingAngle,\n withLabels,\n withLabelsLine,\n size,\n thickness,\n strokeWidth,\n startAngle,\n endAngle,\n tooltipDataSource,\n chartLabel,\n children,\n pieChartProps,\n valueFormatter,\n strokeColor,\n labelsType,\n attributes,\n cellProps,\n accessibilityLayer,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const [highlightedIndex, setHighlightedIndex] = useState<number \| null>(null);\n\n const getStyles = useStyles<DonutChartFactory>({\n name: 'DonutChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DonutChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const pieData = getPieChartData({ data, theme, strokeWidth, highlightedIndex, cellProps });\n\n return (\n <Box size={size} {...getStyles('root')} {...others}>\n <ResponsiveContainer>\n <ReChartsPieChart accessibilityLayer={accessibilityLayer} {...pieChartProps}>\n <Pie\n data={pieData as any}\n innerRadius={size / 2 - thickness}\n outerRadius={size / 2}\n dataKey=\"value\"\n isAnimationActive={false}\n paddingAngle={paddingAngle}\n startAngle={startAngle}\n endAngle={endAngle}\n label={withLabels ? getLabel(labelsType \|\| 'value', valueFormatter) : false}\n labelLine={\n withLabelsLine\n ? {\n stroke: 'var(--chart-label-color, var(--mantine-color-dimmed))',\n strokeWidth: 1,\n }\n : false\n }\n {...pieProps}\n />\n\n {chartLabel && (\n <text\n x=\"50%\"\n y=\"50%\"\n textAnchor=\"middle\"\n dominantBaseline=\"middle\"\n {...getStyles('label')}\n >\n {chartLabel}\n </text>\n )}\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => (\n <ChartTooltip\n payload={data}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n segmentId={\n tooltipDataSource === 'segment'\n ? (payload?.[0]?.payload?.__segmentIndex as number)\n : undefined\n }\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {withLegend && (\n <Legend\n verticalAlign=\"bottom\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload?.map((item) => ({\n ...item,\n dataKey: (item.payload as any)?.name,\n highlightKey: (item.payload as any)?.__segmentIndex,\n }))}\n onHighlight={(value) =>\n setHighlightedIndex(typeof value === 'number' ? value : null)\n }\n legendPosition={legendProps?.verticalAlign \|\| 'bottom'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n centered\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n {children}\n </ReChartsPieChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nDonutChart.displayName = '@mantine/charts/DonutChart';\nDonutChart.classes = classes;\nDonutChart.varsResolver = varsResolver;\n\nexport namespace DonutChart {\n export type Props = DonutChartProps;\n export type StylesNames = DonutChartStylesNames;\n export type Factory = DonutChartFactory;\n export type CssVariables = DonutChartCssVariables;\n export type Cell = DonutChartCell;\n}\n"],"mappings":"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"}

package/esm/GaugeChart/GaugeChart.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
 import GaugeChart_module_default from "./GaugeChart.module.mjs";
 import { Box, createVarsResolver, factory, getThemeColor, rem, useMantineTheme, useProps, useStyles } from "@mantine/core";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/charts/src/GaugeChart/GaugeChart.tsx
 const defaultProps = {
 	min: 0,
@@ -118,21 +118,33 @@ const GaugeChart = factory((_props) => {
 		const sortedSections = [...sections].sort((a, b) => a.value - b.value);
 		const direction = resolvedEndAngle >= startAngle ? 1 : -1;
 		let prevAngle = startAngle;
-		return sortedSections.map((section, index) => {
+		const resolvedSections = sortedSections.map((section) => {
 			const sectionEndAngle = valueToAngle(section.value, min, max, startAngle, resolvedEndAngle);
 			if ((sectionEndAngle - prevAngle) * direction <= 0) return null;
 			const path = describeArc(cx, cy, r, prevAngle, sectionEndAngle);
-			const resolvedColor = getThemeColor(section.color, theme);
 			prevAngle = sectionEndAngle;
-			return /* @__PURE__ */ jsx("path", {
-				...getStyles("section"),
-				d: path,
-				fill: "none",
-				stroke: resolvedColor,
-				strokeWidth: thickness,
-				strokeLinecap: "butt"
-			}, index);
+			return {
+				path,
+				color: getThemeColor(section.color, theme)
+			};
 		});
+		const visibleSections = resolvedSections.filter((section) => section !== null);
+		const capSections = roundCaps && visibleSections.length > 0 ? visibleSections.length === 1 ? [visibleSections[0]] : [visibleSections[0], visibleSections[visibleSections.length - 1]] : [];
+		return /* @__PURE__ */ jsxs(Fragment, { children: [capSections.map((section, index) => /* @__PURE__ */ jsx("path", {
+			...getStyles("sectionCap"),
+			d: section.path,
+			fill: "none",
+			stroke: section.color,
+			strokeWidth: thickness,
+			strokeLinecap: "round"
+		}, index)), resolvedSections.map((section, index) => section ? /* @__PURE__ */ jsx("path", {
+			...getStyles("section"),
+			d: section.path,
+			fill: "none",
+			stroke: section.color,
+			strokeWidth: thickness,
+			strokeLinecap: "butt"
+		}, index) : null)] });
 	})() : /* @__PURE__ */ jsx("path", {
 		...getStyles("section"),
 		d: describeArc(cx, cy, r, startAngle, valueToAngle(value, min, max, startAngle, resolvedEndAngle)),