@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.10

package/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/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/useStore.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/hooks/useChartGradientId.d.ts

@@ -0,0 +1,31 @@
+import { AxisId } from '../models/axis';
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+export declare function useChartGradientIdBuilder(): (axisId: AxisId) => string;
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+export declare function useChartGradientIdObjectBoundBuilder(): (axisId: AxisId) => string;
+/**
+ * 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 declare function useChartGradientId(axisId: AxisId): string;
+/**
+ * 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 declare function useChartGradientIdObjectBound(axisId: AxisId): string;

package/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/hooks/useChartId.d.ts

@@ -1 +1 @@
-export declare function useChartId(): string;
+export declare function useChartId(): string | undefined;

package/hooks/useChartId.js

@@ -1,10 +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 { selectorChartId } from "../internals/plugins/corePlugins/useChartId/useChartId.selectors.js";
 export function useChartId() {
-  const {
-    chartId
-  } = React.useContext(DrawingAreaContext);
-  return React.useMemo(() => chartId, [chartId]);
+  const store = useStore();
+  return useSelector(store, selectorChartId);
 }

package/hooks/useColorScale.js

@@ -1,13 +1,12 @@
 'use client';
 
-import * as React from 'react';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.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;
 }
@@ -15,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;
 }
@@ -23,7 +22,7 @@ export function useZColorScale(identifier) {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxes();
   const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
   return zAxis[id]?.colorScale;
 }

package/hooks/useDrawingArea.d.ts

@@ -1,2 +1,16 @@
-import { DrawingAreaState } from '../context/DrawingAreaProvider';
-export declare function useDrawingArea(): DrawingAreaState;
+export type ChartDrawingArea = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+export declare function useDrawingArea(): {
+    width: number;
+    left: number;
+    right: number;
+    height: number;
+    top: number;
+    bottom: number;
+};

package/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/hooks/useInteractionItemProps.js

@@ -1,14 +1,10 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { useHighlighted } from "../context/index.js";
-import { useStore } from "../internals/useStore.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 export const useInteractionItemProps = skip => {
-  const store = useStore();
   const {
-    setHighlighted,
-    clearHighlighted
-  } = useHighlighted();
+    instance
+  } = useChartContext();
   if (skip) {
     return () => ({});
   }
@@ -19,31 +15,18 @@ export const useInteractionItemProps = skip => {
       }
     };
     const onPointerEnter = () => {
-      store.update(prev => _extends({}, prev, {
-        interaction: _extends({}, prev.interaction, {
-          item: data
-        })
-      }));
-      setHighlighted({
+      instance.setItemInteraction(data);
+      instance.setHighlight({
         seriesId: data.seriesId,
         dataIndex: data.dataIndex
       });
     };
     const onPointerLeave = event => {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-      store.update(prev => {
-        const prevItem = prev.interaction.item;
-        if (prevItem === null || Object.keys(data).some(key => data[key] !== prevItem[key])) {
-          // The item is already something else, no need to clean it.
-          return prev;
-        }
-        return _extends({}, prev, {
-          interaction: _extends({}, prev.interaction, {
-            item: null
-          })
-        });
-      });
-      clearHighlighted();
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      instance.removeItemInteraction(data);
+      instance.clearHighlight();
     };
     return {
       onPointerEnter,

package/hooks/useItemHighlighted.d.ts

@@ -0,0 +1,23 @@
+import { HighlightItemData } from '../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.types';
+type UseItemHighlightedReturnType = {
+    /**
+     * Whether the item is highlighted.
+     */
+    isHighlighted: boolean;
+    /**
+     * Whether the item is faded.
+     */
+    isFaded: boolean;
+};
+type UseItemHighlightedParams = HighlightItemData | null;
+/**
+ * A hook to check the highlighted state of the item.
+ * This function already calculates that an item is not faded if it is highlighted.
+ *
+ * If you need fine control over the state, use the `useItemHighlightedGetter` hook instead.
+ *
+ * @param {HighlightItemData | null} item is the item to check
+ * @returns {UseItemHighlightedReturnType} the state of the item
+ */
+export declare function useItemHighlighted(item: UseItemHighlightedParams): UseItemHighlightedReturnType;
+export {};

package/hooks/useItemHighlighted.js

@@ -0,0 +1,23 @@
+'use client';
+
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartsIsFaded, selectorChartsIsHighlighted } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+/**
+ * A hook to check the highlighted state of the item.
+ * This function already calculates that an item is not faded if it is highlighted.
+ *
+ * If you need fine control over the state, use the `useItemHighlightedGetter` hook instead.
+ *
+ * @param {HighlightItemData | null} item is the item to check
+ * @returns {UseItemHighlightedReturnType} the state of the item
+ */
+export function useItemHighlighted(item) {
+  const store = useStore();
+  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, item);
+  const isFaded = useSelector(store, selectorChartsIsFaded, item);
+  return {
+    isHighlighted,
+    isFaded: !isHighlighted && isFaded
+  };
+}

package/hooks/useItemHighlightedGetter.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A hook to check the highlighted state of multiple items.
+ * If you're interested by a single one, consider using `useItemHighlighted`.
+ *
+ * Warning: highlighted and faded can both be true at the same time.
+ * We recommend to first test if item is highlighted: `const faded = !highlighted && isFaded(item)`
+ * @returns {{ isHighlighted, isFaded }} callbacks to get the state of the item.
+ */
+export declare function useItemHighlightedGetter(): {
+    isHighlighted: (item: import("..").HighlightItemData | null) => boolean;
+    isFaded: (item: import("..").HighlightItemData | null) => boolean;
+};

package/hooks/useItemHighlightedGetter.js

@@ -0,0 +1,23 @@
+'use client';
+
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback } from "../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js";
+
+/**
+ * A hook to check the highlighted state of multiple items.
+ * If you're interested by a single one, consider using `useItemHighlighted`.
+ *
+ * Warning: highlighted and faded can both be true at the same time.
+ * We recommend to first test if item is highlighted: `const faded = !highlighted && isFaded(item)`
+ * @returns {{ isHighlighted, isFaded }} callbacks to get the state of the item.
+ */
+export function useItemHighlightedGetter() {
+  const store = useStore();
+  const isHighlighted = useSelector(store, selectorChartsIsHighlightedCallback);
+  const isFaded = useSelector(store, selectorChartsIsFadedCallback);
+  return {
+    isHighlighted,
+    isFaded
+  };
+}

package/hooks/useLegend.d.ts

@@ -0,0 +1,13 @@
+import type { LegendItemParams } from '../ChartsLegend';
+/**
+ * Get the legend items to display.
+ *
+ * This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
+ *
+ * An alternative is to use the `useSeries` hook and format the legend items yourself.
+ *
+ * @returns legend data
+ */
+export declare function useLegend(): {
+    items: LegendItemParams[];
+};

package/hooks/useLegend.js

@@ -0,0 +1,30 @@
+'use client';
+
+import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/index.js";
+import { useSeries } from "./useSeries.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+function getSeriesToDisplay(series, seriesConfig) {
+  return Object.keys(series).flatMap(seriesType => {
+    const getter = seriesConfig[seriesType].legendGetter;
+    return getter === undefined ? [] : getter(series[seriesType]);
+  });
+}
+
+/**
+ * Get the legend items to display.
+ *
+ * This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
+ *
+ * An alternative is to use the `useSeries` hook and format the legend items yourself.
+ *
+ * @returns legend data
+ */
+export function useLegend() {
+  const series = useSeries();
+  const store = useStore();
+  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
+  return {
+    items: getSeriesToDisplay(series, seriesConfig)
+  };
+}

package/hooks/useSeries.d.ts

@@ -1,11 +1,10 @@
-import { FormattedSeries } from '../context/SeriesProvider';
 /**
  * Get access to the internal state of series.
  * Structured by type of series:
  * { seriesType?: { series: { id1: precessedValue, ... }, seriesOrder: [id1, ...] } }
  * @returns FormattedSeries series
  */
-export declare function useSeries(): FormattedSeries;
+export declare function useSeries(): import("../internals").ProcessedSeries<keyof import("../internals").ChartsSeriesConfig>;
 /**
  * Get access to the internal state of pie series.
  * The returned object contains:
@@ -13,7 +12,10 @@ export declare function useSeries(): FormattedSeries;
  * - seriesOrder: the array of series ids.
  * @returns {{ series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined}  pieSeries
  */
-export declare function usePieSeries(): FormattedSeries['pie'];
+export declare function usePieSeries(): {
+    series: Record<import("../internals").SeriesId, import("..").DefaultizedPieSeriesType>;
+    seriesOrder: import("../internals").SeriesId[];
+} | undefined;
 /**
  * Get access to the internal state of line series.
  * The returned object contains:
@@ -21,7 +23,7 @@ export declare function usePieSeries(): FormattedSeries['pie'];
  * - seriesOrder: the array of series ids.
  * @returns {{ series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined}  lineSeries
  */
-export declare function useLineSeries(): FormattedSeries['line'];
+export declare function useLineSeries(): import("../internals").SeriesProcessorResult<"line"> | undefined;
 /**
  * Get access to the internal state of bar series.
  * The returned object contains:
@@ -29,7 +31,7 @@ export declare function useLineSeries(): FormattedSeries['line'];
  * - seriesOrder: the array of series ids.
  * @returns {{ series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined}  barSeries
  */
-export declare function useBarSeries(): FormattedSeries['bar'];
+export declare function useBarSeries(): import("../internals").SeriesProcessorResult<"bar"> | undefined;
 /**
  * Get access to the internal state of scatter series.
  * The returned object contains:
@@ -37,4 +39,7 @@ export declare function useBarSeries(): FormattedSeries['bar'];
  * - seriesOrder: the array of series ids.
  * @returns {{ series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined}  scatterSeries
  */
-export declare function useScatterSeries(): FormattedSeries['scatter'];
+export declare function useScatterSeries(): {
+    series: Record<import("../internals").SeriesId, import("..").DefaultizedScatterSeriesType>;
+    seriesOrder: import("../internals").SeriesId[];
+} | undefined;

package/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/hooks/useSvgRef.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function useSvgRef(): React.MutableRefObject<SVGSVGElement>;
+export declare function useSvgRef(): React.RefObject<SVGSVGElement | null>;

package/hooks/useSvgRef.js

@@ -1,14 +1,10 @@
 'use client';
 
-import * as React from 'react';
-import { SvgRefContext } from "../context/SvgRefProvider/index.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 export function useSvgRef() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(SvgRefContext);
-  if (!isInitialized) {
+  const context = useChartContext();
+  if (!context) {
     throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return data.svgRef;
+  return context.svgRef;
 }

package/hooks/useZAxis.d.ts

@@ -0,0 +1,7 @@
+export declare function useZAxes(): {
+    zAxis: {
+        [axisId: string]: import("../internals").ZAxisDefaultized;
+    };
+    zAxisIds: import("../internals").AxisId[];
+};
+export declare function useZAxis(identifier?: number | string): import("../internals").ZAxisDefaultized;

package/hooks/useZAxis.js

@@ -0,0 +1,27 @@
+'use client';
+
+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/index.d.ts

@@ -11,6 +11,7 @@ export * from './ChartsYAxis';
 export * from './ChartsGrid';
 export * from './ChartsText';
 export * from './ChartsTooltip';
+export * from './ChartsLabel';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';
 export * from './ChartsVoronoiHandler';
@@ -23,3 +24,4 @@ export * from './SparkLineChart';
 export * from './Gauge';
 export * from './ChartsSurface';
 export * from './ChartContainer';
+export * from './ChartDataProvider';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.1
+ * @mui/x-charts v8.0.0-alpha.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -18,6 +18,7 @@ export * from "./ChartsYAxis/index.js";
 export * from "./ChartsGrid/index.js";
 export * from "./ChartsText/index.js";
 export * from "./ChartsTooltip/index.js";
+export * from "./ChartsLabel/index.js";
 export * from "./ChartsLegend/index.js";
 export * from "./ChartsAxisHighlight/index.js";
 export * from "./ChartsVoronoiHandler/index.js";
@@ -29,4 +30,5 @@ export * from "./ScatterChart/index.js";
 export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
 export * from "./ChartsSurface/index.js";
-export * from "./ChartContainer/index.js";
+export * from "./ChartContainer/index.js";
+export * from "./ChartDataProvider/index.js";