@mui/x-charts-pro 8.5.1 → 8.5.2

package/esm/FunnelChart/curves/linear.js

@@ -6,7 +6,7 @@ import { lerpX, lerpY } from "./utils.js";
 /**
  * This is a custom "linear" curve generator.
  * It draws straight lines for the 4 provided points,
- * with the option to add a gap between sections while also properly handling the border radius.
+ * with the option to properly handling the border radius.
  *
  * The implementation is based on the d3-shape linear curve generator.
  * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
@@ -42,7 +42,7 @@ export class Linear {
     this.pointShape = 'square';
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
-    this.gap = (gap ?? 0) / 2;
+    this.gap = gap ?? 0;
     this.position = position ?? 0;
     this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
@@ -113,21 +113,19 @@ export class Linear {
 
     // Add gaps where they are needed.
     this.points = this.points.map((point, index) => {
-      const slopeStart = this.points.at(index <= 1 ? 0 : 2);
-      const slopeEnd = this.points.at(index <= 1 ? 1 : 3);
+      const slopeStart = this.points.at(index <= 1 ? 0 : 3);
+      const slopeEnd = this.points.at(index <= 1 ? 1 : 2);
       if (this.isHorizontal) {
-        const yGetter = lerpY(slopeStart.x - this.gap, slopeStart.y, slopeEnd.x - this.gap, slopeEnd.y);
-        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
+        const yGetter = lerpY(slopeStart.x - this.gap, slopeStart.y, slopeEnd.x, slopeEnd.y);
         return {
-          x: xGap,
-          y: yGetter(xGap)
+          x: point.x,
+          y: yGetter(point.x)
         };
       }
-      const xGetter = lerpX(slopeStart.x, slopeStart.y - this.gap, slopeEnd.x, slopeEnd.y - this.gap);
-      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
+      const xGetter = lerpX(slopeStart.x, slopeStart.y - this.gap, slopeEnd.x, slopeEnd.y);
       return {
-        x: xGetter(yGap),
-        y: yGap
+        x: xGetter(point.y),
+        y: point.y
       };
     });
     if (this.pointShape === 'sharp') {
@@ -135,23 +133,28 @@ export class Linear {
       // Else the algorithm will break.
       const isLastSection = this.position === this.sections - 1;
       const isFirstSection = this.position === 0;
+      let firstPoint = null;
+      let secondPoint = null;
       if (isFirstSection && this.isIncreasing) {
-        this.points = [this.isHorizontal ? {
-          x: this.max.x + this.gap,
-          y: (this.max.y + this.min.y) / 2
-        } : {
-          x: (this.max.x + this.min.x) / 2,
-          y: this.max.y + this.gap
-        }, this.points[1], this.points[2]];
+        firstPoint = this.points[1];
+        secondPoint = this.points[2];
       }
       if (isLastSection && !this.isIncreasing) {
-        this.points = [this.points[0], this.isHorizontal ? {
-          x: this.max.x - this.gap,
+        firstPoint = this.points[3];
+        secondPoint = this.points[0];
+      }
+      if (firstPoint && secondPoint) {
+        this.points = [
+        // Sharp point at the start
+        this.isHorizontal ? {
+          x: this.max.x,
           y: (this.max.y + this.min.y) / 2
         } : {
           x: (this.max.x + this.min.x) / 2,
-          y: this.max.y - this.gap
-        }, this.points[3]];
+          y: this.max.y
+        },
+        // Then other points
+        firstPoint, secondPoint];
       }
     }
     borderRadiusPolygon(this.context, this.points, this.getBorderRadius());

package/esm/FunnelChart/curves/pyramid.js

@@ -97,7 +97,7 @@ export class Pyramid {
       return;
     }
 
-    // Add gaps where they are needed.
+    // Replace funnel points by pyramids ones.
     this.points = this.points.map((point, index) => {
       if (this.isHorizontal) {
         const slopeEnd = {
@@ -109,10 +109,9 @@ export class Pyramid {
           y: this.max.y
         };
         const yGetter = lerpY(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
         return {
-          x: xGap,
-          y: yGetter(xGap)
+          x: point.x,
+          y: yGetter(point.x)
         };
       }
       const slopeEnd = {
@@ -124,10 +123,9 @@ export class Pyramid {
         y: this.min.y
       } : this.min;
       const xGetter = lerpX(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
       return {
-        x: xGetter(yGap),
-        y: yGap
+        x: xGetter(point.y),
+        y: point.y
       };
     });
 
@@ -135,13 +133,11 @@ export class Pyramid {
     // Else the algorithm will break.
     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 (isLastSection && !this.isIncreasing) {
-        this.points = [this.points[0], this.points[1], this.points[3]];
-      }
+    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]];
     }
     borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
   }

package/esm/FunnelChart/curves/step-pyramid.js

@@ -37,7 +37,7 @@ export class StepPyramid {
     this.points = [];
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
-    this.gap = (gap ?? 0) / 2;
+    this.gap = gap ?? 0;
     this.position = position ?? 0;
     this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
@@ -151,25 +151,23 @@ export class StepPyramid {
       return;
     }
 
-    // Add gaps where they are needed.
+    // Replace funnel points by pyramids ones.
     this.points = this.points.map((point, index) => {
       const slopeStart = this.slopeStart(index);
       const slopeEnd = this.slopeEnd(index);
       if (this.isHorizontal) {
         const yGetter = lerpY(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
         const xInitial = this.initialX(index);
         return {
-          x: xGap,
+          x: point.x,
           y: yGetter(xInitial)
         };
       }
       const xGetter = lerpX(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
       const yInitial = this.initialY(index);
       return {
         x: xGetter(yInitial),
-        y: yGap
+        y: point.y
       };
     });
     borderRadiusPolygon(this.context, this.points, this.getBorderRadius());

package/esm/FunnelChart/curves/step.js

@@ -32,7 +32,7 @@ export class Step {
     this.points = [];
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
-    this.gap = (gap ?? 0) / 2;
+    this.gap = gap ?? 0;
     this.position = position ?? 0;
     this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
@@ -81,20 +81,6 @@ export class Step {
         y: index === 1 || index === 2 ? max(allY) : min(allY)
       };
     });
-
-    // Add gaps where they are needed.
-    this.points = this.points.map((point, index) => {
-      if (this.isHorizontal) {
-        return {
-          x: point.x + (index === 0 || index === 3 ? this.gap : -this.gap),
-          y: point.y
-        };
-      }
-      return {
-        x: point.x,
-        y: point.y + (index === 0 || index === 3 ? this.gap : -this.gap)
-      };
-    });
     borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
   }
 }

package/esm/FunnelChart/funnelAxisPlugin/computeAxisValue.d.ts

@@ -0,0 +1,25 @@
+import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
+import { ChartDrawingArea } from '@mui/x-charts/hooks';
+import { ComputedAxisConfig, ChartSeriesType, ProcessedSeries, ChartSeriesConfig, DefaultedYAxis, DefaultedXAxis } from '@mui/x-charts/internals';
+import { ChartsXAxisProps, ChartsYAxisProps } from '@mui/x-charts/models';
+export declare const xRangeGetter: (drawingArea: ChartDrawingArea, reverse?: boolean, removedSpace?: number) => [number, number];
+export declare const yRangeGetter: (drawingArea: ChartDrawingArea, reverse?: boolean, removedSpace?: number) => [number, number];
+export type ComputeResult<T extends ChartsAxisProps> = {
+  axis: ComputedAxisConfig<T>;
+  axisIds: string[];
+};
+type ComputeCommonParams<T extends ChartSeriesType = 'funnel'> = {
+  drawingArea: ChartDrawingArea;
+  formattedSeries: ProcessedSeries<T>;
+  seriesConfig: ChartSeriesConfig<T>;
+  gap: number;
+};
+export declare function computeAxisValue(options: ComputeCommonParams<'funnel'> & {
+  axis?: DefaultedYAxis[];
+  axisDirection: 'y';
+}): ComputeResult<ChartsYAxisProps>;
+export declare function computeAxisValue(options: ComputeCommonParams<'funnel'> & {
+  axis?: DefaultedXAxis[];
+  axisDirection: 'x';
+}): ComputeResult<ChartsXAxisProps>;
+export {};

package/esm/FunnelChart/funnelAxisPlugin/computeAxisValue.js

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { scaleBand } from '@mui/x-charts-vendor/d3-scale';
+import { getAxisExtremum, isBandScaleConfig, getScale, getColorScale, getOrdinalColorScale, getTickNumber, scaleTickNumberByRange, getCartesianAxisTriggerTooltip, isDateData, createDateFormatter } from '@mui/x-charts/internals';
+export const xRangeGetter = (drawingArea, reverse, removedSpace = 0) => {
+  const range = [drawingArea.left, drawingArea.left + drawingArea.width - removedSpace];
+  return reverse ? [range[1], range[0]] : [range[0], range[1]];
+};
+export const yRangeGetter = (drawingArea, reverse, removedSpace = 0) => {
+  const range = [drawingArea.top + drawingArea.height - removedSpace, drawingArea.top];
+  return reverse ? [range[1], range[0]] : [range[0], range[1]];
+};
+function getRange(drawingArea, axisDirection, axis, removedSpace = 0) {
+  return axisDirection === 'x' ? xRangeGetter(drawingArea, axis.reverse, removedSpace) : yRangeGetter(drawingArea, axis.reverse, removedSpace);
+}
+export function computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis: allAxis,
+  seriesConfig,
+  axisDirection,
+  gap
+}) {
+  if (allAxis === undefined) {
+    return {
+      axis: {},
+      axisIds: []
+    };
+  }
+  const axisIdsTriggeringTooltip = getCartesianAxisTriggerTooltip(axisDirection, seriesConfig, formattedSeries, allAxis[0].id);
+  const completeAxis = {};
+  allAxis.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
+    let range = getRange(drawingArea, axisDirection, axis);
+    const [minData, maxData] = getAxisExtremum(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
+    const triggerTooltip = !axis.ignoreTooltip && axisIdsTriggeringTooltip.has(axis.id);
+    const data = axis.data ?? [];
+    if (isBandScaleConfig(axis)) {
+      // Reverse range because ordinal scales are presented from top to bottom on y-axis
+      const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
+      const rangeSpace = Math.abs(range[1] - range[0]);
+      const N = axis.data.length;
+      const bandWidth = (rangeSpace - gap * (N - 1)) / N;
+      const step = bandWidth + gap;
+      completeAxis[axis.id] = _extends({
+        offset: 0,
+        height: 0,
+        categoryGapRatio: 0,
+        barGapRatio: 0,
+        triggerTooltip
+      }, axis, {
+        data,
+        scale: scaleBand(axis.data, scaleRange).paddingInner(gap / step).paddingOuter(0),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+          values: axis.data
+        }, axis.colorMap)) : getColorScale(axis.colorMap))
+      });
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis, scaleRange);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
+    }
+    if (axis.scaleType === 'band') {
+      return;
+    }
+    if (axis.scaleType === 'point') {
+      throw new Error('Point scale is not supported in FunnelChart. Please use band scale instead.');
+    }
+    const isHorizontal = Object.values(formattedSeries.funnel?.series ?? {}).some(s => s.layout === 'horizontal');
+    if (isHorizontal ? axisDirection === 'x' : axisDirection === 'y') {
+      // For linear scale replacing the band scale, we remove the space needed for gap from the scale range.
+      const itemNumber = formattedSeries.funnel?.series[formattedSeries.funnel.seriesOrder[0]].data.length ?? 0;
+      const spaceToRemove = gap * (itemNumber - 1);
+      range = getRange(drawingArea, axisDirection, axis, spaceToRemove);
+    }
+    const scaleType = axis.scaleType ?? 'linear';
+    const domainLimit = axis.domainLimit ?? 'nice';
+    const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
+    if (typeof domainLimit === 'function') {
+      const {
+        min,
+        max
+      } = domainLimit(minData, maxData);
+      axisExtremums[0] = min;
+      axisExtremums[1] = max;
+    }
+    const rawTickNumber = getTickNumber(_extends({}, axis, {
+      range,
+      domain: axisExtremums
+    }));
+    const tickNumber = scaleTickNumberByRange(rawTickNumber, range);
+    const scale = getScale(scaleType, axisExtremums, range);
+    const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
+    const [minDomain, maxDomain] = finalScale.domain();
+    const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
+    completeAxis[axis.id] = _extends({
+      offset: 0,
+      height: 0,
+      triggerTooltip
+    }, axis, {
+      data,
+      scaleType: scaleType,
+      scale: finalScale.domain(domain),
+      tickNumber,
+      colorScale: axis.colorMap && getColorScale(axis.colorMap)
+    });
+  });
+  return {
+    axis: completeAxis,
+    axisIds: allAxis.map(({
+      id
+    }) => id)
+  };
+}

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from '@mui/x-charts/internals';
+import { UseChartFunnelAxisSignature } from "./useChartFunnelAxis.types.js";
+export declare const useChartFunnelAxis: ChartPlugin<UseChartFunnelAxisSignature>;

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -0,0 +1,165 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
+import { getSVGPoint, getCartesianAxisIndex, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartsInteractionIsInitialized, useSelector, defaultizeXAxis, defaultizeYAxis } from '@mui/x-charts/internals';
+import { selectorChartXAxis, selectorChartYAxis } from "./useChartFunnelAxisRendering.selectors.js";
+export const useChartFunnelAxis = ({
+  params,
+  store,
+  seriesConfig,
+  svgRef,
+  instance
+}) => {
+  const {
+    xAxis,
+    yAxis,
+    dataset,
+    gap
+  } = params;
+  if (process.env.NODE_ENV !== 'production') {
+    const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
+    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
+    if (duplicates.size > 0) {
+      warnOnce([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
+    }
+  }
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const isInteractionEnabled = useSelector(store, selectorChartsInteractionIsInitialized);
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.update(prev => _extends({}, prev, {
+      funnel: {
+        gap: gap ?? 0
+      },
+      cartesianAxis: _extends({}, prev.cartesianAxis, {
+        x: defaultizeXAxis(xAxis, dataset),
+        y: defaultizeYAxis(yAxis, dataset)
+      })
+    }));
+  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store, gap]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (!isInteractionEnabled || element === null || params.disableAxisListener) {
+      return () => {};
+    }
+    const handleOut = () => {
+      instance.cleanInteraction?.();
+    };
+    const handleMove = event => {
+      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
+      const svgPoint = getSVGPoint(element, target);
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
+        instance.cleanInteraction?.();
+        return;
+      }
+      instance.setPointerCoordinate?.(svgPoint);
+    };
+    const handleDown = event => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      if ('hasPointerCapture' in target && target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+    };
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointercancel', handleOut);
+    element.addEventListener('pointerleave', handleOut);
+    return () => {
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointercancel', handleOut);
+      element.removeEventListener('pointerleave', handleOut);
+    };
+  }, [svgRef, instance, params.disableAxisListener, isInteractionEnabled]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    const onAxisClick = params.onAxisClick;
+    if (element === null || !onAxisClick) {
+      return () => {};
+    }
+    const handleMouseClick = event => {
+      event.preventDefault();
+      const {
+        axis: xAxisWithScale,
+        axisIds: xAxisIds
+      } = selectorChartXAxis(store.value);
+      const {
+        axis: yAxisWithScale,
+        axisIds: yAxisIds
+      } = selectorChartYAxis(store.value);
+      const processedSeries = selectorChartSeriesProcessed(store.value);
+      const usedXAxis = xAxisIds[0];
+      const usedYAxis = yAxisIds[0];
+      let dataIndex = null;
+      let isXAxis = false;
+      const svgPoint = getSVGPoint(element, event);
+      const xIndex = getCartesianAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
+      isXAxis = xIndex !== -1;
+      dataIndex = isXAxis ? xIndex : getCartesianAxisIndex(yAxisWithScale[usedYAxis], svgPoint.y);
+      const USED_AXIS_ID = isXAxis ? xAxisIds[0] : yAxisIds[0];
+      if (dataIndex == null || dataIndex === -1) {
+        return;
+      }
+
+      // The .data exist because otherwise the dataIndex would be null or -1.
+      const axisValue = (isXAxis ? xAxisWithScale : yAxisWithScale)[USED_AXIS_ID].data[dataIndex];
+      const seriesValues = {};
+      processedSeries.funnel?.seriesOrder.forEach(seriesId => {
+        const seriesItem = processedSeries.funnel.series[seriesId];
+        const providedXAxisId = seriesItem.xAxisId;
+        const providedYAxisId = seriesItem.yAxisId;
+        const axisKey = isXAxis ? providedXAxisId : providedYAxisId;
+        if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+          seriesValues[seriesId] = seriesItem.data[dataIndex].value;
+        }
+      });
+      onAxisClick(event, {
+        dataIndex,
+        axisValue,
+        seriesValues
+      });
+    };
+    element.addEventListener('click', handleMouseClick);
+    return () => {
+      element.removeEventListener('click', handleMouseClick);
+    };
+  }, [params.onAxisClick, svgRef, store]);
+  return {};
+};
+useChartFunnelAxis.params = {
+  xAxis: true,
+  yAxis: true,
+  gap: true,
+  dataset: true,
+  onAxisClick: true,
+  disableAxisListener: true
+};
+useChartFunnelAxis.getDefaultizedParams = ({
+  params
+}) => {
+  return _extends({}, params, {
+    gap: params.gap ?? 0,
+    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset),
+    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset)
+  });
+};
+useChartFunnelAxis.getInitialState = params => {
+  return {
+    funnel: {
+      gap: params.gap ?? 0
+    },
+    cartesianAxis: {
+      x: params.defaultizedXAxis,
+      y: params.defaultizedYAxis
+    }
+  };
+};

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.d.ts

@@ -0,0 +1,27 @@
+import { ChartPluginSignature, UseChartCartesianAxisDefaultizedParameters, UseChartCartesianAxisParameters, UseChartCartesianAxisState, UseChartInteractionSignature, UseChartSeriesSignature, ChartsAxisData } from '@mui/x-charts/internals';
+export type UseChartFunnelAxisSignature = ChartPluginSignature<{
+  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick'> & {
+    /**
+     * The gap, in pixels, between funnel sections.
+     * @default 0
+     */
+    gap?: number;
+    /**
+     * The function called for onClick events.
+     * The second argument contains information about all funnel elements at the current position.
+     * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+     * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
+     */
+    onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+  };
+  defaultizedParams: UseChartCartesianAxisDefaultizedParameters & {
+    gap: number;
+  };
+  state: Pick<UseChartCartesianAxisState, 'cartesianAxis'> & {
+    funnel: {
+      gap: number;
+    };
+  };
+  dependencies: [UseChartSeriesSignature<'funnel'>];
+  optionalDependencies: [UseChartInteractionSignature];
+}>;

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.js

@@ -0,0 +1 @@
+export {};