@mui/x-charts 6.0.0-alpha.5 → 6.0.0-alpha.7

package/esm/SparkLineChart/SparkLineChart.js

@@ -0,0 +1,210 @@
+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 { BarPlot } from '../BarChart';
+import { LinePlot, MarkPlot, AreaPlot, markElementClasses } from '../LineChart';
+import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { ChartsTooltip } from '../ChartsTooltip';
+import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SparkLineMarkPlot = styled(MarkPlot)({
+  [`& .${markElementClasses.root}`]: {
+    display: 'none',
+    [`&.${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,
+    slots,
+    slotProps,
+    data,
+    plotType = 'line',
+    valueFormatter = v => v.toString(),
+    area,
+    curve = 'linear'
+  } = props;
+  const defaultXHighlight = showHighlight && plotType === 'bar' ? {
+    x: 'band'
+  } : {
+    x: 'none'
+  };
+  const axisHighlight = _extends({}, defaultXHighlight, inAxisHighlight);
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
+    series: [_extends({
+      type: plotType,
+      data,
+      valueFormatter
+    }, plotType === 'bar' ? {} : {
+      area,
+      curve
+    })],
+    width: width,
+    height: height,
+    margin: margin,
+    xAxis: [_extends({
+      id: 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 == null ? void 0 : tooltip.trigger) !== 'axis') && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
+    children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(AreaPlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/_jsx(LinePlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), showHighlight && /*#__PURE__*/_jsx(SparkLineMarkPlot, {})]
+    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
+  });
+});
+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.bool,
+  axisHighlight: PropTypes.shape({
+    x: PropTypes.oneOf(['band', 'line', 'none']),
+    y: PropTypes.oneOf(['line', 'none'])
+  }),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * Color palette used to colorize multiple series.
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * @default 'linear'
+   */
+  curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
+  /**
+   * Data to plot.
+   */
+  data: PropTypes.arrayOf(PropTypes.number).isRequired,
+  dataset: PropTypes.arrayOf(PropTypes.object),
+  desc: PropTypes.string,
+  disableAxisListener: PropTypes.bool,
+  height: PropTypes.number,
+  margin: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  /**
+   * Type of plot used.
+   * @default 'line'
+   */
+  plotType: PropTypes.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.bool,
+  /**
+   * Set to `true` to enable the tooltip in the sparkline.
+   * @default false
+   */
+  showTooltip: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  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'])
+  }),
+  /**
+   * Formatter used by the tooltip.
+   * @param {number} value The value to format.
+   * @returns {string} the formatted value.
+   */
+  valueFormatter: PropTypes.func,
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  width: PropTypes.number,
+  /**
+   * The xAxis configuration.
+   * Notice it is a single configuration object, not an array of configuration.
+   */
+  xAxis: PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func
+  })
+} : void 0;
+export { SparkLineChart };

package/esm/SparkLineChart/index.js

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

package/esm/colorPalettes/colorPalettes.js

@@ -4,6 +4,6 @@ export const blueberryTwilightPalette = mode => mode === 'dark' ? blueberryTwili
 export const mangoFusionPaletteLight = ['#173A5E', '#00A3A0', '#C91B63', '#EF5350', '#FFA726', '#B800D8', '#60009B', '#2E96FF', '#2731C8', '#03008D'];
 export const mangoFusionPaletteDark = ['#41698F', '#19D0CD', '#DE196B', '#FC5F5C', '#FFD771', '#DA00FF', '#9001CB', '#72CCFF', '#2E96FF', '#3B48E0'];
 export const mangoFusionPalette = mode => mode === 'dark' ? mangoFusionPaletteDark : mangoFusionPaletteLight;
-export const cheerfulFiestaPaletteDark = ['#0072E6', '#66B2FF', '#FFB017', '#1F94AD', '#FF3143', '#FF6C63'];
-export const cheerfulFiestaPaletteLight = ['#0059B2', '#2E96FF', '#EA8C00', '#1F94AD', '#C82634', '#FF3143'];
+export const cheerfulFiestaPaletteDark = ['#0059B2', '#2E96FF', '#FFC24C', '#FF9F0E', '#F38200', '#2ABFDE', '#1F94AD', '#BD2C38', '#FF3143', '#FF8282'];
+export const cheerfulFiestaPaletteLight = ['#003A75', '#007FFF', '#FFC24C', '#FF9D09', '#CA6C00', '#127D94', '#1F94AD', '#C82634', '#FF3143', '#FF7E7E'];
 export const cheerfulFiestaPalette = mode => mode === 'dark' ? cheerfulFiestaPaletteDark : cheerfulFiestaPaletteLight;

package/esm/context/CartesianContextProvider.js

@@ -32,12 +32,37 @@ export const CartesianContext = /*#__PURE__*/React.createContext({
   yAxisIds: []
 });
 function CartesianContextProvider({
-  xAxis,
-  yAxis,
+  xAxis: inXAxis,
+  yAxis: inYAxis,
+  dataset,
   children
 }) {
   const formattedSeries = React.useContext(SeriesContext);
   const drawingArea = React.useContext(DrawingContext);
+  const xAxis = React.useMemo(() => inXAxis == null ? void 0 : inXAxis.map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error('MUI: x-axis uses `dataKey` but no `dataset` is provided.');
+    }
+    return _extends({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  }), [inXAxis, dataset]);
+  const yAxis = React.useMemo(() => inYAxis == null ? void 0 : inYAxis.map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error('MUI: y-axis uses `dataKey` but no `dataset` is provided.');
+    }
+    return _extends({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  }), [inYAxis, dataset]);
   const value = React.useMemo(() => {
     var _xAxis$map, _yAxis$map;
     const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis) => {
@@ -102,7 +127,8 @@ function CartesianContextProvider({
       const scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
       const extremums = [(_axis$min = axis.min) != null ? _axis$min : minData, (_axis$max = axis.max) != null ? _axis$max : maxData];
       const ticksNumber = getTicksNumber(_extends({}, axis, {
-        range
+        range,
+        domain: extremums
       }));
       const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
       const niceDomain = niceScale.domain();
@@ -151,7 +177,8 @@ function CartesianContextProvider({
       const scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
       const extremums = [(_axis$min3 = axis.min) != null ? _axis$min3 : minData, (_axis$max3 = axis.max) != null ? _axis$max3 : maxData];
       const ticksNumber = getTicksNumber(_extends({}, axis, {
-        range
+        range,
+        domain: extremums
       }));
       const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
       const niceDomain = niceScale.domain();
@@ -186,48 +213,57 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
+  dataset: PropTypes.arrayOf(PropTypes.object),
   xAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
     data: PropTypes.array,
+    dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
-    maxTicks: PropTypes.number,
-    min: PropTypes.number,
-    minTicks: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: 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,
+    dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
-    maxTicks: PropTypes.number,
-    min: PropTypes.number,
-    minTicks: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }))
 } : void 0;

package/esm/context/SeriesContextProvider.js

@@ -15,6 +15,7 @@ const seriesTypeFormatter = {
   line: lineSeriesFormatter,
   pie: pieSeriesFormatter
 };
+
 /**
  * This methods is the interface between what the developer is providing and what components receives
  * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
@@ -23,7 +24,7 @@ const seriesTypeFormatter = {
  * @param colors The color palette used to defaultize series colors
  * @returns An object structuring all the series by type.
  */
-const formatSeries = (series, colors) => {
+const formatSeries = (series, colors, dataset) => {
   // Group series by type
   const seriesGroups = {};
   series.forEach((seriesData, seriesIndex) => {
@@ -51,18 +52,19 @@ const formatSeries = (series, colors) => {
   Object.keys(seriesTypeFormatter).forEach(type => {
     if (seriesGroups[type] !== undefined) {
       var _seriesTypeFormatter$, _seriesTypeFormatter$2;
-      formattedSeries[type] = (_seriesTypeFormatter$ = (_seriesTypeFormatter$2 = seriesTypeFormatter[type]) == null ? void 0 : _seriesTypeFormatter$2.call(seriesTypeFormatter, seriesGroups[type])) != null ? _seriesTypeFormatter$ : seriesGroups[type];
+      formattedSeries[type] = (_seriesTypeFormatter$ = (_seriesTypeFormatter$2 = seriesTypeFormatter[type]) == null ? void 0 : _seriesTypeFormatter$2.call(seriesTypeFormatter, seriesGroups[type], dataset)) != null ? _seriesTypeFormatter$ : seriesGroups[type];
     }
   });
   return formattedSeries;
 };
 export function SeriesContextProvider({
   series,
+  dataset,
   colors = blueberryTwilightPalette,
   children
 }) {
   const theme = useTheme();
-  const formattedSeries = React.useMemo(() => formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors), [series, colors, theme.palette.mode]);
+  const formattedSeries = React.useMemo(() => formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, dataset), [series, colors, theme.palette.mode, dataset]);
   return /*#__PURE__*/_jsx(SeriesContext.Provider, {
     value: formattedSeries,
     children: children

package/esm/hooks/useTicks.js

@@ -2,13 +2,16 @@ import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
 export function getTicksNumber(params) {
   const {
-    maxTicks = 999,
-    minTicks = 2,
-    tickSpacing = 50,
-    range
+    tickMaxStep,
+    tickMinStep,
+    tickNumber,
+    range,
+    domain
   } = params;
-  const estimatedTickNumber = Math.floor(Math.abs(range[1] - range[0]) / tickSpacing);
-  return Math.min(maxTicks, Math.max(minTicks, estimatedTickNumber));
+  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
+  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
+  const defaultizedTickNumber = tickNumber != null ? tickNumber : Math.floor(Math.abs(range[1] - range[0]) / 50);
+  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
 function useTicks(options) {
   const {

package/esm/index.js

@@ -13,5 +13,6 @@ export * from './BarChart';
 export * from './LineChart';
 export * from './PieChart';
 export * from './ScatterChart';
+export * from './SparkLineChart';
 export * from './ChartContainer';
 export * from './ResponsiveChartContainer';

package/esm/internals/components/AxisSharedComponents.js

@@ -8,39 +8,39 @@ export const AxisRoot = styled('g', {
 })({
   [`&.${axisClasses.directionY}`]: {
     [`.${axisClasses.tickLabel}`]: {
-      alignmentBaseline: 'middle'
+      dominantBaseline: 'middle'
     },
     [`.${axisClasses.label}`]: {
-      alignmentBaseline: 'baseline',
+      dominantBaseline: 'auto',
       textAnchor: 'middle'
     }
   },
   [`&.${axisClasses.left}`]: {
     [`.${axisClasses.tickLabel}`]: {
-      alignmentBaseline: 'central',
+      dominantBaseline: 'central',
       textAnchor: 'end'
     }
   },
   [`&.${axisClasses.right}`]: {
     [`.${axisClasses.tickLabel}`]: {
-      alignmentBaseline: 'central',
+      dominantBaseline: 'central',
       textAnchor: 'start'
     }
   },
   [`&.${axisClasses.bottom}`]: {
     [`.${axisClasses.tickLabel}, .${axisClasses.label}`]: {
-      alignmentBaseline: 'hanging',
+      dominantBaseline: 'hanging',
       textAnchor: 'middle'
     }
   },
   [`&.${axisClasses.top}`]: {
     [`.${axisClasses.tickLabel}, .${axisClasses.label}`]: {
-      alignmentBaseline: 'baseline',
+      dominantBaseline: 'baseline',
       textAnchor: 'middle'
     }
   }
 });
-export const Line = styled('line', {
+export const ChartsLine = styled('line', {
   name: 'MuiChartsAxis',
   slot: 'Line',
   overridesResolver: (props, styles) => styles.line
@@ -51,7 +51,7 @@ export const Line = styled('line', {
   shapeRendering: 'crispEdges',
   strokeWidth: 1
 }));
-export const Tick = styled('line', {
+export const ChartsTick = styled('line', {
   name: 'MuiChartsAxis',
   slot: 'Tick',
   overridesResolver: (props, styles) => styles.tick
@@ -61,7 +61,7 @@ export const Tick = styled('line', {
   stroke: theme.palette.text.primary,
   shapeRendering: 'crispEdges'
 }));
-export const TickLabel = styled('text', {
+export const ChartsTickLabel = styled('text', {
   name: 'MuiChartsAxis',
   slot: 'TickLabel',
   overridesResolver: (props, styles) => styles.tickLabel
@@ -70,7 +70,7 @@ export const TickLabel = styled('text', {
 }) => _extends({}, theme.typography.caption, {
   fill: theme.palette.text.primary
 }));
-export const Label = styled('text', {
+export const ChartsLabel = styled('text', {
   name: 'MuiChartsAxis',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label

package/esm/models/index.js

@@ -1 +1,3 @@
-export * from './seriesType';
+export * from './seriesType';
+export * from './layout';
+export {};

package/hooks/useTicks.d.ts

@@ -1,11 +1,26 @@
 import { D3Scale } from '../models/axis';
-export type TickParams = {
-    maxTicks?: number;
-    minTicks?: number;
-    tickSpacing?: number;
-};
+export interface TickParams {
+    /**
+     * Maximal step between two ticks.
+     * When using time data, the value is assumed to be in ms.
+     * Not supported by categorical axis (band, points).
+     */
+    tickMaxStep?: number;
+    /**
+     * Maximal step between two ticks.
+     * When using time data, the value is assumed to be in ms.
+     * Not supported by categorical axis (band, points).
+     */
+    tickMinStep?: number;
+    /**
+     * The number of ticks. This number is not guaranted.
+     * Not supported by categorical axis (band, points).
+     */
+    tickNumber?: number;
+}
 export declare function getTicksNumber(params: TickParams & {
     range: any[];
+    domain: any[];
 }): number;
 declare function useTicks(options: {
     scale: D3Scale;

package/hooks/useTicks.js

@@ -11,13 +11,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 getTicksNumber(params) {
   const {
-    maxTicks = 999,
-    minTicks = 2,
-    tickSpacing = 50,
-    range
+    tickMaxStep,
+    tickMinStep,
+    tickNumber,
+    range,
+    domain
   } = params;
-  const estimatedTickNumber = Math.floor(Math.abs(range[1] - range[0]) / tickSpacing);
-  return Math.min(maxTicks, Math.max(minTicks, estimatedTickNumber));
+  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
+  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
+  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
+  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
 function useTicks(options) {
   const {

package/index.d.ts

@@ -13,5 +13,6 @@ export * from './BarChart';
 export * from './LineChart';
 export * from './PieChart';
 export * from './ScatterChart';
+export * from './SparkLineChart';
 export * from './ChartContainer';
 export * from './ResponsiveChartContainer';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.5
+ * @mui/x-charts v6.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -175,6 +175,17 @@ Object.keys(_ScatterChart).forEach(function (key) {
     }
   });
 });
+var _SparkLineChart = require("./SparkLineChart");
+Object.keys(_SparkLineChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SparkLineChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SparkLineChart[key];
+    }
+  });
+});
 var _ChartContainer = require("./ChartContainer");
 Object.keys(_ChartContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/components/AxisSharedComponents.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
-export declare const Line: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
-export declare const Tick: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
-export declare const TickLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGTextElementAttributes<SVGTextElement>, keyof import("react").SVGTextElementAttributes<SVGTextElement>>, {}>;
-export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGTextElementAttributes<SVGTextElement>, keyof import("react").SVGTextElementAttributes<SVGTextElement>>, {}>;
+export declare const ChartsLine: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
+export declare const ChartsTick: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
+export declare const ChartsTickLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGTextElementAttributes<SVGTextElement>, keyof import("react").SVGTextElementAttributes<SVGTextElement>>, {}>;
+export declare const ChartsLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGTextElementAttributes<SVGTextElement>, keyof import("react").SVGTextElementAttributes<SVGTextElement>>, {}>;