@mui/x-charts 8.0.0-alpha.7 → 8.0.0-alpha.9

package/node/ScatterChart/extremums.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getExtremumY = exports.getExtremumX = void 0;
-const mergeMinMax = (acc, val) => [val[0] === null ? acc[0] : Math.min(acc[0], val[0]), val[1] === null ? acc[1] : Math.max(acc[1], val[1])];
+const mergeMinMax = (acc, val) => {
+  return [val[0] === null ? acc[0] : Math.min(acc[0], val[0]), val[1] === null ? acc[1] : Math.max(acc[1], val[1])];
+};
 const getExtremumX = params => {
   const {
     series,

package/node/ScatterChart/formatter.js

@@ -24,7 +24,9 @@ const formatter = ({
         id: d[datasetKeys.id]
       };
     }) ?? [];
-    return [seriesId, (0, _extends2.default)({}, seriesData, {
+    return [seriesId, (0, _extends2.default)({
+      labelMarkType: 'circle'
+    }, seriesData, {
       data,
       valueFormatter: seriesData.valueFormatter ?? (v => v && `(${v.x}, ${v.y})`)
     })];

package/node/ScatterChart/legend.js

@@ -16,7 +16,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
-      markType: series[seriesId].labelMarkType ?? 'circle',
+      markType: series[seriesId].labelMarkType,
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

package/node/ScatterChart/plugin.js

@@ -8,10 +8,11 @@ exports.plugin = void 0;
 var _extremums = require("./extremums");
 var _formatter = _interopRequireDefault(require("./formatter"));
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _legend = _interopRequireDefault(require("./legend"));
 const plugin = exports.plugin = {
-  seriesType: 'scatter',
-  seriesFormatter: _formatter.default,
+  seriesProcessor: _formatter.default,
   colorProcessor: _getColor.default,
+  legendGetter: _legend.default,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY
 };

package/node/ScatterChart/useScatterChartProps.js

@@ -62,13 +62,11 @@ const useScatterChartProps = props => {
     colors,
     xAxis,
     yAxis,
+    zAxis,
     highlightedItem,
     onHighlightChange,
     className
   });
-  const zAxisProps = {
-    zAxis
-  };
   const voronoiHandlerProps = {
     voronoiMaxRadius,
     onItemClick: onItemClick
@@ -111,7 +109,6 @@ const useScatterChartProps = props => {
   return {
     chartsWrapperProps,
     chartContainerProps,
-    zAxisProps,
     voronoiHandlerProps,
     chartsAxisProps,
     gridProps,

package/node/SparkLineChart/SparkLineChart.js

@@ -89,7 +89,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
       hideTooltip: xAxis === undefined
     }, xAxis)],
     yAxis: [(0, _extends2.default)({
-      id: _constants.DEFAULT_X_AXIS_KEY
+      id: _constants.DEFAULT_Y_AXIS_KEY
     }, yAxis)],
     colors: colors,
     sx: sx,
@@ -119,6 +119,9 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object
+  }),
   /**
    * Set to `true` to fill spark line area.
    * Has no effect if plotType='bar'.
@@ -166,6 +169,11 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
@@ -222,6 +230,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
   /**
    * Formatter used by the tooltip.

package/node/context/AnimationProvider/AnimationProvider.js

@@ -23,7 +23,7 @@ function AnimationProvider(props) {
 
   // We use the value of `isAnimationDisabledEnvironment` as the initial value of `skipAnimation` to avoid
   // re-rendering the component on environments where matchMedia is not supported, hence skipAnimation will always be true.
-  const [skipAnimation, setSkipAnimation] = React.useState(isAnimationDisabledEnvironment || undefined);
+  const [skipAnimation, setSkipAnimation] = React.useState(process.env.NODE_ENV === 'test' ? isAnimationDisabledEnvironment || undefined : undefined);
   (0, _web.useIsomorphicLayoutEffect)(() => {
     if (isAnimationDisabledEnvironment) {
       return undefined;

package/node/context/ChartProvider/ChartProvider.js

@@ -6,17 +6,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartProvider = ChartProvider;
+exports.defaultSeriesConfig = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useCharts = require("../../internals/store/useCharts");
 var _ChartContext = require("./ChartContext");
+var _useChartCartesianAxis = require("../../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartInteraction = require("../../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartZAxis = require("../../internals/plugins/featurePlugins/useChartZAxis");
+var _plugin = require("../../BarChart/plugin");
+var _plugin2 = require("../../ScatterChart/plugin");
+var _plugin3 = require("../../LineChart/plugin");
+var _plugin4 = require("../../PieChart/plugin");
 var _jsxRuntime = require("react/jsx-runtime");
+const defaultSeriesConfig = exports.defaultSeriesConfig = {
+  bar: _plugin.plugin,
+  scatter: _plugin2.plugin,
+  line: _plugin3.plugin,
+  pie: _plugin4.plugin
+};
+
+// For consistency with the v7, the cartesian axes are set by default.
+// To remove them, you can provide a `plugins` props.
+const defaultPlugins = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction];
 function ChartProvider(props) {
   const {
-    children
+    children,
+    plugins = defaultPlugins,
+    pluginParams = {},
+    seriesConfig = defaultSeriesConfig
   } = props;
   const {
     contextValue
-  } = (0, _useCharts.useCharts)([], {});
+  } = (0, _useCharts.useCharts)(plugins, pluginParams, seriesConfig);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContext.ChartContext.Provider, {
     value: contextValue,
     children: children

package/node/context/PolarProvider/PolarProvider.js

@@ -1,54 +1,62 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PolarProvider = PolarProvider;
-var React = _interopRequireWildcard(require("react"));
-var _computeAxisValue = require("../../internals/computeAxisValue");
-var _useDrawingArea = require("../../hooks/useDrawingArea");
-var _useSeries = require("../../hooks/useSeries");
-var _PolarContext = require("./PolarContext");
-var _useRadiusExtremumGetter = require("../PluginProvider/useRadiusExtremumGetter");
-var _useRotationExtremumGetter = require("../PluginProvider/useRotationExtremumGetter");
-var _jsxRuntime = require("react/jsx-runtime");
-function PolarProvider(props) {
-  const {
-    rotationAxis,
-    radiusAxis,
-    children
-  } = props;
-  const formattedSeries = (0, _useSeries.useSeries)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const rotationExtremumGetters = (0, _useRotationExtremumGetter.useRotationExtremumGetter)();
-  const radiusExtremumGetters = (0, _useRadiusExtremumGetter.useRadiusExtremumGetter)();
-  const rotationValues = React.useMemo(() => (0, _computeAxisValue.computeAxisValue)({
-    drawingArea,
-    formattedSeries,
-    axis: rotationAxis,
-    extremumGetters: rotationExtremumGetters,
-    axisDirection: 'rotation'
-  }), [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters]);
-  const radiusValues = React.useMemo(() => (0, _computeAxisValue.computeAxisValue)({
-    drawingArea,
-    formattedSeries,
-    axis: radiusAxis,
-    extremumGetters: radiusExtremumGetters,
-    axisDirection: 'radius'
-  }), [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters]);
-  const value = React.useMemo(() => ({
-    isInitialized: true,
-    data: {
-      rotationAxis: rotationValues.axis,
-      radiusAxis: radiusValues.axis,
-      rotationAxisIds: rotationValues.axisIds,
-      radiusAxisIds: radiusValues.axisIds
-    }
-  }), [rotationValues, radiusValues]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolarContext.PolarContext.Provider, {
-    value: value,
-    children: children
-  });
-}
+// 'use client';
+// import * as React from 'react';
+// import { computeAxisValue } from '../../internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue';
+// import { useDrawingArea } from '../../hooks/useDrawingArea';
+// import { useSeries } from '../../hooks/useSeries';
+// import { PolarContext } from './PolarContext';
+// import { useRadiusExtremumGetter } from '../PluginProvider/useRadiusExtremumGetter';
+// import { useRotationExtremumGetter } from '../PluginProvider/useRotationExtremumGetter';
+// import { PolarProviderProps } from './Polar.types';
+
+// function PolarProvider(props: PolarProviderProps) {
+//   const { rotationAxis, radiusAxis, children } = props;
+
+//   const formattedSeries = useSeries();
+//   const drawingArea = useDrawingArea();
+//   const rotationExtremumGetters = useRotationExtremumGetter();
+//   const radiusExtremumGetters = useRadiusExtremumGetter();
+
+//   const rotationValues = React.useMemo(
+//     () =>
+//       computeAxisValue({
+//         drawingArea,
+//         formattedSeries,
+//         axis: rotationAxis,
+//         extremumGetters: rotationExtremumGetters,
+//         axisDirection: 'rotation',
+//       }),
+//     [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters],
+//   );
+
+//   const radiusValues = React.useMemo(
+//     () =>
+//       computeAxisValue({
+//         drawingArea,
+//         formattedSeries,
+//         axis: radiusAxis,
+//         extremumGetters: radiusExtremumGetters,
+//         axisDirection: 'radius',
+//       }),
+//     [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters],
+//   );
+
+//   const value = React.useMemo(
+//     () => ({
+//       isInitialized: true,
+//       data: {
+//         rotationAxis: rotationValues.axis,
+//         radiusAxis: radiusValues.axis,
+//         rotationAxisIds: rotationValues.axisIds,
+//         radiusAxisIds: radiusValues.axisIds,
+//       },
+//     }),
+//     [rotationValues, radiusValues],
+//   );
+
+//   return <PolarContext.Provider value={value}>{children}</PolarContext.Provider>;
+// }
+
+// export { PolarProvider };

package/node/context/PolarProvider/getAxisExtremum.js

@@ -1,27 +1,49 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getAxisExtremum = void 0;
-const axisExtremumCallback = (acc, chartType, axis, getters, axisIndex, formattedSeries) => {
-  const getter = getters[chartType];
-  const series = formattedSeries[chartType]?.series ?? {};
-  const [minChartTypeData, maxChartTypeData] = getter?.({
-    series,
-    axis,
-    axisIndex,
-    isDefaultAxis: axisIndex === 0
-  }) ?? [Infinity, -Infinity];
-  const [minData, maxData] = acc;
-  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
-};
-const getAxisExtremum = (axis, getters, axisIndex, formattedSeries) => {
-  const charTypes = Object.keys(getters);
-  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries), [Infinity, -Infinity]);
-  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
-    return [Infinity, -Infinity];
-  }
-  return extremums;
-};
-exports.getAxisExtremum = getAxisExtremum;
+// import { AxisConfig } from '../../models';
+// import { CartesianChartSeriesType } from '../../models/seriesType/config';
+// import { FormattedSeries } from '../SeriesProvider';
+// import { ExtremumGettersConfig, ExtremumGetterResult } from '../PluginProvider';
+
+// const axisExtremumCallback = <T extends CartesianChartSeriesType>(
+//   acc: ExtremumGetterResult,
+//   chartType: T,
+//   axis: AxisConfig,
+//   getters: ExtremumGettersConfig<T>,
+//   axisIndex: number,
+//   formattedSeries: FormattedSeries,
+// ): ExtremumGetterResult => {
+//   const getter = getters[chartType];
+//   const series = formattedSeries[chartType]?.series ?? {};
+
+//   const [minChartTypeData, maxChartTypeData] = getter?.({
+//     series,
+//     axis,
+//     axisIndex,
+//     isDefaultAxis: axisIndex === 0,
+//   }) ?? [Infinity, -Infinity];
+
+//   const [minData, maxData] = acc;
+
+//   return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+// };
+
+// export const getAxisExtremum = (
+//   axis: AxisConfig,
+//   getters: ExtremumGettersConfig,
+//   axisIndex: number,
+//   formattedSeries: FormattedSeries,
+// ) => {
+//   const charTypes = Object.keys(getters) as CartesianChartSeriesType[];
+
+//   const extremums = charTypes.reduce<ExtremumGetterResult>(
+//     (acc, charType) =>
+//       axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries),
+//     [Infinity, -Infinity],
+//   );
+
+//   if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+//     return [Infinity, -Infinity];
+//   }
+
+//   return extremums;
+// };
+"use strict";

package/node/context/PolarProvider/usePolarContext.js

@@ -1,17 +1,12 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.usePolarContext = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _PolarContext = require("./PolarContext");
-const usePolarContext = () => {
-  const {
-    data
-  } = React.useContext(_PolarContext.PolarContext);
-  return data;
-};
-exports.usePolarContext = usePolarContext;
+// 'use client';
+// import * as React from 'react';
+// import { PolarContext } from './PolarContext';
+// import { PolarContextState } from './Polar.types';
+
+// export const usePolarContext = (): PolarContextState => {
+//   const { data } = React.useContext(PolarContext);
+//   return data;
+// };

package/node/context/index.js

@@ -3,26 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  ZAxisContextProvider: true,
-  ChartDataProvider: true
-};
-Object.defineProperty(exports, "ChartDataProvider", {
-  enumerable: true,
-  get: function () {
-    return _ChartDataProvider.ChartDataProvider;
-  }
-});
-Object.defineProperty(exports, "ZAxisContextProvider", {
-  enumerable: true,
-  get: function () {
-    return _ZAxisContextProvider.ZAxisContextProvider;
-  }
-});
 var _HighlightedProvider = require("./HighlightedProvider");
 Object.keys(_HighlightedProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _HighlightedProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -30,6 +13,4 @@ Object.keys(_HighlightedProvider).forEach(function (key) {
       return _HighlightedProvider[key];
     }
   });
-});
-var _ZAxisContextProvider = require("./ZAxisContextProvider");
-var _ChartDataProvider = require("./ChartDataProvider");
+});

package/node/hooks/index.js

@@ -8,7 +8,9 @@ var _exportNames = {
   unstable_usePieSeries: true,
   unstable_useLineSeries: true,
   unstable_useBarSeries: true,
-  unstable_useScatterSeries: true
+  unstable_useScatterSeries: true,
+  useChartGradientId: true,
+  useChartGradientIdObjectBound: true
 };
 Object.defineProperty(exports, "unstable_useBarSeries", {
   enumerable: true,
@@ -40,6 +42,18 @@ Object.defineProperty(exports, "unstable_useSeries", {
     return _useSeries.useSeries;
   }
 });
+Object.defineProperty(exports, "useChartGradientId", {
+  enumerable: true,
+  get: function () {
+    return _useChartGradientId.useChartGradientId;
+  }
+});
+Object.defineProperty(exports, "useChartGradientIdObjectBound", {
+  enumerable: true,
+  get: function () {
+    return _useChartGradientId.useChartGradientIdObjectBound;
+  }
+});
 var _useDrawingArea = require("./useDrawingArea");
 Object.keys(_useDrawingArea).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -88,6 +102,18 @@ Object.keys(_useAxis).forEach(function (key) {
     }
   });
 });
+var _useZAxis = require("./useZAxis");
+Object.keys(_useZAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useZAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useZAxis[key];
+    }
+  });
+});
 var _useColorScale = require("./useColorScale");
 Object.keys(_useColorScale).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -124,4 +150,5 @@ Object.keys(_useLegend).forEach(function (key) {
       return _useLegend[key];
     }
   });
-});
+});
+var _useChartGradientId = require("./useChartGradientId");

package/node/hooks/useAxis.js

@@ -4,22 +4,50 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.useXAxes = useXAxes;
 exports.useXAxis = useXAxis;
+exports.useYAxes = useYAxes;
 exports.useYAxis = useYAxis;
-var _CartesianProvider = require("../context/CartesianProvider");
-function useXAxis(identifier) {
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+function useXAxes() {
+  const store = (0, _useStore.useStore)();
   const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
+  return {
     xAxis,
     xAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  };
+}
+function useYAxes() {
+  const store = (0, _useStore.useStore)();
+  const {
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
+  return {
+    yAxis,
+    yAxisIds
+  };
+}
+function useXAxis(identifier) {
+  const store = (0, _useStore.useStore)();
+  const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id];
 }
 function useYAxis(identifier) {
+  const store = (0, _useStore.useStore)();
   const {
-    yAxis,
-    yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id];
 }

package/node/hooks/useAxisEvents.js

@@ -9,25 +9,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAxisEvents = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _CartesianProvider = require("../context/CartesianProvider");
 var _isBandScale = require("../internals/isBandScale");
 var _getSVGPoint = require("../internals/getSVGPoint");
 var _useSvgRef = require("./useSvgRef");
-var _useDrawingArea = require("./useDrawingArea");
 var _useStore = require("../internals/store/useStore");
+var _ChartProvider = require("../context/ChartProvider");
+var _useAxis = require("./useAxis");
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
 const useAxisEvents = disableAxisListener => {
   const svgRef = (0, _useSvgRef.useSvgRef)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const {
     xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
-  const store = (0, _useStore.useStore)(disableAxisListener);
+  } = (0, _useAxis.useYAxes)();
+  const store = (0, _useStore.useStore)();
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -113,7 +117,7 @@ const useAxisEvents = disableAxisListener => {
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
       mousePosition.current.x = svgPoint.x;
       mousePosition.current.y = svgPoint.y;
-      if (!drawingArea.isPointInside(svgPoint, {
+      if (!instance.isPointInside(svgPoint, {
         targetElement: event.target
       })) {
         if (mousePosition.current.isInChart) {
@@ -164,6 +168,6 @@ const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
+  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, instance]);
 };
 exports.useAxisEvents = useAxisEvents;

package/node/hooks/useChartGradientId.js

@@ -0,0 +1,56 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartGradientId = useChartGradientId;
+exports.useChartGradientIdBuilder = useChartGradientIdBuilder;
+exports.useChartGradientIdObjectBound = useChartGradientIdObjectBound;
+exports.useChartGradientIdObjectBoundBuilder = useChartGradientIdObjectBoundBuilder;
+var React = _interopRequireWildcard(require("react"));
+var _useChartId = require("./useChartId");
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+function useChartGradientIdBuilder() {
+  const chartId = (0, _useChartId.useChartId)();
+  return React.useCallback(axisId => `${chartId}-gradient-${axisId}`, [chartId]);
+}
+
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+function useChartGradientIdObjectBoundBuilder() {
+  const chartId = (0, _useChartId.useChartId)();
+  return React.useCallback(axisId => `${chartId}-gradient-${axisId}-object-bound`, [chartId]);
+}
+
+/**
+ * Returns a gradient id for the given axis id.
+ *
+ * Can be useful when reusing the same gradient on custom components.
+ *
+ * For a gradient that respects the coordinates of the object on which it is applied, use `useChartGradientIdObjectBound` instead.
+ *
+ * @param axisId the axis id
+ * @returns the gradient id
+ */
+function useChartGradientId(axisId) {
+  return useChartGradientIdBuilder()(axisId);
+}
+
+/**
+ * Returns a gradient id for the given axis id.
+ *
+ * Can be useful when reusing the same gradient on custom components.
+ *
+ * This gradient differs from `useChartGradientId` in that it respects the coordinates of the object on which it is applied.
+ *
+ * @param axisId the axis id
+ * @returns the gradient id
+ */
+function useChartGradientIdObjectBound(axisId) {
+  return useChartGradientIdObjectBoundBuilder()(axisId);
+}