@mui/x-charts 6.0.0-alpha.0

package/esm/context/CartesianContextProvider.js

@@ -0,0 +1,221 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { scaleBand, scalePoint } from 'd3-scale';
+import PropTypes from 'prop-types';
+import { getExtremumX as getBarExtremumX, getExtremumY as getBarExtremumY } from '../BarChart/extremums';
+import { getExtremumX as getScatterExtremumX, getExtremumY as getScatterExtremumY } from '../ScatterChart/extremums';
+import { getExtremumX as getLineExtremumX, getExtremumY as getLineExtremumY } from '../LineChart/extremums';
+import { getScale } from '../hooks/useScale';
+import { DrawingContext } from './DrawingProvider';
+import { SeriesContext } from './SeriesContextProvider';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+import { getTicksNumber } from '../hooks/useTicks';
+import { jsx as _jsx } from "react/jsx-runtime";
+// TODO: those might be better placed in a distinct file
+const xExtremumGetters = {
+  bar: getBarExtremumX,
+  scatter: getScatterExtremumX,
+  line: getLineExtremumX
+};
+const yExtremumGetters = {
+  bar: getBarExtremumY,
+  scatter: getScatterExtremumY,
+  line: getLineExtremumY
+};
+export const CartesianContext = /*#__PURE__*/React.createContext({
+  xAxis: {},
+  yAxis: {},
+  xAxisIds: [],
+  yAxisIds: []
+});
+function CartesianContextProvider({
+  xAxis,
+  yAxis,
+  children
+}) {
+  const formattedSeries = React.useContext(SeriesContext);
+  const drawingArea = React.useContext(DrawingContext);
+  const value = React.useMemo(() => {
+    var _xAxis$map, _yAxis$map;
+    const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis) => {
+      var _ref, _formattedSeries$char;
+      const getter = getters[chartType];
+      const series = (_ref = (_formattedSeries$char = formattedSeries[chartType]) == null ? void 0 : _formattedSeries$char.series) != null ? _ref : {};
+      const [minChartTypeData, maxChartTypeData] = getter({
+        series,
+        axis,
+        isDefaultAxis
+      });
+      const [minData, maxData] = acc;
+      if (minData === null || maxData === null) {
+        return [minChartTypeData, maxChartTypeData];
+      }
+      if (minChartTypeData === null || maxChartTypeData === null) {
+        return [minData, maxData];
+      }
+      return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+    };
+    const getAxisExtremum = (axis, getters, isDefaultAxis) => {
+      const charTypes = Object.keys(getters);
+      return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis), [null, null]);
+    };
+    const allXAxis = [...((_xAxis$map = xAxis == null ? void 0 : xAxis.map((axis, index) => _extends({
+      id: `deaultized-x-axis-${index}`
+    }, axis))) != null ? _xAxis$map : []),
+    // Allows to specify an axis with id=DEFAULT_X_AXIS_KEY
+    ...(xAxis === undefined || xAxis.findIndex(({
+      id
+    }) => id === DEFAULT_X_AXIS_KEY) === -1 ? [{
+      id: DEFAULT_X_AXIS_KEY,
+      scaleType: 'linear'
+    }] : [])];
+    const completedXAxis = {};
+    allXAxis.forEach((axis, axisIndex) => {
+      var _axis$scaleType, _axis$min, _axis$max, _axis$min2, _axis$max2;
+      const isDefaultAxis = axisIndex === 0;
+      const [minData, maxData] = getAxisExtremum(axis, xExtremumGetters, isDefaultAxis);
+      const scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
+      const range = [drawingArea.left, drawingArea.left + drawingArea.width];
+      if (scaleType === 'band') {
+        completedXAxis[axis.id] = _extends({}, axis, {
+          scaleType,
+          scale: scaleBand(axis.data, range),
+          ticksNumber: axis.data.length
+        });
+        return;
+      }
+      if (scaleType === 'point') {
+        completedXAxis[axis.id] = _extends({}, axis, {
+          scaleType,
+          scale: scalePoint(axis.data, range),
+          ticksNumber: axis.data.length
+        });
+        return;
+      }
+      const extremums = [(_axis$min = axis.min) != null ? _axis$min : minData, (_axis$max = axis.max) != null ? _axis$max : maxData];
+      const ticksNumber = getTicksNumber(_extends({}, axis, {
+        range
+      }));
+      const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
+      const niceDomain = niceScale.domain();
+      const domain = [(_axis$min2 = axis.min) != null ? _axis$min2 : niceDomain[0], (_axis$max2 = axis.max) != null ? _axis$max2 : niceDomain[1]];
+      completedXAxis[axis.id] = _extends({}, axis, {
+        scaleType,
+        scale: niceScale.domain(domain),
+        ticksNumber
+      });
+    });
+    const allYAxis = [...((_yAxis$map = yAxis == null ? void 0 : yAxis.map((axis, index) => _extends({
+      id: `deaultized-y-axis-${index}`
+    }, axis))) != null ? _yAxis$map : []), ...(yAxis === undefined || yAxis.findIndex(({
+      id
+    }) => id === DEFAULT_Y_AXIS_KEY) === -1 ? [{
+      id: DEFAULT_Y_AXIS_KEY,
+      scaleType: 'linear'
+    }] : [])];
+    const completedYAxis = {};
+    allYAxis.forEach((axis, axisIndex) => {
+      var _axis$scaleType2, _axis$min3, _axis$max3, _axis$min4, _axis$max4;
+      const isDefaultAxis = axisIndex === 0;
+      const [minData, maxData] = getAxisExtremum(axis, yExtremumGetters, isDefaultAxis);
+      const range = [drawingArea.top + drawingArea.height, drawingArea.top];
+      const scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
+      if (scaleType === 'band') {
+        completedYAxis[axis.id] = _extends({}, axis, {
+          scaleType,
+          scale: scaleBand(axis.data, range),
+          ticksNumber: axis.data.length
+        });
+        return;
+      }
+      if (scaleType === 'point') {
+        completedYAxis[axis.id] = _extends({}, axis, {
+          scaleType,
+          scale: scalePoint(axis.data, range),
+          ticksNumber: axis.data.length
+        });
+        return;
+      }
+      const extremums = [(_axis$min3 = axis.min) != null ? _axis$min3 : minData, (_axis$max3 = axis.max) != null ? _axis$max3 : maxData];
+      const ticksNumber = getTicksNumber(_extends({}, axis, {
+        range
+      }));
+      const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
+      const niceDomain = niceScale.domain();
+      const domain = [(_axis$min4 = axis.min) != null ? _axis$min4 : niceDomain[0], (_axis$max4 = axis.max) != null ? _axis$max4 : niceDomain[1]];
+      completedYAxis[axis.id] = _extends({}, axis, {
+        scaleType,
+        scale: niceScale.domain(domain),
+        ticksNumber
+      });
+    });
+    return {
+      xAxis: completedXAxis,
+      yAxis: completedYAxis,
+      xAxisIds: allXAxis.map(({
+        id
+      }) => id),
+      yAxisIds: allYAxis.map(({
+        id
+      }) => id)
+    };
+  }, [drawingArea.height, drawingArea.left, drawingArea.top, drawingArea.width, formattedSeries, xAxis, yAxis]);
+
+  // @ts-ignore
+  return /*#__PURE__*/_jsx(CartesianContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  xAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.number,
+    maxTicks: PropTypes.number,
+    min: PropTypes.number,
+    minTicks: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
+    valueFormatter: PropTypes.func
+  })),
+  yAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.number,
+    maxTicks: PropTypes.number,
+    min: PropTypes.number,
+    minTicks: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
+    valueFormatter: PropTypes.func
+  }))
+} : void 0;
+export { CartesianContextProvider };

package/esm/context/DrawingProvider.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useChartDimensions from '../hooks/useChartDimensions';
+
+/**
+ * Defines the area in which it is possible to draw the charts
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DrawingContext = /*#__PURE__*/React.createContext({
+  top: 0,
+  left: 0,
+  height: 300,
+  width: 400
+});
+export const SVGContext = /*#__PURE__*/React.createContext({
+  current: null
+});
+function DrawingProvider({
+  width,
+  height,
+  margin,
+  svgRef,
+  children
+}) {
+  const drawingArea = useChartDimensions(width, height, margin);
+  return /*#__PURE__*/_jsx(SVGContext.Provider, {
+    value: svgRef,
+    children: /*#__PURE__*/_jsx(DrawingContext.Provider, {
+      value: drawingArea,
+      children: children
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? DrawingProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  height: PropTypes.number.isRequired,
+  margin: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  svgRef: PropTypes.shape({
+    current: PropTypes.object
+  }).isRequired,
+  width: PropTypes.number.isRequired
+} : void 0;
+export { DrawingProvider };

package/esm/context/HighlightProvider.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultScope = {
+  highlighted: 'none',
+  faded: 'none'
+};
+export const HighlighContext = /*#__PURE__*/React.createContext({
+  item: null,
+  scope: defaultScope,
+  dispatch: () => null
+});
+const dataReducer = (prevState, action) => {
+  switch (action.type) {
+    case 'enterItem':
+      return _extends({}, prevState, {
+        item: action.item,
+        scope: _extends({}, defaultScope, action.scope)
+      });
+    case 'leaveItem':
+      if (prevState.item === null || Object.keys(action.item).some(key => action.item[key] !== prevState.item[key])) {
+        // The item is already something else
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        item: null
+      });
+    default:
+      return prevState;
+  }
+};
+export function HighlightProvider({
+  children
+}) {
+  const [data, dispatch] = React.useReducer(dataReducer, {
+    item: null,
+    scope: defaultScope
+  });
+  const value = React.useMemo(() => _extends({}, data, {
+    dispatch
+  }), [data]);
+  return /*#__PURE__*/_jsx(HighlighContext.Provider, {
+    value: value,
+    children: children
+  });
+}

package/esm/context/InteractionProvider.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const InteractionContext = /*#__PURE__*/React.createContext({
+  item: null,
+  axis: {
+    x: null,
+    y: null
+  },
+  dispatch: () => null
+});
+const dataReducer = (prevState, action) => {
+  switch (action.type) {
+    case 'enterItem':
+      return _extends({}, prevState, {
+        item: action.data
+      });
+    case 'leaveItem':
+      if (prevState.item === null || Object.keys(action.data).some(key => action.data[key] !== prevState.item[key])) {
+        // The item is already something else
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        item: null
+      });
+    case 'updateAxis':
+      return _extends({}, prevState, {
+        axis: action.data
+      });
+    default:
+      return prevState;
+  }
+};
+export function InteractionProvider({
+  children
+}) {
+  const [data, dispatch] = React.useReducer(dataReducer, {
+    item: null,
+    axis: {
+      x: null,
+      y: null
+    }
+  });
+  const value = React.useMemo(() => _extends({}, data, {
+    dispatch
+  }), [data]);
+  return /*#__PURE__*/_jsx(InteractionContext.Provider, {
+    value: value,
+    children: children
+  });
+}

package/esm/context/SeriesContextProvider.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import barSeriesFormatter from '../BarChart/formatter';
+import scatterSeriesFormatter from '../ScatterChart/formatter';
+import lineSeriesFormatter from '../LineChart/formatter';
+import { defaultizeColor } from '../internals/defaultizeColor';
+import { blueberryTwilightPalette } from '../colorPalettes';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SeriesContext = /*#__PURE__*/React.createContext({});
+const seriesTypeFormatter = {
+  bar: barSeriesFormatter,
+  scatter: scatterSeriesFormatter,
+  line: lineSeriesFormatter
+};
+const formatSeries = (series, colors) => {
+  // Group series by type
+  const seriesGroups = {};
+  series.forEach((seriesData, seriesIndex) => {
+    var _seriesGroups$type;
+    const {
+      id = `auto-generated-id-${seriesIndex}`,
+      type
+    } = seriesData;
+    if (seriesGroups[type] === undefined) {
+      seriesGroups[type] = {
+        series: {},
+        seriesOrder: []
+      };
+    }
+    if (((_seriesGroups$type = seriesGroups[type]) == null ? void 0 : _seriesGroups$type.series[id]) !== undefined) {
+      throw new Error(`MUI: series' id "${id}" is not unique`);
+    }
+    seriesGroups[type].series[id] = _extends({
+      id
+    }, defaultizeColor(seriesData, seriesIndex, colors));
+    seriesGroups[type].seriesOrder.push(id);
+  });
+  const formattedSeries = {};
+  // Apply formater on a type group
+  Object.keys(seriesTypeFormatter).forEach(type => {
+    if (seriesGroups[type] !== undefined) {
+      var _seriesTypeFormatter$, _seriesTypeFormatter$2;
+      formattedSeries[type] = (_seriesTypeFormatter$ = (_seriesTypeFormatter$2 = seriesTypeFormatter[type]) == null ? void 0 : _seriesTypeFormatter$2.call(seriesTypeFormatter, seriesGroups[type])) != null ? _seriesTypeFormatter$ : seriesGroups[type];
+    }
+  });
+  return formattedSeries;
+};
+export function SeriesContextProvider({
+  series,
+  colors = blueberryTwilightPalette,
+  children
+}) {
+  const theme = useTheme();
+  const formattedSeries = React.useMemo(() => formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors), [series, colors, theme.palette.mode]);
+  return /*#__PURE__*/_jsx(SeriesContext.Provider, {
+    value: formattedSeries,
+    children: children
+  });
+}

package/esm/context/index.js

@@ -0,0 +1,2 @@
+export { CartesianContextProvider } from './CartesianContextProvider';
+export { DrawingProvider } from './DrawingProvider';

package/esm/hooks/useAxisEvents.js

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { InteractionContext } from '../context/InteractionProvider';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { SVGContext, DrawingContext } from '../context/DrawingProvider';
+import { isBandScale } from './useScale';
+export const useAxisEvents = disableAxisListener => {
+  const svgRef = React.useContext(SVGContext);
+  const {
+    width,
+    height,
+    top,
+    left
+  } = React.useContext(DrawingContext);
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = React.useContext(CartesianContext);
+  const {
+    dispatch
+  } = React.useContext(InteractionContext);
+  const usedXAxis = xAxisIds[0];
+  const usedYAxis = yAxisIds[0];
+
+  // Use a ref to avoid rerendering on every mousemove event.
+  const mousePosition = React.useRef({
+    x: -1,
+    y: -1
+  });
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || disableAxisListener) {
+      return () => {};
+    }
+    const getUpdateY = y => {
+      if (usedYAxis === null) {
+        return null;
+      }
+      const {
+        scale: yScale,
+        data: yAxisData
+      } = yAxis[usedYAxis];
+      if (!isBandScale(yScale)) {
+        return {
+          value: yScale.invert(y)
+        };
+      }
+      const dataIndex = Math.floor((y - yScale.range()[0]) / yScale.step());
+      if (dataIndex < 0 || dataIndex >= yAxisData.length) {
+        return null;
+      }
+      return {
+        index: dataIndex,
+        value: yAxisData[dataIndex]
+      };
+    };
+    const getUpdateX = x => {
+      if (usedXAxis === null) {
+        return null;
+      }
+      const {
+        scale: xScale,
+        data: xAxisData
+      } = xAxis[usedXAxis];
+      if (!isBandScale(xScale)) {
+        const value = xScale.invert(x);
+        const closestIndex = xAxisData == null ? void 0 : xAxisData.findIndex((v, index) => {
+          if (v > value) {
+            // @ts-ignore
+            if (index === 0 || Math.abs(value - v) <= Math.abs(value - xAxisData[index - 1])) {
+              return true;
+            }
+          }
+          if (v <= value) {
+            if (index === xAxisData.length - 1 ||
+            // @ts-ignore
+            Math.abs(value - v) < Math.abs(value - xAxisData[index + 1])) {
+              return true;
+            }
+          }
+          return false;
+        });
+        return {
+          value: closestIndex !== undefined && closestIndex >= 0 ? xAxisData[closestIndex] : value,
+          index: closestIndex
+        };
+      }
+      const dataIndex = xScale.bandwidth() === 0 ? Math.floor((x - xScale.range()[0] + xScale.step() / 2) / xScale.step()) : Math.floor((x - xScale.range()[0]) / xScale.step());
+      if (dataIndex < 0 || dataIndex >= xAxisData.length) {
+        return null;
+      }
+      return {
+        index: dataIndex,
+        value: xAxisData[dataIndex]
+      };
+    };
+    const handleMouseOut = () => {
+      mousePosition.current = {
+        x: -1,
+        y: -1
+      };
+      dispatch({
+        type: 'updateAxis',
+        data: {
+          x: null,
+          y: null
+        }
+      });
+    };
+    const handleMouseMove = event => {
+      mousePosition.current = {
+        x: event.offsetX,
+        y: event.offsetY
+      };
+      const outsideX = event.offsetX < left || event.offsetX > left + width;
+      const outsideY = event.offsetY < top || event.offsetY > top + height;
+      if (outsideX || outsideY) {
+        dispatch({
+          type: 'updateAxis',
+          data: {
+            x: null,
+            y: null
+          }
+        });
+        return;
+      }
+      const newStateX = getUpdateX(event.offsetX);
+      const newStateY = getUpdateY(event.offsetY);
+      dispatch({
+        type: 'updateAxis',
+        data: {
+          x: newStateX,
+          y: newStateY
+        }
+      });
+    };
+    element.addEventListener('mouseout', handleMouseOut);
+    element.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      element.removeEventListener('mouseout', handleMouseOut);
+      element.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [svgRef, dispatch, left, width, top, height, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener]);
+};

package/esm/hooks/useChartDimensions.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DEFAULT_MARGINS } from '../constants';
+const useChartDimensions = (width, height, margin) => {
+  const defaultizedMargin = _extends({}, DEFAULT_MARGINS, margin);
+  const drawingArea = React.useMemo(() => ({
+    left: defaultizedMargin.left,
+    top: defaultizedMargin.top,
+    width: Math.max(0, width - defaultizedMargin.left - defaultizedMargin.right),
+    height: Math.max(0, height - defaultizedMargin.top - defaultizedMargin.bottom)
+  }), [width, height, defaultizedMargin.top, defaultizedMargin.bottom, defaultizedMargin.left, defaultizedMargin.right]);
+  return drawingArea;
+};
+export default useChartDimensions;

package/esm/hooks/useInteractionItemProps.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { InteractionContext } from '../context/InteractionProvider';
+import { HighlighContext } from '../context/HighlightProvider';
+export const useInteractionItemProps = scope => {
+  const {
+    dispatch: dispatchInteraction
+  } = React.useContext(InteractionContext);
+  const {
+    dispatch: dispatchHighlight
+  } = React.useContext(HighlighContext);
+  const getInteractionItemProps = data => {
+    const onMouseEnter = () => {
+      dispatchInteraction({
+        type: 'enterItem',
+        data
+      });
+      dispatchHighlight({
+        type: 'enterItem',
+        item: data,
+        scope
+      });
+    };
+    const onMouseLeave = () => {
+      dispatchInteraction({
+        type: 'leaveItem',
+        data
+      });
+      dispatchHighlight({
+        type: 'leaveItem',
+        item: data
+      });
+    };
+    return {
+      onMouseEnter,
+      onMouseLeave
+    };
+  };
+  return getInteractionItemProps;
+};
+export const getIsHighlighted = (selectedItem, currentItem, highlightScope) => {
+  if (!(highlightScope != null && highlightScope.highlighted) || highlightScope.highlighted === 'none' || selectedItem === null) {
+    return false;
+  }
+  const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
+  if (!isSeriesSelected) {
+    return false;
+  }
+  if (highlightScope.highlighted === 'series') {
+    return isSeriesSelected;
+  }
+  return selectedItem.dataIndex !== undefined && selectedItem.dataIndex === currentItem.dataIndex;
+};
+export const getIsFaded = (selectedItem, currentItem, highlightScope) => {
+  if (!(highlightScope != null && highlightScope.faded) || highlightScope.faded === 'none' || selectedItem === null) {
+    return false;
+  }
+  const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
+  if (highlightScope.faded === 'series') {
+    return isSeriesSelected && selectedItem.dataIndex !== currentItem.dataIndex;
+  }
+  if (highlightScope.faded === 'global') {
+    if (!isSeriesSelected) {
+      return true;
+    }
+    return selectedItem.dataIndex !== undefined && selectedItem.dataIndex !== currentItem.dataIndex;
+  }
+  return false;
+};