Skip to content

Commit ea53ddc

Browse files
[charts] Add configurable slots to toolbar (#17712)
1 parent a467e1c commit ea53ddc

File tree

61 files changed

+784
-55
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+784
-55
lines changed

docs/pages/x/api/charts/bar-chart-pro.json

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,88 @@
119119
"import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';",
120120
"import { BarChartPro } from '@mui/x-charts-pro';"
121121
],
122+
"slots": [
123+
{
124+
"name": "axisLabel",
125+
"description": "Custom component for axis label.",
126+
"default": "ChartsText",
127+
"class": null
128+
},
129+
{
130+
"name": "axisLine",
131+
"description": "Custom component for the axis main line.",
132+
"default": "'line'",
133+
"class": null
134+
},
135+
{
136+
"name": "axisTick",
137+
"description": "Custom component for the axis tick.",
138+
"default": "'line'",
139+
"class": null
140+
},
141+
{
142+
"name": "axisTickLabel",
143+
"description": "Custom component for tick label.",
144+
"default": "ChartsText",
145+
"class": null
146+
},
147+
{
148+
"name": "bar",
149+
"description": "The component that renders the bar.",
150+
"default": "BarElementPath",
151+
"class": null
152+
},
153+
{
154+
"name": "barLabel",
155+
"description": "The component that renders the bar label.",
156+
"default": "BarLabel",
157+
"class": null
158+
},
159+
{ "name": "baseIconButton", "description": "", "class": null },
160+
{ "name": "baseTooltip", "description": "", "class": null },
161+
{
162+
"name": "legend",
163+
"description": "Custom rendering of the legend.",
164+
"default": "ChartsLegend",
165+
"class": null
166+
},
167+
{
168+
"name": "loadingOverlay",
169+
"description": "Overlay component rendered when the chart is in a loading state.",
170+
"default": "ChartsLoadingOverlay",
171+
"class": null
172+
},
173+
{
174+
"name": "noDataOverlay",
175+
"description": "Overlay component rendered when the chart has no data to display.",
176+
"default": "ChartsNoDataOverlay",
177+
"class": null
178+
},
179+
{
180+
"name": "toolbar",
181+
"description": "Custom component for the toolbar.",
182+
"default": "ChartsToolbar",
183+
"class": null
184+
},
185+
{
186+
"name": "tooltip",
187+
"description": "Custom component for the tooltip popper.",
188+
"default": "ChartsTooltipRoot",
189+
"class": null
190+
},
191+
{
192+
"name": "zoomInIcon",
193+
"description": "Icon displayed on the toolbar's zoom in button.",
194+
"default": "ChartsZoomInIcon",
195+
"class": null
196+
},
197+
{
198+
"name": "zoomOutIcon",
199+
"description": "Icon displayed on the toolbar's zoom out button.",
200+
"default": "ChartsZoomOutIcon",
201+
"class": null
202+
}
203+
],
122204
"classes": [],
123205
"spread": true,
124206
"themeDefaultProps": null,

docs/pages/x/api/charts/bar-chart.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
"describedArgs": ["event", "barItemIdentifier"]
6868
}
6969
},
70+
"showToolbar": { "type": { "name": "bool" }, "default": "false" },
7071
"skipAnimation": { "type": { "name": "bool" } },
7172
"slotProps": { "type": { "name": "object" }, "default": "{}" },
7273
"slots": {
@@ -131,6 +132,7 @@
131132
"default": "BarLabel",
132133
"class": null
133134
},
135+
{ "name": "baseIconButton", "description": "", "class": null },
134136
{
135137
"name": "legend",
136138
"description": "Custom rendering of the legend.",
@@ -149,6 +151,12 @@
149151
"default": "ChartsNoDataOverlay",
150152
"class": null
151153
},
154+
{
155+
"name": "toolbar",
156+
"description": "Custom component for the toolbar.",
157+
"default": "ChartsToolbar",
158+
"class": null
159+
},
152160
{
153161
"name": "tooltip",
154162
"description": "Custom component for the tooltip popper.",

docs/pages/x/api/charts/chart-container.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@
5757
},
5858
"series": { "type": { "name": "arrayOf", "description": "Array<object>" } },
5959
"skipAnimation": { "type": { "name": "bool" } },
60+
"slotProps": { "type": { "name": "object" } },
61+
"slots": { "type": { "name": "object" }, "additionalInfo": { "slotsApi": true } },
6062
"voronoiMaxRadius": { "type": { "name": "number" } },
6163
"width": { "type": { "name": "number" } },
6264
"xAxis": {

docs/pages/x/api/charts/chart-data-provider-pro.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
},
1717
"series": { "type": { "name": "arrayOf", "description": "Array<object>" } },
1818
"skipAnimation": { "type": { "name": "bool" } },
19+
"slotProps": { "type": { "name": "object" } },
20+
"slots": { "type": { "name": "object" }, "additionalInfo": { "slotsApi": true } },
1921
"width": { "type": { "name": "number" } }
2022
},
2123
"name": "ChartDataProviderPro",

docs/pages/x/api/charts/chart-data-provider.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
},
1717
"series": { "type": { "name": "arrayOf", "description": "Array<object>" } },
1818
"skipAnimation": { "type": { "name": "bool" } },
19+
"slotProps": { "type": { "name": "object" } },
20+
"slots": { "type": { "name": "object" }, "additionalInfo": { "slotsApi": true } },
1921
"width": { "type": { "name": "number" } }
2022
},
2123
"name": "ChartDataProvider",

docs/pages/x/api/charts/funnel-chart.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@
104104
"default": "ChartsText",
105105
"class": null
106106
},
107+
{ "name": "baseIconButton", "description": "", "class": null },
107108
{ "name": "funnelSection", "description": "", "class": null },
108109
{
109110
"name": "legend",
@@ -123,6 +124,12 @@
123124
"default": "ChartsNoDataOverlay",
124125
"class": null
125126
},
127+
{
128+
"name": "toolbar",
129+
"description": "Custom component for the toolbar.",
130+
"default": "ChartsToolbar",
131+
"class": null
132+
},
126133
{
127134
"name": "tooltip",
128135
"description": "Custom component for the tooltip popper.",

docs/pages/x/api/charts/line-chart-pro.json

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,90 @@
111111
"import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';",
112112
"import { LineChartPro } from '@mui/x-charts-pro';"
113113
],
114+
"slots": [
115+
{
116+
"name": "area",
117+
"description": "The component that renders the area.",
118+
"default": "AnimatedArea",
119+
"class": null
120+
},
121+
{
122+
"name": "axisLabel",
123+
"description": "Custom component for axis label.",
124+
"default": "ChartsText",
125+
"class": null
126+
},
127+
{
128+
"name": "axisLine",
129+
"description": "Custom component for the axis main line.",
130+
"default": "'line'",
131+
"class": null
132+
},
133+
{
134+
"name": "axisTick",
135+
"description": "Custom component for the axis tick.",
136+
"default": "'line'",
137+
"class": null
138+
},
139+
{
140+
"name": "axisTickLabel",
141+
"description": "Custom component for tick label.",
142+
"default": "ChartsText",
143+
"class": null
144+
},
145+
{ "name": "baseIconButton", "description": "", "class": null },
146+
{ "name": "baseTooltip", "description": "", "class": null },
147+
{
148+
"name": "legend",
149+
"description": "Custom rendering of the legend.",
150+
"default": "ChartsLegend",
151+
"class": null
152+
},
153+
{
154+
"name": "line",
155+
"description": "The component that renders the line.",
156+
"default": "LineElementPath",
157+
"class": null
158+
},
159+
{ "name": "lineHighlight", "description": "", "class": null },
160+
{
161+
"name": "loadingOverlay",
162+
"description": "Overlay component rendered when the chart is in a loading state.",
163+
"default": "ChartsLoadingOverlay",
164+
"class": null
165+
},
166+
{ "name": "mark", "description": "", "class": null },
167+
{
168+
"name": "noDataOverlay",
169+
"description": "Overlay component rendered when the chart has no data to display.",
170+
"default": "ChartsNoDataOverlay",
171+
"class": null
172+
},
173+
{
174+
"name": "toolbar",
175+
"description": "Custom component for the toolbar.",
176+
"default": "ChartsToolbar",
177+
"class": null
178+
},
179+
{
180+
"name": "tooltip",
181+
"description": "Custom component for the tooltip popper.",
182+
"default": "ChartsTooltipRoot",
183+
"class": null
184+
},
185+
{
186+
"name": "zoomInIcon",
187+
"description": "Icon displayed on the toolbar's zoom in button.",
188+
"default": "ChartsZoomInIcon",
189+
"class": null
190+
},
191+
{
192+
"name": "zoomOutIcon",
193+
"description": "Icon displayed on the toolbar's zoom out button.",
194+
"default": "ChartsZoomOutIcon",
195+
"class": null
196+
}
197+
],
114198
"classes": [],
115199
"spread": true,
116200
"themeDefaultProps": null,

docs/pages/x/api/charts/line-chart.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
},
6060
"onLineClick": { "type": { "name": "func" } },
6161
"onMarkClick": { "type": { "name": "func" } },
62+
"showToolbar": { "type": { "name": "bool" }, "default": "false" },
6263
"skipAnimation": { "type": { "name": "bool" }, "default": "false" },
6364
"slotProps": { "type": { "name": "object" }, "default": "{}" },
6465
"slots": {
@@ -117,6 +118,7 @@
117118
"default": "ChartsText",
118119
"class": null
119120
},
121+
{ "name": "baseIconButton", "description": "", "class": null },
120122
{
121123
"name": "legend",
122124
"description": "Custom rendering of the legend.",
@@ -143,6 +145,12 @@
143145
"default": "ChartsNoDataOverlay",
144146
"class": null
145147
},
148+
{
149+
"name": "toolbar",
150+
"description": "Custom component for the toolbar.",
151+
"default": "ChartsToolbar",
152+
"class": null
153+
},
146154
{
147155
"name": "tooltip",
148156
"description": "Custom component for the tooltip popper.",

docs/pages/x/api/charts/pie-chart.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
}
3535
},
3636
"onItemClick": { "type": { "name": "func" } },
37+
"showToolbar": { "type": { "name": "bool" }, "default": "false" },
3738
"skipAnimation": { "type": { "name": "bool" } },
3839
"slotProps": { "type": { "name": "object" }, "default": "{}" },
3940
"slots": {
@@ -50,6 +51,7 @@
5051
"import { PieChart } from '@mui/x-charts-pro';"
5152
],
5253
"slots": [
54+
{ "name": "baseIconButton", "description": "", "class": null },
5355
{
5456
"name": "legend",
5557
"description": "Custom rendering of the legend.",
@@ -70,6 +72,12 @@
7072
},
7173
{ "name": "pieArc", "description": "", "class": null },
7274
{ "name": "pieArcLabel", "description": "", "class": null },
75+
{
76+
"name": "toolbar",
77+
"description": "Custom component for the toolbar.",
78+
"default": "ChartsToolbar",
79+
"class": null
80+
},
7381
{
7482
"name": "tooltip",
7583
"description": "Custom component for the tooltip popper.",

docs/pages/x/api/charts/radar-chart.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
"type": { "name": "enum", "description": "'circular'<br>&#124;&nbsp;'sharp'" },
5353
"default": "'sharp'"
5454
},
55+
"showToolbar": { "type": { "name": "bool" }, "default": "false" },
5556
"skipAnimation": { "type": { "name": "bool" } },
5657
"slotProps": { "type": { "name": "object" }, "default": "{}" },
5758
"slots": {

0 commit comments

Comments
 (0)