@mui/x-charts-pro 8.5.1 → 8.5.2

package/FunnelChart/curves/step.js

@@ -37,7 +37,7 @@ 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;
@@ -86,20 +86,6 @@ class Step {
         y: index === 1 || index === 2 ? (0, _utils.max)(allY) : (0, _utils.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)
-      };
-    });
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
   }
 }

package/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/FunnelChart/funnelAxisPlugin/computeAxisValue.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.computeAxisValue = computeAxisValue;
+exports.yRangeGetter = exports.xRangeGetter = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
+var _internals = require("@mui/x-charts/internals");
+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]];
+};
+exports.xRangeGetter = xRangeGetter;
+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]];
+};
+exports.yRangeGetter = yRangeGetter;
+function getRange(drawingArea, axisDirection, axis, removedSpace = 0) {
+  return axisDirection === 'x' ? xRangeGetter(drawingArea, axis.reverse, removedSpace) : yRangeGetter(drawingArea, axis.reverse, removedSpace);
+}
+function computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis: allAxis,
+  seriesConfig,
+  axisDirection,
+  gap
+}) {
+  if (allAxis === undefined) {
+    return {
+      axis: {},
+      axisIds: []
+    };
+  }
+  const axisIdsTriggeringTooltip = (0, _internals.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] = (0, _internals.getAxisExtremum)(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
+    const triggerTooltip = !axis.ignoreTooltip && axisIdsTriggeringTooltip.has(axis.id);
+    const data = axis.data ?? [];
+    if ((0, _internals.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] = (0, _extends2.default)({
+        offset: 0,
+        height: 0,
+        categoryGapRatio: 0,
+        barGapRatio: 0,
+        triggerTooltip
+      }, axis, {
+        data,
+        scale: (0, _d3Scale.scaleBand)(axis.data, scaleRange).paddingInner(gap / step).paddingOuter(0),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _internals.getOrdinalColorScale)((0, _extends2.default)({
+          values: axis.data
+        }, axis.colorMap)) : (0, _internals.getColorScale)(axis.colorMap))
+      });
+      if ((0, _internals.isDateData)(axis.data)) {
+        const dateFormatter = (0, _internals.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 = (0, _internals.getTickNumber)((0, _extends2.default)({}, axis, {
+      range,
+      domain: axisExtremums
+    }));
+    const tickNumber = (0, _internals.scaleTickNumberByRange)(rawTickNumber, range);
+    const scale = (0, _internals.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] = (0, _extends2.default)({
+      offset: 0,
+      height: 0,
+      triggerTooltip
+    }, axis, {
+      data,
+      scaleType: scaleType,
+      scale: finalScale.domain(domain),
+      tickNumber,
+      colorScale: axis.colorMap && (0, _internals.getColorScale)(axis.colorMap)
+    });
+  });
+  return {
+    axis: completeAxis,
+    axisIds: allAxis.map(({
+      id
+    }) => id)
+  };
+}

package/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/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -0,0 +1,173 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartFunnelAxis = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _warning = require("@mui/x-internals/warning");
+var _internals = require("@mui/x-charts/internals");
+var _useChartFunnelAxisRendering = require("./useChartFunnelAxisRendering.selectors");
+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) {
+      (0, _warning.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 = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
+  const isInteractionEnabled = (0, _internals.useSelector)(store, _internals.selectorChartsInteractionIsInitialized);
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      funnel: {
+        gap: gap ?? 0
+      },
+      cartesianAxis: (0, _extends2.default)({}, prev.cartesianAxis, {
+        x: (0, _internals.defaultizeXAxis)(xAxis, dataset),
+        y: (0, _internals.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 = (0, _internals.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
+      } = (0, _useChartFunnelAxisRendering.selectorChartXAxis)(store.value);
+      const {
+        axis: yAxisWithScale,
+        axisIds: yAxisIds
+      } = (0, _useChartFunnelAxisRendering.selectorChartYAxis)(store.value);
+      const processedSeries = (0, _internals.selectorChartSeriesProcessed)(store.value);
+      const usedXAxis = xAxisIds[0];
+      const usedYAxis = yAxisIds[0];
+      let dataIndex = null;
+      let isXAxis = false;
+      const svgPoint = (0, _internals.getSVGPoint)(element, event);
+      const xIndex = (0, _internals.getCartesianAxisIndex)(xAxisWithScale[usedXAxis], svgPoint.x);
+      isXAxis = xIndex !== -1;
+      dataIndex = isXAxis ? xIndex : (0, _internals.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 {};
+};
+exports.useChartFunnelAxis = useChartFunnelAxis;
+useChartFunnelAxis.params = {
+  xAxis: true,
+  yAxis: true,
+  gap: true,
+  dataset: true,
+  onAxisClick: true,
+  disableAxisListener: true
+};
+useChartFunnelAxis.getDefaultizedParams = ({
+  params
+}) => {
+  return (0, _extends2.default)({}, params, {
+    gap: params.gap ?? 0,
+    defaultizedXAxis: (0, _internals.defaultizeXAxis)(params.xAxis, params.dataset),
+    defaultizedYAxis: (0, _internals.defaultizeYAxis)(params.yAxis, params.dataset)
+  });
+};
+useChartFunnelAxis.getInitialState = params => {
+  return {
+    funnel: {
+      gap: params.gap ?? 0
+    },
+    cartesianAxis: {
+      x: params.defaultizedXAxis,
+      y: params.defaultizedYAxis
+    }
+  };
+};

package/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/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});