@mui/x-charts 6.0.0-alpha.0

package/legacy/ScatterChart/ScatterChart.js

@@ -0,0 +1,245 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ScatterPlot } from './ScatterPlot';
+import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
+import { ChartsAxis } from '../ChartsAxis';
+import { ChartsTooltip } from '../ChartsTooltip';
+import { ChartsLegend } from '../ChartsLegend';
+import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function ScatterChart(props) {
+  var xAxis = props.xAxis,
+    yAxis = props.yAxis,
+    series = props.series,
+    tooltip = props.tooltip,
+    axisHighlight = props.axisHighlight,
+    legend = props.legend,
+    width = props.width,
+    height = props.height,
+    margin = props.margin,
+    colors = props.colors,
+    sx = props.sx,
+    topAxis = props.topAxis,
+    leftAxis = props.leftAxis,
+    rightAxis = props.rightAxis,
+    bottomAxis = props.bottomAxis,
+    children = props.children;
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    series: series.map(function (s) {
+      return _extends({
+        type: 'scatter'
+      }, s);
+    }),
+    width: width,
+    height: height,
+    margin: margin,
+    colors: colors,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    sx: sx,
+    children: [/*#__PURE__*/_jsx(ChartsAxis, {
+      topAxis: topAxis,
+      leftAxis: leftAxis,
+      rightAxis: rightAxis,
+      bottomAxis: bottomAxis
+    }), /*#__PURE__*/_jsx(ScatterPlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
+      x: "none",
+      y: "none"
+    }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({
+      trigger: "item"
+    }, tooltip)), children]
+  });
+}
+process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  axisHighlight: PropTypes.shape({
+    x: PropTypes.oneOf(['band', 'line', 'none']),
+    y: PropTypes.oneOf(['line', 'none'])
+  }),
+  /**
+   * Indicate which axis to display the the bottom of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * @default xAxisIds[0] The id of the first provided axis
+   */
+  bottomAxis: PropTypes.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'top']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * Color palette used to colorize multiple series.
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  desc: PropTypes.string,
+  disableAxisListener: PropTypes.bool,
+  height: PropTypes.number,
+  /**
+   * Indicate which axis to display the the left of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * @default yAxisIds[0] The id of the first provided axis
+   */
+  leftAxis: PropTypes.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'right']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  legend: PropTypes.shape({
+    classes: PropTypes.object,
+    direction: PropTypes.oneOf(['column', 'row']),
+    itemWidth: PropTypes.number,
+    markSize: PropTypes.number,
+    offset: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number
+    }),
+    position: PropTypes.shape({
+      horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
+      vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
+    }),
+    spacing: PropTypes.number
+  }),
+  margin: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  /**
+   * Indicate which axis to display the the right of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * @default null
+   */
+  rightAxis: PropTypes.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'right']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  series: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string,
+    data: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+      x: PropTypes.number.isRequired,
+      y: PropTypes.number.isRequired
+    })).isRequired,
+    highlightScope: PropTypes.shape({
+      faded: PropTypes.oneOf(['global', 'none', 'series']),
+      highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+    }),
+    id: PropTypes.string,
+    label: PropTypes.string,
+    markerSize: PropTypes.number,
+    type: PropTypes.oneOf(['scatter']),
+    valueFormatter: PropTypes.func,
+    xAxisKey: PropTypes.string,
+    yAxisKey: PropTypes.string
+  })).isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  title: PropTypes.string,
+  tooltip: PropTypes.shape({
+    axisContent: PropTypes.elementType,
+    classes: PropTypes.object,
+    itemContent: PropTypes.elementType,
+    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
+  }),
+  /**
+   * Indicate which axis to display the the top of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * @default null
+   */
+  topAxis: PropTypes.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'top']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  width: PropTypes.number,
+  xAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.number,
+    maxTicks: PropTypes.number,
+    min: PropTypes.number,
+    minTicks: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
+    valueFormatter: PropTypes.func
+  })),
+  yAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.number,
+    maxTicks: PropTypes.number,
+    min: PropTypes.number,
+    minTicks: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
+    valueFormatter: PropTypes.func
+  }))
+} : void 0;
+export { ScatterChart };

package/legacy/ScatterChart/ScatterPlot.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Scatter } from './Scatter';
+import { SeriesContext } from '../context/SeriesContextProvider';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ScatterPlot() {
+  var seriesData = React.useContext(SeriesContext).scatter;
+  var axisData = React.useContext(CartesianContext);
+  if (seriesData === undefined) {
+    return null;
+  }
+  var series = seriesData.series,
+    seriesOrder = seriesData.seriesOrder;
+  var xAxis = axisData.xAxis,
+    yAxis = axisData.yAxis,
+    xAxisIds = axisData.xAxisIds,
+    yAxisIds = axisData.yAxisIds;
+  var defaultXAxisId = xAxisIds[0];
+  var defaultYAxisId = yAxisIds[0];
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: seriesOrder.map(function (seriesId) {
+      var _series$seriesId = series[seriesId],
+        id = _series$seriesId.id,
+        xAxisKey = _series$seriesId.xAxisKey,
+        yAxisKey = _series$seriesId.yAxisKey,
+        markerSize = _series$seriesId.markerSize,
+        color = _series$seriesId.color;
+      var xScale = xAxis[xAxisKey != null ? xAxisKey : defaultXAxisId].scale;
+      var yScale = yAxis[yAxisKey != null ? yAxisKey : defaultYAxisId].scale;
+      return /*#__PURE__*/_jsx(Scatter, {
+        xScale: xScale,
+        yScale: yScale,
+        color: color,
+        markerSize: markerSize != null ? markerSize : 4,
+        series: series[seriesId]
+      }, id);
+    })
+  });
+}

package/legacy/ScatterChart/extremums.js

@@ -0,0 +1,39 @@
+var mergeMinMax = function mergeMinMax(acc, val) {
+  if (acc[0] === null || acc[1] === null) {
+    return val;
+  }
+  if (val[0] === null || val[1] === null) {
+    return acc;
+  }
+  return [Math.min(acc[0], val[0]), Math.max(acc[1], val[1])];
+};
+export var getExtremumX = function getExtremumX(params) {
+  var series = params.series,
+    axis = params.axis,
+    isDefaultAxis = params.isDefaultAxis;
+  return Object.keys(series).filter(function (seriesId) {
+    return series[seriesId].xAxisKey === axis.id || series[seriesId].xAxisKey === undefined && isDefaultAxis;
+  }).reduce(function (acc, seriesId) {
+    var seriesMinMax = series[seriesId].data.reduce(function (accSeries, _ref) {
+      var x = _ref.x;
+      var val = [x, x];
+      return mergeMinMax(accSeries, val);
+    }, [null, null]);
+    return mergeMinMax(acc, seriesMinMax);
+  }, [null, null]);
+};
+export var getExtremumY = function getExtremumY(params) {
+  var series = params.series,
+    axis = params.axis,
+    isDefaultAxis = params.isDefaultAxis;
+  return Object.keys(series).filter(function (seriesId) {
+    return series[seriesId].yAxisKey === axis.id || series[seriesId].yAxisKey === undefined && isDefaultAxis;
+  }).reduce(function (acc, seriesId) {
+    var seriesMinMax = series[seriesId].data.reduce(function (accSeries, _ref2) {
+      var y = _ref2.y;
+      var val = [y, y];
+      return mergeMinMax(accSeries, val);
+    }, [null, null]);
+    return mergeMinMax(acc, seriesMinMax);
+  }, [null, null]);
+};

package/legacy/ScatterChart/formatter.js

@@ -0,0 +1,12 @@
+import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+var formatter = function formatter(_ref) {
+  var series = _ref.series,
+    seriesOrder = _ref.seriesOrder;
+  return {
+    series: defaultizeValueFormatter(series, function (v) {
+      return "(".concat(v.x, ", ").concat(v.y, ")");
+    }),
+    seriesOrder: seriesOrder
+  };
+};
+export default formatter;

package/legacy/ScatterChart/index.js

@@ -0,0 +1,3 @@
+export { ScatterPlot } from './ScatterPlot';
+export { ScatterChart } from './ScatterChart';
+export { Scatter } from './Scatter';

package/legacy/colorPalettes/colorPalettes.js

@@ -0,0 +1,15 @@
+export var blueberryTwilightPaletteLight = ['#02B2AF', '#2E96FF', '#B800D8', '#60009B', '#2731C8', '#03008D'];
+export var blueberryTwilightPaletteDark = ['#02B2AF', '#72CCFF', '#DA00FF', '#9001CB', '#2E96FF', '#3B48E0'];
+export var blueberryTwilightPalette = function blueberryTwilightPalette(mode) {
+  return mode === 'dark' ? blueberryTwilightPaletteDark : blueberryTwilightPaletteLight;
+};
+export var mangoFusionPaletteLight = ['#173A5E', '#00A3A0', '#C91B63', '#EF5350', '#FFA726', '#B800D8', '#60009B', '#2E96FF', '#2731C8', '#03008D'];
+export var mangoFusionPaletteDark = ['#41698F', '#19D0CD', '#DE196B', '#FC5F5C', '#FFD771', '#DA00FF', '#9001CB', '#72CCFF', '#2E96FF', '#3B48E0'];
+export var mangoFusionPalette = function mangoFusionPalette(mode) {
+  return mode === 'dark' ? mangoFusionPaletteDark : mangoFusionPaletteLight;
+};
+export var cheerfulFiestaPaletteDark = ['#0072E6', '#66B2FF', '#FFB017', '#1F94AD', '#FF3143', '#FF6C63'];
+export var cheerfulFiestaPaletteLight = ['#0059B2', '#2E96FF', '#EA8C00', '#1F94AD', '#C82634', '#FF3143'];
+export var cheerfulFiestaPalette = function cheerfulFiestaPalette(mode) {
+  return mode === 'dark' ? cheerfulFiestaPaletteDark : cheerfulFiestaPaletteLight;
+};

package/legacy/colorPalettes/index.js

@@ -0,0 +1 @@
+export * from './colorPalettes';

package/legacy/constants.js

@@ -0,0 +1,8 @@
+export var DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
+export var DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
+export var DEFAULT_MARGINS = {
+  top: 100,
+  bottom: 50,
+  left: 50,
+  right: 50
+};

package/legacy/context/CartesianContextProvider.js

@@ -0,0 +1,241 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { scaleBand, scalePoint } from 'd3-scale';
+import PropTypes from 'prop-types';
+import { getExtremumX as getBarExtremumX, getExtremumY as getBarExtremumY } from '../BarChart/extremums';
+import { getExtremumX as getScatterExtremumX, getExtremumY as getScatterExtremumY } from '../ScatterChart/extremums';
+import { getExtremumX as getLineExtremumX, getExtremumY as getLineExtremumY } from '../LineChart/extremums';
+import { getScale } from '../hooks/useScale';
+import { DrawingContext } from './DrawingProvider';
+import { SeriesContext } from './SeriesContextProvider';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+import { getTicksNumber } from '../hooks/useTicks';
+import { jsx as _jsx } from "react/jsx-runtime";
+// TODO: those might be better placed in a distinct file
+var xExtremumGetters = {
+  bar: getBarExtremumX,
+  scatter: getScatterExtremumX,
+  line: getLineExtremumX
+};
+var yExtremumGetters = {
+  bar: getBarExtremumY,
+  scatter: getScatterExtremumY,
+  line: getLineExtremumY
+};
+export var CartesianContext = /*#__PURE__*/React.createContext({
+  xAxis: {},
+  yAxis: {},
+  xAxisIds: [],
+  yAxisIds: []
+});
+function CartesianContextProvider(_ref) {
+  var xAxis = _ref.xAxis,
+    yAxis = _ref.yAxis,
+    children = _ref.children;
+  var formattedSeries = React.useContext(SeriesContext);
+  var drawingArea = React.useContext(DrawingContext);
+  var value = React.useMemo(function () {
+    var _xAxis$map, _yAxis$map;
+    var axisExtremumCallback = function axisExtremumCallback(acc, chartType, axis, getters, isDefaultAxis) {
+      var _ref2, _formattedSeries$char;
+      var getter = getters[chartType];
+      var series = (_ref2 = (_formattedSeries$char = formattedSeries[chartType]) == null ? void 0 : _formattedSeries$char.series) != null ? _ref2 : {};
+      var _getter = getter({
+          series: series,
+          axis: axis,
+          isDefaultAxis: isDefaultAxis
+        }),
+        _getter2 = _slicedToArray(_getter, 2),
+        minChartTypeData = _getter2[0],
+        maxChartTypeData = _getter2[1];
+      var _acc = _slicedToArray(acc, 2),
+        minData = _acc[0],
+        maxData = _acc[1];
+      if (minData === null || maxData === null) {
+        return [minChartTypeData, maxChartTypeData];
+      }
+      if (minChartTypeData === null || maxChartTypeData === null) {
+        return [minData, maxData];
+      }
+      return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+    };
+    var getAxisExtremum = function getAxisExtremum(axis, getters, isDefaultAxis) {
+      var charTypes = Object.keys(getters);
+      return charTypes.reduce(function (acc, charType) {
+        return axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis);
+      }, [null, null]);
+    };
+    var allXAxis = [].concat(_toConsumableArray((_xAxis$map = xAxis == null ? void 0 : xAxis.map(function (axis, index) {
+      return _extends({
+        id: "deaultized-x-axis-".concat(index)
+      }, axis);
+    })) != null ? _xAxis$map : []), _toConsumableArray(xAxis === undefined || xAxis.findIndex(function (_ref3) {
+      var id = _ref3.id;
+      return id === DEFAULT_X_AXIS_KEY;
+    }) === -1 ? [{
+      id: DEFAULT_X_AXIS_KEY,
+      scaleType: 'linear'
+    }] : []));
+    var completedXAxis = {};
+    allXAxis.forEach(function (axis, axisIndex) {
+      var _axis$scaleType, _axis$min, _axis$max, _axis$min2, _axis$max2;
+      var isDefaultAxis = axisIndex === 0;
+      var _getAxisExtremum = getAxisExtremum(axis, xExtremumGetters, isDefaultAxis),
+        _getAxisExtremum2 = _slicedToArray(_getAxisExtremum, 2),
+        minData = _getAxisExtremum2[0],
+        maxData = _getAxisExtremum2[1];
+      var scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
+      var range = [drawingArea.left, drawingArea.left + drawingArea.width];
+      if (scaleType === 'band') {
+        completedXAxis[axis.id] = _extends({}, axis, {
+          scaleType: scaleType,
+          scale: scaleBand(axis.data, range),
+          ticksNumber: axis.data.length
+        });
+        return;
+      }
+      if (scaleType === 'point') {
+        completedXAxis[axis.id] = _extends({}, axis, {
+          scaleType: scaleType,
+          scale: scalePoint(axis.data, range),
+          ticksNumber: axis.data.length
+        });
+        return;
+      }
+      var extremums = [(_axis$min = axis.min) != null ? _axis$min : minData, (_axis$max = axis.max) != null ? _axis$max : maxData];
+      var ticksNumber = getTicksNumber(_extends({}, axis, {
+        range: range
+      }));
+      var niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
+      var niceDomain = niceScale.domain();
+      var domain = [(_axis$min2 = axis.min) != null ? _axis$min2 : niceDomain[0], (_axis$max2 = axis.max) != null ? _axis$max2 : niceDomain[1]];
+      completedXAxis[axis.id] = _extends({}, axis, {
+        scaleType: scaleType,
+        scale: niceScale.domain(domain),
+        ticksNumber: ticksNumber
+      });
+    });
+    var allYAxis = [].concat(_toConsumableArray((_yAxis$map = yAxis == null ? void 0 : yAxis.map(function (axis, index) {
+      return _extends({
+        id: "deaultized-y-axis-".concat(index)
+      }, axis);
+    })) != null ? _yAxis$map : []), _toConsumableArray(yAxis === undefined || yAxis.findIndex(function (_ref4) {
+      var id = _ref4.id;
+      return id === DEFAULT_Y_AXIS_KEY;
+    }) === -1 ? [{
+      id: DEFAULT_Y_AXIS_KEY,
+      scaleType: 'linear'
+    }] : []));
+    var completedYAxis = {};
+    allYAxis.forEach(function (axis, axisIndex) {
+      var _axis$scaleType2, _axis$min3, _axis$max3, _axis$min4, _axis$max4;
+      var isDefaultAxis = axisIndex === 0;
+      var _getAxisExtremum3 = getAxisExtremum(axis, yExtremumGetters, isDefaultAxis),
+        _getAxisExtremum4 = _slicedToArray(_getAxisExtremum3, 2),
+        minData = _getAxisExtremum4[0],
+        maxData = _getAxisExtremum4[1];
+      var range = [drawingArea.top + drawingArea.height, drawingArea.top];
+      var scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
+      if (scaleType === 'band') {
+        completedYAxis[axis.id] = _extends({}, axis, {
+          scaleType: scaleType,
+          scale: scaleBand(axis.data, range),
+          ticksNumber: axis.data.length
+        });
+        return;
+      }
+      if (scaleType === 'point') {
+        completedYAxis[axis.id] = _extends({}, axis, {
+          scaleType: scaleType,
+          scale: scalePoint(axis.data, range),
+          ticksNumber: axis.data.length
+        });
+        return;
+      }
+      var extremums = [(_axis$min3 = axis.min) != null ? _axis$min3 : minData, (_axis$max3 = axis.max) != null ? _axis$max3 : maxData];
+      var ticksNumber = getTicksNumber(_extends({}, axis, {
+        range: range
+      }));
+      var niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
+      var niceDomain = niceScale.domain();
+      var domain = [(_axis$min4 = axis.min) != null ? _axis$min4 : niceDomain[0], (_axis$max4 = axis.max) != null ? _axis$max4 : niceDomain[1]];
+      completedYAxis[axis.id] = _extends({}, axis, {
+        scaleType: scaleType,
+        scale: niceScale.domain(domain),
+        ticksNumber: ticksNumber
+      });
+    });
+    return {
+      xAxis: completedXAxis,
+      yAxis: completedYAxis,
+      xAxisIds: allXAxis.map(function (_ref5) {
+        var id = _ref5.id;
+        return id;
+      }),
+      yAxisIds: allYAxis.map(function (_ref6) {
+        var id = _ref6.id;
+        return id;
+      })
+    };
+  }, [drawingArea.height, drawingArea.left, drawingArea.top, drawingArea.width, formattedSeries, xAxis, yAxis]);
+
+  // @ts-ignore
+  return /*#__PURE__*/_jsx(CartesianContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  xAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.number,
+    maxTicks: PropTypes.number,
+    min: PropTypes.number,
+    minTicks: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
+    valueFormatter: PropTypes.func
+  })),
+  yAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.number,
+    maxTicks: PropTypes.number,
+    min: PropTypes.number,
+    minTicks: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
+    valueFormatter: PropTypes.func
+  }))
+} : void 0;
+export { CartesianContextProvider };

package/legacy/context/DrawingProvider.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useChartDimensions from '../hooks/useChartDimensions';
+
+/**
+ * Defines the area in which it is possible to draw the charts
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DrawingContext = /*#__PURE__*/React.createContext({
+  top: 0,
+  left: 0,
+  height: 300,
+  width: 400
+});
+export var SVGContext = /*#__PURE__*/React.createContext({
+  current: null
+});
+function DrawingProvider(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    margin = _ref.margin,
+    svgRef = _ref.svgRef,
+    children = _ref.children;
+  var drawingArea = useChartDimensions(width, height, margin);
+  return /*#__PURE__*/_jsx(SVGContext.Provider, {
+    value: svgRef,
+    children: /*#__PURE__*/_jsx(DrawingContext.Provider, {
+      value: drawingArea,
+      children: children
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? DrawingProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  height: PropTypes.number.isRequired,
+  margin: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  svgRef: PropTypes.shape({
+    current: PropTypes.object
+  }).isRequired,
+  width: PropTypes.number.isRequired
+} : void 0;
+export { DrawingProvider };