@mui/x-charts 8.0.0-beta.2 → 8.0.0

package/modern/BarChart/seriesConfig/seriesProcessor.js

@@ -1,73 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
-import { warnOnce } from '@mui/x-internals/warning';
-import { getStackingGroups } from "../../internals/stackSeries.js";
-import { defaultizeValueFormatter } from "../../internals/defaultizeValueFormatter.js";
-const seriesProcessor = (params, dataset) => {
-  const {
-    seriesOrder,
-    series
-  } = params;
-  const stackingGroups = getStackingGroups(params);
-
-  // Create a data set with format adapted to d3
-  const d3Dataset = dataset ?? [];
-  seriesOrder.forEach(id => {
-    const data = series[id].data;
-    if (data !== undefined) {
-      data.forEach((value, index) => {
-        if (d3Dataset.length <= index) {
-          d3Dataset.push({
-            [id]: value
-          });
-        } else {
-          d3Dataset[index][id] = value;
-        }
-      });
-    } else if (dataset === undefined) {
-      throw new Error([`MUI X: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
-    }
-  });
-  const completedSeries = {};
-  stackingGroups.forEach(stackingGroup => {
-    const {
-      ids,
-      stackingOffset,
-      stackingOrder
-    } = stackingGroup;
-    // Get stacked values, and derive the domain
-    const stackedSeries = d3Stack().keys(ids.map(id => {
-      // Use dataKey if needed and available
-      const dataKey = series[id].dataKey;
-      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-    })).value((d, key) => d[key] ?? 0) // defaultize null value to 0
-    .order(stackingOrder).offset(stackingOffset)(d3Dataset);
-    ids.forEach((id, index) => {
-      const dataKey = series[id].dataKey;
-      completedSeries[id] = _extends({
-        layout: 'vertical',
-        labelMarkType: 'square'
-      }, series[id], {
-        data: dataKey ? dataset.map(data => {
-          const value = data[dataKey];
-          if (typeof value !== 'number') {
-            if (process.env.NODE_ENV !== 'production') {
-              if (value !== null) {
-                warnOnce([`MUI X: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
-              }
-            }
-            return 0;
-          }
-          return value;
-        }) : series[id].data,
-        stackedData: stackedSeries[index].map(([a, b]) => [a, b])
-      });
-    });
-  });
-  return {
-    seriesOrder,
-    stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v == null ? '' : v.toLocaleString())
-  };
-};
-export default seriesProcessor;

package/modern/BarChart/seriesConfig/tooltip.d.ts

@@ -1,3 +0,0 @@
-import type { TooltipGetter } from '../../internals/plugins/models';
-declare const tooltipGetter: TooltipGetter<'bar'>;
-export default tooltipGetter;

package/modern/BarChart/seriesConfig/tooltip.js

@@ -1,25 +0,0 @@
-import { getLabel } from "../../internals/getLabel.js";
-const tooltipGetter = params => {
-  const {
-    series,
-    getColor,
-    identifier
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
-    return null;
-  }
-  const label = getLabel(series.label, 'tooltip');
-  const value = series.data[identifier.dataIndex];
-  const formattedValue = series.valueFormatter(value, {
-    dataIndex: identifier.dataIndex
-  });
-  return {
-    identifier,
-    color: getColor(identifier.dataIndex),
-    label,
-    value,
-    formattedValue,
-    markType: series.labelMarkType
-  };
-};
-export default tooltipGetter;

package/modern/BarChart/types.d.ts

@@ -1,23 +0,0 @@
-import type { BarSeriesType } from '../models';
-import type { SeriesId } from '../models/seriesType/common';
-export type AnimationData = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  yOrigin?: number;
-  xOrigin?: number;
-  layout: BarSeriesType['layout'];
-};
-export interface CompletedBarData extends AnimationData {
-  seriesId: SeriesId;
-  dataIndex: number;
-  color: string;
-  value: number | null;
-  maskId: string;
-}
-export interface MaskData extends AnimationData {
-  id: string;
-  hasNegative: boolean;
-  hasPositive: boolean;
-}

package/modern/BarChart/types.js

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

package/modern/BarChart/useBarChartProps.d.ts

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import type { BarChartProps } from './BarChart';
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { BarPlotProps } from "./BarPlot.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsClipPathProps } from "../ChartsClipPath/index.js";
-import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
-import { ChartsAxisProps } from "../ChartsAxis/index.js";
-import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
-import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
-import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
-import { BarChartPluginsSignatures } from "./BarChart.plugins.js";
-/**
- * A helper function that extracts BarChartProps from the input props
- * and returns an object with props for the children components of BarChart.
- *
- * @param props The input props for BarChart
- * @returns An object with props for the children components of BarChart
- */
-export declare const useBarChartProps: (props: BarChartProps) => {
-  chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-  chartContainerProps: ChartContainerProps<"bar", BarChartPluginsSignatures>;
-  barPlotProps: BarPlotProps;
-  gridProps: ChartsGridProps;
-  clipPathProps: ChartsClipPathProps;
-  clipPathGroupProps: {
-    clipPath: string;
-  };
-  overlayProps: ChartsOverlayProps;
-  chartsAxisProps: ChartsAxisProps;
-  axisHighlightProps: ChartsAxisHighlightProps;
-  legendProps: ChartsLegendSlotExtension;
-  children: React.ReactNode;
-};

package/modern/BarChart/useBarChartProps.js

@@ -1,136 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
-import * as React from 'react';
-import useId from '@mui/utils/useId';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
-import { BAR_CHART_PLUGINS } from "./BarChart.plugins.js";
-
-/**
- * A helper function that extracts BarChartProps from the input props
- * and returns an object with props for the children components of BarChart.
- *
- * @param props The input props for BarChart
- * @returns An object with props for the children components of BarChart
- */
-export const useBarChartProps = props => {
-  const {
-      xAxis,
-      yAxis,
-      series,
-      width,
-      height,
-      margin,
-      colors,
-      dataset,
-      sx,
-      axisHighlight,
-      grid,
-      children,
-      slots,
-      slotProps,
-      skipAnimation,
-      loading,
-      layout,
-      onItemClick,
-      highlightedItem,
-      onHighlightChange,
-      borderRadius,
-      barLabel,
-      className
-    } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  const id = useId();
-  const clipPathId = `${id}-clip-path`;
-  const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
-  const defaultBandXAxis = React.useMemo(() => [{
-    id: DEFAULT_X_AXIS_KEY,
-    scaleType: 'band',
-    data: Array.from({
-      length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
-    }, (_, index) => index)
-  }], [dataset, series]);
-  const defaultBandYAxis = React.useMemo(() => [{
-    id: DEFAULT_Y_AXIS_KEY,
-    scaleType: 'band',
-    data: Array.from({
-      length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
-    }, (_, index) => index)
-  }], [dataset, series]);
-  const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
-    type: 'bar'
-  }, s, {
-    layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
-  })), [hasHorizontalSeries, series]);
-  const chartContainerProps = _extends({}, rest, {
-    series: seriesWithDefault,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : defaultBandXAxis),
-    yAxis: yAxis ?? (hasHorizontalSeries ? defaultBandYAxis : undefined),
-    highlightedItem,
-    onHighlightChange,
-    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
-    className,
-    skipAnimation,
-    plugins: BAR_CHART_PLUGINS
-  });
-  const barPlotProps = {
-    onItemClick,
-    slots,
-    slotProps,
-    borderRadius,
-    barLabel
-  };
-  const gridProps = {
-    vertical: grid?.vertical,
-    horizontal: grid?.horizontal
-  };
-  const clipPathGroupProps = {
-    clipPath: `url(#${clipPathId})`
-  };
-  const clipPathProps = {
-    id: clipPathId
-  };
-  const overlayProps = {
-    slots,
-    slotProps,
-    loading
-  };
-  const chartsAxisProps = {
-    slots,
-    slotProps
-  };
-  const axisHighlightProps = _extends({}, hasHorizontalSeries ? {
-    y: 'band'
-  } : {
-    x: 'band'
-  }, axisHighlight);
-  const legendProps = {
-    slots,
-    slotProps
-  };
-  const chartsWrapperProps = {
-    sx,
-    legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction
-  };
-  return {
-    chartsWrapperProps,
-    chartContainerProps,
-    barPlotProps,
-    gridProps,
-    clipPathProps,
-    clipPathGroupProps,
-    overlayProps,
-    chartsAxisProps,
-    axisHighlightProps,
-    legendProps,
-    children
-  };
-};

package/modern/ChartContainer/ChartContainer.d.ts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { ChartSeriesType } from "../models/seriesType/config.js";
-import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
-import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
-export type ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = Omit<ChartDataProviderProps<SeriesType, TSignatures>, 'children'> & ChartsSurfaceProps;
-/**
- * It sets up the data providers as well as the `<svg>` for the chart.
- *
- * This is a combination of both the `ChartDataProvider` and `ChartsSurface` components.
- *
- * Demos:
- *
- * - [Composition](https://mui.com/x/api/charts/composition/)
- *
- * API:
- *
- * - [ChartContainer API](https://mui.com/x/api/charts/chart-container/)
- *
- * @example
- * ```jsx
- * <ChartContainer
- *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
- *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
- * >
- *    <BarPlot />
- *    <ChartsXAxis axisId="x-axis" />
- * </ChartContainer>
- * ```
- */
-declare const ChartContainer: <TSeries extends ChartSeriesType>(props: ChartContainerProps<TSeries> & {
-  ref?: React.ForwardedRef<SVGSVGElement>;
-}) => React.JSX.Element;
-export { ChartContainer };