[@mantine/charts] Fix incorrect y-axis styles in RTL (#5505)

mantinedev · Jan 3, 2024 · 29eb1bd · 29eb1bd
1 parent 3f92d8f
commit 29eb1bd
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/packages/@mantine/charts/src/AreaChart/AreaChart.tsx b/packages/@mantine/charts/src/AreaChart/AreaChart.tsx
@@ -181,6 +181,7 @@ export const AreaChart = factory<AreaChartFactory>((_props, ref) => {
     onMouseLeave,
     orientation,
     referenceLines,
+    dir,
     ...others
   } = props;
 
@@ -296,7 +297,13 @@ export const AreaChart = factory<AreaChartFactory>((_props, ref) => {
   });
 
   return (
-    <Box ref={ref} {...getStyles('root')} onMouseLeave={handleMouseLeave} {...others}>
+    <Box
+      ref={ref}
+      {...getStyles('root')}
+      onMouseLeave={handleMouseLeave}
+      dir={dir || 'ltr'}
+      {...others}
+    >
       <ResponsiveContainer {...getStyles('container')}>
         <ReChartsAreaChart
           data={data}

diff --git a/packages/@mantine/charts/src/BarChart/BarChart.tsx b/packages/@mantine/charts/src/BarChart/BarChart.tsx
@@ -133,6 +133,7 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
     barChartProps,
     type,
     orientation,
+    dir,
     ...others
   } = props;
 
@@ -205,7 +206,13 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
   });
 
   return (
-    <Box ref={ref} {...getStyles('root')} onMouseLeave={handleMouseLeave} {...others}>
+    <Box
+      ref={ref}
+      {...getStyles('root')}
+      onMouseLeave={handleMouseLeave}
+      dir={dir || 'ltr'}
+      {...others}
+    >
       <ResponsiveContainer {...getStyles('container')}>
         <ReChartsBarChart
           data={data}

diff --git a/packages/@mantine/charts/src/LineChart/LineChart.tsx b/packages/@mantine/charts/src/LineChart/LineChart.tsx
@@ -155,6 +155,7 @@ export const LineChart = factory<LineChartFactory>((_props, ref) => {
     fillOpacity,
     curveType,
     orientation,
+    dir,
     ...others
   } = props;
 
@@ -235,7 +236,13 @@ export const LineChart = factory<LineChartFactory>((_props, ref) => {
   });
 
   return (
-    <Box ref={ref} {...getStyles('root')} onMouseLeave={handleMouseLeave} {...others}>
+    <Box
+      ref={ref}
+      {...getStyles('root')}
+      onMouseLeave={handleMouseLeave}
+      dir={dir || 'ltr'}
+      {...others}
+    >
       <ResponsiveContainer {...getStyles('container')}>
         <ReChartsLineChart data={data} layout={orientation} {...lineChartProps}>
           {withLegend && (

diff --git a/packages/@mantine/charts/src/Sparkline/Sparkline.tsx b/packages/@mantine/charts/src/Sparkline/Sparkline.tsx
@@ -99,7 +99,7 @@ export const Sparkline = factory<SparklineFactory>((_props, ref) => {
   const mappedData = useMemo(() => data.map((value, index) => ({ value, index })), [data]);
 
   return (
-    <Box ref={ref} {...getStyles('root')} {...others}>
+    <Box ref={ref} {...getStyles('root')} {...others} dir="ltr">
       <ResponsiveContainer>
         <ReChartsAreaChart data={mappedData}>
           <Area