@mantine/charts 7.13.5-alpha.0 → 7.13.5-alpha.2

package/lib/RadarChart/index.d.ts

@@ -0,0 +1,2 @@
+export { RadarChart } from './RadarChart';
+export type { RadarChartProps, RadarChartCssVariables, RadarChartFactory, RadarChartStylesNames, RadarChartSeries, } from './RadarChart';

package/lib/ScatterChart/ScatterChart.d.ts

@@ -0,0 +1,56 @@
+import { ScatterChart as ReChartsScatterChart, ScatterProps } from 'recharts';
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
+import { ChartLegendStylesNames } from '../ChartLegend';
+import { ChartTooltipStylesNames } from '../ChartTooltip';
+import { BaseChartStylesNames, GridChartBaseProps } from '../types';
+export interface ScatterChartSeries {
+    color: MantineColor;
+    name: string;
+    data: Record<string, number>[];
+}
+export type ScatterChartStylesNames = 'scatter' | BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
+export type ScatterChartCssVariables = {
+    root: '--chart-text-color' | '--chart-grid-color';
+};
+export interface ScatterChartProps extends Omit<GridChartBaseProps, 'dataKey' | 'data' | 'unit' | 'valueFormatter'>, BoxProps, StylesApiProps<ScatterChartFactory>, ElementProps<'div'> {
+    /** Keys that should be used to retrieve data from the data array on x and y axis */
+    dataKey: {
+        x: string;
+        y: string;
+    };
+    /** Data that is used to build the chart */
+    data: ScatterChartSeries[];
+    /** Units displayed after value on axis and inside the tooltip */
+    unit?: {
+        x?: string;
+        y?: string;
+    };
+    /** Labels that should be used instead of keys names in the tooltip */
+    labels?: {
+        x?: string;
+        y?: string;
+    };
+    /** A function to format values on x/y axis and in the tooltip */
+    valueFormatter?: GridChartBaseProps['valueFormatter'] | {
+        x?: GridChartBaseProps['valueFormatter'];
+        y?: GridChartBaseProps['valueFormatter'];
+    };
+    /** Props passed down to recharts `ScatterChart` component */
+    scatterChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsScatterChart>;
+    /** Props passed down to recharts `Scatter` component */
+    scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;
+    /** If set, displays labels next to points for the given axis */
+    pointLabels?: 'x' | 'y';
+}
+export type ScatterChartFactory = Factory<{
+    props: ScatterChartProps;
+    ref: HTMLDivElement;
+    stylesNames: ScatterChartStylesNames;
+    vars: ScatterChartCssVariables;
+}>;
+export declare const ScatterChart: import("@mantine/core").MantineComponent<{
+    props: ScatterChartProps;
+    ref: HTMLDivElement;
+    stylesNames: ScatterChartStylesNames;
+    vars: ScatterChartCssVariables;
+}>;

package/lib/ScatterChart/index.d.ts

@@ -0,0 +1,2 @@
+export { ScatterChart } from './ScatterChart';
+export type { ScatterChartProps, ScatterChartCssVariables, ScatterChartFactory, ScatterChartStylesNames, ScatterChartSeries, } from './ScatterChart';

package/lib/Sparkline/Sparkline.d.ts

@@ -0,0 +1,44 @@
+import { AreaProps } from 'recharts';
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
+import { AreaChartCurveType } from '../AreaChart';
+export interface SparklineTrendColors {
+    positive: MantineColor;
+    negative: MantineColor;
+    neutral?: MantineColor;
+}
+export type SparklineStylesNames = 'root';
+export type SparklineCssVariables = {
+    root: '--chart-color';
+};
+export interface SparklineProps extends BoxProps, StylesApiProps<SparklineFactory>, ElementProps<'div'> {
+    /** Data used to render the chart */
+    data: (number | null)[];
+    /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */
+    color?: MantineColor;
+    /** Determines whether the chart fill should be a gradient, `true` by default */
+    withGradient?: boolean;
+    /** Controls fill opacity of the area, `0.6` by default */
+    fillOpacity?: number;
+    /** Type of the curve, `'linear'` by default */
+    curveType?: AreaChartCurveType;
+    /** Area stroke width, `2` by default */
+    strokeWidth?: number;
+    /** If set, `color` prop is ignored and chart color is determined by the difference between first and last value. */
+    trendColors?: SparklineTrendColors;
+    /** Determines whether null values should be connected with other values, `true` by default */
+    connectNulls?: boolean;
+    /** Props passed down to the underlying recharts `Area` component */
+    areaProps?: Omit<AreaProps, 'data' | 'dataKey' | 'ref'>;
+}
+export type SparklineFactory = Factory<{
+    props: SparklineProps;
+    ref: HTMLDivElement;
+    stylesNames: SparklineStylesNames;
+    vars: SparklineCssVariables;
+}>;
+export declare const Sparkline: import("@mantine/core").MantineComponent<{
+    props: SparklineProps;
+    ref: HTMLDivElement;
+    stylesNames: SparklineStylesNames;
+    vars: SparklineCssVariables;
+}>;

package/lib/Sparkline/index.d.ts

@@ -0,0 +1,2 @@
+export { Sparkline } from './Sparkline';
+export type { SparklineCssVariables, SparklineFactory, SparklineProps, SparklineStylesNames, } from './Sparkline';

package/lib/index.d.mts

@@ -0,0 +1,13 @@
+export * from './ChartTooltip/index.js';
+export * from './ChartLegend/index.js';
+export * from './AreaChart/index.js';
+export * from './BarChart/index.js';
+export * from './LineChart/index.js';
+export * from './Sparkline/index.js';
+export * from './DonutChart/index.js';
+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

@@ -0,0 +1,13 @@
+export * from './ChartTooltip/index.js';
+export * from './ChartLegend/index.js';
+export * from './AreaChart/index.js';
+export * from './BarChart/index.js';
+export * from './LineChart/index.js';
+export * from './Sparkline/index.js';
+export * from './DonutChart/index.js';
+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/types.d.ts

@@ -0,0 +1,69 @@
+import type { CartesianGridProps, LabelProps, LegendProps, ReferenceLineProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
+import type { MantineColor } from '@mantine/core';
+export interface ChartReferenceLineProps extends Omit<ReferenceLineProps, 'ref' | 'label'> {
+    color?: MantineColor;
+    label?: string;
+    labelPosition?: LabelProps['position'];
+}
+export interface ChartSeries {
+    name: string;
+    color?: MantineColor;
+    label?: string;
+    yAxisId?: string;
+}
+export type BaseChartStylesNames = 'root' | 'container' | 'axis' | 'grid' | 'referenceLine' | 'axisLabel';
+export type ChartData = Record<string, any>[];
+export interface GridChartBaseProps {
+    /** Data used to display chart */
+    data: ChartData;
+    /** Key of the `data` object for x-axis values */
+    dataKey: string;
+    /** Reference lines that should be displayed on the chart */
+    referenceLines?: ChartReferenceLineProps[];
+    /** Determines whether x-axis should be displayed, `true` by default */
+    withXAxis?: boolean;
+    /** Determines whether y-axis should be displayed, `true` by default */
+    withYAxis?: boolean;
+    /** Props passed down to the `XAxis` recharts component */
+    xAxisProps?: Omit<XAxisProps, 'ref'>;
+    /** Props passed down to the `YAxis` recharts component */
+    yAxisProps?: Omit<YAxisProps, 'ref'>;
+    /** Props passed down to the `YAxis` recharts component rendered on the right side */
+    rightYAxisProps?: Omit<YAxisProps, 'ref'>;
+    /** Props passed down to the `CartesianGrid` component */
+    gridProps?: Omit<CartesianGridProps, 'ref'>;
+    /** Specifies which axis should have tick line, `'y'` by default */
+    tickLine?: 'x' | 'y' | 'xy' | 'none';
+    /** Dash array for the grid lines and cursor, `'5 5'` by default */
+    strokeDasharray?: string | number;
+    /** Specifies which lines should be displayed in the grid, `'x'` by default */
+    gridAxis?: 'x' | 'y' | 'xy' | 'none';
+    /** Unit displayed next to each tick in y-axis */
+    unit?: string;
+    /** Tooltip position animation duration in ms, `0` by default */
+    tooltipAnimationDuration?: number;
+    /** Props passed down to the `Legend` component */
+    legendProps?: Omit<LegendProps, 'ref'>;
+    /** Props passed down to the `Tooltip` component */
+    tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
+    /** Determines whether chart legend should be displayed, `false` by default */
+    withLegend?: boolean;
+    /** Determines whether chart tooltip should be displayed, `true` by default */
+    withTooltip?: boolean;
+    /** Color of the text displayed inside the chart, `'dimmed'` by default */
+    textColor?: MantineColor;
+    /** Color of the grid and cursor lines, by default depends on color scheme */
+    gridColor?: MantineColor;
+    /** Chart orientation, `'horizontal'` by default */
+    orientation?: 'horizontal' | 'vertical';
+    /** A function to format values on Y axis and inside the tooltip */
+    valueFormatter?: (value: number) => string;
+    /** A label to display below the x-axis */
+    xAxisLabel?: string;
+    /** A label to display next to the y-axis */
+    yAxisLabel?: string;
+    /** A label to display next to the right y-axis */
+    rightYAxisLabel?: string;
+    /** Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default */
+    withRightYAxis?: boolean;
+}

package/lib/utils/get-series-labels/get-series-labels.d.ts

@@ -0,0 +1,4 @@
+import { ChartSeries } from '../../types';
+type ChartSeriesLabels = Record<string, string | undefined>;
+export declare function getSeriesLabels(series: ChartSeries[] | undefined): ChartSeriesLabels;
+export {};

package/lib/utils/index.d.ts

@@ -0,0 +1 @@
+export { getSeriesLabels } from './get-series-labels/get-series-labels';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/charts",
-  "version": "7.13.5-alpha.0",
+  "version": "7.13.5-alpha.2",
   "description": "Charts components built with recharts and Mantine",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,11 +35,11 @@
     "directory": "packages/@mantine/charts"
   },
   "peerDependencies": {
-    "@mantine/core": "7.13.5-alpha.0",
-    "@mantine/hooks": "7.13.5-alpha.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "recharts": "^2.10.3"
+    "@mantine/core": "7.13.5-alpha.2",
+    "@mantine/hooks": "7.13.5-alpha.2",
+    "react": "^18.x || ^19.x",
+    "react-dom": "^18.x || ^19.x",
+    "recharts": "^2.13.3"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",

package/styles.css

@@ -29,11 +29,6 @@
     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;
@@ -126,6 +121,8 @@
 .m_a50f3e58 {
   display: block;
   width: 100%;
+
+  --chart-bar-label-color: var(--mantine-color-dimmed);
 }
 
   .m_a50f3e58 svg {
@@ -147,6 +144,10 @@
     color: var(--chart-text-color, var(--mantine-color-dimmed));
   }
 
+  .m_a50f3e58:where([data-orientation='vertical']) {
+    --chart-bar-label-color: var(--mantine-color-white);
+  }
+
 .m_af9188cb {
   height: 100%;
   width: 100%;
@@ -226,41 +227,3 @@
   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,11 +29,6 @@
     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;
@@ -126,6 +121,8 @@
 .m_a50f3e58 {
   display: block;
   width: 100%;
+
+  --chart-bar-label-color: var(--mantine-color-dimmed);
 }
 
   .m_a50f3e58 svg {
@@ -147,6 +144,10 @@
     color: var(--chart-text-color, var(--mantine-color-dimmed));
   }
 
+  .m_a50f3e58:where([data-orientation='vertical']) {
+    --chart-bar-label-color: var(--mantine-color-white);
+  }
+
 .m_af9188cb {
   height: 100%;
   width: 100%;
@@ -226,42 +227,4 @@
   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;
-  }
 }