@mui/x-charts-pro 9.0.0-alpha.0 → 9.0.0-alpha.2

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

@@ -1,174 +0,0 @@
-import { borderRadiusPolygon } from "./borderRadiusPolygon.js";
-import { lerpX, lerpY } from "./utils.js";
-
-/**
- * This is a custom "step-pyramid" curve generator.
- * It creates a step pyramid, which is a step-like shape with static lengths.
- * It has the option to add a gap between sections while also properly handling the border radius.
- */
-export class StepPyramid {
-  position = 0;
-  sections = 0;
-  isHorizontal = false;
-  isIncreasing = false;
-  gap = 0;
-  borderRadius = 0;
-  min = {
-    x: 0,
-    y: 0
-  };
-  max = {
-    x: 0,
-    y: 0
-  };
-  points = [];
-  constructor(context, {
-    isHorizontal,
-    gap,
-    position,
-    sections,
-    borderRadius,
-    min,
-    max,
-    isIncreasing
-  }) {
-    this.context = context;
-    this.isHorizontal = isHorizontal ?? false;
-    this.gap = gap ?? 0;
-    this.position = position ?? 0;
-    this.sections = sections ?? 1;
-    this.borderRadius = borderRadius ?? 0;
-    this.isIncreasing = isIncreasing ?? false;
-    this.min = min ?? {
-      x: 0,
-      y: 0
-    };
-    this.max = max ?? {
-      x: 0,
-      y: 0
-    };
-  }
-  areaStart() {}
-  areaEnd() {}
-  lineStart() {}
-  lineEnd() {}
-  getBorderRadius() {
-    if (this.gap > 0) {
-      return this.borderRadius;
-    }
-    if (this.isIncreasing) {
-      if (this.position === this.sections - 1) {
-        return this.borderRadius;
-      }
-      return [0, 0, this.borderRadius, this.borderRadius];
-    }
-    if (this.position === 0) {
-      return this.borderRadius;
-    }
-    return [this.borderRadius, this.borderRadius];
-  }
-  slopeStart(index) {
-    if (this.isIncreasing) {
-      if (this.isHorizontal) {
-        return {
-          x: this.min.x,
-          y: (this.min.y + this.max.y) / 2
-        };
-      }
-      return {
-        x: (this.min.x + this.max.x) / 2,
-        y: this.min.y
-      };
-    }
-    if (this.isHorizontal) {
-      if (index <= 1) {
-        return this.min;
-      }
-      return {
-        x: this.min.x,
-        y: this.max.y
-      };
-    }
-    if (index <= 1) {
-      return {
-        x: this.max.x,
-        y: this.min.y
-      };
-    }
-    return this.min;
-  }
-  slopeEnd(index) {
-    if (this.isIncreasing) {
-      if (this.isHorizontal) {
-        if (index <= 1) {
-          return {
-            x: this.max.x,
-            y: this.min.y
-          };
-        }
-        return this.max;
-      }
-      if (index <= 1) {
-        return this.max;
-      }
-      return {
-        x: this.min.x,
-        y: this.max.y
-      };
-    }
-    if (this.isHorizontal) {
-      return {
-        x: this.max.x,
-        y: (this.max.y + this.min.y) / 2
-      };
-    }
-    return {
-      x: (this.max.x + this.min.x) / 2,
-      y: this.max.y
-    };
-  }
-  initialX(index, points) {
-    if (this.isIncreasing) {
-      return index === 0 || index === 1 ? points.at(1).x : points.at(2).x;
-    }
-    return index === 0 || index === 1 ? points.at(0).x : points.at(3).x;
-  }
-  initialY(index, points) {
-    if (this.isIncreasing) {
-      return index === 0 || index === 1 ? points.at(1).y : points.at(2).y;
-    }
-    return index === 0 || index === 1 ? points.at(0).y : points.at(3).y;
-  }
-  processPoints(points) {
-    // Replace funnel points by pyramids ones.
-    const processedPoints = 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 xInitial = this.initialX(index, points);
-        return {
-          x: point.x,
-          y: yGetter(xInitial)
-        };
-      }
-      const xGetter = lerpX(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-      const yInitial = this.initialY(index, points);
-      return {
-        x: xGetter(yInitial),
-        y: point.y
-      };
-    });
-    return processedPoints;
-  }
-  point(xIn, yIn) {
-    this.points.push({
-      x: xIn,
-      y: yIn
-    });
-    if (this.points.length < 4) {
-      return;
-    }
-    borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
-  }
-}

package/esm/FunnelChart/curves/step.d.ts

@@ -1,36 +0,0 @@
-import { type FunnelCurveGenerator, type CurveOptions, type Point } from "./curve.types.js";
-/**
- * This is a custom "step" curve generator.
- * It is used to draw "rectangles" from 4 points without having to rework the rendering logic,
- * with the option to add a gap between sections while also properly handling the border radius.
- *
- * It takes the min and max of the x and y coordinates of the points to create a rectangle.
- *
- * The implementation is based on the d3-shape step curve generator.
- * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
- */
-export declare class Step implements FunnelCurveGenerator {
-  private context;
-  private isHorizontal;
-  private isIncreasing;
-  private gap;
-  private borderRadius;
-  private position;
-  private sections;
-  private points;
-  constructor(context: CanvasRenderingContext2D, {
-    isHorizontal,
-    gap,
-    position,
-    borderRadius,
-    isIncreasing,
-    sections
-  }: CurveOptions);
-  areaStart(): void;
-  areaEnd(): void;
-  lineStart(): void;
-  lineEnd(): void;
-  protected getBorderRadius(): number | number[];
-  processPoints(points: Point[]): Point[];
-  point(xIn: number, yIn: number): void;
-}

package/esm/FunnelChart/curves/step.js

@@ -1,85 +0,0 @@
-import { borderRadiusPolygon } from "./borderRadiusPolygon.js";
-import { max, min } from "./utils.js";
-
-/**
- * This is a custom "step" curve generator.
- * It is used to draw "rectangles" from 4 points without having to rework the rendering logic,
- * with the option to add a gap between sections while also properly handling the border radius.
- *
- * It takes the min and max of the x and y coordinates of the points to create a rectangle.
- *
- * The implementation is based on the d3-shape step curve generator.
- * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
- */
-export class Step {
-  isHorizontal = false;
-  isIncreasing = false;
-  gap = 0;
-  borderRadius = 0;
-  position = 0;
-  sections = 0;
-  points = [];
-  constructor(context, {
-    isHorizontal,
-    gap,
-    position,
-    borderRadius,
-    isIncreasing,
-    sections
-  }) {
-    this.context = context;
-    this.isHorizontal = isHorizontal ?? false;
-    this.gap = gap ?? 0;
-    this.position = position ?? 0;
-    this.sections = sections ?? 1;
-    this.borderRadius = borderRadius ?? 0;
-    this.isIncreasing = isIncreasing ?? false;
-  }
-  areaStart() {}
-  areaEnd() {}
-  lineStart() {}
-  lineEnd() {}
-  getBorderRadius() {
-    if (this.gap > 0) {
-      return this.borderRadius;
-    }
-    if (this.isIncreasing) {
-      if (this.position === this.sections - 1) {
-        return this.borderRadius;
-      }
-      return [0, 0, this.borderRadius, this.borderRadius];
-    }
-    if (this.position === 0) {
-      return this.borderRadius;
-    }
-    return [this.borderRadius, this.borderRadius];
-  }
-  processPoints(points) {
-    // Ensure we have rectangles instead of trapezoids.
-    const processedPoints = points.map((_, index) => {
-      const allX = points.map(p => p.x);
-      const allY = points.map(p => p.y);
-      if (this.isHorizontal) {
-        return {
-          x: index === 1 || index === 2 ? max(allX) : min(allX),
-          y: index <= 1 ? max(allY) : min(allY)
-        };
-      }
-      return {
-        x: index <= 1 ? min(allX) : max(allX),
-        y: index === 1 || index === 2 ? max(allY) : min(allY)
-      };
-    });
-    return processedPoints;
-  }
-  point(xIn, yIn) {
-    this.points.push({
-      x: xIn,
-      y: yIn
-    });
-    if (this.points.length < 4) {
-      return;
-    }
-    borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
-  }
-}

package/esm/FunnelChart/funnel.types.d.ts

@@ -1,158 +0,0 @@
-import { type ChartsLabelMarkProps } from '@mui/x-charts/ChartsLabel';
-import { type CommonSeriesType, type CartesianSeriesType, type CommonDefaultizedProps, type SeriesId } from '@mui/x-charts/internals';
-import { type Position } from '@mui/x-charts/models';
-import { type DefaultizedProps, type MakeRequired } from '@mui/x-internals/types';
-import { type FunnelCurveType } from "./curves/index.js";
-export type FunnelItemId = string | number;
-export type FunnelValueType = {
-  /**
-   * A unique identifier of the funnel section.
-   */
-  id?: FunnelItemId;
-  /**
-   * The value of the funnel section.
-   */
-  value: number;
-  /**
-   * The label to display on the tooltip, funnel section, or the legend. It can be a string or a function.
-   */
-  label?: string | ((location: 'tooltip' | 'legend' | 'section') => string | undefined);
-  /**
-   * The color of the funnel section
-   */
-  color?: string;
-  /**
-   * Defines the mark type for the funnel item.
-   * @default 'square'
-   */
-  labelMarkType?: ChartsLabelMarkProps['type'];
-};
-export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType, 'funnel'>, 'color' | 'colorGetter'>, CartesianSeriesType {
-  type: 'funnel';
-  /**
-   * Data associated to the funnel section.
-   */
-  data: Readonly<FunnelValueType[]>;
-  /**
-   * The label to display on the tooltip or the legend. It can be a string or a function.
-   */
-  label?: string | ((location: 'tooltip' | 'legend') => string);
-  /**
-   * Layout of the funnel.
-   * @default 'vertical'
-   */
-  layout?: 'horizontal' | 'vertical';
-  /**
-   * The type of curve to use for the line.
-   *
-   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
-   * - `linear`: A straight line between points.
-   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
-   * - `step`: A step line that creates a staircase effect.
-   * - `pyramid`: A pyramid shape that connects the points.
-   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
-   *
-   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
-   * @default 'linear'
-   */
-  curve?: FunnelCurveType;
-  /**
-   * The radius, in pixels, of the corners of the funnel sections.
-   * @default 8
-   */
-  borderRadius?: number;
-  /**
-   * The label configuration for the funnel plot.
-   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
-   *
-   * If set to `false`, the label will not be displayed.
-   * @default { vertical: 'middle', horizontal: 'center' }
-   */
-  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => FunnelLabelOptions | false) | false;
-  /**
-   * Defines if the funnel sections are filled or outlined.
-   *
-   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
-   * A `filled` funnel will have a solid fill and no stroke.
-   *
-   * @default 'filled'
-   */
-  variant?: 'filled' | 'outlined';
-  /**
-   * Controls how the funnel is drawn.
-   * Ignored on `step` and `linear-sharp` curves.
-   *
-   * This affects different curves in different ways:
-   * - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges.
-   * - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
-   *
-   * @default 'auto'
-   */
-  funnelDirection?: 'increasing' | 'decreasing' | 'auto';
-}
-/**
- * An object that allows to identify a funnel item.
- * Used for item interaction
- */
-export type FunnelItemIdentifier = {
-  type: 'funnel';
-  /**
-   * The series id of the funnel.
-   */
-  seriesId: SeriesId;
-  /**
-   * The index of the data point in the series.
-   */
-  dataIndex: number;
-};
-export type FunnelItem = {
-  /**
-   * The series id of the funnel.
-   */
-  seriesId: SeriesId;
-  /**
-   * The index of the data point in the series.
-   */
-  dataIndex: number;
-  /**
-   * The value of the data point.
-   */
-  value: number;
-};
-export interface DefaultizedFunnelSeriesType extends Omit<DefaultizedProps<FunnelSeriesType, CommonDefaultizedProps | 'layout'>, 'funnelDirection'> {
-  dataPoints: FunnelDataPoints[][];
-  data: Readonly<MakeRequired<FunnelValueType, 'id' | 'color'>[]>;
-  funnelDirection: 'increasing' | 'decreasing';
-}
-export type FunnelDataPoints = Record<'x' | 'y', number> & {
-  useBandWidth: boolean;
-  stackOffset: number;
-};
-export type FunnelLabelOptions = {
-  /**
-   * The position of the label.
-   * @default { vertical: 'middle', horizontal: 'center' }
-   */
-  position?: Position;
-  /**
-   * The text anchor of the label. Affects the horizontal alignment of the text.
-   *
-   * Default value depends on the position.
-   */
-  textAnchor?: 'start' | 'middle' | 'end';
-  /**
-   * The dominant baseline of the label. Affects the vertical alignment of the text.
-   *
-   * Default value depends on the position.
-   */
-  dominantBaseline?: 'auto' | 'baseline' | 'hanging' | 'middle' | 'central' | 'text-after-edge' | 'text-before-edge';
-  /**
-   * The offset of the label from the anchor point.
-   * If a single number is provided, the offset will be applied in both directions.
-   * @default 0
-   */
-  offset?: number | {
-    x?: number;
-    y?: number;
-  };
-};

package/esm/FunnelChart/funnelAxisPlugin/computeAxisValue.js

@@ -1,112 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { getAxisExtrema, isBandScaleConfig, isPointScaleConfig, isContinuousScaleConfig, getScale, getColorScale, getOrdinalColorScale, getTickNumber, scaleTickNumberByRange, getCartesianAxisTriggerTooltip, isDateData, createDateFormatter, getDefaultTickNumber, scaleBand } 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] = getAxisExtrema(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.data, scaleRange, axis.tickNumber);
-        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
-      }
-    }
-    if (isBandScaleConfig(axis)) {
-      return;
-    }
-    if (isPointScaleConfig(axis)) {
-      throw new Error('Point scale is not supported in FunnelChart. Please use band scale instead.');
-    }
-    if (isContinuousScaleConfig(axis)) {
-      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(axis, axisExtremums, getDefaultTickNumber(Math.abs(range[1] - range[0])));
-      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

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