@mantine/charts 7.4.0

package/lib/LineChart/LineChart.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { DotProps, LineChart as ReChartsLineChart } 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 LineChartCurveType = 'bump' | 'linear' | 'natural' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
+export interface LineChartSeries extends ChartSeries {
+    strokeDasharray?: string | number;
+}
+export type LineChartStylesNames = 'line' | BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
+export type LineChartCssVariables = {
+    root: '--chart-text-color' | '--chart-grid-color';
+};
+export interface LineChartProps extends BoxProps, GridChartBaseProps, StylesApiProps<LineChartFactory>, 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: LineChartSeries[];
+    /** Type of the curve, `'monotone'` by default */
+    curveType?: LineChartCurveType;
+    /** Controls fill opacity of all lines, `1` by default */
+    fillOpacity?: number;
+    /** 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;
+    /** Props passed down to recharts `LineChart` component */
+    lineChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsLineChart>;
+    /** Determines whether points with `null` values should be connected, `true` by default */
+    connectNulls?: boolean;
+}
+export type LineChartFactory = Factory<{
+    props: LineChartProps;
+    ref: HTMLDivElement;
+    stylesNames: LineChartStylesNames;
+    vars: LineChartCssVariables;
+}>;
+export declare const LineChart: import("@mantine/core").MantineComponent<{
+    props: LineChartProps;
+    ref: HTMLDivElement;
+    stylesNames: LineChartStylesNames;
+    vars: LineChartCssVariables;
+}>;

package/lib/LineChart/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChart } from './LineChart';
+export type { LineChartProps, LineChartCssVariables, LineChartFactory, LineChartSeries, LineChartStylesNames, LineChartCurveType, } from './LineChart';

package/lib/Sparkline/Sparkline.d.ts

@@ -0,0 +1,32 @@
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
+import { AreaChartCurveType } from '../AreaChart';
+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[];
+    /** 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;
+}
+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,7 @@
+export * from './ChartTooltip';
+export * from './ChartLegend';
+export * from './AreaChart';
+export * from './BarChart';
+export * from './LineChart';
+export * from './Sparkline';
+export * from './types';

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+export * from './ChartTooltip';
+export * from './ChartLegend';
+export * from './AreaChart';
+export * from './BarChart';
+export * from './LineChart';
+export * from './Sparkline';
+export * from './types';

package/lib/types.d.ts

@@ -0,0 +1,55 @@
+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;
+}
+export type BaseChartStylesNames = 'root' | 'container' | 'axis' | 'grid' | 'referenceLine';
+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 hidden, `true` by default */
+    withXAxis?: boolean;
+    /** Determines whether y-axis should be hidden, `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 `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';
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@mantine/charts",
+  "version": "7.4.0",
+  "description": "Charts components built with recharts and Mantine",
+  "homepage": "https://mantine.dev/",
+  "license": "MIT",
+  "author": "Vitaly Rtishchev <rtivital@gmail.com>",
+  "keywords": [
+    "react",
+    "ui"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./cjs/index.cjs",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    },
+    "./styles.css": "./styles.css",
+    "./styles.layer.css": "./styles.layer.css"
+  },
+  "repository": {
+    "url": "https://github.com/mantinedev/mantine.git",
+    "type": "git",
+    "directory": "packages/@mantine/charts"
+  },
+  "peerDependencies": {
+    "@mantine/core": "7.4.0",
+    "@mantine/hooks": "7.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "recharts": "^2.10.3"
+  },
+  "devDependencies": {
+    "@mantine-tests/core": "1.0.1",
+    "@mantine/core": "7.4.0",
+    "@mantine/hooks": "7.4.0"
+  }
+}

package/styles.css

@@ -0,0 +1 @@
+.m-e4d36c9b{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default);box-shadow:var(--mantine-shadow-md);min-width:calc(12.5rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-7f4bcb19{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-3de554dd{padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);padding-top:0}.m-3de8964e{display:flex;font-size:var(--mantine-font-size-sm);justify-content:space-between}.m-3de8964e:where(.m-3de8964e+.m-3de8964e){margin-top:calc(var(--mantine-spacing-sm)/2)}.m-50186d10{align-items:center;display:flex;gap:var(--mantine-spacing-sm);margin-right:var(--mantine-spacing-xl)}.m-501dadf9{color:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-50192318{color:var(--mantine-color-bright)}.m-847eaf{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:flex-end}.m-847eaf:where([data-position=top]){padding-bottom:var(--mantine-spacing-md)}.m-847eaf:where([data-position=bottom]){padding-top:var(--mantine-spacing-md)}.m-17da7e62{align-items:center;border-radius:var(--mantine-radius-default);display:flex;gap:calc(.4375rem*var(--mantine-scale));line-height:1;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-xs)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:active){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:active){background-color:var(--mantine-color-dark-5)}}.m-8ff56c0d{font-size:var(--mantine-font-size-sm);margin:0;padding:0}.m-a50f3e58{display:block;width:100%}:where([data-mantine-color-scheme=light]) .m-a50f3e58{--chart-grid-color:rgba(173,181,189,.6);--chart-cursor-fill:rgba(173,181,189,.15)}:where([data-mantine-color-scheme=dark]) .m-a50f3e58{--chart-cursor-fill:hsla(0,0%,41%,.15);--chart-grid-color:hsla(0,0%,41%,.6)}.m-a50f3e58 :where(text){color:var(--chart-text-color,var(--mantine-color-dimmed));font-family:var(--mantine-font-family)}.m-af9188cb{height:100%;width:100%}.m-a50a48bc{stroke:var(--chart-grid-color)}.m-a507a517{color:var(--chart-grid-color)}

package/styles.layer.css

@@ -0,0 +1 @@
+@layer mantine {.m-e4d36c9b{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default);box-shadow:var(--mantine-shadow-md);min-width:calc(12.5rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-7f4bcb19{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-3de554dd{padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);padding-top:0}.m-3de8964e{display:flex;font-size:var(--mantine-font-size-sm);justify-content:space-between}.m-3de8964e:where(.m-3de8964e+.m-3de8964e){margin-top:calc(var(--mantine-spacing-sm)/2)}.m-50186d10{align-items:center;display:flex;gap:var(--mantine-spacing-sm);margin-right:var(--mantine-spacing-xl)}.m-501dadf9{color:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-50192318{color:var(--mantine-color-bright)}.m-847eaf{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:flex-end}.m-847eaf:where([data-position=top]){padding-bottom:var(--mantine-spacing-md)}.m-847eaf:where([data-position=bottom]){padding-top:var(--mantine-spacing-md)}.m-17da7e62{align-items:center;border-radius:var(--mantine-radius-default);display:flex;gap:calc(.4375rem*var(--mantine-scale));line-height:1;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-xs)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:active){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:active){background-color:var(--mantine-color-dark-5)}}.m-8ff56c0d{font-size:var(--mantine-font-size-sm);margin:0;padding:0}.m-a50f3e58{display:block;width:100%}:where([data-mantine-color-scheme=light]) .m-a50f3e58{--chart-grid-color:rgba(173,181,189,.6);--chart-cursor-fill:rgba(173,181,189,.15)}:where([data-mantine-color-scheme=dark]) .m-a50f3e58{--chart-cursor-fill:hsla(0,0%,41%,.15);--chart-grid-color:hsla(0,0%,41%,.6)}.m-a50f3e58 :where(text){color:var(--chart-text-color,var(--mantine-color-dimmed));font-family:var(--mantine-font-family)}.m-af9188cb{height:100%;width:100%}.m-a50a48bc{stroke:var(--chart-grid-color)}.m-a507a517{color:var(--chart-grid-color)}}