@mantine/charts 7.12.2 → 7.13.0

package/esm/index.mjs

@@ -11,4 +11,5 @@ export { PieChart } from './PieChart/PieChart.mjs';
 export { RadarChart } from './RadarChart/RadarChart.mjs';
 export { ScatterChart } from './ScatterChart/ScatterChart.mjs';
 export { BubbleChart } from './BubbleChart/BubbleChart.mjs';
+export { CompositeChart } from './CompositeChart/CompositeChart.mjs';
 //# sourceMappingURL=index.mjs.map

package/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/lib/AreaChart/AreaChart.d.ts

@@ -44,6 +44,8 @@ export interface AreaChartProps extends BoxProps, GridChartBaseProps, StylesApiP
     children?: React.ReactNode;
     /** Props passed down to recharts `Area` component */
     areaProps?: ((series: AreaChartSeries) => Partial<Omit<AreaProps, 'ref'>>) | Partial<Omit<AreaProps, 'ref'>>;
+    /** Determines whether each point should have associated label, `false` by default */
+    withPointLabels?: boolean;
 }
 export type AreaChartFactory = Factory<{
     props: AreaChartProps;

package/lib/BarChart/BarChart.d.ts

@@ -4,6 +4,7 @@ import { ChartLegendStylesNames } from '../ChartLegend';
 import { ChartTooltipStylesNames } from '../ChartTooltip';
 import type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';
 export interface BarChartSeries extends ChartSeries {
+    stackId?: string;
 }
 export type BarChartType = 'default' | 'stacked' | 'percent' | 'waterfall';
 export type BarChartStylesNames = 'bar' | BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
@@ -29,6 +30,10 @@ export interface BarChartProps extends BoxProps, GridChartBaseProps, StylesApiPr
     barProps?: ((series: BarChartSeries) => Partial<Omit<BarProps, 'ref'>>) | Partial<Omit<BarProps, 'ref'>>;
     /** Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type="stacked"` and `type="percent"`, `false` by default */
     withBarValueLabel?: boolean;
+    /** Sets minimum height of the bar in px, `0` by default */
+    minBarSize?: number;
+    /** Maximum bar width in px */
+    maxBarWidth?: number;
 }
 export type BarChartFactory = Factory<{
     props: BarChartProps;
@@ -36,6 +41,7 @@ export type BarChartFactory = Factory<{
     stylesNames: BarChartStylesNames;
     vars: BarChartCssVariables;
 }>;
+export declare function BarLabel({ value, valueFormatter, ...others }: Record<string, any>): import("react/jsx-runtime").JSX.Element;
 export declare const BarChart: import("@mantine/core").MantineComponent<{
     props: BarChartProps;
     ref: HTMLDivElement;

package/lib/CompositeChart/CompositeChart.d.ts

@@ -0,0 +1,62 @@
+import { AreaProps, BarProps, DotProps, LineProps, ComposedChart as ReChartsCompositeChart } from 'recharts';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+import { ChartLegendStylesNames } from '../ChartLegend';
+import { ChartTooltipStylesNames } from '../ChartTooltip';
+import type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';
+export type CompositeChartCurveType = 'bump' | 'linear' | 'natural' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
+export interface CompositeChartSeries extends ChartSeries {
+    type: 'line' | 'area' | 'bar';
+    strokeDasharray?: string | number;
+}
+export type CompositeChartStylesNames = 'line' | 'area' | 'bar' | BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
+export type CompositeChartCssVariables = {
+    root: '--chart-text-color' | '--chart-grid-color';
+};
+export interface CompositeChartProps extends BoxProps, Omit<GridChartBaseProps, 'orientation'>, StylesApiProps<CompositeChartFactory>, ElementProps<'div'> {
+    /** Data used to display chart */
+    data: Record<string, any>[];
+    /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */
+    series: CompositeChartSeries[];
+    /** Type of the curve, `'monotone'` by default */
+    curveType?: CompositeChartCurveType;
+    /** Determines whether dots should be displayed, `true` by default */
+    withDots?: boolean;
+    /** Props passed down to all dots. Ignored if `withDots={false}` is set. */
+    dotProps?: Omit<DotProps, 'ref'>;
+    /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */
+    activeDotProps?: Omit<DotProps, 'ref'>;
+    /** Stroke width for the chart lines, `2` by default */
+    strokeWidth?: number;
+    /** Determines whether points with `null` values should be connected, `true` by default */
+    connectNulls?: boolean;
+    /** Additional components that are rendered inside recharts `AreaChart` component */
+    children?: React.ReactNode;
+    /** Props passed down to recharts `Line` component */
+    lineProps?: ((series: CompositeChartSeries) => Partial<Omit<LineProps, 'ref'>>) | Partial<Omit<LineProps, 'ref'>>;
+    /** Props passed down to recharts `Area` component */
+    areaProps?: ((series: CompositeChartSeries) => Partial<Omit<AreaProps, 'ref'>>) | Partial<Omit<AreaProps, 'ref'>>;
+    /** Props passed down to recharts `Bar` component */
+    barProps?: ((series: CompositeChartSeries) => Partial<Omit<BarProps, 'ref'>>) | Partial<Omit<BarProps, 'ref'>>;
+    /** Determines whether each point should have associated label, `false` by default */
+    withPointLabels?: boolean;
+    /** Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type="stacked"` and `type="percent"`, `false` by default */
+    withBarValueLabel?: boolean;
+    /** Sets minimum height of the bar in px, `0` by default */
+    minBarSize?: number;
+    /** Maximum bar width in px */
+    maxBarWidth?: number;
+    /** Props passed down to recharts `AreaChart` component */
+    composedChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsCompositeChart>;
+}
+export type CompositeChartFactory = Factory<{
+    props: CompositeChartProps;
+    ref: HTMLDivElement;
+    stylesNames: CompositeChartStylesNames;
+    vars: CompositeChartCssVariables;
+}>;
+export declare const CompositeChart: import("@mantine/core").MantineComponent<{
+    props: CompositeChartProps;
+    ref: HTMLDivElement;
+    stylesNames: CompositeChartStylesNames;
+    vars: CompositeChartCssVariables;
+}>;

package/lib/CompositeChart/index.d.ts

@@ -0,0 +1,2 @@
+export { CompositeChart } from './CompositeChart';
+export type { CompositeChartCssVariables, CompositeChartCurveType, CompositeChartFactory, CompositeChartProps, CompositeChartSeries, CompositeChartStylesNames, } from './CompositeChart';

package/lib/LineChart/LineChart.d.ts

@@ -41,10 +41,12 @@ export interface LineChartProps extends BoxProps, GridChartBaseProps, StylesApiP
     lineChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsLineChart>;
     /** Determines whether points with `null` values should be connected, `true` by default */
     connectNulls?: boolean;
-    /** Additional components that are rendered inside recharts `AreaChart` component */
+    /** Additional components that are rendered inside recharts `LineChart` component */
     children?: React.ReactNode;
-    /** Props passed down to recharts `Area` component */
+    /** Props passed down to recharts `Line` component */
     lineProps?: ((series: LineChartSeries) => Partial<Omit<LineProps, 'ref'>>) | Partial<Omit<LineProps, 'ref'>>;
+    /** Determines whether each point should have associated label, `false` by default */
+    withPointLabels?: boolean;
 }
 export type LineChartFactory = Factory<{
     props: LineChartProps;

package/lib/PointLabel/PointLabel.d.ts

@@ -0,0 +1,7 @@
+interface PointLabelProps {
+    x?: number;
+    y?: number;
+    value?: number;
+}
+export declare function PointLabel({ x, y, value }: PointLabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ScatterChart/ScatterChart.d.ts

@@ -39,6 +39,8 @@ export interface ScatterChartProps extends Omit<GridChartBaseProps, 'dataKey' |
     scatterChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsScatterChart>;
     /** Props passed down to recharts `Scatter` component */
     scatterProps?: Omit<ScatterProps, 'ref'>;
+    /** If set, displays labels next to points for the given axis */
+    pointLabels?: 'x' | 'y';
 }
 export type ScatterChartFactory = Factory<{
     props: ScatterChartProps;

package/lib/index.d.mts

@@ -9,4 +9,5 @@ export * from './PieChart/index.js';
 export * from './RadarChart/index.js';
 export * from './ScatterChart/index.js';
 export * from './BubbleChart/index.js';
+export * from './CompositeChart/index.js';
 export * from './types';

package/lib/index.d.ts

@@ -9,4 +9,5 @@ export * from './PieChart/index.js';
 export * from './RadarChart/index.js';
 export * from './ScatterChart/index.js';
 export * from './BubbleChart/index.js';
+export * from './CompositeChart/index.js';
 export * from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/charts",
-  "version": "7.12.2",
+  "version": "7.13.0",
   "description": "Charts components built with recharts and Mantine",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,15 +35,15 @@
     "directory": "packages/@mantine/charts"
   },
   "peerDependencies": {
-    "@mantine/core": "7.12.2",
-    "@mantine/hooks": "7.12.2",
+    "@mantine/core": "7.13.0",
+    "@mantine/hooks": "7.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.10.3"
   },
   "devDependencies": {
     "@mantine-tests/core": "1.1.0",
-    "@mantine/core": "7.12.2",
-    "@mantine/hooks": "7.12.2"
+    "@mantine/core": "7.13.0",
+    "@mantine/hooks": "7.13.0"
   }
 }