[charts-pro] Funnel gap keep boundary

packages/x-charts-pro/src/FunnelChart/FunnelPlot.tsx

@@ -31,11 +31,13 @@ export interface FunnelPlotProps extends FunnelPlotSlotExtension {
   ) => void;
 }
 
-const useAggregatedData = (gap: number | undefined) => {
+const useAggregatedData = (gapIn: number | undefined) => {
   const seriesData = useFunnelSeriesContext();
   const { xAxis, xAxisIds } = useXAxes();
   const { yAxis, yAxisIds } = useYAxes();
 
+  const gap = gapIn ?? 0;
+
   const allData = React.useMemo(() => {
     if (seriesData === undefined) {
       return [];
@@ -104,12 +106,12 @@ const useAggregatedData = (gap: number | undefined) => {
         ),
       );
       const minPoint = {
-        x: Math.min(...allX),
-        y: Math.min(...allY),
+        x: Math.min(...allX) + gap / 2,
+        y: Math.min(...allY) + gap / 2,
       };
       const maxPoint = {
-        x: Math.max(...allX),
-        y: Math.max(...allY),
+        x: Math.max(...allX) - gap / 2,
+        y: Math.max(...allY) - gap / 2,
       };
 
       return currentSeries.dataPoints.flatMap((values, dataIndex) => {

packages/x-charts-pro/src/FunnelChart/curves/pyramid.ts

@@ -144,14 +144,12 @@ export class Pyramid implements CurveGenerator {
     const isLastSection = this.position === this.sections - 1;
     const isFirstSection = this.position === 0;
 
-    if (this.gap <= 0) {
-      if (isFirstSection && this.isIncreasing) {
-        this.points = [this.points[0], this.points[1], this.points[2]];
-      }
+    if (isFirstSection && this.isIncreasing) {
+      this.points = [this.points[0], this.points[1], this.points[2]];
+    }
 
-      if (isLastSection && !this.isIncreasing) {
-        this.points = [this.points[0], this.points[1], this.points[3]];
-      }
+    if (isLastSection && !this.isIncreasing) {
+      this.points = [this.points[0], this.points[1], this.points[3]];
     }
 
     borderRadiusPolygon(this.context, this.points, this.getBorderRadius());

packages/x-charts-pro/src/FunnelChart/seriesConfig/getRange.ts

@@ -0,0 +1,13 @@
+import { CartesianRangeGetter } from '@mui/x-charts/internals';
+
+export const xRangeGetter: CartesianRangeGetter<'funnel'> = ({ drawingArea, axis }) => {
+  const range: [number, number] = [drawingArea.left, drawingArea.left + drawingArea.width];
+  const gap = (axis.gap ?? 0) / 2;
+  return axis.reverse ? [range[1] + gap, range[0] - gap] : [range[0] - gap, range[1] + gap];
+};
+
+export const yRangeGetter: CartesianRangeGetter<'funnel'> = ({ drawingArea, axis }) => {
+  const range: [number, number] = [drawingArea.top + drawingArea.height, drawingArea.top];
+  const gap = (axis.gap ?? 0) / 2;
+  return axis.reverse ? [range[1] - gap, range[0] + gap] : [range[0] + gap, range[1] - gap];
+};

packages/x-charts-pro/src/FunnelChart/seriesConfig/index.ts

@@ -5,6 +5,7 @@ import getColor from './getColor';
 import legendGetter from './legend';
 import tooltipGetter from './tooltip';
 import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
+import { xRangeGetter, yRangeGetter } from './getRange';
 
 export const seriesConfig: ChartSeriesTypeConfig<'funnel'> = {
   seriesProcessor,
@@ -13,5 +14,7 @@ export const seriesConfig: ChartSeriesTypeConfig<'funnel'> = {
   tooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
+  xRangeGetter,
+  yRangeGetter,
   getSeriesWithDefaultValues,
 };

packages/x-charts-pro/src/FunnelChart/useFunnelChartProps.ts

@@ -3,32 +3,43 @@ import { DEFAULT_MARGINS, DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-
 import { ChartsOverlayProps } from '@mui/x-charts/ChartsOverlay';
 import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsLegendSlotExtension } from '@mui/x-charts/ChartsLegend';
-import { ChartsWrapperProps, defaultizeMargin, XAxis, YAxis } from '@mui/x-charts/internals';
+import {
+  ChartsWrapperProps,
+  defaultizeMargin,
+  XAxis,
+  YAxis,
+  ChartsSeriesConfig,
+} from '@mui/x-charts/internals';
 import { ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
 import { warnOnce } from '@mui/x-internals/warning';
 import { strawberrySkyPalette } from '@mui/x-charts/colorPalettes';
 import { FunnelPlotProps } from './FunnelPlot';
 import type { FunnelChartProps } from './FunnelChart';
 import { ChartContainerProProps } from '../ChartContainerPro';
 
+type FunnelAxisExtension = ChartsSeriesConfig['funnel']['axisExtension'];
+
 function getCategoryAxisConfig(
   categoryAxis: FunnelChartProps['categoryAxis'],
   series: FunnelChartProps['series'],
   isHorizontal: boolean,
+  gap: number,
   direction: 'y',
-): YAxis;
+): YAxis & FunnelAxisExtension;
 function getCategoryAxisConfig(
   categoryAxis: FunnelChartProps['categoryAxis'],
   series: FunnelChartProps['series'],
   isHorizontal: boolean,
+  gap: number,
   direction: 'x',
-): XAxis;
+): XAxis & FunnelAxisExtension;
 function getCategoryAxisConfig<D extends 'x' | 'y' = 'x' | 'y'>(
   categoryAxis: FunnelChartProps['categoryAxis'],
   series: FunnelChartProps['series'],
   isHorizontal: boolean,
+  gap: number,
   direction: D,
-): XAxis | YAxis {
+): (XAxis & FunnelAxisExtension) | (YAxis & FunnelAxisExtension) {
   const maxSeriesLength = Math.max(...series.map((s) => (s.data ?? []).length), 0);
   const maxSeriesValue = Array.from({ length: maxSeriesLength }, (_, index) =>
     series.reduce((a, s) => a + (s.data?.[index]?.value ?? 0), 0),
@@ -60,6 +71,7 @@ function getCategoryAxisConfig<D extends 'x' | 'y' = 'x' | 'y'>(
   // If the scaleType is not defined or is 'band', our job is simple.
   if (!categoryAxis?.scaleType || categoryAxis.scaleType === 'band') {
     return {
+      gap,
       categoryGapRatio: 0,
       // Use the categories as the domain if they are defined.
       data: categoryAxis?.categories
@@ -83,6 +95,7 @@ function getCategoryAxisConfig<D extends 'x' | 'y' = 'x' | 'y'>(
   ];
 
   return {
+    gap,
     domainLimit: 'strict',
     tickLabelPlacement: 'middle',
     tickInterval: tickValues,
@@ -139,11 +152,11 @@ export const useFunnelChartProps = (props: FunnelChartProps) => {
   } as const;
 
   const xAxis = isHorizontal
-    ? getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'x')
+    ? getCategoryAxisConfig(categoryAxis, series, isHorizontal, gap ?? 0, 'x')
     : valueAxisConfig;
   const yAxis = isHorizontal
     ? valueAxisConfig
-    : getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'y');
+    : getCategoryAxisConfig(categoryAxis, series, isHorizontal, gap ?? 0, 'y');
 
   const chartContainerProps: ChartContainerProProps<'funnel'> = {
     ...rest,

packages/x-charts-pro/src/typeOverloads/modules.ts

@@ -32,6 +32,13 @@ declare module '@mui/x-charts/internals' {
       itemIdentifier: FunnelItemIdentifier;
       valueType: MakeRequired<FunnelValueType, 'id' | 'color'>;
       axisType: 'cartesian';
+      axisExtension: {
+        /**
+         * The gap, in pixels, between funnel sections.
+         * @default 0
+         */
+        gap?: number;
+      };
     };
   }
 

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.ts

@@ -17,26 +17,14 @@ import { getTickNumber, scaleTickNumberByRange } from '../../../ticks';
 import { getScale } from '../../../getScale';
 import { zoomScaleRange } from './zoom';
 import { getAxisExtremum } from './getAxisExtremum';
+import { getAxisRange } from './getAxisRange';
 import type { ChartDrawingArea } from '../../../../hooks';
 import { ChartSeriesConfig } from '../../models/seriesConfig';
 import { ComputedAxisConfig, DefaultizedZoomOptions } from './useChartCartesianAxis.types';
 import { ProcessedSeries } from '../../corePlugins/useChartSeries/useChartSeries.types';
 import { GetZoomAxisFilters, ZoomData } from './zoom.types';
 import { getAxisTriggerTooltip } from './getAxisTriggerTooltip';
 
-function getRange(
-  drawingArea: ChartDrawingArea,
-  axisDirection: 'x' | 'y', // | 'rotation' | 'radius',
-  axis: AxisConfig<ScaleName, any, ChartsAxisProps>,
-): [number, number] {
-  const range: [number, number] =
-    axisDirection === 'x'
-      ? [drawingArea.left, drawingArea.left + drawingArea.width]
-      : [drawingArea.top + drawingArea.height, drawingArea.top];
-
-  return axis.reverse ? [range[1], range[0]] : range;
-}
-
 const isDateData = (data?: readonly any[]): data is Date[] => data?.[0] instanceof Date;
 
 function createDateFormatter(
@@ -111,15 +99,12 @@ export function computeAxisValue<T extends ChartSeriesType>({
     const zoomOption = zoomOptions?.[axis.id];
     const zoom = zoomMap?.get(axis.id);
     const zoomRange: [number, number] = zoom ? [zoom.start, zoom.end] : [0, 100];
-    const range = getRange(drawingArea, axisDirection, axis);
-
-    const [minData, maxData] = getAxisExtremum(
-      axis,
+    const range = getAxisRange(
+      drawingArea,
       axisDirection,
+      axis,
       seriesConfig as ChartSeriesConfig<CartesianChartSeriesType>,
-      axisIndex,
       formattedSeries,
-      zoom === undefined && !zoomOption ? getFilters : undefined, // Do not apply filtering if zoom is already defined.
     );
 
     const triggerTooltip = !axis.ignoreTooltip && axisIdsTriggeringTooltip.has(axis.id);
@@ -191,6 +176,15 @@ export function computeAxisValue<T extends ChartSeriesType>({
 
     const domainLimit = axis.domainLimit ?? 'nice';
 
+    const [minData, maxData] = getAxisExtremum(
+      axis,
+      axisDirection,
+      seriesConfig as ChartSeriesConfig<CartesianChartSeriesType>,
+      axisIndex,
+      formattedSeries,
+      zoom === undefined && !zoomOption ? getFilters : undefined, // Do not apply filtering if zoom is already defined.
+    );
+
     const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
 
     if (typeof domainLimit === 'function') {

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisRange.ts

@@ -0,0 +1,75 @@
+import type { AxisConfig } from '../../../../models';
+import type { CartesianChartSeriesType } from '../../../../models/seriesType/config';
+import type { ChartSeriesConfig } from '../../models/seriesConfig';
+import type { ProcessedSeries } from '../../corePlugins/useChartSeries/useChartSeries.types';
+import type {
+  CartesianRangeGetter,
+  CartesianRangeGetterResult,
+} from '../../models/seriesConfig/cartesianRangeGetter.types';
+import type { ChartDrawingArea } from '../../../../hooks/useDrawingArea';
+
+const defaultGetRangeX: CartesianRangeGetter<any> = ({ drawingArea, axis }) => {
+  const range: [number, number] = [drawingArea.left, drawingArea.left + drawingArea.width];
+  return axis.reverse ? [range[1], range[0]] : range;
+};
+
+const defaultGetRangeY: CartesianRangeGetter<any> = ({ drawingArea, axis }) => {
+  const range: [number, number] = [drawingArea.top + drawingArea.height, drawingArea.top];
+  return axis.reverse ? [range[1], range[0]] : range;
+};
+
+const axisRangeCallback = <TSeriesType extends CartesianChartSeriesType>(
+  acc: CartesianRangeGetterResult,
+  chartType: TSeriesType,
+  axis: AxisConfig,
+  axisDirection: 'x' | 'y',
+  seriesConfig: ChartSeriesConfig<TSeriesType>,
+  formattedSeries: ProcessedSeries<TSeriesType>,
+  drawingArea: ChartDrawingArea,
+): CartesianRangeGetterResult => {
+  const getter =
+    axisDirection === 'x'
+      ? (seriesConfig[chartType].xRangeGetter ?? defaultGetRangeX)
+      : (seriesConfig[chartType].yRangeGetter ?? defaultGetRangeY);
+  const series = formattedSeries[chartType]?.series ?? {};
+
+  const [minChartTypeData, maxChartTypeData] = (getter as CartesianRangeGetter<TSeriesType>)?.({
+    axis,
+    drawingArea,
+    series,
+  }) ?? [Infinity, -Infinity];
+
+  const [minData, maxData] = acc;
+
+  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+};
+
+export const getAxisRange = <T extends CartesianChartSeriesType>(
+  drawingArea: ChartDrawingArea,
+  axisDirection: 'x' | 'y',
+  axis: AxisConfig,
+  seriesConfig: ChartSeriesConfig<T>,
+  formattedSeries: ProcessedSeries<T>,
+) => {
+  const charTypes = Object.keys(seriesConfig);
+
+  const ranges = charTypes.reduce<CartesianRangeGetterResult>(
+    (acc, charType) =>
+      axisRangeCallback(
+        acc,
+        charType as T,
+        axis,
+        axisDirection,
+        seriesConfig,
+        formattedSeries,
+        drawingArea,
+      ),
+    [Infinity, -Infinity],
+  );
+
+  if (Number.isNaN(ranges[0]) || Number.isNaN(ranges[1])) {
+    return [Infinity, -Infinity];
+  }
+
+  return ranges;
+};

packages/x-charts/src/internals/plugins/models/seriesConfig/cartesianRangeGetter.types.ts

@@ -0,0 +1,20 @@
+import type {
+  CartesianChartSeriesType,
+  ChartSeriesDefaultized,
+  ChartsSeriesConfig,
+} from '../../../../models/seriesType/config';
+import type { AxisConfig } from '../../../../models/axis';
+import type { ChartDrawingArea } from '../../../../hooks/useDrawingArea';
+import type { SeriesId } from '../../../../models/seriesType/common';
+
+export type CartesianRangeGetterParams<TSeriesType extends CartesianChartSeriesType> = {
+  axis: AxisConfig & (ChartsSeriesConfig[TSeriesType] extends { axisExtension: infer T } ? T : {});
+  drawingArea: ChartDrawingArea;
+  series: Record<SeriesId, ChartSeriesDefaultized<TSeriesType>>;
+};
+
+export type CartesianRangeGetterResult = [number, number];
+
+export type CartesianRangeGetter<TSeriesType extends CartesianChartSeriesType> = (
+  params: CartesianRangeGetterParams<TSeriesType>,
+) => CartesianRangeGetterResult;

packages/x-charts/src/internals/plugins/models/seriesConfig/index.ts

@@ -1,5 +1,6 @@
 export * from './colorProcessor.types';
 export * from './cartesianExtremumGetter.types';
+export * from './cartesianRangeGetter.types';
 export * from './polarExtremumGetter.types';
 export * from './seriesConfig.types';
 export * from './seriesProcessor.types';

packages/x-charts/src/internals/plugins/models/seriesConfig/seriesConfig.types.ts

@@ -6,6 +6,7 @@ import type {
 } from '../../../../models/seriesType/config';
 import type { ColorProcessor } from './colorProcessor.types';
 import type { CartesianExtremumGetter } from './cartesianExtremumGetter.types';
+import type { CartesianRangeGetter } from './cartesianRangeGetter.types';
 import type { LegendGetter } from './legendGetter.types';
 import type { AxisTooltipGetter, TooltipGetter } from './tooltipGetter.types';
 import { PolarExtremumGetter } from './polarExtremumGetter.types';
@@ -21,6 +22,8 @@ export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
   ? {
       xExtremumGetter: CartesianExtremumGetter<TSeriesType>;
       yExtremumGetter: CartesianExtremumGetter<TSeriesType>;
+      xRangeGetter?: CartesianRangeGetter<TSeriesType>;
+      yRangeGetter?: CartesianRangeGetter<TSeriesType>;
       axisTooltipGetter?: AxisTooltipGetter<TSeriesType, 'x' | 'y'>;
     }
   : {}) &