diff --git a/docs/data/charts-component-api-pages.ts b/docs/data/charts-component-api-pages.ts
index 76bc2512caa0..e352d14101a6 100644
--- a/docs/data/charts-component-api-pages.ts
+++ b/docs/data/charts-component-api-pages.ts
@@ -93,6 +93,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',
diff --git a/docs/pages/x/api/charts/gauge-container.js b/docs/pages/x/api/charts/gauge-container.js
new file mode 100644
index 000000000000..7b2fc51b7afc
--- /dev/null
+++ b/docs/pages/x/api/charts/gauge-container.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './gauge-container.json';
+
+export default function Page(props) {
+ const { descriptions, pageContent } = props;
+ return ;
+}
+
+Page.getInitialProps = () => {
+ const req = require.context(
+ 'docsx/translations/api-docs/charts/gauge-container',
+ false,
+ /\.\/gauge-container.*.json$/,
+ );
+ const descriptions = mapApiPageTranslations(req);
+
+ return {
+ descriptions,
+ pageContent: jsonPageContent,
+ };
+};
diff --git a/docs/pages/x/api/charts/gauge-container.json b/docs/pages/x/api/charts/gauge-container.json
new file mode 100644
index 000000000000..80d1aff0376c
--- /dev/null
+++ b/docs/pages/x/api/charts/gauge-container.json
@@ -0,0 +1,41 @@
+{
+ "props": {
+ "cornerRadius": { "type": { "name": "number" }, "default": "'50%'" },
+ "cx": { "type": { "name": "union", "description": "number
| string" } },
+ "cy": { "type": { "name": "union", "description": "number
| string" } },
+ "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },
+ "endAngle": { "type": { "name": "number" }, "default": "360" },
+ "height": { "type": { "name": "number" }, "default": "undefined" },
+ "innerRadius": {
+ "type": { "name": "union", "description": "number
| string" },
+ "default": "'80%'"
+ },
+ "margin": {
+ "type": {
+ "name": "shape",
+ "description": "{ bottom?: number, left?: number, right?: number, top?: number }"
+ },
+ "default": "object Depends on the charts type."
+ },
+ "outerRadius": {
+ "type": { "name": "union", "description": "number
| string" },
+ "default": "'100%'"
+ },
+ "startAngle": { "type": { "name": "number" }, "default": "0" },
+ "value": { "type": { "name": "number" } },
+ "valueMax": { "type": { "name": "number" }, "default": "100" },
+ "valueMin": { "type": { "name": "number" }, "default": "0" },
+ "width": { "type": { "name": "number" }, "default": "undefined" }
+ },
+ "name": "GaugeContainer",
+ "imports": [
+ "import { GaugeContainer } from '@mui/x-charts/Gauge';",
+ "import { GaugeContainer } from '@mui/x-charts';"
+ ],
+ "classes": [],
+ "muiName": "MuiGaugeContainer",
+ "filename": "/packages/x-charts/src/Gauge/GaugeContainer.tsx",
+ "inheritance": null,
+ "demos": "",
+ "cssComponent": false
+}
diff --git a/docs/pages/x/api/charts/gauge.js b/docs/pages/x/api/charts/gauge.js
new file mode 100644
index 000000000000..4b4dfa202507
--- /dev/null
+++ b/docs/pages/x/api/charts/gauge.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './gauge.json';
+
+export default function Page(props) {
+ const { descriptions, pageContent } = props;
+ return ;
+}
+
+Page.getInitialProps = () => {
+ const req = require.context(
+ 'docsx/translations/api-docs/charts/gauge',
+ false,
+ /\.\/gauge.*.json$/,
+ );
+ const descriptions = mapApiPageTranslations(req);
+
+ return {
+ descriptions,
+ pageContent: jsonPageContent,
+ };
+};
diff --git a/docs/pages/x/api/charts/gauge.json b/docs/pages/x/api/charts/gauge.json
new file mode 100644
index 000000000000..c1284e25f115
--- /dev/null
+++ b/docs/pages/x/api/charts/gauge.json
@@ -0,0 +1,60 @@
+{
+ "props": {
+ "cornerRadius": { "type": { "name": "number" }, "default": "'50%'" },
+ "cx": { "type": { "name": "union", "description": "number
| string" } },
+ "cy": { "type": { "name": "union", "description": "number
| string" } },
+ "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },
+ "endAngle": { "type": { "name": "number" }, "default": "360" },
+ "height": { "type": { "name": "number" }, "default": "undefined" },
+ "innerRadius": {
+ "type": { "name": "union", "description": "number
| string" },
+ "default": "'80%'"
+ },
+ "margin": {
+ "type": {
+ "name": "shape",
+ "description": "{ bottom?: number, left?: number, right?: number, top?: number }"
+ },
+ "default": "object Depends on the charts type."
+ },
+ "outerRadius": {
+ "type": { "name": "union", "description": "number
| string" },
+ "default": "'100%'"
+ },
+ "startAngle": { "type": { "name": "number" }, "default": "0" },
+ "value": { "type": { "name": "number" } },
+ "valueMax": { "type": { "name": "number" }, "default": "100" },
+ "valueMin": { "type": { "name": "number" }, "default": "0" },
+ "width": { "type": { "name": "number" }, "default": "undefined" }
+ },
+ "name": "Gauge",
+ "imports": [
+ "import { Gauge } from '@mui/x-charts/Gauge';",
+ "import { Gauge } from '@mui/x-charts';"
+ ],
+ "classes": [
+ {
+ "key": "referenceArc",
+ "className": "MuiGauge-referenceArc",
+ "description": "Styles applied to the arc diplaying the range of available values.",
+ "isGlobal": false
+ },
+ {
+ "key": "root",
+ "className": "MuiGauge-root",
+ "description": "Styles applied to the root element.",
+ "isGlobal": false
+ },
+ {
+ "key": "valueArc",
+ "className": "MuiGauge-valueArc",
+ "description": "Styles applied to the arc diplaying the value.",
+ "isGlobal": false
+ }
+ ],
+ "muiName": "MuiGauge",
+ "filename": "/packages/x-charts/src/Gauge/Gauge.tsx",
+ "inheritance": null,
+ "demos": "",
+ "cssComponent": false
+}
diff --git a/docs/translations/api-docs/charts/gauge-container/gauge-container.json b/docs/translations/api-docs/charts/gauge-container/gauge-container.json
new file mode 100644
index 000000000000..6c230d3a7610
--- /dev/null
+++ b/docs/translations/api-docs/charts/gauge-container/gauge-container.json
@@ -0,0 +1,40 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "cornerRadius": {
+ "description": "The radius applied to arc corners (similar to border radius)."
+ },
+ "cx": {
+ "description": "The x coordinate of the pie center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the width the drawing area."
+ },
+ "cy": {
+ "description": "The y coordinate of the pie center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the height the drawing area."
+ },
+ "disableAxisListener": {
+ "description": "If true, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance."
+ },
+ "endAngle": { "description": "The end angle (deg)." },
+ "height": {
+ "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
+ },
+ "innerRadius": {
+ "description": "The radius between circle center and the begining of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area."
+ },
+ "margin": {
+ "description": "The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts an object with the optional properties: top, bottom, left, and right."
+ },
+ "outerRadius": {
+ "description": "The radius between circle center and the end of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area."
+ },
+ "startAngle": { "description": "The start angle (deg)." },
+ "value": {
+ "description": "The value of the gauge. Set to null if no value to display."
+ },
+ "valueMax": { "description": "The maximal value of the gauge." },
+ "valueMin": { "description": "The minimal value of the gauge." },
+ "width": {
+ "description": "The width of the chart in px. If not defined, it takes the width of the parent element."
+ }
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs/charts/gauge/gauge.json b/docs/translations/api-docs/charts/gauge/gauge.json
new file mode 100644
index 000000000000..a6c6633d9045
--- /dev/null
+++ b/docs/translations/api-docs/charts/gauge/gauge.json
@@ -0,0 +1,50 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "cornerRadius": {
+ "description": "The radius applied to arc corners (similar to border radius)."
+ },
+ "cx": {
+ "description": "The x coordinate of the pie center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the width the drawing area."
+ },
+ "cy": {
+ "description": "The y coordinate of the pie center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the height the drawing area."
+ },
+ "disableAxisListener": {
+ "description": "If true, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance."
+ },
+ "endAngle": { "description": "The end angle (deg)." },
+ "height": {
+ "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
+ },
+ "innerRadius": {
+ "description": "The radius between circle center and the begining of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area."
+ },
+ "margin": {
+ "description": "The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts an object with the optional properties: top, bottom, left, and right."
+ },
+ "outerRadius": {
+ "description": "The radius between circle center and the end of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area."
+ },
+ "startAngle": { "description": "The start angle (deg)." },
+ "value": {
+ "description": "The value of the gauge. Set to null if no value to display."
+ },
+ "valueMax": { "description": "The maximal value of the gauge." },
+ "valueMin": { "description": "The minimal value of the gauge." },
+ "width": {
+ "description": "The width of the chart in px. If not defined, it takes the width of the parent element."
+ }
+ },
+ "classDescriptions": {
+ "referenceArc": {
+ "description": "Styles applied to {{nodeName}}.",
+ "nodeName": "the arc diplaying the range of available values"
+ },
+ "root": { "description": "Styles applied to the root element." },
+ "valueArc": {
+ "description": "Styles applied to {{nodeName}}.",
+ "nodeName": "the arc diplaying the value"
+ }
+ }
+}
diff --git a/packages/x-charts/src/Gauge/Gauge.tsx b/packages/x-charts/src/Gauge/Gauge.tsx
index ff41cdeca4ff..b85ce819f4fd 100644
--- a/packages/x-charts/src/Gauge/Gauge.tsx
+++ b/packages/x-charts/src/Gauge/Gauge.tsx
@@ -32,4 +32,111 @@ function Gauge(props: GaugeProps) {
);
}
+Gauge.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
+ // ----------------------------------------------------------------------
+ children: PropTypes.node,
+ classes: PropTypes.object,
+ className: PropTypes.string,
+ /**
+ * The radius applied to arc corners (similar to border radius).
+ * @default '50%'
+ */
+ cornerRadius: PropTypes.number,
+ /**
+ * The x coordinate of the pie center.
+ * Can be a number (in px) or a string with a percentage such as '50%'.
+ * The '100%' is the width the drawing area.
+ */
+ cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ /**
+ * The y coordinate of the pie center.
+ * Can be a number (in px) or a string with a percentage such as '50%'.
+ * The '100%' is the height the drawing area.
+ */
+ cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ desc: PropTypes.string,
+ /**
+ * If `true`, the charts will not listen to the mouse move event.
+ * It might break interactive features, but will improve performance.
+ * @default false
+ */
+ disableAxisListener: PropTypes.bool,
+ /**
+ * The end angle (deg).
+ * @default 360
+ */
+ endAngle: PropTypes.number,
+ /**
+ * The height of the chart in px. If not defined, it takes the height of the parent element.
+ * @default undefined
+ */
+ height: PropTypes.number,
+ /**
+ * The radius between circle center and the begining of the arc.
+ * Can be a number (in px) or a string with a percentage such as '50%'.
+ * The '100%' is the maximal radius that fit into the drawing area.
+ * @default '80%'
+ */
+ innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ /**
+ * The margin between the SVG and the drawing area.
+ * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+ * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+ * @default object Depends on the charts type.
+ */
+ margin: PropTypes.shape({
+ bottom: PropTypes.number,
+ left: PropTypes.number,
+ right: PropTypes.number,
+ top: PropTypes.number,
+ }),
+ /**
+ * The radius between circle center and the end of the arc.
+ * Can be a number (in px) or a string with a percentage such as '50%'.
+ * The '100%' is the maximal radius that fit into the drawing area.
+ * @default '100%'
+ */
+ outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ /**
+ * The start angle (deg).
+ * @default 0
+ */
+ startAngle: PropTypes.number,
+ sx: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+ PropTypes.func,
+ PropTypes.object,
+ ]),
+ title: PropTypes.string,
+ /**
+ * The value of the gauge.
+ * Set to `null` if no value to display.
+ */
+ value: PropTypes.number,
+ /**
+ * The maximal value of the gauge.
+ * @default 100
+ */
+ valueMax: PropTypes.number,
+ /**
+ * The minimal value of the gauge.
+ * @default 0
+ */
+ valueMin: PropTypes.number,
+ viewBox: PropTypes.shape({
+ height: PropTypes.number,
+ width: PropTypes.number,
+ x: PropTypes.number,
+ y: PropTypes.number,
+ }),
+ /**
+ * The width of the chart in px. If not defined, it takes the width of the parent element.
+ * @default undefined
+ */
+ width: PropTypes.number,
+} as any;
+
export { Gauge };
diff --git a/packages/x-charts/src/Gauge/GaugeContainer.tsx b/packages/x-charts/src/Gauge/GaugeContainer.tsx
index 2a519832d781..e3f21da1e459 100644
--- a/packages/x-charts/src/Gauge/GaugeContainer.tsx
+++ b/packages/x-charts/src/Gauge/GaugeContainer.tsx
@@ -115,4 +115,110 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(props: GaugeCont
);
});
+GaugeContainer.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
+ // ----------------------------------------------------------------------
+ children: PropTypes.node,
+ className: PropTypes.string,
+ /**
+ * The radius applied to arc corners (similar to border radius).
+ * @default '50%'
+ */
+ cornerRadius: PropTypes.number,
+ /**
+ * The x coordinate of the pie center.
+ * Can be a number (in px) or a string with a percentage such as '50%'.
+ * The '100%' is the width the drawing area.
+ */
+ cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ /**
+ * The y coordinate of the pie center.
+ * Can be a number (in px) or a string with a percentage such as '50%'.
+ * The '100%' is the height the drawing area.
+ */
+ cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ desc: PropTypes.string,
+ /**
+ * If `true`, the charts will not listen to the mouse move event.
+ * It might break interactive features, but will improve performance.
+ * @default false
+ */
+ disableAxisListener: PropTypes.bool,
+ /**
+ * The end angle (deg).
+ * @default 360
+ */
+ endAngle: PropTypes.number,
+ /**
+ * The height of the chart in px. If not defined, it takes the height of the parent element.
+ * @default undefined
+ */
+ height: PropTypes.number,
+ /**
+ * The radius between circle center and the begining of the arc.
+ * Can be a number (in px) or a string with a percentage such as '50%'.
+ * The '100%' is the maximal radius that fit into the drawing area.
+ * @default '80%'
+ */
+ innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ /**
+ * The margin between the SVG and the drawing area.
+ * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+ * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+ * @default object Depends on the charts type.
+ */
+ margin: PropTypes.shape({
+ bottom: PropTypes.number,
+ left: PropTypes.number,
+ right: PropTypes.number,
+ top: PropTypes.number,
+ }),
+ /**
+ * The radius between circle center and the end of the arc.
+ * Can be a number (in px) or a string with a percentage such as '50%'.
+ * The '100%' is the maximal radius that fit into the drawing area.
+ * @default '100%'
+ */
+ outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ /**
+ * The start angle (deg).
+ * @default 0
+ */
+ startAngle: PropTypes.number,
+ sx: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+ PropTypes.func,
+ PropTypes.object,
+ ]),
+ title: PropTypes.string,
+ /**
+ * The value of the gauge.
+ * Set to `null` if no value to display.
+ */
+ value: PropTypes.number,
+ /**
+ * The maximal value of the gauge.
+ * @default 100
+ */
+ valueMax: PropTypes.number,
+ /**
+ * The minimal value of the gauge.
+ * @default 0
+ */
+ valueMin: PropTypes.number,
+ viewBox: PropTypes.shape({
+ height: PropTypes.number,
+ width: PropTypes.number,
+ x: PropTypes.number,
+ y: PropTypes.number,
+ }),
+ /**
+ * The width of the chart in px. If not defined, it takes the width of the parent element.
+ * @default undefined
+ */
+ width: PropTypes.number,
+} as any;
+
export { GaugeContainer };
diff --git a/scripts/buildApiDocs/chartsSettings/index.ts b/scripts/buildApiDocs/chartsSettings/index.ts
index 768c036cf3c7..6119628c7ea9 100644
--- a/scripts/buildApiDocs/chartsSettings/index.ts
+++ b/scripts/buildApiDocs/chartsSettings/index.ts
@@ -58,7 +58,13 @@ export default apiPages;
getComponentInfo,
translationLanguages: LANGUAGES,
skipComponent(filename) {
- return filename.includes('/context/');
+ if (filename.includes('/context/')) {
+ return true;
+ }
+ return [
+ 'x-charts/src/Gauge/GaugeReferenceArc.tsx',
+ 'x-charts/src/Gauge/GaugeValueArc.tsx',
+ ].some((invalidPath) => filename.endsWith(invalidPath));
},
skipAnnotatingComponentDefinition: true,
translationPagesDirectory: 'docs/translations/api-docs/charts',