@mantine/charts 7.13.5 → 7.14.1

package/lib/FunnelChart/index.d.ts

@@ -0,0 +1,2 @@
+export { FunnelChart } from './FunnelChart';
+export type { FunnelChartCssVariables, FunnelChartFactory, FunnelChartProps, FunnelChartStylesNames, FunnelChartCell, } from './FunnelChart';

package/lib/PointLabel/PointLabel.d.ts

@@ -2,6 +2,7 @@ interface PointLabelProps {
     x?: number;
     y?: number;
     value?: number;
+    valueFormatter?: (value: number) => string;
 }
-export declare function PointLabel({ x, y, value }: PointLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function PointLabel({ x, y, value, valueFormatter }: PointLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/RadialBarChart/RadialBarChart.d.ts

@@ -0,0 +1,48 @@
+import { LegendProps, RadialBarProps, RadialBarChart as ReChartsRadialBarChart, TooltipProps } from 'recharts';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+export type RadialBarChartStylesNames = 'root' | 'tooltip';
+export type RadialBarChartCssVariables = {
+    root: '--chart-empty-background';
+};
+export interface RadialBarChartProps extends BoxProps, StylesApiProps<RadialBarChartFactory>, ElementProps<'div'> {
+    /** Chart data */
+    data: Record<string, any>[];
+    /** Key from data object to use as data key */
+    dataKey: string;
+    /** Size of bars in px, `20` by default */
+    barSize?: number;
+    /** Determines whether empty bars area should be visible, `true` by default */
+    withBackground?: boolean;
+    /** Determines whether labels should be displayed, `false` by default */
+    withLabels?: boolean;
+    /** Determines whether the legend should be displayed, `false` by default */
+    withLegend?: boolean;
+    /** Determines whether the tooltip should be displayed when one of the bars is hovered, `true` by default */
+    withTooltip?: boolean;
+    /** Color of the empty background, by default depends on the color scheme */
+    emptyBackgroundColor?: string;
+    /** Angle at which chart starts, `90` by default */
+    startAngle?: number;
+    /** Angle at which chart ends, `-270` by default */
+    endAngle?: number;
+    /** Props passed down to recharts RadialBar component */
+    radialBarProps?: Omit<RadialBarProps, 'ref'>;
+    /** Props passed down to recharts RadarChartChart component */
+    radialBarChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsRadialBarChart>;
+    /** Props passed down to recharts Legend component */
+    legendProps?: Omit<LegendProps, 'ref'>;
+    /** Props passed down to `Tooltip` recharts component */
+    tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
+}
+export type RadialBarChartFactory = Factory<{
+    props: RadialBarChartProps;
+    ref: HTMLDivElement;
+    stylesNames: RadialBarChartStylesNames;
+    vars: RadialBarChartCssVariables;
+}>;
+export declare const RadialBarChart: import("@mantine/core").MantineComponent<{
+    props: RadialBarChartProps;
+    ref: HTMLDivElement;
+    stylesNames: RadialBarChartStylesNames;
+    vars: RadialBarChartCssVariables;
+}>;

package/lib/RadialBarChart/index.d.ts

@@ -0,0 +1,2 @@
+export { RadialBarChart } from './RadialBarChart';
+export type { RadialBarChartCssVariables, RadialBarChartFactory, RadialBarChartProps, RadialBarChartStylesNames, } from './RadialBarChart';

package/lib/index.d.mts

@@ -10,4 +10,6 @@ export * from './RadarChart/index.js';
 export * from './ScatterChart/index.js';
 export * from './BubbleChart/index.js';
 export * from './CompositeChart/index.js';
+export * from './RadialBarChart/index.js';
+export * from './FunnelChart/index.js';
 export * from './types';

package/lib/index.d.ts

@@ -10,4 +10,6 @@ export * from './RadarChart/index.js';
 export * from './ScatterChart/index.js';
 export * from './BubbleChart/index.js';
 export * from './CompositeChart/index.js';
+export * from './RadialBarChart/index.js';
+export * from './FunnelChart/index.js';
 export * from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/charts",
-  "version": "7.13.5",
+  "version": "7.14.1",
   "description": "Charts components built with recharts and Mantine",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "directory": "packages/@mantine/charts"
   },
   "peerDependencies": {
-    "@mantine/core": "7.13.5",
-    "@mantine/hooks": "7.13.5",
+    "@mantine/core": "7.14.1",
+    "@mantine/hooks": "7.14.1",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x",
     "recharts": "^2.13.3"

package/styles.css

@@ -29,6 +29,11 @@
     padding-top: var(--mantine-spacing-sm);
   }
 
+.m_b30369b5 {
+  width: calc(0.75rem * var(--mantine-scale));
+  height: calc(0.75rem * var(--mantine-scale));
+}
+
 .m_3de8964e {
   font-size: var(--mantine-font-size-sm);
   display: flex;
@@ -227,3 +232,41 @@
   height: 100%;
   width: 100%;
 }
+
+:where([data-mantine-color-scheme='light']) .m_cd2bd9e5 {
+    --chart-empty-background: var(--mantine-color-gray-1);
+    --chart-cursor-color: var(--mantine-color-gray-4);
+}
+  :where([data-mantine-color-scheme='dark']) .m_cd2bd9e5 {
+    --chart-empty-background: var(--mantine-color-dark-6);
+    --chart-cursor-color: var(--mantine-color-dark-4);
+}
+
+.m_6bcc3420 {
+  padding: var(--mantine-spacing-md);
+  box-shadow: var(--mantine-shadow-md);
+  min-width: calc(12.5rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+:where([data-mantine-color-scheme='light']) .m_6bcc3420 {
+    border: 1px solid var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_6bcc3420 {
+    border: 1px solid var(--mantine-color-dark-4);
+}
+
+.m_80d531e7 {
+  min-height: var(--chart-size, auto);
+  height: var(--chart-size, auto);
+  width: var(--chart-size, auto);
+  min-width: var(--chart-size, auto);
+}
+
+  .m_80d531e7 :where(*) {
+    outline: 0;
+  }

package/styles.layer.css

@@ -29,6 +29,11 @@
     padding-top: var(--mantine-spacing-sm);
   }
 
+.m_b30369b5 {
+  width: calc(0.75rem * var(--mantine-scale));
+  height: calc(0.75rem * var(--mantine-scale));
+}
+
 .m_3de8964e {
   font-size: var(--mantine-font-size-sm);
   display: flex;
@@ -227,4 +232,42 @@
   height: 100%;
   width: 100%;
 }
+
+:where([data-mantine-color-scheme='light']) .m_cd2bd9e5 {
+    --chart-empty-background: var(--mantine-color-gray-1);
+    --chart-cursor-color: var(--mantine-color-gray-4);
+}
+  :where([data-mantine-color-scheme='dark']) .m_cd2bd9e5 {
+    --chart-empty-background: var(--mantine-color-dark-6);
+    --chart-cursor-color: var(--mantine-color-dark-4);
+}
+
+.m_6bcc3420 {
+  padding: var(--mantine-spacing-md);
+  box-shadow: var(--mantine-shadow-md);
+  min-width: calc(12.5rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+:where([data-mantine-color-scheme='light']) .m_6bcc3420 {
+    border: 1px solid var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_6bcc3420 {
+    border: 1px solid var(--mantine-color-dark-4);
+}
+
+.m_80d531e7 {
+  min-height: var(--chart-size, auto);
+  height: var(--chart-size, auto);
+  width: var(--chart-size, auto);
+  min-width: var(--chart-size, auto);
+}
+
+  .m_80d531e7 :where(*) {
+    outline: 0;
+  }
 }