@mantine/charts 7.13.3 → 7.13.5-alpha.0

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 (132) hide show
  1. package/package.json +7 -7
  2. package/styles.css +43 -0
  3. package/styles.layer.css +43 -0
  4. package/cjs/AreaChart/AreaChart.cjs +0 -388
  5. package/cjs/AreaChart/AreaChart.cjs.map +0 -1
  6. package/cjs/AreaChart/AreaGradient.cjs +0 -15
  7. package/cjs/AreaChart/AreaGradient.cjs.map +0 -1
  8. package/cjs/AreaChart/AreaSplit.cjs +0 -31
  9. package/cjs/AreaChart/AreaSplit.cjs.map +0 -1
  10. package/cjs/AreaChart/get-split-offset.cjs +0 -25
  11. package/cjs/AreaChart/get-split-offset.cjs.map +0 -1
  12. package/cjs/BarChart/BarChart.cjs +0 -374
  13. package/cjs/BarChart/BarChart.cjs.map +0 -1
  14. package/cjs/BubbleChart/BubbleChart.cjs +0 -148
  15. package/cjs/BubbleChart/BubbleChart.cjs.map +0 -1
  16. package/cjs/ChartLegend/ChartLegend.cjs +0 -97
  17. package/cjs/ChartLegend/ChartLegend.cjs.map +0 -1
  18. package/cjs/ChartLegend/ChartLegend.module.css.cjs +0 -7
  19. package/cjs/ChartLegend/ChartLegend.module.css.cjs.map +0 -1
  20. package/cjs/ChartTooltip/ChartTooltip.cjs +0 -124
  21. package/cjs/ChartTooltip/ChartTooltip.cjs.map +0 -1
  22. package/cjs/ChartTooltip/ChartTooltip.module.css.cjs +0 -7
  23. package/cjs/ChartTooltip/ChartTooltip.module.css.cjs.map +0 -1
  24. package/cjs/CompositeChart/CompositeChart.cjs +0 -393
  25. package/cjs/CompositeChart/CompositeChart.cjs.map +0 -1
  26. package/cjs/DonutChart/DonutChart.cjs +0 -149
  27. package/cjs/DonutChart/DonutChart.cjs.map +0 -1
  28. package/cjs/DonutChart/DonutChart.module.css.cjs +0 -7
  29. package/cjs/DonutChart/DonutChart.module.css.cjs.map +0 -1
  30. package/cjs/LineChart/LineChart.cjs +0 -353
  31. package/cjs/LineChart/LineChart.cjs.map +0 -1
  32. package/cjs/PieChart/PieChart.cjs +0 -175
  33. package/cjs/PieChart/PieChart.cjs.map +0 -1
  34. package/cjs/PieChart/PieChart.module.css.cjs +0 -7
  35. package/cjs/PieChart/PieChart.module.css.cjs.map +0 -1
  36. package/cjs/PointLabel/PointLabel.cjs +0 -23
  37. package/cjs/PointLabel/PointLabel.cjs.map +0 -1
  38. package/cjs/RadarChart/RadarChart.cjs +0 -113
  39. package/cjs/RadarChart/RadarChart.cjs.map +0 -1
  40. package/cjs/RadarChart/RadarChart.module.css.cjs +0 -7
  41. package/cjs/RadarChart/RadarChart.module.css.cjs.map +0 -1
  42. package/cjs/ScatterChart/ScatterChart.cjs +0 -287
  43. package/cjs/ScatterChart/ScatterChart.cjs.map +0 -1
  44. package/cjs/Sparkline/Sparkline.cjs +0 -103
  45. package/cjs/Sparkline/Sparkline.cjs.map +0 -1
  46. package/cjs/grid-chart.module.css.cjs +0 -7
  47. package/cjs/grid-chart.module.css.cjs.map +0 -1
  48. package/cjs/index.cjs +0 -36
  49. package/cjs/index.cjs.map +0 -1
  50. package/cjs/utils/get-series-labels/get-series-labels.cjs +0 -21
  51. package/cjs/utils/get-series-labels/get-series-labels.cjs.map +0 -1
  52. package/esm/AreaChart/AreaChart.mjs +0 -386
  53. package/esm/AreaChart/AreaChart.mjs.map +0 -1
  54. package/esm/AreaChart/AreaGradient.mjs +0 -13
  55. package/esm/AreaChart/AreaGradient.mjs.map +0 -1
  56. package/esm/AreaChart/AreaSplit.mjs +0 -29
  57. package/esm/AreaChart/AreaSplit.mjs.map +0 -1
  58. package/esm/AreaChart/get-split-offset.mjs +0 -22
  59. package/esm/AreaChart/get-split-offset.mjs.map +0 -1
  60. package/esm/BarChart/BarChart.mjs +0 -371
  61. package/esm/BarChart/BarChart.mjs.map +0 -1
  62. package/esm/BubbleChart/BubbleChart.mjs +0 -146
  63. package/esm/BubbleChart/BubbleChart.mjs.map +0 -1
  64. package/esm/ChartLegend/ChartLegend.mjs +0 -94
  65. package/esm/ChartLegend/ChartLegend.mjs.map +0 -1
  66. package/esm/ChartLegend/ChartLegend.module.css.mjs +0 -5
  67. package/esm/ChartLegend/ChartLegend.module.css.mjs.map +0 -1
  68. package/esm/ChartTooltip/ChartTooltip.mjs +0 -121
  69. package/esm/ChartTooltip/ChartTooltip.mjs.map +0 -1
  70. package/esm/ChartTooltip/ChartTooltip.module.css.mjs +0 -5
  71. package/esm/ChartTooltip/ChartTooltip.module.css.mjs.map +0 -1
  72. package/esm/CompositeChart/CompositeChart.mjs +0 -391
  73. package/esm/CompositeChart/CompositeChart.mjs.map +0 -1
  74. package/esm/DonutChart/DonutChart.mjs +0 -147
  75. package/esm/DonutChart/DonutChart.mjs.map +0 -1
  76. package/esm/DonutChart/DonutChart.module.css.mjs +0 -5
  77. package/esm/DonutChart/DonutChart.module.css.mjs.map +0 -1
  78. package/esm/LineChart/LineChart.mjs +0 -351
  79. package/esm/LineChart/LineChart.mjs.map +0 -1
  80. package/esm/PieChart/PieChart.mjs +0 -173
  81. package/esm/PieChart/PieChart.mjs.map +0 -1
  82. package/esm/PieChart/PieChart.module.css.mjs +0 -5
  83. package/esm/PieChart/PieChart.module.css.mjs.map +0 -1
  84. package/esm/PointLabel/PointLabel.mjs +0 -21
  85. package/esm/PointLabel/PointLabel.mjs.map +0 -1
  86. package/esm/RadarChart/RadarChart.mjs +0 -111
  87. package/esm/RadarChart/RadarChart.mjs.map +0 -1
  88. package/esm/RadarChart/RadarChart.module.css.mjs +0 -5
  89. package/esm/RadarChart/RadarChart.module.css.mjs.map +0 -1
  90. package/esm/ScatterChart/ScatterChart.mjs +0 -285
  91. package/esm/ScatterChart/ScatterChart.mjs.map +0 -1
  92. package/esm/Sparkline/Sparkline.mjs +0 -101
  93. package/esm/Sparkline/Sparkline.mjs.map +0 -1
  94. package/esm/grid-chart.module.css.mjs +0 -5
  95. package/esm/grid-chart.module.css.mjs.map +0 -1
  96. package/esm/index.mjs +0 -15
  97. package/esm/index.mjs.map +0 -1
  98. package/esm/utils/get-series-labels/get-series-labels.mjs +0 -19
  99. package/esm/utils/get-series-labels/get-series-labels.mjs.map +0 -1
  100. package/lib/AreaChart/AreaChart.d.ts +0 -61
  101. package/lib/AreaChart/AreaGradient.d.ts +0 -11
  102. package/lib/AreaChart/AreaSplit.d.ts +0 -12
  103. package/lib/AreaChart/get-split-offset.d.ts +0 -13
  104. package/lib/AreaChart/index.d.ts +0 -4
  105. package/lib/BarChart/BarChart.d.ts +0 -50
  106. package/lib/BarChart/index.d.ts +0 -2
  107. package/lib/BubbleChart/BubbleChart.d.ts +0 -53
  108. package/lib/BubbleChart/index.d.ts +0 -2
  109. package/lib/ChartLegend/ChartLegend.d.ts +0 -28
  110. package/lib/ChartLegend/index.d.ts +0 -2
  111. package/lib/ChartTooltip/ChartTooltip.d.ts +0 -32
  112. package/lib/ChartTooltip/index.d.ts +0 -2
  113. package/lib/CompositeChart/CompositeChart.d.ts +0 -62
  114. package/lib/CompositeChart/index.d.ts +0 -2
  115. package/lib/DonutChart/DonutChart.d.ts +0 -65
  116. package/lib/DonutChart/index.d.ts +0 -2
  117. package/lib/LineChart/LineChart.d.ts +0 -62
  118. package/lib/LineChart/index.d.ts +0 -2
  119. package/lib/PieChart/PieChart.d.ts +0 -66
  120. package/lib/PieChart/index.d.ts +0 -2
  121. package/lib/PointLabel/PointLabel.d.ts +0 -7
  122. package/lib/RadarChart/RadarChart.d.ts +0 -58
  123. package/lib/RadarChart/index.d.ts +0 -2
  124. package/lib/ScatterChart/ScatterChart.d.ts +0 -56
  125. package/lib/ScatterChart/index.d.ts +0 -2
  126. package/lib/Sparkline/Sparkline.d.ts +0 -44
  127. package/lib/Sparkline/index.d.ts +0 -2
  128. package/lib/index.d.mts +0 -13
  129. package/lib/index.d.ts +0 -13
  130. package/lib/types.d.ts +0 -69
  131. package/lib/utils/get-series-labels/get-series-labels.d.ts +0 -4
  132. package/lib/utils/index.d.ts +0 -1
@@ -1,61 +0,0 @@
1
- import { AreaProps, DotProps, AreaChart as ReChartsAreaChart } from 'recharts';
2
- import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
3
- import { ChartLegendStylesNames } from '../ChartLegend';
4
- import { ChartTooltipStylesNames } from '../ChartTooltip';
5
- import type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';
6
- export interface AreaChartSeries extends ChartSeries {
7
- strokeDasharray?: string | number;
8
- color: MantineColor;
9
- }
10
- export type AreaChartType = 'default' | 'stacked' | 'percent' | 'split';
11
- export type AreaChartCurveType = 'bump' | 'linear' | 'natural' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
12
- export type AreaChartStylesNames = 'area' | BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
13
- export type AreaChartCSSVariables = {
14
- root: '--chart-text-color' | '--chart-grid-color';
15
- };
16
- export interface AreaChartProps extends BoxProps, GridChartBaseProps, StylesApiProps<AreaChartFactory>, ElementProps<'div'> {
17
- /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */
18
- series: AreaChartSeries[];
19
- /** Controls how chart areas are positioned relative to each other, `'default'` by default */
20
- type?: AreaChartType;
21
- /** Determines whether the chart area should be represented with a gradient instead of the solid color, `false` by default */
22
- withGradient?: boolean;
23
- /** Type of the curve, `'monotone'` by default */
24
- curveType?: AreaChartCurveType;
25
- /** Determines whether dots should be displayed, `true` by default */
26
- withDots?: boolean;
27
- /** Props passed down to all dots. Ignored if `withDots={false}` is set. */
28
- dotProps?: Omit<DotProps, 'ref'>;
29
- /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */
30
- activeDotProps?: Omit<DotProps, 'ref'>;
31
- /** Stroke width for the chart areas, `2` by default */
32
- strokeWidth?: number;
33
- /** Props passed down to recharts `AreaChart` component */
34
- areaChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsAreaChart>;
35
- /** Controls fill opacity of all areas, `0.2` by default */
36
- fillOpacity?: number;
37
- /** 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 `['green.7', 'red.7']` by default. */
38
- splitColors?: [MantineColor, MantineColor];
39
- /** 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. */
40
- splitOffset?: number;
41
- /** Determines whether points with `null` values should be connected, `true` by default */
42
- connectNulls?: boolean;
43
- /** Additional components that are rendered inside recharts `AreaChart` component */
44
- children?: React.ReactNode;
45
- /** Props passed down to recharts `Area` component */
46
- areaProps?: ((series: AreaChartSeries) => Partial<Omit<AreaProps, 'ref'>>) | Partial<Omit<AreaProps, 'ref'>>;
47
- /** Determines whether each point should have associated label, `false` by default */
48
- withPointLabels?: boolean;
49
- }
50
- export type AreaChartFactory = Factory<{
51
- props: AreaChartProps;
52
- ref: HTMLDivElement;
53
- stylesNames: AreaChartStylesNames;
54
- vars: AreaChartCSSVariables;
55
- }>;
56
- export declare const AreaChart: import("@mantine/core").MantineComponent<{
57
- props: AreaChartProps;
58
- ref: HTMLDivElement;
59
- stylesNames: AreaChartStylesNames;
60
- vars: AreaChartCSSVariables;
61
- }>;
@@ -1,11 +0,0 @@
1
- interface AreaGradientProps {
2
- color: string;
3
- id: string;
4
- withGradient: boolean | undefined;
5
- fillOpacity: number | undefined;
6
- }
7
- export declare function AreaGradient({ color, id, withGradient, fillOpacity }: AreaGradientProps): import("react/jsx-runtime").JSX.Element;
8
- export declare namespace AreaGradient {
9
- var displayName: string;
10
- }
11
- export {};
@@ -1,12 +0,0 @@
1
- import { MantineColor } from '@mantine/core';
2
- interface AreaSplitProps {
3
- offset: number;
4
- colors: [MantineColor, MantineColor];
5
- id?: string;
6
- fillOpacity: number | undefined;
7
- }
8
- export declare function AreaSplit({ offset, id, colors, fillOpacity }: AreaSplitProps): import("react/jsx-runtime").JSX.Element;
9
- export declare namespace AreaSplit {
10
- var displayName: string;
11
- }
12
- export {};
@@ -1,13 +0,0 @@
1
- import type { ChartData } from '../types';
2
- import type { AreaChartSeries } from './AreaChart';
3
- interface GetSplitOffsetInput {
4
- data: ChartData;
5
- dataKey: string;
6
- }
7
- export declare function getSplitOffset({ data, dataKey }: GetSplitOffsetInput): number;
8
- interface GetDefaultSplitOffsetInput {
9
- data: ChartData;
10
- series: AreaChartSeries[];
11
- }
12
- export declare function getDefaultSplitOffset({ data, series }: GetDefaultSplitOffsetInput): number;
13
- export {};
@@ -1,4 +0,0 @@
1
- export { AreaChart } from './AreaChart';
2
- export { getSplitOffset } from './get-split-offset';
3
- export { AreaGradient } from './AreaGradient';
4
- export type { AreaChartCurveType, AreaChartFactory, AreaChartProps, AreaChartStylesNames, AreaChartSeries, AreaChartType, } from './AreaChart';
@@ -1,50 +0,0 @@
1
- import { BarProps, BarChart as ReChartsBarChart } from 'recharts';
2
- import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
3
- import { ChartLegendStylesNames } from '../ChartLegend';
4
- import { ChartTooltipStylesNames } from '../ChartTooltip';
5
- import type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';
6
- export interface BarChartSeries extends ChartSeries {
7
- stackId?: string;
8
- }
9
- export type BarChartType = 'default' | 'stacked' | 'percent' | 'waterfall';
10
- export type BarChartStylesNames = 'bar' | BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
11
- export type BarChartCssVariables = {
12
- root: '--chart-text-color' | '--chart-grid-color' | '--chart-cursor-fill';
13
- };
14
- export interface BarChartProps extends BoxProps, GridChartBaseProps, StylesApiProps<BarChartFactory>, ElementProps<'div'> {
15
- /** Data used to display chart. */
16
- data: Record<string, any>[];
17
- /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */
18
- series: BarChartSeries[];
19
- /** Controls how bars are positioned relative to each other, `'default'` by default */
20
- type?: BarChartType;
21
- /** Controls fill opacity of all bars, `1` by default */
22
- fillOpacity?: number;
23
- /** Fill of hovered bar section, by default value is based on color scheme */
24
- cursorFill?: MantineColor;
25
- /** Props passed down to recharts `BarChart` component */
26
- barChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsBarChart>;
27
- /** Additional components that are rendered inside recharts `BarChart` component */
28
- children?: React.ReactNode;
29
- /** Props passed down to recharts `Bar` component */
30
- barProps?: ((series: BarChartSeries) => Partial<Omit<BarProps, 'ref'>>) | Partial<Omit<BarProps, 'ref'>>;
31
- /** 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 */
32
- withBarValueLabel?: boolean;
33
- /** Sets minimum height of the bar in px, `0` by default */
34
- minBarSize?: number;
35
- /** Maximum bar width in px */
36
- maxBarWidth?: number;
37
- }
38
- export type BarChartFactory = Factory<{
39
- props: BarChartProps;
40
- ref: HTMLDivElement;
41
- stylesNames: BarChartStylesNames;
42
- vars: BarChartCssVariables;
43
- }>;
44
- export declare function BarLabel({ value, valueFormatter, textBreakAll, parentViewBox, ...others }: Record<string, any>): import("react/jsx-runtime").JSX.Element;
45
- export declare const BarChart: import("@mantine/core").MantineComponent<{
46
- props: BarChartProps;
47
- ref: HTMLDivElement;
48
- stylesNames: BarChartStylesNames;
49
- vars: BarChartCssVariables;
50
- }>;
@@ -1,2 +0,0 @@
1
- export { BarChart } from './BarChart';
2
- export type { BarChartProps, BarChartCssVariables, BarChartFactory, BarChartSeries, BarChartStylesNames, BarChartType, } from './BarChart';
@@ -1,53 +0,0 @@
1
- import { ScatterProps, TooltipProps, XAxisProps, YAxisProps, ZAxisProps } from 'recharts';
2
- import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
3
- export type BubbleChartStylesNames = 'root' | 'axis' | 'tooltip';
4
- export type BubbleChartCssVariables = {
5
- root: '--chart-text-color' | '--chart-grid-color';
6
- };
7
- export interface BubbleChartDataKey {
8
- x: string;
9
- y: string;
10
- z: string;
11
- }
12
- export interface BubbleChartProps extends BoxProps, StylesApiProps<BubbleChartFactory>, ElementProps<'div'> {
13
- /** Chart data */
14
- data: Record<string, any>[];
15
- /** Data keys for x, y and z axis */
16
- dataKey: BubbleChartDataKey;
17
- /** Z axis range */
18
- range: [number, number];
19
- /** Color of the chart items. Key of `theme.colors` or any valid CSS color, `blue.6` by default. */
20
- color?: MantineColor;
21
- /** Props passed down to the `XAxis` recharts component */
22
- xAxisProps?: Omit<XAxisProps, 'ref'>;
23
- /** Props passed down to the `YAxis` recharts component */
24
- yAxisProps?: Omit<YAxisProps, 'ref'>;
25
- /** Props passed down to the `ZAxis` recharts component */
26
- zAxisProps?: Omit<ZAxisProps, 'ref'>;
27
- /** Props passed down to the `Tooltip` component */
28
- tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
29
- /** Props passed down to the `Scatter` component */
30
- scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;
31
- /** Color of the text displayed inside the chart, `'dimmed'` by default */
32
- textColor?: MantineColor;
33
- /** Color of the grid and cursor lines, by default depends on color scheme */
34
- gridColor?: MantineColor;
35
- /** Chart label displayed next to the x axis */
36
- label?: string;
37
- /** Determines whether the tooltip should be displayed, `true` by default */
38
- withTooltip?: boolean;
39
- /** Function to format z axis values */
40
- valueFormatter?: (value: number) => string;
41
- }
42
- export type BubbleChartFactory = Factory<{
43
- props: BubbleChartProps;
44
- ref: HTMLDivElement;
45
- stylesNames: BubbleChartStylesNames;
46
- vars: BubbleChartCssVariables;
47
- }>;
48
- export declare const BubbleChart: import("@mantine/core").MantineComponent<{
49
- props: BubbleChartProps;
50
- ref: HTMLDivElement;
51
- stylesNames: BubbleChartStylesNames;
52
- vars: BubbleChartCssVariables;
53
- }>;
@@ -1,2 +0,0 @@
1
- export { BubbleChart } from './BubbleChart';
2
- export type { BubbleChartCssVariables, BubbleChartFactory, BubbleChartProps, BubbleChartStylesNames, BubbleChartDataKey, } from './BubbleChart';
@@ -1,28 +0,0 @@
1
- import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
2
- import { ChartSeries } from '../types';
3
- export declare function getFilteredChartLegendPayload(payload: Record<string, any>[]): Record<string, any>[];
4
- export type ChartLegendStylesNames = 'legendItem' | 'legendItemColor' | 'legendItemName' | 'legend';
5
- export interface ChartLegendProps extends BoxProps, StylesApiProps<ChartLegendFactory>, ElementProps<'div'> {
6
- /** Chart data provided by recharts */
7
- payload: Record<string, any>[] | undefined;
8
- /** Function called when mouse enters/leaves one of the legend items */
9
- onHighlight: (area: string | null) => void;
10
- /** Position of the legend relative to the chart, used to apply margin on the corresponding side */
11
- legendPosition: 'top' | 'bottom' | 'middle';
12
- /** Data used for labels, only applicable for area charts: AreaChart, LineChart, BarChart */
13
- series?: ChartSeries[];
14
- /** Determines whether color swatch should be shown next to the label, `true` by default */
15
- showColor?: boolean;
16
- /** Determines whether the legend should be centered, `false` by default */
17
- centered?: boolean;
18
- }
19
- export type ChartLegendFactory = Factory<{
20
- props: ChartLegendProps;
21
- ref: HTMLDivElement;
22
- stylesNames: ChartLegendStylesNames;
23
- }>;
24
- export declare const ChartLegend: import("@mantine/core").MantineComponent<{
25
- props: ChartLegendProps;
26
- ref: HTMLDivElement;
27
- stylesNames: ChartLegendStylesNames;
28
- }>;
@@ -1,2 +0,0 @@
1
- export { ChartLegend, getFilteredChartLegendPayload } from './ChartLegend';
2
- export type { ChartLegendFactory, ChartLegendProps, ChartLegendStylesNames } from './ChartLegend';
@@ -1,32 +0,0 @@
1
- import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
2
- import { ChartSeries } from '../types';
3
- export declare function getFilteredChartTooltipPayload(payload: Record<string, any>[], segmentId?: string): Record<string, any>[];
4
- export type ChartTooltipStylesNames = 'tooltip' | 'tooltipItem' | 'tooltipItemBody' | 'tooltipItemColor' | 'tooltipItemName' | 'tooltipItemData' | 'tooltipLabel' | 'tooltipBody';
5
- export interface ChartTooltipProps extends BoxProps, StylesApiProps<ChartTooltipFactory>, ElementProps<'div'> {
6
- /** Main tooltip label */
7
- label?: React.ReactNode;
8
- /** Chart data provided by recharts */
9
- payload: Record<string, any>[] | undefined;
10
- /** Data units, provided by parent component */
11
- unit?: string;
12
- /** Tooltip type that determines the content and styles, `area` for LineChart, AreaChart and BarChart, `radial` for DonutChart and PieChart, `'area'` by default */
13
- type?: 'area' | 'radial' | 'scatter';
14
- /** Id of the segment to display data for. Only applicable when `type="radial"`. If not set, all data is rendered. */
15
- segmentId?: string;
16
- /** Chart series data, applicable only for `area` type */
17
- series?: ChartSeries[];
18
- /** A function to format values */
19
- valueFormatter?: (value: number) => string;
20
- /** Determines whether the color swatch should be visible, `true` by default */
21
- showColor?: boolean;
22
- }
23
- export type ChartTooltipFactory = Factory<{
24
- props: ChartTooltipProps;
25
- ref: HTMLDivElement;
26
- stylesNames: ChartTooltipStylesNames;
27
- }>;
28
- export declare const ChartTooltip: import("@mantine/core").MantineComponent<{
29
- props: ChartTooltipProps;
30
- ref: HTMLDivElement;
31
- stylesNames: ChartTooltipStylesNames;
32
- }>;
@@ -1,2 +0,0 @@
1
- export { ChartTooltip, getFilteredChartTooltipPayload } from './ChartTooltip';
2
- export type { ChartTooltipFactory, ChartTooltipProps, ChartTooltipStylesNames, } from './ChartTooltip';
@@ -1,62 +0,0 @@
1
- import { AreaProps, BarProps, DotProps, LineProps, ComposedChart as ReChartsCompositeChart } from 'recharts';
2
- import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
3
- import { ChartLegendStylesNames } from '../ChartLegend';
4
- import { ChartTooltipStylesNames } from '../ChartTooltip';
5
- import type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';
6
- export type CompositeChartCurveType = 'bump' | 'linear' | 'natural' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
7
- export interface CompositeChartSeries extends ChartSeries {
8
- type: 'line' | 'area' | 'bar';
9
- strokeDasharray?: string | number;
10
- }
11
- export type CompositeChartStylesNames = 'line' | 'area' | 'bar' | BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
12
- export type CompositeChartCssVariables = {
13
- root: '--chart-text-color' | '--chart-grid-color';
14
- };
15
- export interface CompositeChartProps extends BoxProps, Omit<GridChartBaseProps, 'orientation'>, StylesApiProps<CompositeChartFactory>, ElementProps<'div'> {
16
- /** Data used to display chart */
17
- data: Record<string, any>[];
18
- /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */
19
- series: CompositeChartSeries[];
20
- /** Type of the curve, `'monotone'` by default */
21
- curveType?: CompositeChartCurveType;
22
- /** Determines whether dots should be displayed, `true` by default */
23
- withDots?: boolean;
24
- /** Props passed down to all dots. Ignored if `withDots={false}` is set. */
25
- dotProps?: Omit<DotProps, 'ref'>;
26
- /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */
27
- activeDotProps?: Omit<DotProps, 'ref'>;
28
- /** Stroke width for the chart lines, `2` by default */
29
- strokeWidth?: number;
30
- /** Determines whether points with `null` values should be connected, `true` by default */
31
- connectNulls?: boolean;
32
- /** Additional components that are rendered inside recharts `AreaChart` component */
33
- children?: React.ReactNode;
34
- /** Props passed down to recharts `Line` component */
35
- lineProps?: ((series: CompositeChartSeries) => Partial<Omit<LineProps, 'ref'>>) | Partial<Omit<LineProps, 'ref'>>;
36
- /** Props passed down to recharts `Area` component */
37
- areaProps?: ((series: CompositeChartSeries) => Partial<Omit<AreaProps, 'ref'>>) | Partial<Omit<AreaProps, 'ref'>>;
38
- /** Props passed down to recharts `Bar` component */
39
- barProps?: ((series: CompositeChartSeries) => Partial<Omit<BarProps, 'ref'>>) | Partial<Omit<BarProps, 'ref'>>;
40
- /** Determines whether each point should have associated label, `false` by default */
41
- withPointLabels?: boolean;
42
- /** 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 */
43
- withBarValueLabel?: boolean;
44
- /** Sets minimum height of the bar in px, `0` by default */
45
- minBarSize?: number;
46
- /** Maximum bar width in px */
47
- maxBarWidth?: number;
48
- /** Props passed down to recharts `AreaChart` component */
49
- composedChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsCompositeChart>;
50
- }
51
- export type CompositeChartFactory = Factory<{
52
- props: CompositeChartProps;
53
- ref: HTMLDivElement;
54
- stylesNames: CompositeChartStylesNames;
55
- vars: CompositeChartCssVariables;
56
- }>;
57
- export declare const CompositeChart: import("@mantine/core").MantineComponent<{
58
- props: CompositeChartProps;
59
- ref: HTMLDivElement;
60
- stylesNames: CompositeChartStylesNames;
61
- vars: CompositeChartCssVariables;
62
- }>;
@@ -1,2 +0,0 @@
1
- export { CompositeChart } from './CompositeChart';
2
- export type { CompositeChartCssVariables, CompositeChartCurveType, CompositeChartFactory, CompositeChartProps, CompositeChartSeries, CompositeChartStylesNames, } from './CompositeChart';
@@ -1,65 +0,0 @@
1
- import { PieProps, PieChart as ReChartsPieChart, TooltipProps } from 'recharts';
2
- import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
3
- export interface DonutChartCell {
4
- name: string;
5
- value: number;
6
- color: MantineColor;
7
- }
8
- export type DonutChartStylesNames = 'root' | 'label';
9
- export type DonutChartCssVariables = {
10
- root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';
11
- };
12
- export interface DonutChartProps extends BoxProps, StylesApiProps<DonutChartFactory>, ElementProps<'div'> {
13
- /** Data used to render chart */
14
- data: DonutChartCell[];
15
- /** Determines whether the tooltip should be displayed when one of the section is hovered, `true` by default */
16
- withTooltip?: boolean;
17
- /** Tooltip animation duration in ms, `0` by default */
18
- tooltipAnimationDuration?: number;
19
- /** Props passed down to `Tooltip` recharts component */
20
- tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
21
- /** Props passed down to recharts `Pie` component */
22
- pieProps?: Partial<Omit<PieProps, 'ref'>>;
23
- /** Controls color of the segments stroke, by default depends on color scheme */
24
- strokeColor?: MantineColor;
25
- /** Controls text color of all labels, by default depends on color scheme */
26
- labelColor?: MantineColor;
27
- /** Controls padding between segments, `0` by default */
28
- paddingAngle?: number;
29
- /** Determines whether each segment should have associated label, `false` by default */
30
- withLabels?: boolean;
31
- /** Determines whether segments labels should have lines that connect the segment with the label, `true` by default */
32
- withLabelsLine?: boolean;
33
- /** Controls thickness of the chart segments, `20` by default */
34
- thickness?: number;
35
- /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. `80` by default */
36
- size?: number;
37
- /** Controls width of segments stroke, `1` by default */
38
- strokeWidth?: number;
39
- /** Controls angle at which chart starts, `0` by default. Set to `180` to render the chart as semicircle. */
40
- startAngle?: number;
41
- /** Controls angle at which charts ends, `360` by default. Set to `0` to render the chart as semicircle. */
42
- endAngle?: number;
43
- /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. `'all'` by default. */
44
- tooltipDataSource?: 'segment' | 'all';
45
- /** Chart label, displayed in the center of the chart */
46
- chartLabel?: string | number;
47
- /** Additional elements rendered inside `PieChart` component */
48
- children?: React.ReactNode;
49
- /** Props passed down to recharts `PieChart` component */
50
- pieChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsPieChart>;
51
- /** A function to format values inside the tooltip */
52
- valueFormatter?: (value: number) => string;
53
- }
54
- export type DonutChartFactory = Factory<{
55
- props: DonutChartProps;
56
- ref: HTMLDivElement;
57
- stylesNames: DonutChartStylesNames;
58
- vars: DonutChartCssVariables;
59
- }>;
60
- export declare const DonutChart: import("@mantine/core").MantineComponent<{
61
- props: DonutChartProps;
62
- ref: HTMLDivElement;
63
- stylesNames: DonutChartStylesNames;
64
- vars: DonutChartCssVariables;
65
- }>;
@@ -1,2 +0,0 @@
1
- export { DonutChart } from './DonutChart';
2
- export type { DonutChartCssVariables, DonutChartFactory, DonutChartProps, DonutChartStylesNames, DonutChartCell, } from './DonutChart';
@@ -1,62 +0,0 @@
1
- import { DotProps, LineProps, LineChart as ReChartsLineChart } from 'recharts';
2
- import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
3
- import { ChartLegendStylesNames } from '../ChartLegend';
4
- import { ChartTooltipStylesNames } from '../ChartTooltip';
5
- import type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';
6
- export type LineChartType = 'default' | 'gradient';
7
- export interface LineChartGradientStop {
8
- offset: number;
9
- color: MantineColor;
10
- }
11
- export type LineChartCurveType = 'bump' | 'linear' | 'natural' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
12
- export interface LineChartSeries extends ChartSeries {
13
- strokeDasharray?: string | number;
14
- }
15
- export type LineChartStylesNames = 'line' | BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
16
- export type LineChartCssVariables = {
17
- root: '--chart-text-color' | '--chart-grid-color';
18
- };
19
- export interface LineChartProps extends BoxProps, GridChartBaseProps, StylesApiProps<LineChartFactory>, ElementProps<'div'> {
20
- /** Data used to display chart */
21
- data: Record<string, any>[];
22
- /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */
23
- series: LineChartSeries[];
24
- /** Controls styles of the line, `'default'` by default */
25
- type?: LineChartType;
26
- /** Data used to generate gradient stops, `[{ offset: 0, color: 'red' }, { offset: 100, color: 'blue' }]` by default */
27
- gradientStops?: LineChartGradientStop[];
28
- /** Type of the curve, `'monotone'` by default */
29
- curveType?: LineChartCurveType;
30
- /** Controls fill opacity of all lines, `1` by default */
31
- fillOpacity?: number;
32
- /** Determines whether dots should be displayed, `true` by default */
33
- withDots?: boolean;
34
- /** Props passed down to all dots. Ignored if `withDots={false}` is set. */
35
- dotProps?: Omit<DotProps, 'ref'>;
36
- /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */
37
- activeDotProps?: Omit<DotProps, 'ref'>;
38
- /** Stroke width for the chart lines, `2` by default */
39
- strokeWidth?: number;
40
- /** Props passed down to recharts `LineChart` component */
41
- lineChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsLineChart>;
42
- /** Determines whether points with `null` values should be connected, `true` by default */
43
- connectNulls?: boolean;
44
- /** Additional components that are rendered inside recharts `LineChart` component */
45
- children?: React.ReactNode;
46
- /** Props passed down to recharts `Line` component */
47
- lineProps?: ((series: LineChartSeries) => Partial<Omit<LineProps, 'ref'>>) | Partial<Omit<LineProps, 'ref'>>;
48
- /** Determines whether each point should have associated label, `false` by default */
49
- withPointLabels?: boolean;
50
- }
51
- export type LineChartFactory = Factory<{
52
- props: LineChartProps;
53
- ref: HTMLDivElement;
54
- stylesNames: LineChartStylesNames;
55
- vars: LineChartCssVariables;
56
- }>;
57
- export declare const LineChart: import("@mantine/core").MantineComponent<{
58
- props: LineChartProps;
59
- ref: HTMLDivElement;
60
- stylesNames: LineChartStylesNames;
61
- vars: LineChartCssVariables;
62
- }>;
@@ -1,2 +0,0 @@
1
- export { LineChart } from './LineChart';
2
- export type { LineChartProps, LineChartCssVariables, LineChartFactory, LineChartSeries, LineChartStylesNames, LineChartCurveType, } from './LineChart';
@@ -1,66 +0,0 @@
1
- import { PieProps, PieChart as ReChartsPieChart, TooltipProps } from 'recharts';
2
- import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
3
- export interface PieChartCell {
4
- key?: string | number;
5
- name: string;
6
- value: number;
7
- color: MantineColor;
8
- }
9
- export type PieChartStylesNames = 'root';
10
- export type PieChartCssVariables = {
11
- root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';
12
- };
13
- export interface PieChartProps extends BoxProps, StylesApiProps<PieChartFactory>, ElementProps<'div'> {
14
- /** Data used to render chart */
15
- data: PieChartCell[];
16
- /** Determines whether the tooltip should be displayed when one of the section is hovered, `true` by default */
17
- withTooltip?: boolean;
18
- /** Tooltip animation duration in ms, `0` by default */
19
- tooltipAnimationDuration?: number;
20
- /** Props passed down to `Tooltip` recharts component */
21
- tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
22
- /** Props passed down to recharts `Pie` component */
23
- pieProps?: Partial<Omit<PieProps, 'ref'>>;
24
- /** Controls color of the segments stroke, by default depends on color scheme */
25
- strokeColor?: MantineColor;
26
- /** Controls text color of all labels, white by default */
27
- labelColor?: MantineColor;
28
- /** Controls padding between segments, `0` by default */
29
- paddingAngle?: number;
30
- /** Determines whether each segment should have associated label, `false` by default */
31
- withLabels?: boolean;
32
- /** Determines whether segments labels should have lines that connect the segment with the label, `true` by default */
33
- withLabelsLine?: boolean;
34
- /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. `80` by default */
35
- size?: number;
36
- /** Controls width of segments stroke, `1` by default */
37
- strokeWidth?: number;
38
- /** Controls angle at which chart starts, `0` by default. Set to `180` to render the chart as semicircle. */
39
- startAngle?: number;
40
- /** Controls angle at which charts ends, `360` by default. Set to `0` to render the chart as semicircle. */
41
- endAngle?: number;
42
- /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. `'all'` by default. */
43
- tooltipDataSource?: 'segment' | 'all';
44
- /** Additional elements rendered inside `PieChart` component */
45
- children?: React.ReactNode;
46
- /** Props passed down to recharts `PieChart` component */
47
- pieChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsPieChart>;
48
- /** Controls labels position relative to the segment, `'outside'` by default */
49
- labelsPosition?: 'inside' | 'outside';
50
- /** Type of labels to display, `'value'` by default */
51
- labelsType?: 'value' | 'percent';
52
- /** A function to format values inside the tooltip */
53
- valueFormatter?: (value: number) => string;
54
- }
55
- export type PieChartFactory = Factory<{
56
- props: PieChartProps;
57
- ref: HTMLDivElement;
58
- stylesNames: PieChartStylesNames;
59
- vars: PieChartCssVariables;
60
- }>;
61
- export declare const PieChart: import("@mantine/core").MantineComponent<{
62
- props: PieChartProps;
63
- ref: HTMLDivElement;
64
- stylesNames: PieChartStylesNames;
65
- vars: PieChartCssVariables;
66
- }>;
@@ -1,2 +0,0 @@
1
- export { PieChart } from './PieChart';
2
- export type { PieChartCssVariables, PieChartFactory, PieChartProps, PieChartStylesNames, PieChartCell, } from './PieChart';
@@ -1,7 +0,0 @@
1
- interface PointLabelProps {
2
- x?: number;
3
- y?: number;
4
- value?: number;
5
- }
6
- export declare function PointLabel({ x, y, value }: PointLabelProps): import("react/jsx-runtime").JSX.Element;
7
- export {};
@@ -1,58 +0,0 @@
1
- import { LegendProps, PolarAngleAxisProps, PolarGridProps, PolarRadiusAxisProps, RadarProps, RadarChart as ReChartsRadarChart } from 'recharts';
2
- import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
3
- export interface RadarChartSeries {
4
- name: string;
5
- color: MantineColor;
6
- strokeColor?: MantineColor;
7
- opacity?: number;
8
- }
9
- export type RadarChartStylesNames = 'root' | 'container';
10
- export type RadarChartCssVariables = {
11
- root: '--chart-grid-color' | '--chart-text-color';
12
- };
13
- export interface RadarChartProps extends BoxProps, StylesApiProps<RadarChartFactory>, ElementProps<'div'> {
14
- /** Data used in the chart */
15
- data: Record<string, any>[];
16
- /** Determines which data should be consumed from the `data` array. */
17
- series: RadarChartSeries[];
18
- /** Key of the `data` object for axis values */
19
- dataKey: string;
20
- /** Controls color of the grid lines. By default, color depends on the color scheme. */
21
- gridColor?: MantineColor;
22
- /** Controls color of all text elements. By default, color depends on the color scheme. */
23
- textColor?: MantineColor;
24
- /** Determines whether PolarGrid component should be displayed, `true` by default. */
25
- withPolarGrid?: boolean;
26
- /** Determines whether PolarAngleAxis component should be displayed, `true` by default */
27
- withPolarAngleAxis?: boolean;
28
- /** Determines whether PolarRadiusAxisProps component should be displayed, `false` by default */
29
- withPolarRadiusAxis?: boolean;
30
- /** Props passed down to recharts Radar component */
31
- radarProps?: ((series: RadarChartSeries) => Partial<Omit<RadarProps, 'ref'>>) | Partial<Omit<RadarProps, 'ref'>>;
32
- /** Props passed down to recharts RadarChart component */
33
- radarChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsRadarChart>;
34
- /** Props passed down to recharts PolarGrid component */
35
- polarGridProps?: Omit<PolarGridProps, 'ref'>;
36
- /** Props passed down to recharts PolarAngleAxis component */
37
- polarAngleAxisProps?: Omit<PolarAngleAxisProps, 'ref'>;
38
- /** Props passed down to recharts PolarRadiusAxis component */
39
- polarRadiusAxisProps?: Omit<PolarRadiusAxisProps, 'ref'>;
40
- /** Props passed down to recharts Legend component */
41
- legendProps?: Omit<LegendProps, 'ref'>;
42
- /** Determines whether the legend should be displayed, `false` by default */
43
- withLegend?: boolean;
44
- /** Additional components that are rendered inside recharts `RadarChart` component */
45
- children?: React.ReactNode;
46
- }
47
- export type RadarChartFactory = Factory<{
48
- props: RadarChartProps;
49
- ref: HTMLDivElement;
50
- stylesNames: RadarChartStylesNames;
51
- vars: RadarChartCssVariables;
52
- }>;
53
- export declare const RadarChart: import("@mantine/core").MantineComponent<{
54
- props: RadarChartProps;
55
- ref: HTMLDivElement;
56
- stylesNames: RadarChartStylesNames;
57
- vars: RadarChartCssVariables;
58
- }>;
@@ -1,2 +0,0 @@
1
- export { RadarChart } from './RadarChart';
2
- export type { RadarChartProps, RadarChartCssVariables, RadarChartFactory, RadarChartStylesNames, RadarChartSeries, } from './RadarChart';