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

package/internals/plugins/utils/ChartsStore.d.ts

@@ -0,0 +1,12 @@
+import type { ChartState } from '../models';
+type Listener<T> = (value: T) => void;
+export type StoreUpdater = (prevState: ChartState) => ChartState;
+export declare class ChartsStore {
+    value: ChartState;
+    private listeners;
+    constructor(value: ChartState);
+    subscribe: (fn: Listener<ChartState>) => () => void;
+    getSnapshot: () => ChartState;
+    update: (updater: StoreUpdater) => void;
+}
+export {};

package/internals/plugins/utils/ChartsStore.js

@@ -0,0 +1,26 @@
+// For now this is fixed. Will need to support generic if we add plugins
+
+export class ChartsStore {
+  constructor(value) {
+    this.value = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.value;
+    };
+    this.update = updater => {
+      const newState = updater(this.value);
+      if (newState !== this.value) {
+        this.value = newState;
+        this.listeners.forEach(l => l(newState));
+      }
+    };
+    this.value = value;
+    this.listeners = new Set();
+  }
+}

package/internals/plugins/utils/selectors.d.ts

@@ -0,0 +1,9 @@
+import { CreateSelectorFunction } from 'reselect';
+import { ChartState } from '../models';
+export type ChartsRootSelector = (state: ChartState) => ChartState[keyof ChartState];
+export type ChartsSelector<TState, TArgs, TResult> = (state: TState, args: TArgs) => TResult;
+/**
+ * Method wrapping reselect's createSelector to provide caching for chart instances.
+ *
+ */
+export declare const createSelector: CreateSelectorFunction;

package/internals/plugins/utils/selectors.js

@@ -0,0 +1,37 @@
+import { lruMemoize, createSelectorCreator } from 'reselect';
+const reselectCreateSelector = createSelectorCreator({
+  memoize: lruMemoize,
+  memoizeOptions: {
+    maxSize: 1,
+    equalityCheck: Object.is
+  }
+});
+const cache = new WeakMap();
+/**
+ * Method wrapping reselect's createSelector to provide caching for chart instances.
+ *
+ */
+export const createSelector = (...createSelectorArgs) => {
+  const selector = (state, selectorArgs) => {
+    const cacheKey = state.cacheKey;
+
+    // If there is no cache for the current chart instance, create one.
+    let cacheForCurrentChartInstance = cache.get(cacheKey);
+    if (!cacheForCurrentChartInstance) {
+      cacheForCurrentChartInstance = new Map();
+      cache.set(cacheKey, cacheForCurrentChartInstance);
+    }
+
+    // If there is a cached selector, execute it.
+    const cachedSelector = cacheForCurrentChartInstance.get(createSelectorArgs);
+    if (cachedSelector) {
+      return cachedSelector(state, selectorArgs);
+    }
+
+    // Otherwise, create a new selector and cache it and execute it.
+    const fn = reselectCreateSelector(...createSelectorArgs);
+    cacheForCurrentChartInstance.set(createSelectorArgs, fn);
+    return fn(state, selectorArgs);
+  };
+  return selector;
+};

package/internals/useCharts.d.ts

@@ -0,0 +1,6 @@
+import { ChartStore } from './plugins/utils/ChartStore';
+export declare function useCharts(): {
+    contextValue: {
+        store: ChartStore;
+    };
+};

package/internals/useCharts.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { ChartStore } from "./plugins/utils/ChartStore.js";
+let globalId = 0;
+export function useCharts() {
+  const storeRef = React.useRef(null);
+  if (storeRef.current == null) {
+    // eslint-disable-next-line react-compiler/react-compiler
+    globalId += 1;
+    const initialState = {
+      interaction: {
+        item: null,
+        axis: {
+          x: null,
+          y: null
+        }
+      },
+      cacheKey: {
+        id: globalId
+      }
+    };
+    storeRef.current = new ChartStore(initialState);
+  }
+  const contextValue = React.useMemo(() => ({
+    store: storeRef.current
+  }), []);
+  return {
+    contextValue
+  };
+}

package/internals/useSelector.d.ts

@@ -0,0 +1,4 @@
+import { ChartState } from './plugins/models';
+import { ChartsSelector } from './plugins/utils/selectors';
+import { ChartStore } from './plugins/utils/ChartStore';
+export declare const useSelector: <TArgs, TValue>(store: ChartStore, selector: ChartsSelector<ChartState, TArgs, TValue>, args?: TArgs, equals?: (a: TValue, b: TValue) => boolean) => TValue;

package/internals/useSelector.js

@@ -0,0 +1,6 @@
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
+const defaultCompare = Object.is;
+export const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
+  const selectorWithArgs = state => selector(state, args);
+  return useSyncExternalStoreWithSelector(store.subscribe, store.getSnapshot, store.getSnapshot, selectorWithArgs, equals);
+};

package/internals/useStore.d.ts

@@ -0,0 +1,2 @@
+import { ChartStore } from './plugins/utils/ChartStore';
+export declare function useStore(skipError?: boolean): ChartStore;

package/internals/useStore.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ChartsContext } from "../context/InteractionProvider.js";
+export function useStore(skipError) {
+  const charts = React.useContext(ChartsContext);
+  if (skipError) {
+    // TODO: Remove once store is used by all charts.
+    // This line is only for `useAxisEvents` which is in the surface of the Gauge.
+    // But the Gauge don't have store yet because it does not need the interaction provider.
+    // Will be fixed when every thing move to the store since every component will have access to it.
+    // @ts-ignore
+    return charts?.store;
+  }
+  if (!charts) {
+    throw new Error(['MUI X: Could not find the charts context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return charts.store;
+}

package/modern/BarChart/AnimatedBarElement.js

@@ -0,0 +1,21 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ownerState"];
+import * as React from 'react';
+import { animated } from '@react-spring/web';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function AnimatedBarElement(props) {
+  const {
+      ownerState
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsx(animated.rect, _extends({}, other, {
+    filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: ownerState.isFaded ? 0.3 : 1
+  }));
+}

package/modern/BarChart/BarChart.js

@@ -43,15 +43,15 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
     chartsAxisProps,
     axisHighlightProps,
     legendProps,
-    tooltipProps,
     children
   } = useBarChartProps(props);
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsxs(ChartContainer, _extends({
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
       children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
@@ -63,7 +63,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
    * Depends on `layout` prop.
-   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
    */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
@@ -174,16 +174,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -212,30 +202,12 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   */
-  tooltip: PropTypes.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/modern/BarChart/BarElement.js

@@ -8,39 +8,27 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
-import { animated } from '@react-spring/web';
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../context/index.js";
+import { AnimatedBarElement } from "./AnimatedBarElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getBarElementUtilityClass(slot) {
   return generateUtilityClass('MuiBarElement', slot);
 }
-export const barElementClasses = generateUtilityClasses('MuiBarElement', ['root']);
+export const barElementClasses = generateUtilityClasses('MuiBarElement', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    id
+    id,
+    isHighlighted,
+    isFaded
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`]
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return composeClasses(slots, getBarElementUtilityClass, classes);
 };
-export const BarElementPath = styled(animated.rect, {
-  name: 'MuiBarElement',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  ownerState
-}) => ({
-  stroke: 'none',
-  fill: ownerState.isHighlighted ? d3Color(ownerState.color).brighter(0.5).formatHex() : ownerState.color,
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
-  opacity: ownerState.isFaded && 0.3 || 1
-}));
 function BarElement(props) {
   const {
       id,
@@ -70,7 +58,7 @@ function BarElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const Bar = slots?.bar ?? BarElementPath;
+  const Bar = slots?.bar ?? AnimatedBarElement;
   const barProps = useSlotProps({
     elementType: Bar,
     externalSlotProps: slotProps?.bar,
@@ -82,7 +70,9 @@ function BarElement(props) {
     }), {
       style,
       onClick,
-      cursor: onClick ? 'pointer' : 'unset'
+      cursor: onClick ? 'pointer' : 'unset',
+      stroke: 'none',
+      fill: color
     }),
     className: classes.root,
     ownerState

package/modern/BarChart/BarPlot.js

@@ -6,8 +6,9 @@ const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
+import { styled } from '@mui/material/styles';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { BarElement } from "./BarElement.js";
+import { BarElement, barElementClasses } from "./BarElement.js";
 import getColor from "./getColor.js";
 import { useChartId, useDrawingArea } from "../hooks/index.js";
 import { BarClipPath } from "./BarClipPath.js";
@@ -179,6 +180,15 @@ const enterStyle = ({
   height,
   width
 });
+const BarPlotRoot = styled('g', {
+  name: 'MuiBarPlot',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
+  [`& .${barElementClasses.root}`]: {
+    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+  }
+});
 
 /**
  * Demos:
@@ -221,7 +231,7 @@ function BarPlot(props) {
     update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/_jsxs(React.Fragment, {
+  return /*#__PURE__*/_jsxs(BarPlotRoot, {
     children: [!withoutBorderRadius && maskTransition((style, {
       id,
       hasPositive,

package/modern/BarChart/useBarChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 /**
@@ -23,7 +23,6 @@ export const useBarChartProps = props => {
       colors,
       dataset,
       sx,
-      tooltip,
       onAxisClick,
       axisHighlight,
       grid,
@@ -74,7 +73,7 @@ export const useBarChartProps = props => {
     sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
     className,
     skipAnimation
   });
@@ -120,10 +119,6 @@ export const useBarChartProps = props => {
     slots,
     slotProps
   };
-  const tooltipProps = _extends({}, tooltip, {
-    slots,
-    slotProps
-  });
   return {
     chartContainerProps,
     barPlotProps,
@@ -135,7 +130,6 @@ export const useBarChartProps = props => {
     chartsAxisProps,
     axisHighlightProps,
     legendProps,
-    tooltipProps,
     children
   };
 };

package/modern/ChartContainer/ChartContainer.js

@@ -6,15 +6,21 @@ import PropTypes from 'prop-types';
 import { ChartDataProvider } from "../context/ChartDataProvider/index.js";
 import { ResizableContainer } from "./ResizableContainer.js";
 import { useChartContainerProps } from "./useChartContainerProps.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
-    hasIntrinsicSize,
     chartDataProviderProps,
-    resizableChartContainerProps
+    children,
+    resizableContainerProps,
+    chartsSurfaceProps
   } = useChartContainerProps(props, ref);
-  return /*#__PURE__*/_jsx(ResizableContainer, _extends({}, resizableChartContainerProps, {
-    children: hasIntrinsicSize ? /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps)) : null
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+    children: /*#__PURE__*/_jsx(ResizableContainer, _extends({}, resizableContainerProps, {
+      children: /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: children
+      }))
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
@@ -74,16 +80,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
   plugins: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -97,12 +93,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   skipAnimation: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/modern/ChartContainer/ResizableContainer.js

@@ -1,10 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
+import { useSize } from "../context/SizeProvider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Wrapping div that take the shape of its parent.
  *
  * @ignore - do not document.
  */
-export const ResizableContainer = styled('div', {
+export const ResizableContainerRoot = styled('div', {
   name: 'MuiResponsiveChart',
   slot: 'Container'
 })(({
@@ -23,4 +28,33 @@ export const ResizableContainer = styled('div', {
     width: '100%',
     height: '100%'
   }
-}));
+}));
+
+/**
+ * Wrapping div that take the shape of its parent.
+ *
+ * @ignore - do not document.
+ */
+function ResizableContainer(props) {
+  const {
+    inHeight,
+    inWidth,
+    containerRef
+  } = useSize();
+  return /*#__PURE__*/_jsx(ResizableContainerRoot, _extends({}, props, {
+    ownerState: {
+      width: inWidth,
+      height: inHeight
+    },
+    ref: containerRef,
+    children: props.children
+  }));
+}
+process.env.NODE_ENV !== "production" ? ResizableContainer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node
+} : void 0;
+export { ResizableContainer };

package/modern/ChartContainer/useChartContainerProps.js

@@ -1,14 +1,11 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "resolveSizeBeforeRender", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis", "skipAnimation"];
-import { useChartContainerDimensions } from "./useChartContainerDimensions.js";
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation"];
 export const useChartContainerProps = (props, ref) => {
   const {
       width,
       height,
-      resolveSizeBeforeRender,
       margin,
       children,
       series,
@@ -21,50 +18,39 @@ export const useChartContainerProps = (props, ref) => {
       plugins,
       sx,
       title,
-      viewBox,
       xAxis,
       yAxis,
       zAxis,
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    containerRef,
-    width: dWidth,
-    height: dHeight
-  } = useChartContainerDimensions(width, height, resolveSizeBeforeRender);
-  const resizableChartContainerProps = _extends({}, other, {
-    ownerState: {
-      width,
-      height
-    },
-    ref: containerRef
-  });
+  const resizableContainerProps = other;
+  const chartsSurfaceProps = {
+    title,
+    desc,
+    sx,
+    disableAxisListener,
+    ref
+  };
   const chartDataProviderProps = {
     margin,
-    children,
     series,
     colors,
     dataset,
-    desc,
-    disableAxisListener,
     highlightedItem,
     onHighlightChange,
     plugins,
-    sx,
-    title,
-    viewBox,
     xAxis,
     yAxis,
     zAxis,
     skipAnimation,
-    width: dWidth,
-    height: dHeight,
-    ref
+    width,
+    height
   };
   return {
-    hasIntrinsicSize: Boolean(dWidth && dHeight),
     chartDataProviderProps,
-    resizableChartContainerProps
+    resizableContainerProps,
+    chartsSurfaceProps,
+    children
   };
 };