@mantine/charts 9.4.3-alpha.0 → 9.5.0

package/lib/types.d.ts

@@ -1,4 +1,4 @@
-import type { CartesianGridProps, DotProps, LabelProps, LegendProps, ReferenceLineProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
+import type { BrushProps, CartesianGridProps, DotProps, LabelProps, LegendProps, ReferenceLineProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
 import type { MantineColor } from '@mantine/core';
 export interface ChartReferenceLineProps extends Omit<ReferenceLineProps, 'ref' | 'label'> {
     color?: MantineColor;
@@ -11,7 +11,7 @@ export interface ChartSeries {
     label?: string;
     yAxisId?: string;
 }
-export type BaseChartStylesNames = 'root' | 'container' | 'axis' | 'grid' | 'referenceLine' | 'axisLabel';
+export type BaseChartStylesNames = 'root' | 'container' | 'axis' | 'grid' | 'referenceLine' | 'axisLabel' | 'brush';
 export type ChartData = Record<string, any>[];
 export interface GridChartBaseProps {
     /** Data used to display chart */
@@ -66,6 +66,12 @@ export interface GridChartBaseProps {
     rightYAxisLabel?: string;
     /** Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default */
     withRightYAxis?: boolean;
+    /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */
+    accessibilityLayer?: boolean;
+    /** Determines whether a brush (range selector) should be displayed under the chart, `false` by default */
+    withBrush?: boolean;
+    /** Props passed down to the `Brush` component */
+    brushProps?: Omit<BrushProps, 'ref'>;
 }
 export type MantineChartDotProps = Omit<DotProps, 'ref'> & {
     strokeWidth?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/charts",
-  "version": "9.4.3-alpha.0",
+  "version": "9.5.0",
   "description": "Charts components built with recharts and Mantine",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "directory": "packages/@mantine/charts"
   },
   "peerDependencies": {
-    "@mantine/core": "9.4.3-alpha.0",
-    "@mantine/hooks": "9.4.3-alpha.0",
+    "@mantine/core": "9.5.0",
+    "@mantine/hooks": "9.5.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "recharts": ">=3.2.1"

package/styles.css

@@ -126,6 +126,19 @@
   padding: 0;
 }
 
+.m_bb368c49 :where(text) {
+    font-size: var(--mantine-font-size-xs);
+    fill: var(--chart-text-color, var(--mantine-color-dimmed));
+    font-family: var(--mantine-font-family);
+  }
+  .m_bb368c49 :where(.recharts-brush-slide) {
+    fill: var(--mantine-primary-color-light);
+    fill-opacity: 1;
+  }
+  .m_bb368c49 :where(.recharts-brush-traveller) rect {
+    fill: var(--mantine-primary-color-filled);
+  }
+
 .m_a50f3e58 {
   display: block;
   width: 100%;
@@ -138,6 +151,15 @@
     outline: 0;
   }
 
+  .m_a50f3e58 :where(svg *) {
+    outline: 0;
+  }
+
+  .m_a50f3e58 svg:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
   :where([data-mantine-color-scheme='light']) .m_a50f3e58 {
     --chart-grid-color: rgba(173, 181, 189, 0.6);
     --chart-cursor-fill: rgba(173, 181, 189, 0.15);
@@ -205,6 +227,11 @@
     overflow: visible;
   }
 
+  .m_a410e613 svg:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
 .m_ddb0bfe3 {
   fill: var(--mantine-color-text);
   font-size: var(--mantine-font-size-sm);
@@ -225,6 +252,11 @@
     overflow: visible;
   }
 
+  .m_cd8943fd svg:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
 :where([data-mantine-color-scheme='light']) .m_1f271cf7 {
     --chart-grid-color: rgba(173, 181, 189, 0.6);
     --chart-text-color: var(--mantine-color-gray-7);
@@ -240,10 +272,16 @@
     user-select: none;
   }
 
-  .m_1f271cf7 :where(svg) {
+  .m_1f271cf7 :where(svg),
+  .m_1f271cf7 :where(svg *) {
     outline: 0;
   }
 
+  .m_1f271cf7 svg:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
 .m_cf06f58c {
   height: 100%;
   width: 100%;
@@ -258,10 +296,16 @@
     --chart-cursor-color: var(--mantine-color-dark-4);
 }
 
-  .m_cd2bd9e5 :where(svg) {
+  .m_cd2bd9e5 :where(svg),
+  .m_cd2bd9e5 :where(svg *) {
     outline: 0;
   }
 
+  .m_cd2bd9e5 svg:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
 .m_6bcc3420 {
   padding: var(--mantine-spacing-md);
   box-shadow: var(--mantine-shadow-md);
@@ -291,6 +335,11 @@
     outline: 0;
   }
 
+  .m_80d531e7 svg:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
 .m_2ef228c3 {
   display: block;
   width: fit-content;
@@ -405,3 +454,170 @@
   :where([data-mantine-color-scheme='dark']) .m_b42d2970 {
     --chart-link-color: var(--mantine-color-dark-5);
 }
+
+.m_a73eff05 {
+  min-height: var(--chart-size, auto);
+  height: var(--chart-size, auto);
+  width: var(--chart-size, auto);
+  min-width: var(--chart-size, auto);
+}
+
+  .m_a73eff05 :where(*) {
+    outline: 0;
+  }
+
+.m_f1b033 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-md);
+  width: 100%;
+}
+
+  .m_f1b033[data-orientation='vertical'] {
+    flex-direction: column;
+    width: auto;
+    height: 100%;
+  }
+
+.m_1ce939c3 {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: var(--mantine-font-weight-medium);
+  white-space: nowrap;
+  color: var(--mantine-color-text);
+}
+
+.m_dcd57f19 {
+  position: relative;
+  flex: 1;
+  padding-top: calc(var(--mantine-font-size-xs) + calc(0.25rem * var(--mantine-scale)));
+  padding-bottom: calc(var(--mantine-font-size-xs) + calc(0.25rem * var(--mantine-scale)));
+}
+
+.m_dcd57f19[data-orientation='vertical'] {
+    flex: 1;
+    height: 100%;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: calc(var(--mantine-font-size-xs) + 40px);
+    padding-right: calc(var(--mantine-font-size-xs) + 40px);
+  }
+
+.m_1d61ac1a {
+  position: relative;
+  height: var(--bullet-size);
+  border-radius: var(--mantine-radius-sm);
+  overflow: hidden;
+}
+
+[data-orientation='vertical'] > .m_1d61ac1a {
+    width: var(--bullet-size);
+    height: 100%;
+  }
+
+.m_1d3df40c {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: var(--mantine-radius-sm);
+}
+
+[data-orientation='vertical'] > .m_1d61ac1a > .m_1d3df40c {
+    top: auto;
+    left: 0;
+    width: 100%;
+    height: auto;
+    border-radius: var(--mantine-radius-sm);
+  }
+
+.m_8499ea2 {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: var(--bullet-bar-size);
+  transform: translateY(-50%);
+  border-radius: 0 var(--mantine-radius-xs) var(--mantine-radius-xs) 0;
+  z-index: 1;
+}
+
+[data-orientation='vertical'] > .m_1d61ac1a > .m_8499ea2 {
+    top: auto;
+    left: 50%;
+    width: var(--bullet-bar-size);
+    height: auto;
+    transform: translateX(-50%);
+    border-radius: var(--mantine-radius-xs) var(--mantine-radius-xs) 0 0;
+  }
+
+.m_8dec10a2 {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  z-index: 2;
+  border-radius: var(--mantine-radius-xs);
+}
+
+:where([data-mantine-color-scheme='light']) .m_8dec10a2 {
+    background-color: var(--mantine-color-dark-filled);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_8dec10a2 {
+    background-color: var(--mantine-color-white);
+}
+
+[data-orientation='vertical'] > .m_1d61ac1a > .m_8dec10a2 {
+    top: auto;
+    left: 50%;
+    transform: translateX(-50%) translateY(50%);
+  }
+
+.m_18314248 {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+[data-orientation='vertical'] > .m_18314248 {
+    top: auto;
+    left: auto;
+    right: 0;
+    transform: translateY(50%);
+  }
+
+.m_73d6c572 {
+  position: absolute;
+  bottom: 0;
+  transform: translateX(-50%);
+  font-size: var(--mantine-font-size-xs);
+  font-weight: var(--mantine-font-weight-bold);
+  color: var(--mantine-color-text);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+[data-orientation='vertical'] > .m_73d6c572 {
+    bottom: auto;
+    left: 0;
+    transform: translateY(50%);
+  }
+
+.m_abeb9372 {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+[data-orientation='vertical'] > .m_abeb9372 {
+    top: auto;
+    left: auto;
+    right: 0;
+    transform: translateY(50%);
+  }

package/styles.layer.css

@@ -126,6 +126,19 @@
   padding: 0;
 }
 
+.m_bb368c49 :where(text) {
+    font-size: var(--mantine-font-size-xs);
+    fill: var(--chart-text-color, var(--mantine-color-dimmed));
+    font-family: var(--mantine-font-family);
+  }
+  .m_bb368c49 :where(.recharts-brush-slide) {
+    fill: var(--mantine-primary-color-light);
+    fill-opacity: 1;
+  }
+  .m_bb368c49 :where(.recharts-brush-traveller) rect {
+    fill: var(--mantine-primary-color-filled);
+  }
+
 .m_a50f3e58 {
   display: block;
   width: 100%;
@@ -138,6 +151,15 @@
     outline: 0;
   }
 
+  .m_a50f3e58 :where(svg *) {
+    outline: 0;
+  }
+
+  .m_a50f3e58 svg:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
   :where([data-mantine-color-scheme='light']) .m_a50f3e58 {
     --chart-grid-color: rgba(173, 181, 189, 0.6);
     --chart-cursor-fill: rgba(173, 181, 189, 0.15);
@@ -205,6 +227,11 @@
     overflow: visible;
   }
 
+  .m_a410e613 svg:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
 .m_ddb0bfe3 {
   fill: var(--mantine-color-text);
   font-size: var(--mantine-font-size-sm);
@@ -225,6 +252,11 @@
     overflow: visible;
   }
 
+  .m_cd8943fd svg:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
 :where([data-mantine-color-scheme='light']) .m_1f271cf7 {
     --chart-grid-color: rgba(173, 181, 189, 0.6);
     --chart-text-color: var(--mantine-color-gray-7);
@@ -240,10 +272,16 @@
     user-select: none;
   }
 
-  .m_1f271cf7 :where(svg) {
+  .m_1f271cf7 :where(svg),
+  .m_1f271cf7 :where(svg *) {
     outline: 0;
   }
 
+  .m_1f271cf7 svg:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
 .m_cf06f58c {
   height: 100%;
   width: 100%;
@@ -258,10 +296,16 @@
     --chart-cursor-color: var(--mantine-color-dark-4);
 }
 
-  .m_cd2bd9e5 :where(svg) {
+  .m_cd2bd9e5 :where(svg),
+  .m_cd2bd9e5 :where(svg *) {
     outline: 0;
   }
 
+  .m_cd2bd9e5 svg:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
 .m_6bcc3420 {
   padding: var(--mantine-spacing-md);
   box-shadow: var(--mantine-shadow-md);
@@ -291,6 +335,11 @@
     outline: 0;
   }
 
+  .m_80d531e7 svg:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
 .m_2ef228c3 {
   display: block;
   width: fit-content;
@@ -405,4 +454,171 @@
   :where([data-mantine-color-scheme='dark']) .m_b42d2970 {
     --chart-link-color: var(--mantine-color-dark-5);
 }
+
+.m_a73eff05 {
+  min-height: var(--chart-size, auto);
+  height: var(--chart-size, auto);
+  width: var(--chart-size, auto);
+  min-width: var(--chart-size, auto);
+}
+
+  .m_a73eff05 :where(*) {
+    outline: 0;
+  }
+
+.m_f1b033 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-md);
+  width: 100%;
+}
+
+  .m_f1b033[data-orientation='vertical'] {
+    flex-direction: column;
+    width: auto;
+    height: 100%;
+  }
+
+.m_1ce939c3 {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: var(--mantine-font-weight-medium);
+  white-space: nowrap;
+  color: var(--mantine-color-text);
+}
+
+.m_dcd57f19 {
+  position: relative;
+  flex: 1;
+  padding-top: calc(var(--mantine-font-size-xs) + calc(0.25rem * var(--mantine-scale)));
+  padding-bottom: calc(var(--mantine-font-size-xs) + calc(0.25rem * var(--mantine-scale)));
+}
+
+.m_dcd57f19[data-orientation='vertical'] {
+    flex: 1;
+    height: 100%;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: calc(var(--mantine-font-size-xs) + 40px);
+    padding-right: calc(var(--mantine-font-size-xs) + 40px);
+  }
+
+.m_1d61ac1a {
+  position: relative;
+  height: var(--bullet-size);
+  border-radius: var(--mantine-radius-sm);
+  overflow: hidden;
+}
+
+[data-orientation='vertical'] > .m_1d61ac1a {
+    width: var(--bullet-size);
+    height: 100%;
+  }
+
+.m_1d3df40c {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: var(--mantine-radius-sm);
+}
+
+[data-orientation='vertical'] > .m_1d61ac1a > .m_1d3df40c {
+    top: auto;
+    left: 0;
+    width: 100%;
+    height: auto;
+    border-radius: var(--mantine-radius-sm);
+  }
+
+.m_8499ea2 {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: var(--bullet-bar-size);
+  transform: translateY(-50%);
+  border-radius: 0 var(--mantine-radius-xs) var(--mantine-radius-xs) 0;
+  z-index: 1;
+}
+
+[data-orientation='vertical'] > .m_1d61ac1a > .m_8499ea2 {
+    top: auto;
+    left: 50%;
+    width: var(--bullet-bar-size);
+    height: auto;
+    transform: translateX(-50%);
+    border-radius: var(--mantine-radius-xs) var(--mantine-radius-xs) 0 0;
+  }
+
+.m_8dec10a2 {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  z-index: 2;
+  border-radius: var(--mantine-radius-xs);
+}
+
+:where([data-mantine-color-scheme='light']) .m_8dec10a2 {
+    background-color: var(--mantine-color-dark-filled);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_8dec10a2 {
+    background-color: var(--mantine-color-white);
+}
+
+[data-orientation='vertical'] > .m_1d61ac1a > .m_8dec10a2 {
+    top: auto;
+    left: 50%;
+    transform: translateX(-50%) translateY(50%);
+  }
+
+.m_18314248 {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+[data-orientation='vertical'] > .m_18314248 {
+    top: auto;
+    left: auto;
+    right: 0;
+    transform: translateY(50%);
+  }
+
+.m_73d6c572 {
+  position: absolute;
+  bottom: 0;
+  transform: translateX(-50%);
+  font-size: var(--mantine-font-size-xs);
+  font-weight: var(--mantine-font-weight-bold);
+  color: var(--mantine-color-text);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+[data-orientation='vertical'] > .m_73d6c572 {
+    bottom: auto;
+    left: 0;
+    transform: translateY(50%);
+  }
+
+.m_abeb9372 {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+[data-orientation='vertical'] > .m_abeb9372 {
+    top: auto;
+    left: auto;
+    right: 0;
+    transform: translateY(50%);
+  }
 }