[charts] Adocument more API's

mui · Apr 23, 2024 · ad48f76 · ad48f76
1 parent 06ba75a
commit ad48f76
Show file tree

Hide file tree

Showing 11 changed files with 485 additions and 7 deletions.
diff --git a/docs/data/charts-component-api-pages.ts b/docs/data/charts-component-api-pages.ts
@@ -85,6 +85,14 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/charts-voronoi-handler',
     title: 'ChartsVoronoiHandler',
   },
+  {
+    pathname: '/x/api/charts/charts-x-axis',
+    title: 'ChartsXAxis',
+  },
+  {
+    pathname: '/x/api/charts/charts-y-axis',
+    title: 'ChartsYAxis',
+  },
   {
     pathname: '/x/api/charts/default-charts-axis-tooltip-content',
     title: 'DefaultChartsAxisTooltipContent',

diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md
@@ -1,7 +1,7 @@
 ---
 title: Charts - Axis
 productId: x-charts
-components: ChartsAxis, ChartsReferenceLine, ChartsText
+components: ChartsAxis, ChartsReferenceLine, ChartsText, ChartsXAxis, ChartsYAxis, ChartsReferenceLine
 ---
 
 # Charts - Axis

diff --git a/docs/pages/x/api/charts/charts-x-axis.js b/docs/pages/x/api/charts/charts-x-axis.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 './charts-x-axis.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docsx/translations/api-docs/charts/charts-x-axis',
+    false,
+    /\.\/charts-x-axis.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/x/api/charts/charts-x-axis.json b/docs/pages/x/api/charts/charts-x-axis.json
@@ -0,0 +1,139 @@
+{
+  "props": {
+    "axisId": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "disableLine": { "type": { "name": "bool" }, "default": "false" },
+    "disableTicks": { "type": { "name": "bool" }, "default": "false" },
+    "fill": { "type": { "name": "string" }, "default": "'currentColor'" },
+    "label": { "type": { "name": "string" } },
+    "labelFontSize": {
+      "type": { "name": "number" },
+      "default": "14",
+      "deprecated": true,
+      "deprecationInfo": "Consider using <code>labelStyle.fontSize</code> instead."
+    },
+    "labelStyle": { "type": { "name": "object" } },
+    "position": { "type": { "name": "enum", "description": "'bottom'<br>&#124;&nbsp;'top'" } },
+    "slotProps": { "type": { "name": "object" }, "default": "{}" },
+    "slots": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "additionalInfo": { "slotsApi": true }
+    },
+    "stroke": { "type": { "name": "string" }, "default": "'currentColor'" },
+    "tickFontSize": {
+      "type": { "name": "number" },
+      "default": "12",
+      "deprecated": true,
+      "deprecationInfo": "Consider using <code>tickLabelStyle.fontSize</code> instead."
+    },
+    "tickInterval": {
+      "type": { "name": "union", "description": "'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func" },
+      "default": "'auto'"
+    },
+    "tickLabelInterval": {
+      "type": { "name": "union", "description": "'auto'<br>&#124;&nbsp;func" },
+      "default": "'auto'"
+    },
+    "tickLabelPlacement": {
+      "type": { "name": "enum", "description": "'middle'<br>&#124;&nbsp;'tick'" },
+      "default": "'middle'"
+    },
+    "tickLabelStyle": { "type": { "name": "object" } },
+    "tickMaxStep": { "type": { "name": "number" } },
+    "tickMinStep": { "type": { "name": "number" } },
+    "tickNumber": { "type": { "name": "number" } },
+    "tickPlacement": {
+      "type": {
+        "name": "enum",
+        "description": "'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start'"
+      },
+      "default": "'extremities'"
+    },
+    "tickSize": { "type": { "name": "number" }, "default": "6" }
+  },
+  "name": "ChartsXAxis",
+  "imports": [
+    "import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';",
+    "import { ChartsXAxis } from '@mui/x-charts';"
+  ],
+  "classes": [
+    {
+      "key": "bottom",
+      "className": "MuiChartsXAxis-bottom",
+      "description": "Styles applied to the bottom axis.",
+      "isGlobal": false
+    },
+    {
+      "key": "directionX",
+      "className": "MuiChartsXAxis-directionX",
+      "description": "Styles applied to x-axes.",
+      "isGlobal": false
+    },
+    {
+      "key": "directionY",
+      "className": "MuiChartsXAxis-directionY",
+      "description": "Styles applied to y-axes.",
+      "isGlobal": false
+    },
+    {
+      "key": "label",
+      "className": "MuiChartsXAxis-label",
+      "description": "Styles applied to the group containing the axis label.",
+      "isGlobal": false
+    },
+    {
+      "key": "left",
+      "className": "MuiChartsXAxis-left",
+      "description": "Styles applied to the left axis.",
+      "isGlobal": false
+    },
+    {
+      "key": "line",
+      "className": "MuiChartsXAxis-line",
+      "description": "Styles applied to the main line element.",
+      "isGlobal": false
+    },
+    {
+      "key": "right",
+      "className": "MuiChartsXAxis-right",
+      "description": "Styles applied to the right axis.",
+      "isGlobal": false
+    },
+    {
+      "key": "root",
+      "className": "MuiChartsXAxis-root",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    },
+    {
+      "key": "tick",
+      "className": "MuiChartsXAxis-tick",
+      "description": "Styles applied to ticks.",
+      "isGlobal": false
+    },
+    {
+      "key": "tickContainer",
+      "className": "MuiChartsXAxis-tickContainer",
+      "description": "Styles applied to group ingruding the tick and its label.",
+      "isGlobal": false
+    },
+    {
+      "key": "tickLabel",
+      "className": "MuiChartsXAxis-tickLabel",
+      "description": "Styles applied to ticks label.",
+      "isGlobal": false
+    },
+    {
+      "key": "top",
+      "className": "MuiChartsXAxis-top",
+      "description": "Styles applied to the top axis.",
+      "isGlobal": false
+    }
+  ],
+  "muiName": "MuiChartsXAxis",
+  "filename": "/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/x/react-charts/axis/\">Charts - Axis</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/x/api/charts/charts-y-axis.js b/docs/pages/x/api/charts/charts-y-axis.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 './charts-y-axis.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docsx/translations/api-docs/charts/charts-y-axis',
+    false,
+    /\.\/charts-y-axis.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/x/api/charts/charts-y-axis.json b/docs/pages/x/api/charts/charts-y-axis.json
@@ -0,0 +1,139 @@
+{
+  "props": {
+    "axisId": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "disableLine": { "type": { "name": "bool" }, "default": "false" },
+    "disableTicks": { "type": { "name": "bool" }, "default": "false" },
+    "fill": { "type": { "name": "string" }, "default": "'currentColor'" },
+    "label": { "type": { "name": "string" } },
+    "labelFontSize": {
+      "type": { "name": "number" },
+      "default": "14",
+      "deprecated": true,
+      "deprecationInfo": "Consider using <code>labelStyle.fontSize</code> instead."
+    },
+    "labelStyle": { "type": { "name": "object" } },
+    "position": { "type": { "name": "enum", "description": "'left'<br>&#124;&nbsp;'right'" } },
+    "slotProps": { "type": { "name": "object" }, "default": "{}" },
+    "slots": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "additionalInfo": { "slotsApi": true }
+    },
+    "stroke": { "type": { "name": "string" }, "default": "'currentColor'" },
+    "tickFontSize": {
+      "type": { "name": "number" },
+      "default": "12",
+      "deprecated": true,
+      "deprecationInfo": "Consider using <code>tickLabelStyle.fontSize</code> instead."
+    },
+    "tickInterval": {
+      "type": { "name": "union", "description": "'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func" },
+      "default": "'auto'"
+    },
+    "tickLabelInterval": {
+      "type": { "name": "union", "description": "'auto'<br>&#124;&nbsp;func" },
+      "default": "'auto'"
+    },
+    "tickLabelPlacement": {
+      "type": { "name": "enum", "description": "'middle'<br>&#124;&nbsp;'tick'" },
+      "default": "'middle'"
+    },
+    "tickLabelStyle": { "type": { "name": "object" } },
+    "tickMaxStep": { "type": { "name": "number" } },
+    "tickMinStep": { "type": { "name": "number" } },
+    "tickNumber": { "type": { "name": "number" } },
+    "tickPlacement": {
+      "type": {
+        "name": "enum",
+        "description": "'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start'"
+      },
+      "default": "'extremities'"
+    },
+    "tickSize": { "type": { "name": "number" }, "default": "6" }
+  },
+  "name": "ChartsYAxis",
+  "imports": [
+    "import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';",
+    "import { ChartsYAxis } from '@mui/x-charts';"
+  ],
+  "classes": [
+    {
+      "key": "bottom",
+      "className": "MuiChartsYAxis-bottom",
+      "description": "Styles applied to the bottom axis.",
+      "isGlobal": false
+    },
+    {
+      "key": "directionX",
+      "className": "MuiChartsYAxis-directionX",
+      "description": "Styles applied to x-axes.",
+      "isGlobal": false
+    },
+    {
+      "key": "directionY",
+      "className": "MuiChartsYAxis-directionY",
+      "description": "Styles applied to y-axes.",
+      "isGlobal": false
+    },
+    {
+      "key": "label",
+      "className": "MuiChartsYAxis-label",
+      "description": "Styles applied to the group containing the axis label.",
+      "isGlobal": false
+    },
+    {
+      "key": "left",
+      "className": "MuiChartsYAxis-left",
+      "description": "Styles applied to the left axis.",
+      "isGlobal": false
+    },
+    {
+      "key": "line",
+      "className": "MuiChartsYAxis-line",
+      "description": "Styles applied to the main line element.",
+      "isGlobal": false
+    },
+    {
+      "key": "right",
+      "className": "MuiChartsYAxis-right",
+      "description": "Styles applied to the right axis.",
+      "isGlobal": false
+    },
+    {
+      "key": "root",
+      "className": "MuiChartsYAxis-root",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    },
+    {
+      "key": "tick",
+      "className": "MuiChartsYAxis-tick",
+      "description": "Styles applied to ticks.",
+      "isGlobal": false
+    },
+    {
+      "key": "tickContainer",
+      "className": "MuiChartsYAxis-tickContainer",
+      "description": "Styles applied to group ingruding the tick and its label.",
+      "isGlobal": false
+    },
+    {
+      "key": "tickLabel",
+      "className": "MuiChartsYAxis-tickLabel",
+      "description": "Styles applied to ticks label.",
+      "isGlobal": false
+    },
+    {
+      "key": "top",
+      "className": "MuiChartsYAxis-top",
+      "description": "Styles applied to the top axis.",
+      "isGlobal": false
+    }
+  ],
+  "muiName": "MuiChartsYAxis",
+  "filename": "/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/x/react-charts/axis/\">Charts - Axis</a></li></ul>",
+  "cssComponent": false
+}