[docs] Improve slots definitions for charts (#12408)

mui · Mar 14, 2024 · acea8ee · acea8ee
1 parent 9b4cb6c
commit acea8ee
Show file tree

Hide file tree

Showing 21 changed files with 319 additions and 67 deletions.
diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md
@@ -81,6 +81,32 @@ It will remove the header showing the x-axis value from the tooltip.
 />
 ```
 
+### Overriding content
+
+To modify the tooltip content, use `slots.itemContent` or `slots.axisContent`.
+The first one is rendered when tooltip trigger is set to `"item"`.
+The second one when trigger is set to `"axis"`.
+
+```jsx
+// With single component
+<LineChart
+  slots={{
+    itemContent: CustomItemTooltip
+  }}
+/>
+
+// With composition
+<ChartContainer>
+  // ...
+  <Tooltip
+    trigger='item'
+    slots={{
+      itemContent: CustomItemTooltip
+    }}
+  />
+</ChartContainer>
+```
+
 ## Composition
 
 If you're using composition, by default, the axis will be listening for mouse events to get its current x/y values.

diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json
@@ -111,10 +111,30 @@
     "import { BarChart } from '@mui/x-charts';"
   ],
   "slots": [
-    { "name": "axisLine", "description": "", "class": null },
-    { "name": "axisTick", "description": "", "class": null },
-    { "name": "axisTickLabel", "description": "", "class": null },
-    { "name": "axisLabel", "description": "", "class": null },
+    {
+      "name": "axisLine",
+      "description": "Custom component for the axis main line.",
+      "default": "'line'",
+      "class": null
+    },
+    {
+      "name": "axisTick",
+      "description": "Custom component for the axis tick.",
+      "default": "'line'",
+      "class": null
+    },
+    {
+      "name": "axisTickLabel",
+      "description": "Custom component for tick label.",
+      "default": "ChartsText",
+      "class": null
+    },
+    {
+      "name": "axisLabel",
+      "description": "Custom component for axis label.",
+      "default": "ChartsText",
+      "class": null
+    },
     {
       "name": "bar",
       "description": "The component that renders the bar.",
@@ -127,9 +147,24 @@
       "default": "DefaultChartsLegend",
       "class": null
     },
-    { "name": "popper", "description": "", "class": null },
-    { "name": "axisContent", "description": "", "class": null },
-    { "name": "itemContent", "description": "", "class": null }
+    {
+      "name": "popper",
+      "description": "Custom component for the tooltip popper.",
+      "default": "ChartsTooltipRoot",
+      "class": null
+    },
+    {
+      "name": "axisContent",
+      "description": "Custom component for displaying tooltip content when triggered by axis event.",
+      "default": "DefaultChartsAxisTooltipContent",
+      "class": null
+    },
+    {
+      "name": "itemContent",
+      "description": "Custom component for displaying tooltip content when triggered by item event.",
+      "default": "DefaultChartsItemTooltipContent",
+      "class": null
+    }
   ],
   "classes": [],
   "muiName": "MuiBarChart",

diff --git a/docs/pages/x/api/charts/charts-legend.json b/docs/pages/x/api/charts/charts-legend.json
@@ -3,6 +3,12 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "direction": { "type": { "name": "enum", "description": "'column'<br>&#124;&nbsp;'row'" } },
     "hidden": { "type": { "name": "bool" }, "default": "false" },
+    "position": {
+      "type": {
+        "name": "shape",
+        "description": "{ horizontal: 'left'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'top' }"
+      }
+    },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },

diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json
@@ -31,9 +31,24 @@
     "import { ChartsTooltip } from '@mui/x-charts';"
   ],
   "slots": [
-    { "name": "popper", "description": "", "class": null },
-    { "name": "axisContent", "description": "", "class": null },
-    { "name": "itemContent", "description": "", "class": null }
+    {
+      "name": "popper",
+      "description": "Custom component for the tooltip popper.",
+      "default": "ChartsTooltipRoot",
+      "class": null
+    },
+    {
+      "name": "axisContent",
+      "description": "Custom component for displaying tooltip content when triggered by axis event.",
+      "default": "DefaultChartsAxisTooltipContent",
+      "class": null
+    },
+    {
+      "name": "itemContent",
+      "description": "Custom component for displaying tooltip content when triggered by item event.",
+      "default": "DefaultChartsItemTooltipContent",
+      "class": null
+    }
   ],
   "classes": [
     {

diff --git a/docs/pages/x/api/charts/default-charts-legend.json b/docs/pages/x/api/charts/default-charts-legend.json
@@ -9,6 +9,13 @@
       "type": { "name": "enum", "description": "'column'<br>&#124;&nbsp;'row'" },
       "required": true
     },
+    "position": {
+      "type": {
+        "name": "shape",
+        "description": "{ horizontal: 'left'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'top' }"
+      },
+      "required": true
+    },
     "hidden": { "type": { "name": "bool" }, "default": "false" },
     "itemGap": { "type": { "name": "number" }, "default": "10" },
     "itemMarkHeight": { "type": { "name": "number" }, "default": "20" },

diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json
@@ -106,10 +106,30 @@
     "import { LineChart } from '@mui/x-charts';"
   ],
   "slots": [
-    { "name": "axisLine", "description": "", "class": null },
-    { "name": "axisTick", "description": "", "class": null },
-    { "name": "axisTickLabel", "description": "", "class": null },
-    { "name": "axisLabel", "description": "", "class": null },
+    {
+      "name": "axisLine",
+      "description": "Custom component for the axis main line.",
+      "default": "'line'",
+      "class": null
+    },
+    {
+      "name": "axisTick",
+      "description": "Custom component for the axis tick.",
+      "default": "'line'",
+      "class": null
+    },
+    {
+      "name": "axisTickLabel",
+      "description": "Custom component for tick label.",
+      "default": "ChartsText",
+      "class": null
+    },
+    {
+      "name": "axisLabel",
+      "description": "Custom component for axis label.",
+      "default": "ChartsText",
+      "class": null
+    },
     {
       "name": "area",
       "description": "The component that renders the area.",
@@ -130,9 +150,24 @@
       "default": "DefaultChartsLegend",
       "class": null
     },
-    { "name": "popper", "description": "", "class": null },
-    { "name": "axisContent", "description": "", "class": null },
-    { "name": "itemContent", "description": "", "class": null }
+    {
+      "name": "popper",
+      "description": "Custom component for the tooltip popper.",
+      "default": "ChartsTooltipRoot",
+      "class": null
+    },
+    {
+      "name": "axisContent",
+      "description": "Custom component for displaying tooltip content when triggered by axis event.",
+      "default": "DefaultChartsAxisTooltipContent",
+      "class": null
+    },
+    {
+      "name": "itemContent",
+      "description": "Custom component for displaying tooltip content when triggered by item event.",
+      "default": "DefaultChartsItemTooltipContent",
+      "class": null
+    }
   ],
   "classes": [],
   "muiName": "MuiLineChart",

diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json
@@ -102,10 +102,30 @@
     "import { PieChart } from '@mui/x-charts';"
   ],
   "slots": [
-    { "name": "axisLine", "description": "", "class": null },
-    { "name": "axisTick", "description": "", "class": null },
-    { "name": "axisTickLabel", "description": "", "class": null },
-    { "name": "axisLabel", "description": "", "class": null },
+    {
+      "name": "axisLine",
+      "description": "Custom component for the axis main line.",
+      "default": "'line'",
+      "class": null
+    },
+    {
+      "name": "axisTick",
+      "description": "Custom component for the axis tick.",
+      "default": "'line'",
+      "class": null
+    },
+    {
+      "name": "axisTickLabel",
+      "description": "Custom component for tick label.",
+      "default": "ChartsText",
+      "class": null
+    },
+    {
+      "name": "axisLabel",
+      "description": "Custom component for axis label.",
+      "default": "ChartsText",
+      "class": null
+    },
     { "name": "pieArc", "description": "", "class": null },
     { "name": "pieArcLabel", "description": "", "class": null },
     {
@@ -114,9 +134,24 @@
       "default": "DefaultChartsLegend",
       "class": null
     },
-    { "name": "popper", "description": "", "class": null },
-    { "name": "axisContent", "description": "", "class": null },
-    { "name": "itemContent", "description": "", "class": null }
+    {
+      "name": "popper",
+      "description": "Custom component for the tooltip popper.",
+      "default": "ChartsTooltipRoot",
+      "class": null
+    },
+    {
+      "name": "axisContent",
+      "description": "Custom component for displaying tooltip content when triggered by axis event.",
+      "default": "DefaultChartsAxisTooltipContent",
+      "class": null
+    },
+    {
+      "name": "itemContent",
+      "description": "Custom component for displaying tooltip content when triggered by item event.",
+      "default": "DefaultChartsItemTooltipContent",
+      "class": null
+    }
   ],
   "classes": [],
   "muiName": "MuiPieChart",

diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json
@@ -103,20 +103,55 @@
     "import { ScatterChart } from '@mui/x-charts';"
   ],
   "slots": [
-    { "name": "axisLine", "description": "", "class": null },
-    { "name": "axisTick", "description": "", "class": null },
-    { "name": "axisTickLabel", "description": "", "class": null },
-    { "name": "axisLabel", "description": "", "class": null },
+    {
+      "name": "axisLine",
+      "description": "Custom component for the axis main line.",
+      "default": "'line'",
+      "class": null
+    },
+    {
+      "name": "axisTick",
+      "description": "Custom component for the axis tick.",
+      "default": "'line'",
+      "class": null
+    },
+    {
+      "name": "axisTickLabel",
+      "description": "Custom component for tick label.",
+      "default": "ChartsText",
+      "class": null
+    },
+    {
+      "name": "axisLabel",
+      "description": "Custom component for axis label.",
+      "default": "ChartsText",
+      "class": null
+    },
     { "name": "scatter", "description": "", "class": null },
     {
       "name": "legend",
       "description": "Custom rendering of the legend.",
       "default": "DefaultChartsLegend",
       "class": null
     },
-    { "name": "popper", "description": "", "class": null },
-    { "name": "axisContent", "description": "", "class": null },
-    { "name": "itemContent", "description": "", "class": null }
+    {
+      "name": "popper",
+      "description": "Custom component for the tooltip popper.",
+      "default": "ChartsTooltipRoot",
+      "class": null
+    },
+    {
+      "name": "axisContent",
+      "description": "Custom component for displaying tooltip content when triggered by axis event.",
+      "default": "DefaultChartsAxisTooltipContent",
+      "class": null
+    },
+    {
+      "name": "itemContent",
+      "description": "Custom component for displaying tooltip content when triggered by item event.",
+      "default": "DefaultChartsItemTooltipContent",
+      "class": null
+    }
   ],
   "classes": [],
   "muiName": "MuiScatterChart",

diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json
@@ -74,9 +74,24 @@
       "default": "BarElementPath",
       "class": null
     },
-    { "name": "popper", "description": "", "class": null },
-    { "name": "axisContent", "description": "", "class": null },
-    { "name": "itemContent", "description": "", "class": null }
+    {
+      "name": "popper",
+      "description": "Custom component for the tooltip popper.",
+      "default": "ChartsTooltipRoot",
+      "class": null
+    },
+    {
+      "name": "axisContent",
+      "description": "Custom component for displaying tooltip content when triggered by axis event.",
+      "default": "DefaultChartsAxisTooltipContent",
+      "class": null
+    },
+    {
+      "name": "itemContent",
+      "description": "Custom component for displaying tooltip content when triggered by item event.",
+      "default": "DefaultChartsItemTooltipContent",
+      "class": null
+    }
   ],
   "classes": [],
   "muiName": "MuiSparkLineChart",

diff --git a/docs/translations/api-docs/charts/bar-chart/bar-chart.json b/docs/translations/api-docs/charts/bar-chart/bar-chart.json
@@ -66,14 +66,14 @@
   },
   "classDescriptions": {},
   "slotDescriptions": {
-    "axisContent": "",
-    "axisLabel": "",
-    "axisLine": "",
-    "axisTick": "",
-    "axisTickLabel": "",
+    "axisContent": "Custom component for displaying tooltip content when triggered by axis event.",
+    "axisLabel": "Custom component for axis label.",
+    "axisLine": "Custom component for the axis main line.",
+    "axisTick": "Custom component for the axis tick.",
+    "axisTickLabel": "Custom component for tick label.",
     "bar": "The component that renders the bar.",
-    "itemContent": "",
+    "itemContent": "Custom component for displaying tooltip content when triggered by item event.",
     "legend": "Custom rendering of the legend.",
-    "popper": ""
+    "popper": "Custom component for the tooltip popper."
   }
 }
diff --git a/docs/translations/api-docs/charts/charts-legend/charts-legend.json b/docs/translations/api-docs/charts/charts-legend/charts-legend.json
@@ -6,6 +6,7 @@
       "description": "The direction of the legend layout. The default depends on the chart."
     },
     "hidden": { "description": "Set to true to hide the legend." },
+    "position": { "description": "The position of the legend." },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." }
   },