@mantine/charts 9.0.0-alpha.7 → 9.0.1

package/README.md

@@ -10,10 +10,10 @@ Charts components built with recharts and Mantine
 
 ```bash
 # With yarn
-yarn add @mantine/charts
+yarn add @mantine/charts @mantine/core @mantine/hooks recharts
 
 # With npm
-npm install @mantine/charts
+npm install @mantine/charts @mantine/core @mantine/hooks recharts
 ```
 
 ## License

package/cjs/AreaChart/AreaChart.cjs

@@ -142,10 +142,10 @@ const AreaChart = (0, _mantine_core.factory)((_props) => {
 			yAxisId: line.yAxisId || void 0,
 			...line,
 			label: {
-				value: line.label,
 				fill: line.color ? color : "currentColor",
 				fontSize: 12,
-				position: line.labelPosition ?? "insideBottomLeft"
+				position: line.labelPosition ?? "insideBottomLeft",
+				...typeof line.label === "object" ? line.label : { value: line.label }
 			},
 			...getStyles("referenceLine")
 		}, index);

package/cjs/AreaChart/AreaChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.cjs","names":["classes","Area","Fragment","AreaGradient","PointLabel","ReferenceLine","Box","ResponsiveContainer","ReChartsAreaChart","Legend","ChartLegend","CartesianGrid","XAxis","Label","YAxis","Tooltip","ChartTooltip","AreaSplit","getDefaultSplitOffset"],"sources":["../../src/AreaChart/AreaChart.tsx"],"sourcesContent":["import { Fragment, useId, useState } from 'react';\nimport {\n  Area,\n  AreaProps,\n  CartesianGrid,\n  Label,\n  Legend,\n  AreaChart as ReChartsAreaChart,\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 { 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 { AreaGradient } from './AreaGradient';\nimport { AreaSplit } from './AreaSplit';\nimport { getDefaultSplitOffset } from './get-split-offset';\nimport classes from '../grid-chart.module.css';\n\nfunction valueToPercent(value: number) {\n  return `${(value * 100).toFixed(0)}%`;\n}\n\nexport interface AreaChartSeries extends ChartSeries {\n  strokeDasharray?: string | number;\n  color: MantineColor;\n  curveType?: AreaChartCurveType;\n}\n\nexport type AreaChartType = 'default' | 'stacked' | 'percent' | 'split';\n\nexport type AreaChartCurveType =\n  | 'bump'\n  | 'linear'\n  | 'natural'\n  | 'monotone'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter';\n\nexport type AreaChartStylesNames =\n  | 'area'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type AreaChartCSSVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface AreaChartProps\n  extends BoxProps, GridChartBaseProps, StylesApiProps<AreaChartFactory>, ElementProps<'div'> {\n  /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */\n  series: AreaChartSeries[];\n\n  /** Controls how chart areas are positioned relative to each other @default 'default' */\n  type?: AreaChartType;\n\n  /** Determines whether the chart area should be represented with a gradient instead of the solid color @default false */\n  withGradient?: boolean;\n\n  /** Type of the curve @default 'monotone' */\n  curveType?: AreaChartCurveType;\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 areas @default 2 */\n  strokeWidth?: number;\n\n  /** Props passed down to recharts `AreaChart` component */\n  areaChartProps?: React.ComponentProps<typeof ReChartsAreaChart>;\n\n  /** Controls fill opacity of all areas @default 0.2 */\n  fillOpacity?: number;\n\n  /** A tuple of colors used when `type=\"split\"` is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors @default ['green.7', 'red.7'] */\n  splitColors?: [MantineColor, MantineColor];\n\n  /** Offset for the split gradient. By default, value is inferred from `data` and `series` if possible. Must be generated from the data array with `getSplitOffset` function. */\n  splitOffset?: number;\n\n  /** If set, points with `null` values are 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 `Area` component */\n  areaProps?:\n    | ((series: AreaChartSeries) => Partial<Omit<AreaProps<any, any>, 'ref'>>)\n    | Partial<Omit<AreaProps<any, any>, 'ref'>>;\n\n  /** If set, each point has an associated label @default false */\n  withPointLabels?: boolean;\n}\n\nexport type AreaChartFactory = Factory<{\n  props: AreaChartProps;\n  ref: HTMLDivElement;\n  stylesNames: AreaChartStylesNames;\n  vars: AreaChartCSSVariables;\n}>;\n\nconst defaultProps = {\n  withXAxis: true,\n  withYAxis: true,\n  withDots: true,\n  withTooltip: true,\n  connectNulls: true,\n  strokeWidth: 2,\n  tooltipAnimationDuration: 0,\n  fillOpacity: 0.2,\n  tickLine: 'y',\n  strokeDasharray: '5 5',\n  curveType: 'monotone',\n  gridAxis: 'x',\n  type: 'default',\n  splitColors: ['green.7', 'red.7'],\n  orientation: 'horizontal',\n} satisfies Partial<AreaChartProps>;\n\nconst varsResolver = createVarsResolver<AreaChartFactory>((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 AreaChart = factory<AreaChartFactory>((_props) => {\n  const props = useProps('AreaChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    series,\n    withGradient,\n    dataKey,\n    withXAxis,\n    withYAxis,\n    curveType,\n    gridProps,\n    withDots,\n    tickLine,\n    strokeDasharray,\n    gridAxis,\n    unit,\n    yAxisProps,\n    xAxisProps,\n    dotProps,\n    activeDotProps,\n    strokeWidth,\n    tooltipAnimationDuration,\n    type,\n    legendProps,\n    tooltipProps,\n    withLegend,\n    withTooltip,\n    areaChartProps,\n    fillOpacity,\n    splitColors,\n    splitOffset,\n    connectNulls,\n    onMouseLeave,\n    orientation,\n    referenceLines,\n    dir,\n    valueFormatter,\n    children,\n    areaProps,\n    xAxisLabel,\n    yAxisLabel,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    withPointLabels,\n    gridColor,\n    textColor,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const baseId = useId();\n  const splitId = `${baseId}-split`;\n  const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n  const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n  const isAnimationActive = (tooltipAnimationDuration || 0) > 0;\n  const _withGradient = typeof withGradient === 'boolean' ? withGradient : type === 'default';\n  const stacked = type === 'stacked' || type === 'percent';\n  const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n  const shouldHighlight = highlightedArea !== null;\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    setHighlightedArea(null);\n    onMouseLeave?.(event);\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<AreaChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<AreaChartFactory>({\n    name: 'AreaChart',\n    classes: classes as any,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const dotsAreas = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n    return (\n      <Area\n        {...getStyles('area')}\n        activeDot={{ fill: theme.white, stroke: color, strokeWidth: 2, r: 4, ...activeDotProps }}\n        dot={{ fill: color, fillOpacity: dimmed ? 0 : 1, strokeWidth: 2, r: 4, ...dotProps }}\n        key={item.name}\n        name={item.name}\n        type={curveType}\n        dataKey={item.name}\n        fill=\"none\"\n        strokeWidth={strokeWidth}\n        stroke=\"none\"\n        isAnimationActive={false}\n        connectNulls={connectNulls}\n        stackId={stacked ? 'stack-dots' : undefined}\n        yAxisId={item.yAxisId || undefined}\n        {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n      />\n    );\n  });\n\n  const areas = series.map((item) => {\n    const id = `${baseId}-${item.color.replace(/[^a-zA-Z0-9]/g, '')}`;\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n    return (\n      <Fragment key={item.name}>\n        <defs>\n          <AreaGradient\n            color={color}\n            withGradient={_withGradient}\n            id={id}\n            fillOpacity={fillOpacity}\n          />\n        </defs>\n        <Area\n          {...getStyles('area')}\n          activeDot={false}\n          dot={false}\n          name={item.name}\n          type={item.curveType ?? curveType}\n          dataKey={item.name}\n          fill={type === 'split' ? `url(#${splitId})` : `url(#${id})`}\n          strokeWidth={strokeWidth}\n          stroke={color}\n          isAnimationActive={false}\n          connectNulls={connectNulls}\n          stackId={stacked ? 'stack' : undefined}\n          fillOpacity={dimmed ? 0 : 1}\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      </Fragment>\n    );\n  });\n\n  const referenceLinesItems = referenceLines?.map((line, index) => {\n    const color = getThemeColor(line.color, theme);\n    return (\n      <ReferenceLine\n        key={index}\n        stroke={line.color ? color : 'var(--chart-grid-color)'}\n        strokeWidth={1}\n        yAxisId={line.yAxisId || undefined}\n        {...line}\n        label={{\n          value: line.label,\n          fill: line.color ? color : 'currentColor',\n          fontSize: 12,\n          position: line.labelPosition ?? 'insideBottomLeft',\n        }}\n        {...getStyles('referenceLine')}\n      />\n    );\n  });\n\n  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;\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 : tickFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsAreaChart\n          data={data}\n          stackOffset={type === 'percent' ? 'expand' : undefined}\n          layout={orientation}\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          {...areaChartProps}\n        >\n          {referenceLinesItems}\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          <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          <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' ? tickFormatter : 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            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          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={isAnimationActive}\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                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {type === 'split' && (\n            <defs>\n              <AreaSplit\n                colors={splitColors}\n                id={splitId}\n                offset={splitOffset ?? getDefaultSplitOffset({ data, series })}\n                fillOpacity={fillOpacity}\n              />\n            </defs>\n          )}\n\n          {areas}\n          {withDots && dotsAreas}\n          {children}\n        </ReChartsAreaChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nAreaChart.classes = classes;\nAreaChart.varsResolver = varsResolver;\nAreaChart.displayName = '@mantine/charts/AreaChart';\n"],"mappings":"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"}
+{"version":3,"file":"AreaChart.cjs","names":["classes","Area","Fragment","AreaGradient","PointLabel","ReferenceLine","Box","ResponsiveContainer","ReChartsAreaChart","Legend","ChartLegend","CartesianGrid","XAxis","Label","YAxis","Tooltip","ChartTooltip","AreaSplit","getDefaultSplitOffset"],"sources":["../../src/AreaChart/AreaChart.tsx"],"sourcesContent":["import { Fragment, useId, useState } from 'react';\nimport {\n  Area,\n  AreaProps,\n  CartesianGrid,\n  Label,\n  Legend,\n  AreaChart as ReChartsAreaChart,\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 { 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 { AreaGradient } from './AreaGradient';\nimport { AreaSplit } from './AreaSplit';\nimport { getDefaultSplitOffset } from './get-split-offset';\nimport classes from '../grid-chart.module.css';\n\nfunction valueToPercent(value: number) {\n  return `${(value * 100).toFixed(0)}%`;\n}\n\nexport interface AreaChartSeries extends ChartSeries {\n  strokeDasharray?: string | number;\n  color: MantineColor;\n  curveType?: AreaChartCurveType;\n}\n\nexport type AreaChartType = 'default' | 'stacked' | 'percent' | 'split';\n\nexport type AreaChartCurveType =\n  | 'bump'\n  | 'linear'\n  | 'natural'\n  | 'monotone'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter';\n\nexport type AreaChartStylesNames =\n  | 'area'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type AreaChartCSSVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface AreaChartProps\n  extends BoxProps, GridChartBaseProps, StylesApiProps<AreaChartFactory>, ElementProps<'div'> {\n  /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */\n  series: AreaChartSeries[];\n\n  /** Controls how chart areas are positioned relative to each other @default 'default' */\n  type?: AreaChartType;\n\n  /** Determines whether the chart area should be represented with a gradient instead of the solid color @default false */\n  withGradient?: boolean;\n\n  /** Type of the curve @default 'monotone' */\n  curveType?: AreaChartCurveType;\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 areas @default 2 */\n  strokeWidth?: number;\n\n  /** Props passed down to recharts `AreaChart` component */\n  areaChartProps?: React.ComponentProps<typeof ReChartsAreaChart>;\n\n  /** Controls fill opacity of all areas @default 0.2 */\n  fillOpacity?: number;\n\n  /** A tuple of colors used when `type=\"split\"` is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors @default ['green.7', 'red.7'] */\n  splitColors?: [MantineColor, MantineColor];\n\n  /** Offset for the split gradient. By default, value is inferred from `data` and `series` if possible. Must be generated from the data array with `getSplitOffset` function. */\n  splitOffset?: number;\n\n  /** If set, points with `null` values are 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 `Area` component */\n  areaProps?:\n    | ((series: AreaChartSeries) => Partial<Omit<AreaProps<any, any>, 'ref'>>)\n    | Partial<Omit<AreaProps<any, any>, 'ref'>>;\n\n  /** If set, each point has an associated label @default false */\n  withPointLabels?: boolean;\n}\n\nexport type AreaChartFactory = Factory<{\n  props: AreaChartProps;\n  ref: HTMLDivElement;\n  stylesNames: AreaChartStylesNames;\n  vars: AreaChartCSSVariables;\n}>;\n\nconst defaultProps = {\n  withXAxis: true,\n  withYAxis: true,\n  withDots: true,\n  withTooltip: true,\n  connectNulls: true,\n  strokeWidth: 2,\n  tooltipAnimationDuration: 0,\n  fillOpacity: 0.2,\n  tickLine: 'y',\n  strokeDasharray: '5 5',\n  curveType: 'monotone',\n  gridAxis: 'x',\n  type: 'default',\n  splitColors: ['green.7', 'red.7'],\n  orientation: 'horizontal',\n} satisfies Partial<AreaChartProps>;\n\nconst varsResolver = createVarsResolver<AreaChartFactory>((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 AreaChart = factory<AreaChartFactory>((_props) => {\n  const props = useProps('AreaChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    series,\n    withGradient,\n    dataKey,\n    withXAxis,\n    withYAxis,\n    curveType,\n    gridProps,\n    withDots,\n    tickLine,\n    strokeDasharray,\n    gridAxis,\n    unit,\n    yAxisProps,\n    xAxisProps,\n    dotProps,\n    activeDotProps,\n    strokeWidth,\n    tooltipAnimationDuration,\n    type,\n    legendProps,\n    tooltipProps,\n    withLegend,\n    withTooltip,\n    areaChartProps,\n    fillOpacity,\n    splitColors,\n    splitOffset,\n    connectNulls,\n    onMouseLeave,\n    orientation,\n    referenceLines,\n    dir,\n    valueFormatter,\n    children,\n    areaProps,\n    xAxisLabel,\n    yAxisLabel,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    withPointLabels,\n    gridColor,\n    textColor,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const baseId = useId();\n  const splitId = `${baseId}-split`;\n  const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n  const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n  const isAnimationActive = (tooltipAnimationDuration || 0) > 0;\n  const _withGradient = typeof withGradient === 'boolean' ? withGradient : type === 'default';\n  const stacked = type === 'stacked' || type === 'percent';\n  const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n  const shouldHighlight = highlightedArea !== null;\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    setHighlightedArea(null);\n    onMouseLeave?.(event);\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<AreaChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<AreaChartFactory>({\n    name: 'AreaChart',\n    classes: classes as any,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const dotsAreas = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n    return (\n      <Area\n        {...getStyles('area')}\n        activeDot={{ fill: theme.white, stroke: color, strokeWidth: 2, r: 4, ...activeDotProps }}\n        dot={{ fill: color, fillOpacity: dimmed ? 0 : 1, strokeWidth: 2, r: 4, ...dotProps }}\n        key={item.name}\n        name={item.name}\n        type={curveType}\n        dataKey={item.name}\n        fill=\"none\"\n        strokeWidth={strokeWidth}\n        stroke=\"none\"\n        isAnimationActive={false}\n        connectNulls={connectNulls}\n        stackId={stacked ? 'stack-dots' : undefined}\n        yAxisId={item.yAxisId || undefined}\n        {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n      />\n    );\n  });\n\n  const areas = series.map((item) => {\n    const id = `${baseId}-${item.color.replace(/[^a-zA-Z0-9]/g, '')}`;\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n    return (\n      <Fragment key={item.name}>\n        <defs>\n          <AreaGradient\n            color={color}\n            withGradient={_withGradient}\n            id={id}\n            fillOpacity={fillOpacity}\n          />\n        </defs>\n        <Area\n          {...getStyles('area')}\n          activeDot={false}\n          dot={false}\n          name={item.name}\n          type={item.curveType ?? curveType}\n          dataKey={item.name}\n          fill={type === 'split' ? `url(#${splitId})` : `url(#${id})`}\n          strokeWidth={strokeWidth}\n          stroke={color}\n          isAnimationActive={false}\n          connectNulls={connectNulls}\n          stackId={stacked ? 'stack' : undefined}\n          fillOpacity={dimmed ? 0 : 1}\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      </Fragment>\n    );\n  });\n\n  const referenceLinesItems = referenceLines?.map((line, index) => {\n    const color = getThemeColor(line.color, theme);\n    return (\n      <ReferenceLine\n        key={index}\n        stroke={line.color ? color : 'var(--chart-grid-color)'}\n        strokeWidth={1}\n        yAxisId={line.yAxisId || undefined}\n        {...line}\n        label={{\n          fill: line.color ? color : 'currentColor',\n          fontSize: 12,\n          position: line.labelPosition ?? 'insideBottomLeft',\n          ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n        }}\n        {...getStyles('referenceLine')}\n      />\n    );\n  });\n\n  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;\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 : tickFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsAreaChart\n          data={data}\n          stackOffset={type === 'percent' ? 'expand' : undefined}\n          layout={orientation}\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          {...areaChartProps}\n        >\n          {referenceLinesItems}\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          <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          <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' ? tickFormatter : 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            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          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={isAnimationActive}\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                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {type === 'split' && (\n            <defs>\n              <AreaSplit\n                colors={splitColors}\n                id={splitId}\n                offset={splitOffset ?? getDefaultSplitOffset({ data, series })}\n                fillOpacity={fillOpacity}\n              />\n            </defs>\n          )}\n\n          {areas}\n          {withDots && dotsAreas}\n          {children}\n        </ReChartsAreaChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nAreaChart.classes = classes;\nAreaChart.varsResolver = varsResolver;\nAreaChart.displayName = '@mantine/charts/AreaChart';\n\nexport namespace AreaChart {\n  export type Props = AreaChartProps;\n  export type StylesNames = AreaChartStylesNames;\n  export type Factory = AreaChartFactory;\n  export type Type = AreaChartType;\n  export type Series = AreaChartSeries;\n  export type CurveType = AreaChartCurveType;\n}\n"],"mappings":"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"}

package/cjs/BarChart/BarChart.cjs

@@ -130,10 +130,10 @@ const BarChart = (0, _mantine_core.factory)((_props) => {
 			yAxisId: line.yAxisId || void 0,
 			...line,
 			label: {
-				value: line.label,
 				fill: line.color ? color : "currentColor",
 				fontSize: 12,
-				position: line.labelPosition ?? "insideBottomLeft"
+				position: line.labelPosition ?? "insideBottomLeft",
+				...typeof line.label === "object" ? line.label : { value: line.label }
 			},
 			...getStyles("referenceLine")
 		}, index);

package/cjs/BarChart/BarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.cjs","names":["Bar","React","Rectangle","LabelList","ReferenceLine","Box","ResponsiveContainer","ReChartsBarChart","Legend","ChartLegend","XAxis","Label","YAxis","CartesianGrid","Tooltip","ChartTooltip","classes"],"sources":["../../src/BarChart/BarChart.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Bar,\n  BarProps,\n  BarShapeProps,\n  CartesianGrid,\n  Label,\n  LabelList,\n  LabelListProps,\n  Legend,\n  BarChart as ReChartsBarChart,\n  Rectangle,\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 { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nfunction valueToPercent(value: number) {\n  return `${(value * 100).toFixed(0)}%`;\n}\n\nexport interface BarChartSeries extends ChartSeries {\n  stackId?: string;\n}\n\nexport type BarChartType = 'default' | 'stacked' | 'percent' | 'waterfall';\n\nexport type BarChartStylesNames =\n  | 'bar'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type BarChartCssVariables = {\n  root:\n    | '--chart-text-color'\n    | '--chart-grid-color'\n    | '--chart-cursor-fill'\n    | '--chart-bar-label-color';\n};\n\nexport interface BarChartProps\n  extends BoxProps, GridChartBaseProps, StylesApiProps<BarChartFactory>, 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: BarChartSeries[];\n\n  /** Controls how bars are positioned relative to each other @default 'default' */\n  type?: BarChartType;\n\n  /** Controls fill opacity of all bars @default 1 */\n  fillOpacity?: number;\n\n  /** Fill of hovered bar section, by default value is based on color scheme */\n  cursorFill?: MantineColor;\n\n  /** Props passed down to recharts `BarChart` component */\n  barChartProps?: React.ComponentProps<typeof ReChartsBarChart>;\n\n  /** Additional components that are rendered inside recharts `BarChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `Bar` component */\n  barProps?:\n    | ((series: BarChartSeries) => Partial<Omit<BarProps, 'ref'>>)\n    | Partial<Omit<BarProps, 'ref'>>;\n\n  /** Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type=\"stacked\"` and `type=\"percent\"` @default false */\n  withBarValueLabel?: boolean;\n\n  /** Props passed down to recharts `LabelList` component */\n  valueLabelProps?:\n    | ((series: BarChartSeries) => Partial<Omit<LabelListProps, 'ref'>>)\n    | Partial<LabelListProps>;\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  /** Controls color of the bar label, by default the value is determined by the chart orientation */\n  barLabelColor?: MantineColor;\n\n  /** A function to assign dynamic bar color based on its value */\n  getBarColor?: (value: number, series: BarChartSeries) => MantineColor;\n}\n\nexport type BarChartFactory = Factory<{\n  props: BarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: BarChartStylesNames;\n  vars: BarChartCssVariables;\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  type: 'default',\n} satisfies Partial<BarChartProps>;\n\nconst varsResolver = createVarsResolver<BarChartFactory>(\n  (theme, { textColor, gridColor, cursorFill, barLabelColor }) => ({\n    root: {\n      '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n      '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n      '--chart-cursor-fill': cursorFill ? getThemeColor(cursorFill, theme) : undefined,\n      '--chart-bar-label-color': barLabelColor ? getThemeColor(barLabelColor, theme) : undefined,\n    },\n  })\n);\n\nfunction calculateCumulativeTotal(waterfallData: Record<string, any>[], dataKey: string) {\n  let start: number = 0;\n  let end: number = 0;\n  return waterfallData.map((item) => {\n    if (item.standalone) {\n      for (const prop in item) {\n        if (typeof item[prop] === 'number' && prop !== dataKey) {\n          item[prop] = [0, item[prop]];\n        }\n      }\n    } else {\n      for (const prop in item) {\n        if (typeof item[prop] === 'number' && prop !== dataKey) {\n          end += item[prop];\n          item[prop] = [start, end];\n          start = end;\n        }\n      }\n    }\n    return item;\n  });\n}\n\nfunction getBarFill(barProps: BarChartProps['barProps'], series: BarChartSeries) {\n  if (typeof barProps === 'function') {\n    return barProps(series).fill;\n  }\n\n  return barProps?.fill;\n}\n\nexport const BarChart = factory<BarChartFactory>((_props) => {\n  const props = useProps('BarChart', 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    fillOpacity,\n    barChartProps,\n    type,\n    orientation,\n    dir,\n    valueFormatter,\n    children,\n    barProps,\n    xAxisLabel,\n    yAxisLabel,\n    withBarValueLabel,\n    valueLabelProps,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    minBarSize,\n    maxBarWidth,\n    mod,\n    getBarColor,\n    gridColor,\n    textColor,\n    attributes,\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 | null>(null);\n  const shouldHighlight = highlightedArea !== null;\n  const stacked = type === 'stacked' || type === 'percent';\n  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;\n\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    setHighlightedArea(null);\n    onMouseLeave?.(event);\n  };\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<BarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const inputData = type === 'waterfall' ? calculateCumulativeTotal(data, dataKey) : data;\n\n  const getStyles = useStyles<BarChartFactory>({\n    name: 'BarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const bars = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n    const resolvedBarProps = typeof barProps === 'function' ? barProps(item) : barProps;\n    const userShape = resolvedBarProps?.shape;\n\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 : fillOpacity}\n        strokeOpacity={dimmed ? 0.2 : 0}\n        stackId={stacked ? 'stack' : item.stackId || undefined}\n        yAxisId={item.yAxisId || undefined}\n        minPointSize={minBarSize}\n        {...resolvedBarProps}\n        shape={(shapeProps: BarShapeProps) => {\n          const entry = shapeProps.payload;\n          const cellColor = entry?.color\n            ? getThemeColor(entry.color, theme)\n            : typeof getBarColor === 'function'\n              ? getThemeColor(getBarColor(entry?.[item.name], item), theme)\n              : getBarFill(barProps, item) || color;\n          const coloredProps = { ...shapeProps, fill: cellColor };\n          if (typeof userShape === 'function') {\n            return (userShape as (props: BarShapeProps) => React.ReactElement)(coloredProps);\n          }\n          if (React.isValidElement(userShape)) {\n            return React.cloneElement(userShape, coloredProps as any);\n          }\n          if (typeof userShape === 'object' && userShape) {\n            return <Rectangle {...coloredProps} {...(userShape as any)} />;\n          }\n          return <Rectangle {...coloredProps} />;\n        }}\n      >\n        {withBarValueLabel && (\n          <LabelList\n            position={orientation === 'vertical' ? 'right' : 'top'}\n            fontSize={12}\n            fill=\"var(--chart-bar-label-color, var(--mantine-color-dimmed))\"\n            formatter={(val: any) => tickFormatter?.(val as any)}\n            {...(typeof valueLabelProps === 'function' ? valueLabelProps(item) : valueLabelProps)}\n          />\n        )}\n      </Bar>\n    );\n  });\n\n  const referenceLinesItems = referenceLines?.map((line, index) => {\n    const color = getThemeColor(line.color, theme);\n    return (\n      <ReferenceLine\n        key={index}\n        stroke={line.color ? color : 'var(--chart-grid-color)'}\n        strokeWidth={1}\n        yAxisId={line.yAxisId || undefined}\n        {...line}\n        label={{\n          value: line.label,\n          fill: line.color ? color : 'currentColor',\n          fontSize: 12,\n          position: line.labelPosition ?? 'insideBottomLeft',\n        }}\n        {...getStyles('referenceLine')}\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 : tickFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box\n      {...getStyles('root')}\n      onMouseLeave={handleMouseLeave}\n      dir={dir || 'ltr'}\n      mod={[{ orientation }, mod]}\n      {...others}\n    >\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsBarChart\n          data={inputData}\n          stackOffset={type === 'percent' ? 'expand' : undefined}\n          layout={orientation}\n          maxBarSize={maxBarWidth}\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          {...barChartProps}\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 !== 'waterfall'}\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' ? tickFormatter : 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            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                fill: 'var(--chart-cursor-fill)',\n              }}\n              content={({ label, payload, labelFormatter }) => (\n                <ChartTooltip\n                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={payload}\n                  type={type === 'waterfall' ? 'scatter' : undefined}\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          {bars}\n          {referenceLinesItems}\n          {children}\n        </ReChartsBarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nBarChart.displayName = '@mantine/charts/BarChart';\nBarChart.classes = classes;\nBarChart.varsResolver = varsResolver;\n"],"mappings":"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"}
+{"version":3,"file":"BarChart.cjs","names":["Bar","React","Rectangle","LabelList","ReferenceLine","Box","ResponsiveContainer","ReChartsBarChart","Legend","ChartLegend","XAxis","Label","YAxis","CartesianGrid","Tooltip","ChartTooltip","classes"],"sources":["../../src/BarChart/BarChart.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Bar,\n  BarProps,\n  BarShapeProps,\n  CartesianGrid,\n  Label,\n  LabelList,\n  LabelListProps,\n  Legend,\n  BarChart as ReChartsBarChart,\n  Rectangle,\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 { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nfunction valueToPercent(value: number) {\n  return `${(value * 100).toFixed(0)}%`;\n}\n\nexport interface BarChartSeries extends ChartSeries {\n  stackId?: string;\n}\n\nexport type BarChartType = 'default' | 'stacked' | 'percent' | 'waterfall';\n\nexport type BarChartStylesNames =\n  | 'bar'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type BarChartCssVariables = {\n  root:\n    | '--chart-text-color'\n    | '--chart-grid-color'\n    | '--chart-cursor-fill'\n    | '--chart-bar-label-color';\n};\n\nexport interface BarChartProps\n  extends BoxProps, GridChartBaseProps, StylesApiProps<BarChartFactory>, 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: BarChartSeries[];\n\n  /** Controls how bars are positioned relative to each other @default 'default' */\n  type?: BarChartType;\n\n  /** Controls fill opacity of all bars @default 1 */\n  fillOpacity?: number;\n\n  /** Fill of hovered bar section, by default value is based on color scheme */\n  cursorFill?: MantineColor;\n\n  /** Props passed down to recharts `BarChart` component */\n  barChartProps?: React.ComponentProps<typeof ReChartsBarChart>;\n\n  /** Additional components that are rendered inside recharts `BarChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `Bar` component */\n  barProps?:\n    | ((series: BarChartSeries) => Partial<Omit<BarProps, 'ref'>>)\n    | Partial<Omit<BarProps, 'ref'>>;\n\n  /** Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type=\"stacked\"` and `type=\"percent\"` @default false */\n  withBarValueLabel?: boolean;\n\n  /** Props passed down to recharts `LabelList` component */\n  valueLabelProps?:\n    | ((series: BarChartSeries) => Partial<Omit<LabelListProps, 'ref'>>)\n    | Partial<LabelListProps>;\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  /** Controls color of the bar label, by default the value is determined by the chart orientation */\n  barLabelColor?: MantineColor;\n\n  /** A function to assign dynamic bar color based on its value */\n  getBarColor?: (value: number, series: BarChartSeries) => MantineColor;\n}\n\nexport type BarChartFactory = Factory<{\n  props: BarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: BarChartStylesNames;\n  vars: BarChartCssVariables;\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  type: 'default',\n} satisfies Partial<BarChartProps>;\n\nconst varsResolver = createVarsResolver<BarChartFactory>(\n  (theme, { textColor, gridColor, cursorFill, barLabelColor }) => ({\n    root: {\n      '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n      '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n      '--chart-cursor-fill': cursorFill ? getThemeColor(cursorFill, theme) : undefined,\n      '--chart-bar-label-color': barLabelColor ? getThemeColor(barLabelColor, theme) : undefined,\n    },\n  })\n);\n\nfunction calculateCumulativeTotal(waterfallData: Record<string, any>[], dataKey: string) {\n  let start: number = 0;\n  let end: number = 0;\n  return waterfallData.map((item) => {\n    if (item.standalone) {\n      for (const prop in item) {\n        if (typeof item[prop] === 'number' && prop !== dataKey) {\n          item[prop] = [0, item[prop]];\n        }\n      }\n    } else {\n      for (const prop in item) {\n        if (typeof item[prop] === 'number' && prop !== dataKey) {\n          end += item[prop];\n          item[prop] = [start, end];\n          start = end;\n        }\n      }\n    }\n    return item;\n  });\n}\n\nfunction getBarFill(barProps: BarChartProps['barProps'], series: BarChartSeries) {\n  if (typeof barProps === 'function') {\n    return barProps(series).fill;\n  }\n\n  return barProps?.fill;\n}\n\nexport const BarChart = factory<BarChartFactory>((_props) => {\n  const props = useProps('BarChart', 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    fillOpacity,\n    barChartProps,\n    type,\n    orientation,\n    dir,\n    valueFormatter,\n    children,\n    barProps,\n    xAxisLabel,\n    yAxisLabel,\n    withBarValueLabel,\n    valueLabelProps,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    minBarSize,\n    maxBarWidth,\n    mod,\n    getBarColor,\n    gridColor,\n    textColor,\n    attributes,\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 | null>(null);\n  const shouldHighlight = highlightedArea !== null;\n  const stacked = type === 'stacked' || type === 'percent';\n  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;\n\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    setHighlightedArea(null);\n    onMouseLeave?.(event);\n  };\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<BarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const inputData = type === 'waterfall' ? calculateCumulativeTotal(data, dataKey) : data;\n\n  const getStyles = useStyles<BarChartFactory>({\n    name: 'BarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const bars = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n    const resolvedBarProps = typeof barProps === 'function' ? barProps(item) : barProps;\n    const userShape = resolvedBarProps?.shape;\n\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 : fillOpacity}\n        strokeOpacity={dimmed ? 0.2 : 0}\n        stackId={stacked ? 'stack' : item.stackId || undefined}\n        yAxisId={item.yAxisId || undefined}\n        minPointSize={minBarSize}\n        {...resolvedBarProps}\n        shape={(shapeProps: BarShapeProps) => {\n          const entry = shapeProps.payload;\n          const cellColor = entry?.color\n            ? getThemeColor(entry.color, theme)\n            : typeof getBarColor === 'function'\n              ? getThemeColor(getBarColor(entry?.[item.name], item), theme)\n              : getBarFill(barProps, item) || color;\n          const coloredProps = { ...shapeProps, fill: cellColor };\n          if (typeof userShape === 'function') {\n            return (userShape as (props: BarShapeProps) => React.ReactElement)(coloredProps);\n          }\n          if (React.isValidElement(userShape)) {\n            return React.cloneElement(userShape, coloredProps as any);\n          }\n          if (typeof userShape === 'object' && userShape) {\n            return <Rectangle {...coloredProps} {...(userShape as any)} />;\n          }\n          return <Rectangle {...coloredProps} />;\n        }}\n      >\n        {withBarValueLabel && (\n          <LabelList\n            position={orientation === 'vertical' ? 'right' : 'top'}\n            fontSize={12}\n            fill=\"var(--chart-bar-label-color, var(--mantine-color-dimmed))\"\n            formatter={(val: any) => tickFormatter?.(val as any)}\n            {...(typeof valueLabelProps === 'function' ? valueLabelProps(item) : valueLabelProps)}\n          />\n        )}\n      </Bar>\n    );\n  });\n\n  const referenceLinesItems = referenceLines?.map((line, index) => {\n    const color = getThemeColor(line.color, theme);\n    return (\n      <ReferenceLine\n        key={index}\n        stroke={line.color ? color : 'var(--chart-grid-color)'}\n        strokeWidth={1}\n        yAxisId={line.yAxisId || undefined}\n        {...line}\n        label={{\n          fill: line.color ? color : 'currentColor',\n          fontSize: 12,\n          position: line.labelPosition ?? 'insideBottomLeft',\n          ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n        }}\n        {...getStyles('referenceLine')}\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 : tickFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box\n      {...getStyles('root')}\n      onMouseLeave={handleMouseLeave}\n      dir={dir || 'ltr'}\n      mod={[{ orientation }, mod]}\n      {...others}\n    >\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsBarChart\n          data={inputData}\n          stackOffset={type === 'percent' ? 'expand' : undefined}\n          layout={orientation}\n          maxBarSize={maxBarWidth}\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          {...barChartProps}\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 !== 'waterfall'}\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' ? tickFormatter : 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            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                fill: 'var(--chart-cursor-fill)',\n              }}\n              content={({ label, payload, labelFormatter }) => (\n                <ChartTooltip\n                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={payload}\n                  type={type === 'waterfall' ? 'scatter' : undefined}\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          {bars}\n          {referenceLinesItems}\n          {children}\n        </ReChartsBarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nBarChart.displayName = '@mantine/charts/BarChart';\nBarChart.classes = classes;\nBarChart.varsResolver = varsResolver;\n\nexport namespace BarChart {\n  export type Props = BarChartProps;\n  export type CssVariables = BarChartCssVariables;\n  export type Factory = BarChartFactory;\n  export type Series = BarChartSeries;\n  export type StylesNames = BarChartStylesNames;\n  export type Type = BarChartType;\n}\n"],"mappings":"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"}

package/cjs/BarsList/BarsList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarsList.cjs","names":["Box","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"],"mappings":";;;;;;;AAyFA,MAAM,eAAe;CACnB,QAAQ;CACR,YAAY;CACZ,WAAW;CACZ;AAED,MAAM,gBAAA,GAAA,cAAA,qBACH,QAAQ,EAAE,QAAQ,YAAY,iBAAiB,EAC9C,MAAM;CACJ,oBAAA,GAAA,cAAA,YAA8B,OAAO;CACrC,6BAAA,GAAA,cAAA,KAAgC,WAAW;CAC3C,2BAAA,GAAA,cAAA,KAA8B,UAAU;CACzC,EACF,EACF;AAED,MAAa,YAAA,GAAA,cAAA,UAAqC,WAAW;CAC3D,MAAM,SAAA,GAAA,cAAA,UAAiB,YAAY,cAAc,OAAO;CACxD,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,SAAA,GAAA,cAAA,kBAAyB;CAE/B,MAAM,aAAA,GAAA,cAAA,WAAuC;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAA,GAAA,MAAA,eAAyB,KAAK,IAAI,GAAG,KAAK,KAAK,SAAS,KAAK,MAAM,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC;CAEtF,MAAM,eAAe,UAAkB;AACrC,MAAI,eACF,QAAO,eAAe,MAAM;AAE9B,SAAO,MAAM,UAAU;;CAGzB,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,KAAK,GAAG,EAAE;EAGrD,MAAM,eAAe,KAAK,SAAS,YAAY,MAAM;EACrD,MAAM,SAAS,MAAM,qBAAqB;GACxC,OAAO;GACP;GACA,SAAS,KAAK,WAAW,WAAW;GACpC;GACD,CAAC;EAEF,MAAM,kBAAkB,OAAO;EAE/B,MAAM,YACJ,KAAK,aAAa,gBAAA,GAAA,cAAA,eACA,KAAK,aAAa,cAAc,MAAM,GACpD,OAAO;EAEb,MAAM,aACJ,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAiB,GAAI,UAAU,MAAM;aAArC,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,GAAI,UAAU,YAAY;KACxB,WAAW;KACX,OAAO;MACL,OAAO,GAAG,WAAW;MACrB;MACA,OAAO;MACP,SAAS,eAAe,IAAI,IAAI,KAAA;MAChC,GAAG;MACJ;KACF,CAAC;IACF,GAAI;cAEH,KAAK;IACF,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,UAAU,WAAW;cAAG,YAAY,KAAK,MAAM;IAAO,CAAA,CAC3D;KAjBI,MAiBJ;AAGR,MAAI,UACF,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAkB,UAAU,MAAM,WAAW,EAAO,EAA1C,MAA0C;AAG7D,SAAO;GACP;CAEF,MAAM,YACJ,aAAa,aACX,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,GAAI,UAAU,YAAY;YAA/B,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAM,WAAgB,CAAA,EACtB,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAM,YAAiB,CAAA,CACnB;MACJ;AAEN,QACE,iBAAA,GAAA,kBAAA,MAACA,cAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAW;EAAS,GAAI;YAAlD,CACG,WACA,KACG;;EAER;AAEF,SAAS,cAAc;AACvB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe"}
+{"version":3,"file":"BarsList.cjs","names":["Box","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;CACZ;AAED,MAAM,gBAAA,GAAA,cAAA,qBACH,QAAQ,EAAE,QAAQ,YAAY,iBAAiB,EAC9C,MAAM;CACJ,oBAAA,GAAA,cAAA,YAA8B,OAAO;CACrC,6BAAA,GAAA,cAAA,KAAgC,WAAW;CAC3C,2BAAA,GAAA,cAAA,KAA8B,UAAU;CACzC,EACF,EACF;AAED,MAAa,YAAA,GAAA,cAAA,UAAqC,WAAW;CAC3D,MAAM,SAAA,GAAA,cAAA,UAAiB,YAAY,cAAc,OAAO;CACxD,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,SAAA,GAAA,cAAA,kBAAyB;CAE/B,MAAM,aAAA,GAAA,cAAA,WAAuC;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAA,GAAA,MAAA,eAAyB,KAAK,IAAI,GAAG,KAAK,KAAK,SAAS,KAAK,MAAM,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC;CAEtF,MAAM,eAAe,UAAkB;AACrC,MAAI,eACF,QAAO,eAAe,MAAM;AAE9B,SAAO,MAAM,UAAU;;CAGzB,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,KAAK,GAAG,EAAE;EAGrD,MAAM,eAAe,KAAK,SAAS,YAAY,MAAM;EACrD,MAAM,SAAS,MAAM,qBAAqB;GACxC,OAAO;GACP;GACA,SAAS,KAAK,WAAW,WAAW;GACpC;GACD,CAAC;EAEF,MAAM,kBAAkB,OAAO;EAE/B,MAAM,YACJ,KAAK,aAAa,gBAAA,GAAA,cAAA,eACA,KAAK,aAAa,cAAc,MAAM,GACpD,OAAO;EAEb,MAAM,aACJ,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAiB,GAAI,UAAU,MAAM;aAArC,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,GAAI,UAAU,YAAY;KACxB,WAAW;KACX,OAAO;MACL,OAAO,GAAG,WAAW;MACrB;MACA,OAAO;MACP,SAAS,eAAe,IAAI,IAAI,KAAA;MAChC,GAAG;MACJ;KACF,CAAC;IACF,GAAI;cAEH,KAAK;IACF,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,UAAU,WAAW;cAAG,YAAY,KAAK,MAAM;IAAO,CAAA,CAC3D;KAjBI,MAiBJ;AAGR,MAAI,UACF,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAkB,UAAU,MAAM,WAAW,EAAO,EAA1C,MAA0C;AAG7D,SAAO;GACP;CAEF,MAAM,YACJ,aAAa,aACX,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,GAAI,UAAU,YAAY;YAA/B,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAM,WAAgB,CAAA,EACtB,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAM,YAAiB,CAAA,CACnB;MACJ;AAEN,QACE,iBAAA,GAAA,kBAAA,MAACA,cAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAW;EAAS,GAAI;YAAlD,CACG,WACA,KACG;;EAER;AAEF,SAAS,cAAc;AACvB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe"}

package/cjs/BubbleChart/BubbleChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleChart.cjs","names":["Group","Text","Box","ResponsiveContainer","ScatterChart","XAxis","YAxis","ZAxis","Tooltip","Scatter","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\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} 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    ...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>\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"],"mappings":"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"}
+{"version":3,"file":"BubbleChart.cjs","names":["Group","Text","Box","ResponsiveContainer","ScatterChart","XAxis","YAxis","ZAxis","Tooltip","Scatter","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\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} 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    ...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>\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":";;;;;;;AAiCA,SAAS,UAAU,MAA6B,KAAa;CAC3D,MAAM,SAAS,KAAK,KAAK,SAAS,KAAK,KAAK;AAC5C,QAAO,CAAC,KAAK,IAAI,GAAG,OAAO,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC;;AAWnD,SAAS,mBAAmB,EAC1B,QACA,SACA,WACA,SACA,kBAC0B;AAC1B,KAAI,UAAU,WAAW,QAAQ,QAAQ;EACvC,MAAM,OAAO,QAAQ,MAAM,QAAQ,GAAG;AAEtC,SACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI,UAAU,UAAU;aAC3B,iBAAA,GAAA,kBAAA,MAACA,cAAAA,OAAD;IAAO,SAAQ;cAAf,CACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,MAAD;KAAM,IAAG;eAAM,KAAK,QAAQ;KAAU,CAAA,EACtC,iBAAA,GAAA,kBAAA,KAACA,cAAAA,MAAD;KAAM,IAAG;eAAM,iBAAiB,eAAe,KAAK,QAAQ,GAAG,GAAG,KAAK,QAAQ;KAAU,CAAA,CACnF;;GACJ,CAAA;;AAIV,QAAO;;AAkET,MAAM,eAAe;CACnB,OAAO;CACP,aAAa;CACd;AAED,MAAM,gBAAA,GAAA,cAAA,qBAAuD,OAAO,EAAE,WAAW,iBAAiB,EAChG,MAAM;CACJ,sBAAsB,aAAA,GAAA,cAAA,eAA0B,WAAW,MAAM,GAAG,KAAA;CACpE,sBAAsB,aAAA,GAAA,cAAA,eAA0B,WAAW,MAAM,GAAG,KAAA;CACrE,EACF,EAAE;AAEH,MAAa,eAAA,GAAA,cAAA,UAA2C,WAAW;CACjE,MAAM,SAAA,GAAA,cAAA,UAAiB,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,YACA,YACA,YACA,cACA,cACA,OACA,OACA,aACA,SACA,OACA,gBACA,YACA,GAAG,WACD;CAEJ,MAAM,SAAA,GAAA,cAAA,kBAAyB;CAE/B,MAAM,aAAA,GAAA,cAAA,WAA0C;EAC9C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,aAAa,QAAQ,KAAA,IAAY,EAAE,OAAO,GAAG;AAEnD,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,GAAI;YAC9B,iBAAA,GAAA,kBAAA,KAACC,SAAAA,qBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAACC,SAAAA,cAAD,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,OAAD;IACE,MAAK;IACL,SAAS,QAAQ;IACjB,UAAU;IACV,MAAM;KAAE,UAAU;KAAI,MAAM;KAAgB;IAC5C,UAAU;KAAE,WAAW;KAAoB,QAAQ;KAAgB;IACnE,QAAO;IACP,GAAI,UAAU,OAAO;IACrB,GAAI;IACJ,CAAA;GAEF,iBAAA,GAAA,kBAAA,KAACC,SAAAA,OAAD;IACE,MAAK;IACL,SAAS,QAAQ;IACjB,QAAQ;IACR,GAAI;IACJ,MAAM;IACN,UAAU;IACV,UAAU;IACV,OAAO;KAAE,OAAO;KAAO,UAAU;KAAe,UAAU;KAAI,MAAM;KAAgB;IACpF,GAAI,UAAU,OAAO;IACrB,GAAI;IACJ,CAAA;GAEF,iBAAA,GAAA,kBAAA,KAACC,SAAAA,OAAD;IACE,MAAK;IACL,SAAS,QAAQ;IACjB,QAAQ,UAAU,MAAM,QAAQ,EAAE;IAC3B;IACP,GAAI;IACJ,CAAA;GAED,eACC,iBAAA,GAAA,kBAAA,KAACC,SAAAA,SAAD;IACE,mBAAmB;IACnB,mBAAmB;IACnB,QAAQ;KAAE,QAAQ;KAA2B,aAAa;KAAG,iBAAiB;KAAO;IACrF,UAAU,YACR,iBAAA,GAAA,kBAAA,KAAC,oBAAD;KACW;KACT,QAAQ,QAAQ;KAChB,SAAS,QAAQ;KACN;KACK;KAChB,CAAA;IAEJ,GAAI;IACJ,CAAA;GAGJ,iBAAA,GAAA,kBAAA,KAACC,SAAAA,SAAD;IACQ;IACN,OAAA,GAAA,cAAA,eAAoB,OAAO,MAAM;IACjC,mBAAmB;IACnB,GAAI;IACJ,CAAA;GACW,EAAA,CAAA,EACK,CAAA;EAClB,CAAA;EAER;AAEF,YAAY,cAAc;AAC1B,YAAY,UAAUC,0BAAAA;AACtB,YAAY,eAAe"}

package/cjs/CompositeChart/CompositeChart.cjs

@@ -152,10 +152,10 @@ const CompositeChart = (0, _mantine_core.factory)((_props) => {
 			yAxisId: line.yAxisId || void 0,
 			...line,
 			label: {
-				value: line.label,
 				fill: line.color ? color : "currentColor",
 				fontSize: 12,
-				position: line.labelPosition ?? "insideBottomLeft"
+				position: line.labelPosition ?? "insideBottomLeft",
+				...typeof line.label === "object" ? line.label : { value: line.label }
 			},
 			...getStyles("referenceLine")
 		}, index);

package/cjs/CompositeChart/CompositeChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CompositeChart.cjs","names":["Line","PointLabel","Area","Bar","LabelList","ReferenceLine","Box","ResponsiveContainer","ReChartsCompositeChart","Legend","ChartLegend","XAxis","Label","YAxis","CartesianGrid","Tooltip","ChartTooltip","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  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 { 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} 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    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    ...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 | 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((line, index) => {\n    const color = getThemeColor(line.color, theme);\n    return (\n      <ReferenceLine\n        key={index}\n        stroke={line.color ? color : 'var(--chart-grid-color)'}\n        strokeWidth={1}\n        yAxisId={line.yAxisId || undefined}\n        {...line}\n        label={{\n          value: line.label,\n          fill: line.color ? color : 'currentColor',\n          fontSize: 12,\n          position: line.labelPosition ?? 'insideBottomLeft',\n        }}\n        {...getStyles('referenceLine')}\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          {...composedChartProps}\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                  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          {children}\n        </ReChartsCompositeChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nCompositeChart.displayName = '@mantine/charts/CompositeChart';\nCompositeChart.classes = classes;\nCompositeChart.varsResolver = varsResolver;\n"],"mappings":"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"}
+{"version":3,"file":"CompositeChart.cjs","names":["Line","PointLabel","Area","Bar","LabelList","ReferenceLine","Box","ResponsiveContainer","ReChartsCompositeChart","Legend","ChartLegend","XAxis","Label","YAxis","CartesianGrid","Tooltip","ChartTooltip","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  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 { 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} 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    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    ...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 | 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((line, index) => {\n    const color = getThemeColor(line.color, theme);\n    return (\n      <ReferenceLine\n        key={index}\n        stroke={line.color ? color : 'var(--chart-grid-color)'}\n        strokeWidth={1}\n        yAxisId={line.yAxisId || undefined}\n        {...line}\n        label={{\n          fill: line.color ? color : 'currentColor',\n          fontSize: 12,\n          position: line.labelPosition ?? 'insideBottomLeft',\n          ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n        }}\n        {...getStyles('referenceLine')}\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          {...composedChartProps}\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                  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          {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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"}

package/cjs/DonutChart/DonutChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.cjs","names":["Box","ResponsiveContainer","ReChartsPieChart","Pie","Tooltip","ChartTooltip","classes"],"sources":["../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import {\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 { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './DonutChart.module.css';\n\nexport interface DonutChartCell {\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type DonutChartStylesNames = 'root' | 'label' | ChartTooltipStylesNames;\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  /** 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';\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\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} satisfies Partial<DonutChartProps>;\n\nconst varsResolver = createVarsResolver<DonutChartFactory>(\n  (theme, { strokeColor, labelColor, withLabels, size }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': withLabels ? rem(size! + 80) : rem(size),\n    },\n  })\n);\n\nconst getLabelValue = (\n  labelsType: DonutChartProps['labelsType'],\n  value: number | undefined,\n  percent: number | undefined,\n  valueFormatter?: DonutChartProps['valueFormatter']\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  (labelsType: 'value' | 'percent', valueFormatter?: DonutChartProps['valueFormatter']): PieLabel =>\n  ({ x, y, cx, cy, percent, value }) => (\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), 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    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    ...others\n  } = props;\n\n  const theme = useMantineTheme();\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 = data.map((item) => ({\n    ...item,\n    fill: getThemeColor(item.color, theme),\n    stroke: 'var(--chart-stroke-color, var(--mantine-color-body))',\n    strokeWidth,\n    ...(typeof cellProps === 'function' ? cellProps(item) : cellProps),\n  }));\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsPieChart {...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' ? (payload?.[0]?.name as string) : undefined\n                  }\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\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"],"mappings":"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"}
+{"version":3,"file":"DonutChart.cjs","names":["Box","ResponsiveContainer","ReChartsPieChart","Pie","Tooltip","ChartTooltip","classes"],"sources":["../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import {\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 { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './DonutChart.module.css';\n\nexport interface DonutChartCell {\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type DonutChartStylesNames = 'root' | 'label' | ChartTooltipStylesNames;\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  /** 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';\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\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} satisfies Partial<DonutChartProps>;\n\nconst varsResolver = createVarsResolver<DonutChartFactory>(\n  (theme, { strokeColor, labelColor, withLabels, size }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': withLabels ? rem(size! + 80) : rem(size),\n    },\n  })\n);\n\nconst getLabelValue = (\n  labelsType: DonutChartProps['labelsType'],\n  value: number | undefined,\n  percent: number | undefined,\n  valueFormatter?: DonutChartProps['valueFormatter']\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  (labelsType: 'value' | 'percent', valueFormatter?: DonutChartProps['valueFormatter']): PieLabel =>\n  ({ x, y, cx, cy, percent, value }) => (\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), 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    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    ...others\n  } = props;\n\n  const theme = useMantineTheme();\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 = data.map((item) => ({\n    ...item,\n    fill: getThemeColor(item.color, theme),\n    stroke: 'var(--chart-stroke-color, var(--mantine-color-body))',\n    strokeWidth,\n    ...(typeof cellProps === 'function' ? cellProps(item) : cellProps),\n  }));\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsPieChart {...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' ? (payload?.[0]?.name as string) : undefined\n                  }\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\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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"}