Skip to content

Commit

Permalink
[docs] Document interfaces for charts (#12656)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexfauquette committed Apr 19, 2024
1 parent fc8524e commit b9cccdc
Show file tree
Hide file tree
Showing 39 changed files with 592 additions and 727 deletions.
23 changes: 18 additions & 5 deletions docs/data/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -437,11 +437,6 @@ const pages: MuiPage[] = [
title: 'Sparkline',
},
{ pathname: '/x/react-charts/gauge', title: 'Gauge' },
{
pathname: '/x/api/charts-group',
title: 'API Reference',
children: [...chartsComponentApi],
},
{
pathname: '/x/react-charts/common-features',
subheader: 'Common features',
Expand All @@ -455,6 +450,24 @@ const pages: MuiPage[] = [
{ pathname: '/x/react-charts/tooltip', title: 'Tooltip & Highlights' },
],
},
{
pathname: '/x/api/charts-group',
title: 'API Reference',
children: [
...chartsComponentApi,
{
pathname: '/x/api/charts-interfaces-group',
subheader: 'Interfaces',
children: [
{ pathname: '/x/api/charts/axis-config', title: 'AxisConfig' },
{ pathname: '/x/api/charts/bar-series-type', title: 'BarSeriesType' },
{ pathname: '/x/api/charts/line-series-type', title: 'LineSeriesType' },
{ pathname: '/x/api/charts/pie-series-type', title: 'PieSeriesType' },
{ pathname: '/x/api/charts/scatter-series-type', title: 'ScatterSeriesType' },
],
},
],
},
{
pathname: '/x/react-charts-future',
subheader: 'Future components',
Expand Down
26 changes: 26 additions & 0 deletions docs/pages/x/api/charts/axis-config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import jsonPageContent from './axis-config.json';

export default function Page(props) {
const { descriptions, pageContent } = props;
return (
<InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={pageContent} />
);
}

Page.getInitialProps = () => {
const req = require.context(
'docsx/translations/api-docs/charts/',
false,
/\.\/axis-config.*.json$/,
);
const descriptions = mapApiPageTranslations(req);

return {
descriptions,
pageContent: jsonPageContent,
};
};
52 changes: 52 additions & 0 deletions docs/pages/x/api/charts/axis-config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
{
"name": "AxisConfig",
"imports": ["import { AxisConfig } from '@mui/x-charts'"],
"properties": {
"id": { "type": { "description": "AxisId" }, "required": true },
"scaleType": { "type": { "description": "'linear'" }, "required": true },
"axisId": { "type": { "description": "AxisId" } },
"classes": { "type": { "description": "Partial&lt;ChartsAxisClasses&gt;" } },
"colorMap": { "type": { "description": "ContinuousColorConfig | PiecewiseColorConfig" } },
"data": { "type": { "description": "V[]" } },
"dataKey": { "type": { "description": "string" } },
"disableLine": { "type": { "description": "boolean" }, "default": "false" },
"disableTicks": { "type": { "description": "boolean" }, "default": "false" },
"fill": { "type": { "description": "string" }, "default": "'currentColor'" },
"hideTooltip": { "type": { "description": "boolean" } },
"label": { "type": { "description": "string" } },
"labelFontSize": { "type": { "description": "number" }, "default": "14" },
"labelStyle": { "type": { "description": "ChartsTextProps['style']" } },
"max": { "type": { "description": "number | Date" } },
"min": { "type": { "description": "number | Date" } },
"position": { "type": { "description": "'top' | 'bottom'" } },
"reverse": { "type": { "description": "boolean" } },
"slotProps": {
"type": { "description": "Partial&lt;ChartsAxisSlotProps&gt;" },
"default": "{}"
},
"slots": { "type": { "description": "Partial&lt;ChartsAxisSlots&gt;" }, "default": "{}" },
"stroke": { "type": { "description": "string" }, "default": "'currentColor'" },
"tickFontSize": { "type": { "description": "number" }, "default": "12" },
"tickInterval": {
"type": { "description": "'auto' | ((value: any, index: number) =&gt; boolean) | any[]" },
"default": "'auto'"
},
"tickLabelInterval": {
"type": { "description": "'auto' | ((value: any, index: number) =&gt; boolean)" },
"default": "'auto'"
},
"tickLabelPlacement": { "type": { "description": "'middle' | 'tick'" }, "default": "'middle'" },
"tickLabelStyle": { "type": { "description": "ChartsTextProps['style']" } },
"tickMaxStep": { "type": { "description": "number" } },
"tickMinStep": { "type": { "description": "number" } },
"tickNumber": { "type": { "description": "number" } },
"tickPlacement": {
"type": { "description": "'start' | 'end' | 'middle' | 'extremities'" },
"default": "'extremities'"
},
"tickSize": { "type": { "description": "number" }, "default": "6" },
"valueFormatter": {
"type": { "description": "(value: V, context: AxisValueFormatterContext) =&gt; string" }
}
}
}
20 changes: 4 additions & 16 deletions docs/pages/x/api/charts/bar-chart.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,7 @@
}
},
"bottomAxis": {
"type": {
"name": "union",
"description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number }<br>&#124;&nbsp;string"
},
"type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
"default": "xAxisIds[0] The id of the first provided axis"
},
"colors": {
Expand All @@ -36,10 +33,7 @@
"default": "'vertical'"
},
"leftAxis": {
"type": {
"name": "union",
"description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number }<br>&#124;&nbsp;string"
},
"type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
"default": "yAxisIds[0] The id of the first provided axis"
},
"margin": {
Expand All @@ -64,10 +58,7 @@
}
},
"rightAxis": {
"type": {
"name": "union",
"description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number }<br>&#124;&nbsp;string"
},
"type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
"default": "null"
},
"skipAnimation": { "type": { "name": "bool" }, "default": "false" },
Expand All @@ -85,10 +76,7 @@
"seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" }
},
"topAxis": {
"type": {
"name": "union",
"description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number }<br>&#124;&nbsp;string"
},
"type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
"default": "null"
},
"width": { "type": { "name": "number" } },
Expand Down
26 changes: 26 additions & 0 deletions docs/pages/x/api/charts/bar-series-type.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import jsonPageContent from './bar-series-type.json';

export default function Page(props) {
const { descriptions, pageContent } = props;
return (
<InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={pageContent} />
);
}

Page.getInitialProps = () => {
const req = require.context(
'docsx/translations/api-docs/charts/',
false,
/\.\/bar-series-type.*.json$/,
);
const descriptions = mapApiPageTranslations(req);

return {
descriptions,
pageContent: jsonPageContent,
};
};
20 changes: 20 additions & 0 deletions docs/pages/x/api/charts/bar-series-type.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "BarSeriesType",
"imports": ["import { BarSeriesType } from '@mui/x-charts'"],
"properties": {
"type": { "type": { "description": "'bar'" }, "required": true },
"color": { "type": { "description": "string" } },
"data": { "type": { "description": "(number | null)[]" } },
"dataKey": { "type": { "description": "string" } },
"highlightScope": { "type": { "description": "Partial&lt;HighlightScope&gt;" } },
"id": { "type": { "description": "SeriesId" } },
"label": { "type": { "description": "string" } },
"layout": { "type": { "description": "'horizontal' | 'vertical'" }, "default": "'vertical'" },
"stack": { "type": { "description": "string" } },
"stackOffset": { "type": { "description": "StackOffsetType" }, "default": "'diverging'" },
"stackOrder": { "type": { "description": "StackOrderType" }, "default": "'none'" },
"valueFormatter": { "type": { "description": "SeriesValueFormatter&lt;TValue&gt;" } },
"xAxisKey": { "type": { "description": "string" } },
"yAxisKey": { "type": { "description": "string" } }
}
}
20 changes: 4 additions & 16 deletions docs/pages/x/api/charts/charts-axis.json
Original file line number Diff line number Diff line change
@@ -1,24 +1,15 @@
{
"props": {
"bottomAxis": {
"type": {
"name": "union",
"description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number }<br>&#124;&nbsp;string"
},
"type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
"default": "xAxisIds[0] The id of the first provided axis"
},
"leftAxis": {
"type": {
"name": "union",
"description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number }<br>&#124;&nbsp;string"
},
"type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
"default": "yAxisIds[0] The id of the first provided axis"
},
"rightAxis": {
"type": {
"name": "union",
"description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number }<br>&#124;&nbsp;string"
},
"type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
"default": "null"
},
"slotProps": { "type": { "name": "object" }, "default": "{}" },
Expand All @@ -28,10 +19,7 @@
"additionalInfo": { "slotsApi": true }
},
"topAxis": {
"type": {
"name": "union",
"description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number }<br>&#124;&nbsp;string"
},
"type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
"default": "null"
}
},
Expand Down
20 changes: 4 additions & 16 deletions docs/pages/x/api/charts/line-chart.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,7 @@
}
},
"bottomAxis": {
"type": {
"name": "union",
"description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number }<br>&#124;&nbsp;string"
},
"type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
"default": "xAxisIds[0] The id of the first provided axis"
},
"colors": {
Expand All @@ -34,10 +31,7 @@
},
"height": { "type": { "name": "number" } },
"leftAxis": {
"type": {
"name": "union",
"description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number }<br>&#124;&nbsp;string"
},
"type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
"default": "yAxisIds[0] The id of the first provided axis"
},
"margin": {
Expand All @@ -58,10 +52,7 @@
"onLineClick": { "type": { "name": "func" } },
"onMarkClick": { "type": { "name": "func" } },
"rightAxis": {
"type": {
"name": "union",
"description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number }<br>&#124;&nbsp;string"
},
"type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
"default": "null"
},
"skipAnimation": { "type": { "name": "bool" }, "default": "false" },
Expand All @@ -80,10 +71,7 @@
"seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" }
},
"topAxis": {
"type": {
"name": "union",
"description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number }<br>&#124;&nbsp;string"
},
"type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
"default": "null"
},
"width": { "type": { "name": "number" } },
Expand Down
26 changes: 26 additions & 0 deletions docs/pages/x/api/charts/line-series-type.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import jsonPageContent from './line-series-type.json';

export default function Page(props) {
const { descriptions, pageContent } = props;
return (
<InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={pageContent} />
);
}

Page.getInitialProps = () => {
const req = require.context(
'docsx/translations/api-docs/charts/',
false,
/\.\/line-series-type.*.json$/,
);
const descriptions = mapApiPageTranslations(req);

return {
descriptions,
pageContent: jsonPageContent,
};
};

0 comments on commit b9cccdc

Please sign in to comment.