@mui/x-charts 6.0.0-alpha.13 → 6.0.0-alpha.15

package/PieChart/PieArc.js

@@ -19,14 +19,13 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded"];
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded", "onClick"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function getPieArcUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArc', slot);
 }
-const pieArcClasses = (0, _generateUtilityClasses.default)('MuiPieArc', ['root', 'highlighted', 'faded']);
-exports.pieArcClasses = pieArcClasses;
+const pieArcClasses = exports.pieArcClasses = (0, _generateUtilityClasses.default)('MuiPieArc', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -66,7 +65,8 @@ function PieArc(props) {
       highlighted,
       faded = {
         additionalRadius: -5
-      }
+      },
+      onClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
@@ -103,6 +103,8 @@ function PieArc(props) {
       innerRadius,
       outerRadius
     })),
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
     className: classes.root
   }, getInteractionItemProps({

package/PieChart/PieArcLabel.js

@@ -25,8 +25,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function getPieArcLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
 }
-const pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
-exports.pieArcLabelClasses = pieArcLabelClasses;
+const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/PieChart/PieChart.d.ts

@@ -3,21 +3,25 @@ import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
 import { PieSeriesType } from '../models/seriesType';
 import { MakeOptional } from '../models/helpers';
-import { ChartsTooltipProps } from '../ChartsTooltip';
+import { ChartsTooltipProps, ChartsTooltipSlotComponentProps, ChartsTooltipSlotsComponent } from '../ChartsTooltip';
 import { ChartsLegendProps, ChartsLegendSlotComponentProps, ChartsLegendSlotsComponent } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-import { PiePlotSlotComponentProps, PiePlotSlotsComponent } from './PiePlot';
+import { PiePlotProps, PiePlotSlotComponentProps, PiePlotSlotsComponent } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
 import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
-export interface PieChartSlotsComponent extends ChartsAxisSlotsComponent, PiePlotSlotsComponent, ChartsLegendSlotsComponent {
+export interface PieChartSlotsComponent extends ChartsAxisSlotsComponent, PiePlotSlotsComponent, ChartsLegendSlotsComponent, ChartsTooltipSlotsComponent {
 }
-export interface PieChartSlotComponentProps extends ChartsAxisSlotComponentProps, PiePlotSlotComponentProps, ChartsLegendSlotComponentProps {
+export interface PieChartSlotComponentProps extends ChartsAxisSlotComponentProps, PiePlotSlotComponentProps, ChartsLegendSlotComponentProps, ChartsTooltipSlotComponentProps {
 }
 export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
+    /**
+     * @deprecated Consider using `slotProps.legend` instead.
+     */
     legend?: ChartsLegendProps;
+    onClick?: PiePlotProps['onClick'];
     slots?: PieChartSlotsComponent;
     /**
      * The props used for each component slot.

package/PieChart/PieChart.js

@@ -54,7 +54,8 @@ function PieChart(props) {
     bottomAxis = null,
     children,
     slots,
-    slotProps
+    slotProps,
+    onClick
   } = props;
   const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
@@ -82,7 +83,8 @@ function PieChart(props) {
       slotProps: slotProps
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      onClick: onClick
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
       slots: slots,
       slotProps: slotProps
@@ -154,23 +156,19 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: _propTypes.default.shape({
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
     hidden: _propTypes.default.bool,
-    itemWidth: _propTypes.default.number,
-    markSize: _propTypes.default.number,
-    offset: _propTypes.default.shape({
-      x: _propTypes.default.number,
-      y: _propTypes.default.number
-    }),
     position: _propTypes.default.shape({
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    spacing: _propTypes.default.number
+    slots: _propTypes.default.object
   }),
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -178,6 +176,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
+  onClick: _propTypes.default.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -252,6 +251,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     axisContent: _propTypes.default.elementType,
     classes: _propTypes.default.object,
     itemContent: _propTypes.default.elementType,
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/PieChart/PiePlot.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PieArcProps } from './PieArc';
 import { PieArcLabelProps } from './PieArcLabel';
+import { DefaultizedPieValueType, PieItemIdentifier } from '../models/seriesType/pie';
 export interface PiePlotSlotsComponent {
     pieArc?: React.JSXElementConstructor<PieArcProps>;
     pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
@@ -20,6 +21,13 @@ export interface PiePlotProps {
      * @default {}
      */
     slotProps?: PiePlotSlotComponentProps;
+    /**
+     * Callback fired when a pie item is clicked.
+     * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+     * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
+     * @param {DefaultizedPieValueType} item The pie item.
+     */
+    onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
 }
 declare function PiePlot(props: PiePlotProps): React.JSX.Element | null;
 declare namespace PiePlot {

package/PieChart/PiePlot.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PiePlot = PiePlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _PieArc = _interopRequireDefault(require("./PieArc"));
@@ -32,7 +33,8 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
 function PiePlot(props) {
   const {
     slots,
-    slotProps
+    slotProps,
+    onClick
   } = props;
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).pie;
   const {
@@ -73,7 +75,7 @@ function PiePlot(props) {
         transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
           children: [data.map((item, index) => {
-            return /*#__PURE__*/(0, React.createElement)(Arc, (0, _extends2.default)({}, item, {
+            return /*#__PURE__*/(0, _react.createElement)(Arc, (0, _extends2.default)({}, item, {
               key: item.id,
               innerRadius: innerRadius,
               outerRadius: outerRadius ?? availableRadius,
@@ -83,10 +85,17 @@ function PiePlot(props) {
               dataIndex: index,
               highlightScope: series[seriesId].highlightScope,
               highlighted: highlighted,
-              faded: faded
+              faded: faded,
+              onClick: onClick && (event => {
+                onClick(event, {
+                  type: 'pie',
+                  seriesId,
+                  dataIndex: index
+                }, item);
+              })
             }, slotProps?.pieArc));
           }), data.map((item, index) => {
-            return /*#__PURE__*/(0, React.createElement)(ArcLabel, (0, _extends2.default)({}, item, {
+            return /*#__PURE__*/(0, _react.createElement)(ArcLabel, (0, _extends2.default)({}, item, {
               key: item.id,
               innerRadius: innerRadius,
               outerRadius: outerRadius ?? availableRadius,
@@ -108,6 +117,13 @@ process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a pie item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
+   * @param {DefaultizedPieValueType} item The pie item.
+   */
+  onClick: _propTypes.default.func,
   /**
    * The props used for each component slot.
    * @default {}

package/PieChart/formatter.js

@@ -45,5 +45,4 @@ const formatter = params => {
     series: defaultizedSeries
   };
 };
-var _default = formatter;
-exports.default = _default;
+var _default = exports.default = formatter;

package/PieChart/legend.js

@@ -15,5 +15,4 @@ const legendGetter = params => {
     id: item.id
   })).filter(item => item.label !== undefined));
 };
-var _default = legendGetter;
-exports.default = _default;
+var _default = exports.default = legendGetter;

package/ResponsiveChartContainer/index.js

@@ -99,7 +99,7 @@ const ResizableContainer = (0, _styles.styled)('div', {
     height: '100%'
   }
 }));
-const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
+const ResponsiveChartContainer = exports.ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
       width: inWidth,
       height: inHeight
@@ -118,5 +118,4 @@ const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function Responsi
       ref: ref
     }))
   });
-});
-exports.ResponsiveChartContainer = ResponsiveChartContainer;
+});

package/ScatterChart/ScatterChart.d.ts

@@ -4,18 +4,21 @@ import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ScatterSeriesType } from '../models/seriesType/scatter';
 import { MakeOptional } from '../models/helpers';
-import { ChartsTooltipProps } from '../ChartsTooltip';
+import { ChartsTooltipProps, ChartsTooltipSlotComponentProps, ChartsTooltipSlotsComponent } from '../ChartsTooltip';
 import { ChartsLegendProps, ChartsLegendSlotComponentProps, ChartsLegendSlotsComponent } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
-export interface ScatterChartSlotsComponent extends ChartsAxisSlotsComponent, ScatterPlotSlotsComponent, ChartsLegendSlotsComponent {
+export interface ScatterChartSlotsComponent extends ChartsAxisSlotsComponent, ScatterPlotSlotsComponent, ChartsLegendSlotsComponent, ChartsTooltipSlotsComponent {
 }
-export interface ScatterChartSlotComponentProps extends ChartsAxisSlotComponentProps, ScatterPlotSlotComponentProps, ChartsLegendSlotComponentProps {
+export interface ScatterChartSlotComponentProps extends ChartsAxisSlotComponentProps, ScatterPlotSlotComponentProps, ChartsLegendSlotComponentProps, ChartsTooltipSlotComponentProps {
 }
 export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<ScatterSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
+    /**
+     * @deprecated Consider using `slotProps.legend` instead.
+     */
     legend?: ChartsLegendProps;
     /**
      * Overridable component slots.

package/ScatterChart/ScatterChart.js

@@ -17,7 +17,7 @@ var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
+const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -71,7 +71,6 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     }, tooltip)), children]
   });
 });
-exports.ScatterChart = ScatterChart;
 process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -137,23 +136,19 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: _propTypes.default.shape({
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
     hidden: _propTypes.default.bool,
-    itemWidth: _propTypes.default.number,
-    markSize: _propTypes.default.number,
-    offset: _propTypes.default.shape({
-      x: _propTypes.default.number,
-      y: _propTypes.default.number
-    }),
     position: _propTypes.default.shape({
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    spacing: _propTypes.default.number
+    slots: _propTypes.default.object
   }),
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -219,6 +214,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     axisContent: _propTypes.default.elementType,
     classes: _propTypes.default.object,
     itemContent: _propTypes.default.elementType,
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/ScatterChart/formatter.js

@@ -15,5 +15,4 @@ const formatter = ({
     seriesOrder
   };
 };
-var _default = formatter;
-exports.default = _default;
+var _default = exports.default = formatter;

package/ScatterChart/legend.js

@@ -16,5 +16,4 @@ const legendGetter = params => {
   }));
   return data.filter(item => item.label !== undefined);
 };
-var _default = legendGetter;
-exports.default = _default;
+var _default = exports.default = legendGetter;

package/SparkLineChart/SparkLineChart.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
-import { ChartsTooltipProps } from '../ChartsTooltip';
+import { ChartsTooltipProps, ChartsTooltipSlotComponentProps, ChartsTooltipSlotsComponent } from '../ChartsTooltip';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { AxisConfig } from '../models/axis';
 import { MakeOptional } from '../models/helpers';
@@ -10,9 +10,9 @@ import { LinePlotSlotsComponent, LinePlotSlotComponentProps } from '../LineChart
 import { MarkPlotSlotsComponent, MarkPlotSlotComponentProps } from '../LineChart/MarkPlot';
 import { LineHighlightPlotSlotsComponent, LineHighlightPlotSlotComponentProps } from '../LineChart/LineHighlightPlot';
 import { BarPlotSlotsComponent, BarPlotSlotComponentProps } from '../BarChart/BarPlot';
-export interface SparkLineChartSlotsComponent extends AreaPlotSlotsComponent, LinePlotSlotsComponent, MarkPlotSlotsComponent, LineHighlightPlotSlotsComponent, BarPlotSlotsComponent {
+export interface SparkLineChartSlotsComponent extends AreaPlotSlotsComponent, LinePlotSlotsComponent, MarkPlotSlotsComponent, LineHighlightPlotSlotsComponent, BarPlotSlotsComponent, ChartsTooltipSlotsComponent {
 }
-export interface SparkLineChartSlotComponentProps extends AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, LineHighlightPlotSlotComponentProps, BarPlotSlotComponentProps {
+export interface SparkLineChartSlotComponentProps extends AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, LineHighlightPlotSlotComponentProps, BarPlotSlotComponentProps, ChartsTooltipSlotComponentProps {
 }
 export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis'> {
     /**

package/SparkLineChart/SparkLineChart.js

@@ -23,7 +23,7 @@ const SPARKLINE_DEFAULT_MARGIN = {
   left: 5,
   right: 5
 };
-const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
+const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
   const {
     xAxis,
     width,
@@ -92,10 +92,12 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
         slots: slots,
         slotProps: slotProps
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), children]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
+      slotProps: slotProps,
+      slots: slots
+    })), children]
   });
 });
-exports.SparkLineChart = SparkLineChart;
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -168,6 +170,8 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     axisContent: _propTypes.default.elementType,
     classes: _propTypes.default.object,
     itemContent: _propTypes.default.elementType,
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/colorPalettes/colorPalettes.js

@@ -4,21 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mangoFusionPaletteLight = exports.mangoFusionPaletteDark = exports.mangoFusionPalette = exports.cheerfulFiestaPaletteLight = exports.cheerfulFiestaPaletteDark = exports.cheerfulFiestaPalette = exports.blueberryTwilightPaletteLight = exports.blueberryTwilightPaletteDark = exports.blueberryTwilightPalette = void 0;
-const blueberryTwilightPaletteLight = ['#02B2AF', '#2E96FF', '#B800D8', '#60009B', '#2731C8', '#03008D'];
-exports.blueberryTwilightPaletteLight = blueberryTwilightPaletteLight;
-const blueberryTwilightPaletteDark = ['#02B2AF', '#72CCFF', '#DA00FF', '#9001CB', '#2E96FF', '#3B48E0'];
-exports.blueberryTwilightPaletteDark = blueberryTwilightPaletteDark;
+const blueberryTwilightPaletteLight = exports.blueberryTwilightPaletteLight = ['#02B2AF', '#2E96FF', '#B800D8', '#60009B', '#2731C8', '#03008D'];
+const blueberryTwilightPaletteDark = exports.blueberryTwilightPaletteDark = ['#02B2AF', '#72CCFF', '#DA00FF', '#9001CB', '#2E96FF', '#3B48E0'];
 const blueberryTwilightPalette = mode => mode === 'dark' ? blueberryTwilightPaletteDark : blueberryTwilightPaletteLight;
 exports.blueberryTwilightPalette = blueberryTwilightPalette;
-const mangoFusionPaletteLight = ['#173A5E', '#00A3A0', '#C91B63', '#EF5350', '#FFA726', '#B800D8', '#60009B', '#2E96FF', '#2731C8', '#03008D'];
-exports.mangoFusionPaletteLight = mangoFusionPaletteLight;
-const mangoFusionPaletteDark = ['#41698F', '#19D0CD', '#DE196B', '#FC5F5C', '#FFD771', '#DA00FF', '#9001CB', '#72CCFF', '#2E96FF', '#3B48E0'];
-exports.mangoFusionPaletteDark = mangoFusionPaletteDark;
+const mangoFusionPaletteLight = exports.mangoFusionPaletteLight = ['#173A5E', '#00A3A0', '#C91B63', '#EF5350', '#FFA726', '#B800D8', '#60009B', '#2E96FF', '#2731C8', '#03008D'];
+const mangoFusionPaletteDark = exports.mangoFusionPaletteDark = ['#41698F', '#19D0CD', '#DE196B', '#FC5F5C', '#FFD771', '#DA00FF', '#9001CB', '#72CCFF', '#2E96FF', '#3B48E0'];
 const mangoFusionPalette = mode => mode === 'dark' ? mangoFusionPaletteDark : mangoFusionPaletteLight;
 exports.mangoFusionPalette = mangoFusionPalette;
-const cheerfulFiestaPaletteDark = ['#0059B2', '#2E96FF', '#FFC24C', '#FF9F0E', '#F38200', '#2ABFDE', '#1F94AD', '#BD2C38', '#FF3143', '#FF8282'];
-exports.cheerfulFiestaPaletteDark = cheerfulFiestaPaletteDark;
-const cheerfulFiestaPaletteLight = ['#003A75', '#007FFF', '#FFC24C', '#FF9D09', '#CA6C00', '#127D94', '#1F94AD', '#C82634', '#FF3143', '#FF7E7E'];
-exports.cheerfulFiestaPaletteLight = cheerfulFiestaPaletteLight;
+const cheerfulFiestaPaletteDark = exports.cheerfulFiestaPaletteDark = ['#0059B2', '#2E96FF', '#FFC24C', '#FF9F0E', '#F38200', '#2ABFDE', '#1F94AD', '#BD2C38', '#FF3143', '#FF8282'];
+const cheerfulFiestaPaletteLight = exports.cheerfulFiestaPaletteLight = ['#003A75', '#007FFF', '#FFC24C', '#FF9D09', '#CA6C00', '#127D94', '#1F94AD', '#C82634', '#FF3143', '#FF7E7E'];
 const cheerfulFiestaPalette = mode => mode === 'dark' ? cheerfulFiestaPaletteDark : cheerfulFiestaPaletteLight;
 exports.cheerfulFiestaPalette = cheerfulFiestaPalette;

package/constants.js

@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DEFAULT_Y_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = exports.DEFAULT_MARGINS = void 0;
-const DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
-exports.DEFAULT_X_AXIS_KEY = DEFAULT_X_AXIS_KEY;
-const DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
-exports.DEFAULT_Y_AXIS_KEY = DEFAULT_Y_AXIS_KEY;
-const DEFAULT_MARGINS = {
-  top: 100,
+const DEFAULT_X_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
+const DEFAULT_Y_AXIS_KEY = exports.DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
+const DEFAULT_MARGINS = exports.DEFAULT_MARGINS = {
+  top: 50,
   bottom: 50,
   left: 50,
   right: 50
-};
-exports.DEFAULT_MARGINS = DEFAULT_MARGINS;
+};

package/context/CartesianContextProvider.js

@@ -36,13 +36,12 @@ const yExtremumGetters = {
   scatter: _extremums2.getExtremumY,
   line: _extremums3.getExtremumY
 };
-const CartesianContext = /*#__PURE__*/React.createContext({
+const CartesianContext = exports.CartesianContext = /*#__PURE__*/React.createContext({
   xAxis: {},
   yAxis: {},
   xAxisIds: [],
   yAxisIds: []
 });
-exports.CartesianContext = CartesianContext;
 function CartesianContextProvider({
   xAxis: inXAxis,
   yAxis: inYAxis,
@@ -120,13 +119,13 @@ function CartesianContextProvider({
           barGapRatio
         }, axis, {
           scale: (0, _d3Scale.scaleBand)(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if ((0, _axis.isPointScaleConfig)(axis)) {
         completedXAxis[axis.id] = (0, _extends2.default)({}, axis, {
           scale: (0, _d3Scale.scalePoint)(axis.data, range),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -135,17 +134,17 @@ function CartesianContextProvider({
       }
       const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, axis.max ?? maxData];
-      const ticksNumber = (0, _useTicks.getTicksNumber)((0, _extends2.default)({}, axis, {
+      const tickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
         range,
         domain: extremums
       }));
-      const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(ticksNumber);
+      const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(tickNumber);
       const niceDomain = niceScale.domain();
       const domain = [axis.min ?? niceDomain[0], axis.max ?? niceDomain[1]];
       completedXAxis[axis.id] = (0, _extends2.default)({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber
+        tickNumber
       });
     });
     const allYAxis = [...(yAxis?.map((axis, index) => (0, _extends2.default)({
@@ -168,13 +167,13 @@ function CartesianContextProvider({
           barGapRatio: 0
         }, axis, {
           scale: (0, _d3Scale.scaleBand)(axis.data, [range[1], range[0]]).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if ((0, _axis.isPointScaleConfig)(axis)) {
         completedYAxis[axis.id] = (0, _extends2.default)({}, axis, {
           scale: (0, _d3Scale.scalePoint)(axis.data, [range[1], range[0]]),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -183,17 +182,17 @@ function CartesianContextProvider({
       }
       const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, axis.max ?? maxData];
-      const ticksNumber = (0, _useTicks.getTicksNumber)((0, _extends2.default)({}, axis, {
+      const tickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
         range,
         domain: extremums
       }));
-      const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(ticksNumber);
+      const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(tickNumber);
       const niceDomain = niceScale.domain();
       const domain = [axis.min ?? niceDomain[0], axis.max ?? niceDomain[1]];
       completedYAxis[axis.id] = (0, _extends2.default)({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber
+        tickNumber
       });
     });
     return {

package/context/DrawingProvider.d.ts

@@ -10,6 +10,8 @@ export interface DrawingProviderProps extends LayoutConfig {
 export type DrawingArea = {
     left: number;
     top: number;
+    bottom: number;
+    right: number;
     width: number;
     height: number;
 };

package/context/DrawingProvider.js

@@ -17,17 +17,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Defines the area in which it is possible to draw the charts.
  */
 
-const DrawingContext = /*#__PURE__*/React.createContext({
+const DrawingContext = exports.DrawingContext = /*#__PURE__*/React.createContext({
   top: 0,
   left: 0,
+  bottom: 0,
+  right: 0,
   height: 300,
   width: 400
 });
-exports.DrawingContext = DrawingContext;
-const SVGContext = /*#__PURE__*/React.createContext({
+const SVGContext = exports.SVGContext = /*#__PURE__*/React.createContext({
   current: null
 });
-exports.SVGContext = SVGContext;
 function DrawingProvider({
   width,
   height,

package/context/HighlightProvider.js

@@ -15,12 +15,11 @@ const defaultScope = {
   highlighted: 'none',
   faded: 'none'
 };
-const HighlighContext = /*#__PURE__*/React.createContext({
+const HighlighContext = exports.HighlighContext = /*#__PURE__*/React.createContext({
   item: null,
   scope: defaultScope,
   dispatch: () => null
 });
-exports.HighlighContext = HighlighContext;
 const dataReducer = (prevState, action) => {
   switch (action.type) {
     case 'enterItem':

package/context/InteractionProvider.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const InteractionContext = /*#__PURE__*/React.createContext({
+const InteractionContext = exports.InteractionContext = /*#__PURE__*/React.createContext({
   item: null,
   axis: {
     x: null,
@@ -19,7 +19,6 @@ const InteractionContext = /*#__PURE__*/React.createContext({
   },
   dispatch: () => null
 });
-exports.InteractionContext = InteractionContext;
 const dataReducer = (prevState, action) => {
   switch (action.type) {
     case 'enterItem':

package/context/SeriesContextProvider.js

@@ -18,8 +18,7 @@ var _colorPalettes = require("../colorPalettes");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const SeriesContext = /*#__PURE__*/React.createContext({});
-exports.SeriesContext = SeriesContext;
+const SeriesContext = exports.SeriesContext = /*#__PURE__*/React.createContext({});
 const seriesTypeFormatter = {
   bar: _formatter.default,
   scatter: _formatter2.default,