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

package/modern/context/ChartProvider/ChartProvider.js

@@ -3,14 +3,34 @@
 import * as React from 'react';
 import { useCharts } from "../../internals/store/useCharts.js";
 import { ChartContext } from "./ChartContext.js";
+import { useChartCartesianAxis } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { useChartInteraction } from "../../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartZAxis } from "../../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { plugin as barPlugin } from "../../BarChart/plugin.js";
+import { plugin as scatterPlugin } from "../../ScatterChart/plugin.js";
+import { plugin as linePlugin } from "../../LineChart/plugin.js";
+import { plugin as piePlugin } from "../../PieChart/plugin.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+export const defaultSeriesConfig = {
+  bar: barPlugin,
+  scatter: scatterPlugin,
+  line: linePlugin,
+  pie: piePlugin
+};
+
+// For consistency with the v7, the cartesian axes are set by default.
+// To remove them, you can provide a `plugins` props.
+const defaultPlugins = [useChartZAxis, useChartCartesianAxis, useChartInteraction];
 function ChartProvider(props) {
   const {
-    children
+    children,
+    plugins = defaultPlugins,
+    pluginParams = {},
+    seriesConfig = defaultSeriesConfig
   } = props;
   const {
     contextValue
-  } = useCharts([], {});
+  } = useCharts(plugins, pluginParams, seriesConfig);
   return /*#__PURE__*/_jsx(ChartContext.Provider, {
     value: contextValue,
     children: children

package/modern/context/PolarProvider/PolarProvider.js

@@ -1,49 +1,61 @@
 'use client';
 
-import * as React from 'react';
-import { computeAxisValue } from "../../internals/computeAxisValue.js";
-import { useDrawingArea } from "../../hooks/useDrawingArea.js";
-import { useSeries } from "../../hooks/useSeries.js";
-import { PolarContext } from "./PolarContext.js";
-import { useRadiusExtremumGetter } from "../PluginProvider/useRadiusExtremumGetter.js";
-import { useRotationExtremumGetter } from "../PluginProvider/useRotationExtremumGetter.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function PolarProvider(props) {
-  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 /*#__PURE__*/_jsx(PolarContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-export { PolarProvider };
+// '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/modern/context/PolarProvider/getAxisExtremum.js

@@ -1,20 +1,48 @@
-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)];
-};
-export 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;
-};
+// 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;
+// };

package/modern/context/PolarProvider/usePolarContext.js

@@ -1,10 +1,11 @@
 'use client';
 
-import * as React from 'react';
-import { PolarContext } from "./PolarContext.js";
-export const usePolarContext = () => {
-  const {
-    data
-  } = React.useContext(PolarContext);
-  return data;
-};
+// '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/modern/context/index.js

@@ -1,3 +1,2 @@
 export * from "./HighlightedProvider/index.js";
-export { ZAxisContextProvider } from "./ZAxisContextProvider.js";
 export { ChartDataProvider } from "./ChartDataProvider/index.js";

package/modern/hooks/index.js

@@ -2,7 +2,9 @@ export * from "./useDrawingArea.js";
 export * from "./useChartId.js";
 export * from "./useScale.js";
 export * from "./useAxis.js";
+export * from "./useZAxis.js";
 export * from "./useColorScale.js";
 export * from "./useSvgRef.js";
 export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from "./useSeries.js";
-export * from "./useLegend.js";
+export * from "./useLegend.js";
+export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";

package/modern/hooks/useAxis.js

@@ -1,19 +1,45 @@
 'use client';
 
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-export function useXAxis(identifier) {
+import { selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+export function useXAxes() {
+  const store = useStore();
   const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = useSelector(store, selectorChartXAxis);
+  return {
     xAxis,
     xAxisIds
-  } = useCartesianContext();
+  };
+}
+export function useYAxes() {
+  const store = useStore();
+  const {
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = useSelector(store, selectorChartYAxis);
+  return {
+    yAxis,
+    yAxisIds
+  };
+}
+export function useXAxis(identifier) {
+  const store = useStore();
+  const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = useSelector(store, selectorChartXAxis);
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id];
 }
 export function useYAxis(identifier) {
+  const store = useStore();
   const {
-    yAxis,
-    yAxisIds
-  } = useCartesianContext();
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = useSelector(store, selectorChartYAxis);
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id];
 }

package/modern/hooks/useAxisEvents.js

@@ -2,25 +2,29 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
 import { useSvgRef } from "./useSvgRef.js";
-import { useDrawingArea } from "./useDrawingArea.js";
 import { useStore } from "../internals/store/useStore.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
+import { useXAxes, useYAxes } from "./useAxis.js";
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
 export const useAxisEvents = disableAxisListener => {
   const svgRef = useSvgRef();
-  const drawingArea = useDrawingArea();
+  const {
+    instance
+  } = useChartContext();
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = useCartesianContext();
-  const store = useStore(disableAxisListener);
+  } = useYAxes();
+  const store = useStore();
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -106,7 +110,7 @@ export const useAxisEvents = disableAxisListener => {
       const svgPoint = 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) {
@@ -157,5 +161,5 @@ export 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]);
 };

package/modern/hooks/useChartGradientId.js

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+import { useChartId } from "./useChartId.js";
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+export function useChartGradientIdBuilder() {
+  const chartId = useChartId();
+  return React.useCallback(axisId => `${chartId}-gradient-${axisId}`, [chartId]);
+}
+
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+export function useChartGradientIdObjectBoundBuilder() {
+  const chartId = 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
+ */
+export 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
+ */
+export function useChartGradientIdObjectBound(axisId) {
+  return useChartGradientIdObjectBoundBuilder()(axisId);
+}

package/modern/hooks/useColorScale.js

@@ -1,12 +1,12 @@
 'use client';
 
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { useZAxis } from "./useZAxis.js";
+import { useXAxes, useYAxes } from "./useAxis.js";
+import { useZAxes } from "./useZAxis.js";
 export function useXColorScale(identifier) {
   const {
     xAxis,
     xAxisIds
-  } = useCartesianContext();
+  } = useXAxes();
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].colorScale;
 }
@@ -14,7 +14,7 @@ export function useYColorScale(identifier) {
   const {
     yAxis,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].colorScale;
 }
@@ -22,7 +22,7 @@ export function useZColorScale(identifier) {
   const {
     zAxis,
     zAxisIds
-  } = useZAxis();
+  } = useZAxes();
   const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
   return zAxis[id]?.colorScale;
 }

package/modern/hooks/useDrawingArea.js

@@ -1,24 +1,9 @@
 'use client';
 
-import * as React from 'react';
-import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartDrawingArea } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 export function useDrawingArea() {
-  const {
-    left,
-    top,
-    width,
-    height,
-    bottom,
-    right,
-    isPointInside
-  } = React.useContext(DrawingAreaContext);
-  return React.useMemo(() => ({
-    left,
-    top,
-    width,
-    height,
-    bottom,
-    right,
-    isPointInside
-  }), [height, left, top, width, bottom, right, isPointInside]);
+  const store = useStore();
+  return useSelector(store, selectorChartDrawingArea);
 }

package/modern/hooks/useSeries.js

@@ -1,8 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { SeriesContext } from "../context/SeriesProvider/index.js";
-
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartSeriesProcessed } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
 /**
  * Get access to the internal state of series.
  * Structured by type of series:
@@ -10,14 +11,8 @@ import { SeriesContext } from "../context/SeriesProvider/index.js";
  * @returns FormattedSeries series
  */
 export function useSeries() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(SeriesContext);
-  if (!isInitialized) {
-    throw new Error(['MUI X: Could not find the series ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
-  }
-  return data;
+  const store = useStore();
+  return useSelector(store, selectorChartSeriesProcessed);
 }
 
 /**

package/modern/hooks/useZAxis.js

@@ -1,8 +1,27 @@
 'use client';
 
-import * as React from 'react';
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
-export const useZAxis = () => {
-  const data = React.useContext(ZAxisContext);
-  return data;
-};
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { useSelector } from "../internals/store/useSelector.js";
+export function useZAxes() {
+  const store = useStore();
+  const {
+    axis: zAxis,
+    axisIds: zAxisIds
+  } = useSelector(store, selectorChartZAxis) ?? {
+    axis: {},
+    axisIds: []
+  };
+  return {
+    zAxis,
+    zAxisIds
+  };
+}
+export function useZAxis(identifier) {
+  const {
+    zAxis,
+    zAxisIds
+  } = useZAxes();
+  const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
+  return zAxis[id];
+}

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.7
+ * @mui/x-charts v8.0.0-alpha.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -1,21 +1,11 @@
 import * as React from 'react';
-import { useCartesianContext } from "../../../context/CartesianProvider/index.js";
-import { useChartId, useDrawingArea } from "../../../hooks/index.js";
+import { useDrawingArea, useXAxes, useYAxes } from "../../../hooks/index.js";
 import ChartsPiecewiseGradient from "./ChartsPiecewiseGradient.js";
 import ChartsContinuousGradient from "./ChartsContinuousGradient.js";
 import ChartsContinuousGradientObjectBound from "./ChartsContinuousGradientObjectBound.js";
-import { useZAxis } from "../../../hooks/useZAxis.js";
+import { useZAxes } from "../../../hooks/useZAxis.js";
+import { useChartGradientIdBuilder, useChartGradientIdObjectBoundBuilder } from "../../../hooks/useChartGradientId.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function useChartGradient() {
-  const chartId = useChartId();
-  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
-}
-
-// TODO: make public?
-export function useChartGradientObjectBound() {
-  const chartId = useChartId();
-  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}-object-bound`, [chartId]);
-}
 export function ChartsAxesGradients() {
   const {
     top,
@@ -27,18 +17,20 @@ export function ChartsAxesGradients() {
   } = useDrawingArea();
   const svgHeight = top + height + bottom;
   const svgWidth = left + width + right;
-  const getGradientId = useChartGradient();
-  const getObjectBoundGradientId = useChartGradientObjectBound();
+  const getGradientId = useChartGradientIdBuilder();
+  const getObjectBoundGradientId = useChartGradientIdObjectBoundBuilder();
   const {
-    xAxisIds,
     xAxis,
-    yAxisIds,
-    yAxis
-  } = useCartesianContext();
+    xAxisIds
+  } = useXAxes();
   const {
-    zAxisIds,
-    zAxis
-  } = useZAxis();
+    yAxis,
+    yAxisIds
+  } = useYAxes();
+  const {
+    zAxis,
+    zAxisIds
+  } = useZAxes();
   const filteredYAxisIds = yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined);
   const filteredXAxisIds = xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined);
   const filteredZAxisIds = zAxisIds.filter(axisId => zAxis[axisId].colorMap !== undefined);
@@ -47,8 +39,8 @@ export function ChartsAxesGradients() {
   }
   return /*#__PURE__*/_jsxs("defs", {
     children: [filteredYAxisIds.map(axisId => {
-      const gradientId = getGradientId(axisId, 'y');
-      const objectBoundGradientId = getObjectBoundGradientId(axisId, 'y');
+      const gradientId = getGradientId(axisId);
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
       const {
         colorMap,
         scale,
@@ -85,8 +77,8 @@ export function ChartsAxesGradients() {
       }
       return null;
     }), filteredXAxisIds.map(axisId => {
-      const gradientId = getGradientId(axisId, 'x');
-      const objectBoundGradientId = getObjectBoundGradientId(axisId, 'x');
+      const gradientId = getGradientId(axisId);
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
       const {
         colorMap,
         scale,
@@ -123,7 +115,7 @@ export function ChartsAxesGradients() {
       }
       return null;
     }), filteredZAxisIds.map(axisId => {
-      const objectBoundGradientId = getObjectBoundGradientId(axisId, 'z');
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
       const {
         colorMap,
         colorScale

package/modern/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js

@@ -9,6 +9,9 @@ export default function ChartsPiecewiseGradient(props) {
     scale,
     colorMap
   } = props;
+  if (size <= 0) {
+    return null;
+  }
   return /*#__PURE__*/_jsx("linearGradient", {
     id: gradientId,
     x1: "0",