Add basic toolbar for community projects

Author: bernardobelchior

docs/data/charts/toolbar/toolbar.md

@@ -14,6 +14,8 @@ This feature is unstable and its API, visuals and/or behavior may change in futu
 
 Charts provide a toolbar that can be enabled to give users quick access to certain features.
 
+The toolbar is available on scatter, bar, line, pie and radar charts.
+
 To enable the toolbar, set the `showToolbar` prop to `true` on the chart component.
 
 :::info

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

@@ -34,6 +34,7 @@
       }
     },
     "onItemClick": { "type": { "name": "func" } },
+    "showToolbar": { "type": { "name": "bool" }, "default": "false" },
     "skipAnimation": { "type": { "name": "bool" } },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {

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

@@ -52,6 +52,7 @@
       "type": { "name": "enum", "description": "'circular'<br>&#124;&nbsp;'sharp'" },
       "default": "'sharp'"
     },
+    "showToolbar": { "type": { "name": "bool" }, "default": "false" },
     "skipAnimation": { "type": { "name": "bool" } },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {

docs/translations/api-docs/charts/pie-chart/pie-chart.json

@@ -28,6 +28,7 @@
     "series": {
       "description": "The series to display in the pie chart. An array of <a href='/x/api/charts/pie-series-type/'>PieSeriesType</a> objects."
     },
+    "showToolbar": { "description": "If true, shows the default chart toolbar." },
     "skipAnimation": {
       "description": "If <code>true</code>, animations are skipped. If unset or <code>false</code>, the animations respects the user&#39;s <code>prefers-reduced-motion</code> setting."
     },

docs/translations/api-docs/charts/radar-chart/radar-chart.json

@@ -33,6 +33,7 @@
       "description": "The series to display in the bar chart. An array of RadarSeriesType objects."
     },
     "shape": { "description": "The grid shape." },
+    "showToolbar": { "description": "If true, shows the default chart toolbar." },
     "skipAnimation": {
       "description": "If <code>true</code>, animations are skipped. If unset or <code>false</code>, the animations respects the user&#39;s <code>prefers-reduced-motion</code> setting."
     },

packages/x-charts/src/BarChart/BarChart.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsToolbar } from '../Toolbar/internals/ChartsToolbar';
 import { ChartsToolbarSlotProps, ChartsToolbarSlots } from '../material';
 import { ChartsToolbarProps } from '../Toolbar';
 import { BarPlot, BarPlotProps, BarPlotSlotProps, BarPlotSlots } from './BarPlot';
@@ -141,10 +142,12 @@ const BarChart = React.forwardRef(function BarChart(
   );
 
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
 
   return (
     <ChartDataProvider<'bar', BarChartPluginsSignatures> {...chartDataProviderProps}>
       <ChartsWrapper {...chartsWrapperProps}>
+        {props.showToolbar ? <Toolbar /> : null}
         {!props.hideLegend && <ChartsLegend {...legendProps} />}
         <ChartsSurface {...chartsSurfaceProps}>
           <ChartsGrid {...gridProps} />

packages/x-charts/src/BarChart/useBarChartProps.ts

@@ -48,6 +48,7 @@ export const useBarChartProps = (props: BarChartProps) => {
     barLabel,
     className,
     hideLegend,
+    showToolbar,
     ...rest
   } = props;
 

packages/x-charts/src/LineChart/LineChart.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsToolbar } from '../Toolbar/internals/ChartsToolbar';
 import { ChartsToolbarSlots, ChartsToolbarSlotProps } from '../material';
 import { AreaPlot, AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from './AreaPlot';
 import { LinePlot, LinePlotProps, LinePlotSlotProps, LinePlotSlots } from './LinePlot';
@@ -169,10 +170,12 @@ const LineChart = React.forwardRef(function LineChart(
   );
 
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
 
   return (
     <ChartDataProvider<'line', LineChartPluginsSignatures> {...chartDataProviderProps}>
       <ChartsWrapper {...chartsWrapperProps}>
+        {props.showToolbar ? <Toolbar /> : null}
         {!props.hideLegend && <ChartsLegend {...legendProps} />}
         <ChartsSurface {...chartsSurfaceProps}>
           <ChartsGrid {...gridProps} />

packages/x-charts/src/PieChart/PieChart.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsToolbar } from '../Toolbar/internals/ChartsToolbar';
 import { ChartsToolbarProps } from '../Toolbar';
 import { ChartsToolbarSlotProps, ChartsToolbarSlots } from '../material';
 import { ChartContainerProps } from '../ChartContainer';
@@ -70,6 +71,11 @@ export interface PieChartProps
    * Callback fired when a pie arc is clicked.
    */
   onItemClick?: PiePlotProps['onItemClick'];
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
   /**
    * Overridable component slots.
    * @default {}
@@ -116,6 +122,7 @@ const PieChart = React.forwardRef(function PieChart(
     highlightedItem,
     onHighlightChange,
     className,
+    showToolbar,
     ...other
   } = props;
   const margin = defaultizeMargin(marginProps, defaultMargin);
@@ -141,13 +148,16 @@ const PieChart = React.forwardRef(function PieChart(
   );
 
   const Tooltip = slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
+
   return (
     <ChartDataProvider<'pie', PieChartPluginSignatures> {...chartDataProviderProps}>
       <ChartsWrapper
         legendPosition={props.slotProps?.legend?.position}
         legendDirection={props?.slotProps?.legend?.direction ?? 'vertical'}
         sx={sx}
       >
+        {showToolbar ? <Toolbar /> : null}
         {!hideLegend && (
           <ChartsLegend
             direction={props?.slotProps?.legend?.direction ?? 'vertical'}
@@ -246,6 +256,11 @@ PieChart.propTypes = {
    * An array of [[PieSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.

packages/x-charts/src/RadarChart/RadarChart.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
+import { ChartsToolbar } from '@mui/x-charts/Toolbar/internals/ChartsToolbar';
 import { ChartsLegend, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
 import {
   ChartsOverlay,
@@ -53,6 +54,11 @@ export interface RadarChartProps
    * If `true`, the legend is not rendered.
    */
   hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
   /**
    * Overridable component slots.
    * @default {}
@@ -82,10 +88,12 @@ const RadarChart = React.forwardRef(function RadarChart(
   } = useRadarChartProps(props);
 
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
 
   return (
     <RadarDataProvider {...radarDataProviderProps}>
       <ChartsWrapper {...chartsWrapperProps}>
+        {props.showToolbar ? <Toolbar /> : null}
         {!props.hideLegend && <ChartsLegend {...legendProps} />}
         <ChartsSurface {...chartsSurfaceProps} ref={ref}>
           <RadarGrid {...radarGrid} />
@@ -214,6 +222,11 @@ RadarChart.propTypes = {
    * @default 'sharp'
    */
   shape: PropTypes.oneOf(['circular', 'sharp']),
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.

packages/x-charts/src/RadarChart/useRadarChartProps.ts

@@ -35,6 +35,7 @@ export const useRadarChartProps = (props: RadarChartProps) => {
     shape,
     stripeColor,
     highlight = 'axis',
+    showToolbar,
     ...other
   } = props;
 

packages/x-charts/src/ScatterChart/ScatterChart.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { MakeOptional } from '@mui/x-internals/types';
-import { ChartsToolbarPro } from '@mui/x-charts-pro/ChartsToolbarPro';
 import { ChartsToolbarProps } from '../Toolbar';
 import { ChartsToolbarSlots, ChartsToolbarSlotProps } from '../material';
 import {
@@ -34,6 +33,7 @@ import { ChartsSurface } from '../ChartsSurface';
 import { ChartsWrapper } from '../internals/components/ChartsWrapper';
 import { UseChartVoronoiSignature } from '../internals/plugins/featurePlugins/useChartVoronoi';
 import { ScatterChartPluginsSignatures } from './ScatterChart.plugins';
+import { ChartsToolbar } from '../Toolbar/internals/ChartsToolbar';
 
 export interface ScatterChartSlots
   extends ChartsAxisSlots,
@@ -92,6 +92,11 @@ export interface ScatterChartProps
    * If `true`, the legend is not rendered.
    */
   hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
   /**
    * Overridable component slots.
    * @default {}
@@ -108,11 +113,6 @@ export interface ScatterChartProps
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick?: ScatterPlotProps['onItemClick'] | UseChartVoronoiSignature['params']['onItemClick'];
-  /**
-   * If true, shows the default chart toolbar.
-   * @default false
-   */
-  showToolbar?: boolean;
 }
 
 /**
@@ -147,7 +147,7 @@ const ScatterChart = React.forwardRef(function ScatterChart(
   );
 
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
-  const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
 
   return (
     <ChartDataProvider<'scatter', ScatterChartPluginsSignatures> {...chartDataProviderProps}>