@mantine/charts 9.0.0-alpha.7 → 9.0.1

package/esm/Heatmap/Heatmap.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heatmap.mjs","names":["classes"],"sources":["../../src/Heatmap/Heatmap.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  Tooltip,\n  TooltipFloatingProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { getBoundaries } from './get-boundaries/get-boundaries';\nimport { getColumns, getFirstMonthColumnIndex, HeatmapColumn } from './get-columns/get-columns';\nimport { getDatesRange } from './get-dates-range/get-dates-range';\nimport { getMonthsRange } from './get-months-range/get-months-range';\nimport { HeatmapSplitWeeks } from './HeatmapSplitWeeks';\nimport { HeatmapWeeks } from './HeatmapWeeks';\nimport { rotateWeekdaysNames } from './rotate-weekdays-names/rotate-weekdays-names';\nimport classes from './Heatmap.module.css';\n\nexport type HeatmapStylesNames = 'root' | 'rect' | 'weekdayLabel' | 'monthLabel';\n\ninterface HeatmapRectData {\n  date: string;\n  value: number | null;\n}\n\nexport interface HeatmapProps\n  extends\n    BoxProps,\n    StylesApiProps<HeatmapFactory>,\n    ElementProps<'svg', 'display' | 'opacity' | 'viewBox' | 'width' | 'height'> {\n  /** Heatmap data, key is date in `YYYY-MM-DD` format (interpreted as a UTC calendar day) */\n  data: Record<string, number>;\n\n  /** Heatmap domain, array of 2 numbers, min and max values, calculated from data by default */\n  domain?: [number, number];\n\n  /** Heatmap start date. Current date - 1 year by default. Date is normalized to UTC midnight of the intended calendar day. */\n  startDate?: Date | string;\n\n  /** Heatmap end date. Current date by default. Date is normalized to UTC midnight of the intended calendar day. */\n  endDate?: Date | string;\n\n  /** If set, month labels are displayed @default false */\n  withMonthLabels?: boolean;\n\n  /** Month labels, array of 12 elements, can be used for localization */\n  monthLabels?: string[];\n\n  /** If set, weekday labels are displayed @default false */\n  withWeekdayLabels?: boolean;\n\n  /** Weekday labels, array of 7 elements, can be used for localization */\n  weekdayLabels?: string[];\n\n  /** If set, trailing dates that do not fall into the given `startDate` – `endDate` range are displayed to fill empty space. @default true */\n  withOutsideDates?: boolean;\n\n  /** First day of week, 0 – Sunday, 1 – Monday. @default 1 – Monday */\n  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n  /** Size of day rect in px @default 10 */\n  rectSize?: number;\n\n  /** Gap between rects in px @default 1 */\n  gap?: number;\n\n  /** Rect radius in px @default 2 */\n  rectRadius?: number;\n\n  /** Colors array, used to calculate color for each value, by default 4 shades of green colors are used */\n  colors?: string[];\n\n  /** Width of weekday labels column @default 30 */\n  weekdaysLabelsWidth?: number;\n\n  /** Height of month labels row @default 30 */\n  monthsLabelsHeight?: number;\n\n  /** Font size of month and weekday labels @default 12 */\n  fontSize?: number;\n\n  /** A function to generate tooltip label based on the hovered rect date and value, required for the tooltip to be visible */\n  getTooltipLabel?: (input: HeatmapRectData) => React.ReactNode;\n\n  /** If set, tooltip is displayed on rect hover @default false */\n  withTooltip?: boolean;\n\n  /** Props passed down to the `Tooltip.Floating` component */\n  tooltipProps?: Partial<TooltipFloatingProps>;\n\n  /** Props passed down to each rect depending on its date and associated value */\n  getRectProps?: (input: HeatmapRectData) => React.ComponentProps<'rect'>;\n\n  /** If set, inserts a spacer column between months @default false */\n  splitMonths?: boolean;\n}\n\nexport type HeatmapFactory = Factory<{\n  props: HeatmapProps;\n  ref: SVGSVGElement;\n  stylesNames: HeatmapStylesNames;\n}>;\n\nconst defaultProps = {\n  monthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n  weekdayLabels: ['Sun', 'Mon', '', 'Wed', '', 'Fri', ''],\n  withOutsideDates: true,\n  firstDayOfWeek: 1,\n  rectSize: 10,\n  weekdaysLabelsWidth: 30,\n  monthsLabelsHeight: 14,\n  gap: 1,\n  rectRadius: 2,\n  fontSize: 12,\n  colors: [\n    'var(--heatmap-level-1)',\n    'var(--heatmap-level-2)',\n    'var(--heatmap-level-3)',\n    'var(--heatmap-level-4)',\n  ],\n} satisfies Partial<HeatmapProps>;\n\nexport const Heatmap = factory<HeatmapFactory>((_props) => {\n  const props = useProps('Heatmap', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    startDate,\n    endDate,\n    withMonthLabels,\n    withWeekdayLabels,\n    weekdayLabels,\n    withOutsideDates,\n    monthLabels,\n    firstDayOfWeek,\n    rectSize = 10,\n    gap = 1,\n    rectRadius,\n    domain,\n    colors,\n    weekdaysLabelsWidth,\n    monthsLabelsHeight,\n    fontSize,\n    getTooltipLabel,\n    withTooltip,\n    tooltipProps,\n    getRectProps,\n    splitMonths,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<HeatmapFactory>({\n    name: 'Heatmap',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  const [hoveredRect, setHoveredRect] = useState<HeatmapRectData | null>(null);\n  const rectSizeWithGap = rectSize + gap;\n  const weekdaysOffset = withWeekdayLabels ? weekdaysLabelsWidth : 0;\n  const monthsOffset = withMonthLabels ? monthsLabelsHeight : 0;\n  const [min, max] = getBoundaries({ data, domain });\n  const rotatedWeekdayLabels = useMemo(\n    () => rotateWeekdaysNames(weekdayLabels, firstDayOfWeek),\n    [weekdayLabels, firstDayOfWeek]\n  );\n\n  const datesRange = getDatesRange({\n    startDate,\n    endDate,\n    withOutsideDates,\n    firstDayOfWeek,\n  });\n\n  // Calculate months range for labels and optional split between months\n  const monthsRange = withMonthLabels || splitMonths ? getMonthsRange(datesRange) : [];\n\n  // Shared props for weeks rendering components\n  const weeksProps = {\n    data,\n    datesRange,\n    rectSize,\n    gap,\n    rectRadius,\n    min,\n    max,\n    colors,\n    withTooltip,\n    setHoveredRect,\n    getRectProps,\n    getStyles,\n  };\n\n  // Use different rendering logic based on splitMonths\n  const weeks = splitMonths ? (\n    <HeatmapSplitWeeks {...weeksProps} />\n  ) : (\n    <HeatmapWeeks {...weeksProps} />\n  );\n\n  // Calculate total columns based on whether splitMonths is enabled\n  const totalColumns = splitMonths ? getColumns(datesRange, splitMonths).length : datesRange.length;\n\n  const computeMonthLabelX = (monthPosition: number, monthIndex: number) => {\n    if (!splitMonths) {\n      return monthPosition * rectSizeWithGap + gap + weekdaysOffset;\n    }\n\n    // For split months, find the first column index that has this month and shift label by 1 column\n    const firstMonth = monthsRange[monthIndex];\n    const columns: HeatmapColumn[] = getColumns(datesRange, splitMonths);\n    const i = getFirstMonthColumnIndex(columns, firstMonth.month);\n    const base = i >= 0 ? i : monthPosition;\n    // shift right by one column\n    return (base + 1) * rectSizeWithGap + gap + weekdaysOffset;\n  };\n\n  const monthsLabelsNodes =\n    withMonthLabels && monthLabels\n      ? monthsRange.map((month, monthIndex) => {\n          // For non-split months, use original logic with minimum size of 3\n          // For split months, use minimum size of 2\n          const minSize = splitMonths ? 2 : 3;\n          if (month.size < minSize) {\n            return null;\n          }\n\n          const monthLabel = monthLabels[month.month];\n\n          return (\n            <text\n              key={monthIndex}\n              x={computeMonthLabelX(month.position, monthIndex)}\n              y={monthsLabelsHeight - 4}\n              width={month.size * rectSizeWithGap}\n              fontSize={fontSize}\n              {...getStyles('monthLabel')}\n            >\n              {monthLabel}\n            </text>\n          );\n        })\n      : null;\n\n  const weekdayLabelsNodes =\n    withWeekdayLabels && weekdayLabels\n      ? rotatedWeekdayLabels.map((weekdayLabel, dayIndex) => (\n          <text\n            key={dayIndex}\n            x={0}\n            y={(dayIndex + 1) * rectSizeWithGap - gap + monthsOffset}\n            width={weekdaysLabelsWidth}\n            fontSize={fontSize}\n            {...getStyles('weekdayLabel')}\n          >\n            {weekdayLabel}\n          </text>\n        ))\n      : null;\n\n  const label = getTooltipLabel && hoveredRect && withTooltip ? getTooltipLabel(hoveredRect) : null;\n\n  return (\n    <Box\n      component=\"svg\"\n      width={rectSizeWithGap * totalColumns + gap + weekdaysOffset}\n      height={rectSizeWithGap * 7 + gap + monthsOffset}\n      {...getStyles('root')}\n      {...others}\n    >\n      <Tooltip.Floating\n        label={label}\n        disabled={!withTooltip || !label}\n        position=\"top\"\n        {...tooltipProps}\n      >\n        <g transform={`translate(${weekdaysOffset}, ${monthsOffset})`} data-id=\"all-weeks\">\n          {/* Required for tooltip to remain visible while gaps between rects are hovered */}\n          {withTooltip && (\n            <rect\n              fill=\"transparent\"\n              width={rectSizeWithGap * totalColumns + gap}\n              height={rectSizeWithGap * 7 + gap}\n            />\n          )}\n          {weeks}\n        </g>\n      </Tooltip.Floating>\n      {weekdayLabelsNodes}\n      {monthsLabelsNodes}\n    </Box>\n  );\n});\n\nHeatmap.displayName = '@mantine/charts/Heatmap';\nHeatmap.classes = classes;\n"],"mappings":"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"}
+{"version":3,"file":"Heatmap.mjs","names":["classes"],"sources":["../../src/Heatmap/Heatmap.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  Tooltip,\n  TooltipFloatingProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { getBoundaries } from './get-boundaries/get-boundaries';\nimport { getColumns, getFirstMonthColumnIndex, HeatmapColumn } from './get-columns/get-columns';\nimport { getDatesRange } from './get-dates-range/get-dates-range';\nimport { getMonthsRange } from './get-months-range/get-months-range';\nimport { HeatmapSplitWeeks } from './HeatmapSplitWeeks';\nimport { HeatmapWeeks } from './HeatmapWeeks';\nimport { rotateWeekdaysNames } from './rotate-weekdays-names/rotate-weekdays-names';\nimport classes from './Heatmap.module.css';\n\nexport type HeatmapStylesNames = 'root' | 'rect' | 'weekdayLabel' | 'monthLabel';\n\ninterface HeatmapRectData {\n  date: string;\n  value: number | null;\n}\n\nexport interface HeatmapProps\n  extends\n    BoxProps,\n    StylesApiProps<HeatmapFactory>,\n    ElementProps<'svg', 'display' | 'opacity' | 'viewBox' | 'width' | 'height'> {\n  /** Heatmap data, key is date in `YYYY-MM-DD` format (interpreted as a UTC calendar day) */\n  data: Record<string, number>;\n\n  /** Heatmap domain, array of 2 numbers, min and max values, calculated from data by default */\n  domain?: [number, number];\n\n  /** Heatmap start date. Current date - 1 year by default. Date is normalized to UTC midnight of the intended calendar day. */\n  startDate?: Date | string;\n\n  /** Heatmap end date. Current date by default. Date is normalized to UTC midnight of the intended calendar day. */\n  endDate?: Date | string;\n\n  /** If set, month labels are displayed @default false */\n  withMonthLabels?: boolean;\n\n  /** Month labels, array of 12 elements, can be used for localization */\n  monthLabels?: string[];\n\n  /** If set, weekday labels are displayed @default false */\n  withWeekdayLabels?: boolean;\n\n  /** Weekday labels, array of 7 elements, can be used for localization */\n  weekdayLabels?: string[];\n\n  /** If set, trailing dates that do not fall into the given `startDate` – `endDate` range are displayed to fill empty space. @default true */\n  withOutsideDates?: boolean;\n\n  /** First day of week, 0 – Sunday, 1 – Monday. @default 1 – Monday */\n  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n  /** Size of day rect in px @default 10 */\n  rectSize?: number;\n\n  /** Gap between rects in px @default 1 */\n  gap?: number;\n\n  /** Rect radius in px @default 2 */\n  rectRadius?: number;\n\n  /** Colors array, used to calculate color for each value, by default 4 shades of green colors are used */\n  colors?: string[];\n\n  /** Width of weekday labels column @default 30 */\n  weekdaysLabelsWidth?: number;\n\n  /** Height of month labels row @default 30 */\n  monthsLabelsHeight?: number;\n\n  /** Font size of month and weekday labels @default 12 */\n  fontSize?: number;\n\n  /** A function to generate tooltip label based on the hovered rect date and value, required for the tooltip to be visible */\n  getTooltipLabel?: (input: HeatmapRectData) => React.ReactNode;\n\n  /** If set, tooltip is displayed on rect hover @default false */\n  withTooltip?: boolean;\n\n  /** Props passed down to the `Tooltip.Floating` component */\n  tooltipProps?: Partial<TooltipFloatingProps>;\n\n  /** Props passed down to each rect depending on its date and associated value */\n  getRectProps?: (input: HeatmapRectData) => React.ComponentProps<'rect'>;\n\n  /** If set, inserts a spacer column between months @default false */\n  splitMonths?: boolean;\n}\n\nexport type HeatmapFactory = Factory<{\n  props: HeatmapProps;\n  ref: SVGSVGElement;\n  stylesNames: HeatmapStylesNames;\n}>;\n\nconst defaultProps = {\n  monthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n  weekdayLabels: ['Sun', 'Mon', '', 'Wed', '', 'Fri', ''],\n  withOutsideDates: true,\n  firstDayOfWeek: 1,\n  rectSize: 10,\n  weekdaysLabelsWidth: 30,\n  monthsLabelsHeight: 14,\n  gap: 1,\n  rectRadius: 2,\n  fontSize: 12,\n  colors: [\n    'var(--heatmap-level-1)',\n    'var(--heatmap-level-2)',\n    'var(--heatmap-level-3)',\n    'var(--heatmap-level-4)',\n  ],\n} satisfies Partial<HeatmapProps>;\n\nexport const Heatmap = factory<HeatmapFactory>((_props) => {\n  const props = useProps('Heatmap', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    startDate,\n    endDate,\n    withMonthLabels,\n    withWeekdayLabels,\n    weekdayLabels,\n    withOutsideDates,\n    monthLabels,\n    firstDayOfWeek,\n    rectSize = 10,\n    gap = 1,\n    rectRadius,\n    domain,\n    colors,\n    weekdaysLabelsWidth,\n    monthsLabelsHeight,\n    fontSize,\n    getTooltipLabel,\n    withTooltip,\n    tooltipProps,\n    getRectProps,\n    splitMonths,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<HeatmapFactory>({\n    name: 'Heatmap',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  const [hoveredRect, setHoveredRect] = useState<HeatmapRectData | null>(null);\n  const rectSizeWithGap = rectSize + gap;\n  const weekdaysOffset = withWeekdayLabels ? weekdaysLabelsWidth : 0;\n  const monthsOffset = withMonthLabels ? monthsLabelsHeight : 0;\n  const [min, max] = getBoundaries({ data, domain });\n  const rotatedWeekdayLabels = useMemo(\n    () => rotateWeekdaysNames(weekdayLabels, firstDayOfWeek),\n    [weekdayLabels, firstDayOfWeek]\n  );\n\n  const datesRange = getDatesRange({\n    startDate,\n    endDate,\n    withOutsideDates,\n    firstDayOfWeek,\n  });\n\n  // Calculate months range for labels and optional split between months\n  const monthsRange = withMonthLabels || splitMonths ? getMonthsRange(datesRange) : [];\n\n  // Shared props for weeks rendering components\n  const weeksProps = {\n    data,\n    datesRange,\n    rectSize,\n    gap,\n    rectRadius,\n    min,\n    max,\n    colors,\n    withTooltip,\n    setHoveredRect,\n    getRectProps,\n    getStyles,\n  };\n\n  // Use different rendering logic based on splitMonths\n  const weeks = splitMonths ? (\n    <HeatmapSplitWeeks {...weeksProps} />\n  ) : (\n    <HeatmapWeeks {...weeksProps} />\n  );\n\n  // Calculate total columns based on whether splitMonths is enabled\n  const totalColumns = splitMonths ? getColumns(datesRange, splitMonths).length : datesRange.length;\n\n  const computeMonthLabelX = (monthPosition: number, monthIndex: number) => {\n    if (!splitMonths) {\n      return monthPosition * rectSizeWithGap + gap + weekdaysOffset;\n    }\n\n    // For split months, find the first column index that has this month and shift label by 1 column\n    const firstMonth = monthsRange[monthIndex];\n    const columns: HeatmapColumn[] = getColumns(datesRange, splitMonths);\n    const i = getFirstMonthColumnIndex(columns, firstMonth.month);\n    const base = i >= 0 ? i : monthPosition;\n    // shift right by one column\n    return (base + 1) * rectSizeWithGap + gap + weekdaysOffset;\n  };\n\n  const monthsLabelsNodes =\n    withMonthLabels && monthLabels\n      ? monthsRange.map((month, monthIndex) => {\n          // For non-split months, use original logic with minimum size of 3\n          // For split months, use minimum size of 2\n          const minSize = splitMonths ? 2 : 3;\n          if (month.size < minSize) {\n            return null;\n          }\n\n          const monthLabel = monthLabels[month.month];\n\n          return (\n            <text\n              key={monthIndex}\n              x={computeMonthLabelX(month.position, monthIndex)}\n              y={monthsLabelsHeight - 4}\n              width={month.size * rectSizeWithGap}\n              fontSize={fontSize}\n              {...getStyles('monthLabel')}\n            >\n              {monthLabel}\n            </text>\n          );\n        })\n      : null;\n\n  const weekdayLabelsNodes =\n    withWeekdayLabels && weekdayLabels\n      ? rotatedWeekdayLabels.map((weekdayLabel, dayIndex) => (\n          <text\n            key={dayIndex}\n            x={0}\n            y={(dayIndex + 1) * rectSizeWithGap - gap + monthsOffset}\n            width={weekdaysLabelsWidth}\n            fontSize={fontSize}\n            {...getStyles('weekdayLabel')}\n          >\n            {weekdayLabel}\n          </text>\n        ))\n      : null;\n\n  const label = getTooltipLabel && hoveredRect && withTooltip ? getTooltipLabel(hoveredRect) : null;\n\n  return (\n    <Box\n      component=\"svg\"\n      width={rectSizeWithGap * totalColumns + gap + weekdaysOffset}\n      height={rectSizeWithGap * 7 + gap + monthsOffset}\n      {...getStyles('root')}\n      {...others}\n    >\n      <Tooltip.Floating\n        label={label}\n        disabled={!withTooltip || !label}\n        position=\"top\"\n        {...tooltipProps}\n      >\n        <g transform={`translate(${weekdaysOffset}, ${monthsOffset})`} data-id=\"all-weeks\">\n          {/* Required for tooltip to remain visible while gaps between rects are hovered */}\n          {withTooltip && (\n            <rect\n              fill=\"transparent\"\n              width={rectSizeWithGap * totalColumns + gap}\n              height={rectSizeWithGap * 7 + gap}\n            />\n          )}\n          {weeks}\n        </g>\n      </Tooltip.Floating>\n      {weekdayLabelsNodes}\n      {monthsLabelsNodes}\n    </Box>\n  );\n});\n\nHeatmap.displayName = '@mantine/charts/Heatmap';\nHeatmap.classes = classes;\n\nexport namespace Heatmap {\n  export type Props = HeatmapProps;\n  export type StylesNames = HeatmapStylesNames;\n  export type Factory = HeatmapFactory;\n}\n"],"mappings":"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"}

package/esm/LineChart/LineChart.mjs

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

package/esm/LineChart/LineChart.mjs.map

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

package/esm/PieChart/PieChart.mjs.map

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

package/esm/RadarChart/RadarChart.mjs.map

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

package/esm/RadialBarChart/RadialBarChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadialBarChart.mjs","names":["RadialBarChart","ReChartsRadialBarChart","Tooltip","classes"],"sources":["../../src/RadialBarChart/RadialBarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  RadialBar,\n  RadialBarProps,\n  RadialBarChart as ReChartsRadialBarChart,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  ColorSwatch,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  Group,\n  Paper,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport classes from './RadialBarChart.module.css';\n\nexport type RadialBarChartStylesNames = 'root' | 'tooltip' | ChartLegendStylesNames;\nexport type RadialBarChartCssVariables = {\n  root: '--chart-empty-background';\n};\n\nexport interface RadialBarChartProps\n  extends BoxProps, StylesApiProps<RadialBarChartFactory>, ElementProps<'div'> {\n  /** Chart data */\n  data: Record<string, any>[];\n\n  /** Key from data object to use as data key */\n  dataKey: string;\n\n  /** Size of bars in px, `20` by default */\n  barSize?: number;\n\n  /** Determines whether empty bars area should be visible @default true */\n  withBackground?: boolean;\n\n  /** Determines whether labels should be displayed @default false */\n  withLabels?: boolean;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Determines whether the tooltip should be displayed when one of the bars is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Color of the empty background, by default depends on the color scheme */\n  emptyBackgroundColor?: string;\n\n  /** Angle at which chart starts @default 90 */\n  startAngle?: number;\n\n  /** Angle at which chart ends @default -270 */\n  endAngle?: number;\n\n  /** Props passed down to recharts RadialBar component */\n  radialBarProps?: Omit<RadialBarProps, 'ref'>;\n\n  /** Props passed down to recharts RadarChartChart component */\n  radialBarChartProps?: React.ComponentProps<typeof ReChartsRadialBarChart>;\n\n  /** Props passed down to recharts Legend component */\n  legendProps?: Omit<LegendProps, 'ref'>;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n}\n\nexport type RadialBarChartFactory = Factory<{\n  props: RadialBarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: RadialBarChartStylesNames;\n  vars: RadialBarChartCssVariables;\n}>;\n\nconst defaultProps = {\n  barSize: 20,\n  startAngle: 90,\n  endAngle: -270,\n  withBackground: true,\n  withTooltip: true,\n} satisfies Partial<RadialBarChartProps>;\n\nconst varsResolver = createVarsResolver<RadialBarChartFactory>(\n  (theme, { emptyBackgroundColor }) => ({\n    root: {\n      '--chart-empty-background': emptyBackgroundColor\n        ? getThemeColor(emptyBackgroundColor, theme)\n        : undefined,\n    },\n  })\n);\n\nexport const RadialBarChart = factory<RadialBarChartFactory>((_props) => {\n  const props = useProps('RadialBarChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    barSize,\n    withBackground,\n    dataKey,\n    radialBarProps,\n    radialBarChartProps,\n    withLabels,\n    withLegend,\n    legendProps,\n    withTooltip,\n    tooltipProps,\n    startAngle,\n    endAngle,\n    attributes,\n    ...others\n  } = props;\n  const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n\n  const getStyles = useStyles<RadialBarChartFactory>({\n    name: 'RadialBarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const theme = useMantineTheme();\n  const dataWithResolvedColor = data.map(({ color, ...item }) => {\n    const resolvedColor = getThemeColor(color, theme);\n\n    return {\n      ...item,\n      fill: resolvedColor,\n      fillOpacity: highlightedArea\n        ? highlightedArea === item.name\n          ? item.opacity || 1\n          : 0.05\n        : item.opacity || 1,\n    };\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<RadialBarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsRadialBarChart\n          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\n          innerRadius=\"10%\"\n          outerRadius=\"100%\"\n          cx=\"50%\"\n          cy=\"50%\"\n          barSize={barSize}\n          startAngle={startAngle}\n          endAngle={endAngle}\n          data={dataWithResolvedColor}\n          {...radialBarChartProps}\n        >\n          <RadialBar\n            label={\n              withLabels\n                ? {\n                    position: 'insideStart',\n                    fill: 'var(--mantine-color-white)',\n                    fontSize: 12,\n                  }\n                : undefined\n            }\n            background={withBackground ? { fill: 'var(--chart-empty-background)' } : undefined}\n            dataKey={dataKey}\n            isAnimationActive={false}\n            {...radialBarProps}\n          />\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item) => ({\n                    ...item,\n                    dataKey: (item.payload as any)?.name,\n                  }))}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={0}\n              isAnimationActive={false}\n              cursor={{ stroke: 'var(--chart-cursor-color)' }}\n              content={({ payload }) => (\n                <Paper {...getStyles('tooltip')}>\n                  <Group gap=\"sm\">\n                    <ColorSwatch color={payload?.[0]?.payload.fill} size={12} withShadow={false} />\n                    <span>{payload?.[0]?.payload.name}</span>\n                  </Group>\n\n                  <span>{payload?.[0]?.payload[dataKey]}</span>\n                </Paper>\n              )}\n              {...tooltipProps}\n            />\n          )}\n        </ReChartsRadialBarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nRadialBarChart.displayName = '@mantine/core/RadialBarChart';\nRadialBarChart.classes = classes;\nRadialBarChart.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;AAwFA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,UAAU;CACV,gBAAgB;CAChB,aAAa;CACd;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,4BAA4B,EACpC,MAAM,EACJ,4BAA4B,uBACxB,cAAc,sBAAsB,MAAM,GAC1C,KAAA,GACL,EACF,EACF;AAED,MAAaA,mBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,OAAO;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,SACA,gBACA,SACA,gBACA,qBACA,YACA,YACA,aACA,aACA,cACA,YACA,UACA,YACA,GAAG,WACD;CACJ,MAAM,CAAC,iBAAiB,sBAAsB,SAAwB,KAAK;CAE3E,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,wBAAwB,KAAK,KAAK,EAAE,OAAO,GAAG,WAAW;EAC7D,MAAM,gBAAgB,cAAc,OAAO,MAAM;AAEjD,SAAO;GACL,GAAG;GACH,MAAM;GACN,aAAa,kBACT,oBAAoB,KAAK,OACvB,KAAK,WAAW,IAChB,MACF,KAAK,WAAW;GACrB;GACD;CAEF,MAAM,EAAE,oBAAoB,mBAAmB,qBAA4C;EACzF;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,GAAI;YAC9B,oBAAC,qBAAD,EAAA,UACE,qBAACC,gBAAD;GACE,QAAQ;IAAE,KAAK;IAAG,QAAQ;IAAG,MAAM;IAAG,OAAO;IAAG;GAChD,aAAY;GACZ,aAAY;GACZ,IAAG;GACH,IAAG;GACM;GACG;GACF;GACV,MAAM;GACN,GAAI;aAVN;IAYE,oBAAC,WAAD;KACE,OACE,aACI;MACE,UAAU;MACV,MAAM;MACN,UAAU;MACX,GACD,KAAA;KAEN,YAAY,iBAAiB,EAAE,MAAM,iCAAiC,GAAG,KAAA;KAChE;KACT,mBAAmB;KACnB,GAAI;KACJ,CAAA;IAED,cACC,oBAAC,QAAD;KACE,eAAc;KACd,UAAU,YACR,oBAAC,aAAD;MACE,SAAS,QAAQ,SAAS,KAAK,UAAU;OACvC,GAAG;OACH,SAAU,KAAK,SAAiB;OACjC,EAAE;MACH,aAAa;MACb,gBAAgB,aAAa,iBAAiB;MAC9C,YAAY;MACZ,QAAQ;MACR,UAAA;MACY;MACZ,CAAA;KAEJ,GAAI;KACJ,CAAA;IAGH,eACC,oBAACC,WAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,QAAQ,EAAE,QAAQ,6BAA6B;KAC/C,UAAU,EAAE,cACV,qBAAC,OAAD;MAAO,GAAI,UAAU,UAAU;gBAA/B,CACE,qBAAC,OAAD;OAAO,KAAI;iBAAX,CACE,oBAAC,aAAD;QAAa,OAAO,UAAU,IAAI,QAAQ;QAAM,MAAM;QAAI,YAAY;QAAS,CAAA,EAC/E,oBAAC,QAAD,EAAA,UAAO,UAAU,IAAI,QAAQ,MAAY,CAAA,CACnC;UAER,oBAAC,QAAD,EAAA,UAAO,UAAU,IAAI,QAAQ,UAAgB,CAAA,CACvC;;KAEV,GAAI;KACJ,CAAA;IAEmB;MACL,CAAA;EAClB,CAAA;EAER;AAEF,iBAAe,cAAc;AAC7B,iBAAe,UAAUC;AACzB,iBAAe,eAAe"}
+{"version":3,"file":"RadialBarChart.mjs","names":["RadialBarChart","ReChartsRadialBarChart","Tooltip","classes"],"sources":["../../src/RadialBarChart/RadialBarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  RadialBar,\n  RadialBarProps,\n  RadialBarChart as ReChartsRadialBarChart,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  ColorSwatch,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  Group,\n  Paper,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport classes from './RadialBarChart.module.css';\n\nexport type RadialBarChartStylesNames = 'root' | 'tooltip' | ChartLegendStylesNames;\nexport type RadialBarChartCssVariables = {\n  root: '--chart-empty-background';\n};\n\nexport interface RadialBarChartProps\n  extends BoxProps, StylesApiProps<RadialBarChartFactory>, ElementProps<'div'> {\n  /** Chart data */\n  data: Record<string, any>[];\n\n  /** Key from data object to use as data key */\n  dataKey: string;\n\n  /** Size of bars in px, `20` by default */\n  barSize?: number;\n\n  /** Determines whether empty bars area should be visible @default true */\n  withBackground?: boolean;\n\n  /** Determines whether labels should be displayed @default false */\n  withLabels?: boolean;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Determines whether the tooltip should be displayed when one of the bars is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Color of the empty background, by default depends on the color scheme */\n  emptyBackgroundColor?: string;\n\n  /** Angle at which chart starts @default 90 */\n  startAngle?: number;\n\n  /** Angle at which chart ends @default -270 */\n  endAngle?: number;\n\n  /** Props passed down to recharts RadialBar component */\n  radialBarProps?: Omit<RadialBarProps, 'ref'>;\n\n  /** Props passed down to recharts RadarChartChart component */\n  radialBarChartProps?: React.ComponentProps<typeof ReChartsRadialBarChart>;\n\n  /** Props passed down to recharts Legend component */\n  legendProps?: Omit<LegendProps, 'ref'>;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n}\n\nexport type RadialBarChartFactory = Factory<{\n  props: RadialBarChartProps;\n  ref: HTMLDivElement;\n  stylesNames: RadialBarChartStylesNames;\n  vars: RadialBarChartCssVariables;\n}>;\n\nconst defaultProps = {\n  barSize: 20,\n  startAngle: 90,\n  endAngle: -270,\n  withBackground: true,\n  withTooltip: true,\n} satisfies Partial<RadialBarChartProps>;\n\nconst varsResolver = createVarsResolver<RadialBarChartFactory>(\n  (theme, { emptyBackgroundColor }) => ({\n    root: {\n      '--chart-empty-background': emptyBackgroundColor\n        ? getThemeColor(emptyBackgroundColor, theme)\n        : undefined,\n    },\n  })\n);\n\nexport const RadialBarChart = factory<RadialBarChartFactory>((_props) => {\n  const props = useProps('RadialBarChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    barSize,\n    withBackground,\n    dataKey,\n    radialBarProps,\n    radialBarChartProps,\n    withLabels,\n    withLegend,\n    legendProps,\n    withTooltip,\n    tooltipProps,\n    startAngle,\n    endAngle,\n    attributes,\n    ...others\n  } = props;\n  const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n\n  const getStyles = useStyles<RadialBarChartFactory>({\n    name: 'RadialBarChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const theme = useMantineTheme();\n  const dataWithResolvedColor = data.map(({ color, ...item }) => {\n    const resolvedColor = getThemeColor(color, theme);\n\n    return {\n      ...item,\n      fill: resolvedColor,\n      fillOpacity: highlightedArea\n        ? highlightedArea === item.name\n          ? item.opacity || 1\n          : 0.05\n        : item.opacity || 1,\n    };\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<RadialBarChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsRadialBarChart\n          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\n          innerRadius=\"10%\"\n          outerRadius=\"100%\"\n          cx=\"50%\"\n          cy=\"50%\"\n          barSize={barSize}\n          startAngle={startAngle}\n          endAngle={endAngle}\n          data={dataWithResolvedColor}\n          {...radialBarChartProps}\n        >\n          <RadialBar\n            label={\n              withLabels\n                ? {\n                    position: 'insideStart',\n                    fill: 'var(--mantine-color-white)',\n                    fontSize: 12,\n                  }\n                : undefined\n            }\n            background={withBackground ? { fill: 'var(--chart-empty-background)' } : undefined}\n            dataKey={dataKey}\n            isAnimationActive={false}\n            {...radialBarProps}\n          />\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item) => ({\n                    ...item,\n                    dataKey: (item.payload as any)?.name,\n                  }))}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={0}\n              isAnimationActive={false}\n              cursor={{ stroke: 'var(--chart-cursor-color)' }}\n              content={({ payload }) => (\n                <Paper {...getStyles('tooltip')}>\n                  <Group gap=\"sm\">\n                    <ColorSwatch color={payload?.[0]?.payload.fill} size={12} withShadow={false} />\n                    <span>{payload?.[0]?.payload.name}</span>\n                  </Group>\n\n                  <span>{payload?.[0]?.payload[dataKey]}</span>\n                </Paper>\n              )}\n              {...tooltipProps}\n            />\n          )}\n        </ReChartsRadialBarChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nRadialBarChart.displayName = '@mantine/core/RadialBarChart';\nRadialBarChart.classes = classes;\nRadialBarChart.varsResolver = varsResolver;\n\nexport namespace RadialBarChart {\n  export type Props = RadialBarChartProps;\n  export type StylesNames = RadialBarChartStylesNames;\n  export type CssVariables = RadialBarChartCssVariables;\n  export type Factory = RadialBarChartFactory;\n}\n"],"mappings":";;;;;;;;AAwFA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,UAAU;CACV,gBAAgB;CAChB,aAAa;CACd;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,4BAA4B,EACpC,MAAM,EACJ,4BAA4B,uBACxB,cAAc,sBAAsB,MAAM,GAC1C,KAAA,GACL,EACF,EACF;AAED,MAAaA,mBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,OAAO;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,SACA,gBACA,SACA,gBACA,qBACA,YACA,YACA,aACA,aACA,cACA,YACA,UACA,YACA,GAAG,WACD;CACJ,MAAM,CAAC,iBAAiB,sBAAsB,SAAwB,KAAK;CAE3E,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,wBAAwB,KAAK,KAAK,EAAE,OAAO,GAAG,WAAW;EAC7D,MAAM,gBAAgB,cAAc,OAAO,MAAM;AAEjD,SAAO;GACL,GAAG;GACH,MAAM;GACN,aAAa,kBACT,oBAAoB,KAAK,OACvB,KAAK,WAAW,IAChB,MACF,KAAK,WAAW;GACrB;GACD;CAEF,MAAM,EAAE,oBAAoB,mBAAmB,qBAA4C;EACzF;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,GAAI;YAC9B,oBAAC,qBAAD,EAAA,UACE,qBAACC,gBAAD;GACE,QAAQ;IAAE,KAAK;IAAG,QAAQ;IAAG,MAAM;IAAG,OAAO;IAAG;GAChD,aAAY;GACZ,aAAY;GACZ,IAAG;GACH,IAAG;GACM;GACG;GACF;GACV,MAAM;GACN,GAAI;aAVN;IAYE,oBAAC,WAAD;KACE,OACE,aACI;MACE,UAAU;MACV,MAAM;MACN,UAAU;MACX,GACD,KAAA;KAEN,YAAY,iBAAiB,EAAE,MAAM,iCAAiC,GAAG,KAAA;KAChE;KACT,mBAAmB;KACnB,GAAI;KACJ,CAAA;IAED,cACC,oBAAC,QAAD;KACE,eAAc;KACd,UAAU,YACR,oBAAC,aAAD;MACE,SAAS,QAAQ,SAAS,KAAK,UAAU;OACvC,GAAG;OACH,SAAU,KAAK,SAAiB;OACjC,EAAE;MACH,aAAa;MACb,gBAAgB,aAAa,iBAAiB;MAC9C,YAAY;MACZ,QAAQ;MACR,UAAA;MACY;MACZ,CAAA;KAEJ,GAAI;KACJ,CAAA;IAGH,eACC,oBAACC,WAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,QAAQ,EAAE,QAAQ,6BAA6B;KAC/C,UAAU,EAAE,cACV,qBAAC,OAAD;MAAO,GAAI,UAAU,UAAU;gBAA/B,CACE,qBAAC,OAAD;OAAO,KAAI;iBAAX,CACE,oBAAC,aAAD;QAAa,OAAO,UAAU,IAAI,QAAQ;QAAM,MAAM;QAAI,YAAY;QAAS,CAAA,EAC/E,oBAAC,QAAD,EAAA,UAAO,UAAU,IAAI,QAAQ,MAAY,CAAA,CACnC;UAER,oBAAC,QAAD,EAAA,UAAO,UAAU,IAAI,QAAQ,UAAgB,CAAA,CACvC;;KAEV,GAAI;KACJ,CAAA;IAEmB;MACL,CAAA;EAClB,CAAA;EAER;AAEF,iBAAe,cAAc;AAC7B,iBAAe,UAAUC;AACzB,iBAAe,eAAe"}

package/esm/ScatterChart/ScatterChart.mjs

@@ -70,10 +70,10 @@ const ScatterChart$1 = factory((_props) => {
 			strokeWidth: 1,
 			...line,
 			label: {
-				value: line.label,
 				fill: line.color ? color : "currentColor",
 				fontSize: 12,
-				position: line.labelPosition ?? "insideBottomLeft"
+				position: line.labelPosition ?? "insideBottomLeft",
+				...typeof line.label === "object" ? line.label : { value: line.label }
 			},
 			...getStyles("referenceLine")
 		}, index);

package/esm/ScatterChart/ScatterChart.mjs.map

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

package/esm/Sparkline/Sparkline.mjs.map

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

package/lib/AreaChart/AreaChart.d.ts

@@ -60,3 +60,11 @@ export declare const AreaChart: import("@mantine/core").MantineComponent<{
     stylesNames: AreaChartStylesNames;
     vars: AreaChartCSSVariables;
 }>;
+export declare namespace AreaChart {
+    type Props = AreaChartProps;
+    type StylesNames = AreaChartStylesNames;
+    type Factory = AreaChartFactory;
+    type Type = AreaChartType;
+    type Series = AreaChartSeries;
+    type CurveType = AreaChartCurveType;
+}

package/lib/AreaChart/index.d.ts

@@ -3,11 +3,3 @@ export { AreaChart } from './AreaChart';
 export { getSplitOffset } from './get-split-offset';
 export { AreaGradient } from './AreaGradient';
 export type { AreaChartProps, AreaChartStylesNames, AreaChartFactory, AreaChartType, AreaChartSeries, AreaChartCurveType, };
-export declare namespace AreaChart {
-    type Props = AreaChartProps;
-    type StylesNames = AreaChartStylesNames;
-    type Factory = AreaChartFactory;
-    type Type = AreaChartType;
-    type Series = AreaChartSeries;
-    type CurveType = AreaChartCurveType;
-}

package/lib/BarChart/BarChart.d.ts

@@ -54,3 +54,11 @@ export declare const BarChart: import("@mantine/core").MantineComponent<{
     stylesNames: BarChartStylesNames;
     vars: BarChartCssVariables;
 }>;
+export declare namespace BarChart {
+    type Props = BarChartProps;
+    type CssVariables = BarChartCssVariables;
+    type Factory = BarChartFactory;
+    type Series = BarChartSeries;
+    type StylesNames = BarChartStylesNames;
+    type Type = BarChartType;
+}

package/lib/BarChart/index.d.ts

@@ -1,11 +1,3 @@
 import type { BarChartCssVariables, BarChartFactory, BarChartProps, BarChartSeries, BarChartStylesNames, BarChartType } from './BarChart';
 export { BarChart } from './BarChart';
 export type { BarChartProps, BarChartCssVariables, BarChartFactory, BarChartSeries, BarChartStylesNames, BarChartType, };
-export declare namespace BarChart {
-    type Props = BarChartProps;
-    type CssVariables = BarChartCssVariables;
-    type Factory = BarChartFactory;
-    type Series = BarChartSeries;
-    type StylesNames = BarChartStylesNames;
-    type Type = BarChartType;
-}

package/lib/BarsList/BarsList.d.ts

@@ -53,3 +53,9 @@ export declare const BarsList: import("@mantine/core").MantineComponent<{
     stylesNames: BarsListStylesNames;
     vars: BarsListCssVariables;
 }>;
+export declare namespace BarsList {
+    type Props = BarsListProps;
+    type StylesNames = BarsListStylesNames;
+    type Factory = BarsListFactory;
+    type BarData = BarsListBarData;
+}

package/lib/BarsList/index.d.ts

@@ -1,9 +1,3 @@
 import type { BarsListBarData, BarsListFactory, BarsListProps, BarsListStylesNames } from './BarsList';
 export { BarsList } from './BarsList';
 export type { BarsListProps, BarsListStylesNames, BarsListFactory, BarsListBarData };
-export declare namespace BarsList {
-    type Props = BarsListProps;
-    type StylesNames = BarsListStylesNames;
-    type Factory = BarsListFactory;
-    type BarData = BarsListBarData;
-}

package/lib/BubbleChart/BubbleChart.d.ts

@@ -51,3 +51,10 @@ export declare const BubbleChart: import("@mantine/core").MantineComponent<{
     stylesNames: BubbleChartStylesNames;
     vars: BubbleChartCssVariables;
 }>;
+export declare namespace BubbleChart {
+    type Props = BubbleChartProps;
+    type StylesNames = BubbleChartStylesNames;
+    type CssVariables = BubbleChartCssVariables;
+    type Factory = BubbleChartFactory;
+    type DataKey = BubbleChartDataKey;
+}

package/lib/BubbleChart/index.d.ts

@@ -1,10 +1,3 @@
 import type { BubbleChartCssVariables, BubbleChartDataKey, BubbleChartFactory, BubbleChartProps, BubbleChartStylesNames } from './BubbleChart';
 export { BubbleChart } from './BubbleChart';
 export type { BubbleChartProps, BubbleChartStylesNames, BubbleChartCssVariables, BubbleChartFactory, BubbleChartDataKey, };
-export declare namespace BubbleChart {
-    type Props = BubbleChartProps;
-    type StylesNames = BubbleChartStylesNames;
-    type CssVariables = BubbleChartCssVariables;
-    type Factory = BubbleChartFactory;
-    type DataKey = BubbleChartDataKey;
-}

package/lib/CompositeChart/CompositeChart.d.ts

@@ -60,3 +60,11 @@ export declare const CompositeChart: import("@mantine/core").MantineComponent<{
     stylesNames: CompositeChartStylesNames;
     vars: CompositeChartCssVariables;
 }>;
+export declare namespace CompositeChart {
+    type Props = CompositeChartProps;
+    type StylesNames = CompositeChartStylesNames;
+    type CssVariables = CompositeChartCssVariables;
+    type Factory = CompositeChartFactory;
+    type Series = CompositeChartSeries;
+    type CurveType = CompositeChartCurveType;
+}