Remove fix size

mui · Feb 8, 2024 · d4710a9 · d4710a9
1 parent b8c38c6
commit d4710a9
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 25 deletions.
diff --git a/docs/data/charts/gauge/BasicGauges.js b/docs/data/charts/gauge/BasicGauges.js
@@ -1,11 +1,12 @@
 import * as React from 'react';
+import Stack from '@mui/material/Stack';
 import { Gauge } from '@mui/x-charts/Gauge';
 
 export default function BasicGauges() {
   return (
-    <React.Fragment>
-      <Gauge value={60} />
-      <Gauge value={60} startAngle={-90} endAngle={90} />
-    </React.Fragment>
+    <Stack direction={{ xs: 'column', md: 'row' }} spacing={{ xs: 1, md: 3 }}>
+      <Gauge width={100} height={100} value={60} />
+      <Gauge width={100} height={100} value={60} startAngle={-90} endAngle={90} />
+    </Stack>
   );
 }
diff --git a/docs/data/charts/gauge/BasicGauges.tsx b/docs/data/charts/gauge/BasicGauges.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
+import Stack from '@mui/material/Stack';
 import { Gauge } from '@mui/x-charts/Gauge';
 
 export default function BasicGauges() {
   return (
-    <React.Fragment>
-      <Gauge value={60} />
-      <Gauge value={60} startAngle={-90} endAngle={90} />
-    </React.Fragment>
+    <Stack direction={{ xs: 'column', md: 'row' }} spacing={{ xs: 1, md: 3 }}>
+      <Gauge width={100} height={100} value={60} />
+      <Gauge width={100} height={100} value={60} startAngle={-90} endAngle={90} />
+    </Stack>
   );
 }
diff --git a/docs/data/charts/gauge/BasicGauges.tsx.preview b/docs/data/charts/gauge/BasicGauges.tsx.preview
@@ -1,4 +1,2 @@
-<React.Fragment>
-  <Gauge value={60} />
-  <Gauge value={60} startAngle={-90} endAngle={90} />
-</React.Fragment>
+<Gauge width={100} height={100} value={60} />
+<Gauge width={100} height={100} value={60} startAngle={-90} endAngle={90} />
diff --git a/docs/data/charts/gauge/GaugeValueRangeNoSnap.js b/docs/data/charts/gauge/GaugeValueRangeNoSnap.js
@@ -1,11 +1,12 @@
 import * as React from 'react';
+import Stack from '@mui/material/Stack';
 import { Gauge } from '@mui/x-charts/Gauge';
 
 export default function GaugeValueRangeNoSnap() {
   return (
-    <React.Fragment>
-      <Gauge value={50} />
-      <Gauge value={50} valueMin={10} valueMax={60} />
-    </React.Fragment>
+    <Stack direction={{ xs: 'column', md: 'row' }} spacing={{ xs: 1, md: 3 }}>
+      <Gauge width={100} height={100} value={50} />
+      <Gauge width={100} height={100} value={50} valueMin={10} valueMax={60} />
+    </Stack>
   );
 }
diff --git a/docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx b/docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
+import Stack from '@mui/material/Stack';
 import { Gauge } from '@mui/x-charts/Gauge';
 
 export default function GaugeValueRangeNoSnap() {
   return (
-    <React.Fragment>
-      <Gauge value={50} />
-      <Gauge value={50} valueMin={10} valueMax={60} />
-    </React.Fragment>
+    <Stack direction={{ xs: 'column', md: 'row' }} spacing={{ xs: 1, md: 3 }}>
+      <Gauge width={100} height={100} value={50} />
+      <Gauge width={100} height={100} value={50} valueMin={10} valueMax={60} />
+    </Stack>
   );
 }
diff --git a/docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx.preview b/docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx.preview
@@ -1,4 +1,2 @@
-<React.Fragment>
-  <Gauge value={50} />
-  <Gauge value={50} valueMin={10} valueMax={60} />
-</React.Fragment>
+<Gauge width={100} height={100} value={50} />
+<Gauge width={100} height={100} value={50} valueMin={10} valueMax={60} />
diff --git a/docs/data/charts/gauge/PlaygroundNoSnap.js b/docs/data/charts/gauge/PlaygroundNoSnap.js
@@ -54,6 +54,7 @@ export default function PlaygroundNoSnap() {
           sx={{
             width: 200,
             height: 200,
+            margin: 'auto',
           }}
         >
           <Gauge

diff --git a/packages/x-charts/src/Gauge/Gauge.tsx b/packages/x-charts/src/Gauge/Gauge.tsx
@@ -25,7 +25,7 @@ const useUtilityClasses = (props: GaugeProps) => {
 function Gauge(props: GaugeProps) {
   const classes = useUtilityClasses(props);
   return (
-    <GaugeContainer width={200} height={200} {...props} className={classes.root}>
+    <GaugeContainer {...props} className={classes.root}>
       <GaugeReferenceArc className={classes.referenceArc} />
       <GaugeValueArc className={classes.valueArc} />
     </GaugeContainer>