[charts] Add Gauge component (#11996)

Signed-off-by: Alexandre Fauquette <[email protected]>
Co-authored-by: Danilo Leal <[email protected]>
Co-authored-by: Lukas <[email protected]>

docs/.link-check-errors.txt

@@ -11,6 +11,7 @@ Broken links found by `yarn docs:link-check` that exist:
 - https://mui.com/system/styles/api/#serverstylesheets
 - https://mui.com/system/styles/api/#stylesprovider
 - https://mui.com/system/styles/api/#themeprovider
+- https://mui.com/x/api/charts/gauge/#classes
 - https://mui.com/x/api/data-grid/data-grid/#DataGrid-prop-filterDebounceMs
 - https://mui.com/x/api/data-grid/data-grid/#props
 - https://mui.com/x/api/data-grid/data-grid/#slots

docs/data/charts-component-api-pages.ts

@@ -97,6 +97,14 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/default-charts-legend',
     title: 'DefaultChartsLegend',
   },
+  {
+    pathname: '/x/api/charts/gauge',
+    title: 'Gauge',
+  },
+  {
+    pathname: '/x/api/charts/gauge-container',
+    title: 'GaugeContainer',
+  },
   {
     pathname: '/x/api/charts/line-chart',
     title: 'LineChart',

docs/data/charts/gauge/ArcDesign.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';
+
+const settings = {
+  width: 200,
+  height: 200,
+  value: 60,
+};
+
+export default function ArcDesign() {
+  return (
+    <Gauge
+      {...settings}
+      cornerRadius="50%"
+      sx={(theme) => ({
+        [`& .${gaugeClasses.valueText}`]: {
+          fontSize: 40,
+        },
+        [`& .${gaugeClasses.valueArc}`]: {
+          fill: '#52b202',
+        },
+        [`& .${gaugeClasses.referenceArc}`]: {
+          fill: theme.palette.text.disabled,
+        },
+      })}
+    />
+  );
+}

docs/data/charts/gauge/ArcDesign.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';
+
+const settings = {
+  width: 200,
+  height: 200,
+  value: 60,
+};
+
+export default function ArcDesign() {
+  return (
+    <Gauge
+      {...settings}
+      cornerRadius="50%"
+      sx={(theme) => ({
+        [`& .${gaugeClasses.valueText}`]: {
+          fontSize: 40,
+        },
+        [`& .${gaugeClasses.valueArc}`]: {
+          fill: '#52b202',
+        },
+        [`& .${gaugeClasses.referenceArc}`]: {
+          fill: theme.palette.text.disabled,
+        },
+      })}
+    />
+  );
+}

docs/data/charts/gauge/ArcDesign.tsx.preview

@@ -0,0 +1,15 @@
+<Gauge
+  {...settings}
+  cornerRadius="50%"
+  sx={(theme) => ({
+    [`& .${gaugeClasses.valueText}`]: {
+      fontSize: 40,
+    },
+    [`& .${gaugeClasses.valueArc}`]: {
+      fill: '#52b202',
+    },
+    [`& .${gaugeClasses.referenceArc}`]: {
+      fill: theme.palette.text.disabled,
+    },
+  })}
+/>

docs/data/charts/gauge/ArcPlaygroundNoSnap.js

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+import Paper from '@mui/material/Paper';
+import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';
+
+export default function ArcPlaygroundNoSnap() {
+  return (
+    <ChartsUsageDemo
+      componentName="Gauge"
+      data={[
+        {
+          propName: `value`,
+          knob: 'number',
+          defaultValue: 75,
+          step: 1,
+          min: 0,
+          max: 100,
+        },
+        {
+          propName: `startAngle`,
+          knob: 'number',
+          defaultValue: 0,
+          step: 1,
+          min: -360,
+          max: 360,
+        },
+        {
+          propName: `endAngle`,
+          knob: 'number',
+          defaultValue: 360,
+          step: 1,
+          min: -360,
+          max: 360,
+        },
+        {
+          propName: `innerRadius`,
+          knob: 'number',
+          defaultValue: 80,
+          step: 1,
+          min: 0,
+          max: 100,
+        },
+        {
+          propName: `outerRadius`,
+          knob: 'number',
+          defaultValue: 100,
+          step: 1,
+          min: 0,
+          max: 100,
+        },
+      ]}
+      renderDemo={(props) => (
+        <Paper
+          sx={{
+            width: 200,
+            height: 200,
+            margin: 'auto',
+          }}
+        >
+          <Gauge
+            sx={{
+              [`& .${gaugeClasses.valueText}`]: {
+                fontSize: 45,
+              },
+            }}
+            {...props}
+            innerRadius={`${props.innerRadius}%`}
+            outerRadius={`${props.outerRadius}%`}
+          />
+        </Paper>
+      )}
+      getCode={({ props }) => {
+        const { innerRadius, outerRadius, ...numberProps } = props;
+        return [
+          `import { Gauge } from '@mui/x-charts/Gauge';`,
+          '',
+          `<Gauge`,
+          `  // ...`,
+          ...Object.entries(numberProps).map(
+            ([name, value]) => `  ${name}={${value}}`,
+          ),
+          ...Object.entries({ innerRadius, outerRadius }).map(
+            ([name, value]) => `  ${name}="${value}%"`,
+          ),
+          '/>',
+        ].join('\n');
+      }}
+    />
+  );
+}

docs/data/charts/gauge/BasicGauges.js

@@ -0,0 +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 (
+    <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>
+  );
+}

docs/data/charts/gauge/BasicGauges.tsx

@@ -0,0 +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 (
+    <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>
+  );
+}

docs/data/charts/gauge/BasicGauges.tsx.preview

@@ -0,0 +1,2 @@
+<Gauge width={100} height={100} value={60} />
+<Gauge width={100} height={100} value={60} startAngle={-90} endAngle={90} />

docs/data/charts/gauge/CompositionExample.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import {
+  GaugeContainer,
+  GaugeValueArc,
+  GaugeReferenceArc,
+  useGaugeState,
+} from '@mui/x-charts/Gauge';
+
+function GaugePointer() {
+  const { valueAngle, outerRadius, cx, cy } = useGaugeState();
+
+  if (valueAngle === null) {
+    // No value to display
+    return null;
+  }
+
+  const target = {
+    x: cx + outerRadius * Math.sin(valueAngle),
+    y: cy - outerRadius * Math.cos(valueAngle),
+  };
+  return (
+    <g>
+      <circle cx={cx} cy={cy} r={5} fill="red" />
+      <path
+        d={`M ${cx} ${cy} L ${target.x} ${target.y}`}
+        stroke="red"
+        strokeWidth={3}
+      />
+    </g>
+  );
+}
+
+export default function CompositionExample() {
+  return (
+    <GaugeContainer
+      width={200}
+      height={200}
+      startAngle={-110}
+      endAngle={110}
+      value={30}
+    >
+      <GaugeReferenceArc />
+      <GaugeValueArc />
+      <GaugePointer />
+    </GaugeContainer>
+  );
+}

docs/data/charts/gauge/CompositionExample.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import {
+  GaugeContainer,
+  GaugeValueArc,
+  GaugeReferenceArc,
+  useGaugeState,
+} from '@mui/x-charts/Gauge';
+
+function GaugePointer() {
+  const { valueAngle, outerRadius, cx, cy } = useGaugeState();
+
+  if (valueAngle === null) {
+    // No value to display
+    return null;
+  }
+
+  const target = {
+    x: cx + outerRadius * Math.sin(valueAngle),
+    y: cy - outerRadius * Math.cos(valueAngle),
+  };
+  return (
+    <g>
+      <circle cx={cx} cy={cy} r={5} fill="red" />
+      <path
+        d={`M ${cx} ${cy} L ${target.x} ${target.y}`}
+        stroke="red"
+        strokeWidth={3}
+      />
+    </g>
+  );
+}
+
+export default function CompositionExample() {
+  return (
+    <GaugeContainer
+      width={200}
+      height={200}
+      startAngle={-110}
+      endAngle={110}
+      value={30}
+    >
+      <GaugeReferenceArc />
+      <GaugeValueArc />
+      <GaugePointer />
+    </GaugeContainer>
+  );
+}

docs/data/charts/gauge/CompositionExample.tsx.preview

@@ -0,0 +1,11 @@
+<GaugeContainer
+  width={200}
+  height={200}
+  startAngle={-110}
+  endAngle={110}
+  value={30}
+>
+  <GaugeReferenceArc />
+  <GaugeValueArc />
+  <GaugePointer />
+</GaugeContainer>

docs/data/charts/gauge/GaugeValueRangeNoSnap.js

@@ -0,0 +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 (
+    <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>
+  );
+}

docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx

@@ -0,0 +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 (
+    <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>
+  );
+}

docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx.preview

@@ -0,0 +1,2 @@
+<Gauge width={100} height={100} value={50} />
+<Gauge width={100} height={100} value={50} valueMin={10} valueMax={60} />