@mui/x-charts-pro 8.0.0-alpha.8 → 8.0.0-beta.0

package/FunnelChart/useFunnelChartProps.js

@@ -0,0 +1,168 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFunnelChartProps = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _constants = require("@mui/x-charts/constants");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _internals = require("@mui/x-charts/internals");
+var _warning = require("@mui/x-internals/warning");
+const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef"];
+function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
+  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));
+  if (process.env.NODE_ENV !== 'production') {
+    if ((categoryAxis?.position === 'left' || categoryAxis?.position === 'right') && isHorizontal || (categoryAxis?.position === 'top' || categoryAxis?.position === 'bottom') && !isHorizontal) {
+      (0, _warning.warnOnce)([`MUI X: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
+    }
+  }
+  const side = isHorizontal ? 'bottom' : 'left';
+  const categoryValues = (0, _extends2.default)({
+    id: direction === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY
+  }, categoryAxis, categoryAxis?.size ? {
+    [isHorizontal ? 'height' : 'width']: categoryAxis.size
+  } : {}, {
+    position: categoryAxis?.position ?? (categoryAxis?.categories ? side : 'none')
+  });
+
+  // If the scaleType is not defined or is 'band', our job is simple.
+  if (!categoryAxis?.scaleType || categoryAxis.scaleType === 'band') {
+    return (0, _extends2.default)({
+      scaleType: 'band',
+      categoryGapRatio: 0,
+      // Use the categories as the domain if they are defined.
+      data: categoryAxis?.categories ? categoryAxis.categories :
+      // Otherwise we just need random data to create the band scale.
+      Array.from({
+        length: maxSeriesLength
+      }, (_, index) => index),
+      tickLabelPlacement: 'middle'
+    }, categoryValues);
+  }
+
+  // If the scaleType is other than 'band', we have to do some magic.
+  // First we need to calculate the tick values additively and in reverse order.
+  const tickValues = [...maxSeriesValue.toReversed().map((_, i, arr) => arr.slice(0, i).reduce((a, value) => a + value, 0)),
+  // We add the total value of the series as the last tick value
+  maxSeriesValue.reduce((a, value) => a + value, 0)];
+  return (0, _extends2.default)({
+    scaleType: categoryAxis.scaleType,
+    domainLimit: 'strict',
+    tickLabelPlacement: 'middle',
+    tickInterval: tickValues,
+    // No need to show the first tick label
+    tickLabelInterval: (_, i) => i !== 0,
+    // We trick the valueFormatter to show the category values.
+    // By using the index of the tickValues array we can get the category value.
+    valueFormatter: value => `${categoryAxis.categories?.toReversed()[tickValues.findIndex(v => v === value) - 1]}`
+  }, categoryValues);
+}
+
+/**
+ * A helper function that extracts FunnelChartProps from the input props
+ * and returns an object with props for the children components of FunnelChart.
+ *
+ * @param props The input props for FunnelChart
+ * @returns An object with props for the children components of FunnelChart
+ */
+const useFunnelChartProps = props => {
+  const {
+      categoryAxis,
+      series,
+      width,
+      height,
+      margin: marginProps,
+      colors,
+      sx,
+      children,
+      slots,
+      slotProps,
+      loading,
+      onItemClick,
+      highlightedItem,
+      onHighlightChange,
+      className,
+      axisHighlight,
+      apiRef
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const margin = (0, _internals.defaultizeMargin)(marginProps, _constants.DEFAULT_MARGINS);
+  const id = (0, _useId.default)();
+  const clipPathId = `${id}-clip-path`;
+  const isHorizontal = series.some(s => s.layout === 'horizontal');
+  const valueAxisConfig = {
+    id: isHorizontal ? _constants.DEFAULT_Y_AXIS_KEY : _constants.DEFAULT_X_AXIS_KEY,
+    scaleType: 'linear',
+    domainLimit: 'strict',
+    position: 'none'
+  };
+  const xAxis = isHorizontal ? getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'x') : valueAxisConfig;
+  const yAxis = isHorizontal ? valueAxisConfig : getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'y');
+  const chartContainerProps = (0, _extends2.default)({}, rest, {
+    series: series.map(s => (0, _extends2.default)({
+      type: 'funnel',
+      layout: isHorizontal ? 'horizontal' : 'vertical'
+    }, s)),
+    width,
+    height,
+    margin,
+    colors,
+    xAxis: [xAxis],
+    yAxis: [yAxis],
+    sx,
+    highlightedItem,
+    onHighlightChange,
+    className,
+    apiRef
+  });
+  const funnelPlotProps = {
+    onItemClick,
+    slots,
+    slotProps
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const chartsAxisProps = {
+    slots,
+    slotProps
+  };
+  const legendProps = {
+    slots,
+    slotProps
+  };
+  const clipPathGroupProps = {
+    clipPath: `url(#${clipPathId})`
+  };
+  const clipPathProps = {
+    id: clipPathId
+  };
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
+  const axisHighlightProps = (0, _extends2.default)({}, axisHighlight);
+  return {
+    chartContainerProps,
+    funnelPlotProps,
+    overlayProps,
+    chartsAxisProps,
+    legendProps,
+    clipPathGroupProps,
+    clipPathProps,
+    chartsWrapperProps,
+    axisHighlightProps,
+    children
+  };
+};
+exports.useFunnelChartProps = useFunnelChartProps;

package/Heatmap/Heatmap.d.ts

@@ -3,55 +3,55 @@ import { MakeOptional } from '@mui/x-internals/types';
 import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
 import { ChartsAxisSlots, ChartsAxisSlotProps, ChartsXAxisProps, ChartsYAxisProps, AxisConfig } from '@mui/x-charts/internals';
-import { ChartsOnAxisClickHandlerProps } from '@mui/x-charts/ChartsOnAxisClickHandler';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
-import { ChartContainerProProps } from '../ChartContainerPro';
-import { HeatmapSeriesType } from '../models/seriesType/heatmap';
-import { HeatmapTooltipProps } from './HeatmapTooltip';
-import { HeatmapItemSlotProps, HeatmapItemSlots } from './HeatmapItem';
+import { ChartContainerProProps } from "../ChartContainerPro/index.js";
+import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
+import { HeatmapTooltipProps } from "./HeatmapTooltip.js";
+import { HeatmapItemSlotProps, HeatmapItemSlots } from "./HeatmapItem.js";
+import { HeatmapPluginsSignatures } from "./Heatmap.plugins.js";
 export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots {
-    /**
-     * Custom component for the tooltip popper.
-     * @default ChartsTooltipRoot
-     */
-    tooltip?: React.ElementType<HeatmapTooltipProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<HeatmapTooltipProps>;
 }
 export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps {
-    tooltip?: Partial<HeatmapTooltipProps>;
+  tooltip?: Partial<HeatmapTooltipProps>;
 }
-export interface HeatmapProps extends Omit<ChartContainerProProps, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'zoom' | 'onZoomChange' | 'skipAnimation'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
-    /**
-     * The configuration of the x-axes.
-     * If not provided, a default axis config is used.
-     * An array of [[AxisConfig]] objects.
-     */
-    xAxis: MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id' | 'scaleType'>[];
-    /**
-     * The configuration of the y-axes.
-     * If not provided, a default axis config is used.
-     * An array of [[AxisConfig]] objects.
-     */
-    yAxis: MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id' | 'scaleType'>[];
-    /**
-     * The series to display in the bar chart.
-     * An array of [[HeatmapSeriesType]] objects.
-     */
-    series: MakeOptional<HeatmapSeriesType, 'type'>[];
-    /**
-     * The configuration of the tooltip.
-     * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-     */
-    tooltip?: ChartsTooltipProps;
-    /**
-     * Overridable component slots.
-     * @default {}
-     */
-    slots?: HeatmapSlots;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     */
-    slotProps?: HeatmapSlotProps;
+export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: Readonly<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id' | 'scaleType'>[]>;
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: Readonly<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id' | 'scaleType'>[]>;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[HeatmapSeriesType]] objects.
+   */
+  series: Readonly<MakeOptional<HeatmapSeriesType, 'type'>[]>;
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   */
+  tooltip?: ChartsTooltipProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapSlotProps;
 }
 declare const Heatmap: React.ForwardRefExoticComponent<HeatmapProps & React.RefAttributes<SVGSVGElement>>;
-export { Heatmap };
+export { Heatmap };