From bd96dc44d320ff7465177002b47034b49b431d38 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 23 Jan 2025 22:40:50 +0100 Subject: [PATCH 1/5] Add new curves that will be useful in funnel --- packages/x-charts/src/LineChart/AreaPlot.tsx | 2 +- packages/x-charts/src/LineChart/LinePlot.tsx | 2 +- packages/x-charts/src/internals/getCurve.ts | 34 +++++++++---------- packages/x-charts/src/internals/index.ts | 1 + packages/x-charts/src/models/curve.ts | 16 +++++++++ packages/x-charts/src/models/index.ts | 1 + .../x-charts/src/models/seriesType/line.ts | 11 +----- 7 files changed, 37 insertions(+), 30 deletions(-) create mode 100644 packages/x-charts/src/models/curve.ts diff --git a/packages/x-charts/src/LineChart/AreaPlot.tsx b/packages/x-charts/src/LineChart/AreaPlot.tsx index ea2101ed33977..ad7eea30bf346 100644 --- a/packages/x-charts/src/LineChart/AreaPlot.tsx +++ b/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'; diff --git a/packages/x-charts/src/LineChart/LinePlot.tsx b/packages/x-charts/src/LineChart/LinePlot.tsx index 8f02667ac176e..e9c588a6e03ac 100644 --- a/packages/x-charts/src/LineChart/LinePlot.tsx +++ b/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'; diff --git a/packages/x-charts/src/internals/getCurve.ts b/packages/x-charts/src/internals/getCurve.ts index 73691782fb75d..1de4e5fecfef8 100644 --- a/packages/x-charts/src/internals/getCurve.ts +++ b/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; } diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index bd70fa0195249..34b8af02398ae 100644 --- a/packages/x-charts/src/internals/index.ts +++ b/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 diff --git a/packages/x-charts/src/models/curve.ts b/packages/x-charts/src/models/curve.ts new file mode 100644 index 0000000000000..7595eeb9e4faa --- /dev/null +++ b/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 = + | 'bumpY' + | 'bumpX' + | 'catmullRom' + | 'linear' + | 'monotoneX' + | 'monotoneY' + | 'natural' + | 'step' + | 'stepBefore' + | 'stepAfter'; diff --git a/packages/x-charts/src/models/index.ts b/packages/x-charts/src/models/index.ts index 1b370c0ec5fe6..b439fae7ccdab 100644 --- a/packages/x-charts/src/models/index.ts +++ b/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'; diff --git a/packages/x-charts/src/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts index e38902b34bb13..b594ba9841006 100644 --- a/packages/x-charts/src/models/seriesType/line.ts +++ b/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 { /** From de792ee3dc27dd5dd05285b4072f0ba01e36f64a Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 23 Jan 2025 22:41:09 +0100 Subject: [PATCH 2/5] small types, comments and fixes --- packages/x-charts-pro/src/hooks/useSeries.ts | 4 ++-- packages/x-charts/src/ChartsTooltip/index.ts | 1 + packages/x-charts/src/PieChart/legend.ts | 2 +- packages/x-charts/src/models/seriesType/common.ts | 2 -- packages/x-charts/src/models/seriesType/pie.ts | 3 --- 5 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/x-charts-pro/src/hooks/useSeries.ts b/packages/x-charts-pro/src/hooks/useSeries.ts index 4a997f4101119..6a150b390d983 100644 --- a/packages/x-charts-pro/src/hooks/useSeries.ts +++ b/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; seriesOrder: SeriesId[]; } | undefined heatmapSeries */ -export function useHeatmapSeries() { +export function useHeatmapSeries(): ProcessedSeries['heatmap'] { const series = useSeries(); return React.useMemo(() => series.heatmap, [series.heatmap]); diff --git a/packages/x-charts/src/ChartsTooltip/index.ts b/packages/x-charts/src/ChartsTooltip/index.ts index 5ab32ee5621e4..55b073c05ff74 100644 --- a/packages/x-charts/src/ChartsTooltip/index.ts +++ b/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'; diff --git a/packages/x-charts/src/PieChart/legend.ts b/packages/x-charts/src/PieChart/legend.ts index ac986d5593e4c..988d91509d482 100644 --- a/packages/x-charts/src/PieChart/legend.ts +++ b/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, diff --git a/packages/x-charts/src/models/seriesType/common.ts b/packages/x-charts/src/models/seriesType/common.ts index 084d3d302dd1a..897cb0746a30a 100644 --- a/packages/x-charts/src/models/seriesType/common.ts +++ b/packages/x-charts/src/models/seriesType/common.ts @@ -34,8 +34,6 @@ export type CommonSeriesType = { * 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']; }; diff --git a/packages/x-charts/src/models/seriesType/pie.ts b/packages/x-charts/src/models/seriesType/pie.ts index 50d2447ec0cfc..7c16a61dd6c04 100644 --- a/packages/x-charts/src/models/seriesType/pie.ts +++ b/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']; From aa4bbc4f250f1100459096b77bb1f7163d5e8ac2 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 23 Jan 2025 22:44:58 +0100 Subject: [PATCH 3/5] curves order and demo --- docs/data/charts/lines/InterpolationDemoNoSnap.js | 2 ++ docs/data/charts/lines/lines.md | 2 +- packages/x-charts/src/SparkLineChart/SparkLineChart.tsx | 2 ++ packages/x-charts/src/models/curve.ts | 6 +++--- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/data/charts/lines/InterpolationDemoNoSnap.js b/docs/data/charts/lines/InterpolationDemoNoSnap.js index 4d7df7b365c81..3bfe4b212850b 100644 --- a/docs/data/charts/lines/InterpolationDemoNoSnap.js +++ b/docs/data/charts/lines/InterpolationDemoNoSnap.js @@ -15,6 +15,8 @@ const curveTypes = [ 'step', 'stepBefore', 'stepAfter', + 'bumpY', + 'bumpX', ]; function getExample(curveType) { diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md index e8d0d21dad17d..65d4ee9b52d30 100644 --- a/docs/data/charts/lines/lines.md +++ b/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. diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index 84cd7abbf773a..9002fba05a45a 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -246,6 +246,8 @@ SparkLineChart.propTypes = { * @default 'linear' */ curve: PropTypes.oneOf([ + 'bumpX', + 'bumpY', 'catmullRom', 'linear', 'monotoneX', diff --git a/packages/x-charts/src/models/curve.ts b/packages/x-charts/src/models/curve.ts index 7595eeb9e4faa..2f23da3eb0583 100644 --- a/packages/x-charts/src/models/curve.ts +++ b/packages/x-charts/src/models/curve.ts @@ -4,8 +4,6 @@ * [line interpolation](https://mui.com/x/react-charts/lines/#interpolation). */ export type CurveType = - | 'bumpY' - | 'bumpX' | 'catmullRom' | 'linear' | 'monotoneX' @@ -13,4 +11,6 @@ export type CurveType = | 'natural' | 'step' | 'stepBefore' - | 'stepAfter'; + | 'stepAfter' + | 'bumpY' + | 'bumpX'; From 5727676b4f540772cea7409dd780d600a25a160e Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 23 Jan 2025 22:46:02 +0100 Subject: [PATCH 4/5] scripts --- docs/pages/x/api/charts/charts-tooltip.json | 8 ++++++++ docs/translations/api-docs/charts/bar-series-type.json | 2 +- .../api-docs/charts/charts-tooltip/charts-tooltip.json | 3 ++- docs/translations/api-docs/charts/line-series-type.json | 2 +- docs/translations/api-docs/charts/pie-series-type.json | 2 +- .../translations/api-docs/charts/scatter-series-type.json | 2 +- scripts/x-charts-pro.exports.json | 2 ++ scripts/x-charts.exports.json | 2 ++ 8 files changed, 18 insertions(+), 5 deletions(-) diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json index f89a6742ab279..28bfe8def78d9 100644 --- a/docs/pages/x/api/charts/charts-tooltip.json +++ b/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", diff --git a/docs/translations/api-docs/charts/bar-series-type.json b/docs/translations/api-docs/charts/bar-series-type.json index d84b4ba782c5a..85d4b7bb80767 100644 --- a/docs/translations/api-docs/charts/bar-series-type.json +++ b/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.

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." + "description": "Defines the mark type for the series.

There is a default mark type for each series type." }, "layout": { "description": "Layout of the bars. All bar should have the same layout." }, "stack": { diff --git a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json index 4f1aba6c8bbe0..15fde34e93ec8 100644 --- a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json +++ b/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." } } diff --git a/docs/translations/api-docs/charts/line-series-type.json b/docs/translations/api-docs/charts/line-series-type.json index ec4c420030425..69dee736f27b4 100644 --- a/docs/translations/api-docs/charts/line-series-type.json +++ b/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.

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." + "description": "Defines the mark type for the series.

There is a default mark type for each series type." }, "shape": { "description": "The shape of the mark elements.
Using 'circle' renders a &lt;circle /&gt; element, while all other options render a &lt;path /&gt; instead. The path causes a small decrease in performance." diff --git a/docs/translations/api-docs/charts/pie-series-type.json b/docs/translations/api-docs/charts/pie-series-type.json index 6624fb549e8de..dd4beb0e9d038 100644 --- a/docs/translations/api-docs/charts/pie-series-type.json +++ b/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.
Can be a number (in px) or a string with a percentage such as '50%'.
The '100%' is the maximal radius that fit into the drawing area." }, "labelMarkType": { - "description": "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." + "description": "Defines the mark type for the series.

There is a default mark type for each series type." }, "outerRadius": { "description": "The radius between circle center and the end of the arc.
Can be a number (in px) or a string with a percentage such as '50%'.
The '100%' is the maximal radius that fit into the drawing area." diff --git a/docs/translations/api-docs/charts/scatter-series-type.json b/docs/translations/api-docs/charts/scatter-series-type.json index 8a20f810ad506..457a1e475c103 100644 --- a/docs/translations/api-docs/charts/scatter-series-type.json +++ b/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.

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." + "description": "Defines the mark type for the series.

There is a default mark type for each series type." }, "markerSize": { "description": "" }, "valueFormatter": { diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json index a68e0179c5c42..54e200bee21e8 100644 --- a/scripts/x-charts-pro.exports.json +++ b/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" }, diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index d23e021e2ab54..f3604ccec625d 100644 --- a/scripts/x-charts.exports.json +++ b/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" }, From cce3d0e5ea7563c0272d6c1577f59f217120ebbf Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Mon, 27 Jan 2025 12:33:42 +0100 Subject: [PATCH 5/5] remove bumpx/y from demo --- .../data/charts/lines/InterpolationDemoNoSnap.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/data/charts/lines/InterpolationDemoNoSnap.js b/docs/data/charts/lines/InterpolationDemoNoSnap.js index 3bfe4b212850b..4fa6a16c8d556 100644 --- a/docs/data/charts/lines/InterpolationDemoNoSnap.js +++ b/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,19 +8,23 @@ 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', 'step', 'stepBefore', 'stepAfter', - 'bumpY', - 'bumpX', ]; +/** + * @param {import('@mui/x-charts/models').CurveType} curveType + */ function getExample(curveType) { return ``; } + export default function InterpolationDemoNoSnap() { - const [curveType, setCurveType] = React.useState('linear'); + const [curveType, setCurveType] = React.useState(curveTypes[0]); return ( @@ -38,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) => (