@mui/x-charts 6.0.0-alpha.4 → 6.0.0-alpha.6

package/LineChart/MarkPlot.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MarkPlot = MarkPlot;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
@@ -12,7 +14,7 @@ var _useScale = require("../hooks/useScale");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function MarkPlot() {
+function MarkPlot(props) {
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
   if (seriesData === undefined) {
@@ -30,7 +32,7 @@ function MarkPlot() {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, props, {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
@@ -82,5 +84,5 @@ function MarkPlot() {
         }, `${seriesId}-${index}`));
       });
     })
-  });
+  }));
 }

package/LineChart/formatter.js

@@ -10,7 +10,7 @@ var _d3Shape = require("d3-shape");
 var _stackSeries = require("../internals/stackSeries");
 var _defaultizeValueFormatter = _interopRequireDefault(require("../internals/defaultizeValueFormatter"));
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
-const formatter = params => {
+const formatter = (params, dataset) => {
   const {
     seriesOrder,
     series
@@ -18,17 +18,22 @@ const formatter = params => {
   const stackingGroups = (0, _stackSeries.getStackingGroups)(params);
 
   // Create a data set with format adapted to d3
-  const d3Dataset = [];
+  const d3Dataset = dataset ?? [];
   seriesOrder.forEach(id => {
-    series[id].data.forEach((value, index) => {
-      if (d3Dataset.length <= index) {
-        d3Dataset.push({
-          [id]: value
-        });
-      } else {
-        d3Dataset[index][id] = value;
-      }
-    });
+    const data = series[id].data;
+    if (data !== undefined) {
+      data.forEach((value, index) => {
+        if (d3Dataset.length <= index) {
+          d3Dataset.push({
+            [id]: value
+          });
+        } else {
+          d3Dataset[index][id] = value;
+        }
+      });
+    } else if (dataset === undefined) {
+      throw new Error([`MUI: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+    }
   });
   const completedSeries = {};
   stackingGroups.forEach(stackingGroup => {
@@ -38,9 +43,15 @@ const formatter = params => {
       stackingOrder,
       stackingOffset
     } = stackingGroup;
-    const stackedSeries = (0, _d3Shape.stack)().keys(ids).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    const stackedSeries = (0, _d3Shape.stack)().keys(ids.map(id => {
+      // Use dataKey if needed and available
+      const dataKey = series[id].dataKey;
+      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
+    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
+      const dataKey = series[id].dataKey;
       completedSeries[id] = (0, _extends2.default)({}, series[id], {
+        data: dataKey ? dataset.map(d => d[dataKey]) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });
     });

package/PieChart/PieChart.js

@@ -90,7 +90,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * 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.default.oneOfType([_propTypes.default.shape({
@@ -112,12 +112,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   desc: _propTypes.default.string,
   disableAxisListener: _propTypes.default.bool,
   height: _propTypes.default.number,
   /**
    * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * 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.default.oneOfType([_propTypes.default.shape({
@@ -157,7 +158,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
   rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -222,7 +223,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -249,15 +250,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
-    max: _propTypes.default.number,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     maxTicks: _propTypes.default.number,
-    min: _propTypes.default.number,
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     minTicks: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
@@ -271,15 +274,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
-    max: _propTypes.default.number,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     maxTicks: _propTypes.default.number,
-    min: _propTypes.default.number,
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     minTicks: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),

package/ScatterChart/Scatter.js

@@ -25,62 +25,48 @@ function Scatter(props) {
   const {
     item
   } = React.useContext(_InteractionProvider.InteractionContext);
-  const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-  const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(series.highlightScope);
-  const xRange = xScale.range();
-  const yRange = yScale.range();
-  const isInRange = ({
-    x,
-    y
-  }) => {
-    if (x < Math.min(...xRange) || x > Math.max(...xRange)) {
-      return false;
-    }
-    if (y < Math.min(...yRange) || y > Math.max(...yRange)) {
-      return false;
-    }
-    return true;
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-    children: series.data.map(({
-      x,
-      y,
-      id
-    }, index) => ({
-      x: getXPosition(x),
-      y: getYPosition(y),
-      id,
-      dataIndex: index
-    })).filter(isInRange).map(({
-      x,
-      y,
-      id,
-      dataIndex
-    }) => {
-      const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
-        type: 'scatter',
-        seriesId: series.id,
-        dataIndex
-      }, series.highlightScope);
-      const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
+  const cleanData = React.useMemo(() => {
+    const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
+    const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+    const xRange = xScale.range();
+    const yRange = yScale.range();
+    const minXRange = Math.min(...xRange);
+    const maxXRange = Math.max(...xRange);
+    const minYRange = Math.min(...yRange);
+    const maxYRange = Math.max(...yRange);
+    const temp = [];
+    for (let i = 0; i < series.data.length; i += 1) {
+      const scatterPoint = series.data[i];
+      const x = getXPosition(scatterPoint.x);
+      const y = getYPosition(scatterPoint.y);
+      const isInRange = x >= minXRange && x <= maxXRange && y >= minYRange && y <= maxYRange;
+      const pointCtx = {
         type: 'scatter',
         seriesId: series.id,
-        dataIndex
-      }, series.highlightScope);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
-        cx: 0,
-        cy: 0,
-        r: markerSize,
-        transform: `translate(${x}, ${y})`,
-        fill: color,
-        opacity: isFaded && 0.3 || 1
-      }, getInteractionItemProps({
-        type: 'scatter',
-        seriesId: series.id,
-        dataIndex
-      })), id);
-    })
+        dataIndex: i
+      };
+      if (isInRange) {
+        temp.push({
+          x,
+          y,
+          isFaded: !(0, _useInteractionItemProps.getIsHighlighted)(item, pointCtx, series.highlightScope) && (0, _useInteractionItemProps.getIsFaded)(item, pointCtx, series.highlightScope),
+          interactionProps: getInteractionItemProps(pointCtx),
+          id: scatterPoint.id
+        });
+      }
+    }
+    return temp;
+  }, [yScale, xScale, getInteractionItemProps, item, series.data, series.highlightScope, series.id]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    children: cleanData.map(dataPoint => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
+      cx: 0,
+      cy: 0,
+      r: markerSize,
+      transform: `translate(${dataPoint.x}, ${dataPoint.y})`,
+      fill: color,
+      opacity: dataPoint.isFaded && 0.3 || 1
+    }, dataPoint.interactionProps), dataPoint.id))
   });
 }
 process.env.NODE_ENV !== "production" ? Scatter.propTypes = {

package/ScatterChart/ScatterChart.js

@@ -73,7 +73,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * 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.default.oneOfType([_propTypes.default.shape({
@@ -95,12 +95,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   desc: _propTypes.default.string,
   disableAxisListener: _propTypes.default.bool,
   height: _propTypes.default.number,
   /**
    * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * 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.default.oneOfType([_propTypes.default.shape({
@@ -140,7 +141,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
   rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -185,7 +186,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -212,15 +213,17 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
-    max: _propTypes.default.number,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     maxTicks: _propTypes.default.number,
-    min: _propTypes.default.number,
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     minTicks: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
@@ -234,15 +237,17 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
-    max: _propTypes.default.number,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     maxTicks: _propTypes.default.number,
-    min: _propTypes.default.number,
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     minTicks: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),

package/SparkLineChart/SparkLineChart.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ChartsTooltipProps } from '../ChartsTooltip';
+import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { AxisConfig } from '../models/axis';
+import { MakeOptional } from '../models/helpers';
+import { LineSeriesType } from '../models/seriesType/line';
+export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis'> {
+    /**
+     * The xAxis configuration.
+     * Notice it is a single configuration object, not an array of configuration.
+     */
+    xAxis?: MakeOptional<AxisConfig, 'id'>;
+    tooltip?: ChartsTooltipProps;
+    axisHighlight?: ChartsAxisHighlightProps;
+    /**
+     * Type of plot used.
+     * @default 'line'
+     */
+    plotType?: 'line' | 'bar';
+    /**
+     * Data to plot.
+     */
+    data: number[];
+    /**
+     * Formatter used by the tooltip.
+     * @param {number} value The value to format.
+     * @returns {string} the formatted value.
+     */
+    valueFormatter?: (value: number) => string;
+    /**
+     * Set to `true` to enable the tooltip in the sparkline.
+     * @default false
+     */
+    showTooltip?: boolean;
+    /**
+     * Set to `true` to highlight the value.
+     * With line, it shows a point.
+     * With bar, it shows a highlight band.
+     * @default false
+     */
+    showHighlight?: boolean;
+    /**
+     * Set to `true` to fill spark line area.
+     * Has no effect if plotType='bar'.
+     * @default false
+     */
+    area?: LineSeriesType['area'];
+    /**
+     * @default 'linear'
+     */
+    curve?: LineSeriesType['curve'];
+}
+declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps & React.RefAttributes<unknown>>;
+export { SparkLineChart };

package/SparkLineChart/SparkLineChart.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SparkLineChart = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _BarChart = require("../BarChart");
+var _LineChart = require("../LineChart");
+var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
+var _constants = require("../constants");
+var _ChartsTooltip = require("../ChartsTooltip");
+var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const SparkLineMarkPlot = (0, _styles.styled)(_LineChart.MarkPlot)({
+  [`& .${_LineChart.markElementClasses.root}`]: {
+    display: 'none',
+    [`&.${_LineChart.markElementClasses.highlighted}`]: {
+      display: 'inherit'
+    }
+  }
+});
+const SPARKLINE_DEFAULT_MARGIN = {
+  top: 5,
+  bottom: 5,
+  left: 5,
+  right: 5
+};
+const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
+  const {
+    xAxis,
+    width,
+    height,
+    margin = SPARKLINE_DEFAULT_MARGIN,
+    colors,
+    sx,
+    showTooltip,
+    tooltip,
+    showHighlight,
+    axisHighlight: inAxisHighlight,
+    children,
+    data,
+    plotType = 'line',
+    valueFormatter = v => v.toString(),
+    area,
+    curve = 'linear'
+  } = props;
+  const defaultXHighlight = showHighlight && plotType === 'bar' ? {
+    x: 'band'
+  } : {
+    x: 'none'
+  };
+  const axisHighlight = (0, _extends2.default)({}, defaultXHighlight, inAxisHighlight);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
+    ref: ref,
+    series: [(0, _extends2.default)({
+      type: plotType,
+      data,
+      valueFormatter
+    }, plotType === 'bar' ? {} : {
+      area,
+      curve
+    })],
+    width: width,
+    height: height,
+    margin: margin,
+    xAxis: [(0, _extends2.default)({
+      id: _constants.DEFAULT_X_AXIS_KEY,
+      scaleType: plotType === 'bar' ? 'band' : 'linear',
+      data: Array.from({
+        length: data.length
+      }, (_, index) => index),
+      hideTooltip: xAxis === undefined
+    }, xAxis)],
+    colors: colors,
+    sx: sx,
+    disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
+    children: [plotType === 'bar' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, {}), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, {}), showHighlight && /*#__PURE__*/(0, _jsxRuntime.jsx)(SparkLineMarkPlot, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), children]
+  });
+});
+exports.SparkLineChart = SparkLineChart;
+process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Set to `true` to fill spark line area.
+   * Has no effect if plotType='bar'.
+   * @default false
+   */
+  area: _propTypes.default.bool,
+  axisHighlight: _propTypes.default.shape({
+    x: _propTypes.default.oneOf(['band', 'line', 'none']),
+    y: _propTypes.default.oneOf(['line', 'none'])
+  }),
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  /**
+   * Color palette used to colorize multiple series.
+   */
+  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * @default 'linear'
+   */
+  curve: _propTypes.default.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
+  /**
+   * Data to plot.
+   */
+  data: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  desc: _propTypes.default.string,
+  disableAxisListener: _propTypes.default.bool,
+  height: _propTypes.default.number,
+  margin: _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  }),
+  /**
+   * Type of plot used.
+   * @default 'line'
+   */
+  plotType: _propTypes.default.oneOf(['bar', 'line']),
+  /**
+   * Set to `true` to highlight the value.
+   * With line, it shows a point.
+   * With bar, it shows a highlight band.
+   * @default false
+   */
+  showHighlight: _propTypes.default.bool,
+  /**
+   * Set to `true` to enable the tooltip in the sparkline.
+   * @default false
+   */
+  showTooltip: _propTypes.default.bool,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  title: _propTypes.default.string,
+  tooltip: _propTypes.default.shape({
+    axisContent: _propTypes.default.elementType,
+    classes: _propTypes.default.object,
+    itemContent: _propTypes.default.elementType,
+    trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
+  }),
+  /**
+   * Formatter used by the tooltip.
+   * @param {number} value The value to format.
+   * @returns {string} the formatted value.
+   */
+  valueFormatter: _propTypes.default.func,
+  viewBox: _propTypes.default.shape({
+    height: _propTypes.default.number,
+    width: _propTypes.default.number,
+    x: _propTypes.default.number,
+    y: _propTypes.default.number
+  }),
+  width: _propTypes.default.number,
+  /**
+   * The xAxis configuration.
+   * Notice it is a single configuration object, not an array of configuration.
+   */
+  xAxis: _propTypes.default.shape({
+    axisId: _propTypes.default.string,
+    classes: _propTypes.default.object,
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    maxTicks: _propTypes.default.number,
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    minTicks: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func
+  })
+} : void 0;

package/SparkLineChart/index.d.ts

@@ -0,0 +1 @@
+export { SparkLineChart } from './SparkLineChart';

package/SparkLineChart/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SparkLineChart", {
+  enumerable: true,
+  get: function () {
+    return _SparkLineChart.SparkLineChart;
+  }
+});
+var _SparkLineChart = require("./SparkLineChart");

package/SparkLineChart/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/SparkLineChart/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/context/CartesianContextProvider.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { AxisConfig, AxisDefaultized } from '../models/axis';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { DatasetType } from '../models/seriesType/config';
 import { MakeOptional } from '../models/helpers';
 export type CartesianContextProviderProps = {
     xAxis?: MakeOptional<AxisConfig, 'id'>[];
     yAxis?: MakeOptional<AxisConfig, 'id'>[];
+    dataset?: DatasetType;
     children: React.ReactNode;
 };
 type DefaultizedAxisConfig = {
@@ -23,7 +25,7 @@ export declare const CartesianContext: React.Context<{
     xAxisIds: string[];
     yAxisIds: string[];
 }>;
-declare function CartesianContextProvider({ xAxis, yAxis, children }: CartesianContextProviderProps): React.JSX.Element;
+declare function CartesianContextProvider({ xAxis: inXAxis, yAxis: inYAxis, dataset, children, }: CartesianContextProviderProps): React.JSX.Element;
 declare namespace CartesianContextProvider {
     var propTypes: any;
 }