@mantine/charts 9.0.0-alpha.6 → 9.0.0

package/cjs/PieChart/PieChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PieChart.cjs","names":["classes","Cell","Box","ResponsiveContainer","ReChartsPieChart","Pie","Tooltip","ChartTooltip"],"sources":["../../src/PieChart/PieChart.tsx"],"sourcesContent":["import {\n  Cell,\n  CellProps,\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 './PieChart.module.css';\n\nexport interface PieChartCell {\n  key?: string | number;\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type PieChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type PieChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface PieChartProps\n  extends BoxProps, StylesApiProps<PieChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: PieChartCell[];\n\n  /** Determines whether the tooltip should be displayed when one of the section is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Tooltip animation duration in ms @default 0 */\n  tooltipAnimationDuration?: number;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Props passed down to recharts `Pie` component */\n  pieProps?: Partial<Omit<PieProps, 'ref'>>;\n\n  /** Controls color of the segments stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls text color of all labels, white by default */\n  labelColor?: MantineColor;\n\n  /** Controls padding between segments @default 0 */\n  paddingAngle?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Determines whether segments labels should have lines that connect the segment with the label @default true */\n  withLabelsLine?: boolean;\n\n  /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default 80 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default 0 */\n  startAngle?: number;\n\n  /** Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default 360 */\n  endAngle?: number;\n\n  /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */\n  tooltipDataSource?: 'segment' | 'all';\n\n  /** Additional elements rendered inside `PieChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `PieChart` component */\n  pieChartProps?: React.ComponentProps<typeof ReChartsPieChart>;\n\n  /** Controls labels position relative to the segment @default 'outside' */\n  labelsPosition?: 'inside' | 'outside';\n\n  /** Type of labels to display @default 'value' */\n  labelsType?: 'value' | 'percent';\n\n  /** A function to format values inside the tooltip */\n  valueFormatter?: (value: number) => string;\n\n  /** Props passed down to recharts `Cell` component */\n  cellProps?:\n    | ((series: PieChartCell) => Partial<Omit<CellProps, 'ref'>>)\n    | Partial<Omit<CellProps, 'ref'>>;\n}\n\nexport type PieChartFactory = Factory<{\n  props: PieChartProps;\n  ref: HTMLDivElement;\n  stylesNames: PieChartStylesNames;\n  vars: PieChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: false,\n  withLabelsLine: true,\n  paddingAngle: 0,\n  size: 160,\n  strokeWidth: 1,\n  startAngle: 0,\n  endAngle: 360,\n  tooltipDataSource: 'all',\n  labelsPosition: 'outside',\n  labelsType: 'value',\n} satisfies Partial<PieChartProps>;\n\nconst varsResolver = createVarsResolver<PieChartFactory>(\n  (theme, { strokeColor, labelColor, withLabels, size, labelsPosition }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': withLabels && labelsPosition === 'outside' ? rem(size! + 80) : rem(size),\n    },\n  })\n);\n\nconst getLabelValue = (\n  labelsType: PieChartProps['labelsType'],\n  value: number | undefined,\n  percent: number | undefined,\n  valueFormatter?: PieChartProps['valueFormatter']\n) => {\n  if (labelsType === 'percent' && typeof percent === 'number') {\n    return `${(percent * 100).toFixed(0)}%`;\n  }\n\n  if (typeof valueFormatter === 'function' && typeof value === 'number') {\n    return valueFormatter(value);\n  }\n\n  return value;\n};\n\nconst getInsideLabel =\n  (labelsType: 'value' | 'percent', valueFormatter?: PieChartProps['valueFormatter']): PieLabel =>\n  ({ cx, cy, midAngle, innerRadius, outerRadius, value, percent }) => {\n    const RADIAN = Math.PI / 180;\n    const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * 0.5;\n    const x = Number(cx) + radius * Math.cos(-(midAngle || 0) * RADIAN);\n    const y = Number(cy) + radius * Math.sin(-(midAngle || 0) * RADIAN);\n\n    return (\n      <text\n        x={x}\n        y={y}\n        textAnchor={x > Number(cx) ? 'start' : 'end'}\n        dominantBaseline=\"central\"\n        className={classes.label}\n      >\n        {getLabelValue(labelsType, Number(value), Number(percent), valueFormatter)}\n      </text>\n    );\n  };\n\nconst getOutsideLabel =\n  (labelsType: 'value' | 'percent', valueFormatter?: PieChartProps['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 PieChart = factory<PieChartFactory>((_props) => {\n  const props = useProps('PieChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withTooltip,\n    tooltipAnimationDuration,\n    tooltipProps,\n    pieProps,\n    paddingAngle,\n    withLabels,\n    withLabelsLine,\n    size,\n    strokeWidth,\n    startAngle,\n    endAngle,\n    tooltipDataSource,\n    children,\n    pieChartProps,\n    labelsPosition,\n    valueFormatter,\n    labelsType,\n    strokeColor,\n    attributes,\n    cellProps,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<PieChartFactory>({\n    name: 'PieChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PieChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const cells = data.map((item, index) => (\n    <Cell\n      key={index}\n      fill={getThemeColor(item.color, theme)}\n      stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n      strokeWidth={strokeWidth}\n      {...(typeof cellProps === 'function' ? cellProps(item) : cellProps)}\n    />\n  ));\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsPieChart {...pieChartProps}>\n          <Pie\n            data={data as any}\n            innerRadius={0}\n            outerRadius={size / 2}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            paddingAngle={paddingAngle}\n            startAngle={startAngle}\n            endAngle={endAngle}\n            label={\n              withLabels\n                ? labelsPosition === 'inside'\n                  ? getInsideLabel(labelsType || 'value', valueFormatter)\n                  : getOutsideLabel(labelsType || 'value', valueFormatter)\n                : false\n            }\n            labelLine={\n              withLabelsLine && labelsPosition === 'outside'\n                ? {\n                    stroke: 'var(--chart-label-color, var(--mantine-color-dimmed))',\n                    strokeWidth: 1,\n                  }\n                : false\n            }\n            {...pieProps}\n          >\n            {cells}\n          </Pie>\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\nPieChart.displayName = '@mantine/charts/PieChart';\nPieChart.classes = classes;\nPieChart.varsResolver = varsResolver;\n"],"mappings":"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"}
+{"version":3,"file":"PieChart.cjs","names":["classes","Box","ResponsiveContainer","ReChartsPieChart","Pie","Tooltip","ChartTooltip"],"sources":["../../src/PieChart/PieChart.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 './PieChart.module.css';\n\nexport interface PieChartCell {\n  key?: string | number;\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type PieChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type PieChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface PieChartProps\n  extends BoxProps, StylesApiProps<PieChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: PieChartCell[];\n\n  /** Determines whether the tooltip should be displayed when one of the section is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Tooltip animation duration in ms @default 0 */\n  tooltipAnimationDuration?: number;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Props passed down to recharts `Pie` component */\n  pieProps?: Partial<Omit<PieProps, 'ref'>>;\n\n  /** Controls color of the segments stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls text color of all labels, white by default */\n  labelColor?: MantineColor;\n\n  /** Controls padding between segments @default 0 */\n  paddingAngle?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Determines whether segments labels should have lines that connect the segment with the label @default true */\n  withLabelsLine?: boolean;\n\n  /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default 80 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default 0 */\n  startAngle?: number;\n\n  /** Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default 360 */\n  endAngle?: number;\n\n  /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */\n  tooltipDataSource?: 'segment' | 'all';\n\n  /** Additional elements rendered inside `PieChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `PieChart` component */\n  pieChartProps?: React.ComponentProps<typeof ReChartsPieChart>;\n\n  /** Controls labels position relative to the segment @default 'outside' */\n  labelsPosition?: 'inside' | 'outside';\n\n  /** Type of labels to display @default 'value' */\n  labelsType?: 'value' | 'percent';\n\n  /** A function to format values inside the tooltip */\n  valueFormatter?: (value: number) => string;\n\n  /** Props passed down to each segment of the chart */\n  cellProps?:\n    | ((series: PieChartCell) => Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>)\n    | Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>;\n}\n\nexport type PieChartFactory = Factory<{\n  props: PieChartProps;\n  ref: HTMLDivElement;\n  stylesNames: PieChartStylesNames;\n  vars: PieChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: false,\n  withLabelsLine: true,\n  paddingAngle: 0,\n  size: 160,\n  strokeWidth: 1,\n  startAngle: 0,\n  endAngle: 360,\n  tooltipDataSource: 'all',\n  labelsPosition: 'outside',\n  labelsType: 'value',\n} satisfies Partial<PieChartProps>;\n\nconst varsResolver = createVarsResolver<PieChartFactory>(\n  (theme, { strokeColor, labelColor, withLabels, size, labelsPosition }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': withLabels && labelsPosition === 'outside' ? rem(size! + 80) : rem(size),\n    },\n  })\n);\n\nconst getLabelValue = (\n  labelsType: PieChartProps['labelsType'],\n  value: number | undefined,\n  percent: number | undefined,\n  valueFormatter?: PieChartProps['valueFormatter']\n) => {\n  if (labelsType === 'percent' && typeof percent === 'number') {\n    return `${(percent * 100).toFixed(0)}%`;\n  }\n\n  if (typeof valueFormatter === 'function' && typeof value === 'number') {\n    return valueFormatter(value);\n  }\n\n  return value;\n};\n\nconst getInsideLabel =\n  (labelsType: 'value' | 'percent', valueFormatter?: PieChartProps['valueFormatter']): PieLabel =>\n  ({ cx, cy, midAngle, innerRadius, outerRadius, value, percent }) => {\n    const RADIAN = Math.PI / 180;\n    const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * 0.5;\n    const x = Number(cx) + radius * Math.cos(-(midAngle || 0) * RADIAN);\n    const y = Number(cy) + radius * Math.sin(-(midAngle || 0) * RADIAN);\n\n    return (\n      <text\n        x={x}\n        y={y}\n        textAnchor={x > Number(cx) ? 'start' : 'end'}\n        dominantBaseline=\"central\"\n        className={classes.label}\n      >\n        {getLabelValue(labelsType, Number(value), Number(percent), valueFormatter)}\n      </text>\n    );\n  };\n\nconst getOutsideLabel =\n  (labelsType: 'value' | 'percent', valueFormatter?: PieChartProps['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 PieChart = factory<PieChartFactory>((_props) => {\n  const props = useProps('PieChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withTooltip,\n    tooltipAnimationDuration,\n    tooltipProps,\n    pieProps,\n    paddingAngle,\n    withLabels,\n    withLabelsLine,\n    size,\n    strokeWidth,\n    startAngle,\n    endAngle,\n    tooltipDataSource,\n    children,\n    pieChartProps,\n    labelsPosition,\n    valueFormatter,\n    labelsType,\n    strokeColor,\n    attributes,\n    cellProps,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<PieChartFactory>({\n    name: 'PieChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PieChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const pieData = 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={0}\n            outerRadius={size / 2}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            paddingAngle={paddingAngle}\n            startAngle={startAngle}\n            endAngle={endAngle}\n            label={\n              withLabels\n                ? labelsPosition === 'inside'\n                  ? getInsideLabel(labelsType || 'value', valueFormatter)\n                  : getOutsideLabel(labelsType || 'value', valueFormatter)\n                : false\n            }\n            labelLine={\n              withLabelsLine && labelsPosition === 'outside'\n                ? {\n                    stroke: 'var(--chart-label-color, var(--mantine-color-dimmed))',\n                    strokeWidth: 1,\n                  }\n                : false\n            }\n            {...pieProps}\n          />\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={data}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  segmentId={\n                    tooltipDataSource === 'segment' ? (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\nPieChart.displayName = '@mantine/charts/PieChart';\nPieChart.classes = classes;\nPieChart.varsResolver = varsResolver;\n"],"mappings":"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"}

package/cjs/PointLabel/PointLabel.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../_virtual/_rolldown/runtime.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/charts/src/PointLabel/PointLabel.tsx
 function PointLabel({ x, y, value, valueFormatter }) {

package/cjs/PointLabel/PointLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PointLabel.cjs","names":[],"sources":["../../src/PointLabel/PointLabel.tsx"],"sourcesContent":["interface PointLabelProps {\n  x?: number;\n  y?: number;\n  value?: number;\n  valueFormatter?: (value: number) => string;\n}\n\nexport function PointLabel({ x, y, value, valueFormatter }: PointLabelProps) {\n  return (\n    <g transform={`translate(${x},${y})`}>\n      <text\n        x={0}\n        y={0}\n        dy={-8}\n        dx={-10}\n        textAnchor=\"start\"\n        fill=\"var(--chart-text-color, var(--mantine-color-dimmed))\"\n        fontSize={8}\n      >\n        {valueFormatter ? valueFormatter(value!) : value}\n      </text>\n    </g>\n  );\n}\n"],"mappings":";;;AAOA,SAAgB,WAAW,EAAE,GAAG,GAAG,OAAO,kBAAmC;AAC3E,QACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,WAAW,aAAa,EAAE,GAAG,EAAE;YAChC,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,GAAG;GACH,GAAG;GACH,IAAI;GACJ,IAAI;GACJ,YAAW;GACX,MAAK;GACL,UAAU;aAET,iBAAiB,eAAe,MAAO,GAAG;GACtC,CAAA;EACL,CAAA"}
+{"version":3,"file":"PointLabel.cjs","names":[],"sources":["../../src/PointLabel/PointLabel.tsx"],"sourcesContent":["interface PointLabelProps {\n  x?: number;\n  y?: number;\n  value?: number;\n  valueFormatter?: (value: number) => string;\n}\n\nexport function PointLabel({ x, y, value, valueFormatter }: PointLabelProps) {\n  return (\n    <g transform={`translate(${x},${y})`}>\n      <text\n        x={0}\n        y={0}\n        dy={-8}\n        dx={-10}\n        textAnchor=\"start\"\n        fill=\"var(--chart-text-color, var(--mantine-color-dimmed))\"\n        fontSize={8}\n      >\n        {valueFormatter ? valueFormatter(value!) : value}\n      </text>\n    </g>\n  );\n}\n"],"mappings":";;;;AAOA,SAAgB,WAAW,EAAE,GAAG,GAAG,OAAO,kBAAmC;AAC3E,QACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,WAAW,aAAa,EAAE,GAAG,EAAE;YAChC,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,GAAG;GACH,GAAG;GACH,IAAI;GACJ,IAAI;GACJ,YAAW;GACX,MAAK;GACL,UAAU;aAET,iBAAiB,eAAe,MAAO,GAAG;GACtC,CAAA;EACL,CAAA"}

package/cjs/RadarChart/RadarChart.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../_virtual/_rolldown/runtime.cjs");
 const require_ChartTooltip = require("../ChartTooltip/ChartTooltip.cjs");
 const require_ChartLegend = require("../ChartLegend/ChartLegend.cjs");
 const require_RadarChart_module = require("./RadarChart.module.cjs");

package/cjs/RadarChart/RadarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadarChart.cjs","names":["Radar","Box","ResponsiveContainer","ReChartsRadarChart","PolarGrid","PolarAngleAxis","PolarRadiusAxis","Tooltip","ChartTooltip","Legend","ChartLegend","classes"],"sources":["../../src/RadarChart/RadarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  PolarAngleAxis,\n  PolarAngleAxisProps,\n  PolarGrid,\n  PolarGridProps,\n  PolarRadiusAxis,\n  PolarRadiusAxisProps,\n  Radar,\n  RadarProps,\n  RadarChart as ReChartsRadarChart,\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  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { MantineChartDotProps } from '../types';\nimport classes from './RadarChart.module.css';\n\nexport interface RadarChartSeries {\n  name: string;\n  color: MantineColor;\n  strokeColor?: MantineColor;\n  opacity?: number;\n  label?: string;\n}\n\nexport type RadarChartStylesNames =\n  | 'root'\n  | 'container'\n  | ChartTooltipStylesNames\n  | ChartLegendStylesNames;\nexport type RadarChartCssVariables = {\n  root: '--chart-grid-color' | '--chart-text-color';\n};\n\nexport interface RadarChartProps\n  extends BoxProps, StylesApiProps<RadarChartFactory>, ElementProps<'div'> {\n  /** Data used in the chart */\n  data: Record<string, any>[];\n\n  /** Determines which data should be consumed from the `data` array. */\n  series: RadarChartSeries[];\n\n  /** Key of the `data` object for axis values */\n  dataKey: string;\n\n  /** Controls color of the grid lines. By default, color depends on the color scheme. */\n  gridColor?: MantineColor;\n\n  /** Controls color of all text elements. By default, color depends on the color scheme. */\n  textColor?: MantineColor;\n\n  /** Determines whether PolarGrid component should be displayed @default true. */\n  withPolarGrid?: boolean;\n\n  /** Determines whether PolarAngleAxis component should be displayed @default true */\n  withPolarAngleAxis?: boolean;\n\n  /** Determines whether PolarRadiusAxisProps component should be displayed @default false */\n  withPolarRadiusAxis?: boolean;\n\n  /** Determines whether Tooltip component should be displayed @default false */\n  withTooltip?: boolean;\n\n  /** Props passed down to recharts Radar component */\n  radarProps?:\n    | ((series: RadarChartSeries) => Partial<Omit<RadarProps, 'ref'>>)\n    | Partial<Omit<RadarProps, 'ref'>>;\n\n  /** Props passed down to recharts RadarChart component */\n  radarChartProps?: React.ComponentProps<typeof ReChartsRadarChart>;\n\n  /** Props passed down to recharts PolarGrid component */\n  polarGridProps?: Omit<PolarGridProps, 'ref'>;\n\n  /** Props passed down to recharts PolarAngleAxis component */\n  polarAngleAxisProps?: Omit<PolarAngleAxisProps, 'ref'>;\n\n  /** Props passed down to recharts PolarRadiusAxis component */\n  polarRadiusAxisProps?: Omit<PolarRadiusAxisProps, 'ref'>;\n\n  /** Props passed down to recharts Legend component */\n  legendProps?: Omit<LegendProps, 'ref'>;\n\n  /** Props passed down to recharts Tooltip component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Tooltip position animation duration in ms @default 0 */\n  tooltipAnimationDuration?: number;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Determines whether dots should be displayed @default false */\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  /** Additional components that are rendered inside recharts `RadarChart` component */\n  children?: React.ReactNode;\n}\n\nexport type RadarChartFactory = Factory<{\n  props: RadarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: RadarChartStylesNames;\n  vars: RadarChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withPolarGrid: true,\n  withPolarAngleAxis: true,\n  withPolarRadiusAxis: false,\n  withTooltip: false,\n  withDots: false,\n  tooltipAnimationDuration: 0,\n} satisfies Partial<RadarChartProps>;\n\nconst varsResolver = createVarsResolver<RadarChartFactory>((theme, { gridColor, textColor }) => ({\n  root: {\n    '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n    '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n  },\n}));\n\nexport const RadarChart = factory<RadarChartFactory>((_props) => {\n  const props = useProps('RadarChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    series,\n    dataKey,\n    gridColor,\n    textColor,\n    radarProps,\n    radarChartProps,\n    polarGridProps,\n    polarAngleAxisProps,\n    polarRadiusAxisProps,\n    tooltipProps,\n    withPolarGrid,\n    withPolarAngleAxis,\n    withPolarRadiusAxis,\n    withTooltip,\n    tooltipAnimationDuration,\n    children,\n    withLegend,\n    withDots,\n    dotProps,\n    activeDotProps,\n    legendProps,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<RadarChartFactory>({\n    name: 'RadarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<RadarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const radars = series.map((item, index) => (\n    <Radar\n      key={index}\n      name={item.name}\n      dataKey={item.name}\n      stroke={getThemeColor(item.strokeColor || item.color, theme)}\n      fill={getThemeColor(item.color, theme)}\n      fillOpacity={\n        highlightedArea\n          ? highlightedArea === item.name\n            ? item.opacity || 0.4\n            : 0.05\n          : item.opacity || 0.4\n      }\n      dot={\n        withDots\n          ? {\n              fillOpacity: 1,\n              strokeOpacity: 0,\n              strokeWidth: 1,\n              fill: getThemeColor(item.color, theme),\n              stroke: getThemeColor(item.color, theme),\n              ...dotProps,\n            }\n          : false\n      }\n      activeDot={\n        withDots\n          ? {\n              fill: getThemeColor(item.color, theme),\n              stroke: getThemeColor(item.color, theme),\n              ...activeDotProps,\n            }\n          : false\n      }\n      strokeOpacity={highlightedArea ? (highlightedArea === item.name ? 1 : 0.1) : 1}\n      isAnimationActive={false}\n      {...(typeof radarProps === 'function' ? radarProps(item) : radarProps)}\n    />\n  ));\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsRadarChart data={data} {...radarChartProps}>\n          {withPolarGrid && <PolarGrid stroke=\"var(--chart-grid-color)\" {...polarGridProps} />}\n          {withPolarAngleAxis && <PolarAngleAxis dataKey={dataKey} {...polarAngleAxisProps} />}\n          {withPolarRadiusAxis && (\n            <PolarRadiusAxis stroke=\"var(--chart-grid-color)\" {...polarRadiusAxisProps} />\n          )}\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={tooltipAnimationDuration !== 0}\n              cursor={{\n                stroke: 'var(--chart-grid-color)',\n                strokeWidth: 1,\n              }}\n              content={({ label, payload, labelFormatter }) => (\n                <ChartTooltip\n                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={payload}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n          {radars}\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {children}\n        </ReChartsRadarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nRadarChart.displayName = '@mantine/charts/RadarChart';\nRadarChart.classes = classes;\nRadarChart.varsResolver = varsResolver;\n"],"mappings":"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"}
+{"version":3,"file":"RadarChart.cjs","names":["Radar","Box","ResponsiveContainer","ReChartsRadarChart","PolarGrid","PolarAngleAxis","PolarRadiusAxis","Tooltip","ChartTooltip","Legend","ChartLegend","classes"],"sources":["../../src/RadarChart/RadarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  PolarAngleAxis,\n  PolarAngleAxisProps,\n  PolarGrid,\n  PolarGridProps,\n  PolarRadiusAxis,\n  PolarRadiusAxisProps,\n  Radar,\n  RadarProps,\n  RadarChart as ReChartsRadarChart,\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  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { MantineChartDotProps } from '../types';\nimport classes from './RadarChart.module.css';\n\nexport interface RadarChartSeries {\n  name: string;\n  color: MantineColor;\n  strokeColor?: MantineColor;\n  opacity?: number;\n  label?: string;\n}\n\nexport type RadarChartStylesNames =\n  | 'root'\n  | 'container'\n  | ChartTooltipStylesNames\n  | ChartLegendStylesNames;\nexport type RadarChartCssVariables = {\n  root: '--chart-grid-color' | '--chart-text-color';\n};\n\nexport interface RadarChartProps\n  extends BoxProps, StylesApiProps<RadarChartFactory>, ElementProps<'div'> {\n  /** Data used in the chart */\n  data: Record<string, any>[];\n\n  /** Determines which data should be consumed from the `data` array. */\n  series: RadarChartSeries[];\n\n  /** Key of the `data` object for axis values */\n  dataKey: string;\n\n  /** Controls color of the grid lines. By default, color depends on the color scheme. */\n  gridColor?: MantineColor;\n\n  /** Controls color of all text elements. By default, color depends on the color scheme. */\n  textColor?: MantineColor;\n\n  /** Determines whether PolarGrid component should be displayed @default true. */\n  withPolarGrid?: boolean;\n\n  /** Determines whether PolarAngleAxis component should be displayed @default true */\n  withPolarAngleAxis?: boolean;\n\n  /** Determines whether PolarRadiusAxisProps component should be displayed @default false */\n  withPolarRadiusAxis?: boolean;\n\n  /** Determines whether Tooltip component should be displayed @default false */\n  withTooltip?: boolean;\n\n  /** Props passed down to recharts Radar component */\n  radarProps?:\n    | ((series: RadarChartSeries) => Partial<Omit<RadarProps, 'ref'>>)\n    | Partial<Omit<RadarProps, 'ref'>>;\n\n  /** Props passed down to recharts RadarChart component */\n  radarChartProps?: React.ComponentProps<typeof ReChartsRadarChart>;\n\n  /** Props passed down to recharts PolarGrid component */\n  polarGridProps?: Omit<PolarGridProps, 'ref'>;\n\n  /** Props passed down to recharts PolarAngleAxis component */\n  polarAngleAxisProps?: Omit<PolarAngleAxisProps, 'ref'>;\n\n  /** Props passed down to recharts PolarRadiusAxis component */\n  polarRadiusAxisProps?: Omit<PolarRadiusAxisProps, 'ref'>;\n\n  /** Props passed down to recharts Legend component */\n  legendProps?: Omit<LegendProps, 'ref'>;\n\n  /** Props passed down to recharts Tooltip component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Tooltip position animation duration in ms @default 0 */\n  tooltipAnimationDuration?: number;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Determines whether dots should be displayed @default false */\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  /** Additional components that are rendered inside recharts `RadarChart` component */\n  children?: React.ReactNode;\n}\n\nexport type RadarChartFactory = Factory<{\n  props: RadarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: RadarChartStylesNames;\n  vars: RadarChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withPolarGrid: true,\n  withPolarAngleAxis: true,\n  withPolarRadiusAxis: false,\n  withTooltip: false,\n  withDots: false,\n  tooltipAnimationDuration: 0,\n} satisfies Partial<RadarChartProps>;\n\nconst varsResolver = createVarsResolver<RadarChartFactory>((theme, { gridColor, textColor }) => ({\n  root: {\n    '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n    '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n  },\n}));\n\nexport const RadarChart = factory<RadarChartFactory>((_props) => {\n  const props = useProps('RadarChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    series,\n    dataKey,\n    gridColor,\n    textColor,\n    radarProps,\n    radarChartProps,\n    polarGridProps,\n    polarAngleAxisProps,\n    polarRadiusAxisProps,\n    tooltipProps,\n    withPolarGrid,\n    withPolarAngleAxis,\n    withPolarRadiusAxis,\n    withTooltip,\n    tooltipAnimationDuration,\n    children,\n    withLegend,\n    withDots,\n    dotProps,\n    activeDotProps,\n    legendProps,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<RadarChartFactory>({\n    name: 'RadarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<RadarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const radars = series.map((item, index) => (\n    <Radar\n      key={index}\n      name={item.name}\n      dataKey={item.name}\n      stroke={getThemeColor(item.strokeColor || item.color, theme)}\n      fill={getThemeColor(item.color, theme)}\n      fillOpacity={\n        highlightedArea\n          ? highlightedArea === item.name\n            ? item.opacity || 0.4\n            : 0.05\n          : item.opacity || 0.4\n      }\n      dot={\n        withDots\n          ? {\n              fillOpacity: 1,\n              strokeOpacity: 0,\n              strokeWidth: 1,\n              fill: getThemeColor(item.color, theme),\n              stroke: getThemeColor(item.color, theme),\n              ...dotProps,\n            }\n          : false\n      }\n      activeDot={\n        withDots\n          ? {\n              fill: getThemeColor(item.color, theme),\n              stroke: getThemeColor(item.color, theme),\n              ...activeDotProps,\n            }\n          : false\n      }\n      strokeOpacity={highlightedArea ? (highlightedArea === item.name ? 1 : 0.1) : 1}\n      isAnimationActive={false}\n      {...(typeof radarProps === 'function' ? radarProps(item) : radarProps)}\n    />\n  ));\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsRadarChart data={data} {...radarChartProps}>\n          {withPolarGrid && <PolarGrid stroke=\"var(--chart-grid-color)\" {...polarGridProps} />}\n          {withPolarAngleAxis && <PolarAngleAxis dataKey={dataKey} {...polarAngleAxisProps} />}\n          {withPolarRadiusAxis && (\n            <PolarRadiusAxis stroke=\"var(--chart-grid-color)\" {...polarRadiusAxisProps} />\n          )}\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={tooltipAnimationDuration !== 0}\n              cursor={{\n                stroke: 'var(--chart-grid-color)',\n                strokeWidth: 1,\n              }}\n              content={({ label, payload, labelFormatter }) => (\n                <ChartTooltip\n                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={payload}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n          {radars}\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {children}\n        </ReChartsRadarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nRadarChart.displayName = '@mantine/charts/RadarChart';\nRadarChart.classes = classes;\nRadarChart.varsResolver = varsResolver;\n"],"mappings":"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"}

package/cjs/RadialBarChart/RadialBarChart.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../_virtual/_rolldown/runtime.cjs");
 const require_ChartLegend = require("../ChartLegend/ChartLegend.cjs");
 const require_RadialBarChart_module = require("./RadialBarChart.module.cjs");
 let _mantine_core = require("@mantine/core");

package/cjs/RadialBarChart/RadialBarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadialBarChart.cjs","names":["Box","ResponsiveContainer","ReChartsRadialBarChart","RadialBar","Legend","ChartLegend","Tooltip","Paper","Group","ColorSwatch","classes"],"sources":["../../src/RadialBarChart/RadialBarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  RadialBar,\n  RadialBarProps,\n  RadialBarChart as ReChartsRadialBarChart,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  ColorSwatch,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  Group,\n  Paper,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport classes from './RadialBarChart.module.css';\n\nexport type RadialBarChartStylesNames = 'root' | 'tooltip' | ChartLegendStylesNames;\nexport type RadialBarChartCssVariables = {\n  root: '--chart-empty-background';\n};\n\nexport interface RadialBarChartProps\n  extends BoxProps, StylesApiProps<RadialBarChartFactory>, ElementProps<'div'> {\n  /** Chart data */\n  data: Record<string, any>[];\n\n  /** Key from data object to use as data key */\n  dataKey: string;\n\n  /** Size of bars in px, `20` by default */\n  barSize?: number;\n\n  /** Determines whether empty bars area should be visible @default true */\n  withBackground?: boolean;\n\n  /** Determines whether labels should be displayed @default false */\n  withLabels?: boolean;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Determines whether the tooltip should be displayed when one of the bars is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Color of the empty background, by default depends on the color scheme */\n  emptyBackgroundColor?: string;\n\n  /** Angle at which chart starts @default 90 */\n  startAngle?: number;\n\n  /** Angle at which chart ends @default -270 */\n  endAngle?: number;\n\n  /** Props passed down to recharts RadialBar component */\n  radialBarProps?: Omit<RadialBarProps, 'ref'>;\n\n  /** Props passed down to recharts RadarChartChart component */\n  radialBarChartProps?: React.ComponentProps<typeof ReChartsRadialBarChart>;\n\n  /** Props passed down to recharts Legend component */\n  legendProps?: Omit<LegendProps, 'ref'>;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n}\n\nexport type RadialBarChartFactory = Factory<{\n  props: RadialBarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: RadialBarChartStylesNames;\n  vars: RadialBarChartCssVariables;\n}>;\n\nconst defaultProps = {\n  barSize: 20,\n  startAngle: 90,\n  endAngle: -270,\n  withBackground: true,\n  withTooltip: true,\n} satisfies Partial<RadialBarChartProps>;\n\nconst varsResolver = createVarsResolver<RadialBarChartFactory>(\n  (theme, { emptyBackgroundColor }) => ({\n    root: {\n      '--chart-empty-background': emptyBackgroundColor\n        ? getThemeColor(emptyBackgroundColor, theme)\n        : undefined,\n    },\n  })\n);\n\nexport const RadialBarChart = factory<RadialBarChartFactory>((_props) => {\n  const props = useProps('RadialBarChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    barSize,\n    withBackground,\n    dataKey,\n    radialBarProps,\n    radialBarChartProps,\n    withLabels,\n    withLegend,\n    legendProps,\n    withTooltip,\n    tooltipProps,\n    startAngle,\n    endAngle,\n    attributes,\n    ...others\n  } = props;\n  const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n\n  const getStyles = useStyles<RadialBarChartFactory>({\n    name: 'RadialBarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const theme = useMantineTheme();\n  const dataWithResolvedColor = data.map(({ color, ...item }) => {\n    const resolvedColor = getThemeColor(color, theme);\n\n    return {\n      ...item,\n      fill: resolvedColor,\n      fillOpacity: highlightedArea\n        ? highlightedArea === item.name\n          ? item.opacity || 1\n          : 0.05\n        : item.opacity || 1,\n    };\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<RadialBarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsRadialBarChart\n          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\n          innerRadius=\"10%\"\n          outerRadius=\"100%\"\n          cx=\"50%\"\n          cy=\"50%\"\n          barSize={barSize}\n          startAngle={startAngle}\n          endAngle={endAngle}\n          data={dataWithResolvedColor}\n          {...radialBarChartProps}\n        >\n          <RadialBar\n            label={\n              withLabels\n                ? {\n                    position: 'insideStart',\n                    fill: 'var(--mantine-color-white)',\n                    fontSize: 12,\n                  }\n                : undefined\n            }\n            background={withBackground ? { fill: 'var(--chart-empty-background)' } : undefined}\n            dataKey={dataKey}\n            isAnimationActive={false}\n            {...radialBarProps}\n          />\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item) => ({\n                    ...item,\n                    dataKey: (item.payload as any)?.name,\n                  }))}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={0}\n              isAnimationActive={false}\n              cursor={{ stroke: 'var(--chart-cursor-color)' }}\n              content={({ payload }) => (\n                <Paper {...getStyles('tooltip')}>\n                  <Group gap=\"sm\">\n                    <ColorSwatch color={payload?.[0]?.payload.fill} size={12} withShadow={false} />\n                    <span>{payload?.[0]?.payload.name}</span>\n                  </Group>\n\n                  <span>{payload?.[0]?.payload[dataKey]}</span>\n                </Paper>\n              )}\n              {...tooltipProps}\n            />\n          )}\n        </ReChartsRadialBarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nRadialBarChart.displayName = '@mantine/core/RadialBarChart';\nRadialBarChart.classes = classes;\nRadialBarChart.varsResolver = varsResolver;\n"],"mappings":"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"}
+{"version":3,"file":"RadialBarChart.cjs","names":["Box","ResponsiveContainer","ReChartsRadialBarChart","RadialBar","Legend","ChartLegend","Tooltip","Paper","Group","ColorSwatch","classes"],"sources":["../../src/RadialBarChart/RadialBarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  RadialBar,\n  RadialBarProps,\n  RadialBarChart as ReChartsRadialBarChart,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  ColorSwatch,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  Group,\n  Paper,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport classes from './RadialBarChart.module.css';\n\nexport type RadialBarChartStylesNames = 'root' | 'tooltip' | ChartLegendStylesNames;\nexport type RadialBarChartCssVariables = {\n  root: '--chart-empty-background';\n};\n\nexport interface RadialBarChartProps\n  extends BoxProps, StylesApiProps<RadialBarChartFactory>, ElementProps<'div'> {\n  /** Chart data */\n  data: Record<string, any>[];\n\n  /** Key from data object to use as data key */\n  dataKey: string;\n\n  /** Size of bars in px, `20` by default */\n  barSize?: number;\n\n  /** Determines whether empty bars area should be visible @default true */\n  withBackground?: boolean;\n\n  /** Determines whether labels should be displayed @default false */\n  withLabels?: boolean;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Determines whether the tooltip should be displayed when one of the bars is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Color of the empty background, by default depends on the color scheme */\n  emptyBackgroundColor?: string;\n\n  /** Angle at which chart starts @default 90 */\n  startAngle?: number;\n\n  /** Angle at which chart ends @default -270 */\n  endAngle?: number;\n\n  /** Props passed down to recharts RadialBar component */\n  radialBarProps?: Omit<RadialBarProps, 'ref'>;\n\n  /** Props passed down to recharts RadarChartChart component */\n  radialBarChartProps?: React.ComponentProps<typeof ReChartsRadialBarChart>;\n\n  /** Props passed down to recharts Legend component */\n  legendProps?: Omit<LegendProps, 'ref'>;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n}\n\nexport type RadialBarChartFactory = Factory<{\n  props: RadialBarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: RadialBarChartStylesNames;\n  vars: RadialBarChartCssVariables;\n}>;\n\nconst defaultProps = {\n  barSize: 20,\n  startAngle: 90,\n  endAngle: -270,\n  withBackground: true,\n  withTooltip: true,\n} satisfies Partial<RadialBarChartProps>;\n\nconst varsResolver = createVarsResolver<RadialBarChartFactory>(\n  (theme, { emptyBackgroundColor }) => ({\n    root: {\n      '--chart-empty-background': emptyBackgroundColor\n        ? getThemeColor(emptyBackgroundColor, theme)\n        : undefined,\n    },\n  })\n);\n\nexport const RadialBarChart = factory<RadialBarChartFactory>((_props) => {\n  const props = useProps('RadialBarChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    barSize,\n    withBackground,\n    dataKey,\n    radialBarProps,\n    radialBarChartProps,\n    withLabels,\n    withLegend,\n    legendProps,\n    withTooltip,\n    tooltipProps,\n    startAngle,\n    endAngle,\n    attributes,\n    ...others\n  } = props;\n  const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n\n  const getStyles = useStyles<RadialBarChartFactory>({\n    name: 'RadialBarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const theme = useMantineTheme();\n  const dataWithResolvedColor = data.map(({ color, ...item }) => {\n    const resolvedColor = getThemeColor(color, theme);\n\n    return {\n      ...item,\n      fill: resolvedColor,\n      fillOpacity: highlightedArea\n        ? highlightedArea === item.name\n          ? item.opacity || 1\n          : 0.05\n        : item.opacity || 1,\n    };\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<RadialBarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsRadialBarChart\n          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\n          innerRadius=\"10%\"\n          outerRadius=\"100%\"\n          cx=\"50%\"\n          cy=\"50%\"\n          barSize={barSize}\n          startAngle={startAngle}\n          endAngle={endAngle}\n          data={dataWithResolvedColor}\n          {...radialBarChartProps}\n        >\n          <RadialBar\n            label={\n              withLabels\n                ? {\n                    position: 'insideStart',\n                    fill: 'var(--mantine-color-white)',\n                    fontSize: 12,\n                  }\n                : undefined\n            }\n            background={withBackground ? { fill: 'var(--chart-empty-background)' } : undefined}\n            dataKey={dataKey}\n            isAnimationActive={false}\n            {...radialBarProps}\n          />\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item) => ({\n                    ...item,\n                    dataKey: (item.payload as any)?.name,\n                  }))}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={0}\n              isAnimationActive={false}\n              cursor={{ stroke: 'var(--chart-cursor-color)' }}\n              content={({ payload }) => (\n                <Paper {...getStyles('tooltip')}>\n                  <Group gap=\"sm\">\n                    <ColorSwatch color={payload?.[0]?.payload.fill} size={12} withShadow={false} />\n                    <span>{payload?.[0]?.payload.name}</span>\n                  </Group>\n\n                  <span>{payload?.[0]?.payload[dataKey]}</span>\n                </Paper>\n              )}\n              {...tooltipProps}\n            />\n          )}\n        </ReChartsRadialBarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nRadialBarChart.displayName = '@mantine/core/RadialBarChart';\nRadialBarChart.classes = classes;\nRadialBarChart.varsResolver = varsResolver;\n"],"mappings":"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"}

package/cjs/ScatterChart/ScatterChart.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../_virtual/_rolldown/runtime.cjs");
 const require_ChartTooltip = require("../ChartTooltip/ChartTooltip.cjs");
 const require_ChartLegend = require("../ChartLegend/ChartLegend.cjs");
 const require_grid_chart_module = require("../grid-chart.module.cjs");

package/cjs/ScatterChart/ScatterChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScatterChart.cjs","names":["ReferenceLine","Scatter","LabelList","Box","ResponsiveContainer","ReChartsScatterChart","CartesianGrid","XAxis","Label","YAxis","Tooltip","ChartTooltip","Legend","ChartLegend","classes"],"sources":["../../src/ScatterChart/ScatterChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  CartesianGrid,\n  Label,\n  LabelList,\n  Legend,\n  ScatterChart as ReChartsScatterChart,\n  ReferenceLine,\n  ResponsiveContainer,\n  Scatter,\n  ScatterProps,\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 { BaseChartStylesNames, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport interface ScatterChartSeries {\n  color: MantineColor;\n  name: string;\n  data: Record<string, number>[];\n}\n\nexport type ScatterChartStylesNames =\n  | 'scatter'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type ScatterChartCssVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface ScatterChartProps\n  extends\n    Omit<GridChartBaseProps, 'dataKey' | 'data' | 'unit' | 'valueFormatter'>,\n    BoxProps,\n    StylesApiProps<ScatterChartFactory>,\n    ElementProps<'div'> {\n  /** Keys that should be used to retrieve data from the data array on x and y axis */\n  dataKey: { x: string; y: string };\n\n  /** Data that is used to build the chart */\n  data: ScatterChartSeries[];\n\n  /** Units displayed after value on axis and inside the tooltip */\n  unit?: { x?: string; y?: string };\n\n  /** Labels that should be used instead of keys names in the tooltip */\n  labels?: { x?: string; y?: string };\n\n  /** A function to format values on x/y axis and in the tooltip */\n  valueFormatter?:\n    | GridChartBaseProps['valueFormatter']\n    | { x?: GridChartBaseProps['valueFormatter']; y?: GridChartBaseProps['valueFormatter'] };\n\n  /** Props passed down to recharts `ScatterChart` component */\n  scatterChartProps?: React.ComponentProps<typeof ReChartsScatterChart>;\n\n  /** Props passed down to recharts `Scatter` component */\n  scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n  /** If set, displays labels next to points for the given axis */\n  pointLabels?: 'x' | 'y';\n}\n\nfunction getAxis(key: string, dataKey: { x: string; y: string }) {\n  return key === dataKey.x ? 'x' : 'y';\n}\n\nexport type ScatterChartFactory = Factory<{\n  props: ScatterChartProps;\n  ref: HTMLDivElement;\n  stylesNames: ScatterChartStylesNames;\n  vars: ScatterChartCssVariables;\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} satisfies Partial<ScatterChartProps>;\n\nconst varsResolver = createVarsResolver<ScatterChartFactory>((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 ScatterChart = factory<ScatterChartFactory>((_props) => {\n  const props = useProps('ScatterChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    referenceLines,\n    dir,\n    withLegend,\n    withTooltip,\n    withXAxis,\n    withYAxis,\n    xAxisProps,\n    yAxisProps,\n    orientation,\n    scatterChartProps,\n    legendProps,\n    data,\n    gridAxis,\n    tickLine,\n    strokeDasharray,\n    gridProps,\n    tooltipAnimationDuration,\n    tooltipProps,\n    children,\n    onMouseLeave,\n    dataKey,\n    textColor,\n    gridColor,\n    xAxisLabel,\n    yAxisLabel,\n    unit,\n    labels,\n    valueFormatter,\n    scatterProps,\n    pointLabels,\n    attributes,\n    ...others\n  } = props;\n\n  const getFormatter = (axis: 'x' | 'y') =>\n    typeof valueFormatter === 'function' ? valueFormatter : valueFormatter?.[axis];\n  const xFormatter = getFormatter('x');\n  const yFormatter = getFormatter('y');\n\n  const theme = useMantineTheme();\n\n  const mappedData = data.map((item) => ({\n    ...item,\n    data: item.data.map((point) => ({ ...point, name: item.name })),\n  }));\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ScatterChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<ScatterChartFactory>({\n    name: 'ScatterChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\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\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        {...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 scatters = mappedData.map((item, index) => {\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n    return (\n      <Scatter\n        data={item.data}\n        fill={getThemeColor(item.color, theme)}\n        key={index}\n        isAnimationActive={false}\n        fillOpacity={dimmed ? 0.1 : 1}\n        {...scatterProps}\n      >\n        {pointLabels && <LabelList dataKey={dataKey[pointLabels]} fontSize={8} dy={10} />}\n        {scatterProps?.children}\n      </Scatter>\n    );\n  });\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsScatterChart\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          {...scatterChartProps}\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          <XAxis\n            type=\"number\"\n            hide={!withXAxis}\n            dataKey={dataKey.x}\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            unit={unit?.x}\n            tickFormatter={xFormatter}\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          <YAxis\n            type=\"number\"\n            hide={!withYAxis}\n            axisLine={false}\n            dataKey={dataKey.y}\n            tickLine={withYTickLine ? { stroke: 'currentColor' } : false}\n            tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n            allowDecimals\n            unit={unit?.y}\n            tickFormatter={yFormatter}\n            {...getStyles('axis')}\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          {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                  type=\"scatter\"\n                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={\n                    labels\n                      ? payload?.map((item) => ({\n                          ...item,\n                          name: labels[getAxis(item.name as string, dataKey)] || item.name,\n                          value:\n                            getFormatter(getAxis(item.name as string, dataKey))?.(\n                              item.value as number\n                            ) ?? item.value,\n                        }))\n                      : payload?.map((item) => ({\n                          ...item,\n                          value:\n                            getFormatter(getAxis(item.name as string, dataKey))?.(\n                              item.value as number\n                            ) ?? item.value,\n                        }))\n                  }\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={data}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"top\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item, index) => ({\n                    ...item,\n                    dataKey: data[index].name,\n                  }))}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'top'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={data}\n                  attributes={attributes}\n                />\n              )}\n              height={44}\n              {...legendProps}\n            />\n          )}\n\n          {referenceLinesItems}\n          {scatters}\n        </ReChartsScatterChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nScatterChart.displayName = '@mantine/charts/ScatterChart';\nScatterChart.classes = classes;\nScatterChart.varsResolver = varsResolver;\n"],"mappings":"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"}
+{"version":3,"file":"ScatterChart.cjs","names":["ReferenceLine","Scatter","LabelList","Box","ResponsiveContainer","ReChartsScatterChart","CartesianGrid","XAxis","Label","YAxis","Tooltip","ChartTooltip","Legend","ChartLegend","classes"],"sources":["../../src/ScatterChart/ScatterChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  CartesianGrid,\n  Label,\n  LabelList,\n  Legend,\n  ScatterChart as ReChartsScatterChart,\n  ReferenceLine,\n  ResponsiveContainer,\n  Scatter,\n  ScatterProps,\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 { BaseChartStylesNames, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport interface ScatterChartSeries {\n  color: MantineColor;\n  name: string;\n  data: Record<string, number>[];\n}\n\nexport type ScatterChartStylesNames =\n  | 'scatter'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type ScatterChartCssVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface ScatterChartProps\n  extends\n    Omit<GridChartBaseProps, 'dataKey' | 'data' | 'unit' | 'valueFormatter'>,\n    BoxProps,\n    StylesApiProps<ScatterChartFactory>,\n    ElementProps<'div'> {\n  /** Keys that should be used to retrieve data from the data array on x and y axis */\n  dataKey: { x: string; y: string };\n\n  /** Data that is used to build the chart */\n  data: ScatterChartSeries[];\n\n  /** Units displayed after value on axis and inside the tooltip */\n  unit?: { x?: string; y?: string };\n\n  /** Labels that should be used instead of keys names in the tooltip */\n  labels?: { x?: string; y?: string };\n\n  /** A function to format values on x/y axis and in the tooltip */\n  valueFormatter?:\n    | GridChartBaseProps['valueFormatter']\n    | { x?: GridChartBaseProps['valueFormatter']; y?: GridChartBaseProps['valueFormatter'] };\n\n  /** Props passed down to recharts `ScatterChart` component */\n  scatterChartProps?: React.ComponentProps<typeof ReChartsScatterChart>;\n\n  /** Props passed down to recharts `Scatter` component */\n  scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n  /** If set, displays labels next to points for the given axis */\n  pointLabels?: 'x' | 'y';\n}\n\nfunction getAxis(key: string, dataKey: { x: string; y: string }) {\n  return key === dataKey.x ? 'x' : 'y';\n}\n\nexport type ScatterChartFactory = Factory<{\n  props: ScatterChartProps;\n  ref: HTMLDivElement;\n  stylesNames: ScatterChartStylesNames;\n  vars: ScatterChartCssVariables;\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} satisfies Partial<ScatterChartProps>;\n\nconst varsResolver = createVarsResolver<ScatterChartFactory>((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 ScatterChart = factory<ScatterChartFactory>((_props) => {\n  const props = useProps('ScatterChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    referenceLines,\n    dir,\n    withLegend,\n    withTooltip,\n    withXAxis,\n    withYAxis,\n    xAxisProps,\n    yAxisProps,\n    orientation,\n    scatterChartProps,\n    legendProps,\n    data,\n    gridAxis,\n    tickLine,\n    strokeDasharray,\n    gridProps,\n    tooltipAnimationDuration,\n    tooltipProps,\n    children,\n    onMouseLeave,\n    dataKey,\n    textColor,\n    gridColor,\n    xAxisLabel,\n    yAxisLabel,\n    unit,\n    labels,\n    valueFormatter,\n    scatterProps,\n    pointLabels,\n    attributes,\n    ...others\n  } = props;\n\n  const getFormatter = (axis: 'x' | 'y') =>\n    typeof valueFormatter === 'function' ? valueFormatter : valueFormatter?.[axis];\n  const xFormatter = getFormatter('x');\n  const yFormatter = getFormatter('y');\n\n  const theme = useMantineTheme();\n\n  const mappedData = data.map((item) => ({\n    ...item,\n    data: item.data.map((point) => ({ ...point, name: item.name })),\n  }));\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ScatterChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<ScatterChartFactory>({\n    name: 'ScatterChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\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\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        {...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 scatters = mappedData.map((item, index) => {\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n    return (\n      <Scatter\n        data={item.data}\n        fill={getThemeColor(item.color, theme)}\n        key={index}\n        isAnimationActive={false}\n        fillOpacity={dimmed ? 0.1 : 1}\n        {...scatterProps}\n      >\n        {pointLabels && <LabelList dataKey={dataKey[pointLabels]} fontSize={8} dy={10} />}\n        {scatterProps?.children}\n      </Scatter>\n    );\n  });\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsScatterChart\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          {...scatterChartProps}\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          <XAxis\n            type=\"number\"\n            hide={!withXAxis}\n            dataKey={dataKey.x}\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            unit={unit?.x}\n            tickFormatter={xFormatter}\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          <YAxis\n            type=\"number\"\n            hide={!withYAxis}\n            axisLine={false}\n            dataKey={dataKey.y}\n            tickLine={withYTickLine ? { stroke: 'currentColor' } : false}\n            tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n            allowDecimals\n            unit={unit?.y}\n            tickFormatter={yFormatter}\n            {...getStyles('axis')}\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          {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                  type=\"scatter\"\n                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={\n                    labels\n                      ? payload?.map((item) => ({\n                          ...item,\n                          name: labels[getAxis(item.name as string, dataKey)] || item.name,\n                          value:\n                            getFormatter(getAxis(item.name as string, dataKey))?.(\n                              item.value as number\n                            ) ?? item.value,\n                        }))\n                      : payload?.map((item) => ({\n                          ...item,\n                          value:\n                            getFormatter(getAxis(item.name as string, dataKey))?.(\n                              item.value as number\n                            ) ?? item.value,\n                        }))\n                  }\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={data}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"top\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item, index) => ({\n                    ...item,\n                    dataKey: data[index].name,\n                  }))}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'top'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={data}\n                  attributes={attributes}\n                />\n              )}\n              height={44}\n              {...legendProps}\n            />\n          )}\n\n          {referenceLinesItems}\n          {scatters}\n        </ReChartsScatterChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nScatterChart.displayName = '@mantine/charts/ScatterChart';\nScatterChart.classes = classes;\nScatterChart.varsResolver = varsResolver;\n"],"mappings":"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"}

package/cjs/Sparkline/Sparkline.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../_virtual/_rolldown/runtime.cjs");
 const require_AreaGradient = require("../AreaChart/AreaGradient.cjs");
 const require_Sparkline_module = require("./Sparkline.module.cjs");
 let _mantine_core = require("@mantine/core");

package/cjs/Sparkline/Sparkline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sparkline.cjs","names":["Box","ResponsiveContainer","ReChartsAreaChart","Area","AreaGradient","classes"],"sources":["../../src/Sparkline/Sparkline.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\nimport { Area, AreaProps, AreaChart as ReChartsAreaChart, ResponsiveContainer } from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { AreaChartCurveType, AreaGradient } from '../AreaChart';\nimport classes from './Sparkline.module.css';\n\nexport interface SparklineTrendColors {\n  positive: MantineColor;\n  negative: MantineColor;\n  neutral?: MantineColor;\n}\n\nexport type SparklineStylesNames = 'root';\nexport type SparklineCssVariables = {\n  root: '--chart-color';\n};\n\nexport interface SparklineProps\n  extends BoxProps, StylesApiProps<SparklineFactory>, ElementProps<'div'> {\n  /** Data used to render the chart */\n  data: (number | null)[];\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Determines whether the chart fill should be a gradient @default true */\n  withGradient?: boolean;\n\n  /** Controls fill opacity of the area @default 0.6 */\n  fillOpacity?: number;\n\n  /** Type of the curve @default 'linear' */\n  curveType?: AreaChartCurveType;\n\n  /** Area stroke width @default 2 */\n  strokeWidth?: number;\n\n  /** If set, `color` prop is ignored and chart color is determined by the difference between first and last value. */\n  trendColors?: SparklineTrendColors;\n\n  /** Determines whether null values should be connected with other values @default true */\n  connectNulls?: boolean;\n\n  /** Props passed down to the underlying recharts `Area` component */\n  areaProps?: Omit<AreaProps<any, any>, 'data' | 'dataKey' | 'ref'>;\n}\n\nexport type SparklineFactory = Factory<{\n  props: SparklineProps;\n  ref: HTMLDivElement;\n  stylesNames: SparklineStylesNames;\n  vars: SparklineCssVariables;\n}>;\n\nconst defaultProps = {\n  withGradient: true,\n  connectNulls: true,\n  fillOpacity: 0.6,\n  strokeWidth: 2,\n  curveType: 'linear',\n} satisfies Partial<SparklineProps>;\n\nfunction getTrendColor(data: (number | null)[], trendColors: SparklineTrendColors) {\n  const first = data[0];\n  const last = data[data.length - 1];\n\n  if (first === null || last === null) {\n    return trendColors.neutral || trendColors.positive;\n  }\n\n  if (first < last) {\n    return trendColors.positive;\n  }\n\n  if (first > last) {\n    return trendColors.negative;\n  }\n\n  return trendColors.neutral || trendColors.positive;\n}\n\nconst varsResolver = createVarsResolver<SparklineFactory>(\n  (theme, { color, data, trendColors }) => ({\n    root: {\n      '--chart-color': trendColors\n        ? getThemeColor(getTrendColor(data, trendColors), theme)\n        : color\n          ? getThemeColor(color, theme)\n          : undefined,\n    },\n  })\n);\n\nexport const Sparkline = factory<SparklineFactory>((_props) => {\n  const props = useProps('Sparkline', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withGradient,\n    fillOpacity,\n    curveType,\n    strokeWidth,\n    trendColors,\n    connectNulls,\n    areaProps,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SparklineFactory>({\n    name: 'Sparkline',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const id = useId();\n  const mappedData = useMemo(() => data.map((value, index) => ({ value, index })), [data]);\n\n  return (\n    <Box {...getStyles('root')} {...others} dir=\"ltr\">\n      <ResponsiveContainer>\n        <ReChartsAreaChart data={mappedData}>\n          <Area\n            dataKey=\"value\"\n            type={curveType}\n            fill={`url(#${id})`}\n            stroke=\"var(--chart-color, var(--mantine-color-blue-filled))\"\n            isAnimationActive={false}\n            connectNulls={connectNulls}\n            strokeWidth={strokeWidth}\n            fillOpacity={1}\n            activeDot={false}\n            {...areaProps}\n          />\n\n          <defs>\n            <AreaGradient\n              id={id}\n              color=\"var(--chart-color, var(--mantine-color-blue-filled))\"\n              fillOpacity={fillOpacity}\n              withGradient={withGradient}\n            />\n          </defs>\n        </ReChartsAreaChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nSparkline.displayName = '@mantine/charts/Sparkline';\nSparkline.classes = classes;\nSparkline.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;AAkEA,MAAM,eAAe;CACnB,cAAc;CACd,cAAc;CACd,aAAa;CACb,aAAa;CACb,WAAW;CACZ;AAED,SAAS,cAAc,MAAyB,aAAmC;CACjF,MAAM,QAAQ,KAAK;CACnB,MAAM,OAAO,KAAK,KAAK,SAAS;AAEhC,KAAI,UAAU,QAAQ,SAAS,KAC7B,QAAO,YAAY,WAAW,YAAY;AAG5C,KAAI,QAAQ,KACV,QAAO,YAAY;AAGrB,KAAI,QAAQ,KACV,QAAO,YAAY;AAGrB,QAAO,YAAY,WAAW,YAAY;;AAG5C,MAAM,gBAAA,GAAA,cAAA,qBACH,OAAO,EAAE,OAAO,MAAM,mBAAmB,EACxC,MAAM,EACJ,iBAAiB,eAAA,GAAA,cAAA,eACC,cAAc,MAAM,YAAY,EAAE,MAAM,GACtD,SAAA,GAAA,cAAA,eACgB,OAAO,MAAM,GAC3B,KAAA,GACP,EACF,EACF;AAED,MAAa,aAAA,GAAA,cAAA,UAAuC,WAAW;CAC7D,MAAM,SAAA,GAAA,cAAA,UAAiB,aAAa,cAAc,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,cACA,aACA,WACA,aACA,aACA,cACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,WAAwC;EAC5C,MAAM;EACN,SAAA,yBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,MAAA,GAAA,MAAA,QAAY;CAClB,MAAM,cAAA,GAAA,MAAA,eAA2B,KAAK,KAAK,OAAO,WAAW;EAAE;EAAO;EAAO,EAAE,EAAE,CAAC,KAAK,CAAC;AAExF,QACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,GAAI;EAAQ,KAAI;YAC1C,iBAAA,GAAA,kBAAA,KAACC,SAAAA,qBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAACC,SAAAA,WAAD;GAAmB,MAAM;aAAzB,CACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,MAAD;IACE,SAAQ;IACR,MAAM;IACN,MAAM,QAAQ,GAAG;IACjB,QAAO;IACP,mBAAmB;IACL;IACD;IACb,aAAa;IACb,WAAW;IACX,GAAI;IACJ,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;IACM;IACJ,OAAM;IACO;IACC;IACd,CAAA,EACG,CAAA,CACW;MACA,CAAA;EAClB,CAAA;EAER;AAEF,UAAU,cAAc;AACxB,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe"}
+{"version":3,"file":"Sparkline.cjs","names":["Box","ResponsiveContainer","ReChartsAreaChart","Area","AreaGradient","classes"],"sources":["../../src/Sparkline/Sparkline.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\nimport { Area, AreaProps, AreaChart as ReChartsAreaChart, ResponsiveContainer } from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { AreaChartCurveType, AreaGradient } from '../AreaChart';\nimport classes from './Sparkline.module.css';\n\nexport interface SparklineTrendColors {\n  positive: MantineColor;\n  negative: MantineColor;\n  neutral?: MantineColor;\n}\n\nexport type SparklineStylesNames = 'root';\nexport type SparklineCssVariables = {\n  root: '--chart-color';\n};\n\nexport interface SparklineProps\n  extends BoxProps, StylesApiProps<SparklineFactory>, ElementProps<'div'> {\n  /** Data used to render the chart */\n  data: (number | null)[];\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Determines whether the chart fill should be a gradient @default true */\n  withGradient?: boolean;\n\n  /** Controls fill opacity of the area @default 0.6 */\n  fillOpacity?: number;\n\n  /** Type of the curve @default 'linear' */\n  curveType?: AreaChartCurveType;\n\n  /** Area stroke width @default 2 */\n  strokeWidth?: number;\n\n  /** If set, `color` prop is ignored and chart color is determined by the difference between first and last value. */\n  trendColors?: SparklineTrendColors;\n\n  /** Determines whether null values should be connected with other values @default true */\n  connectNulls?: boolean;\n\n  /** Props passed down to the underlying recharts `Area` component */\n  areaProps?: Omit<AreaProps<any, any>, 'data' | 'dataKey' | 'ref'>;\n}\n\nexport type SparklineFactory = Factory<{\n  props: SparklineProps;\n  ref: HTMLDivElement;\n  stylesNames: SparklineStylesNames;\n  vars: SparklineCssVariables;\n}>;\n\nconst defaultProps = {\n  withGradient: true,\n  connectNulls: true,\n  fillOpacity: 0.6,\n  strokeWidth: 2,\n  curveType: 'linear',\n} satisfies Partial<SparklineProps>;\n\nfunction getTrendColor(data: (number | null)[], trendColors: SparklineTrendColors) {\n  const first = data[0];\n  const last = data[data.length - 1];\n\n  if (first === null || last === null) {\n    return trendColors.neutral || trendColors.positive;\n  }\n\n  if (first < last) {\n    return trendColors.positive;\n  }\n\n  if (first > last) {\n    return trendColors.negative;\n  }\n\n  return trendColors.neutral || trendColors.positive;\n}\n\nconst varsResolver = createVarsResolver<SparklineFactory>(\n  (theme, { color, data, trendColors }) => ({\n    root: {\n      '--chart-color': trendColors\n        ? getThemeColor(getTrendColor(data, trendColors), theme)\n        : color\n          ? getThemeColor(color, theme)\n          : undefined,\n    },\n  })\n);\n\nexport const Sparkline = factory<SparklineFactory>((_props) => {\n  const props = useProps('Sparkline', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withGradient,\n    fillOpacity,\n    curveType,\n    strokeWidth,\n    trendColors,\n    connectNulls,\n    areaProps,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SparklineFactory>({\n    name: 'Sparkline',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const id = useId();\n  const mappedData = useMemo(() => data.map((value, index) => ({ value, index })), [data]);\n\n  return (\n    <Box {...getStyles('root')} {...others} dir=\"ltr\">\n      <ResponsiveContainer>\n        <ReChartsAreaChart data={mappedData}>\n          <Area\n            dataKey=\"value\"\n            type={curveType}\n            fill={`url(#${id})`}\n            stroke=\"var(--chart-color, var(--mantine-color-blue-filled))\"\n            isAnimationActive={false}\n            connectNulls={connectNulls}\n            strokeWidth={strokeWidth}\n            fillOpacity={1}\n            activeDot={false}\n            {...areaProps}\n          />\n\n          <defs>\n            <AreaGradient\n              id={id}\n              color=\"var(--chart-color, var(--mantine-color-blue-filled))\"\n              fillOpacity={fillOpacity}\n              withGradient={withGradient}\n            />\n          </defs>\n        </ReChartsAreaChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nSparkline.displayName = '@mantine/charts/Sparkline';\nSparkline.classes = classes;\nSparkline.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;AAkEA,MAAM,eAAe;CACnB,cAAc;CACd,cAAc;CACd,aAAa;CACb,aAAa;CACb,WAAW;CACZ;AAED,SAAS,cAAc,MAAyB,aAAmC;CACjF,MAAM,QAAQ,KAAK;CACnB,MAAM,OAAO,KAAK,KAAK,SAAS;AAEhC,KAAI,UAAU,QAAQ,SAAS,KAC7B,QAAO,YAAY,WAAW,YAAY;AAG5C,KAAI,QAAQ,KACV,QAAO,YAAY;AAGrB,KAAI,QAAQ,KACV,QAAO,YAAY;AAGrB,QAAO,YAAY,WAAW,YAAY;;AAG5C,MAAM,gBAAA,GAAA,cAAA,qBACH,OAAO,EAAE,OAAO,MAAM,mBAAmB,EACxC,MAAM,EACJ,iBAAiB,eAAA,GAAA,cAAA,eACC,cAAc,MAAM,YAAY,EAAE,MAAM,GACtD,SAAA,GAAA,cAAA,eACgB,OAAO,MAAM,GAC3B,KAAA,GACP,EACF,EACF;AAED,MAAa,aAAA,GAAA,cAAA,UAAuC,WAAW;CAC7D,MAAM,SAAA,GAAA,cAAA,UAAiB,aAAa,cAAc,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,cACA,aACA,WACA,aACA,aACA,cACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,WAAwC;EAC5C,MAAM;EACN,SAAA,yBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,MAAA,GAAA,MAAA,QAAY;CAClB,MAAM,cAAA,GAAA,MAAA,eAA2B,KAAK,KAAK,OAAO,WAAW;EAAE;EAAO;EAAO,EAAE,EAAE,CAAC,KAAK,CAAC;AAExF,QACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,GAAI;EAAQ,KAAI;YAC1C,iBAAA,GAAA,kBAAA,KAACC,SAAAA,qBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAACC,SAAAA,WAAD;GAAmB,MAAM;aAAzB,CACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,MAAD;IACE,SAAQ;IACR,MAAM;IACN,MAAM,QAAQ,GAAG;IACjB,QAAO;IACP,mBAAmB;IACL;IACD;IACb,aAAa;IACb,WAAW;IACX,GAAI;IACJ,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;IACM;IACJ,OAAM;IACO;IACC;IACd,CAAA,EACG,CAAA,CACW;MACA,CAAA;EAClB,CAAA;EAER;AAEF,UAAU,cAAc;AACxB,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe"}

package/esm/BarChart/BarChart.mjs

@@ -4,8 +4,8 @@ import { ChartLegend } from "../ChartLegend/ChartLegend.mjs";
 import grid_chart_module_default from "../grid-chart.module.mjs";
 import { Box, createVarsResolver, factory, getThemeColor, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createElement, useState } from "react";
-import { Bar, BarChart, CartesianGrid, Cell, Label, LabelList, Legend, ReferenceLine, ResponsiveContainer, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
+import React, { createElement, useState } from "react";
+import { Bar, BarChart, CartesianGrid, Label, LabelList, Legend, Rectangle, ReferenceLine, ResponsiveContainer, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
 //#region packages/@mantine/charts/src/BarChart/BarChart.tsx
 function valueToPercent(value) {
 	return `${(value * 100).toFixed(0)}%`;
@@ -81,6 +81,8 @@ const BarChart$1 = factory((_props) => {
 	const bars = series.map((item) => {
 		const color = getThemeColor(item.color, theme);
 		const dimmed = shouldHighlight && highlightedArea !== item.name;
+		const resolvedBarProps = typeof barProps === "function" ? barProps(item) : barProps;
+		const userShape = resolvedBarProps?.shape;
 		return /* @__PURE__ */ createElement(Bar, {
 			...getStyles("bar"),
 			key: item.name,
@@ -94,10 +96,23 @@ const BarChart$1 = factory((_props) => {
 			stackId: stacked ? "stack" : item.stackId || void 0,
 			yAxisId: item.yAxisId || void 0,
 			minPointSize: minBarSize,
-			...typeof barProps === "function" ? barProps(item) : barProps
-		}, inputData.map((entry, index) => {
-			return /* @__PURE__ */ jsx(Cell, { fill: entry.color ? getThemeColor(entry.color, theme) : typeof getBarColor === "function" ? getThemeColor(getBarColor(entry[item.name], item), theme) : getBarFill(barProps, item) || color }, `cell-${index}`);
-		}), withBarValueLabel && /* @__PURE__ */ jsx(LabelList, {
+			...resolvedBarProps,
+			shape: (shapeProps) => {
+				const entry = shapeProps.payload;
+				const cellColor = entry?.color ? getThemeColor(entry.color, theme) : typeof getBarColor === "function" ? getThemeColor(getBarColor(entry?.[item.name], item), theme) : getBarFill(barProps, item) || color;
+				const coloredProps = {
+					...shapeProps,
+					fill: cellColor
+				};
+				if (typeof userShape === "function") return userShape(coloredProps);
+				if (React.isValidElement(userShape)) return React.cloneElement(userShape, coloredProps);
+				if (typeof userShape === "object" && userShape) return /* @__PURE__ */ jsx(Rectangle, {
+					...coloredProps,
+					...userShape
+				});
+				return /* @__PURE__ */ jsx(Rectangle, { ...coloredProps });
+			}
+		}, withBarValueLabel && /* @__PURE__ */ jsx(LabelList, {
 			position: orientation === "vertical" ? "right" : "top",
 			fontSize: 12,
 			fill: "var(--chart-bar-label-color, var(--mantine-color-dimmed))",

package/esm/BarChart/BarChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.mjs","names":["BarChart","ReChartsBarChart","Tooltip","classes"],"sources":["../../src/BarChart/BarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Bar,\n  BarProps,\n  CartesianGrid,\n  Cell,\n  Label,\n  LabelList,\n  LabelListProps,\n  Legend,\n  BarChart as ReChartsBarChart,\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\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        {...(typeof barProps === 'function' ? barProps(item) : barProps)}\n      >\n        {inputData.map((entry, index) => {\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\n          return <Cell key={`cell-${index}`} fill={cellColor} />;\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.mjs","names":["BarChart","ReChartsBarChart","Tooltip","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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"}

package/esm/DonutChart/DonutChart.mjs

@@ -3,7 +3,7 @@ import { ChartTooltip } from "../ChartTooltip/ChartTooltip.mjs";
 import DonutChart_module_default from "./DonutChart.module.mjs";
 import { Box, createVarsResolver, factory, getThemeColor, rem, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip as Tooltip$1 } from "recharts";
+import { Pie, PieChart, ResponsiveContainer, Tooltip as Tooltip$1 } from "recharts";
 //#region packages/@mantine/charts/src/DonutChart/DonutChart.tsx
 const defaultProps = {
 	withTooltip: true,
@@ -63,12 +63,13 @@ const DonutChart = factory((_props) => {
 		styles,
 		props
 	});
-	const cells = data.map((item, index) => /* @__PURE__ */ jsx(Cell, {
+	const pieData = data.map((item) => ({
+		...item,
 		fill: getThemeColor(item.color, theme),
 		stroke: "var(--chart-stroke-color, var(--mantine-color-body))",
 		strokeWidth,
 		...typeof cellProps === "function" ? cellProps(item) : cellProps
-	}, index));
+	}));
 	return /* @__PURE__ */ jsx(Box, {
 		size,
 		...getStyles("root"),
@@ -77,7 +78,7 @@ const DonutChart = factory((_props) => {
 			...pieChartProps,
 			children: [
 				/* @__PURE__ */ jsx(Pie, {
-					data,
+					data: pieData,
 					innerRadius: size / 2 - thickness,
 					outerRadius: size / 2,
 					dataKey: "value",
@@ -90,8 +91,7 @@ const DonutChart = factory((_props) => {
 						stroke: "var(--chart-label-color, var(--mantine-color-dimmed))",
 						strokeWidth: 1
 					} : false,
-					...pieProps,
-					children: cells
+					...pieProps
 				}),
 				chartLabel && /* @__PURE__ */ jsx("text", {
 					x: "50%",