@mantine/charts 9.5.2 → 9.6.0

package/esm/CompositeChart/CompositeChart.mjs

@@ -6,7 +6,7 @@ import { PointLabel } from "../PointLabel/PointLabel.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 { Area, Bar, CartesianGrid, ComposedChart, Label, LabelList, Legend, Line, ReferenceLine, ResponsiveContainer, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
+import { Area, Bar, CartesianGrid, ComposedChart, Label, LabelList, Legend, Line, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
 import { createElement, useState } from "react";
 //#region packages/@mantine/charts/src/CompositeChart/CompositeChart.tsx
 const defaultProps = {
@@ -29,7 +29,7 @@ const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({
 } }));
 const CompositeChart = factory((_props) => {
 	const props = useProps("CompositeChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, withLegend, legendProps, series, onMouseLeave, dataKey, withTooltip, withXAxis, withYAxis, gridAxis, tickLine, xAxisProps, yAxisProps, unit, tooltipAnimationDuration, strokeDasharray, gridProps, tooltipProps, referenceLines, withDots, dotProps, activeDotProps, strokeWidth, connectNulls, curveType, dir, valueFormatter, children, lineProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, areaProps, barProps, withBarValueLabel, minBarSize, maxBarWidth, composedChartProps, attributes, accessibilityLayer, withBrush, brushProps, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, withLegend, legendProps, series, onMouseLeave, dataKey, withTooltip, withXAxis, withYAxis, gridAxis, tickLine, xAxisProps, yAxisProps, unit, tooltipAnimationDuration, strokeDasharray, gridProps, tooltipProps, referenceLines, referenceAreas, referenceDots, withDots, dotProps, activeDotProps, strokeWidth, connectNulls, curveType, dir, valueFormatter, children, lineProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, areaProps, barProps, withBarValueLabel, minBarSize, maxBarWidth, composedChartProps, attributes, accessibilityLayer, withBrush, brushProps, ...others } = props;
 	const theme = useMantineTheme();
 	const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
 	const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
@@ -145,22 +145,58 @@ const CompositeChart = factory((_props) => {
 		}));
 		return null;
 	});
-	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,
 			yAxisId: line.yAxisId || void 0,
 			...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,
+			yAxisId: area.yAxisId || void 0,
+			...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,
+			yAxisId: dot.yAxisId || void 0,
+			...dot,
+			label: {
+				fill: dotColor ? color : "currentColor",
+				fontSize: 12,
+				position: labelPosition ?? "top",
+				...typeof dot.label === "object" ? dot.label : { value: dot.label }
+			},
+			...getStyles("referenceDot")
+		}, index);
+	});
 	const sharedYAxisProps = {
 		axisLine: false,
 		type: "number",
@@ -188,6 +224,7 @@ const CompositeChart = factory((_props) => {
 				accessibilityLayer,
 				...composedChartProps,
 				children: [
+					referenceAreasItems,
 					withLegend && /* @__PURE__ */ jsx(Legend, {
 						verticalAlign: "top",
 						content: (payload) => /* @__PURE__ */ jsx(ChartLegend, {
@@ -294,6 +331,7 @@ const CompositeChart = factory((_props) => {
 					}),
 					lines,
 					referenceLinesItems,
+					referenceDotsItems,
 					withBrush && /* @__PURE__ */ jsx(ChartBrush, {
 						dataKey,
 						classNames: resolvedClassNames,

package/esm/CompositeChart/CompositeChart.mjs.map

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

package/esm/DonutChart/DonutChart.mjs.map

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

package/esm/FunnelChart/FunnelChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FunnelChart.mjs","names":["FunnelChart","RechartsFunnelChart","Tooltip","classes"],"sources":["../../src/FunnelChart/FunnelChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Funnel,\n  FunnelProps,\n  LabelList,\n  Legend,\n  LegendProps,\n  FunnelChart as RechartsFunnelChart,\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 classes from './FunnelChart.module.css';\n\nexport interface FunnelChartCell {\n  key?: string | number;\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type FunnelChartStylesNames = 'root' | ChartTooltipStylesNames | ChartLegendStylesNames;\nexport type FunnelChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface FunnelChartProps\n  extends BoxProps, StylesApiProps<FunnelChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: FunnelChartCell[];\n\n  /** Determines whether the tooltip should be displayed when a 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  funnelProps?: Partial<Omit<FunnelProps, '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 @default 'white' */\n  labelColor?: MantineColor;\n\n  /** Controls chart width and height @default 300 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Controls labels position relative to the segment @default 'right' */\n  labelsPosition?: 'right' | 'left' | 'inside';\n\n  /** A function to format values inside the tooltip and labels */\n  valueFormatter?: (value: number) => string;\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 `FunnelChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `FunnelChart` component */\n  funnelChartProps?: React.ComponentProps<typeof RechartsFunnelChart>;\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 FunnelChartFactory = Factory<{\n  props: FunnelChartProps;\n  ref: HTMLDivElement;\n  stylesNames: FunnelChartStylesNames;\n  vars: FunnelChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: true,\n  size: 300,\n  strokeWidth: 1,\n  withLabels: false,\n  labelsPosition: 'right',\n  tooltipDataSource: 'all',\n  accessibilityLayer: true,\n} satisfies Partial<FunnelChartProps>;\n\nconst varsResolver = createVarsResolver<FunnelChartFactory>(\n  (theme, { strokeColor, labelColor, size }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': rem(size),\n    },\n  })\n);\n\nexport const FunnelChart = factory<FunnelChartFactory>((_props) => {\n  const props = useProps('FunnelChart', 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    strokeWidth,\n    withLabels,\n    size,\n    valueFormatter,\n    children,\n    funnelChartProps,\n    funnelProps,\n    labelsPosition,\n    tooltipDataSource,\n    strokeColor,\n    labelColor,\n    attributes,\n    accessibilityLayer,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n\n  const getStyles = useStyles<FunnelChartFactory>({\n    name: 'FunnelChart',\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<FunnelChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <RechartsFunnelChart accessibilityLayer={accessibilityLayer} {...funnelChartProps}>\n          <Funnel\n            data={data.map((entry, index) => ({\n              ...entry,\n              __segmentIndex: index,\n              fill: getThemeColor(entry.color, theme),\n              fillOpacity: highlightedIndex !== null ? (highlightedIndex === index ? 1 : 0.2) : 1,\n            }))}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n            strokeWidth={strokeWidth}\n            {...funnelProps}\n          >\n            {withLabels && (\n              <LabelList\n                position={labelsPosition}\n                fill={\n                  labelsPosition === 'inside'\n                    ? 'var(--chart-labels-color, var(--mantine-color-white))'\n                    : 'var(--chart-labels-color, var(--mantine-color-dimmed))'\n                }\n                stroke=\"none\"\n                fontFamily=\"var(--mantine-font-family)\"\n                fontSize={12}\n                dataKey={(entry) => {\n                  return typeof valueFormatter === 'function'\n                    ? valueFormatter(entry.value as number)\n                    : entry.value;\n                }}\n              />\n            )}\n          </Funnel>\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={() => (\n                <ChartLegend\n                  payload={data.map((item, index) => ({\n                    value: item.name,\n                    color: getThemeColor(item.color, theme),\n                    dataKey: item.name,\n                    highlightKey: index,\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        </RechartsFunnelChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nFunnelChart.displayName = '@mantine/charts/FunnelChart';\nFunnelChart.classes = classes;\nFunnelChart.varsResolver = varsResolver;\n\nexport namespace FunnelChart {\n  export type Props = FunnelChartProps;\n  export type StylesNames = FunnelChartStylesNames;\n  export type Factory = FunnelChartFactory;\n  export type CssVariables = FunnelChartCssVariables;\n  export type Cell = FunnelChartCell;\n}\n"],"mappings":";;;;;;;;;AA4GA,MAAM,eAAe;CACnB,aAAa;CACb,MAAM;CACN,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,mBAAmB;CACnB,oBAAoB;AACtB;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,aAAa,YAAY,YAAY,EAC7C,MAAM;CACJ,wBAAwB,cAAc,cAAc,aAAa,KAAK,IAAI,KAAA;CAC1E,wBAAwB,aAAa,cAAc,YAAY,KAAK,IAAI,KAAA;CACxE,gBAAgB,IAAI,IAAI;AAC1B,EACF,EACF;AAEA,MAAaA,gBAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,aACA,YACA,aACA,0BACA,cACA,aACA,YACA,MACA,gBACA,UACA,kBACA,aACA,gBACA,mBACA,aACA,YACA,YACA,oBACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,IAAI;CAE5E,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,mBAAmB,qBAAyC;EACtF;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,KAAD;EAAW;EAAM,GAAI,UAAU,MAAM;EAAG,GAAI;YAC1C,oBAAC,qBAAD,EAAA,UACE,qBAACC,aAAD;GAAyC;GAAoB,GAAI;aAAjE;IACE,oBAAC,QAAD;KACE,MAAM,KAAK,KAAK,OAAO,WAAW;MAChC,GAAG;MACH,gBAAgB;MAChB,MAAM,cAAc,MAAM,OAAO,KAAK;MACtC,aAAa,qBAAqB,OAAQ,qBAAqB,QAAQ,IAAI,KAAO;KACpF,EAAE;KACF,SAAQ;KACR,mBAAmB;KACnB,QAAO;KACM;KACb,GAAI;eAEH,cACC,oBAAC,WAAD;MACE,UAAU;MACV,MACE,mBAAmB,WACf,0DACA;MAEN,QAAO;MACP,YAAW;MACX,UAAU;MACV,UAAU,UAAU;OAClB,OAAO,OAAO,mBAAmB,aAC7B,eAAe,MAAM,KAAe,IACpC,MAAM;MACZ;KACD,CAAA;IAEG,CAAA;IAEP,eACC,oBAACC,WAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,UAAU,EAAE,cACV,oBAAC,cAAD;MACE,SAAS;MACT,YAAY;MACZ,QAAQ;MACR,MAAK;MACL,WACE,sBAAsB,YACjB,UAAU,EAAE,EAAE,SAAS,iBACxB,KAAA;MAEU;MACJ;KACb,CAAA;KAEH,GAAI;IACL,CAAA;IAGF,cACC,oBAAC,QAAD;KACE,eAAc;KACd,eACE,oBAAC,aAAD;MACE,SAAS,KAAK,KAAK,MAAM,WAAW;OAClC,OAAO,KAAK;OACZ,OAAO,cAAc,KAAK,OAAO,KAAK;OACtC,SAAS,KAAK;OACd,cAAc;MAChB,EAAE;MACF,cAAc,UACZ,oBAAoB,OAAO,UAAU,WAAW,QAAQ,IAAI;MAE9D,gBAAgB,aAAa,iBAAiB;MAC9C,YAAY;MACZ,QAAQ;MACR,UAAA;MACY;KACb,CAAA;KAEH,GAAI;IACL,CAAA;IAGF;GACkB;KACF,CAAA;CAClB,CAAA;AAET,CAAC;AAED,cAAY,cAAc;AAC1B,cAAY,UAAUC;AACtB,cAAY,eAAe"}
+{"version":3,"file":"FunnelChart.mjs","names":["FunnelChart","RechartsFunnelChart","Tooltip","classes"],"sources":["../../src/FunnelChart/FunnelChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Funnel,\n  FunnelProps,\n  LabelList,\n  Legend,\n  LegendProps,\n  FunnelChart as RechartsFunnelChart,\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 classes from './FunnelChart.module.css';\n\nexport interface FunnelChartCell {\n  key?: string | number;\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type FunnelChartStylesNames = 'root' | ChartTooltipStylesNames | ChartLegendStylesNames;\nexport type FunnelChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface FunnelChartProps\n  extends BoxProps, StylesApiProps<FunnelChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: FunnelChartCell[];\n\n  /** Determines whether the tooltip should be displayed when a 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  funnelProps?: Partial<Omit<FunnelProps, '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 @default 'white' */\n  labelColor?: MantineColor;\n\n  /** Controls chart width and height @default 300 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Controls labels position relative to the segment @default 'right' */\n  labelsPosition?: 'right' | 'left' | 'inside';\n\n  /** A function to format values inside the tooltip and labels */\n  valueFormatter?: (value: number) => string;\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 `FunnelChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `FunnelChart` component */\n  funnelChartProps?: React.ComponentProps<typeof RechartsFunnelChart>;\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 FunnelChartFactory = Factory<{\n  props: FunnelChartProps;\n  ref: HTMLDivElement;\n  stylesNames: FunnelChartStylesNames;\n  vars: FunnelChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: true,\n  size: 300,\n  strokeWidth: 1,\n  withLabels: false,\n  labelsPosition: 'right',\n  tooltipDataSource: 'all',\n  accessibilityLayer: true,\n} satisfies Partial<FunnelChartProps>;\n\nconst varsResolver = createVarsResolver<FunnelChartFactory>(\n  (theme, { strokeColor, labelColor, size }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': rem(size),\n    },\n  })\n);\n\nexport const FunnelChart = factory<FunnelChartFactory>((_props) => {\n  const props = useProps('FunnelChart', 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    strokeWidth,\n    withLabels,\n    size,\n    valueFormatter,\n    children,\n    funnelChartProps,\n    funnelProps,\n    labelsPosition,\n    tooltipDataSource,\n    strokeColor,\n    labelColor,\n    attributes,\n    accessibilityLayer,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n\n  const getStyles = useStyles<FunnelChartFactory>({\n    name: 'FunnelChart',\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<FunnelChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <RechartsFunnelChart accessibilityLayer={accessibilityLayer} {...funnelChartProps}>\n          <Funnel\n            data={data.map((entry, index) => ({\n              ...entry,\n              __segmentIndex: index,\n              fill: getThemeColor(entry.color, theme),\n              fillOpacity: highlightedIndex !== null ? (highlightedIndex === index ? 1 : 0.2) : 1,\n            }))}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n            strokeWidth={strokeWidth}\n            {...funnelProps}\n          >\n            {withLabels && (\n              <LabelList\n                position={labelsPosition}\n                fill={\n                  labelsPosition === 'inside'\n                    ? 'var(--chart-labels-color, var(--mantine-color-white))'\n                    : 'var(--chart-labels-color, var(--mantine-color-dimmed))'\n                }\n                stroke=\"none\"\n                fontFamily=\"var(--mantine-font-family)\"\n                fontSize={12}\n                dataKey={(entry) => {\n                  return typeof valueFormatter === 'function'\n                    ? valueFormatter(entry.value as number)\n                    : entry.value;\n                }}\n              />\n            )}\n          </Funnel>\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={() => (\n                <ChartLegend\n                  payload={data.map((item, index) => ({\n                    value: item.name,\n                    color: getThemeColor(item.color, theme),\n                    dataKey: item.name,\n                    highlightKey: index,\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        </RechartsFunnelChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nFunnelChart.displayName = '@mantine/charts/FunnelChart';\nFunnelChart.classes = classes;\nFunnelChart.varsResolver = varsResolver;\n\nexport namespace FunnelChart {\n  export type Props = FunnelChartProps;\n  export type StylesNames = FunnelChartStylesNames;\n  export type Factory = FunnelChartFactory;\n  export type CssVariables = FunnelChartCssVariables;\n  export type Cell = FunnelChartCell;\n}\n"],"mappings":";;;;;;;;;AA4GA,MAAM,eAAe;CACnB,aAAa;CACb,MAAM;CACN,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,mBAAmB;CACnB,oBAAoB;AACtB;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,aAAa,YAAY,YAAY,EAC7C,MAAM;CACJ,wBAAwB,cAAc,cAAc,aAAa,KAAK,IAAI,KAAA;CAC1E,wBAAwB,aAAa,cAAc,YAAY,KAAK,IAAI,KAAA;CACxE,gBAAgB,IAAI,IAAI;AAC1B,EACF,EACF;AAEA,MAAaA,gBAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,aACA,YACA,aACA,0BACA,cACA,aACA,YACA,MACA,gBACA,UACA,kBACA,aACA,gBACA,mBACA,aACA,YACA,YACA,oBACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,IAAI;CAE5E,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,mBAAmB,qBAAyC;EACtF;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,KAAD;EAAW;EAAM,GAAI,UAAU,MAAM;EAAG,GAAI;EAC1C,UAAA,oBAAC,qBAAD,EAAA,UACE,qBAACC,aAAD;GAAyC;GAAoB,GAAI;GAAjE,UAAA;IACE,oBAAC,QAAD;KACE,MAAM,KAAK,KAAK,OAAO,WAAW;MAChC,GAAG;MACH,gBAAgB;MAChB,MAAM,cAAc,MAAM,OAAO,KAAK;MACtC,aAAa,qBAAqB,OAAQ,qBAAqB,QAAQ,IAAI,KAAO;KACpF,EAAE;KACF,SAAQ;KACR,mBAAmB;KACnB,QAAO;KACM;KACb,GAAI;KAEH,UAAA,cACC,oBAAC,WAAD;MACE,UAAU;MACV,MACE,mBAAmB,WACf,0DACA;MAEN,QAAO;MACP,YAAW;MACX,UAAU;MACV,UAAU,UAAU;OAClB,OAAO,OAAO,mBAAmB,aAC7B,eAAe,MAAM,KAAe,IACpC,MAAM;MACZ;KACD,CAAA;IAEG,CAAA;IAEP,eACC,oBAACC,WAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,UAAU,EAAE,cACV,oBAAC,cAAD;MACE,SAAS;MACT,YAAY;MACZ,QAAQ;MACR,MAAK;MACL,WACE,sBAAsB,YACjB,UAAU,EAAE,EAAE,SAAS,iBACxB,KAAA;MAEU;MACJ;KACb,CAAA;KAEH,GAAI;IACL,CAAA;IAGF,cACC,oBAAC,QAAD;KACE,eAAc;KACd,eACE,oBAAC,aAAD;MACE,SAAS,KAAK,KAAK,MAAM,WAAW;OAClC,OAAO,KAAK;OACZ,OAAO,cAAc,KAAK,OAAO,KAAK;OACtC,SAAS,KAAK;OACd,cAAc;MAChB,EAAE;MACF,cAAc,UACZ,oBAAoB,OAAO,UAAU,WAAW,QAAQ,IAAI;MAE9D,gBAAgB,aAAa,iBAAiB;MAC9C,YAAY;MACZ,QAAQ;MACR,UAAA;MACY;KACb,CAAA;KAEH,GAAI;IACL,CAAA;IAGF;GACkB;EACF,CAAA,EAAA,CAAA;CAClB,CAAA;AAET,CAAC;AAED,cAAY,cAAc;AAC1B,cAAY,UAAUC;AACtB,cAAY,eAAe"}

package/esm/GaugeChart/GaugeChart.mjs

@@ -0,0 +1,208 @@
+"use client";
+import GaugeChart_module_default from "./GaugeChart.module.mjs";
+import { Box, createVarsResolver, factory, getThemeColor, rem, useMantineTheme, useProps, useStyles } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/charts/src/GaugeChart/GaugeChart.tsx
+const defaultProps = {
+	min: 0,
+	max: 100,
+	thickness: 12,
+	size: 200,
+	startAngle: -120,
+	endAngle: 120,
+	roundCaps: false,
+	targetSize: 2
+};
+const varsResolver = createVarsResolver((_theme, { size }) => ({ root: { "--gauge-size": rem(size) } }));
+function polarToCartesian(cx, cy, r, angleDeg) {
+	const rad = (angleDeg - 90) * Math.PI / 180;
+	return {
+		x: cx + r * Math.cos(rad),
+		y: cy + r * Math.sin(rad)
+	};
+}
+function describeArc(cx, cy, r, startAngle, endAngle) {
+	const delta = endAngle - startAngle;
+	const sweep = delta >= 0 ? 1 : 0;
+	const start = polarToCartesian(cx, cy, r, startAngle);
+	if (Math.abs(delta) >= 360) {
+		const mid = polarToCartesian(cx, cy, r, startAngle + (delta >= 0 ? 180 : -180));
+		return `M ${start.x} ${start.y} A ${r} ${r} 0 0 ${sweep} ${mid.x} ${mid.y} A ${r} ${r} 0 0 ${sweep} ${start.x} ${start.y}`;
+	}
+	const end = polarToCartesian(cx, cy, r, endAngle);
+	const largeArc = Math.abs(delta) > 180 ? 1 : 0;
+	return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArc} ${sweep} ${end.x} ${end.y}`;
+}
+function valueToAngle(value, min, max, startAngle, endAngle) {
+	if (max === min) return startAngle;
+	return startAngle + (Math.max(min, Math.min(max, value)) - min) / (max - min) * (endAngle - startAngle);
+}
+function isAngleInArc(angle, start, end) {
+	const delta = end - start;
+	if (Math.abs(delta) >= 360) return true;
+	return ((delta >= 0 ? angle - start : start - angle) % 360 + 360) % 360 <= Math.abs(delta);
+}
+function getArcBoundingBox(cx, cy, r, startAngle, endAngle, padding, labelReserve) {
+	const startPt = polarToCartesian(cx, cy, r, startAngle);
+	const endPt = polarToCartesian(cx, cy, r, endAngle);
+	let minX = Math.min(startPt.x, endPt.x, cx - labelReserve);
+	let maxX = Math.max(startPt.x, endPt.x, cx + labelReserve);
+	let minY = Math.min(startPt.y, endPt.y, cy - labelReserve);
+	let maxY = Math.max(startPt.y, endPt.y, cy + labelReserve);
+	const cardinals = [
+		{
+			angle: 0,
+			x: cx,
+			y: cy - r
+		},
+		{
+			angle: 90,
+			x: cx + r,
+			y: cy
+		},
+		{
+			angle: 180,
+			x: cx,
+			y: cy + r
+		},
+		{
+			angle: 270,
+			x: cx - r,
+			y: cy
+		}
+	];
+	for (const cardinal of cardinals) if (isAngleInArc(cardinal.angle, startAngle, endAngle)) {
+		minX = Math.min(minX, cardinal.x);
+		maxX = Math.max(maxX, cardinal.x);
+		minY = Math.min(minY, cardinal.y);
+		maxY = Math.max(maxY, cardinal.y);
+	}
+	return {
+		x: minX - padding,
+		y: minY - padding,
+		width: maxX - minX + padding * 2,
+		height: maxY - minY + padding * 2
+	};
+}
+const GaugeChart = factory((_props) => {
+	const props = useProps("GaugeChart", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, attributes, value, min, max, target, sections, thickness, size, startAngle, endAngle, label, valueFormatter, trackColor, filledColor, targetColor, targetSize, roundCaps, variant, ...others } = props;
+	const theme = useMantineTheme();
+	const getStyles = useStyles({
+		name: "GaugeChart",
+		classes: GaugeChart_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	const svgSize = size;
+	const cx = svgSize / 2;
+	const cy = svgSize / 2;
+	const r = (svgSize - thickness) / 2;
+	const strokeLinecap = roundCaps ? "round" : "butt";
+	const needleLength = thickness * 1.5;
+	const needleExtent = needleLength / 2 + (roundCaps ? targetSize / 2 : 0);
+	const strokePadding = target != null ? Math.max(thickness / 2, needleExtent) : thickness / 2;
+	const span = endAngle - startAngle;
+	const resolvedEndAngle = startAngle + Math.max(-360, Math.min(360, span));
+	const bbox = getArcBoundingBox(cx, cy, r, startAngle, resolvedEndAngle, strokePadding, Math.max(thickness, svgSize * .11));
+	const resolvedTrackColor = trackColor ? getThemeColor(trackColor, theme) : "var(--mantine-color-default-border)";
+	const trackPath = describeArc(cx, cy, r, startAngle, resolvedEndAngle);
+	const sectionElements = sections && sections.length > 0 ? (() => {
+		const sortedSections = [...sections].sort((a, b) => a.value - b.value);
+		const direction = resolvedEndAngle >= startAngle ? 1 : -1;
+		let prevAngle = startAngle;
+		return sortedSections.map((section, index) => {
+			const sectionEndAngle = valueToAngle(section.value, min, max, startAngle, resolvedEndAngle);
+			if ((sectionEndAngle - prevAngle) * direction <= 0) return null;
+			const path = describeArc(cx, cy, r, prevAngle, sectionEndAngle);
+			const resolvedColor = getThemeColor(section.color, theme);
+			prevAngle = sectionEndAngle;
+			return /* @__PURE__ */ jsx("path", {
+				...getStyles("section"),
+				d: path,
+				fill: "none",
+				stroke: resolvedColor,
+				strokeWidth: thickness,
+				strokeLinecap: "butt"
+			}, index);
+		});
+	})() : /* @__PURE__ */ jsx("path", {
+		...getStyles("section"),
+		d: describeArc(cx, cy, r, startAngle, valueToAngle(value, min, max, startAngle, resolvedEndAngle)),
+		fill: "none",
+		stroke: filledColor ? getThemeColor(filledColor, theme) : "var(--mantine-primary-color-filled)",
+		strokeWidth: thickness,
+		strokeLinecap
+	});
+	const needleElement = target != null ? (() => {
+		const targetAngle = valueToAngle(target, min, max, startAngle, resolvedEndAngle);
+		const inner = polarToCartesian(cx, cy, r - needleLength / 2, targetAngle);
+		const outer = polarToCartesian(cx, cy, r + needleLength / 2, targetAngle);
+		const resolvedTargetColor = targetColor ? getThemeColor(targetColor, theme) : "var(--mantine-color-bright)";
+		return /* @__PURE__ */ jsx("line", {
+			...getStyles("needle"),
+			x1: inner.x,
+			y1: inner.y,
+			x2: outer.x,
+			y2: outer.y,
+			stroke: resolvedTargetColor,
+			strokeWidth: targetSize,
+			strokeLinecap
+		});
+	})() : null;
+	const formatValue = valueFormatter || ((v) => String(v));
+	const clampedValue = Math.max(min, Math.min(max, value));
+	const formattedValue = formatValue(clampedValue);
+	const labelContent = label !== void 0 ? label : formattedValue;
+	const ariaLabel = others["aria-labelledby"] !== void 0 ? void 0 : others["aria-label"] ?? (typeof label === "string" ? label : void 0) ?? "Gauge";
+	return /* @__PURE__ */ jsxs(Box, {
+		component: "svg",
+		viewBox: `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`,
+		__vars: { "--gauge-aspect-ratio": `${bbox.width} / ${bbox.height}` },
+		...getStyles("root"),
+		variant,
+		role: "meter",
+		"aria-label": ariaLabel,
+		"aria-valuenow": clampedValue,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuetext": formattedValue,
+		...others,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				...getStyles("track"),
+				d: trackPath,
+				fill: "none",
+				stroke: resolvedTrackColor,
+				strokeWidth: thickness,
+				strokeLinecap
+			}),
+			sectionElements,
+			needleElement,
+			/* @__PURE__ */ jsx("foreignObject", {
+				x: bbox.x,
+				y: bbox.y,
+				width: bbox.width,
+				height: bbox.height,
+				children: /* @__PURE__ */ jsx("div", {
+					...getStyles("label", { style: { transform: `translate(${cx - bbox.x - bbox.width / 2}px, ${cy - bbox.y - bbox.height / 2}px)` } }),
+					children: labelContent
+				})
+			})
+		]
+	});
+});
+GaugeChart.displayName = "@mantine/charts/GaugeChart";
+GaugeChart.classes = GaugeChart_module_default;
+GaugeChart.varsResolver = varsResolver;
+//#endregion
+export { GaugeChart };
+
+//# sourceMappingURL=GaugeChart.mjs.map

package/esm/GaugeChart/GaugeChart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.mjs","names":["classes"],"sources":["../../src/GaugeChart/GaugeChart.tsx"],"sourcesContent":["import {\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  useStyles,\n} from '@mantine/core';\nimport classes from './GaugeChart.module.css';\n\nexport interface GaugeChartSection {\n  /** Upper bound value for this section */\n  value: number;\n\n  /** Color of the section */\n  color: MantineColor;\n}\n\nexport type GaugeChartStylesNames = 'root' | 'track' | 'section' | 'needle' | 'label';\n\nexport type GaugeChartCssVariables = {\n  root: '--gauge-size';\n};\n\nexport interface GaugeChartProps\n  extends\n    BoxProps,\n    StylesApiProps<GaugeChartFactory>,\n    ElementProps<'svg', 'display' | 'opacity' | 'viewBox' | 'width' | 'height' | 'target'> {\n  /** Current value to display. Fills the arc from `min` up to `value`, unless `sections` is set – then the arc is colored by thresholds and the value is displayed only in the center label. */\n  value: number;\n\n  /** Minimum value of the gauge, @default 0 */\n  min?: number;\n\n  /** Maximum value of the gauge, @default 100 */\n  max?: number;\n\n  /** Value marked on the arc with a line marker, use to display a goal or the current value of a gauge with `sections` */\n  target?: number;\n\n  /** Threshold sections of the gauge arc, each section is filled from the previous section upper bound to its own `value`. If set, the arc is not filled based on `value`. */\n  sections?: GaugeChartSection[];\n\n  /** Arc thickness in px, @default 12 */\n  thickness?: number;\n\n  /** Chart size (width and height), @default 200 */\n  size?: number;\n\n  /** Start angle in degrees, @default -120 */\n  startAngle?: number;\n\n  /** End angle in degrees, @default 120 */\n  endAngle?: number;\n\n  /** Label displayed in the center of the gauge */\n  label?: React.ReactNode;\n\n  /** Value formatter for default label, @default (v) => String(v) */\n  valueFormatter?: (value: number) => string;\n\n  /** Color of the gauge track (unfilled portion) */\n  trackColor?: MantineColor;\n\n  /** Color of the filled arc when sections are not provided */\n  filledColor?: MantineColor;\n\n  /** Color of the target marker */\n  targetColor?: MantineColor;\n\n  /** Thickness of the target marker, @default 2 */\n  targetSize?: number;\n\n  /** Whether to round arc endpoints. Not applied to `sections` – rounded caps of adjacent sections would overlap each other. @default false */\n  roundCaps?: boolean;\n}\n\nexport type GaugeChartFactory = Factory<{\n  props: GaugeChartProps;\n  ref: SVGSVGElement;\n  stylesNames: GaugeChartStylesNames;\n  vars: GaugeChartCssVariables;\n}>;\n\nconst defaultProps = {\n  min: 0,\n  max: 100,\n  thickness: 12,\n  size: 200,\n  startAngle: -120,\n  endAngle: 120,\n  roundCaps: false,\n  targetSize: 2,\n} satisfies Partial<GaugeChartProps>;\n\nconst varsResolver = createVarsResolver<GaugeChartFactory>((_theme, { size }) => ({\n  root: {\n    '--gauge-size': rem(size),\n  },\n}));\n\nfunction polarToCartesian(cx: number, cy: number, r: number, angleDeg: number) {\n  const rad = ((angleDeg - 90) * Math.PI) / 180;\n  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };\n}\n\nfunction describeArc(cx: number, cy: number, r: number, startAngle: number, endAngle: number) {\n  const delta = endAngle - startAngle;\n  const sweep = delta >= 0 ? 1 : 0;\n  const start = polarToCartesian(cx, cy, r, startAngle);\n\n  // A single arc command cannot express a full circle – its endpoints would be identical\n  // and nothing would be rendered, so it is split into two half-circle arcs.\n  if (Math.abs(delta) >= 360) {\n    const mid = polarToCartesian(cx, cy, r, startAngle + (delta >= 0 ? 180 : -180));\n    return `M ${start.x} ${start.y} A ${r} ${r} 0 0 ${sweep} ${mid.x} ${mid.y} A ${r} ${r} 0 0 ${sweep} ${start.x} ${start.y}`;\n  }\n\n  const end = polarToCartesian(cx, cy, r, endAngle);\n  const largeArc = Math.abs(delta) > 180 ? 1 : 0;\n  return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArc} ${sweep} ${end.x} ${end.y}`;\n}\n\nfunction valueToAngle(\n  value: number,\n  min: number,\n  max: number,\n  startAngle: number,\n  endAngle: number\n) {\n  if (max === min) {\n    return startAngle;\n  }\n  const clamped = Math.max(min, Math.min(max, value));\n  return startAngle + ((clamped - min) / (max - min)) * (endAngle - startAngle);\n}\n\nfunction isAngleInArc(angle: number, start: number, end: number) {\n  const delta = end - start;\n\n  if (Math.abs(delta) >= 360) {\n    return true;\n  }\n\n  // Distance from the start angle measured along the direction the arc sweeps,\n  // so that descending ranges (endAngle < startAngle) are handled the same way.\n  const distance = delta >= 0 ? angle - start : start - angle;\n  return ((distance % 360) + 360) % 360 <= Math.abs(delta);\n}\n\nfunction getArcBoundingBox(\n  cx: number,\n  cy: number,\n  r: number,\n  startAngle: number,\n  endAngle: number,\n  padding: number,\n  labelReserve: number\n) {\n  const startPt = polarToCartesian(cx, cy, r, startAngle);\n  const endPt = polarToCartesian(cx, cy, r, endAngle);\n\n  let minX = Math.min(startPt.x, endPt.x, cx - labelReserve);\n  let maxX = Math.max(startPt.x, endPt.x, cx + labelReserve);\n  let minY = Math.min(startPt.y, endPt.y, cy - labelReserve);\n  let maxY = Math.max(startPt.y, endPt.y, cy + labelReserve);\n\n  const cardinals = [\n    { angle: 0, x: cx, y: cy - r },\n    { angle: 90, x: cx + r, y: cy },\n    { angle: 180, x: cx, y: cy + r },\n    { angle: 270, x: cx - r, y: cy },\n  ];\n\n  for (const cardinal of cardinals) {\n    if (isAngleInArc(cardinal.angle, startAngle, endAngle)) {\n      minX = Math.min(minX, cardinal.x);\n      maxX = Math.max(maxX, cardinal.x);\n      minY = Math.min(minY, cardinal.y);\n      maxY = Math.max(maxY, cardinal.y);\n    }\n  }\n\n  return {\n    x: minX - padding,\n    y: minY - padding,\n    width: maxX - minX + padding * 2,\n    height: maxY - minY + padding * 2,\n  };\n}\n\nexport const GaugeChart = factory<GaugeChartFactory>((_props) => {\n  const props = useProps('GaugeChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    value,\n    min,\n    max,\n    target,\n    sections,\n    thickness,\n    size,\n    startAngle,\n    endAngle,\n    label,\n    valueFormatter,\n    trackColor,\n    filledColor,\n    targetColor,\n    targetSize,\n    roundCaps,\n    variant,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<GaugeChartFactory>({\n    name: 'GaugeChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const svgSize = size!;\n  const cx = svgSize / 2;\n  const cy = svgSize / 2;\n  const r = (svgSize - thickness!) / 2;\n  const strokeLinecap = roundCaps ? 'round' : 'butt';\n  const needleLength = thickness! * 1.5;\n\n  // The needle sticks out past the arc radius, and a round cap adds half of its own\n  // width on top of that – both contribute at the same time. Only reserved when there is a\n  // target to draw, otherwise every gauge without one would get an oversized viewBox and\n  // render its arc smaller than the requested `size`.\n  const needleExtent = needleLength / 2 + (roundCaps ? targetSize! / 2 : 0);\n  const strokePadding = target != null ? Math.max(thickness! / 2, needleExtent) : thickness! / 2;\n\n  // A gauge cannot span more than a full turn – a larger range would wrap the arc onto\n  // itself and make later sections overwrite earlier ones.\n  const span = endAngle! - startAngle!;\n  const resolvedEndAngle = startAngle! + Math.max(-360, Math.min(360, span));\n\n  const labelReserve = Math.max(thickness!, svgSize * 0.11);\n  const bbox = getArcBoundingBox(\n    cx,\n    cy,\n    r,\n    startAngle!,\n    resolvedEndAngle,\n    strokePadding,\n    labelReserve\n  );\n\n  const resolvedTrackColor = trackColor\n    ? getThemeColor(trackColor, theme)\n    : 'var(--mantine-color-default-border)';\n\n  const trackPath = describeArc(cx, cy, r, startAngle!, resolvedEndAngle);\n\n  const sectionElements =\n    sections && sections.length > 0 ? (\n      (() => {\n        const sortedSections = [...sections].sort((a, b) => a.value - b.value);\n        const direction = resolvedEndAngle >= startAngle! ? 1 : -1;\n        let prevAngle = startAngle!;\n\n        return sortedSections.map((section, index) => {\n          const sectionEndAngle = valueToAngle(\n            section.value,\n            min!,\n            max!,\n            startAngle!,\n            resolvedEndAngle\n          );\n          if ((sectionEndAngle - prevAngle) * direction <= 0) {\n            return null;\n          }\n          const path = describeArc(cx, cy, r, prevAngle, sectionEndAngle);\n          const resolvedColor = getThemeColor(section.color, theme);\n          prevAngle = sectionEndAngle;\n\n          return (\n            <path\n              key={index}\n              {...getStyles('section')}\n              d={path}\n              fill=\"none\"\n              stroke={resolvedColor}\n              strokeWidth={thickness}\n              strokeLinecap=\"butt\"\n            />\n          );\n        });\n      })()\n    ) : (\n      <path\n        {...getStyles('section')}\n        d={describeArc(\n          cx,\n          cy,\n          r,\n          startAngle!,\n          valueToAngle(value, min!, max!, startAngle!, resolvedEndAngle)\n        )}\n        fill=\"none\"\n        stroke={\n          filledColor ? getThemeColor(filledColor, theme) : 'var(--mantine-primary-color-filled)'\n        }\n        strokeWidth={thickness}\n        strokeLinecap={strokeLinecap}\n      />\n    );\n\n  const needleElement =\n    target != null\n      ? (() => {\n          const targetAngle = valueToAngle(target, min!, max!, startAngle!, resolvedEndAngle);\n          const inner = polarToCartesian(cx, cy, r - needleLength / 2, targetAngle);\n          const outer = polarToCartesian(cx, cy, r + needleLength / 2, targetAngle);\n          const resolvedTargetColor = targetColor\n            ? getThemeColor(targetColor, theme)\n            : 'var(--mantine-color-bright)';\n\n          return (\n            <line\n              {...getStyles('needle')}\n              x1={inner.x}\n              y1={inner.y}\n              x2={outer.x}\n              y2={outer.y}\n              stroke={resolvedTargetColor}\n              strokeWidth={targetSize}\n              strokeLinecap={strokeLinecap}\n            />\n          );\n        })()\n      : null;\n\n  const formatValue = valueFormatter || ((v: number) => String(v));\n\n  // The arc is drawn from the clamped value, and `aria-valuetext` is defined as the\n  // human-readable equivalent of `aria-valuenow` – reporting the raw value in either the\n  // default label or `aria-valuetext` would contradict both the arc and `aria-valuenow`.\n  const clampedValue = Math.max(min!, Math.min(max!, value));\n  const formattedValue = formatValue(clampedValue);\n  const labelContent = label !== undefined ? label : formattedValue;\n\n  // A meter with no accessible name is announced as \"meter\" and nothing else, so there is\n  // always a name. A string `label` names the metric (\"CPU usage\") and is used unless an\n  // explicit `aria-label` is given; the generic fallback covers the rest. The default label\n  // is the formatted value, which would only repeat `aria-valuetext`.\n  const ariaLabel =\n    others['aria-labelledby'] !== undefined\n      ? undefined\n      : (others['aria-label'] ?? (typeof label === 'string' ? label : undefined) ?? 'Gauge');\n\n  return (\n    <Box\n      component=\"svg\"\n      viewBox={`${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`}\n      __vars={{ '--gauge-aspect-ratio': `${bbox.width} / ${bbox.height}` }}\n      {...getStyles('root')}\n      variant={variant}\n      role=\"meter\"\n      aria-label={ariaLabel}\n      aria-valuenow={clampedValue}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuetext={formattedValue}\n      {...others}\n    >\n      <path\n        {...getStyles('track')}\n        d={trackPath}\n        fill=\"none\"\n        stroke={resolvedTrackColor}\n        strokeWidth={thickness}\n        strokeLinecap={strokeLinecap}\n      />\n\n      {sectionElements}\n      {needleElement}\n\n      <foreignObject x={bbox.x} y={bbox.y} width={bbox.width} height={bbox.height}>\n        <div\n          {...getStyles('label', {\n            style: {\n              transform: `translate(${cx - bbox.x - bbox.width / 2}px, ${cy - bbox.y - bbox.height / 2}px)`,\n            },\n          })}\n        >\n          {labelContent}\n        </div>\n      </foreignObject>\n    </Box>\n  );\n});\n\nGaugeChart.displayName = '@mantine/charts/GaugeChart';\nGaugeChart.classes = classes;\nGaugeChart.varsResolver = varsResolver;\n"],"mappings":"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"}

package/esm/GaugeChart/GaugeChart.module.mjs

@@ -0,0 +1,10 @@
+"use client";
+//#region packages/@mantine/charts/src/GaugeChart/GaugeChart.module.css
+var GaugeChart_module_default = {
+	"root": "m_b7f9c72a",
+	"label": "m_46e401ac"
+};
+//#endregion
+export { GaugeChart_module_default as default };
+
+//# sourceMappingURL=GaugeChart.module.mjs.map

package/esm/GaugeChart/GaugeChart.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.module.mjs","names":[],"sources":["../../src/GaugeChart/GaugeChart.module.css"],"sourcesContent":[".root {\n  width: var(--gauge-size);\n  height: auto;\n  aspect-ratio: var(--gauge-aspect-ratio, 1);\n}\n\n.label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  font-size: var(--mantine-font-size-lg);\n  font-weight: var(--mantine-font-weight-bold);\n  color: var(--mantine-color-text);\n  line-height: 1;\n}\n"],"mappings":""}