@mantine/charts 9.2.0 → 9.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/cjs/AreaChart/AreaChart.cjs.map +1 -1
  2. package/cjs/AreaChart/AreaGradient.cjs.map +1 -1
  3. package/cjs/AreaChart/AreaSplit.cjs.map +1 -1
  4. package/cjs/AreaChart/get-split-offset.cjs.map +1 -1
  5. package/cjs/BarChart/BarChart.cjs.map +1 -1
  6. package/cjs/BarsList/BarsList.cjs.map +1 -1
  7. package/cjs/BubbleChart/BubbleChart.cjs.map +1 -1
  8. package/cjs/ChartLegend/ChartLegend.cjs +4 -1
  9. package/cjs/ChartLegend/ChartLegend.cjs.map +1 -1
  10. package/cjs/ChartTooltip/ChartTooltip.cjs.map +1 -1
  11. package/cjs/CompositeChart/CompositeChart.cjs.map +1 -1
  12. package/cjs/DonutChart/DonutChart.cjs.map +1 -1
  13. package/cjs/FunnelChart/FunnelChart.cjs.map +1 -1
  14. package/cjs/Heatmap/Heatmap.cjs.map +1 -1
  15. package/cjs/Heatmap/HeatmapSplitWeeks.cjs.map +1 -1
  16. package/cjs/Heatmap/HeatmapWeeks.cjs.map +1 -1
  17. package/cjs/Heatmap/get-boundaries/get-boundaries.cjs.map +1 -1
  18. package/cjs/Heatmap/get-columns/get-columns.cjs.map +1 -1
  19. package/cjs/Heatmap/get-dates-range/get-dates-range.cjs.map +1 -1
  20. package/cjs/Heatmap/get-heat-color/get-heat-color.cjs.map +1 -1
  21. package/cjs/Heatmap/get-months-range/get-months-range.cjs.map +1 -1
  22. package/cjs/Heatmap/rotate-weekdays-names/rotate-weekdays-names.cjs.map +1 -1
  23. package/cjs/LineChart/LineChart.cjs.map +1 -1
  24. package/cjs/PieChart/PieChart.cjs.map +1 -1
  25. package/cjs/PointLabel/PointLabel.cjs.map +1 -1
  26. package/cjs/RadarChart/RadarChart.cjs.map +1 -1
  27. package/cjs/RadialBarChart/RadialBarChart.cjs.map +1 -1
  28. package/cjs/SankeyChart/SankeyChart.cjs.map +1 -1
  29. package/cjs/ScatterChart/ScatterChart.cjs.map +1 -1
  30. package/cjs/Sparkline/Sparkline.cjs.map +1 -1
  31. package/cjs/Treemap/Treemap.cjs.map +1 -1
  32. package/cjs/utils/get-series-labels/get-series-labels.cjs.map +1 -1
  33. package/esm/AreaChart/AreaChart.mjs.map +1 -1
  34. package/esm/AreaChart/AreaGradient.mjs.map +1 -1
  35. package/esm/AreaChart/AreaSplit.mjs.map +1 -1
  36. package/esm/AreaChart/get-split-offset.mjs.map +1 -1
  37. package/esm/BarChart/BarChart.mjs.map +1 -1
  38. package/esm/BarsList/BarsList.mjs.map +1 -1
  39. package/esm/BubbleChart/BubbleChart.mjs.map +1 -1
  40. package/esm/ChartLegend/ChartLegend.mjs +4 -1
  41. package/esm/ChartLegend/ChartLegend.mjs.map +1 -1
  42. package/esm/ChartTooltip/ChartTooltip.mjs.map +1 -1
  43. package/esm/CompositeChart/CompositeChart.mjs.map +1 -1
  44. package/esm/DonutChart/DonutChart.mjs.map +1 -1
  45. package/esm/FunnelChart/FunnelChart.mjs.map +1 -1
  46. package/esm/Heatmap/Heatmap.mjs.map +1 -1
  47. package/esm/Heatmap/HeatmapSplitWeeks.mjs.map +1 -1
  48. package/esm/Heatmap/HeatmapWeeks.mjs.map +1 -1
  49. package/esm/Heatmap/get-boundaries/get-boundaries.mjs.map +1 -1
  50. package/esm/Heatmap/get-columns/get-columns.mjs.map +1 -1
  51. package/esm/Heatmap/get-dates-range/get-dates-range.mjs.map +1 -1
  52. package/esm/Heatmap/get-heat-color/get-heat-color.mjs.map +1 -1
  53. package/esm/Heatmap/get-months-range/get-months-range.mjs.map +1 -1
  54. package/esm/Heatmap/rotate-weekdays-names/rotate-weekdays-names.mjs.map +1 -1
  55. package/esm/LineChart/LineChart.mjs.map +1 -1
  56. package/esm/PieChart/PieChart.mjs.map +1 -1
  57. package/esm/PointLabel/PointLabel.mjs.map +1 -1
  58. package/esm/RadarChart/RadarChart.mjs.map +1 -1
  59. package/esm/RadialBarChart/RadialBarChart.mjs.map +1 -1
  60. package/esm/SankeyChart/SankeyChart.mjs.map +1 -1
  61. package/esm/ScatterChart/ScatterChart.mjs.map +1 -1
  62. package/esm/Sparkline/Sparkline.mjs.map +1 -1
  63. package/esm/Treemap/Treemap.mjs.map +1 -1
  64. package/esm/utils/get-series-labels/get-series-labels.mjs.map +1 -1
  65. package/package.json +5 -5
@@ -1 +1 @@
1
- {"version":3,"file":"RadialBarChart.cjs","names":["Box","ResponsiveContainer","ReChartsRadialBarChart","RadialBar","Legend","ChartLegend","Tooltip","Paper","Group","ColorSwatch","classes"],"sources":["../../src/RadialBarChart/RadialBarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n Legend,\n LegendProps,\n RadialBar,\n RadialBarProps,\n RadialBarChart as ReChartsRadialBarChart,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n ColorSwatch,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n Group,\n Paper,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport classes from './RadialBarChart.module.css';\n\nexport type RadialBarChartStylesNames = 'root' | 'tooltip' | ChartLegendStylesNames;\nexport type RadialBarChartCssVariables = {\n root: '--chart-empty-background';\n};\n\nexport interface RadialBarChartProps\n extends BoxProps, StylesApiProps<RadialBarChartFactory>, ElementProps<'div'> {\n /** Chart data */\n data: Record<string, any>[];\n\n /** Key from data object to use as data key */\n dataKey: string;\n\n /** Size of bars in px, `20` by default */\n barSize?: number;\n\n /** Determines whether empty bars area should be visible @default true */\n withBackground?: boolean;\n\n /** Determines whether labels should be displayed @default false */\n withLabels?: boolean;\n\n /** Determines whether the legend should be displayed @default false */\n withLegend?: boolean;\n\n /** Determines whether the tooltip should be displayed when one of the bars is hovered @default true */\n withTooltip?: boolean;\n\n /** Color of the empty background, by default depends on the color scheme */\n emptyBackgroundColor?: string;\n\n /** Angle at which chart starts @default 90 */\n startAngle?: number;\n\n /** Angle at which chart ends @default -270 */\n endAngle?: number;\n\n /** Props passed down to recharts RadialBar component */\n radialBarProps?: Omit<RadialBarProps, 'ref'>;\n\n /** Props passed down to recharts RadarChartChart component */\n radialBarChartProps?: React.ComponentProps<typeof ReChartsRadialBarChart>;\n\n /** Props passed down to recharts Legend component */\n legendProps?: Omit<LegendProps, 'ref'>;\n\n /** Props passed down to `Tooltip` recharts component */\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n}\n\nexport type RadialBarChartFactory = Factory<{\n props: RadialBarChartProps;\n ref: HTMLDivElement;\n stylesNames: RadialBarChartStylesNames;\n vars: RadialBarChartCssVariables;\n}>;\n\nconst defaultProps = {\n barSize: 20,\n startAngle: 90,\n endAngle: -270,\n withBackground: true,\n withTooltip: true,\n} satisfies Partial<RadialBarChartProps>;\n\nconst varsResolver = createVarsResolver<RadialBarChartFactory>(\n (theme, { emptyBackgroundColor }) => ({\n root: {\n '--chart-empty-background': emptyBackgroundColor\n ? getThemeColor(emptyBackgroundColor, theme)\n : undefined,\n },\n })\n);\n\nexport const RadialBarChart = factory<RadialBarChartFactory>((_props) => {\n const props = useProps('RadialBarChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n barSize,\n withBackground,\n dataKey,\n radialBarProps,\n radialBarChartProps,\n withLabels,\n withLegend,\n legendProps,\n withTooltip,\n tooltipProps,\n startAngle,\n endAngle,\n attributes,\n ...others\n } = props;\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n\n const getStyles = useStyles<RadialBarChartFactory>({\n name: 'RadialBarChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const theme = useMantineTheme();\n const dataWithResolvedColor = data.map(({ color, ...item }) => {\n const resolvedColor = getThemeColor(color, theme);\n\n return {\n ...item,\n fill: resolvedColor,\n fillOpacity: highlightedArea\n ? highlightedArea === item.name\n ? item.opacity || 1\n : 0.05\n : item.opacity || 1,\n };\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<RadialBarChartFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer>\n <ReChartsRadialBarChart\n margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\n innerRadius=\"10%\"\n outerRadius=\"100%\"\n cx=\"50%\"\n cy=\"50%\"\n barSize={barSize}\n startAngle={startAngle}\n endAngle={endAngle}\n data={dataWithResolvedColor}\n {...radialBarChartProps}\n >\n <RadialBar\n label={\n withLabels\n ? {\n position: 'insideStart',\n fill: 'var(--mantine-color-white)',\n fontSize: 12,\n }\n : undefined\n }\n background={withBackground ? { fill: 'var(--chart-empty-background)' } : undefined}\n dataKey={dataKey}\n isAnimationActive={false}\n {...radialBarProps}\n />\n\n {withLegend && (\n <Legend\n verticalAlign=\"bottom\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload?.map((item) => ({\n ...item,\n dataKey: (item.payload as any)?.name,\n }))}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign || 'bottom'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n centered\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n {withTooltip && (\n <Tooltip\n animationDuration={0}\n isAnimationActive={false}\n cursor={{ stroke: 'var(--chart-cursor-color)' }}\n content={({ payload }) => (\n <Paper {...getStyles('tooltip')}>\n <Group gap=\"sm\">\n <ColorSwatch color={payload?.[0]?.payload.fill} size={12} withShadow={false} />\n <span>{payload?.[0]?.payload.name}</span>\n </Group>\n\n <span>{payload?.[0]?.payload[dataKey]}</span>\n </Paper>\n )}\n {...tooltipProps}\n />\n )}\n </ReChartsRadialBarChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nRadialBarChart.displayName = '@mantine/core/RadialBarChart';\nRadialBarChart.classes = classes;\nRadialBarChart.varsResolver = varsResolver;\n\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,gBAAA,GAAA,cAAA,qBACH,OAAO,EAAE,4BAA4B,EACpC,MAAM,EACJ,4BAA4B,wBAAA,GAAA,cAAA,eACV,sBAAsB,MAAM,GAC1C,KAAA,GACL,EACF,EACF;AAED,MAAa,kBAAA,GAAA,cAAA,UAAiD,WAAW;CACvE,MAAM,SAAA,GAAA,cAAA,UAAiB,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,uBAAA,GAAA,MAAA,UAA8C,KAAK;CAE3E,MAAM,aAAA,GAAA,cAAA,WAA6C;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,SAAA,GAAA,cAAA,kBAAyB;CAC/B,MAAM,wBAAwB,KAAK,KAAK,EAAE,OAAO,GAAG,WAAW;EAC7D,MAAM,iBAAA,GAAA,cAAA,eAA8B,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,oBAAA,GAAA,cAAA,sBAA+D;EACzF;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,GAAI;YAC9B,iBAAA,GAAA,kBAAA,KAACC,SAAAA,qBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAACC,SAAAA,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,iBAAA,GAAA,kBAAA,KAACC,SAAAA,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,iBAAA,GAAA,kBAAA,KAACC,SAAAA,QAAD;KACE,eAAc;KACd,UAAU,YACR,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,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,iBAAA,GAAA,kBAAA,KAACC,SAAAA,SAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,QAAQ,EAAE,QAAQ,6BAA6B;KAC/C,UAAU,EAAE,cACV,iBAAA,GAAA,kBAAA,MAACC,cAAAA,OAAD;MAAO,GAAI,UAAU,UAAU;gBAA/B,CACE,iBAAA,GAAA,kBAAA,MAACC,cAAAA,OAAD;OAAO,KAAI;iBAAX,CACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD;QAAa,OAAO,UAAU,IAAI,QAAQ;QAAM,MAAM;QAAI,YAAY;QAAS,CAAA,EAC/E,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,UAAU,IAAI,QAAQ,MAAY,CAAA,CACnC;UAER,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,UAAU,IAAI,QAAQ,UAAgB,CAAA,CACvC;;KAEV,GAAI;KACJ,CAAA;IAEmB;MACL,CAAA;EAClB,CAAA;EAER;AAEF,eAAe,cAAc;AAC7B,eAAe,UAAUC,8BAAAA;AACzB,eAAe,eAAe"}
1
+ {"version":3,"file":"RadialBarChart.cjs","names":["Box","ResponsiveContainer","ReChartsRadialBarChart","RadialBar","Legend","ChartLegend","Tooltip","Paper","Group","ColorSwatch","classes"],"sources":["../../src/RadialBarChart/RadialBarChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n Legend,\n LegendProps,\n RadialBar,\n RadialBarProps,\n RadialBarChart as ReChartsRadialBarChart,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n ColorSwatch,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n Group,\n Paper,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport classes from './RadialBarChart.module.css';\n\nexport type RadialBarChartStylesNames = 'root' | 'tooltip' | ChartLegendStylesNames;\nexport type RadialBarChartCssVariables = {\n root: '--chart-empty-background';\n};\n\nexport interface RadialBarChartProps\n extends BoxProps, StylesApiProps<RadialBarChartFactory>, ElementProps<'div'> {\n /** Chart data */\n data: Record<string, any>[];\n\n /** Key from data object to use as data key */\n dataKey: string;\n\n /** Size of bars in px, `20` by default */\n barSize?: number;\n\n /** Determines whether empty bars area should be visible @default true */\n withBackground?: boolean;\n\n /** Determines whether labels should be displayed @default false */\n withLabels?: boolean;\n\n /** Determines whether the legend should be displayed @default false */\n withLegend?: boolean;\n\n /** Determines whether the tooltip should be displayed when one of the bars is hovered @default true */\n withTooltip?: boolean;\n\n /** Color of the empty background, by default depends on the color scheme */\n emptyBackgroundColor?: string;\n\n /** Angle at which chart starts @default 90 */\n startAngle?: number;\n\n /** Angle at which chart ends @default -270 */\n endAngle?: number;\n\n /** Props passed down to recharts RadialBar component */\n radialBarProps?: Omit<RadialBarProps, 'ref'>;\n\n /** Props passed down to recharts RadarChartChart component */\n radialBarChartProps?: React.ComponentProps<typeof ReChartsRadialBarChart>;\n\n /** Props passed down to recharts Legend component */\n legendProps?: Omit<LegendProps, 'ref'>;\n\n /** Props passed down to `Tooltip` recharts component */\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n}\n\nexport type RadialBarChartFactory = Factory<{\n props: RadialBarChartProps;\n ref: HTMLDivElement;\n stylesNames: RadialBarChartStylesNames;\n vars: RadialBarChartCssVariables;\n}>;\n\nconst defaultProps = {\n barSize: 20,\n startAngle: 90,\n endAngle: -270,\n withBackground: true,\n withTooltip: true,\n} satisfies Partial<RadialBarChartProps>;\n\nconst varsResolver = createVarsResolver<RadialBarChartFactory>(\n (theme, { emptyBackgroundColor }) => ({\n root: {\n '--chart-empty-background': emptyBackgroundColor\n ? getThemeColor(emptyBackgroundColor, theme)\n : undefined,\n },\n })\n);\n\nexport const RadialBarChart = factory<RadialBarChartFactory>((_props) => {\n const props = useProps('RadialBarChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n barSize,\n withBackground,\n dataKey,\n radialBarProps,\n radialBarChartProps,\n withLabels,\n withLegend,\n legendProps,\n withTooltip,\n tooltipProps,\n startAngle,\n endAngle,\n attributes,\n ...others\n } = props;\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n\n const getStyles = useStyles<RadialBarChartFactory>({\n name: 'RadialBarChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const theme = useMantineTheme();\n const dataWithResolvedColor = data.map(({ color, ...item }) => {\n const resolvedColor = getThemeColor(color, theme);\n\n return {\n ...item,\n fill: resolvedColor,\n fillOpacity: highlightedArea\n ? highlightedArea === item.name\n ? item.opacity || 1\n : 0.05\n : item.opacity || 1,\n };\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<RadialBarChartFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer>\n <ReChartsRadialBarChart\n margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\n innerRadius=\"10%\"\n outerRadius=\"100%\"\n cx=\"50%\"\n cy=\"50%\"\n barSize={barSize}\n startAngle={startAngle}\n endAngle={endAngle}\n data={dataWithResolvedColor}\n {...radialBarChartProps}\n >\n <RadialBar\n label={\n withLabels\n ? {\n position: 'insideStart',\n fill: 'var(--mantine-color-white)',\n fontSize: 12,\n }\n : undefined\n }\n background={withBackground ? { fill: 'var(--chart-empty-background)' } : undefined}\n dataKey={dataKey}\n isAnimationActive={false}\n {...radialBarProps}\n />\n\n {withLegend && (\n <Legend\n verticalAlign=\"bottom\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload?.map((item) => ({\n ...item,\n dataKey: (item.payload as any)?.name,\n }))}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign || 'bottom'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n centered\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n {withTooltip && (\n <Tooltip\n animationDuration={0}\n isAnimationActive={false}\n cursor={{ stroke: 'var(--chart-cursor-color)' }}\n content={({ payload }) => (\n <Paper {...getStyles('tooltip')}>\n <Group gap=\"sm\">\n <ColorSwatch color={payload?.[0]?.payload.fill} size={12} withShadow={false} />\n <span>{payload?.[0]?.payload.name}</span>\n </Group>\n\n <span>{payload?.[0]?.payload[dataKey]}</span>\n </Paper>\n )}\n {...tooltipProps}\n />\n )}\n </ReChartsRadialBarChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nRadialBarChart.displayName = '@mantine/core/RadialBarChart';\nRadialBarChart.classes = classes;\nRadialBarChart.varsResolver = varsResolver;\n\nexport namespace RadialBarChart {\n export type Props = RadialBarChartProps;\n export type StylesNames = RadialBarChartStylesNames;\n export type CssVariables = RadialBarChartCssVariables;\n export type Factory = RadialBarChartFactory;\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"SankeyChart.cjs","names":["Box","ResponsiveContainer","RechartsSankey","Tooltip","ChartTooltip","classes"],"sources":["../../src/SankeyChart/SankeyChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Sankey as RechartsSankey,\n SankeyProps as RechartsSankeyProps,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './SankeyChart.module.css';\n\nexport interface SankeyChartNode {\n name: string;\n color?: MantineColor;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartLink {\n source: number;\n target: number;\n value: number;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartData {\n nodes: SankeyChartNode[];\n links: SankeyChartLink[];\n}\n\nexport type SankeyChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type SankeyChartCssVariables = {\n root: '--chart-node-color' | '--chart-link-color' | '--chart-text-color' | '--chart-height';\n};\n\nexport interface SankeyChartProps\n extends BoxProps, StylesApiProps<SankeyChartFactory>, ElementProps<'div'> {\n /** Data used to render chart, must include `nodes` and `links` arrays */\n data: SankeyChartData;\n\n /** Controls chart height @default 300 */\n height?: number;\n\n /** The width of each node @default 10 */\n nodeWidth?: number;\n\n /** The padding between nodes @default 10 */\n nodePadding?: number;\n\n /** The curvature of links between nodes @default 0.5 */\n linkCurvature?: number;\n\n /** The number of relaxation iterations @default 32 */\n iterations?: number;\n\n /** Default color for nodes, by default depends on color scheme */\n nodeColor?: MantineColor;\n\n /** An array of colors used for nodes when no `color` is set on individual nodes */\n colors?: MantineColor[];\n\n /** Default color for links, by default depends on color scheme */\n linkColor?: MantineColor;\n\n /** Opacity of the link fill @default 0.4 */\n linkOpacity?: number;\n\n /** Determines whether the tooltip should be displayed when hovered @default true */\n withTooltip?: boolean;\n\n /** Tooltip animation duration in ms @default 0 */\n tooltipAnimationDuration?: number;\n\n /** Props passed down to `Tooltip` recharts component */\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n /** Props passed down to recharts `Sankey` component */\n sankeyProps?: Partial<Omit<RechartsSankeyProps, 'ref' | 'data'>>;\n\n /** Controls text color of labels @default dimmed */\n textColor?: MantineColor;\n\n /** A function to format values inside the tooltip and node labels */\n valueFormatter?: (value: number) => string;\n\n /** Additional elements rendered inside `Sankey` component */\n children?: React.ReactNode;\n}\n\nexport type SankeyChartFactory = Factory<{\n props: SankeyChartProps;\n ref: HTMLDivElement;\n stylesNames: SankeyChartStylesNames;\n vars: SankeyChartCssVariables;\n}>;\n\nconst defaultProps = {\n height: 300,\n nodeWidth: 10,\n nodePadding: 10,\n linkCurvature: 0.5,\n iterations: 32,\n linkOpacity: 0.4,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n} satisfies Partial<SankeyChartProps>;\n\nconst varsResolver = createVarsResolver<SankeyChartFactory>(\n (theme, { nodeColor, linkColor, textColor, height }) => ({\n root: {\n '--chart-node-color': nodeColor ? getThemeColor(nodeColor, theme) : undefined,\n '--chart-link-color': linkColor ? getThemeColor(linkColor, theme) : undefined,\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-height': rem(height),\n },\n })\n);\n\ninterface SankeyNodeContentProps {\n x: number;\n y: number;\n width: number;\n height: number;\n index: number;\n payload: { name: string; value: number; targetNodes: number[]; color?: string };\n resolvedNodeColors: Record<number, string>;\n resolvedDefaultColors: string[];\n valueFormatter?: (value: number) => string;\n}\n\nconst DEFAULT_COLORS = [\n 'var(--mantine-color-blue-filled)',\n 'var(--mantine-color-cyan-filled)',\n 'var(--mantine-color-teal-filled)',\n 'var(--mantine-color-green-filled)',\n 'var(--mantine-color-lime-filled)',\n 'var(--mantine-color-yellow-filled)',\n 'var(--mantine-color-orange-filled)',\n 'var(--mantine-color-red-filled)',\n 'var(--mantine-color-pink-filled)',\n 'var(--mantine-color-grape-filled)',\n 'var(--mantine-color-violet-filled)',\n 'var(--mantine-color-indigo-filled)',\n];\n\nfunction SankeyNodeContent({\n x,\n y,\n width,\n height,\n index,\n payload,\n resolvedNodeColors,\n resolvedDefaultColors,\n valueFormatter,\n}: SankeyNodeContentProps) {\n const fill =\n resolvedNodeColors[index] ||\n `var(--chart-node-color, ${resolvedDefaultColors[index % resolvedDefaultColors.length]})`;\n\n const isLeaf = !payload.targetNodes || payload.targetNodes.length === 0;\n const labelX = isLeaf ? x - 6 : x + width + 6;\n const textAnchor = isLeaf ? 'end' : 'start';\n const formattedValue = valueFormatter ? valueFormatter(payload.value) : payload.value;\n const stacked = height >= 28;\n\n return (\n <g>\n <rect x={x} y={y} width={width} height={height} fill={fill} stroke=\"none\" />\n {stacked ? (\n <>\n <text\n x={labelX}\n y={y + height / 2 - 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name}\n </text>\n <text\n x={labelX}\n y={y + height / 2 + 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n opacity={0.8}\n >\n {formattedValue}\n </text>\n </>\n ) : (\n <text\n x={labelX}\n y={y + height / 2}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name} <tspan opacity={0.8}>{formattedValue}</tspan>\n </text>\n )}\n </g>\n );\n}\n\ninterface SankeyLinkContentProps {\n sourceX: number;\n targetX: number;\n sourceY: number;\n targetY: number;\n sourceControlX: number;\n targetControlX: number;\n linkWidth: number;\n index: number;\n payload: {\n source: { color?: string };\n target: { color?: string };\n };\n sourceResolvedColor?: string;\n linkOpacity: number;\n}\n\nfunction SankeyLinkContent({\n sourceX,\n targetX,\n sourceY,\n targetY,\n sourceControlX,\n targetControlX,\n linkWidth,\n sourceResolvedColor,\n linkOpacity,\n}: SankeyLinkContentProps) {\n const fill = sourceResolvedColor || 'var(--chart-link-color, var(--mantine-color-gray-4))';\n\n return (\n <path\n d={`\n M${sourceX},${sourceY + linkWidth / 2}\n C${sourceControlX},${sourceY + linkWidth / 2}\n ${targetControlX},${targetY + linkWidth / 2}\n ${targetX},${targetY + linkWidth / 2}\n L${targetX},${targetY - linkWidth / 2}\n C${targetControlX},${targetY - linkWidth / 2}\n ${sourceControlX},${sourceY - linkWidth / 2}\n ${sourceX},${sourceY - linkWidth / 2}\n Z\n `}\n fill={fill}\n opacity={linkOpacity}\n stroke=\"none\"\n />\n );\n}\n\nexport const SankeyChart = factory<SankeyChartFactory>((_props) => {\n const props = useProps('SankeyChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n height: chartHeight,\n nodeWidth,\n nodePadding,\n linkCurvature,\n iterations,\n nodeColor,\n colors,\n linkColor,\n linkOpacity,\n textColor,\n withTooltip,\n tooltipAnimationDuration,\n tooltipProps,\n sankeyProps,\n valueFormatter,\n children,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const resolvedNodeColors: Record<number, string> = {};\n data.nodes.forEach((node, index) => {\n if (node.color) {\n resolvedNodeColors[index] = getThemeColor(node.color, theme);\n }\n });\n\n const resolvedDefaultColors = colors\n ? colors.map((color) => getThemeColor(color, theme))\n : DEFAULT_COLORS;\n\n const getStyles = useStyles<SankeyChartFactory>({\n name: 'SankeyChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SankeyChartFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer height={chartHeight}>\n <RechartsSankey\n data={data as any}\n nodeWidth={nodeWidth}\n nodePadding={nodePadding}\n linkCurvature={linkCurvature}\n iterations={iterations}\n node={(nodeProps: any) => (\n <SankeyNodeContent\n {...nodeProps}\n resolvedNodeColors={resolvedNodeColors}\n resolvedDefaultColors={resolvedDefaultColors}\n valueFormatter={valueFormatter}\n />\n )}\n link={(linkProps: any) => {\n const sourceIndex =\n linkProps.index >= 0 && linkProps.index < data.links.length\n ? data.links[linkProps.index].source\n : -1;\n return (\n <SankeyLinkContent\n {...linkProps}\n sourceResolvedColor={resolvedNodeColors[sourceIndex]}\n linkOpacity={linkOpacity!}\n />\n );\n }}\n {...sankeyProps}\n >\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => {\n const resolveColor = (item: any) => {\n const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);\n if (nodeIndex !== -1) {\n return (\n resolvedNodeColors[nodeIndex] ||\n resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length]\n );\n }\n\n const sourceNode = item.payload?.source;\n if (sourceNode) {\n const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);\n if (sourceIndex !== -1) {\n return (\n resolvedNodeColors[sourceIndex] ||\n resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length]\n );\n }\n }\n\n return 'var(--mantine-color-blue-6)';\n };\n\n return (\n <ChartTooltip\n payload={\n payload?.map((item) => ({\n name: item.name as string,\n value: item.value as number,\n color: resolveColor(item),\n })) || []\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n );\n }}\n {...tooltipProps}\n />\n )}\n\n {children}\n </RechartsSankey>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nSankeyChart.displayName = '@mantine/charts/SankeyChart';\nSankeyChart.classes = classes;\nSankeyChart.varsResolver = varsResolver;\n"],"mappings":"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"}
1
+ {"version":3,"file":"SankeyChart.cjs","names":["Box","ResponsiveContainer","RechartsSankey","Tooltip","ChartTooltip","classes"],"sources":["../../src/SankeyChart/SankeyChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Sankey as RechartsSankey,\n SankeyProps as RechartsSankeyProps,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './SankeyChart.module.css';\n\nexport interface SankeyChartNode {\n name: string;\n color?: MantineColor;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartLink {\n source: number;\n target: number;\n value: number;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartData {\n nodes: SankeyChartNode[];\n links: SankeyChartLink[];\n}\n\nexport type SankeyChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type SankeyChartCssVariables = {\n root: '--chart-node-color' | '--chart-link-color' | '--chart-text-color' | '--chart-height';\n};\n\nexport interface SankeyChartProps\n extends BoxProps, StylesApiProps<SankeyChartFactory>, ElementProps<'div'> {\n /** Data used to render chart, must include `nodes` and `links` arrays */\n data: SankeyChartData;\n\n /** Controls chart height @default 300 */\n height?: number;\n\n /** The width of each node @default 10 */\n nodeWidth?: number;\n\n /** The padding between nodes @default 10 */\n nodePadding?: number;\n\n /** The curvature of links between nodes @default 0.5 */\n linkCurvature?: number;\n\n /** The number of relaxation iterations @default 32 */\n iterations?: number;\n\n /** Default color for nodes, by default depends on color scheme */\n nodeColor?: MantineColor;\n\n /** An array of colors used for nodes when no `color` is set on individual nodes */\n colors?: MantineColor[];\n\n /** Default color for links, by default depends on color scheme */\n linkColor?: MantineColor;\n\n /** Opacity of the link fill @default 0.4 */\n linkOpacity?: number;\n\n /** Determines whether the tooltip should be displayed when hovered @default true */\n withTooltip?: boolean;\n\n /** Tooltip animation duration in ms @default 0 */\n tooltipAnimationDuration?: number;\n\n /** Props passed down to `Tooltip` recharts component */\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n /** Props passed down to recharts `Sankey` component */\n sankeyProps?: Partial<Omit<RechartsSankeyProps, 'ref' | 'data'>>;\n\n /** Controls text color of labels @default dimmed */\n textColor?: MantineColor;\n\n /** A function to format values inside the tooltip and node labels */\n valueFormatter?: (value: number) => string;\n\n /** Additional elements rendered inside `Sankey` component */\n children?: React.ReactNode;\n}\n\nexport type SankeyChartFactory = Factory<{\n props: SankeyChartProps;\n ref: HTMLDivElement;\n stylesNames: SankeyChartStylesNames;\n vars: SankeyChartCssVariables;\n}>;\n\nconst defaultProps = {\n height: 300,\n nodeWidth: 10,\n nodePadding: 10,\n linkCurvature: 0.5,\n iterations: 32,\n linkOpacity: 0.4,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n} satisfies Partial<SankeyChartProps>;\n\nconst varsResolver = createVarsResolver<SankeyChartFactory>(\n (theme, { nodeColor, linkColor, textColor, height }) => ({\n root: {\n '--chart-node-color': nodeColor ? getThemeColor(nodeColor, theme) : undefined,\n '--chart-link-color': linkColor ? getThemeColor(linkColor, theme) : undefined,\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-height': rem(height),\n },\n })\n);\n\ninterface SankeyNodeContentProps {\n x: number;\n y: number;\n width: number;\n height: number;\n index: number;\n payload: { name: string; value: number; targetNodes: number[]; color?: string };\n resolvedNodeColors: Record<number, string>;\n resolvedDefaultColors: string[];\n valueFormatter?: (value: number) => string;\n}\n\nconst DEFAULT_COLORS = [\n 'var(--mantine-color-blue-filled)',\n 'var(--mantine-color-cyan-filled)',\n 'var(--mantine-color-teal-filled)',\n 'var(--mantine-color-green-filled)',\n 'var(--mantine-color-lime-filled)',\n 'var(--mantine-color-yellow-filled)',\n 'var(--mantine-color-orange-filled)',\n 'var(--mantine-color-red-filled)',\n 'var(--mantine-color-pink-filled)',\n 'var(--mantine-color-grape-filled)',\n 'var(--mantine-color-violet-filled)',\n 'var(--mantine-color-indigo-filled)',\n];\n\nfunction SankeyNodeContent({\n x,\n y,\n width,\n height,\n index,\n payload,\n resolvedNodeColors,\n resolvedDefaultColors,\n valueFormatter,\n}: SankeyNodeContentProps) {\n const fill =\n resolvedNodeColors[index] ||\n `var(--chart-node-color, ${resolvedDefaultColors[index % resolvedDefaultColors.length]})`;\n\n const isLeaf = !payload.targetNodes || payload.targetNodes.length === 0;\n const labelX = isLeaf ? x - 6 : x + width + 6;\n const textAnchor = isLeaf ? 'end' : 'start';\n const formattedValue = valueFormatter ? valueFormatter(payload.value) : payload.value;\n const stacked = height >= 28;\n\n return (\n <g>\n <rect x={x} y={y} width={width} height={height} fill={fill} stroke=\"none\" />\n {stacked ? (\n <>\n <text\n x={labelX}\n y={y + height / 2 - 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name}\n </text>\n <text\n x={labelX}\n y={y + height / 2 + 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n opacity={0.8}\n >\n {formattedValue}\n </text>\n </>\n ) : (\n <text\n x={labelX}\n y={y + height / 2}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name} <tspan opacity={0.8}>{formattedValue}</tspan>\n </text>\n )}\n </g>\n );\n}\n\ninterface SankeyLinkContentProps {\n sourceX: number;\n targetX: number;\n sourceY: number;\n targetY: number;\n sourceControlX: number;\n targetControlX: number;\n linkWidth: number;\n index: number;\n payload: {\n source: { color?: string };\n target: { color?: string };\n };\n sourceResolvedColor?: string;\n linkOpacity: number;\n}\n\nfunction SankeyLinkContent({\n sourceX,\n targetX,\n sourceY,\n targetY,\n sourceControlX,\n targetControlX,\n linkWidth,\n sourceResolvedColor,\n linkOpacity,\n}: SankeyLinkContentProps) {\n const fill = sourceResolvedColor || 'var(--chart-link-color, var(--mantine-color-gray-4))';\n\n return (\n <path\n d={`\n M${sourceX},${sourceY + linkWidth / 2}\n C${sourceControlX},${sourceY + linkWidth / 2}\n ${targetControlX},${targetY + linkWidth / 2}\n ${targetX},${targetY + linkWidth / 2}\n L${targetX},${targetY - linkWidth / 2}\n C${targetControlX},${targetY - linkWidth / 2}\n ${sourceControlX},${sourceY - linkWidth / 2}\n ${sourceX},${sourceY - linkWidth / 2}\n Z\n `}\n fill={fill}\n opacity={linkOpacity}\n stroke=\"none\"\n />\n );\n}\n\nexport const SankeyChart = factory<SankeyChartFactory>((_props) => {\n const props = useProps('SankeyChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n height: chartHeight,\n nodeWidth,\n nodePadding,\n linkCurvature,\n iterations,\n nodeColor,\n colors,\n linkColor,\n linkOpacity,\n textColor,\n withTooltip,\n tooltipAnimationDuration,\n tooltipProps,\n sankeyProps,\n valueFormatter,\n children,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const resolvedNodeColors: Record<number, string> = {};\n data.nodes.forEach((node, index) => {\n if (node.color) {\n resolvedNodeColors[index] = getThemeColor(node.color, theme);\n }\n });\n\n const resolvedDefaultColors = colors\n ? colors.map((color) => getThemeColor(color, theme))\n : DEFAULT_COLORS;\n\n const getStyles = useStyles<SankeyChartFactory>({\n name: 'SankeyChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SankeyChartFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer height={chartHeight}>\n <RechartsSankey\n data={data as any}\n nodeWidth={nodeWidth}\n nodePadding={nodePadding}\n linkCurvature={linkCurvature}\n iterations={iterations}\n node={(nodeProps: any) => (\n <SankeyNodeContent\n {...nodeProps}\n resolvedNodeColors={resolvedNodeColors}\n resolvedDefaultColors={resolvedDefaultColors}\n valueFormatter={valueFormatter}\n />\n )}\n link={(linkProps: any) => {\n const sourceIndex =\n linkProps.index >= 0 && linkProps.index < data.links.length\n ? data.links[linkProps.index].source\n : -1;\n return (\n <SankeyLinkContent\n {...linkProps}\n sourceResolvedColor={resolvedNodeColors[sourceIndex]}\n linkOpacity={linkOpacity!}\n />\n );\n }}\n {...sankeyProps}\n >\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => {\n const resolveColor = (item: any) => {\n const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);\n if (nodeIndex !== -1) {\n return (\n resolvedNodeColors[nodeIndex] ||\n resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length]\n );\n }\n\n const sourceNode = item.payload?.source;\n if (sourceNode) {\n const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);\n if (sourceIndex !== -1) {\n return (\n resolvedNodeColors[sourceIndex] ||\n resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length]\n );\n }\n }\n\n return 'var(--mantine-color-blue-6)';\n };\n\n return (\n <ChartTooltip\n payload={\n payload?.map((item) => ({\n name: item.name as string,\n value: item.value as number,\n color: resolveColor(item),\n })) || []\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n );\n }}\n {...tooltipProps}\n />\n )}\n\n {children}\n </RechartsSankey>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nSankeyChart.displayName = '@mantine/charts/SankeyChart';\nSankeyChart.classes = classes;\nSankeyChart.varsResolver = varsResolver;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ScatterChart.cjs","names":["ReferenceLine","Scatter","LabelList","Box","ResponsiveContainer","ReChartsScatterChart","CartesianGrid","XAxis","Label","YAxis","Tooltip","ChartTooltip","Legend","ChartLegend","classes"],"sources":["../../src/ScatterChart/ScatterChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n CartesianGrid,\n Label,\n LabelList,\n Legend,\n ScatterChart as ReChartsScatterChart,\n ReferenceLine,\n ResponsiveContainer,\n Scatter,\n ScatterProps,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { BaseChartStylesNames, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport interface ScatterChartSeries {\n color: MantineColor;\n name: string;\n data: Record<string, number>[];\n}\n\nexport type ScatterChartStylesNames =\n | 'scatter'\n | BaseChartStylesNames\n | ChartLegendStylesNames\n | ChartTooltipStylesNames;\n\nexport type ScatterChartCssVariables = {\n root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface ScatterChartProps\n extends\n Omit<GridChartBaseProps, 'dataKey' | 'data' | 'unit' | 'valueFormatter'>,\n BoxProps,\n StylesApiProps<ScatterChartFactory>,\n ElementProps<'div'> {\n /** Keys that should be used to retrieve data from the data array on x and y axis */\n dataKey: { x: string; y: string };\n\n /** Data that is used to build the chart */\n data: ScatterChartSeries[];\n\n /** Units displayed after value on axis and inside the tooltip */\n unit?: { x?: string; y?: string };\n\n /** Labels that should be used instead of keys names in the tooltip */\n labels?: { x?: string; y?: string };\n\n /** A function to format values on x/y axis and in the tooltip */\n valueFormatter?:\n | GridChartBaseProps['valueFormatter']\n | { x?: GridChartBaseProps['valueFormatter']; y?: GridChartBaseProps['valueFormatter'] };\n\n /** Props passed down to recharts `ScatterChart` component */\n scatterChartProps?: React.ComponentProps<typeof ReChartsScatterChart>;\n\n /** Props passed down to recharts `Scatter` component */\n scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n /** If set, displays labels next to points for the given axis */\n pointLabels?: 'x' | 'y';\n}\n\nfunction getAxis(key: string, dataKey: { x: string; y: string }) {\n return key === dataKey.x ? 'x' : 'y';\n}\n\nexport type ScatterChartFactory = Factory<{\n props: ScatterChartProps;\n ref: HTMLDivElement;\n stylesNames: ScatterChartStylesNames;\n vars: ScatterChartCssVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n tickLine: 'y',\n strokeDasharray: '5 5',\n gridAxis: 'x',\n} satisfies Partial<ScatterChartProps>;\n\nconst varsResolver = createVarsResolver<ScatterChartFactory>((theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n}));\n\nexport const ScatterChart = factory<ScatterChartFactory>((_props) => {\n const props = useProps('ScatterChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n referenceLines,\n dir,\n withLegend,\n withTooltip,\n withXAxis,\n withYAxis,\n xAxisProps,\n yAxisProps,\n orientation,\n scatterChartProps,\n legendProps,\n data,\n gridAxis,\n tickLine,\n strokeDasharray,\n gridProps,\n tooltipAnimationDuration,\n tooltipProps,\n children,\n onMouseLeave,\n dataKey,\n textColor,\n gridColor,\n xAxisLabel,\n yAxisLabel,\n unit,\n labels,\n valueFormatter,\n scatterProps,\n pointLabels,\n attributes,\n ...others\n } = props;\n\n const getFormatter = (axis: 'x' | 'y') =>\n typeof valueFormatter === 'function' ? valueFormatter : valueFormatter?.[axis];\n const xFormatter = getFormatter('x');\n const yFormatter = getFormatter('y');\n\n const theme = useMantineTheme();\n\n const mappedData = data.map((item) => ({\n ...item,\n data: item.data.map((point) => ({ ...point, name: item.name })),\n }));\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ScatterChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const getStyles = useStyles<ScatterChartFactory>({\n name: 'ScatterChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n const shouldHighlight = highlightedArea !== null;\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n\n const referenceLinesItems = referenceLines?.map((line, index) => {\n const color = getThemeColor(line.color, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={line.color ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n {...line}\n label={{\n 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":";;;;;;;;;;AAoFA,SAAS,QAAQ,KAAa,SAAmC;AAC/D,QAAO,QAAQ,QAAQ,IAAI,MAAM;;AAUnC,MAAM,eAAe;CACnB,WAAW;CACX,WAAW;CACX,aAAa;CACb,0BAA0B;CAC1B,UAAU;CACV,iBAAiB;CACjB,UAAU;CACX;AAED,MAAM,gBAAA,GAAA,cAAA,qBAAwD,OAAO,EAAE,WAAW,iBAAiB,EACjG,MAAM;CACJ,sBAAsB,aAAA,GAAA,cAAA,eAA0B,WAAW,MAAM,GAAG,KAAA;CACpE,sBAAsB,aAAA,GAAA,cAAA,eAA0B,WAAW,MAAM,GAAG,KAAA;CACrE,EACF,EAAE;AAEH,MAAa,gBAAA,GAAA,cAAA,UAA6C,WAAW;CACnE,MAAM,SAAA,GAAA,cAAA,UAAiB,gBAAgB,cAAc,OAAO;CAC5D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,gBACA,KACA,YACA,aACA,WACA,WACA,YACA,YACA,aACA,mBACA,aACA,MACA,UACA,UACA,iBACA,WACA,0BACA,cACA,UACA,cACA,SACA,WACA,WACA,YACA,YACA,MACA,QACA,gBACA,cACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,gBAAgB,SACpB,OAAO,mBAAmB,aAAa,iBAAiB,iBAAiB;CAC3E,MAAM,aAAa,aAAa,IAAI;CACpC,MAAM,aAAa,aAAa,IAAI;CAEpC,MAAM,SAAA,GAAA,cAAA,kBAAyB;CAE/B,MAAM,aAAa,KAAK,KAAK,UAAU;EACrC,GAAG;EACH,MAAM,KAAK,KAAK,KAAK,WAAW;GAAE,GAAG;GAAO,MAAM,KAAK;GAAM,EAAE;EAChE,EAAE;CAEH,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAA6D;EACvF;EACA;EACA;EACD,CAAC;CAEF,MAAM,aAAA,GAAA,cAAA,WAA2C;EAC/C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,gBAAgB,aAAa,WAAW,aAAa,OAAO,aAAa;CAC/E,MAAM,gBAAgB,aAAa,WAAW,aAAa,OAAO,aAAa;CAC/E,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UAA8C,KAAK;CAC3E,MAAM,kBAAkB,oBAAoB;CAC5C,MAAM,oBAAoB,UAA4C;AACpE,qBAAmB,KAAK;AACxB,iBAAe,MAAM;;CAGvB,MAAM,sBAAsB,gBAAgB,KAAK,MAAM,UAAU;EAC/D,MAAM,SAAA,GAAA,cAAA,eAAsB,KAAK,OAAO,MAAM;AAC9C,SACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,eAAD;GAEE,QAAQ,KAAK,QAAQ,QAAQ;GAC7B,aAAa;GACb,GAAI;GACJ,OAAO;IACL,MAAM,KAAK,QAAQ,QAAQ;IAC3B,UAAU;IACV,UAAU,KAAK,iBAAiB;IAChC,GAAI,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,EAAE,OAAO,KAAK,OAAO;IACxE;GACD,GAAI,UAAU,gBAAgB;GAC9B,EAXK,MAWL;GAEJ;CAEF,MAAM,WAAW,WAAW,KAAK,MAAM,UAAU;EAC/C,MAAM,SAAS,mBAAmB,oBAAoB,KAAK;AAC3D,SACE,iBAAA,GAAA,kBAAA,MAACC,SAAAA,SAAD;GACE,MAAM,KAAK;GACX,OAAA,GAAA,cAAA,eAAoB,KAAK,OAAO,MAAM;GAEtC,mBAAmB;GACnB,aAAa,SAAS,KAAM;GAC5B,GAAI;aANN,CAQG,eAAe,iBAAA,GAAA,kBAAA,KAACC,SAAAA,WAAD;IAAW,SAAS,QAAQ;IAAc,UAAU;IAAG,IAAI;IAAM,CAAA,EAChF,cAAc,SACP;KAPH,MAOG;GAEZ;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,cAAc;EAAkB,KAAK,OAAO;EAAO,GAAI;YACjF,iBAAA,GAAA,kBAAA,KAACC,SAAAA,qBAAD;GAAqB,GAAI,UAAU,YAAY;aAC7C,iBAAA,GAAA,kBAAA,MAACC,SAAAA,cAAD;IACE,QAAQ;KACN,QAAQ,aAAa,KAAK,KAAA;KAC1B,MAAM,aAAa,KAAK,KAAA;KACxB,OAAO,aAAa,IAAI,KAAA;KACzB;IACD,GAAI;cANN;KAQE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,eAAD;MACmB;MACjB,UAAU,aAAa,OAAO,aAAa;MAC3C,YAAY,aAAa,OAAO,aAAa;MAC7C,GAAI,UAAU,OAAO;MACrB,GAAI;MACJ,CAAA;KACF,iBAAA,GAAA,kBAAA,MAACC,SAAAA,OAAD;MACE,MAAK;MACL,MAAM,CAAC;MACP,SAAS,QAAQ;MACjB,MAAM;OAAE,WAAW;OAAoB,UAAU;OAAI,MAAM;OAAgB;MAC3E,QAAO;MACP,UAAS;MACT,UAAU,gBAAgB,EAAE,QAAQ,gBAAgB,GAAG;MACvD,YAAY;MACZ,MAAM,MAAM;MACZ,eAAe;MACf,GAAI,UAAU,OAAO;MACrB,GAAI;gBAZN,CAcG,cACC,iBAAA,GAAA,kBAAA,KAACC,SAAAA,OAAD;OAAO,UAAS;OAAe,QAAQ;OAAK,UAAU;OAAI,GAAI,UAAU,YAAY;iBACjF;OACK,CAAA,EAET,YAAY,SACP;;KACR,iBAAA,GAAA,kBAAA,MAACC,SAAAA,OAAD;MACE,MAAK;MACL,MAAM,CAAC;MACP,UAAU;MACV,SAAS,QAAQ;MACjB,UAAU,gBAAgB,EAAE,QAAQ,gBAAgB,GAAG;MACvD,MAAM;OAAE,WAAW;OAAqB,UAAU;OAAI,MAAM;OAAgB;MAC5E,eAAA;MACA,MAAM,MAAM;MACZ,eAAe;MACf,GAAI,UAAU,OAAO;MACrB,GAAI;gBAXN,CAaG,cACC,iBAAA,GAAA,kBAAA,KAACD,SAAAA,OAAD;OACE,UAAS;OACT,OAAO;OACP,YAAW;OACX,UAAU;OACV,QAAQ;OACR,GAAI,UAAU,YAAY;iBAEzB;OACK,CAAA,EAET,YAAY,SACP;;KAEP,eACC,iBAAA,GAAA,kBAAA,KAACE,SAAAA,SAAD;MACE,mBAAmB;MACnB,mBAAmB,6BAA6B;MAChD,UAAU,EAAE,GAAG,GAAG;MAClB,QAAQ;OACN,QAAQ;OACR,aAAa;OACb;OACD;MACD,UAAU,EAAE,OAAO,SAAS,qBAC1B,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;OACE,MAAK;OACL,OAAO,kBAAkB,UAAU,eAAe,OAAO,QAAQ,GAAG;OACpE,SACE,SACI,SAAS,KAAK,UAAU;QACtB,GAAG;QACH,MAAM,OAAO,QAAQ,KAAK,MAAgB,QAAQ,KAAK,KAAK;QAC5D,OACE,aAAa,QAAQ,KAAK,MAAgB,QAAQ,CAAC,GACjD,KAAK,MACN,IAAI,KAAK;QACb,EAAE,GACH,SAAS,KAAK,UAAU;QACtB,GAAG;QACH,OACE,aAAa,QAAQ,KAAK,MAAgB,QAAQ,CAAC,GACjD,KAAK,MACN,IAAI,KAAK;QACb,EAAE;OAET,YAAY;OACZ,QAAQ;OACR,QAAQ;OACI;OACZ,CAAA;MAEJ,GAAI;MACJ,CAAA;KAGH,cACC,iBAAA,GAAA,kBAAA,KAACC,SAAAA,QAAD;MACE,eAAc;MACd,UAAU,YACR,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;OACE,SAAS,QAAQ,SAAS,KAAK,MAAM,WAAW;QAC9C,GAAG;QACH,SAAS,KAAK,OAAO;QACtB,EAAE;OACH,aAAa;OACb,gBAAgB,aAAa,iBAAiB;OAC9C,YAAY;OACZ,QAAQ;OACR,QAAQ;OACI;OACZ,CAAA;MAEJ,QAAQ;MACR,GAAI;MACJ,CAAA;KAGH;KACA;KACoB;;GACH,CAAA;EAClB,CAAA;EAER;AAEF,aAAa,cAAc;AAC3B,aAAa,UAAUC,0BAAAA;AACvB,aAAa,eAAe"}
1
+ {"version":3,"file":"ScatterChart.cjs","names":["ReferenceLine","Scatter","LabelList","Box","ResponsiveContainer","ReChartsScatterChart","CartesianGrid","XAxis","Label","YAxis","Tooltip","ChartTooltip","Legend","ChartLegend","classes"],"sources":["../../src/ScatterChart/ScatterChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n CartesianGrid,\n Label,\n LabelList,\n Legend,\n ScatterChart as ReChartsScatterChart,\n ReferenceLine,\n ResponsiveContainer,\n Scatter,\n ScatterProps,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { BaseChartStylesNames, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport interface ScatterChartSeries {\n color: MantineColor;\n name: string;\n data: Record<string, number>[];\n}\n\nexport type ScatterChartStylesNames =\n | 'scatter'\n | BaseChartStylesNames\n | ChartLegendStylesNames\n | ChartTooltipStylesNames;\n\nexport type ScatterChartCssVariables = {\n root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface ScatterChartProps\n extends\n Omit<GridChartBaseProps, 'dataKey' | 'data' | 'unit' | 'valueFormatter'>,\n BoxProps,\n StylesApiProps<ScatterChartFactory>,\n ElementProps<'div'> {\n /** Keys that should be used to retrieve data from the data array on x and y axis */\n dataKey: { x: string; y: string };\n\n /** Data that is used to build the chart */\n data: ScatterChartSeries[];\n\n /** Units displayed after value on axis and inside the tooltip */\n unit?: { x?: string; y?: string };\n\n /** Labels that should be used instead of keys names in the tooltip */\n labels?: { x?: string; y?: string };\n\n /** A function to format values on x/y axis and in the tooltip */\n valueFormatter?:\n | GridChartBaseProps['valueFormatter']\n | { x?: GridChartBaseProps['valueFormatter']; y?: GridChartBaseProps['valueFormatter'] };\n\n /** Props passed down to recharts `ScatterChart` component */\n scatterChartProps?: React.ComponentProps<typeof ReChartsScatterChart>;\n\n /** Props passed down to recharts `Scatter` component */\n scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n /** If set, displays labels next to points for the given axis */\n pointLabels?: 'x' | 'y';\n}\n\nfunction getAxis(key: string, dataKey: { x: string; y: string }) {\n return key === dataKey.x ? 'x' : 'y';\n}\n\nexport type ScatterChartFactory = Factory<{\n props: ScatterChartProps;\n ref: HTMLDivElement;\n stylesNames: ScatterChartStylesNames;\n vars: ScatterChartCssVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n tickLine: 'y',\n strokeDasharray: '5 5',\n gridAxis: 'x',\n} satisfies Partial<ScatterChartProps>;\n\nconst varsResolver = createVarsResolver<ScatterChartFactory>((theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n}));\n\nexport const ScatterChart = factory<ScatterChartFactory>((_props) => {\n const props = useProps('ScatterChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n referenceLines,\n dir,\n withLegend,\n withTooltip,\n withXAxis,\n withYAxis,\n xAxisProps,\n yAxisProps,\n orientation,\n scatterChartProps,\n legendProps,\n data,\n gridAxis,\n tickLine,\n strokeDasharray,\n gridProps,\n tooltipAnimationDuration,\n tooltipProps,\n children,\n onMouseLeave,\n dataKey,\n textColor,\n gridColor,\n xAxisLabel,\n yAxisLabel,\n unit,\n labels,\n valueFormatter,\n scatterProps,\n pointLabels,\n attributes,\n ...others\n } = props;\n\n const getFormatter = (axis: 'x' | 'y') =>\n typeof valueFormatter === 'function' ? valueFormatter : valueFormatter?.[axis];\n const xFormatter = getFormatter('x');\n const yFormatter = getFormatter('y');\n\n const theme = useMantineTheme();\n\n const mappedData = data.map((item) => ({\n ...item,\n data: item.data.map((point) => ({ ...point, name: item.name })),\n }));\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ScatterChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const getStyles = useStyles<ScatterChartFactory>({\n name: 'ScatterChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n const shouldHighlight = highlightedArea !== null;\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n\n const referenceLinesItems = referenceLines?.map((line, index) => {\n const color = getThemeColor(line.color, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={line.color ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n {...line}\n label={{\n 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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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Sparkline.cjs","names":["Box","ResponsiveContainer","ReChartsAreaChart","Area","AreaGradient","classes"],"sources":["../../src/Sparkline/Sparkline.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\nimport { Area, AreaProps, AreaChart as ReChartsAreaChart, ResponsiveContainer } from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { AreaChartCurveType, AreaGradient } from '../AreaChart';\nimport classes from './Sparkline.module.css';\n\nexport interface SparklineTrendColors {\n positive: MantineColor;\n negative: MantineColor;\n neutral?: MantineColor;\n}\n\nexport type SparklineStylesNames = 'root';\nexport type SparklineCssVariables = {\n root: '--chart-color';\n};\n\nexport interface SparklineProps\n extends BoxProps, StylesApiProps<SparklineFactory>, ElementProps<'div'> {\n /** Data used to render the chart */\n data: (number | null)[];\n\n /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Determines whether the chart fill should be a gradient @default true */\n withGradient?: boolean;\n\n /** Controls fill opacity of the area @default 0.6 */\n fillOpacity?: number;\n\n /** Type of the curve @default 'linear' */\n curveType?: AreaChartCurveType;\n\n /** Area stroke width @default 2 */\n strokeWidth?: number;\n\n /** If set, `color` prop is ignored and chart color is determined by the difference between first and last value. */\n trendColors?: SparklineTrendColors;\n\n /** Determines whether null values should be connected with other values @default true */\n connectNulls?: boolean;\n\n /** Props passed down to the underlying recharts `Area` component */\n areaProps?: Omit<AreaProps<any, any>, 'data' | 'dataKey' | 'ref'>;\n}\n\nexport type SparklineFactory = Factory<{\n props: SparklineProps;\n ref: HTMLDivElement;\n stylesNames: SparklineStylesNames;\n vars: SparklineCssVariables;\n}>;\n\nconst defaultProps = {\n withGradient: true,\n connectNulls: true,\n fillOpacity: 0.6,\n strokeWidth: 2,\n curveType: 'linear',\n} satisfies Partial<SparklineProps>;\n\nfunction getTrendColor(data: (number | null)[], trendColors: SparklineTrendColors) {\n const first = data[0];\n const last = data[data.length - 1];\n\n if (first === null || last === null) {\n return trendColors.neutral || trendColors.positive;\n }\n\n if (first < last) {\n return trendColors.positive;\n }\n\n if (first > last) {\n return trendColors.negative;\n }\n\n return trendColors.neutral || trendColors.positive;\n}\n\nconst varsResolver = createVarsResolver<SparklineFactory>(\n (theme, { color, data, trendColors }) => ({\n root: {\n '--chart-color': trendColors\n ? getThemeColor(getTrendColor(data, trendColors), theme)\n : color\n ? getThemeColor(color, theme)\n : undefined,\n },\n })\n);\n\nexport const Sparkline = factory<SparklineFactory>((_props) => {\n const props = useProps('Sparkline', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withGradient,\n fillOpacity,\n curveType,\n strokeWidth,\n trendColors,\n connectNulls,\n areaProps,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<SparklineFactory>({\n name: 'Sparkline',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const id = useId();\n const mappedData = useMemo(() => data.map((value, index) => ({ value, index })), [data]);\n\n return (\n <Box {...getStyles('root')} {...others} dir=\"ltr\">\n <ResponsiveContainer>\n <ReChartsAreaChart data={mappedData}>\n <Area\n dataKey=\"value\"\n type={curveType}\n fill={`url(#${id})`}\n stroke=\"var(--chart-color, var(--mantine-color-blue-filled))\"\n isAnimationActive={false}\n connectNulls={connectNulls}\n strokeWidth={strokeWidth}\n fillOpacity={1}\n activeDot={false}\n {...areaProps}\n />\n\n <defs>\n <AreaGradient\n id={id}\n color=\"var(--chart-color, var(--mantine-color-blue-filled))\"\n fillOpacity={fillOpacity}\n withGradient={withGradient}\n />\n </defs>\n </ReChartsAreaChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nSparkline.displayName = '@mantine/charts/Sparkline';\nSparkline.classes = classes;\nSparkline.varsResolver = varsResolver;\n\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,gBAAA,GAAA,cAAA,qBACH,OAAO,EAAE,OAAO,MAAM,mBAAmB,EACxC,MAAM,EACJ,iBAAiB,eAAA,GAAA,cAAA,eACC,cAAc,MAAM,YAAY,EAAE,MAAM,GACtD,SAAA,GAAA,cAAA,eACgB,OAAO,MAAM,GAC3B,KAAA,GACP,EACF,EACF;AAED,MAAa,aAAA,GAAA,cAAA,UAAuC,WAAW;CAC7D,MAAM,SAAA,GAAA,cAAA,UAAiB,aAAa,cAAc,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,cACA,aACA,WACA,aACA,aACA,cACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,WAAwC;EAC5C,MAAM;EACN,SAAA,yBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,MAAA,GAAA,MAAA,QAAY;CAClB,MAAM,cAAA,GAAA,MAAA,eAA2B,KAAK,KAAK,OAAO,WAAW;EAAE;EAAO;EAAO,EAAE,EAAE,CAAC,KAAK,CAAC;AAExF,QACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,GAAI;EAAQ,KAAI;YAC1C,iBAAA,GAAA,kBAAA,KAACC,SAAAA,qBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAACC,SAAAA,WAAD;GAAmB,MAAM;aAAzB,CACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,MAAD;IACE,SAAQ;IACR,MAAM;IACN,MAAM,QAAQ,GAAG;IACjB,QAAO;IACP,mBAAmB;IACL;IACD;IACb,aAAa;IACb,WAAW;IACX,GAAI;IACJ,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;IACM;IACJ,OAAM;IACO;IACC;IACd,CAAA,EACG,CAAA,CACW;MACA,CAAA;EAClB,CAAA;EAER;AAEF,UAAU,cAAc;AACxB,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe"}
1
+ {"version":3,"file":"Sparkline.cjs","names":["Box","ResponsiveContainer","ReChartsAreaChart","Area","AreaGradient","classes"],"sources":["../../src/Sparkline/Sparkline.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\nimport { Area, AreaProps, AreaChart as ReChartsAreaChart, ResponsiveContainer } from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { AreaChartCurveType, AreaGradient } from '../AreaChart';\nimport classes from './Sparkline.module.css';\n\nexport interface SparklineTrendColors {\n positive: MantineColor;\n negative: MantineColor;\n neutral?: MantineColor;\n}\n\nexport type SparklineStylesNames = 'root';\nexport type SparklineCssVariables = {\n root: '--chart-color';\n};\n\nexport interface SparklineProps\n extends BoxProps, StylesApiProps<SparklineFactory>, ElementProps<'div'> {\n /** Data used to render the chart */\n data: (number | null)[];\n\n /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Determines whether the chart fill should be a gradient @default true */\n withGradient?: boolean;\n\n /** Controls fill opacity of the area @default 0.6 */\n fillOpacity?: number;\n\n /** Type of the curve @default 'linear' */\n curveType?: AreaChartCurveType;\n\n /** Area stroke width @default 2 */\n strokeWidth?: number;\n\n /** If set, `color` prop is ignored and chart color is determined by the difference between first and last value. */\n trendColors?: SparklineTrendColors;\n\n /** Determines whether null values should be connected with other values @default true */\n connectNulls?: boolean;\n\n /** Props passed down to the underlying recharts `Area` component */\n areaProps?: Omit<AreaProps<any, any>, 'data' | 'dataKey' | 'ref'>;\n}\n\nexport type SparklineFactory = Factory<{\n props: SparklineProps;\n ref: HTMLDivElement;\n stylesNames: SparklineStylesNames;\n vars: SparklineCssVariables;\n}>;\n\nconst defaultProps = {\n withGradient: true,\n connectNulls: true,\n fillOpacity: 0.6,\n strokeWidth: 2,\n curveType: 'linear',\n} satisfies Partial<SparklineProps>;\n\nfunction getTrendColor(data: (number | null)[], trendColors: SparklineTrendColors) {\n const first = data[0];\n const last = data[data.length - 1];\n\n if (first === null || last === null) {\n return trendColors.neutral || trendColors.positive;\n }\n\n if (first < last) {\n return trendColors.positive;\n }\n\n if (first > last) {\n return trendColors.negative;\n }\n\n return trendColors.neutral || trendColors.positive;\n}\n\nconst varsResolver = createVarsResolver<SparklineFactory>(\n (theme, { color, data, trendColors }) => ({\n root: {\n '--chart-color': trendColors\n ? getThemeColor(getTrendColor(data, trendColors), theme)\n : color\n ? getThemeColor(color, theme)\n : undefined,\n },\n })\n);\n\nexport const Sparkline = factory<SparklineFactory>((_props) => {\n const props = useProps('Sparkline', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withGradient,\n fillOpacity,\n curveType,\n strokeWidth,\n trendColors,\n connectNulls,\n areaProps,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<SparklineFactory>({\n name: 'Sparkline',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const id = useId();\n const mappedData = useMemo(() => data.map((value, index) => ({ value, index })), [data]);\n\n return (\n <Box {...getStyles('root')} {...others} dir=\"ltr\">\n <ResponsiveContainer>\n <ReChartsAreaChart data={mappedData}>\n <Area\n dataKey=\"value\"\n type={curveType}\n fill={`url(#${id})`}\n stroke=\"var(--chart-color, var(--mantine-color-blue-filled))\"\n isAnimationActive={false}\n connectNulls={connectNulls}\n strokeWidth={strokeWidth}\n fillOpacity={1}\n activeDot={false}\n {...areaProps}\n />\n\n <defs>\n <AreaGradient\n id={id}\n color=\"var(--chart-color, var(--mantine-color-blue-filled))\"\n fillOpacity={fillOpacity}\n withGradient={withGradient}\n />\n </defs>\n </ReChartsAreaChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nSparkline.displayName = '@mantine/charts/Sparkline';\nSparkline.classes = classes;\nSparkline.varsResolver = varsResolver;\n\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;AACb;AAEA,SAAS,cAAc,MAAyB,aAAmC;CACjF,MAAM,QAAQ,KAAK;CACnB,MAAM,OAAO,KAAK,KAAK,SAAS;CAEhC,IAAI,UAAU,QAAQ,SAAS,MAC7B,OAAO,YAAY,WAAW,YAAY;CAG5C,IAAI,QAAQ,MACV,OAAO,YAAY;CAGrB,IAAI,QAAQ,MACV,OAAO,YAAY;CAGrB,OAAO,YAAY,WAAW,YAAY;AAC5C;AAEA,MAAM,gBAAA,GAAA,cAAA,qBACH,OAAO,EAAE,OAAO,MAAM,mBAAmB,EACxC,MAAM,EACJ,iBAAiB,eAAA,GAAA,cAAA,eACC,cAAc,MAAM,WAAW,GAAG,KAAK,IACrD,SAAA,GAAA,cAAA,eACgB,OAAO,KAAK,IAC1B,KAAA,EACR,EACF,EACF;AAEA,MAAa,aAAA,GAAA,cAAA,UAAuC,WAAW;CAC7D,MAAM,SAAA,GAAA,cAAA,UAAiB,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,cACA,aACA,WACA,aACA,aACA,cACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,WAAwC;EAC5C,MAAM;EACN,SAAA,yBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,MAAA,GAAA,MAAA,OAAW;CACjB,MAAM,cAAA,GAAA,MAAA,eAA2B,KAAK,KAAK,OAAO,WAAW;EAAE;EAAO;CAAM,EAAE,GAAG,CAAC,IAAI,CAAC;CAEvF,OACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,GAAI;EAAQ,KAAI;YAC1C,iBAAA,GAAA,kBAAA,KAACC,SAAAA,qBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAACC,SAAAA,WAAD;GAAmB,MAAM;aAAzB,CACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,MAAD;IACE,SAAQ;IACR,MAAM;IACN,MAAM,QAAQ,GAAG;IACjB,QAAO;IACP,mBAAmB;IACL;IACD;IACb,aAAa;IACb,WAAW;IACX,GAAI;GACL,CAAA,GAED,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;IACM;IACJ,OAAM;IACO;IACC;GACf,CAAA,EACG,CAAA,CACW;KACA,CAAA;CAClB,CAAA;AAET,CAAC;AAED,UAAU,cAAc;AACxB,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe"}
@@ -1 +1 @@
1
- {"version":3,"file":"Treemap.cjs","names":["Box","ResponsiveContainer","RechartsTreemap","Tooltip","ChartTooltip","classes"],"sources":["../../src/Treemap/Treemap.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Treemap as RechartsTreemap,\n TreemapProps as RechartsTreemapProps,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getThemeColor,\n isLightColor,\n MantineColor,\n MantineTheme,\n parseThemeColor,\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 './Treemap.module.css';\n\nexport interface TreemapData {\n name: string;\n value?: number;\n color?: MantineColor;\n children?: TreemapData[];\n [key: string]: unknown;\n}\n\nexport type TreemapStylesNames = 'root' | ChartTooltipStylesNames;\nexport type TreemapCssVariables = {\n root: '--chart-stroke-color' | '--chart-height';\n};\n\nexport interface TreemapProps\n extends BoxProps, StylesApiProps<TreemapFactory>, ElementProps<'div'> {\n /** Data used to render chart */\n data: TreemapData[];\n\n /** Key in data object for the value @default 'value' */\n dataKey?: string;\n\n /** The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given @default 1.618033988749895 */\n aspectRatio?: number;\n\n /** Determines whether the tooltip should be displayed when a node 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 `Treemap` component */\n treemapProps?: Partial<Omit<RechartsTreemapProps, 'ref' | 'data' | 'dataKey'>>;\n\n /** Controls color of the node stroke, by default depends on color scheme */\n strokeColor?: MantineColor;\n\n /** Controls text color of labels @default dimmed */\n textColor?: MantineColor;\n\n /** Controls chart height @default 300 */\n height?: number;\n\n /** Controls width of node stroke @default 1 */\n strokeWidth?: number;\n\n /** A function to format values inside the tooltip */\n valueFormatter?: (value: number) => string;\n\n /** Determines whether text color should be adjusted based on background color to improve contrast */\n autoContrast?: boolean;\n\n /** Additional elements rendered inside `Treemap` component */\n children?: React.ReactNode;\n}\n\nexport type TreemapFactory = Factory<{\n props: TreemapProps;\n ref: HTMLDivElement;\n stylesNames: TreemapStylesNames;\n vars: TreemapCssVariables;\n}>;\n\nconst defaultProps = {\n dataKey: 'value',\n withTooltip: true,\n tooltipAnimationDuration: 0,\n height: 300,\n strokeWidth: 1,\n aspectRatio: 0.5 * (1 + Math.sqrt(5)),\n} satisfies Partial<TreemapProps>;\n\nconst varsResolver = createVarsResolver<TreemapFactory>((theme, { strokeColor, height }) => ({\n root: {\n '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n '--chart-height': rem(height),\n },\n}));\n\ninterface TreemapContentProps {\n x: number;\n y: number;\n width: number;\n height: number;\n depth: number;\n name: string;\n resolvedColors: Record<string, string>;\n resolvedLabelColors: Record<string, string>;\n index: number;\n strokeWidth: number;\n}\n\nfunction TreemapContent({\n x,\n y,\n width,\n height,\n depth,\n name,\n resolvedColors,\n resolvedLabelColors,\n index,\n strokeWidth,\n}: TreemapContentProps) {\n const fill = resolvedColors[name] || `var(--mantine-color-blue-${(index % 9) + 1})`;\n const labelColor = resolvedLabelColors[name] || 'var(--mantine-color-white)';\n const showLabel = width > 30 && height > 20;\n\n return (\n <g>\n <rect\n x={x}\n y={y}\n width={width}\n height={height}\n fill={depth >= 1 ? fill : 'transparent'}\n stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n strokeWidth={depth >= 1 ? strokeWidth : 0}\n />\n {depth >= 1 && showLabel && (\n <text\n x={x + width / 2}\n y={y + height / 2}\n textAnchor=\"middle\"\n dominantBaseline=\"central\"\n fill={labelColor}\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {name}\n </text>\n )}\n </g>\n );\n}\n\nfunction resolveColors(\n data: TreemapData[],\n theme: MantineTheme,\n parentColor?: string\n): Record<string, string> {\n const result: Record<string, string> = {};\n for (const item of data) {\n const color = item.color || parentColor;\n if (color) {\n result[item.name] = parseThemeColor({ color, theme }).value;\n }\n if (item.children) {\n Object.assign(result, resolveColors(item.children, theme, color));\n }\n }\n return result;\n}\n\nfunction resolveLabelColors(\n resolvedColors: Record<string, string>,\n autoContrast: boolean,\n luminanceThreshold: number,\n textColor?: string\n): Record<string, string> {\n const result: Record<string, string> = {};\n for (const [name, color] of Object.entries(resolvedColors)) {\n if (textColor) {\n result[name] = textColor;\n } else if (autoContrast) {\n result[name] = isLightColor(color, luminanceThreshold)\n ? 'var(--mantine-color-black)'\n : 'var(--mantine-color-white)';\n }\n }\n return result;\n}\n\nexport const Treemap = factory<TreemapFactory>((_props) => {\n const props = useProps('Treemap', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n dataKey,\n aspectRatio,\n withTooltip,\n tooltipAnimationDuration,\n tooltipProps,\n treemapProps,\n strokeColor,\n textColor,\n height: chartHeight,\n strokeWidth,\n valueFormatter,\n autoContrast,\n children,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const resolvedColors = resolveColors(data, theme);\n const _autoContrast = getAutoContrastValue(autoContrast, theme);\n const _textColor = textColor ? getThemeColor(textColor, theme) : undefined;\n const resolvedLabelColors = resolveLabelColors(\n resolvedColors,\n _autoContrast,\n theme.luminanceThreshold,\n _textColor\n );\n\n const getStyles = useStyles<TreemapFactory>({\n name: 'Treemap',\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<TreemapFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer height={chartHeight}>\n <RechartsTreemap\n data={data as any}\n dataKey={dataKey as any}\n aspectRatio={aspectRatio}\n isAnimationActive={false}\n content={(nodeProps: any) => (\n <TreemapContent\n {...nodeProps}\n resolvedColors={resolvedColors}\n resolvedLabelColors={resolvedLabelColors}\n strokeWidth={strokeWidth!}\n />\n )}\n {...treemapProps}\n >\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => (\n <ChartTooltip\n payload={\n payload?.map((item) => ({\n name: item.name as string,\n value: item.value as number,\n color: resolvedColors[item.name as string] || 'var(--mantine-color-blue-6)',\n })) || []\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {children}\n </RechartsTreemap>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nTreemap.displayName = '@mantine/charts/Treemap';\nTreemap.classes = classes;\nTreemap.varsResolver = varsResolver;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Treemap.cjs","names":["Box","ResponsiveContainer","RechartsTreemap","Tooltip","ChartTooltip","classes"],"sources":["../../src/Treemap/Treemap.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Treemap as RechartsTreemap,\n TreemapProps as RechartsTreemapProps,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getThemeColor,\n isLightColor,\n MantineColor,\n MantineTheme,\n parseThemeColor,\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 './Treemap.module.css';\n\nexport interface TreemapData {\n name: string;\n value?: number;\n color?: MantineColor;\n children?: TreemapData[];\n [key: string]: unknown;\n}\n\nexport type TreemapStylesNames = 'root' | ChartTooltipStylesNames;\nexport type TreemapCssVariables = {\n root: '--chart-stroke-color' | '--chart-height';\n};\n\nexport interface TreemapProps\n extends BoxProps, StylesApiProps<TreemapFactory>, ElementProps<'div'> {\n /** Data used to render chart */\n data: TreemapData[];\n\n /** Key in data object for the value @default 'value' */\n dataKey?: string;\n\n /** The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given @default 1.618033988749895 */\n aspectRatio?: number;\n\n /** Determines whether the tooltip should be displayed when a node 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 `Treemap` component */\n treemapProps?: Partial<Omit<RechartsTreemapProps, 'ref' | 'data' | 'dataKey'>>;\n\n /** Controls color of the node stroke, by default depends on color scheme */\n strokeColor?: MantineColor;\n\n /** Controls text color of labels @default dimmed */\n textColor?: MantineColor;\n\n /** Controls chart height @default 300 */\n height?: number;\n\n /** Controls width of node stroke @default 1 */\n strokeWidth?: number;\n\n /** A function to format values inside the tooltip */\n valueFormatter?: (value: number) => string;\n\n /** Determines whether text color should be adjusted based on background color to improve contrast */\n autoContrast?: boolean;\n\n /** Additional elements rendered inside `Treemap` component */\n children?: React.ReactNode;\n}\n\nexport type TreemapFactory = Factory<{\n props: TreemapProps;\n ref: HTMLDivElement;\n stylesNames: TreemapStylesNames;\n vars: TreemapCssVariables;\n}>;\n\nconst defaultProps = {\n dataKey: 'value',\n withTooltip: true,\n tooltipAnimationDuration: 0,\n height: 300,\n strokeWidth: 1,\n aspectRatio: 0.5 * (1 + Math.sqrt(5)),\n} satisfies Partial<TreemapProps>;\n\nconst varsResolver = createVarsResolver<TreemapFactory>((theme, { strokeColor, height }) => ({\n root: {\n '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n '--chart-height': rem(height),\n },\n}));\n\ninterface TreemapContentProps {\n x: number;\n y: number;\n width: number;\n height: number;\n depth: number;\n name: string;\n resolvedColors: Record<string, string>;\n resolvedLabelColors: Record<string, string>;\n index: number;\n strokeWidth: number;\n}\n\nfunction TreemapContent({\n x,\n y,\n width,\n height,\n depth,\n name,\n resolvedColors,\n resolvedLabelColors,\n index,\n strokeWidth,\n}: TreemapContentProps) {\n const fill = resolvedColors[name] || `var(--mantine-color-blue-${(index % 9) + 1})`;\n const labelColor = resolvedLabelColors[name] || 'var(--mantine-color-white)';\n const showLabel = width > 30 && height > 20;\n\n return (\n <g>\n <rect\n x={x}\n y={y}\n width={width}\n height={height}\n fill={depth >= 1 ? fill : 'transparent'}\n stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n strokeWidth={depth >= 1 ? strokeWidth : 0}\n />\n {depth >= 1 && showLabel && (\n <text\n x={x + width / 2}\n y={y + height / 2}\n textAnchor=\"middle\"\n dominantBaseline=\"central\"\n fill={labelColor}\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {name}\n </text>\n )}\n </g>\n );\n}\n\nfunction resolveColors(\n data: TreemapData[],\n theme: MantineTheme,\n parentColor?: string\n): Record<string, string> {\n const result: Record<string, string> = {};\n for (const item of data) {\n const color = item.color || parentColor;\n if (color) {\n result[item.name] = parseThemeColor({ color, theme }).value;\n }\n if (item.children) {\n Object.assign(result, resolveColors(item.children, theme, color));\n }\n }\n return result;\n}\n\nfunction resolveLabelColors(\n resolvedColors: Record<string, string>,\n autoContrast: boolean,\n luminanceThreshold: number,\n textColor?: string\n): Record<string, string> {\n const result: Record<string, string> = {};\n for (const [name, color] of Object.entries(resolvedColors)) {\n if (textColor) {\n result[name] = textColor;\n } else if (autoContrast) {\n result[name] = isLightColor(color, luminanceThreshold)\n ? 'var(--mantine-color-black)'\n : 'var(--mantine-color-white)';\n }\n }\n return result;\n}\n\nexport const Treemap = factory<TreemapFactory>((_props) => {\n const props = useProps('Treemap', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n dataKey,\n aspectRatio,\n withTooltip,\n tooltipAnimationDuration,\n tooltipProps,\n treemapProps,\n strokeColor,\n textColor,\n height: chartHeight,\n strokeWidth,\n valueFormatter,\n autoContrast,\n children,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const resolvedColors = resolveColors(data, theme);\n const _autoContrast = getAutoContrastValue(autoContrast, theme);\n const _textColor = textColor ? getThemeColor(textColor, theme) : undefined;\n const resolvedLabelColors = resolveLabelColors(\n resolvedColors,\n _autoContrast,\n theme.luminanceThreshold,\n _textColor\n );\n\n const getStyles = useStyles<TreemapFactory>({\n name: 'Treemap',\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<TreemapFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer height={chartHeight}>\n <RechartsTreemap\n data={data as any}\n dataKey={dataKey as any}\n aspectRatio={aspectRatio}\n isAnimationActive={false}\n content={(nodeProps: any) => (\n <TreemapContent\n {...nodeProps}\n resolvedColors={resolvedColors}\n resolvedLabelColors={resolvedLabelColors}\n strokeWidth={strokeWidth!}\n />\n )}\n {...treemapProps}\n >\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => (\n <ChartTooltip\n payload={\n payload?.map((item) => ({\n name: item.name as string,\n value: item.value as number,\n color: resolvedColors[item.name as string] || 'var(--mantine-color-blue-6)',\n })) || []\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {children}\n </RechartsTreemap>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nTreemap.displayName = '@mantine/charts/Treemap';\nTreemap.classes = classes;\nTreemap.varsResolver = varsResolver;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"get-series-labels.cjs","names":[],"sources":["../../../src/utils/get-series-labels/get-series-labels.ts"],"sourcesContent":["import { ChartSeries } from '../../types';\n\ntype ChartSeriesLabels = Record<string, string | undefined>;\n\nexport function getSeriesLabels(series: ChartSeries[] | undefined): ChartSeriesLabels {\n if (!series) {\n return {};\n }\n\n return series.reduce<ChartSeriesLabels>((acc, item) => {\n const matchFound = item.name.search(/\\./);\n if (matchFound >= 0) {\n const key = item.name.substring(matchFound + 1);\n acc[key] = item.label;\n return acc;\n }\n acc[item.name] = item.label;\n return acc;\n }, {});\n}\n"],"mappings":";;AAIA,SAAgB,gBAAgB,QAAsD;AACpF,KAAI,CAAC,OACH,QAAO,EAAE;AAGX,QAAO,OAAO,QAA2B,KAAK,SAAS;EACrD,MAAM,aAAa,KAAK,KAAK,OAAO,KAAK;AACzC,MAAI,cAAc,GAAG;GACnB,MAAM,MAAM,KAAK,KAAK,UAAU,aAAa,EAAE;AAC/C,OAAI,OAAO,KAAK;AAChB,UAAO;;AAET,MAAI,KAAK,QAAQ,KAAK;AACtB,SAAO;IACN,EAAE,CAAC"}
1
+ {"version":3,"file":"get-series-labels.cjs","names":[],"sources":["../../../src/utils/get-series-labels/get-series-labels.ts"],"sourcesContent":["import { ChartSeries } from '../../types';\n\ntype ChartSeriesLabels = Record<string, string | undefined>;\n\nexport function getSeriesLabels(series: ChartSeries[] | undefined): ChartSeriesLabels {\n if (!series) {\n return {};\n }\n\n return series.reduce<ChartSeriesLabels>((acc, item) => {\n const matchFound = item.name.search(/\\./);\n if (matchFound >= 0) {\n const key = item.name.substring(matchFound + 1);\n acc[key] = item.label;\n return acc;\n }\n acc[item.name] = item.label;\n return acc;\n }, {});\n}\n"],"mappings":";;AAIA,SAAgB,gBAAgB,QAAsD;CACpF,IAAI,CAAC,QACH,OAAO,CAAC;CAGV,OAAO,OAAO,QAA2B,KAAK,SAAS;EACrD,MAAM,aAAa,KAAK,KAAK,OAAO,IAAI;EACxC,IAAI,cAAc,GAAG;GACnB,MAAM,MAAM,KAAK,KAAK,UAAU,aAAa,CAAC;GAC9C,IAAI,OAAO,KAAK;GAChB,OAAO;EACT;EACA,IAAI,KAAK,QAAQ,KAAK;EACtB,OAAO;CACT,GAAG,CAAC,CAAC;AACP"}
@@ -1 +1 @@
1
- {"version":3,"file":"AreaChart.mjs","names":["AreaChart","classes","Fragment","ReChartsAreaChart","Tooltip"],"sources":["../../src/AreaChart/AreaChart.tsx"],"sourcesContent":["import { Fragment, useId, useState } from 'react';\nimport {\n Area,\n AreaProps,\n CartesianGrid,\n Label,\n Legend,\n AreaChart as ReChartsAreaChart,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { PointLabel } from '../PointLabel/PointLabel';\nimport type {\n BaseChartStylesNames,\n ChartSeries,\n GridChartBaseProps,\n MantineChartDotProps,\n} from '../types';\nimport { AreaGradient } from './AreaGradient';\nimport { AreaSplit } from './AreaSplit';\nimport { getDefaultSplitOffset } from './get-split-offset';\nimport classes from '../grid-chart.module.css';\n\nfunction valueToPercent(value: number) {\n return `${(value * 100).toFixed(0)}%`;\n}\n\nexport interface AreaChartSeries extends ChartSeries {\n strokeDasharray?: string | number;\n color: MantineColor;\n curveType?: AreaChartCurveType;\n}\n\nexport type AreaChartType = 'default' | 'stacked' | 'percent' | 'split';\n\nexport type AreaChartCurveType =\n | 'bump'\n | 'linear'\n | 'natural'\n | 'monotone'\n | 'step'\n | 'stepBefore'\n | 'stepAfter';\n\nexport type AreaChartStylesNames =\n | 'area'\n | BaseChartStylesNames\n | ChartLegendStylesNames\n | ChartTooltipStylesNames;\n\nexport type AreaChartCSSVariables = {\n root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface AreaChartProps\n extends BoxProps, GridChartBaseProps, StylesApiProps<AreaChartFactory>, ElementProps<'div'> {\n /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */\n series: AreaChartSeries[];\n\n /** Controls how chart areas are positioned relative to each other @default 'default' */\n type?: AreaChartType;\n\n /** Determines whether the chart area should be represented with a gradient instead of the solid color @default false */\n withGradient?: boolean;\n\n /** Type of the curve @default 'monotone' */\n curveType?: AreaChartCurveType;\n\n /** Determines whether dots should be displayed @default true */\n withDots?: boolean;\n\n /** Props passed down to all dots. Ignored if `withDots={false}` is set. */\n dotProps?: MantineChartDotProps;\n\n /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */\n activeDotProps?: MantineChartDotProps;\n\n /** Stroke width for the chart areas @default 2 */\n strokeWidth?: number;\n\n /** Props passed down to recharts `AreaChart` component */\n areaChartProps?: React.ComponentProps<typeof ReChartsAreaChart>;\n\n /** Controls fill opacity of all areas @default 0.2 */\n fillOpacity?: number;\n\n /** A tuple of colors used when `type=\"split\"` is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors @default ['green.7', 'red.7'] */\n splitColors?: [MantineColor, MantineColor];\n\n /** Offset for the split gradient. By default, value is inferred from `data` and `series` if possible. Must be generated from the data array with `getSplitOffset` function. */\n splitOffset?: number;\n\n /** If set, points with `null` values are connected @default true */\n connectNulls?: boolean;\n\n /** Additional components that are rendered inside recharts `AreaChart` component */\n children?: React.ReactNode;\n\n /** Props passed down to recharts `Area` component */\n areaProps?:\n | ((series: AreaChartSeries) => Partial<Omit<AreaProps<any, any>, 'ref'>>)\n | Partial<Omit<AreaProps<any, any>, 'ref'>>;\n\n /** If set, each point has an associated label @default false */\n withPointLabels?: boolean;\n}\n\nexport type AreaChartFactory = Factory<{\n props: AreaChartProps;\n ref: HTMLDivElement;\n stylesNames: AreaChartStylesNames;\n vars: AreaChartCSSVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withDots: true,\n withTooltip: true,\n connectNulls: true,\n strokeWidth: 2,\n tooltipAnimationDuration: 0,\n fillOpacity: 0.2,\n tickLine: 'y',\n strokeDasharray: '5 5',\n curveType: 'monotone',\n gridAxis: 'x',\n type: 'default',\n splitColors: ['green.7', 'red.7'],\n orientation: 'horizontal',\n} satisfies Partial<AreaChartProps>;\n\nconst varsResolver = createVarsResolver<AreaChartFactory>((theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n}));\n\nexport const AreaChart = factory<AreaChartFactory>((_props) => {\n const props = useProps('AreaChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n series,\n withGradient,\n dataKey,\n withXAxis,\n withYAxis,\n curveType,\n gridProps,\n withDots,\n tickLine,\n strokeDasharray,\n gridAxis,\n unit,\n yAxisProps,\n xAxisProps,\n dotProps,\n activeDotProps,\n strokeWidth,\n tooltipAnimationDuration,\n type,\n legendProps,\n tooltipProps,\n withLegend,\n withTooltip,\n areaChartProps,\n fillOpacity,\n splitColors,\n splitOffset,\n connectNulls,\n onMouseLeave,\n orientation,\n referenceLines,\n dir,\n valueFormatter,\n children,\n areaProps,\n xAxisLabel,\n yAxisLabel,\n withRightYAxis,\n rightYAxisLabel,\n rightYAxisProps,\n withPointLabels,\n gridColor,\n textColor,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const baseId = useId();\n const splitId = `${baseId}-split`;\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n const isAnimationActive = (tooltipAnimationDuration || 0) > 0;\n const _withGradient = typeof withGradient === 'boolean' ? withGradient : type === 'default';\n const stacked = type === 'stacked' || type === 'percent';\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n const shouldHighlight = highlightedArea !== null;\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<AreaChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const getStyles = useStyles<AreaChartFactory>({\n name: 'AreaChart',\n classes: classes as any,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const dotsAreas = series.map((item) => {\n const color = getThemeColor(item.color, theme);\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n return (\n <Area\n {...getStyles('area')}\n activeDot={{ fill: theme.white, stroke: color, strokeWidth: 2, r: 4, ...activeDotProps }}\n dot={{ fill: color, fillOpacity: dimmed ? 0 : 1, strokeWidth: 2, r: 4, ...dotProps }}\n key={item.name}\n name={item.name}\n type={curveType}\n dataKey={item.name}\n fill=\"none\"\n strokeWidth={strokeWidth}\n stroke=\"none\"\n isAnimationActive={false}\n connectNulls={connectNulls}\n stackId={stacked ? 'stack-dots' : undefined}\n yAxisId={item.yAxisId || undefined}\n {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n />\n );\n });\n\n const areas = series.map((item) => {\n const id = `${baseId}-${item.color.replace(/[^a-zA-Z0-9]/g, '')}`;\n const color = getThemeColor(item.color, theme);\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n return (\n <Fragment key={item.name}>\n <defs>\n <AreaGradient\n color={color}\n withGradient={_withGradient}\n id={id}\n fillOpacity={fillOpacity}\n />\n </defs>\n <Area\n {...getStyles('area')}\n activeDot={false}\n dot={false}\n name={item.name}\n type={item.curveType ?? curveType}\n dataKey={item.name}\n fill={type === 'split' ? `url(#${splitId})` : `url(#${id})`}\n strokeWidth={strokeWidth}\n stroke={color}\n isAnimationActive={false}\n connectNulls={connectNulls}\n stackId={stacked ? 'stack' : undefined}\n fillOpacity={dimmed ? 0 : 1}\n strokeOpacity={dimmed ? 0.5 : 1}\n strokeDasharray={item.strokeDasharray}\n yAxisId={item.yAxisId || undefined}\n label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n />\n </Fragment>\n );\n });\n\n const referenceLinesItems = referenceLines?.map((line, index) => {\n const color = getThemeColor(line.color, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={line.color ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n yAxisId={line.yAxisId || undefined}\n {...line}\n label={{\n fill: line.color ? color : 'currentColor',\n fontSize: 12,\n position: line.labelPosition ?? 'insideBottomLeft',\n ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n }}\n {...getStyles('referenceLine')}\n />\n );\n });\n\n const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;\n\n const sharedYAxisProps = {\n axisLine: false,\n ...(orientation === 'vertical'\n ? { dataKey, type: 'category' as const }\n : { type: 'number' as const }),\n tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n allowDecimals: true,\n unit,\n tickFormatter: orientation === 'vertical' ? undefined : tickFormatter,\n ...getStyles('axis'),\n };\n\n return (\n <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n <ResponsiveContainer {...getStyles('container')}>\n <ReChartsAreaChart\n data={data}\n stackOffset={type === 'percent' ? 'expand' : undefined}\n layout={orientation}\n margin={{\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel ? 5 : undefined,\n }}\n {...areaChartProps}\n >\n {referenceLinesItems}\n {withLegend && (\n <Legend\n verticalAlign=\"top\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign || 'top'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n <CartesianGrid\n strokeDasharray={strokeDasharray as string}\n vertical={gridAxis === 'y' || gridAxis === 'xy'}\n horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n {...getStyles('grid')}\n {...gridProps}\n />\n\n <XAxis\n hide={!withXAxis}\n {...(orientation === 'vertical' ? { type: 'number' } : { dataKey })}\n tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n stroke=\"\"\n interval=\"preserveStartEnd\"\n tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n minTickGap={5}\n tickFormatter={orientation === 'vertical' ? tickFormatter : undefined}\n {...getStyles('axis')}\n {...xAxisProps}\n >\n {xAxisLabel && (\n <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n {xAxisLabel}\n </Label>\n )}\n {xAxisProps?.children}\n </XAxis>\n\n <YAxis\n orientation=\"left\"\n tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withYAxis}\n {...sharedYAxisProps}\n {...yAxisProps}\n >\n {yAxisLabel && (\n <Label\n position=\"insideLeft\"\n angle={-90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {yAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <YAxis\n yAxisId=\"right\"\n orientation=\"right\"\n tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withRightYAxis}\n {...sharedYAxisProps}\n {...rightYAxisProps}\n >\n {rightYAxisLabel && (\n <Label\n position=\"insideRight\"\n angle={90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {rightYAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={isAnimationActive}\n position={orientation === 'vertical' ? {} : { y: 0 }}\n cursor={{\n stroke: 'var(--chart-grid-color)',\n strokeWidth: 1,\n strokeDasharray,\n }}\n content={({ label, payload, labelFormatter }) => (\n <ChartTooltip\n label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n payload={payload}\n unit={unit}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {type === 'split' && (\n <defs>\n <AreaSplit\n colors={splitColors}\n id={splitId}\n offset={splitOffset ?? getDefaultSplitOffset({ data, series })}\n fillOpacity={fillOpacity}\n />\n </defs>\n )}\n\n {areas}\n {withDots && dotsAreas}\n {children}\n </ReChartsAreaChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nAreaChart.classes = classes;\nAreaChart.varsResolver = varsResolver;\nAreaChart.displayName = '@mantine/charts/AreaChart';\n\nexport namespace AreaChart {\n export type Props = AreaChartProps;\n export type StylesNames = AreaChartStylesNames;\n export type Factory = AreaChartFactory;\n export type Type = AreaChartType;\n export type Series = AreaChartSeries;\n export type CurveType = AreaChartCurveType;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"AreaChart.mjs","names":["AreaChart","classes","Fragment","ReChartsAreaChart","Tooltip"],"sources":["../../src/AreaChart/AreaChart.tsx"],"sourcesContent":["import { Fragment, useId, useState } from 'react';\nimport {\n Area,\n AreaProps,\n CartesianGrid,\n Label,\n Legend,\n AreaChart as ReChartsAreaChart,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { PointLabel } from '../PointLabel/PointLabel';\nimport type {\n BaseChartStylesNames,\n ChartSeries,\n GridChartBaseProps,\n MantineChartDotProps,\n} from '../types';\nimport { AreaGradient } from './AreaGradient';\nimport { AreaSplit } from './AreaSplit';\nimport { getDefaultSplitOffset } from './get-split-offset';\nimport classes from '../grid-chart.module.css';\n\nfunction valueToPercent(value: number) {\n return `${(value * 100).toFixed(0)}%`;\n}\n\nexport interface AreaChartSeries extends ChartSeries {\n strokeDasharray?: string | number;\n color: MantineColor;\n curveType?: AreaChartCurveType;\n}\n\nexport type AreaChartType = 'default' | 'stacked' | 'percent' | 'split';\n\nexport type AreaChartCurveType =\n | 'bump'\n | 'linear'\n | 'natural'\n | 'monotone'\n | 'step'\n | 'stepBefore'\n | 'stepAfter';\n\nexport type AreaChartStylesNames =\n | 'area'\n | BaseChartStylesNames\n | ChartLegendStylesNames\n | ChartTooltipStylesNames;\n\nexport type AreaChartCSSVariables = {\n root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface AreaChartProps\n extends BoxProps, GridChartBaseProps, StylesApiProps<AreaChartFactory>, ElementProps<'div'> {\n /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */\n series: AreaChartSeries[];\n\n /** Controls how chart areas are positioned relative to each other @default 'default' */\n type?: AreaChartType;\n\n /** Determines whether the chart area should be represented with a gradient instead of the solid color @default false */\n withGradient?: boolean;\n\n /** Type of the curve @default 'monotone' */\n curveType?: AreaChartCurveType;\n\n /** Determines whether dots should be displayed @default true */\n withDots?: boolean;\n\n /** Props passed down to all dots. Ignored if `withDots={false}` is set. */\n dotProps?: MantineChartDotProps;\n\n /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */\n activeDotProps?: MantineChartDotProps;\n\n /** Stroke width for the chart areas @default 2 */\n strokeWidth?: number;\n\n /** Props passed down to recharts `AreaChart` component */\n areaChartProps?: React.ComponentProps<typeof ReChartsAreaChart>;\n\n /** Controls fill opacity of all areas @default 0.2 */\n fillOpacity?: number;\n\n /** A tuple of colors used when `type=\"split\"` is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors @default ['green.7', 'red.7'] */\n splitColors?: [MantineColor, MantineColor];\n\n /** Offset for the split gradient. By default, value is inferred from `data` and `series` if possible. Must be generated from the data array with `getSplitOffset` function. */\n splitOffset?: number;\n\n /** If set, points with `null` values are connected @default true */\n connectNulls?: boolean;\n\n /** Additional components that are rendered inside recharts `AreaChart` component */\n children?: React.ReactNode;\n\n /** Props passed down to recharts `Area` component */\n areaProps?:\n | ((series: AreaChartSeries) => Partial<Omit<AreaProps<any, any>, 'ref'>>)\n | Partial<Omit<AreaProps<any, any>, 'ref'>>;\n\n /** If set, each point has an associated label @default false */\n withPointLabels?: boolean;\n}\n\nexport type AreaChartFactory = Factory<{\n props: AreaChartProps;\n ref: HTMLDivElement;\n stylesNames: AreaChartStylesNames;\n vars: AreaChartCSSVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withDots: true,\n withTooltip: true,\n connectNulls: true,\n strokeWidth: 2,\n tooltipAnimationDuration: 0,\n fillOpacity: 0.2,\n tickLine: 'y',\n strokeDasharray: '5 5',\n curveType: 'monotone',\n gridAxis: 'x',\n type: 'default',\n splitColors: ['green.7', 'red.7'],\n orientation: 'horizontal',\n} satisfies Partial<AreaChartProps>;\n\nconst varsResolver = createVarsResolver<AreaChartFactory>((theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n}));\n\nexport const AreaChart = factory<AreaChartFactory>((_props) => {\n const props = useProps('AreaChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n series,\n withGradient,\n dataKey,\n withXAxis,\n withYAxis,\n curveType,\n gridProps,\n withDots,\n tickLine,\n strokeDasharray,\n gridAxis,\n unit,\n yAxisProps,\n xAxisProps,\n dotProps,\n activeDotProps,\n strokeWidth,\n tooltipAnimationDuration,\n type,\n legendProps,\n tooltipProps,\n withLegend,\n withTooltip,\n areaChartProps,\n fillOpacity,\n splitColors,\n splitOffset,\n connectNulls,\n onMouseLeave,\n orientation,\n referenceLines,\n dir,\n valueFormatter,\n children,\n areaProps,\n xAxisLabel,\n yAxisLabel,\n withRightYAxis,\n rightYAxisLabel,\n rightYAxisProps,\n withPointLabels,\n gridColor,\n textColor,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const baseId = useId();\n const splitId = `${baseId}-split`;\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n const isAnimationActive = (tooltipAnimationDuration || 0) > 0;\n const _withGradient = typeof withGradient === 'boolean' ? withGradient : type === 'default';\n const stacked = type === 'stacked' || type === 'percent';\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n const shouldHighlight = highlightedArea !== null;\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<AreaChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const getStyles = useStyles<AreaChartFactory>({\n name: 'AreaChart',\n classes: classes as any,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const dotsAreas = series.map((item) => {\n const color = getThemeColor(item.color, theme);\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n return (\n <Area\n {...getStyles('area')}\n activeDot={{ fill: theme.white, stroke: color, strokeWidth: 2, r: 4, ...activeDotProps }}\n dot={{ fill: color, fillOpacity: dimmed ? 0 : 1, strokeWidth: 2, r: 4, ...dotProps }}\n key={item.name}\n name={item.name}\n type={curveType}\n dataKey={item.name}\n fill=\"none\"\n strokeWidth={strokeWidth}\n stroke=\"none\"\n isAnimationActive={false}\n connectNulls={connectNulls}\n stackId={stacked ? 'stack-dots' : undefined}\n yAxisId={item.yAxisId || undefined}\n {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n />\n );\n });\n\n const areas = series.map((item) => {\n const id = `${baseId}-${item.color.replace(/[^a-zA-Z0-9]/g, '')}`;\n const color = getThemeColor(item.color, theme);\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n return (\n <Fragment key={item.name}>\n <defs>\n <AreaGradient\n color={color}\n withGradient={_withGradient}\n id={id}\n fillOpacity={fillOpacity}\n />\n </defs>\n <Area\n {...getStyles('area')}\n activeDot={false}\n dot={false}\n name={item.name}\n type={item.curveType ?? curveType}\n dataKey={item.name}\n fill={type === 'split' ? `url(#${splitId})` : `url(#${id})`}\n strokeWidth={strokeWidth}\n stroke={color}\n isAnimationActive={false}\n connectNulls={connectNulls}\n stackId={stacked ? 'stack' : undefined}\n fillOpacity={dimmed ? 0 : 1}\n strokeOpacity={dimmed ? 0.5 : 1}\n strokeDasharray={item.strokeDasharray}\n yAxisId={item.yAxisId || undefined}\n label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n />\n </Fragment>\n );\n });\n\n const referenceLinesItems = referenceLines?.map((line, index) => {\n const color = getThemeColor(line.color, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={line.color ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n yAxisId={line.yAxisId || undefined}\n {...line}\n label={{\n fill: line.color ? color : 'currentColor',\n fontSize: 12,\n position: line.labelPosition ?? 'insideBottomLeft',\n ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n }}\n {...getStyles('referenceLine')}\n />\n );\n });\n\n const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;\n\n const sharedYAxisProps = {\n axisLine: false,\n ...(orientation === 'vertical'\n ? { dataKey, type: 'category' as const }\n : { type: 'number' as const }),\n tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n allowDecimals: true,\n unit,\n tickFormatter: orientation === 'vertical' ? undefined : tickFormatter,\n ...getStyles('axis'),\n };\n\n return (\n <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n <ResponsiveContainer {...getStyles('container')}>\n <ReChartsAreaChart\n data={data}\n stackOffset={type === 'percent' ? 'expand' : undefined}\n layout={orientation}\n margin={{\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel ? 5 : undefined,\n }}\n {...areaChartProps}\n >\n {referenceLinesItems}\n {withLegend && (\n <Legend\n verticalAlign=\"top\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign || 'top'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n <CartesianGrid\n strokeDasharray={strokeDasharray as string}\n vertical={gridAxis === 'y' || gridAxis === 'xy'}\n horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n {...getStyles('grid')}\n {...gridProps}\n />\n\n <XAxis\n hide={!withXAxis}\n {...(orientation === 'vertical' ? { type: 'number' } : { dataKey })}\n tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n stroke=\"\"\n interval=\"preserveStartEnd\"\n tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n minTickGap={5}\n tickFormatter={orientation === 'vertical' ? tickFormatter : undefined}\n {...getStyles('axis')}\n {...xAxisProps}\n >\n {xAxisLabel && (\n <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n {xAxisLabel}\n </Label>\n )}\n {xAxisProps?.children}\n </XAxis>\n\n <YAxis\n orientation=\"left\"\n tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withYAxis}\n {...sharedYAxisProps}\n {...yAxisProps}\n >\n {yAxisLabel && (\n <Label\n position=\"insideLeft\"\n angle={-90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {yAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <YAxis\n yAxisId=\"right\"\n orientation=\"right\"\n tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withRightYAxis}\n {...sharedYAxisProps}\n {...rightYAxisProps}\n >\n {rightYAxisLabel && (\n <Label\n position=\"insideRight\"\n angle={90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {rightYAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={isAnimationActive}\n position={orientation === 'vertical' ? {} : { y: 0 }}\n cursor={{\n stroke: 'var(--chart-grid-color)',\n strokeWidth: 1,\n strokeDasharray,\n }}\n content={({ label, payload, labelFormatter }) => (\n <ChartTooltip\n label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n payload={payload}\n unit={unit}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {type === 'split' && (\n <defs>\n <AreaSplit\n colors={splitColors}\n id={splitId}\n offset={splitOffset ?? getDefaultSplitOffset({ data, series })}\n fillOpacity={fillOpacity}\n />\n </defs>\n )}\n\n {areas}\n {withDots && dotsAreas}\n {children}\n </ReChartsAreaChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nAreaChart.classes = classes;\nAreaChart.varsResolver = varsResolver;\nAreaChart.displayName = '@mantine/charts/AreaChart';\n\nexport namespace AreaChart {\n export type Props = AreaChartProps;\n export type StylesNames = AreaChartStylesNames;\n export type Factory = AreaChartFactory;\n export type Type = AreaChartType;\n export type Series = AreaChartSeries;\n export type CurveType = AreaChartCurveType;\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"AreaGradient.mjs","names":[],"sources":["../../src/AreaChart/AreaGradient.tsx"],"sourcesContent":["interface AreaGradientProps {\n color: string;\n id: string;\n withGradient: boolean | undefined;\n fillOpacity: number | undefined;\n}\n\nexport function AreaGradient({ color, id, withGradient, fillOpacity }: AreaGradientProps) {\n return (\n <>\n {withGradient ? (\n <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={color} stopOpacity={fillOpacity} />\n <stop offset=\"100%\" stopColor={color} stopOpacity={0.01} />\n </linearGradient>\n ) : (\n <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stopColor={color} stopOpacity={fillOpacity ?? 0.2} />\n </linearGradient>\n )}\n </>\n );\n}\n\nAreaGradient.displayName = '@mantine/charts/AreaGradient';\n"],"mappings":";;;AAOA,SAAgB,aAAa,EAAE,OAAO,IAAI,cAAc,eAAkC;AACxF,QACE,oBAAA,UAAA,EAAA,UACG,eACC,qBAAC,kBAAD;EAAoB;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;YAAhD,CACE,oBAAC,QAAD;GAAM,QAAO;GAAK,WAAW;GAAO,aAAa;GAAe,CAAA,EAChE,oBAAC,QAAD;GAAM,QAAO;GAAO,WAAW;GAAO,aAAa;GAAQ,CAAA,CAC5C;MAEjB,oBAAC,kBAAD;EAAoB;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;YAC9C,oBAAC,QAAD;GAAM,WAAW;GAAO,aAAa,eAAe;GAAO,CAAA;EAC5C,CAAA,EAElB,CAAA;;AAIP,aAAa,cAAc"}
1
+ {"version":3,"file":"AreaGradient.mjs","names":[],"sources":["../../src/AreaChart/AreaGradient.tsx"],"sourcesContent":["interface AreaGradientProps {\n color: string;\n id: string;\n withGradient: boolean | undefined;\n fillOpacity: number | undefined;\n}\n\nexport function AreaGradient({ color, id, withGradient, fillOpacity }: AreaGradientProps) {\n return (\n <>\n {withGradient ? (\n <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={color} stopOpacity={fillOpacity} />\n <stop offset=\"100%\" stopColor={color} stopOpacity={0.01} />\n </linearGradient>\n ) : (\n <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stopColor={color} stopOpacity={fillOpacity ?? 0.2} />\n </linearGradient>\n )}\n </>\n );\n}\n\nAreaGradient.displayName = '@mantine/charts/AreaGradient';\n"],"mappings":";;;AAOA,SAAgB,aAAa,EAAE,OAAO,IAAI,cAAc,eAAkC;CACxF,OACE,oBAAA,UAAA,EAAA,UACG,eACC,qBAAC,kBAAD;EAAoB;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;YAAhD,CACE,oBAAC,QAAD;GAAM,QAAO;GAAK,WAAW;GAAO,aAAa;EAAc,CAAA,GAC/D,oBAAC,QAAD;GAAM,QAAO;GAAO,WAAW;GAAO,aAAa;EAAO,CAAA,CAC5C;MAEhB,oBAAC,kBAAD;EAAoB;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;YAC9C,oBAAC,QAAD;GAAM,WAAW;GAAO,aAAa,eAAe;EAAM,CAAA;CAC5C,CAAA,EAElB,CAAA;AAEN;AAEA,aAAa,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"AreaSplit.mjs","names":[],"sources":["../../src/AreaChart/AreaSplit.tsx"],"sourcesContent":["import { getThemeColor, MantineColor, useMantineTheme } from '@mantine/core';\n\ninterface AreaSplitProps {\n offset: number;\n colors: [MantineColor, MantineColor];\n id?: string;\n fillOpacity: number | undefined;\n}\n\nexport function AreaSplit({ offset, id, colors, fillOpacity }: AreaSplitProps) {\n const theme = useMantineTheme();\n\n return (\n <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop\n offset={offset}\n stopColor={getThemeColor(colors[0], theme)}\n stopOpacity={fillOpacity ?? 0.2}\n />\n <stop\n offset={offset}\n stopColor={getThemeColor(colors[1], theme)}\n stopOpacity={fillOpacity ?? 0.2}\n />\n </linearGradient>\n );\n}\n\nAreaSplit.displayName = '@mantine/charts/AreaSplit';\n"],"mappings":";;;;AASA,SAAgB,UAAU,EAAE,QAAQ,IAAI,QAAQ,eAA+B;CAC7E,MAAM,QAAQ,iBAAiB;AAE/B,QACE,qBAAC,kBAAD;EAAoB;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;YAAhD,CACE,oBAAC,QAAD;GACU;GACR,WAAW,cAAc,OAAO,IAAI,MAAM;GAC1C,aAAa,eAAe;GAC5B,CAAA,EACF,oBAAC,QAAD;GACU;GACR,WAAW,cAAc,OAAO,IAAI,MAAM;GAC1C,aAAa,eAAe;GAC5B,CAAA,CACa;;;AAIrB,UAAU,cAAc"}
1
+ {"version":3,"file":"AreaSplit.mjs","names":[],"sources":["../../src/AreaChart/AreaSplit.tsx"],"sourcesContent":["import { getThemeColor, MantineColor, useMantineTheme } from '@mantine/core';\n\ninterface AreaSplitProps {\n offset: number;\n colors: [MantineColor, MantineColor];\n id?: string;\n fillOpacity: number | undefined;\n}\n\nexport function AreaSplit({ offset, id, colors, fillOpacity }: AreaSplitProps) {\n const theme = useMantineTheme();\n\n return (\n <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop\n offset={offset}\n stopColor={getThemeColor(colors[0], theme)}\n stopOpacity={fillOpacity ?? 0.2}\n />\n <stop\n offset={offset}\n stopColor={getThemeColor(colors[1], theme)}\n stopOpacity={fillOpacity ?? 0.2}\n />\n </linearGradient>\n );\n}\n\nAreaSplit.displayName = '@mantine/charts/AreaSplit';\n"],"mappings":";;;;AASA,SAAgB,UAAU,EAAE,QAAQ,IAAI,QAAQ,eAA+B;CAC7E,MAAM,QAAQ,gBAAgB;CAE9B,OACE,qBAAC,kBAAD;EAAoB;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;YAAhD,CACE,oBAAC,QAAD;GACU;GACR,WAAW,cAAc,OAAO,IAAI,KAAK;GACzC,aAAa,eAAe;EAC7B,CAAA,GACD,oBAAC,QAAD;GACU;GACR,WAAW,cAAc,OAAO,IAAI,KAAK;GACzC,aAAa,eAAe;EAC7B,CAAA,CACa;;AAEpB;AAEA,UAAU,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"get-split-offset.mjs","names":[],"sources":["../../src/AreaChart/get-split-offset.ts"],"sourcesContent":["import type { ChartData } from '../types';\nimport type { AreaChartSeries } from './AreaChart';\n\ninterface GetSplitOffsetInput {\n data: ChartData;\n dataKey: string;\n}\n\nexport function getSplitOffset({ data, dataKey }: GetSplitOffsetInput) {\n const dataMax = Math.max(...data.map((item) => item[dataKey]));\n const dataMin = Math.min(...data.map((item) => item[dataKey]));\n\n if (dataMax <= 0) {\n return 0;\n }\n if (dataMin >= 0) {\n return 1;\n }\n\n return dataMax / (dataMax - dataMin);\n}\n\ninterface GetDefaultSplitOffsetInput {\n data: ChartData;\n series: AreaChartSeries[];\n}\n\nexport function getDefaultSplitOffset({ data, series }: GetDefaultSplitOffsetInput) {\n if (series.length === 1) {\n const dataKey = series[0].name;\n return getSplitOffset({ data, dataKey });\n }\n\n return 0.5;\n}\n"],"mappings":";;AAQA,SAAgB,eAAe,EAAE,MAAM,WAAgC;CACrE,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,KAAK,SAAS,KAAK,SAAS,CAAC;CAC9D,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,KAAK,SAAS,KAAK,SAAS,CAAC;AAE9D,KAAI,WAAW,EACb,QAAO;AAET,KAAI,WAAW,EACb,QAAO;AAGT,QAAO,WAAW,UAAU;;AAQ9B,SAAgB,sBAAsB,EAAE,MAAM,UAAsC;AAClF,KAAI,OAAO,WAAW,GAAG;EACvB,MAAM,UAAU,OAAO,GAAG;AAC1B,SAAO,eAAe;GAAE;GAAM;GAAS,CAAC;;AAG1C,QAAO"}
1
+ {"version":3,"file":"get-split-offset.mjs","names":[],"sources":["../../src/AreaChart/get-split-offset.ts"],"sourcesContent":["import type { ChartData } from '../types';\nimport type { AreaChartSeries } from './AreaChart';\n\ninterface GetSplitOffsetInput {\n data: ChartData;\n dataKey: string;\n}\n\nexport function getSplitOffset({ data, dataKey }: GetSplitOffsetInput) {\n const dataMax = Math.max(...data.map((item) => item[dataKey]));\n const dataMin = Math.min(...data.map((item) => item[dataKey]));\n\n if (dataMax <= 0) {\n return 0;\n }\n if (dataMin >= 0) {\n return 1;\n }\n\n return dataMax / (dataMax - dataMin);\n}\n\ninterface GetDefaultSplitOffsetInput {\n data: ChartData;\n series: AreaChartSeries[];\n}\n\nexport function getDefaultSplitOffset({ data, series }: GetDefaultSplitOffsetInput) {\n if (series.length === 1) {\n const dataKey = series[0].name;\n return getSplitOffset({ data, dataKey });\n }\n\n return 0.5;\n}\n"],"mappings":";;AAQA,SAAgB,eAAe,EAAE,MAAM,WAAgC;CACrE,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,KAAK,SAAS,KAAK,QAAQ,CAAC;CAC7D,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,KAAK,SAAS,KAAK,QAAQ,CAAC;CAE7D,IAAI,WAAW,GACb,OAAO;CAET,IAAI,WAAW,GACb,OAAO;CAGT,OAAO,WAAW,UAAU;AAC9B;AAOA,SAAgB,sBAAsB,EAAE,MAAM,UAAsC;CAClF,IAAI,OAAO,WAAW,GAAG;EACvB,MAAM,UAAU,OAAO,GAAG;EAC1B,OAAO,eAAe;GAAE;GAAM;EAAQ,CAAC;CACzC;CAEA,OAAO;AACT"}
@@ -1 +1 @@
1
- {"version":3,"file":"BarChart.mjs","names":["BarChart","ReChartsBarChart","Tooltip","classes"],"sources":["../../src/BarChart/BarChart.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n Bar,\n BarProps,\n BarShapeProps,\n CartesianGrid,\n Label,\n LabelList,\n LabelListProps,\n Legend,\n BarChart as ReChartsBarChart,\n Rectangle,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nfunction valueToPercent(value: number) {\n return `${(value * 100).toFixed(0)}%`;\n}\n\nexport interface BarChartSeries extends ChartSeries {\n stackId?: string;\n}\n\nexport type BarChartType = 'default' | 'stacked' | 'percent' | 'waterfall';\n\nexport type BarChartStylesNames =\n | 'bar'\n | BaseChartStylesNames\n | ChartLegendStylesNames\n | ChartTooltipStylesNames;\n\nexport type BarChartCssVariables = {\n root:\n | '--chart-text-color'\n | '--chart-grid-color'\n | '--chart-cursor-fill'\n | '--chart-bar-label-color';\n};\n\nexport interface BarChartProps\n extends BoxProps, GridChartBaseProps, StylesApiProps<BarChartFactory>, ElementProps<'div'> {\n /** Data used to display chart. */\n data: Record<string, any>[];\n\n /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */\n series: BarChartSeries[];\n\n /** Controls how bars are positioned relative to each other @default 'default' */\n type?: BarChartType;\n\n /** Controls fill opacity of all bars @default 1 */\n fillOpacity?: number;\n\n /** Fill of hovered bar section, by default value is based on color scheme */\n cursorFill?: MantineColor;\n\n /** Props passed down to recharts `BarChart` component */\n barChartProps?: React.ComponentProps<typeof ReChartsBarChart>;\n\n /** Additional components that are rendered inside recharts `BarChart` component */\n children?: React.ReactNode;\n\n /** Props passed down to recharts `Bar` component */\n barProps?:\n | ((series: BarChartSeries) => Partial<Omit<BarProps, 'ref'>>)\n | Partial<Omit<BarProps, 'ref'>>;\n\n /** Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type=\"stacked\"` and `type=\"percent\"` @default false */\n withBarValueLabel?: boolean;\n\n /** Props passed down to recharts `LabelList` component */\n valueLabelProps?:\n | ((series: BarChartSeries) => Partial<Omit<LabelListProps, 'ref'>>)\n | Partial<LabelListProps>;\n\n /** Sets minimum height of the bar in px @default 0 */\n minBarSize?: number;\n\n /** Maximum bar width in px */\n maxBarWidth?: number;\n\n /** Controls color of the bar label, by default the value is determined by the chart orientation */\n barLabelColor?: MantineColor;\n\n /** A function to assign dynamic bar color based on its value */\n getBarColor?: (value: number, series: BarChartSeries) => MantineColor;\n}\n\nexport type BarChartFactory = Factory<{\n props: BarChartProps;\n ref: HTMLDivElement;\n stylesNames: BarChartStylesNames;\n vars: BarChartCssVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n fillOpacity: 1,\n tickLine: 'y',\n strokeDasharray: '5 5',\n gridAxis: 'x',\n type: 'default',\n} satisfies Partial<BarChartProps>;\n\nconst varsResolver = createVarsResolver<BarChartFactory>(\n (theme, { textColor, gridColor, cursorFill, barLabelColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n '--chart-cursor-fill': cursorFill ? getThemeColor(cursorFill, theme) : undefined,\n '--chart-bar-label-color': barLabelColor ? getThemeColor(barLabelColor, theme) : undefined,\n },\n })\n);\n\nfunction calculateCumulativeTotal(waterfallData: Record<string, any>[], dataKey: string) {\n let start: number = 0;\n let end: number = 0;\n return waterfallData.map((item) => {\n if (item.standalone) {\n for (const prop in item) {\n if (typeof item[prop] === 'number' && prop !== dataKey) {\n item[prop] = [0, item[prop]];\n }\n }\n } else {\n for (const prop in item) {\n if (typeof item[prop] === 'number' && prop !== dataKey) {\n end += item[prop];\n item[prop] = [start, end];\n start = end;\n }\n }\n }\n return item;\n });\n}\n\nfunction getBarFill(barProps: BarChartProps['barProps'], series: BarChartSeries) {\n if (typeof barProps === 'function') {\n return barProps(series).fill;\n }\n\n return barProps?.fill;\n}\n\nexport const BarChart = factory<BarChartFactory>((_props) => {\n const props = useProps('BarChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withLegend,\n legendProps,\n series,\n onMouseLeave,\n dataKey,\n withTooltip,\n withXAxis,\n withYAxis,\n gridAxis,\n tickLine,\n xAxisProps,\n yAxisProps,\n unit,\n tooltipAnimationDuration,\n strokeDasharray,\n gridProps,\n tooltipProps,\n referenceLines,\n fillOpacity,\n barChartProps,\n type,\n orientation,\n dir,\n valueFormatter,\n children,\n barProps,\n xAxisLabel,\n yAxisLabel,\n withBarValueLabel,\n valueLabelProps,\n withRightYAxis,\n rightYAxisLabel,\n rightYAxisProps,\n minBarSize,\n maxBarWidth,\n mod,\n getBarColor,\n gridColor,\n textColor,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n const shouldHighlight = highlightedArea !== null;\n const stacked = type === 'stacked' || type === 'percent';\n const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;\n\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<BarChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const inputData = type === 'waterfall' ? calculateCumulativeTotal(data, dataKey) : data;\n\n const getStyles = useStyles<BarChartFactory>({\n name: 'BarChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const bars = series.map((item) => {\n const color = getThemeColor(item.color, theme);\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n const resolvedBarProps = typeof barProps === 'function' ? barProps(item) : barProps;\n const userShape = resolvedBarProps?.shape;\n\n return (\n <Bar\n {...getStyles('bar')}\n key={item.name}\n name={item.name}\n dataKey={item.name}\n fill={color}\n stroke={color}\n isAnimationActive={false}\n fillOpacity={dimmed ? 0.1 : fillOpacity}\n strokeOpacity={dimmed ? 0.2 : 0}\n stackId={stacked ? 'stack' : item.stackId || undefined}\n yAxisId={item.yAxisId || undefined}\n minPointSize={minBarSize}\n {...resolvedBarProps}\n shape={(shapeProps: BarShapeProps) => {\n const entry = shapeProps.payload;\n const cellColor = entry?.color\n ? getThemeColor(entry.color, theme)\n : typeof getBarColor === 'function'\n ? getThemeColor(getBarColor(entry?.[item.name], item), theme)\n : getBarFill(barProps, item) || color;\n const coloredProps = { ...shapeProps, fill: cellColor };\n if (typeof userShape === 'function') {\n return (userShape as (props: BarShapeProps) => React.ReactElement)(coloredProps);\n }\n if (React.isValidElement(userShape)) {\n return React.cloneElement(userShape, coloredProps as any);\n }\n if (typeof userShape === 'object' && userShape) {\n return <Rectangle {...coloredProps} {...(userShape as any)} />;\n }\n return <Rectangle {...coloredProps} />;\n }}\n >\n {withBarValueLabel && (\n <LabelList\n position={orientation === 'vertical' ? 'right' : 'top'}\n fontSize={12}\n fill=\"var(--chart-bar-label-color, var(--mantine-color-dimmed))\"\n formatter={(val: any) => tickFormatter?.(val as any)}\n {...(typeof valueLabelProps === 'function' ? valueLabelProps(item) : valueLabelProps)}\n />\n )}\n </Bar>\n );\n });\n\n const referenceLinesItems = referenceLines?.map((line, index) => {\n const color = getThemeColor(line.color, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={line.color ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n yAxisId={line.yAxisId || undefined}\n {...line}\n label={{\n fill: line.color ? color : 'currentColor',\n fontSize: 12,\n position: line.labelPosition ?? 'insideBottomLeft',\n ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n }}\n {...getStyles('referenceLine')}\n />\n );\n });\n\n const sharedYAxisProps = {\n axisLine: false,\n ...(orientation === 'vertical'\n ? { dataKey, type: 'category' as const }\n : { type: 'number' as const }),\n tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n allowDecimals: true,\n unit,\n tickFormatter: orientation === 'vertical' ? undefined : tickFormatter,\n ...getStyles('axis'),\n };\n\n return (\n <Box\n {...getStyles('root')}\n onMouseLeave={handleMouseLeave}\n dir={dir || 'ltr'}\n mod={[{ orientation }, mod]}\n {...others}\n >\n <ResponsiveContainer {...getStyles('container')}>\n <ReChartsBarChart\n data={inputData}\n stackOffset={type === 'percent' ? 'expand' : undefined}\n layout={orientation}\n maxBarSize={maxBarWidth}\n margin={{\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel ? 5 : undefined,\n }}\n {...barChartProps}\n >\n {withLegend && (\n <Legend\n verticalAlign=\"top\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign || 'top'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n showColor={type !== 'waterfall'}\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n <XAxis\n hide={!withXAxis}\n {...(orientation === 'vertical' ? { type: 'number' } : { dataKey })}\n tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n stroke=\"\"\n interval=\"preserveStartEnd\"\n tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n minTickGap={5}\n tickFormatter={orientation === 'vertical' ? tickFormatter : undefined}\n {...getStyles('axis')}\n {...xAxisProps}\n >\n {xAxisLabel && (\n <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n {xAxisLabel}\n </Label>\n )}\n {xAxisProps?.children}\n </XAxis>\n\n <YAxis\n orientation=\"left\"\n tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withYAxis}\n {...sharedYAxisProps}\n {...yAxisProps}\n >\n {yAxisLabel && (\n <Label\n position=\"insideLeft\"\n angle={-90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {yAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <YAxis\n yAxisId=\"right\"\n orientation=\"right\"\n tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withRightYAxis}\n {...sharedYAxisProps}\n {...rightYAxisProps}\n >\n {rightYAxisLabel && (\n <Label\n position=\"insideRight\"\n angle={90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {rightYAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <CartesianGrid\n strokeDasharray={strokeDasharray as string}\n vertical={gridAxis === 'y' || gridAxis === 'xy'}\n horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n {...getStyles('grid')}\n {...gridProps}\n />\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={tooltipAnimationDuration !== 0}\n position={orientation === 'vertical' ? {} : { y: 0 }}\n cursor={{\n stroke: 'var(--chart-grid-color)',\n strokeWidth: 1,\n strokeDasharray,\n fill: 'var(--chart-cursor-fill)',\n }}\n content={({ label, payload, labelFormatter }) => (\n <ChartTooltip\n label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n payload={payload}\n type={type === 'waterfall' ? 'scatter' : undefined}\n unit={unit}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {bars}\n {referenceLinesItems}\n {children}\n </ReChartsBarChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nBarChart.displayName = '@mantine/charts/BarChart';\nBarChart.classes = classes;\nBarChart.varsResolver = varsResolver;\n\nexport namespace BarChart {\n export type Props = BarChartProps;\n export type CssVariables = BarChartCssVariables;\n export type Factory = BarChartFactory;\n export type Series = BarChartSeries;\n export type StylesNames = BarChartStylesNames;\n export type Type = BarChartType;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"BarChart.mjs","names":["BarChart","ReChartsBarChart","Tooltip","classes"],"sources":["../../src/BarChart/BarChart.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n Bar,\n BarProps,\n BarShapeProps,\n CartesianGrid,\n Label,\n LabelList,\n LabelListProps,\n Legend,\n BarChart as ReChartsBarChart,\n Rectangle,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nfunction valueToPercent(value: number) {\n return `${(value * 100).toFixed(0)}%`;\n}\n\nexport interface BarChartSeries extends ChartSeries {\n stackId?: string;\n}\n\nexport type BarChartType = 'default' | 'stacked' | 'percent' | 'waterfall';\n\nexport type BarChartStylesNames =\n | 'bar'\n | BaseChartStylesNames\n | ChartLegendStylesNames\n | ChartTooltipStylesNames;\n\nexport type BarChartCssVariables = {\n root:\n | '--chart-text-color'\n | '--chart-grid-color'\n | '--chart-cursor-fill'\n | '--chart-bar-label-color';\n};\n\nexport interface BarChartProps\n extends BoxProps, GridChartBaseProps, StylesApiProps<BarChartFactory>, ElementProps<'div'> {\n /** Data used to display chart. */\n data: Record<string, any>[];\n\n /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */\n series: BarChartSeries[];\n\n /** Controls how bars are positioned relative to each other @default 'default' */\n type?: BarChartType;\n\n /** Controls fill opacity of all bars @default 1 */\n fillOpacity?: number;\n\n /** Fill of hovered bar section, by default value is based on color scheme */\n cursorFill?: MantineColor;\n\n /** Props passed down to recharts `BarChart` component */\n barChartProps?: React.ComponentProps<typeof ReChartsBarChart>;\n\n /** Additional components that are rendered inside recharts `BarChart` component */\n children?: React.ReactNode;\n\n /** Props passed down to recharts `Bar` component */\n barProps?:\n | ((series: BarChartSeries) => Partial<Omit<BarProps, 'ref'>>)\n | Partial<Omit<BarProps, 'ref'>>;\n\n /** Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type=\"stacked\"` and `type=\"percent\"` @default false */\n withBarValueLabel?: boolean;\n\n /** Props passed down to recharts `LabelList` component */\n valueLabelProps?:\n | ((series: BarChartSeries) => Partial<Omit<LabelListProps, 'ref'>>)\n | Partial<LabelListProps>;\n\n /** Sets minimum height of the bar in px @default 0 */\n minBarSize?: number;\n\n /** Maximum bar width in px */\n maxBarWidth?: number;\n\n /** Controls color of the bar label, by default the value is determined by the chart orientation */\n barLabelColor?: MantineColor;\n\n /** A function to assign dynamic bar color based on its value */\n getBarColor?: (value: number, series: BarChartSeries) => MantineColor;\n}\n\nexport type BarChartFactory = Factory<{\n props: BarChartProps;\n ref: HTMLDivElement;\n stylesNames: BarChartStylesNames;\n vars: BarChartCssVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n fillOpacity: 1,\n tickLine: 'y',\n strokeDasharray: '5 5',\n gridAxis: 'x',\n type: 'default',\n} satisfies Partial<BarChartProps>;\n\nconst varsResolver = createVarsResolver<BarChartFactory>(\n (theme, { textColor, gridColor, cursorFill, barLabelColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n '--chart-cursor-fill': cursorFill ? getThemeColor(cursorFill, theme) : undefined,\n '--chart-bar-label-color': barLabelColor ? getThemeColor(barLabelColor, theme) : undefined,\n },\n })\n);\n\nfunction calculateCumulativeTotal(waterfallData: Record<string, any>[], dataKey: string) {\n let start: number = 0;\n let end: number = 0;\n return waterfallData.map((item) => {\n if (item.standalone) {\n for (const prop in item) {\n if (typeof item[prop] === 'number' && prop !== dataKey) {\n item[prop] = [0, item[prop]];\n }\n }\n } else {\n for (const prop in item) {\n if (typeof item[prop] === 'number' && prop !== dataKey) {\n end += item[prop];\n item[prop] = [start, end];\n start = end;\n }\n }\n }\n return item;\n });\n}\n\nfunction getBarFill(barProps: BarChartProps['barProps'], series: BarChartSeries) {\n if (typeof barProps === 'function') {\n return barProps(series).fill;\n }\n\n return barProps?.fill;\n}\n\nexport const BarChart = factory<BarChartFactory>((_props) => {\n const props = useProps('BarChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withLegend,\n legendProps,\n series,\n onMouseLeave,\n dataKey,\n withTooltip,\n withXAxis,\n withYAxis,\n gridAxis,\n tickLine,\n xAxisProps,\n yAxisProps,\n unit,\n tooltipAnimationDuration,\n strokeDasharray,\n gridProps,\n tooltipProps,\n referenceLines,\n fillOpacity,\n barChartProps,\n type,\n orientation,\n dir,\n valueFormatter,\n children,\n barProps,\n xAxisLabel,\n yAxisLabel,\n withBarValueLabel,\n valueLabelProps,\n withRightYAxis,\n rightYAxisLabel,\n rightYAxisProps,\n minBarSize,\n maxBarWidth,\n mod,\n getBarColor,\n gridColor,\n textColor,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null);\n const shouldHighlight = highlightedArea !== null;\n const stacked = type === 'stacked' || type === 'percent';\n const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;\n\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<BarChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const inputData = type === 'waterfall' ? calculateCumulativeTotal(data, dataKey) : data;\n\n const getStyles = useStyles<BarChartFactory>({\n name: 'BarChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const bars = series.map((item) => {\n const color = getThemeColor(item.color, theme);\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n const resolvedBarProps = typeof barProps === 'function' ? barProps(item) : barProps;\n const userShape = resolvedBarProps?.shape;\n\n return (\n <Bar\n {...getStyles('bar')}\n key={item.name}\n name={item.name}\n dataKey={item.name}\n fill={color}\n stroke={color}\n isAnimationActive={false}\n fillOpacity={dimmed ? 0.1 : fillOpacity}\n strokeOpacity={dimmed ? 0.2 : 0}\n stackId={stacked ? 'stack' : item.stackId || undefined}\n yAxisId={item.yAxisId || undefined}\n minPointSize={minBarSize}\n {...resolvedBarProps}\n shape={(shapeProps: BarShapeProps) => {\n const entry = shapeProps.payload;\n const cellColor = entry?.color\n ? getThemeColor(entry.color, theme)\n : typeof getBarColor === 'function'\n ? getThemeColor(getBarColor(entry?.[item.name], item), theme)\n : getBarFill(barProps, item) || color;\n const coloredProps = { ...shapeProps, fill: cellColor };\n if (typeof userShape === 'function') {\n return (userShape as (props: BarShapeProps) => React.ReactElement)(coloredProps);\n }\n if (React.isValidElement(userShape)) {\n return React.cloneElement(userShape, coloredProps as any);\n }\n if (typeof userShape === 'object' && userShape) {\n return <Rectangle {...coloredProps} {...(userShape as any)} />;\n }\n return <Rectangle {...coloredProps} />;\n }}\n >\n {withBarValueLabel && (\n <LabelList\n position={orientation === 'vertical' ? 'right' : 'top'}\n fontSize={12}\n fill=\"var(--chart-bar-label-color, var(--mantine-color-dimmed))\"\n formatter={(val: any) => tickFormatter?.(val as any)}\n {...(typeof valueLabelProps === 'function' ? valueLabelProps(item) : valueLabelProps)}\n />\n )}\n </Bar>\n );\n });\n\n const referenceLinesItems = referenceLines?.map((line, index) => {\n const color = getThemeColor(line.color, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={line.color ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n yAxisId={line.yAxisId || undefined}\n {...line}\n label={{\n fill: line.color ? color : 'currentColor',\n fontSize: 12,\n position: line.labelPosition ?? 'insideBottomLeft',\n ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n }}\n {...getStyles('referenceLine')}\n />\n );\n });\n\n const sharedYAxisProps = {\n axisLine: false,\n ...(orientation === 'vertical'\n ? { dataKey, type: 'category' as const }\n : { type: 'number' as const }),\n tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n allowDecimals: true,\n unit,\n tickFormatter: orientation === 'vertical' ? undefined : tickFormatter,\n ...getStyles('axis'),\n };\n\n return (\n <Box\n {...getStyles('root')}\n onMouseLeave={handleMouseLeave}\n dir={dir || 'ltr'}\n mod={[{ orientation }, mod]}\n {...others}\n >\n <ResponsiveContainer {...getStyles('container')}>\n <ReChartsBarChart\n data={inputData}\n stackOffset={type === 'percent' ? 'expand' : undefined}\n layout={orientation}\n maxBarSize={maxBarWidth}\n margin={{\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel ? 5 : undefined,\n }}\n {...barChartProps}\n >\n {withLegend && (\n <Legend\n verticalAlign=\"top\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign || 'top'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n showColor={type !== 'waterfall'}\n attributes={attributes}\n />\n )}\n {...legendProps}\n />\n )}\n\n <XAxis\n hide={!withXAxis}\n {...(orientation === 'vertical' ? { type: 'number' } : { dataKey })}\n tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n stroke=\"\"\n interval=\"preserveStartEnd\"\n tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n minTickGap={5}\n tickFormatter={orientation === 'vertical' ? tickFormatter : undefined}\n {...getStyles('axis')}\n {...xAxisProps}\n >\n {xAxisLabel && (\n <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n {xAxisLabel}\n </Label>\n )}\n {xAxisProps?.children}\n </XAxis>\n\n <YAxis\n orientation=\"left\"\n tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withYAxis}\n {...sharedYAxisProps}\n {...yAxisProps}\n >\n {yAxisLabel && (\n <Label\n position=\"insideLeft\"\n angle={-90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {yAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <YAxis\n yAxisId=\"right\"\n orientation=\"right\"\n tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n hide={!withRightYAxis}\n {...sharedYAxisProps}\n {...rightYAxisProps}\n >\n {rightYAxisLabel && (\n <Label\n position=\"insideRight\"\n angle={90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {rightYAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <CartesianGrid\n strokeDasharray={strokeDasharray as string}\n vertical={gridAxis === 'y' || gridAxis === 'xy'}\n horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n {...getStyles('grid')}\n {...gridProps}\n />\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={tooltipAnimationDuration !== 0}\n position={orientation === 'vertical' ? {} : { y: 0 }}\n cursor={{\n stroke: 'var(--chart-grid-color)',\n strokeWidth: 1,\n strokeDasharray,\n fill: 'var(--chart-cursor-fill)',\n }}\n content={({ label, payload, labelFormatter }) => (\n <ChartTooltip\n label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n payload={payload}\n type={type === 'waterfall' ? 'scatter' : undefined}\n unit={unit}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={series}\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {bars}\n {referenceLinesItems}\n {children}\n </ReChartsBarChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nBarChart.displayName = '@mantine/charts/BarChart';\nBarChart.classes = classes;\nBarChart.varsResolver = varsResolver;\n\nexport namespace BarChart {\n export type Props = BarChartProps;\n export type CssVariables = BarChartCssVariables;\n export type Factory = BarChartFactory;\n export type Series = BarChartSeries;\n export type StylesNames = BarChartStylesNames;\n export type Type = BarChartType;\n}\n"],"mappings":"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"}