@mantine/charts 7.6.0-alpha.0 → 7.6.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.
- package/cjs/AreaChart/AreaChart.cjs +24 -16
- package/cjs/AreaChart/AreaChart.cjs.map +1 -1
- package/cjs/AreaChart/AreaGradient.cjs +5 -1
- package/cjs/AreaChart/AreaGradient.cjs.map +1 -1
- package/cjs/AreaChart/AreaSplit.cjs +6 -2
- package/cjs/AreaChart/AreaSplit.cjs.map +1 -1
- package/cjs/BarChart/BarChart.cjs +21 -13
- package/cjs/BarChart/BarChart.cjs.map +1 -1
- package/cjs/ChartLegend/ChartLegend.cjs +8 -4
- package/cjs/ChartLegend/ChartLegend.cjs.map +1 -1
- package/cjs/ChartTooltip/ChartTooltip.cjs +7 -3
- package/cjs/ChartTooltip/ChartTooltip.cjs.map +1 -1
- package/cjs/DonutChart/DonutChart.cjs +9 -5
- package/cjs/DonutChart/DonutChart.cjs.map +1 -1
- package/cjs/LineChart/LineChart.cjs +19 -12
- package/cjs/LineChart/LineChart.cjs.map +1 -1
- package/cjs/PieChart/PieChart.cjs +29 -9
- package/cjs/PieChart/PieChart.cjs.map +1 -1
- package/cjs/RadarChart/RadarChart.cjs +7 -2
- package/cjs/RadarChart/RadarChart.cjs.map +1 -1
- package/cjs/Sparkline/Sparkline.cjs +7 -2
- package/cjs/Sparkline/Sparkline.cjs.map +1 -1
- package/esm/AreaChart/AreaChart.mjs +6 -2
- package/esm/AreaChart/AreaChart.mjs.map +1 -1
- package/esm/BarChart/BarChart.mjs +6 -2
- package/esm/BarChart/BarChart.mjs.map +1 -1
- package/esm/LineChart/LineChart.mjs +5 -2
- package/esm/LineChart/LineChart.mjs.map +1 -1
- package/esm/PieChart/PieChart.mjs +20 -4
- package/esm/PieChart/PieChart.mjs.map +1 -1
- package/esm/RadarChart/RadarChart.mjs +2 -1
- package/esm/RadarChart/RadarChart.mjs.map +1 -1
- package/esm/Sparkline/Sparkline.mjs +1 -0
- package/esm/Sparkline/Sparkline.mjs.map +1 -1
- package/lib/AreaChart/AreaChart.d.ts +5 -1
- package/lib/BarChart/BarChart.d.ts +5 -1
- package/lib/LineChart/LineChart.d.ts +5 -1
- package/lib/PieChart/PieChart.d.ts +2 -0
- package/lib/RadarChart/RadarChart.d.ts +2 -0
- package/lib/index.d.mts +9 -9
- package/lib/index.d.ts +9 -9
- package/package.json +5 -5
- package/styles.css +1 -1
- package/styles.layer.css +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { DotProps, LineChart as ReChartsLineChart } from 'recharts';
|
|
2
|
+
import { DotProps, LineProps, LineChart as ReChartsLineChart } from 'recharts';
|
|
3
3
|
import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
|
|
4
4
|
import { ChartLegendStylesNames } from '../ChartLegend';
|
|
5
5
|
import { ChartTooltipStylesNames } from '../ChartTooltip';
|
|
@@ -33,6 +33,10 @@ export interface LineChartProps extends BoxProps, GridChartBaseProps, StylesApiP
|
|
|
33
33
|
lineChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsLineChart>;
|
|
34
34
|
/** Determines whether points with `null` values should be connected, `true` by default */
|
|
35
35
|
connectNulls?: boolean;
|
|
36
|
+
/** Additional components that are rendered inside recharts `AreaChart` component */
|
|
37
|
+
children?: React.ReactNode;
|
|
38
|
+
/** Props passed down to recharts `Area` component */
|
|
39
|
+
lineProps?: ((series: LineChartSeries) => Partial<Omit<LineProps, 'ref'>>) | Partial<Omit<LineProps, 'ref'>>;
|
|
36
40
|
}
|
|
37
41
|
export type LineChartFactory = Factory<{
|
|
38
42
|
props: LineChartProps;
|
|
@@ -47,6 +47,8 @@ export interface PieChartProps extends BoxProps, StylesApiProps<PieChartFactory>
|
|
|
47
47
|
pieChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsPieChart>;
|
|
48
48
|
/** Controls labels position relative to the segment, `'outside'` by default */
|
|
49
49
|
labelsPosition?: 'inside' | 'outside';
|
|
50
|
+
/** Type of labels to display, `'value'` by default */
|
|
51
|
+
labelsType?: 'value' | 'percent';
|
|
50
52
|
/** A function to format values inside the tooltip */
|
|
51
53
|
valueFormatter?: (value: number) => string;
|
|
52
54
|
}
|
|
@@ -38,6 +38,8 @@ export interface RadarChartProps extends BoxProps, StylesApiProps<RadarChartFact
|
|
|
38
38
|
polarAngleAxisProps?: Omit<PolarAngleAxisProps, 'ref'>;
|
|
39
39
|
/** Props passed down to recharts PolarRadiusAxis component */
|
|
40
40
|
polarRadiusAxisProps?: Omit<PolarRadiusAxisProps, 'ref'>;
|
|
41
|
+
/** Additional components that are rendered inside recharts `RadarChart` component */
|
|
42
|
+
children?: React.ReactNode;
|
|
41
43
|
}
|
|
42
44
|
export type RadarChartFactory = Factory<{
|
|
43
45
|
props: RadarChartProps;
|
package/lib/index.d.mts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export * from './ChartTooltip';
|
|
2
|
-
export * from './ChartLegend';
|
|
3
|
-
export * from './AreaChart';
|
|
4
|
-
export * from './BarChart';
|
|
5
|
-
export * from './LineChart';
|
|
6
|
-
export * from './Sparkline';
|
|
7
|
-
export * from './DonutChart';
|
|
8
|
-
export * from './PieChart';
|
|
9
|
-
export * from './RadarChart';
|
|
1
|
+
export * from './ChartTooltip/index.js';
|
|
2
|
+
export * from './ChartLegend/index.js';
|
|
3
|
+
export * from './AreaChart/index.js';
|
|
4
|
+
export * from './BarChart/index.js';
|
|
5
|
+
export * from './LineChart/index.js';
|
|
6
|
+
export * from './Sparkline/index.js';
|
|
7
|
+
export * from './DonutChart/index.js';
|
|
8
|
+
export * from './PieChart/index.js';
|
|
9
|
+
export * from './RadarChart/index.js';
|
|
10
10
|
export * from './types';
|
package/lib/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export * from './ChartTooltip';
|
|
2
|
-
export * from './ChartLegend';
|
|
3
|
-
export * from './AreaChart';
|
|
4
|
-
export * from './BarChart';
|
|
5
|
-
export * from './LineChart';
|
|
6
|
-
export * from './Sparkline';
|
|
7
|
-
export * from './DonutChart';
|
|
8
|
-
export * from './PieChart';
|
|
9
|
-
export * from './RadarChart';
|
|
1
|
+
export * from './ChartTooltip/index.js';
|
|
2
|
+
export * from './ChartLegend/index.js';
|
|
3
|
+
export * from './AreaChart/index.js';
|
|
4
|
+
export * from './BarChart/index.js';
|
|
5
|
+
export * from './LineChart/index.js';
|
|
6
|
+
export * from './Sparkline/index.js';
|
|
7
|
+
export * from './DonutChart/index.js';
|
|
8
|
+
export * from './PieChart/index.js';
|
|
9
|
+
export * from './RadarChart/index.js';
|
|
10
10
|
export * from './types';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/charts",
|
|
3
|
-
"version": "7.6.0
|
|
3
|
+
"version": "7.6.0",
|
|
4
4
|
"description": "Charts components built with recharts and Mantine",
|
|
5
5
|
"homepage": "https://mantine.dev/",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,15 +35,15 @@
|
|
|
35
35
|
"directory": "packages/@mantine/charts"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"@mantine/core": "7.6.0
|
|
39
|
-
"@mantine/hooks": "7.6.0
|
|
38
|
+
"@mantine/core": "7.6.0",
|
|
39
|
+
"@mantine/hooks": "7.6.0",
|
|
40
40
|
"react": "^18.2.0",
|
|
41
41
|
"react-dom": "^18.2.0",
|
|
42
42
|
"recharts": "^2.10.3"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@mantine-tests/core": "1.0.1",
|
|
46
|
-
"@mantine/core": "7.6.0
|
|
47
|
-
"@mantine/hooks": "7.6.0
|
|
46
|
+
"@mantine/core": "7.6.0",
|
|
47
|
+
"@mantine/hooks": "7.6.0"
|
|
48
48
|
}
|
|
49
49
|
}
|
package/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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-e4d36c9b:where([data-type=radial]) :where(.m-3de554dd){padding-top:var(--mantine-spacing-sm)}.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-
|
|
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-e4d36c9b:where([data-type=radial]) :where(.m-3de554dd){padding-top:var(--mantine-spacing-sm)}.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-inline-end: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)}.m-a410e613{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-a410e613 :where(*){outline:0}.m-ddb0bfe3{fill:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-cd8943fd{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-cd8943fd :where(*){outline:0}.m-e3441f39{fill:var(--mantine-color-white);font-size:var(--mantine-font-size-xs)}:where([data-mantine-color-scheme=light]) .m-1f271cf7{--chart-grid-color:rgba(173,181,189,.6);--chart-text-color:var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=dark]) .m-1f271cf7{--chart-grid-color:hsla(0,0%,41%,.6);--chart-text-color:var(--mantine-color-dark-1)}.m-1f271cf7 :where(text){fill:var(--chart-text-color,var(--mantine-color-dimmed));font-size:var(--mantine-font-size-xs);user-select:none}.m-cf06f58c{height:100%;width:100%}
|
package/styles.layer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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-e4d36c9b:where([data-type=radial]) :where(.m-3de554dd){padding-top:var(--mantine-spacing-sm)}.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-
|
|
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-e4d36c9b:where([data-type=radial]) :where(.m-3de554dd){padding-top:var(--mantine-spacing-sm)}.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-inline-end: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)}.m-a410e613{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-a410e613 :where(*){outline:0}.m-ddb0bfe3{fill:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-cd8943fd{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-cd8943fd :where(*){outline:0}.m-e3441f39{fill:var(--mantine-color-white);font-size:var(--mantine-font-size-xs)}:where([data-mantine-color-scheme=light]) .m-1f271cf7{--chart-grid-color:rgba(173,181,189,.6);--chart-text-color:var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=dark]) .m-1f271cf7{--chart-grid-color:hsla(0,0%,41%,.6);--chart-text-color:var(--mantine-color-dark-1)}.m-1f271cf7 :where(text){fill:var(--chart-text-color,var(--mantine-color-dimmed));font-size:var(--mantine-font-size-xs);user-select:none}.m-cf06f58c{height:100%;width:100%}}
|