@mantine/charts 9.5.2 → 9.6.0

package/esm/MatrixChart/MatrixChart.module.mjs

@@ -0,0 +1,14 @@
+"use client";
+//#region packages/@mantine/charts/src/MatrixChart/MatrixChart.module.css
+var MatrixChart_module_default = {
+	"root": "m_c56bc032",
+	"cell": "m_c564c8b2",
+	"xLabel": "m_21c5c4ac",
+	"yLabel": "m_237a9d4b",
+	"legendLabel": "m_3135f197",
+	"legendRect": "m_af0486e1"
+};
+//#endregion
+export { MatrixChart_module_default as default };
+
+//# sourceMappingURL=MatrixChart.module.mjs.map

package/esm/MatrixChart/MatrixChart.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MatrixChart.module.mjs","names":[],"sources":["../../src/MatrixChart/MatrixChart.module.css"],"sourcesContent":[".root {\n  display: block;\n  width: fit-content;\n\n  @mixin where-light {\n    --matrix-level-1: rgba(81, 207, 102, 0.3);\n    --matrix-level-2: rgba(64, 192, 87, 0.45);\n    --matrix-level-3: rgba(55, 178, 77, 0.75);\n    --matrix-level-4: rgba(43, 138, 62, 1);\n    --matrix-empty-bg: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    --matrix-level-1: rgba(43, 138, 62, 0.3);\n    --matrix-level-2: rgba(47, 158, 68, 0.45);\n    --matrix-level-3: rgba(55, 178, 77, 0.75);\n    --matrix-level-4: rgba(81, 207, 102, 1);\n    --matrix-empty-bg: var(--mantine-color-dark-5);\n  }\n}\n\n.cell {\n  stroke-width: 1px;\n\n  &:where([data-empty]) {\n    fill: var(--matrix-empty-bg);\n  }\n}\n\n.xLabel,\n.yLabel,\n.legendLabel {\n  cursor: default;\n  user-select: none;\n  fill: var(--mantine-color-dimmed);\n}\n\n.legendRect {\n  &:where([data-empty]) {\n    fill: var(--matrix-empty-bg);\n  }\n}\n"],"mappings":""}

package/esm/MatrixChart/build-cell-map/build-cell-map.mjs

@@ -0,0 +1,16 @@
+"use client";
+//#region packages/@mantine/charts/src/MatrixChart/build-cell-map/build-cell-map.ts
+function getCellKey(x, y) {
+	return `${x.length}:${x}\0${y}`;
+}
+function buildCellMap(data) {
+	const map = /* @__PURE__ */ new Map();
+	data.forEach((cell) => {
+		map.set(getCellKey(cell.x, cell.y), cell);
+	});
+	return map;
+}
+//#endregion
+export { buildCellMap, getCellKey };
+
+//# sourceMappingURL=build-cell-map.mjs.map

package/esm/MatrixChart/build-cell-map/build-cell-map.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-cell-map.mjs","names":[],"sources":["../../../src/MatrixChart/build-cell-map/build-cell-map.ts"],"sourcesContent":["import type { MatrixChartCell } from '../MatrixChart';\n\nexport function getCellKey(x: string, y: string): string {\n  return `${x.length}:${x}\\0${y}`;\n}\n\nexport function buildCellMap(data: MatrixChartCell[]): Map<string, MatrixChartCell> {\n  const map = new Map<string, MatrixChartCell>();\n  data.forEach((cell) => {\n    map.set(getCellKey(cell.x, cell.y), cell);\n  });\n  return map;\n}\n"],"mappings":";;AAEA,SAAgB,WAAW,GAAW,GAAmB;CACvD,OAAO,GAAG,EAAE,OAAO,GAAG,EAAE,IAAI;AAC9B;AAEA,SAAgB,aAAa,MAAuD;CAClF,MAAM,sBAAM,IAAI,IAA6B;CAC7C,KAAK,SAAS,SAAS;EACrB,IAAI,IAAI,WAAW,KAAK,GAAG,KAAK,CAAC,GAAG,IAAI;CAC1C,CAAC;CACD,OAAO;AACT"}

package/esm/MatrixChart/get-domain/get-domain.mjs

@@ -0,0 +1,28 @@
+"use client";
+//#region packages/@mantine/charts/src/MatrixChart/get-domain/get-domain.ts
+/**
+* Calculates the value domain used for color interpolation. Rows with missing or
+* non-finite values are ignored – `NaN` and `Infinity` are numbers, and letting either
+* reach the bounds produces a `NaN` domain, which resolves every cell color to
+* `undefined` and paints the whole matrix with the SVG default fill instead of just
+* skipping the offending cell. Bounds are reduced iteratively rather than spread into
+* `Math.min`/`Math.max`, which throws on large matrices.
+*/
+function getDomain(data, domain) {
+	if (Array.isArray(domain)) return domain;
+	let min = Infinity;
+	let max = -Infinity;
+	for (const cell of data) {
+		const value = cell.value;
+		if (typeof value === "number" && Number.isFinite(value)) {
+			if (value < min) min = value;
+			if (value > max) max = value;
+		}
+	}
+	if (min === Infinity) return [0, 0];
+	return [min, max];
+}
+//#endregion
+export { getDomain };
+
+//# sourceMappingURL=get-domain.mjs.map

package/esm/MatrixChart/get-domain/get-domain.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-domain.mjs","names":[],"sources":["../../../src/MatrixChart/get-domain/get-domain.ts"],"sourcesContent":["import type { MatrixChartCell } from '../MatrixChart';\n\n/**\n * Calculates the value domain used for color interpolation. Rows with missing or\n * non-finite values are ignored – `NaN` and `Infinity` are numbers, and letting either\n * reach the bounds produces a `NaN` domain, which resolves every cell color to\n * `undefined` and paints the whole matrix with the SVG default fill instead of just\n * skipping the offending cell. Bounds are reduced iteratively rather than spread into\n * `Math.min`/`Math.max`, which throws on large matrices.\n */\nexport function getDomain(data: MatrixChartCell[], domain?: [number, number]): [number, number] {\n  if (Array.isArray(domain)) {\n    return domain;\n  }\n\n  let min = Infinity;\n  let max = -Infinity;\n\n  for (const cell of data) {\n    const value = cell.value;\n\n    if (typeof value === 'number' && Number.isFinite(value)) {\n      if (value < min) {\n        min = value;\n      }\n\n      if (value > max) {\n        max = value;\n      }\n    }\n  }\n\n  if (min === Infinity) {\n    return [0, 0];\n  }\n\n  return [min, max];\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,UAAU,MAAyB,QAA6C;CAC9F,IAAI,MAAM,QAAQ,MAAM,GACtB,OAAO;CAGT,IAAI,MAAM;CACV,IAAI,MAAM;CAEV,KAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,QAAQ,KAAK;EAEnB,IAAI,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK,GAAG;GACvD,IAAI,QAAQ,KACV,MAAM;GAGR,IAAI,QAAQ,KACV,MAAM;EAEV;CACF;CAEA,IAAI,QAAQ,UACV,OAAO,CAAC,GAAG,CAAC;CAGd,OAAO,CAAC,KAAK,GAAG;AAClB"}

package/esm/MatrixChart/get-legend-width/get-legend-width.mjs

@@ -0,0 +1,15 @@
+"use client";
+//#region packages/@mantine/charts/src/MatrixChart/get-legend-width/get-legend-width.ts
+function getLegendWidth({ legendLabels, fontSize, colorsCount, cellSize, gap }) {
+	const textGap = 6;
+	const charWidth = fontSize * .6;
+	const lessWidth = legendLabels[0].length * charWidth;
+	const allColorsCount = 1 + colorsCount;
+	const rectsWidth = allColorsCount * cellSize + (allColorsCount - 1) * gap;
+	const moreWidth = legendLabels[1].length * charWidth;
+	return lessWidth + textGap + rectsWidth + textGap + moreWidth;
+}
+//#endregion
+export { getLegendWidth };
+
+//# sourceMappingURL=get-legend-width.mjs.map

package/esm/MatrixChart/get-legend-width/get-legend-width.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-legend-width.mjs","names":[],"sources":["../../../src/MatrixChart/get-legend-width/get-legend-width.ts"],"sourcesContent":["interface GetLegendWidthInput {\n  legendLabels: [string, string];\n  fontSize: number;\n  colorsCount: number;\n  cellSize: number;\n  gap: number;\n}\n\nexport function getLegendWidth({\n  legendLabels,\n  fontSize,\n  colorsCount,\n  cellSize,\n  gap,\n}: GetLegendWidthInput): number {\n  const textGap = 6;\n  const charWidth = fontSize * 0.6;\n  const lessWidth = legendLabels[0].length * charWidth;\n  const allColorsCount = 1 + colorsCount;\n  const rectsWidth = allColorsCount * cellSize + (allColorsCount - 1) * gap;\n  const moreWidth = legendLabels[1].length * charWidth;\n  return lessWidth + textGap + rectsWidth + textGap + moreWidth;\n}\n"],"mappings":";;AAQA,SAAgB,eAAe,EAC7B,cACA,UACA,aACA,UACA,OAC8B;CAC9B,MAAM,UAAU;CAChB,MAAM,YAAY,WAAW;CAC7B,MAAM,YAAY,aAAa,EAAE,CAAC,SAAS;CAC3C,MAAM,iBAAiB,IAAI;CAC3B,MAAM,aAAa,iBAAiB,YAAY,iBAAiB,KAAK;CACtE,MAAM,YAAY,aAAa,EAAE,CAAC,SAAS;CAC3C,OAAO,YAAY,UAAU,aAAa,UAAU;AACtD"}

package/esm/MatrixChart/get-unique-values/get-unique-values.mjs

@@ -0,0 +1,19 @@
+"use client";
+//#region packages/@mantine/charts/src/MatrixChart/get-unique-values/get-unique-values.ts
+function getUniqueValues(data, axis, labels) {
+	if (labels) return labels;
+	const seen = /* @__PURE__ */ new Set();
+	const result = [];
+	data.forEach((cell) => {
+		const value = cell[axis];
+		if (!seen.has(value)) {
+			seen.add(value);
+			result.push(value);
+		}
+	});
+	return result;
+}
+//#endregion
+export { getUniqueValues };
+
+//# sourceMappingURL=get-unique-values.mjs.map

package/esm/MatrixChart/get-unique-values/get-unique-values.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-unique-values.mjs","names":[],"sources":["../../../src/MatrixChart/get-unique-values/get-unique-values.ts"],"sourcesContent":["import type { MatrixChartCell } from '../MatrixChart';\n\nexport function getUniqueValues(\n  data: MatrixChartCell[],\n  axis: 'x' | 'y',\n  labels?: string[]\n): string[] {\n  if (labels) {\n    return labels;\n  }\n\n  const seen = new Set<string>();\n  const result: string[] = [];\n  data.forEach((cell) => {\n    const value = cell[axis];\n    if (!seen.has(value)) {\n      seen.add(value);\n      result.push(value);\n    }\n  });\n  return result;\n}\n"],"mappings":";;AAEA,SAAgB,gBACd,MACA,MACA,QACU;CACV,IAAI,QACF,OAAO;CAGT,MAAM,uBAAO,IAAI,IAAY;CAC7B,MAAM,SAAmB,CAAC;CAC1B,KAAK,SAAS,SAAS;EACrB,MAAM,QAAQ,KAAK;EACnB,IAAI,CAAC,KAAK,IAAI,KAAK,GAAG;GACpB,KAAK,IAAI,KAAK;GACd,OAAO,KAAK,KAAK;EACnB;CACF,CAAC;CACD,OAAO;AACT"}

package/esm/PieChart/PieChart.mjs

@@ -36,9 +36,10 @@ const getInsideLabel = (labelsType, valueFormatter) => ({ cx, cy, midAngle, inne
 	const RADIAN = Math.PI / 180;
 	const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * .5;
 	const x = Number(cx) + radius * Math.cos(-(midAngle || 0) * RADIAN);
+	const y = Number(cy) + radius * Math.sin(-(midAngle || 0) * RADIAN);
 	return /* @__PURE__ */ jsx("text", {
 		x,
-		y: Number(cy) + radius * Math.sin(-(midAngle || 0) * RADIAN),
+		y,
 		textAnchor: x > Number(cx) ? "start" : "end",
 		dominantBaseline: "central",
 		className: PieChart_module_default.label,

package/esm/PieChart/PieChart.mjs.map

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

package/esm/PointLabel/PointLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PointLabel.mjs","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;CAC3E,OACE,oBAAC,KAAD;EAAG,WAAW,aAAa,EAAE,GAAG,EAAE;YAChC,oBAAC,QAAD;GACE,GAAG;GACH,GAAG;GACH,IAAI;GACJ,IAAI;GACJ,YAAW;GACX,MAAK;GACL,UAAU;aAET,iBAAiB,eAAe,KAAM,IAAI;EACvC,CAAA;CACL,CAAA;AAEP"}
+{"version":3,"file":"PointLabel.mjs","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;CAC3E,OACE,oBAAC,KAAD;EAAG,WAAW,aAAa,EAAE,GAAG,EAAE;EAChC,UAAA,oBAAC,QAAD;GACE,GAAG;GACH,GAAG;GACH,IAAI;GACJ,IAAI;GACJ,YAAW;GACX,MAAK;GACL,UAAU;GAET,UAAA,iBAAiB,eAAe,KAAM,IAAI;EACvC,CAAA;CACL,CAAA;AAEP"}

package/esm/RadarChart/RadarChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadarChart.mjs","names":["RadarChart","ReChartsRadarChart","Tooltip","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  /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */\n  accessibilityLayer?: boolean;\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  accessibilityLayer: true,\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    accessibilityLayer,\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 | number | 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\n          data={data}\n          accessibilityLayer={accessibilityLayer}\n          {...radarChartProps}\n        >\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\nexport namespace RadarChart {\n  export type Props = RadarChartProps;\n  export type StylesNames = RadarChartStylesNames;\n  export type CssVariables = RadarChartCssVariables;\n  export type Factory = RadarChartFactory;\n  export type Series = RadarChartSeries;\n}\n"],"mappings":"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"}
+{"version":3,"file":"RadarChart.mjs","names":["RadarChart","ReChartsRadarChart","Tooltip","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  /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */\n  accessibilityLayer?: boolean;\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  accessibilityLayer: true,\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    accessibilityLayer,\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 | number | 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\n          data={data}\n          accessibilityLayer={accessibilityLayer}\n          {...radarChartProps}\n        >\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\nexport namespace RadarChart {\n  export type Props = RadarChartProps;\n  export type StylesNames = RadarChartStylesNames;\n  export type CssVariables = RadarChartCssVariables;\n  export type Factory = RadarChartFactory;\n  export type Series = RadarChartSeries;\n}\n"],"mappings":"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"}

package/esm/RadialBarChart/RadialBarChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadialBarChart.mjs","names":["RadialBarChart","ReChartsRadialBarChart","Tooltip","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  /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */\n  accessibilityLayer?: boolean;\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  accessibilityLayer: 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    accessibilityLayer,\n    ...others\n  } = props;\n  const [highlightedIndex, setHighlightedIndex] = useState<number | 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 }, index) => {\n    const resolvedColor = getThemeColor(color, theme);\n\n    return {\n      ...item,\n      __segmentIndex: index,\n      fill: resolvedColor,\n      fillOpacity:\n        highlightedIndex !== null\n          ? highlightedIndex === index\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          accessibilityLayer={accessibilityLayer}\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                    highlightKey: (item.payload as any)?.__segmentIndex,\n                  }))}\n                  onHighlight={(value) =>\n                    setHighlightedIndex(typeof value === 'number' ? value : null)\n                  }\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {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\nexport namespace RadialBarChart {\n  export type Props = RadialBarChartProps;\n  export type StylesNames = RadialBarChartStylesNames;\n  export type CssVariables = RadialBarChartCssVariables;\n  export type Factory = RadialBarChartFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"RadialBarChart.mjs","names":["RadialBarChart","ReChartsRadialBarChart","Tooltip","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  /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */\n  accessibilityLayer?: boolean;\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  accessibilityLayer: 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    accessibilityLayer,\n    ...others\n  } = props;\n  const [highlightedIndex, setHighlightedIndex] = useState<number | 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 }, index) => {\n    const resolvedColor = getThemeColor(color, theme);\n\n    return {\n      ...item,\n      __segmentIndex: index,\n      fill: resolvedColor,\n      fillOpacity:\n        highlightedIndex !== null\n          ? highlightedIndex === index\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          accessibilityLayer={accessibilityLayer}\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                    highlightKey: (item.payload as any)?.__segmentIndex,\n                  }))}\n                  onHighlight={(value) =>\n                    setHighlightedIndex(typeof value === 'number' ? value : null)\n                  }\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {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\nexport namespace RadialBarChart {\n  export type Props = RadialBarChartProps;\n  export type StylesNames = RadialBarChartStylesNames;\n  export type CssVariables = RadialBarChartCssVariables;\n  export type Factory = RadialBarChartFactory;\n}\n"],"mappings":"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"}

package/esm/SankeyChart/SankeyChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SankeyChart.mjs","names":["RechartsSankey","Tooltip","classes"],"sources":["../../src/SankeyChart/SankeyChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Sankey as RechartsSankey,\n  SankeyProps as RechartsSankeyProps,\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 './SankeyChart.module.css';\n\nexport interface SankeyChartNode {\n  name: string;\n  color?: MantineColor;\n  [key: string]: unknown;\n}\n\nexport interface SankeyChartLink {\n  source: number;\n  target: number;\n  value: number;\n  [key: string]: unknown;\n}\n\nexport interface SankeyChartData {\n  nodes: SankeyChartNode[];\n  links: SankeyChartLink[];\n}\n\nexport type SankeyChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type SankeyChartCssVariables = {\n  root: '--chart-node-color' | '--chart-link-color' | '--chart-text-color' | '--chart-height';\n};\n\nexport interface SankeyChartProps\n  extends BoxProps, StylesApiProps<SankeyChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart, must include `nodes` and `links` arrays */\n  data: SankeyChartData;\n\n  /** Controls chart height @default 300 */\n  height?: number;\n\n  /** The width of each node @default 10 */\n  nodeWidth?: number;\n\n  /** The padding between nodes @default 10 */\n  nodePadding?: number;\n\n  /** The curvature of links between nodes @default 0.5 */\n  linkCurvature?: number;\n\n  /** The number of relaxation iterations @default 32 */\n  iterations?: number;\n\n  /** Default color for nodes, by default depends on color scheme */\n  nodeColor?: MantineColor;\n\n  /** An array of colors used for nodes when no `color` is set on individual nodes */\n  colors?: MantineColor[];\n\n  /** Default color for links, by default depends on color scheme */\n  linkColor?: MantineColor;\n\n  /** Opacity of the link fill @default 0.4 */\n  linkOpacity?: number;\n\n  /** Determines whether the tooltip should be displayed when 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 `Sankey` component */\n  sankeyProps?: Partial<Omit<RechartsSankeyProps, 'ref' | 'data'>>;\n\n  /** Controls text color of labels @default dimmed */\n  textColor?: MantineColor;\n\n  /** A function to format values inside the tooltip and node labels */\n  valueFormatter?: (value: number) => string;\n\n  /** Additional elements rendered inside `Sankey` component */\n  children?: React.ReactNode;\n}\n\nexport type SankeyChartFactory = Factory<{\n  props: SankeyChartProps;\n  ref: HTMLDivElement;\n  stylesNames: SankeyChartStylesNames;\n  vars: SankeyChartCssVariables;\n}>;\n\nconst defaultProps = {\n  height: 300,\n  nodeWidth: 10,\n  nodePadding: 10,\n  linkCurvature: 0.5,\n  iterations: 32,\n  linkOpacity: 0.4,\n  withTooltip: true,\n  tooltipAnimationDuration: 0,\n} satisfies Partial<SankeyChartProps>;\n\nconst varsResolver = createVarsResolver<SankeyChartFactory>(\n  (theme, { nodeColor, linkColor, textColor, height }) => ({\n    root: {\n      '--chart-node-color': nodeColor ? getThemeColor(nodeColor, theme) : undefined,\n      '--chart-link-color': linkColor ? getThemeColor(linkColor, theme) : undefined,\n      '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n      '--chart-height': rem(height),\n    },\n  })\n);\n\ninterface SankeyNodeContentProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  index: number;\n  payload: { name: string; value: number; targetNodes: number[]; color?: string };\n  resolvedNodeColors: Record<number, string>;\n  resolvedDefaultColors: string[];\n  valueFormatter?: (value: number) => string;\n}\n\nconst DEFAULT_COLORS = [\n  'var(--mantine-color-blue-filled)',\n  'var(--mantine-color-cyan-filled)',\n  'var(--mantine-color-teal-filled)',\n  'var(--mantine-color-green-filled)',\n  'var(--mantine-color-lime-filled)',\n  'var(--mantine-color-yellow-filled)',\n  'var(--mantine-color-orange-filled)',\n  'var(--mantine-color-red-filled)',\n  'var(--mantine-color-pink-filled)',\n  'var(--mantine-color-grape-filled)',\n  'var(--mantine-color-violet-filled)',\n  'var(--mantine-color-indigo-filled)',\n];\n\nfunction SankeyNodeContent({\n  x,\n  y,\n  width,\n  height,\n  index,\n  payload,\n  resolvedNodeColors,\n  resolvedDefaultColors,\n  valueFormatter,\n}: SankeyNodeContentProps) {\n  const fill =\n    resolvedNodeColors[index] ||\n    `var(--chart-node-color, ${resolvedDefaultColors[index % resolvedDefaultColors.length]})`;\n\n  const isLeaf = !payload.targetNodes || payload.targetNodes.length === 0;\n  const labelX = isLeaf ? x - 6 : x + width + 6;\n  const textAnchor = isLeaf ? 'end' : 'start';\n  const formattedValue = valueFormatter ? valueFormatter(payload.value) : payload.value;\n  const stacked = height >= 28;\n\n  return (\n    <g>\n      <rect x={x} y={y} width={width} height={height} fill={fill} stroke=\"none\" />\n      {stacked ? (\n        <>\n          <text\n            x={labelX}\n            y={y + height / 2 - 7}\n            textAnchor={textAnchor}\n            dominantBaseline=\"central\"\n            fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n            fontSize={12}\n            fontFamily=\"var(--mantine-font-family)\"\n          >\n            {payload.name}\n          </text>\n          <text\n            x={labelX}\n            y={y + height / 2 + 7}\n            textAnchor={textAnchor}\n            dominantBaseline=\"central\"\n            fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n            fontSize={12}\n            fontFamily=\"var(--mantine-font-family)\"\n            opacity={0.8}\n          >\n            {formattedValue}\n          </text>\n        </>\n      ) : (\n        <text\n          x={labelX}\n          y={y + height / 2}\n          textAnchor={textAnchor}\n          dominantBaseline=\"central\"\n          fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n          fontSize={12}\n          fontFamily=\"var(--mantine-font-family)\"\n        >\n          {payload.name} <tspan opacity={0.8}>{formattedValue}</tspan>\n        </text>\n      )}\n    </g>\n  );\n}\n\ninterface SankeyLinkContentProps {\n  sourceX: number;\n  targetX: number;\n  sourceY: number;\n  targetY: number;\n  sourceControlX: number;\n  targetControlX: number;\n  linkWidth: number;\n  index: number;\n  payload: {\n    source: { color?: string };\n    target: { color?: string };\n  };\n  sourceResolvedColor?: string;\n  linkOpacity: number;\n}\n\nfunction SankeyLinkContent({\n  sourceX,\n  targetX,\n  sourceY,\n  targetY,\n  sourceControlX,\n  targetControlX,\n  linkWidth,\n  sourceResolvedColor,\n  linkOpacity,\n}: SankeyLinkContentProps) {\n  const fill = sourceResolvedColor || 'var(--chart-link-color, var(--mantine-color-gray-4))';\n\n  return (\n    <path\n      d={`\n        M${sourceX},${sourceY + linkWidth / 2}\n        C${sourceControlX},${sourceY + linkWidth / 2}\n          ${targetControlX},${targetY + linkWidth / 2}\n          ${targetX},${targetY + linkWidth / 2}\n        L${targetX},${targetY - linkWidth / 2}\n        C${targetControlX},${targetY - linkWidth / 2}\n          ${sourceControlX},${sourceY - linkWidth / 2}\n          ${sourceX},${sourceY - linkWidth / 2}\n        Z\n      `}\n      fill={fill}\n      opacity={linkOpacity}\n      stroke=\"none\"\n    />\n  );\n}\n\nexport const SankeyChart = factory<SankeyChartFactory>((_props) => {\n  const props = useProps('SankeyChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    height: chartHeight,\n    nodeWidth,\n    nodePadding,\n    linkCurvature,\n    iterations,\n    nodeColor,\n    colors,\n    linkColor,\n    linkOpacity,\n    textColor,\n    withTooltip,\n    tooltipAnimationDuration,\n    tooltipProps,\n    sankeyProps,\n    valueFormatter,\n    children,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const resolvedNodeColors: Record<number, string> = {};\n  data.nodes.forEach((node, index) => {\n    if (node.color) {\n      resolvedNodeColors[index] = getThemeColor(node.color, theme);\n    }\n  });\n\n  const resolvedDefaultColors = colors\n    ? colors.map((color) => getThemeColor(color, theme))\n    : DEFAULT_COLORS;\n\n  const getStyles = useStyles<SankeyChartFactory>({\n    name: 'SankeyChart',\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<SankeyChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer height={chartHeight}>\n        <RechartsSankey\n          data={data as any}\n          nodeWidth={nodeWidth}\n          nodePadding={nodePadding}\n          linkCurvature={linkCurvature}\n          iterations={iterations}\n          node={(nodeProps: any) => (\n            <SankeyNodeContent\n              {...nodeProps}\n              resolvedNodeColors={resolvedNodeColors}\n              resolvedDefaultColors={resolvedDefaultColors}\n              valueFormatter={valueFormatter}\n            />\n          )}\n          link={(linkProps: any) => {\n            const sourceIndex =\n              linkProps.index >= 0 && linkProps.index < data.links.length\n                ? data.links[linkProps.index].source\n                : -1;\n            return (\n              <SankeyLinkContent\n                {...linkProps}\n                sourceResolvedColor={resolvedNodeColors[sourceIndex]}\n                linkOpacity={linkOpacity!}\n              />\n            );\n          }}\n          {...sankeyProps}\n        >\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => {\n                const resolveColor = (item: any) => {\n                  const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);\n                  if (nodeIndex !== -1) {\n                    return (\n                      resolvedNodeColors[nodeIndex] ||\n                      resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length]\n                    );\n                  }\n\n                  const sourceNode = item.payload?.payload?.source ?? item.payload?.source;\n                  if (sourceNode) {\n                    const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);\n                    if (sourceIndex !== -1) {\n                      return (\n                        resolvedNodeColors[sourceIndex] ||\n                        resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length]\n                      );\n                    }\n                  }\n\n                  return 'var(--mantine-color-blue-6)';\n                };\n\n                return (\n                  <ChartTooltip\n                    payload={\n                      payload?.map((item) => ({\n                        name: item.name as string,\n                        value: item.value as number,\n                        color: resolveColor(item),\n                      })) || []\n                    }\n                    classNames={resolvedClassNames}\n                    styles={resolvedStyles}\n                    type=\"radial\"\n                    valueFormatter={valueFormatter}\n                    attributes={attributes}\n                  />\n                );\n              }}\n              {...tooltipProps}\n            />\n          )}\n\n          {children}\n        </RechartsSankey>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nSankeyChart.displayName = '@mantine/charts/SankeyChart';\nSankeyChart.classes = classes;\nSankeyChart.varsResolver = varsResolver;\n"],"mappings":"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"}
+{"version":3,"file":"SankeyChart.mjs","names":["RechartsSankey","Tooltip","classes"],"sources":["../../src/SankeyChart/SankeyChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Sankey as RechartsSankey,\n  SankeyProps as RechartsSankeyProps,\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 './SankeyChart.module.css';\n\nexport interface SankeyChartNode {\n  name: string;\n  color?: MantineColor;\n  [key: string]: unknown;\n}\n\nexport interface SankeyChartLink {\n  source: number;\n  target: number;\n  value: number;\n  [key: string]: unknown;\n}\n\nexport interface SankeyChartData {\n  nodes: SankeyChartNode[];\n  links: SankeyChartLink[];\n}\n\nexport type SankeyChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type SankeyChartCssVariables = {\n  root: '--chart-node-color' | '--chart-link-color' | '--chart-text-color' | '--chart-height';\n};\n\nexport interface SankeyChartProps\n  extends BoxProps, StylesApiProps<SankeyChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart, must include `nodes` and `links` arrays */\n  data: SankeyChartData;\n\n  /** Controls chart height @default 300 */\n  height?: number;\n\n  /** The width of each node @default 10 */\n  nodeWidth?: number;\n\n  /** The padding between nodes @default 10 */\n  nodePadding?: number;\n\n  /** The curvature of links between nodes @default 0.5 */\n  linkCurvature?: number;\n\n  /** The number of relaxation iterations @default 32 */\n  iterations?: number;\n\n  /** Default color for nodes, by default depends on color scheme */\n  nodeColor?: MantineColor;\n\n  /** An array of colors used for nodes when no `color` is set on individual nodes */\n  colors?: MantineColor[];\n\n  /** Default color for links, by default depends on color scheme */\n  linkColor?: MantineColor;\n\n  /** Opacity of the link fill @default 0.4 */\n  linkOpacity?: number;\n\n  /** Determines whether the tooltip should be displayed when 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 `Sankey` component */\n  sankeyProps?: Partial<Omit<RechartsSankeyProps, 'ref' | 'data'>>;\n\n  /** Controls text color of labels @default dimmed */\n  textColor?: MantineColor;\n\n  /** A function to format values inside the tooltip and node labels */\n  valueFormatter?: (value: number) => string;\n\n  /** Additional elements rendered inside `Sankey` component */\n  children?: React.ReactNode;\n}\n\nexport type SankeyChartFactory = Factory<{\n  props: SankeyChartProps;\n  ref: HTMLDivElement;\n  stylesNames: SankeyChartStylesNames;\n  vars: SankeyChartCssVariables;\n}>;\n\nconst defaultProps = {\n  height: 300,\n  nodeWidth: 10,\n  nodePadding: 10,\n  linkCurvature: 0.5,\n  iterations: 32,\n  linkOpacity: 0.4,\n  withTooltip: true,\n  tooltipAnimationDuration: 0,\n} satisfies Partial<SankeyChartProps>;\n\nconst varsResolver = createVarsResolver<SankeyChartFactory>(\n  (theme, { nodeColor, linkColor, textColor, height }) => ({\n    root: {\n      '--chart-node-color': nodeColor ? getThemeColor(nodeColor, theme) : undefined,\n      '--chart-link-color': linkColor ? getThemeColor(linkColor, theme) : undefined,\n      '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n      '--chart-height': rem(height),\n    },\n  })\n);\n\ninterface SankeyNodeContentProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  index: number;\n  payload: { name: string; value: number; targetNodes: number[]; color?: string };\n  resolvedNodeColors: Record<number, string>;\n  resolvedDefaultColors: string[];\n  valueFormatter?: (value: number) => string;\n}\n\nconst DEFAULT_COLORS = [\n  'var(--mantine-color-blue-filled)',\n  'var(--mantine-color-cyan-filled)',\n  'var(--mantine-color-teal-filled)',\n  'var(--mantine-color-green-filled)',\n  'var(--mantine-color-lime-filled)',\n  'var(--mantine-color-yellow-filled)',\n  'var(--mantine-color-orange-filled)',\n  'var(--mantine-color-red-filled)',\n  'var(--mantine-color-pink-filled)',\n  'var(--mantine-color-grape-filled)',\n  'var(--mantine-color-violet-filled)',\n  'var(--mantine-color-indigo-filled)',\n];\n\nfunction SankeyNodeContent({\n  x,\n  y,\n  width,\n  height,\n  index,\n  payload,\n  resolvedNodeColors,\n  resolvedDefaultColors,\n  valueFormatter,\n}: SankeyNodeContentProps) {\n  const fill =\n    resolvedNodeColors[index] ||\n    `var(--chart-node-color, ${resolvedDefaultColors[index % resolvedDefaultColors.length]})`;\n\n  const isLeaf = !payload.targetNodes || payload.targetNodes.length === 0;\n  const labelX = isLeaf ? x - 6 : x + width + 6;\n  const textAnchor = isLeaf ? 'end' : 'start';\n  const formattedValue = valueFormatter ? valueFormatter(payload.value) : payload.value;\n  const stacked = height >= 28;\n\n  return (\n    <g>\n      <rect x={x} y={y} width={width} height={height} fill={fill} stroke=\"none\" />\n      {stacked ? (\n        <>\n          <text\n            x={labelX}\n            y={y + height / 2 - 7}\n            textAnchor={textAnchor}\n            dominantBaseline=\"central\"\n            fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n            fontSize={12}\n            fontFamily=\"var(--mantine-font-family)\"\n          >\n            {payload.name}\n          </text>\n          <text\n            x={labelX}\n            y={y + height / 2 + 7}\n            textAnchor={textAnchor}\n            dominantBaseline=\"central\"\n            fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n            fontSize={12}\n            fontFamily=\"var(--mantine-font-family)\"\n            opacity={0.8}\n          >\n            {formattedValue}\n          </text>\n        </>\n      ) : (\n        <text\n          x={labelX}\n          y={y + height / 2}\n          textAnchor={textAnchor}\n          dominantBaseline=\"central\"\n          fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n          fontSize={12}\n          fontFamily=\"var(--mantine-font-family)\"\n        >\n          {payload.name} <tspan opacity={0.8}>{formattedValue}</tspan>\n        </text>\n      )}\n    </g>\n  );\n}\n\ninterface SankeyLinkContentProps {\n  sourceX: number;\n  targetX: number;\n  sourceY: number;\n  targetY: number;\n  sourceControlX: number;\n  targetControlX: number;\n  linkWidth: number;\n  index: number;\n  payload: {\n    source: { color?: string };\n    target: { color?: string };\n  };\n  sourceResolvedColor?: string;\n  linkOpacity: number;\n}\n\nfunction SankeyLinkContent({\n  sourceX,\n  targetX,\n  sourceY,\n  targetY,\n  sourceControlX,\n  targetControlX,\n  linkWidth,\n  sourceResolvedColor,\n  linkOpacity,\n}: SankeyLinkContentProps) {\n  const fill = sourceResolvedColor || 'var(--chart-link-color, var(--mantine-color-gray-4))';\n\n  return (\n    <path\n      d={`\n        M${sourceX},${sourceY + linkWidth / 2}\n        C${sourceControlX},${sourceY + linkWidth / 2}\n          ${targetControlX},${targetY + linkWidth / 2}\n          ${targetX},${targetY + linkWidth / 2}\n        L${targetX},${targetY - linkWidth / 2}\n        C${targetControlX},${targetY - linkWidth / 2}\n          ${sourceControlX},${sourceY - linkWidth / 2}\n          ${sourceX},${sourceY - linkWidth / 2}\n        Z\n      `}\n      fill={fill}\n      opacity={linkOpacity}\n      stroke=\"none\"\n    />\n  );\n}\n\nexport const SankeyChart = factory<SankeyChartFactory>((_props) => {\n  const props = useProps('SankeyChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    height: chartHeight,\n    nodeWidth,\n    nodePadding,\n    linkCurvature,\n    iterations,\n    nodeColor,\n    colors,\n    linkColor,\n    linkOpacity,\n    textColor,\n    withTooltip,\n    tooltipAnimationDuration,\n    tooltipProps,\n    sankeyProps,\n    valueFormatter,\n    children,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const resolvedNodeColors: Record<number, string> = {};\n  data.nodes.forEach((node, index) => {\n    if (node.color) {\n      resolvedNodeColors[index] = getThemeColor(node.color, theme);\n    }\n  });\n\n  const resolvedDefaultColors = colors\n    ? colors.map((color) => getThemeColor(color, theme))\n    : DEFAULT_COLORS;\n\n  const getStyles = useStyles<SankeyChartFactory>({\n    name: 'SankeyChart',\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<SankeyChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer height={chartHeight}>\n        <RechartsSankey\n          data={data as any}\n          nodeWidth={nodeWidth}\n          nodePadding={nodePadding}\n          linkCurvature={linkCurvature}\n          iterations={iterations}\n          node={(nodeProps: any) => (\n            <SankeyNodeContent\n              {...nodeProps}\n              resolvedNodeColors={resolvedNodeColors}\n              resolvedDefaultColors={resolvedDefaultColors}\n              valueFormatter={valueFormatter}\n            />\n          )}\n          link={(linkProps: any) => {\n            const sourceIndex =\n              linkProps.index >= 0 && linkProps.index < data.links.length\n                ? data.links[linkProps.index].source\n                : -1;\n            return (\n              <SankeyLinkContent\n                {...linkProps}\n                sourceResolvedColor={resolvedNodeColors[sourceIndex]}\n                linkOpacity={linkOpacity!}\n              />\n            );\n          }}\n          {...sankeyProps}\n        >\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => {\n                const resolveColor = (item: any) => {\n                  const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);\n                  if (nodeIndex !== -1) {\n                    return (\n                      resolvedNodeColors[nodeIndex] ||\n                      resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length]\n                    );\n                  }\n\n                  const sourceNode = item.payload?.payload?.source ?? item.payload?.source;\n                  if (sourceNode) {\n                    const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);\n                    if (sourceIndex !== -1) {\n                      return (\n                        resolvedNodeColors[sourceIndex] ||\n                        resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length]\n                      );\n                    }\n                  }\n\n                  return 'var(--mantine-color-blue-6)';\n                };\n\n                return (\n                  <ChartTooltip\n                    payload={\n                      payload?.map((item) => ({\n                        name: item.name as string,\n                        value: item.value as number,\n                        color: resolveColor(item),\n                      })) || []\n                    }\n                    classNames={resolvedClassNames}\n                    styles={resolvedStyles}\n                    type=\"radial\"\n                    valueFormatter={valueFormatter}\n                    attributes={attributes}\n                  />\n                );\n              }}\n              {...tooltipProps}\n            />\n          )}\n\n          {children}\n        </RechartsSankey>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nSankeyChart.displayName = '@mantine/charts/SankeyChart';\nSankeyChart.classes = classes;\nSankeyChart.varsResolver = varsResolver;\n"],"mappings":"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"}

package/esm/ScatterChart/ScatterChart.mjs

@@ -4,7 +4,7 @@ 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 { CartesianGrid, Label, LabelList, Legend, ReferenceLine, ResponsiveContainer, Scatter, ScatterChart, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
+import { CartesianGrid, Label, LabelList, Legend, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Scatter, ScatterChart, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
 import { useState } from "react";
 //#region packages/@mantine/charts/src/ScatterChart/ScatterChart.tsx
 function getAxis(key, dataKey) {
@@ -26,7 +26,7 @@ const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({
 } }));
 const ScatterChart$1 = factory((_props) => {
 	const props = useProps("ScatterChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, referenceLines, dir, withLegend, withTooltip, withXAxis, withYAxis, withRightYAxis, xAxisProps, yAxisProps, rightYAxisProps, orientation, scatterChartProps, legendProps, data, gridAxis, tickLine, strokeDasharray, gridProps, tooltipAnimationDuration, tooltipProps, children, onMouseLeave, dataKey, textColor, gridColor, xAxisLabel, yAxisLabel, rightYAxisLabel, unit, labels, valueFormatter, scatterProps, pointLabels, attributes, accessibilityLayer, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, referenceLines, referenceAreas, referenceDots, dir, withLegend, withTooltip, withXAxis, withYAxis, withRightYAxis, xAxisProps, yAxisProps, rightYAxisProps, orientation, scatterChartProps, legendProps, data, gridAxis, tickLine, strokeDasharray, gridProps, tooltipAnimationDuration, tooltipProps, children, onMouseLeave, dataKey, textColor, gridColor, xAxisLabel, yAxisLabel, rightYAxisLabel, unit, labels, valueFormatter, scatterProps, pointLabels, attributes, accessibilityLayer, ...others } = props;
 	const getFormatter = (axis) => typeof valueFormatter === "function" ? valueFormatter : valueFormatter?.[axis];
 	const xFormatter = getFormatter("x");
 	const yFormatter = getFormatter("y");
@@ -64,21 +64,55 @@ const ScatterChart$1 = factory((_props) => {
 		setHighlightedArea(null);
 		onMouseLeave?.(event);
 	};
-	const referenceLinesItems = referenceLines?.map((line, index) => {
-		const color = getThemeColor(line.color, theme);
+	const referenceLinesItems = referenceLines?.map(({ color: lineColor, labelPosition, ...line }, index) => {
+		const color = getThemeColor(lineColor, theme);
 		return /* @__PURE__ */ jsx(ReferenceLine, {
-			stroke: line.color ? color : "var(--chart-grid-color)",
+			stroke: lineColor ? color : "var(--chart-grid-color)",
 			strokeWidth: 1,
 			...line,
 			label: {
-				fill: line.color ? color : "currentColor",
+				fill: lineColor ? color : "currentColor",
 				fontSize: 12,
-				position: line.labelPosition ?? "insideBottomLeft",
+				position: labelPosition ?? "insideBottomLeft",
 				...typeof line.label === "object" ? line.label : { value: line.label }
 			},
 			...getStyles("referenceLine")
 		}, index);
 	});
+	const referenceAreasItems = referenceAreas?.map(({ color: areaColor, labelPosition, ...area }, index) => {
+		const color = getThemeColor(areaColor, theme);
+		return /* @__PURE__ */ jsx(ReferenceArea, {
+			fill: areaColor ? color : "var(--chart-grid-color)",
+			fillOpacity: .2,
+			stroke: areaColor ? color : "var(--chart-grid-color)",
+			strokeOpacity: .6,
+			...area,
+			label: {
+				fill: areaColor ? color : "currentColor",
+				fontSize: 12,
+				position: labelPosition ?? "insideTop",
+				...typeof area.label === "object" ? area.label : { value: area.label }
+			},
+			...getStyles("referenceArea")
+		}, index);
+	});
+	const referenceDotsItems = referenceDots?.map(({ color: dotColor, labelPosition, ...dot }, index) => {
+		const color = getThemeColor(dotColor, theme);
+		return /* @__PURE__ */ jsx(ReferenceDot, {
+			r: 5,
+			fill: dotColor ? color : "var(--chart-grid-color)",
+			stroke: "var(--mantine-color-body)",
+			strokeWidth: 2,
+			...dot,
+			label: {
+				fill: dotColor ? color : "currentColor",
+				fontSize: 12,
+				position: labelPosition ?? "top",
+				...typeof dot.label === "object" ? dot.label : { value: dot.label }
+			},
+			...getStyles("referenceDot")
+		}, index);
+	});
 	const scatters = mappedData.map((item, index) => {
 		const dimmed = shouldHighlight && highlightedArea !== item.name;
 		return /* @__PURE__ */ jsxs(Scatter, {
@@ -121,6 +155,7 @@ const ScatterChart$1 = factory((_props) => {
 				accessibilityLayer,
 				...scatterChartProps,
 				children: [
+					referenceAreasItems,
 					/* @__PURE__ */ jsx(CartesianGrid, {
 						strokeDasharray,
 						vertical: gridAxis === "y" || gridAxis === "xy",
@@ -238,7 +273,8 @@ const ScatterChart$1 = factory((_props) => {
 						...legendProps
 					}),
 					referenceLinesItems,
-					scatters
+					scatters,
+					referenceDotsItems
 				]
 			})
 		})