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

package/esm/FunnelChart/useFunnelChartProps.js

@@ -1,154 +0,0 @@
-'use client';
-
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef", "gap"];
-import { DEFAULT_MARGINS, DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
-import { defaultizeMargin } from '@mui/x-charts/internals';
-import { warnOnce } from '@mui/x-internals/warning';
-import { strawberrySkyPalette } from '@mui/x-charts/colorPalettes';
-import { FUNNEL_CHART_PLUGINS } from "./FunnelChart.plugins.js";
-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) {
-      warnOnce([`MUI X Charts: 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 = _extends({
-    id: direction === 'x' ? DEFAULT_X_AXIS_KEY : 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 _extends({
-      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, {
-      scaleType: 'band'
-    });
-  }
-
-  // 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 _extends({
-    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
- */
-export const useFunnelChartProps = props => {
-  const {
-      categoryAxis,
-      series,
-      width,
-      height,
-      margin: marginProps,
-      colors,
-      sx,
-      children,
-      slots,
-      slotProps,
-      loading,
-      onItemClick,
-      highlightedItem,
-      onHighlightChange,
-      className,
-      axisHighlight,
-      apiRef
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const margin = defaultizeMargin(marginProps, DEFAULT_MARGINS);
-  const isHorizontal = series.some(s => s.layout === 'horizontal');
-  const valueAxisConfig = {
-    id: isHorizontal ? DEFAULT_Y_AXIS_KEY : 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 = _extends({}, other, {
-    series: series.map(s => _extends({
-      type: 'funnel',
-      layout: isHorizontal ? 'horizontal' : 'vertical'
-    }, s)),
-    width,
-    height,
-    margin,
-    colors: colors ?? strawberrySkyPalette,
-    xAxis: [xAxis],
-    yAxis: [yAxis],
-    sx,
-    highlightedItem,
-    onHighlightChange,
-    className,
-    apiRef,
-    plugins: FUNNEL_CHART_PLUGINS
-  });
-  const funnelPlotProps = {
-    onItemClick,
-    slots,
-    slotProps
-  };
-  const overlayProps = {
-    slots,
-    slotProps,
-    loading
-  };
-  const chartsAxisProps = {
-    slots,
-    slotProps
-  };
-  const legendProps = {
-    slots,
-    slotProps
-  };
-  const chartsWrapperProps = {
-    sx,
-    legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction,
-    hideLegend: props.hideLegend ?? false
-  };
-  const axisHighlightProps = _extends({}, axisHighlight);
-  return {
-    chartContainerProps,
-    funnelPlotProps,
-    overlayProps,
-    chartsAxisProps,
-    legendProps,
-    chartsWrapperProps,
-    axisHighlightProps,
-    children
-  };
-};

package/esm/Heatmap/FocusedHeatmapCell.js

@@ -1,29 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { useTheme } from '@mui/material/styles';
-import { useFocusedItem, useXScale, useYScale } from "../hooks/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function FocusedHeatmapCell(props) {
-  const focusedItem = useFocusedItem();
-  const theme = useTheme();
-  const xScale = useXScale();
-  const yScale = useYScale();
-  if (!focusedItem || focusedItem.type !== 'heatmap') {
-    return null;
-  }
-  const xDomain = xScale.domain();
-  const yDomain = yScale.domain();
-  const {
-    xIndex,
-    yIndex
-  } = focusedItem;
-  return /*#__PURE__*/_jsx("rect", _extends({
-    x: xScale(xDomain[xIndex]),
-    y: yScale(yDomain[yIndex]),
-    width: xScale.bandwidth(),
-    height: yScale.bandwidth(),
-    fill: "none",
-    stroke: (theme.vars ?? theme).palette.text.primary,
-    strokeWidth: 2,
-    pointerEvents: "none"
-  }, props));
-}

package/esm/Heatmap/Heatmap.d.ts

@@ -1,88 +0,0 @@
-import * as React from 'react';
-import { type MakeOptional } from '@mui/x-internals/types';
-import { type ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
-import { type ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
-import { type ChartsAxisSlots, type ChartsAxisSlotProps, type XAxis, type YAxis } from '@mui/x-charts/internals';
-import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
-import { type ChartsLegendSlotProps, type ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
-import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.js";
-import { type ChartContainerProProps } from "../ChartContainerPro/index.js";
-import { type HeatmapSeriesType } from "../models/seriesType/heatmap.js";
-import { type HeatmapTooltipProps } from "./HeatmapTooltip/index.js";
-import { type HeatmapItemSlotProps, type HeatmapItemSlots } from "./HeatmapItem.js";
-import { type HeatmapPluginSignatures } from "./Heatmap.plugins.js";
-import { type ChartsToolbarProSlotProps, type ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
-export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {
-  /**
-   * Custom component for the tooltip.
-   * @default ChartsTooltipRoot
-   */
-  tooltip?: React.ElementType<HeatmapTooltipProps>;
-  /**
-   * Custom component for the legend.
-   * @default ContinuousColorLegendProps
-   */
-  legend?: ChartsLegendSlots['legend'];
-}
-export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {
-  tooltip?: Partial<HeatmapTooltipProps>;
-}
-export type HeatmapSeries = MakeOptional<HeatmapSeriesType, 'type'>;
-export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'axesGap' | 'skipAnimation' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange' | 'seriesConfig' | 'onAxisClick'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
-  /**
-   * The function called for onClick events.
-   * The second argument contains information about all line/bar elements at the current mouse 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.
-   *
-   * @deprecated Use `onItemClick` instead to get access to both x- and y-axis values.
-   */
-  onAxisClick?: ChartContainerProProps<'heatmap', HeatmapPluginSignatures>['onAxisClick'];
-  /**
-   * The configuration of the x-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  xAxis: Readonly<MakeOptional<XAxis<'band'>, 'scaleType'>[]>;
-  /**
-   * The configuration of the y-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  yAxis: Readonly<MakeOptional<YAxis<'band'>, 'scaleType'>[]>;
-  /**
-   * The series to display in the bar chart.
-   * An array of [[HeatmapSeries]] objects.
-   */
-  series: Readonly<HeatmapSeries[]>;
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   */
-  tooltip?: ChartsTooltipProps;
-  /**
-   * If `true`, the legend is not rendered.
-   */
-  hideLegend?: boolean;
-  /**
-   * If true, shows the default chart toolbar.
-   * @default false
-   */
-  showToolbar?: boolean;
-  /**
-   * The border radius of the heatmap cells in pixels.
-   */
-  borderRadius?: number;
-  /**
-   * 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 };