[charts] Add new bumpX and bumpY curve options (mui#16318)

docs/data/charts/lines/InterpolationDemoNoSnap.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
@@ -6,9 +8,12 @@ import { LineChart } from '@mui/x-charts/LineChart';
 
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
+/**
+ * @type {import('@mui/x-charts/models').CurveType[]}
+ */
 const curveTypes = [
-  'catmullRom',
   'linear',
+  'catmullRom',
   'monotoneX',
   'monotoneY',
   'natural',
@@ -17,6 +22,9 @@ const curveTypes = [
   'stepAfter',
 ];
 
+/**
+ * @param {import('@mui/x-charts/models').CurveType} curveType
+ */
 function getExample(curveType) {
   return `<LineChart
   series={[
@@ -26,8 +34,9 @@ function getExample(curveType) {
   {/* ... */}
 />`;
 }
+
 export default function InterpolationDemoNoSnap() {
-  const [curveType, setCurveType] = React.useState('linear');
+  const [curveType, setCurveType] = React.useState(curveTypes[0]);
 
   return (
     <Box sx={{ p: 2, width: 1, maxWidth: 600 }}>
@@ -36,6 +45,7 @@ export default function InterpolationDemoNoSnap() {
         label="interpolation method"
         value={curveType}
         sx={{ minWidth: 200, mb: 2 }}
+        // @ts-expect-error
         onChange={(event) => setCurveType(event.target.value)}
       >
         {curveTypes.map((curve) => (

docs/data/charts/lines/lines.md

@@ -168,7 +168,7 @@ For now, ordinal config is not supported for line chart.
 ### Interpolation
 
 The interpolation between data points can be customized by the `curve` property.
-This property expects one of the following string values, corresponding to the interpolation method: `'catmullRom'`, `'linear'`, `'monotoneX'`, `'monotoneY'`, `'natural'`, `'step'`, `'stepBefore'`, `'stepAfter'`.
+This property expects one of the following string values, corresponding to the interpolation method: `'catmullRom'`, `'linear'`, `'monotoneX'`, `'monotoneY'`, `'natural'`, `'step'`, `'stepBefore'`, `'stepAfter'`, `'bumpX'` and `'bumpY'`.
 
 This series property adds the option to control the interpolation of a series.
 Different series could even have different interpolations.

docs/pages/x/api/charts/charts-tooltip.json

@@ -79,6 +79,14 @@
     "import { ChartsTooltip } from '@mui/x-charts';",
     "import { ChartsTooltip } from '@mui/x-charts-pro';"
   ],
+  "slots": [
+    {
+      "name": "tooltip",
+      "description": "Custom component for the tooltip popper.",
+      "default": "ChartsTooltipRoot",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "axisValueCell",

docs/translations/api-docs/charts/bar-series-type.json

@@ -11,7 +11,7 @@
       "description": "The label to display on the tooltip or the legend. It can be a string or a function."
     },
     "labelMarkType": {
-      "description": "Defines the mark type for the series.<br /><br />There is a default mark type for each series type.<br /><br />It allows custom values which will be passed to the mark component if it was customized."
+      "description": "Defines the mark type for the series.<br /><br />There is a default mark type for each series type."
     },
     "layout": { "description": "Layout of the bars. All bar should have the same layout." },
     "stack": {

docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json

@@ -67,5 +67,6 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the valueCell element"
     }
-  }
+  },
+  "slotDescriptions": { "tooltip": "Custom component for the tooltip popper." }
 }

docs/translations/api-docs/charts/line-series-type.json

@@ -24,7 +24,7 @@
       "description": "The label to display on the tooltip or the legend. It can be a string or a function."
     },
     "labelMarkType": {
-      "description": "Defines the mark type for the series.<br /><br />There is a default mark type for each series type.<br /><br />It allows custom values which will be passed to the mark component if it was customized."
+      "description": "Defines the mark type for the series.<br /><br />There is a default mark type for each series type."
     },
     "shape": {
       "description": "The shape of the mark elements.<br />Using &#39;circle&#39; renders a <code>&amp;lt;circle /&amp;gt;</code> element, while all other options render a <code>&amp;lt;path /&amp;gt;</code> instead. The path causes a small decrease in performance."

docs/translations/api-docs/charts/pie-series-type.json

@@ -27,7 +27,7 @@
       "description": "The radius between circle center and the beginning of the arc.<br />Can be a number (in px) or a string with a percentage such as &#39;50%&#39;.<br />The &#39;100%&#39; is the maximal radius that fit into the drawing area."
     },
     "labelMarkType": {
-      "description": "Defines the mark type for the series.<br /><br />There is a default mark type for each series type.<br /><br />It allows custom values which will be passed to the mark component if it was customized."
+      "description": "Defines the mark type for the series.<br /><br />There is a default mark type for each series type."
     },
     "outerRadius": {
       "description": "The radius between circle center and the end of the arc.<br />Can be a number (in px) or a string with a percentage such as &#39;50%&#39;.<br />The &#39;100%&#39; is the maximal radius that fit into the drawing area."

docs/translations/api-docs/charts/scatter-series-type.json

@@ -16,7 +16,7 @@
       "description": "The label to display on the tooltip or the legend. It can be a string or a function."
     },
     "labelMarkType": {
-      "description": "Defines the mark type for the series.<br /><br />There is a default mark type for each series type.<br /><br />It allows custom values which will be passed to the mark component if it was customized."
+      "description": "Defines the mark type for the series.<br /><br />There is a default mark type for each series type."
     },
     "markerSize": { "description": "" },
     "valueFormatter": {

packages/x-charts-pro/src/hooks/useSeries.ts

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { useSeries } from '@mui/x-charts/internals';
+import { useSeries, ProcessedSeries } from '@mui/x-charts/internals';
 
 /**
  * Get access to the internal state of heatmap series.
@@ -9,7 +9,7 @@ import { useSeries } from '@mui/x-charts/internals';
  * - seriesOrder: the array of series ids.
  * @returns { series: Record<SeriesId, DefaultizedHeatmapSeriesType>; seriesOrder: SeriesId[]; } | undefined heatmapSeries
  */
-export function useHeatmapSeries() {
+export function useHeatmapSeries(): ProcessedSeries['heatmap'] {
   const series = useSeries();
 
   return React.useMemo(() => series.heatmap, [series.heatmap]);

packages/x-charts/src/ChartsTooltip/index.ts

@@ -11,3 +11,4 @@ export * from './ChartsTooltipTable';
 export * from './useItemTooltip';
 export * from './useAxisTooltip';
 export { useMouseTracker } from './utils';
+export * from './ChartTooltip.types';

packages/x-charts/src/LineChart/AreaPlot.tsx

@@ -11,7 +11,7 @@ import {
   AreaElementSlots,
 } from './AreaElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
-import getCurveFactory from '../internals/getCurve';
+import { getCurveFactory } from '../internals/getCurve';
 import { isBandScale } from '../internals/isBandScale';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { LineItemIdentifier } from '../models/seriesType/line';

packages/x-charts/src/LineChart/LinePlot.tsx

@@ -11,7 +11,7 @@ import {
   LineElementSlots,
 } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
-import getCurveFactory from '../internals/getCurve';
+import { getCurveFactory } from '../internals/getCurve';
 import { isBandScale } from '../internals/isBandScale';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { LineItemIdentifier } from '../models/seriesType/line';

packages/x-charts/src/PieChart/legend.ts

@@ -13,7 +13,7 @@ const legendGetter: LegendGetter<'pie'> = (params) => {
       }
 
       acc.push({
-        markType: series[seriesId].labelMarkType,
+        markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         id: item.id,
         seriesId,
         color: item.color,

packages/x-charts/src/SparkLineChart/SparkLineChart.tsx

@@ -246,6 +246,8 @@ SparkLineChart.propTypes = {
    * @default 'linear'
    */
   curve: PropTypes.oneOf([
+    'bumpX',
+    'bumpY',
     'catmullRom',
     'linear',
     'monotoneX',

packages/x-charts/src/internals/getCurve.ts

@@ -7,35 +7,33 @@ import {
   curveStep,
   curveStepAfter,
   curveStepBefore,
+  curveBumpX,
+  curveBumpY,
 } from '@mui/x-charts-vendor/d3-shape';
-import { CurveType } from '../models/seriesType/line';
+import { CurveType } from '../models/curve';
 
-export default function getCurveFactory(curveType?: CurveType) {
+export function getCurveFactory(curveType?: CurveType) {
   switch (curveType) {
-    case 'catmullRom': {
+    case 'catmullRom':
       return curveCatmullRom.alpha(0.5);
-    }
-    case 'linear': {
+    case 'linear':
       return curveLinear;
-    }
-    case 'monotoneX': {
+    case 'monotoneX':
       return curveMonotoneX;
-    }
-    case 'monotoneY': {
+    case 'monotoneY':
       return curveMonotoneY;
-    }
-    case 'natural': {
+    case 'natural':
       return curveNatural;
-    }
-    case 'step': {
+    case 'step':
       return curveStep;
-    }
-    case 'stepBefore': {
+    case 'stepBefore':
       return curveStepBefore;
-    }
-    case 'stepAfter': {
+    case 'stepAfter':
       return curveStepAfter;
-    }
+    case 'bumpY':
+      return curveBumpY;
+    case 'bumpX':
+      return curveBumpX;
     default:
       return curveMonotoneX;
   }

packages/x-charts/src/internals/index.ts

@@ -34,6 +34,7 @@ export * from './getSVGPoint';
 export * from './isDefined';
 export { unstable_cleanupDOM } from './domUtils';
 export * from './getScale';
+export * from './getCurve';
 
 // contexts
 

packages/x-charts/src/models/curve.ts

@@ -0,0 +1,16 @@
+/**
+ * The type of curve to use for the line.
+ * Read more about curves at
+ * [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+ */
+export type CurveType =
+  | 'catmullRom'
+  | 'linear'
+  | 'monotoneX'
+  | 'monotoneY'
+  | 'natural'
+  | 'step'
+  | 'stepBefore'
+  | 'stepAfter'
+  | 'bumpY'
+  | 'bumpX';

packages/x-charts/src/models/index.ts

@@ -11,3 +11,4 @@ export type {
 
 // Utils shared across the X packages
 export type { PropsFromSlot } from '@mui/x-internals/slots';
+export type { CurveType } from './curve';

packages/x-charts/src/models/seriesType/common.ts

@@ -34,8 +34,6 @@ export type CommonSeriesType<TValue> = {
    * Defines the mark type for the series.
    *
    * There is a default mark type for each series type.
-   *
-   * It allows custom values which will be passed to the mark component if it was customized.
    */
   labelMarkType?: ChartsLabelMarkProps['type'];
 };

packages/x-charts/src/models/seriesType/line.ts

@@ -7,16 +7,7 @@ import {
   SeriesId,
   StackableSeriesType,
 } from './common';
-
-export type CurveType =
-  | 'catmullRom'
-  | 'linear'
-  | 'monotoneX'
-  | 'monotoneY'
-  | 'natural'
-  | 'step'
-  | 'stepBefore'
-  | 'stepAfter';
+import { CurveType } from '../curve';
 
 export interface ShowMarkParams<AxisValue = number | Date> {
   /**

packages/x-charts/src/models/seriesType/pie.ts

@@ -18,9 +18,6 @@ export type PieValueType = {
   color?: string;
   /**
    * Defines the mark type for the pie item.
-   *
-   * It allows custom values which will be passed to the mark component if it was customized.
-   *
    * @default 'circle'
    */
   labelMarkType?: ChartsLabelMarkProps['type'];

scripts/x-charts-pro.exports.json

@@ -117,6 +117,8 @@
   { "name": "ChartsTooltipPaper", "kind": "Variable" },
   { "name": "ChartsTooltipProps", "kind": "Interface" },
   { "name": "ChartsTooltipRow", "kind": "Variable" },
+  { "name": "ChartsTooltipSlotProps", "kind": "Interface" },
+  { "name": "ChartsTooltipSlots", "kind": "Interface" },
   { "name": "ChartsTooltipTable", "kind": "Variable" },
   { "name": "ChartsVoronoiHandler", "kind": "Function" },
   { "name": "ChartsVoronoiHandlerProps", "kind": "TypeAlias" },

scripts/x-charts.exports.json

@@ -113,6 +113,8 @@
   { "name": "ChartsTooltipPaper", "kind": "Variable" },
   { "name": "ChartsTooltipProps", "kind": "Interface" },
   { "name": "ChartsTooltipRow", "kind": "Variable" },
+  { "name": "ChartsTooltipSlotProps", "kind": "Interface" },
+  { "name": "ChartsTooltipSlots", "kind": "Interface" },
   { "name": "ChartsTooltipTable", "kind": "Variable" },
   { "name": "ChartsVoronoiHandler", "kind": "Function" },
   { "name": "ChartsVoronoiHandlerProps", "kind": "TypeAlias" },