@mui/x-charts 9.1.0 → 9.3.0

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs

@@ -2,8 +2,8 @@ import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { createSelector, createSelectorMemoizedWithOptions } from '@mui/x-internals/store';
 import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.mjs";
 import { generateSvg2rotation } from "./coordinateTransformation.mjs";
-import { getAxisIndex } from "./getAxisIndex.mjs";
-import { selectorChartPolarCenter, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.mjs";
+import { getRotationAxisIndex, getRadiusAxisIndex } from "./getAxisIndex.mjs";
+import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.mjs";
 const optionalGetAxisId = (_, id) => id;
 const optionalGetAxisIds = (_, ids) => ids;
 
@@ -11,10 +11,17 @@ const optionalGetAxisIds = (_, ids) => ids;
  * Get interaction indexes
  */
 
-function indexGetter(value, axes, ids) {
-  return Array.isArray(ids) ? ids.map(id => getAxisIndex(axes.axis[id], value)) : getAxisIndex(axes.axis[ids], value);
+function indexGetter(value, axes, ids, type) {
+  if (type === 'rotation') {
+    const rotationAxes = axes;
+    return Array.isArray(ids) ? ids.map(id => getRotationAxisIndex(rotationAxes.axis[id], value)) : getRotationAxisIndex(rotationAxes.axis[ids], value);
+  }
+  const radiusAxes = axes;
+  return Array.isArray(ids) ? ids.map(id => getRadiusAxisIndex(radiusAxes.axis[id], value)) : getRadiusAxisIndex(radiusAxes.axis[ids], value);
 }
 
+// ============================= Rotation axis =============================
+
 /**
  * Helper to get the rotation associated to the interaction coordinate.
  */
@@ -24,8 +31,8 @@ const selectorChartsInteractionRotationAngle = createSelector(selectorChartsInte
   }
   return generateSvg2rotation(center)(x, y);
 });
-export const selectorChartsInteractionRotationAxisIndex = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id) => rotation === null ? null : indexGetter(rotation, rotationAxis, id ?? rotationAxis.axisIds[0]));
-export const selectorChartsInteractionRotationAxisIndexes = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids ?? rotationAxis.axisIds));
+export const selectorChartsInteractionRotationAxisIndex = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id) => rotation === null ? null : indexGetter(rotation, rotationAxis, id ?? rotationAxis.axisIds[0], 'rotation'));
+export const selectorChartsInteractionRotationAxisIndexes = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids ?? rotationAxis.axisIds, 'rotation'));
 export const selectorChartsInteractionRotationAxisValue = createSelector(selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex, optionalGetAxisId, (rotationAxis, rotationIndex, id) => {
   id = id ?? rotationAxis.axisIds[0];
   if (rotationIndex === null || rotationIndex === -1 || rotationAxis.axisIds.length === 0) {
@@ -74,15 +81,70 @@ export const selectorChartsInteractionTooltipRotationAxes = createSelectorMemoiz
   }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
 });
 
+// ============================= Radius axis =============================
+
 /**
- * Get radius-axis ids and corresponding data index that should be displayed in the tooltip.
+ * Helper to get the radius associated to the interaction coordinate.
  */
-export const selectorChartsInteractionTooltipRadiusAxes = () => {
-  // TODO implement this selector and add it to the `selectorChartsInteractionPolarAxisTooltip`
-  return [];
-};
+export const selectorChartsInteractionRadius = createSelector(selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartPolarCenter, (x, y, center) => {
+  if (x === null || y === null) {
+    return null;
+  }
+  return Math.sqrt((x - center.cx) ** 2 + (y - center.cy) ** 2);
+});
+export const selectorChartsInteractionRadiusAxisIndex = createSelector(selectorChartsInteractionRadius, selectorChartRadiusAxis, optionalGetAxisId, (radius, radiusAxis, id) => radius === null ? null : indexGetter(radius, radiusAxis, id ?? radiusAxis.axisIds[0], 'radius'));
+export const selectorChartsInteractionRadiusAxisIndexes = createSelector(selectorChartsInteractionRadius, selectorChartRadiusAxis, optionalGetAxisIds, (radius, radiusAxis, ids) => radius === null ? null : indexGetter(radius, radiusAxis, ids ?? radiusAxis.axisIds, 'radius'));
+export const selectorChartsInteractionRadiusAxisValue = createSelector(selectorChartRadiusAxis, selectorChartsInteractionRadiusAxisIndex, optionalGetAxisId, (radiusAxis, radiusIndex, id) => {
+  id = id ?? radiusAxis.axisIds[0];
+  if (radiusIndex === null || radiusIndex === -1 || radiusAxis.axisIds.length === 0) {
+    return null;
+  }
+  const data = radiusAxis.axis[id]?.data;
+  if (!data) {
+    return null;
+  }
+  return data[radiusIndex];
+});
+export const selectorChartsInteractionRadiusAxisValues = createSelector(selectorChartRadiusAxis, selectorChartsInteractionRadiusAxisIndexes, optionalGetAxisIds, (radiusAxis, radiusIndexes, ids) => {
+  ids = ids ?? radiusAxis.axisIds;
+  if (radiusIndexes === null) {
+    return null;
+  }
+  return ids.map((id, axisIndex) => {
+    const radiusIndex = radiusIndexes[axisIndex];
+    if (radiusIndex === -1) {
+      return null;
+    }
+    return radiusAxis.axis[id].data?.[radiusIndex];
+  });
+});
+
+/**
+ * Get radius-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipRadiusAxes = createSelectorMemoizedWithOptions({
+  memoizeOptions: {
+    // Keep the same reference if array content is the same.
+    // If possible, avoid this pattern by creating selectors that
+    // uses string/number as arguments.
+    resultEqualityCheck: isDeepEqual
+  }
+})(selectorChartsInteractionRadiusAxisIndexes, selectorChartRadiusAxis, (indexes, axes) => {
+  if (indexes === null) {
+    return [];
+  }
+  return axes.axisIds.map((axisId, axisIndex) => ({
+    axisId,
+    dataIndex: indexes[axisIndex]
+  })).filter(({
+    axisId,
+    dataIndex
+  }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
+});
+
+// ============================= Cross axes selectors =============================
 
 /**
  * Return `true` if the axis tooltip has something to display.
  */
-export const selectorChartsInteractionPolarAxisTooltip = createSelector(selectorChartsInteractionTooltipRotationAxes, rotationTooltip => rotationTooltip.length > 0);
+export const selectorChartsInteractionPolarAxisTooltip = createSelector(selectorChartsInteractionTooltipRotationAxes, selectorChartsInteractionTooltipRadiusAxes, (rotationTooltip, radiusTooltip) => rotationTooltip.length > 0 || radiusTooltip.length > 0);

package/internals/processLineLikeSeries.d.mts

@@ -0,0 +1,6 @@
+import { type ChartSeriesType, type DatasetType } from "../models/seriesType/config.mjs";
+import type { SeriesProcessorParams, SeriesProcessorResult } from "./plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import type { IsItemVisibleFunction } from "./plugins/featurePlugins/useChartVisibilityManager/index.mjs";
+type LineLikeChartType = Extract<ChartSeriesType, 'line' | 'radialLine'>;
+export declare function processLineLikeSeries<SeriesType extends LineLikeChartType>(params: SeriesProcessorParams<SeriesType>, dataset: Readonly<DatasetType> | undefined, isItemVisible: IsItemVisibleFunction | undefined, seriesType: SeriesType): SeriesProcessorResult<SeriesType>;
+export {};

package/internals/processLineLikeSeries.d.ts

@@ -0,0 +1,6 @@
+import { type ChartSeriesType, type DatasetType } from "../models/seriesType/config.js";
+import type { SeriesProcessorParams, SeriesProcessorResult } from "./plugins/corePlugins/useChartSeriesConfig/index.js";
+import type { IsItemVisibleFunction } from "./plugins/featurePlugins/useChartVisibilityManager/index.js";
+type LineLikeChartType = Extract<ChartSeriesType, 'line' | 'radialLine'>;
+export declare function processLineLikeSeries<SeriesType extends LineLikeChartType>(params: SeriesProcessorParams<SeriesType>, dataset: Readonly<DatasetType> | undefined, isItemVisible: IsItemVisibleFunction | undefined, seriesType: SeriesType): SeriesProcessorResult<SeriesType>;
+export {};

package/internals/processLineLikeSeries.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.processLineLikeSeries = processLineLikeSeries;
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
+var _warning = require("@mui/x-internals/warning");
+var _stacking = require("./stacking");
+const defaultShapes = ['circle', 'square', 'diamond', 'cross', 'star', 'triangle', 'wye'];
+const lineValueFormatter = v => v == null ? '' : v.toLocaleString();
+function processLineLikeSeries(params, dataset, isItemVisible, seriesType) {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const stackingGroups = (0, _stacking.getStackingGroups)((0, _extends2.default)({}, params, {
+    defaultStrategy: {
+      stackOffset: 'none'
+    }
+  }));
+  const idToIndex = new Map();
+  const d3Dataset = dataset ?? [];
+  seriesOrder.forEach((id, seriesIndex) => {
+    idToIndex.set(id, seriesIndex);
+    const data = series[id].data;
+    if (data !== undefined) {
+      data.forEach((value, dataIndex) => {
+        if (d3Dataset.length <= dataIndex) {
+          d3Dataset.push({
+            [id]: value
+          });
+        } else {
+          d3Dataset[dataIndex][id] = value;
+        }
+      });
+    } else if (series[id].valueGetter && dataset) {
+      dataset.forEach((entry, dataIndex) => {
+        const value = series[id].valueGetter(entry);
+        if (d3Dataset.length <= dataIndex) {
+          d3Dataset.push({
+            [id]: value
+          });
+        } else {
+          d3Dataset[dataIndex][id] = value;
+        }
+      });
+    } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
+      const titleCase = seriesType === 'line' ? 'Line' : 'Radial line';
+      // TODO: fix mui/no-guarded-throw
+      // eslint-disable-next-line mui/no-guarded-throw
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: ${titleCase} series with id="${id}" has no data. ` + 'The chart cannot render this series without data. ' + 'Provide a data property to the series or use the dataset prop.' : (0, _formatErrorMessage2.default)(276, titleCase, id));
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      if (!data && dataset) {
+        const dataKey = series[id].dataKey;
+        if (!dataKey && !series[id].valueGetter) {
+          const titleCase = seriesType === 'line' ? 'Line' : 'Radial line';
+          // TODO: fix mui/no-guarded-throw
+          // eslint-disable-next-line mui/no-guarded-throw
+          throw new Error(`MUI X Charts: ${titleCase} series with id="${id}" has no data, no dataKey, and no valueGetter. ` + 'When using the dataset prop, each series must have a dataKey or valueGetter to identify which dataset values to use. ' + 'Add a dataKey or valueGetter property to the series configuration.');
+        }
+        if (dataKey) {
+          const titleCase = seriesType === 'line' ? 'Line' : 'Radial line';
+          const lowerCase = seriesType === 'line' ? 'lines' : 'radial lines';
+          dataset.forEach((entry, index) => {
+            const value = entry[dataKey];
+            if (value != null && typeof value !== 'number') {
+              (0, _warning.warnOnce)(`MUI X Charts: your dataset key "${dataKey}" is used for plotting ${lowerCase}, but the dataset contains the non-null non-numerical element "${value}" at index ${index}.
+${titleCase} plots only support numeric and null values.`);
+            }
+          });
+        }
+      }
+    }
+  });
+  const completedSeries = {};
+  stackingGroups.forEach(stackingGroup => {
+    const {
+      ids,
+      stackingOffset,
+      stackingOrder
+    } = stackingGroup;
+    const keys = ids.map(id => {
+      const dataKey = series[id].dataKey;
+      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
+    });
+    const stackedData = (0, _d3Shape.stack)().keys(keys).value((d, key) => d[key] ?? 0).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    const idOrder = stackedData.map(s => s.index);
+    const fixedOrder = () => idOrder;
+    const visibleStackedData = (0, _d3Shape.stack)().keys(keys).value((d, key) => {
+      const keyIndex = keys.indexOf(key);
+      const seriesId = ids[keyIndex];
+      if (!isItemVisible?.({
+        type: seriesType,
+        seriesId
+      })) {
+        return 0;
+      }
+      return d[key] ?? 0;
+    }).order(fixedOrder).offset(stackingOffset)(d3Dataset);
+    ids.forEach((id, index) => {
+      const {
+        dataKey,
+        valueGetter
+      } = series[id];
+      let data;
+      if (valueGetter) {
+        data = dataset.map(d => valueGetter(d));
+      } else if (dataKey) {
+        data = dataset.map(d => {
+          const value = d[dataKey];
+          return typeof value === 'number' ? value : null;
+        });
+      } else {
+        data = series[id].data;
+      }
+      const hidden = !isItemVisible?.({
+        type: seriesType,
+        seriesId: id
+      });
+      // SAFETY: 'line' and 'radialLine' series inputs are structurally identical for the
+      // fields needed to build the defaultized series result. The differing axis-ID fields
+      // are passed through via spread without being read.
+      completedSeries[id] = (0, _extends2.default)({
+        labelMarkType: 'line+mark'
+      }, series[id], {
+        shape: series[id].shape ?? defaultShapes[(idToIndex.get(id) ?? 0) % defaultShapes.length],
+        data,
+        valueFormatter: series[id].valueFormatter ?? lineValueFormatter,
+        hidden,
+        stackedData: stackedData[index],
+        visibleStackedData: visibleStackedData[index]
+      });
+    });
+  });
+  return {
+    seriesOrder,
+    stackingGroups,
+    series: completedSeries
+  };
+}

package/internals/processLineLikeSeries.mjs

@@ -0,0 +1,138 @@
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
+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 "./stacking/index.mjs";
+const defaultShapes = ['circle', 'square', 'diamond', 'cross', 'star', 'triangle', 'wye'];
+const lineValueFormatter = v => v == null ? '' : v.toLocaleString();
+export function processLineLikeSeries(params, dataset, isItemVisible, seriesType) {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const stackingGroups = getStackingGroups(_extends({}, params, {
+    defaultStrategy: {
+      stackOffset: 'none'
+    }
+  }));
+  const idToIndex = new Map();
+  const d3Dataset = dataset ?? [];
+  seriesOrder.forEach((id, seriesIndex) => {
+    idToIndex.set(id, seriesIndex);
+    const data = series[id].data;
+    if (data !== undefined) {
+      data.forEach((value, dataIndex) => {
+        if (d3Dataset.length <= dataIndex) {
+          d3Dataset.push({
+            [id]: value
+          });
+        } else {
+          d3Dataset[dataIndex][id] = value;
+        }
+      });
+    } else if (series[id].valueGetter && dataset) {
+      dataset.forEach((entry, dataIndex) => {
+        const value = series[id].valueGetter(entry);
+        if (d3Dataset.length <= dataIndex) {
+          d3Dataset.push({
+            [id]: value
+          });
+        } else {
+          d3Dataset[dataIndex][id] = value;
+        }
+      });
+    } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
+      const titleCase = seriesType === 'line' ? 'Line' : 'Radial line';
+      // TODO: fix mui/no-guarded-throw
+      // eslint-disable-next-line mui/no-guarded-throw
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: ${titleCase} series with id="${id}" has no data. ` + 'The chart cannot render this series without data. ' + 'Provide a data property to the series or use the dataset prop.' : _formatErrorMessage(276, titleCase, id));
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      if (!data && dataset) {
+        const dataKey = series[id].dataKey;
+        if (!dataKey && !series[id].valueGetter) {
+          const titleCase = seriesType === 'line' ? 'Line' : 'Radial line';
+          // TODO: fix mui/no-guarded-throw
+          // eslint-disable-next-line mui/no-guarded-throw
+          throw new Error(`MUI X Charts: ${titleCase} series with id="${id}" has no data, no dataKey, and no valueGetter. ` + 'When using the dataset prop, each series must have a dataKey or valueGetter to identify which dataset values to use. ' + 'Add a dataKey or valueGetter property to the series configuration.');
+        }
+        if (dataKey) {
+          const titleCase = seriesType === 'line' ? 'Line' : 'Radial line';
+          const lowerCase = seriesType === 'line' ? 'lines' : 'radial lines';
+          dataset.forEach((entry, index) => {
+            const value = entry[dataKey];
+            if (value != null && typeof value !== 'number') {
+              warnOnce(`MUI X Charts: your dataset key "${dataKey}" is used for plotting ${lowerCase}, but the dataset contains the non-null non-numerical element "${value}" at index ${index}.
+${titleCase} plots only support numeric and null values.`);
+            }
+          });
+        }
+      }
+    }
+  });
+  const completedSeries = {};
+  stackingGroups.forEach(stackingGroup => {
+    const {
+      ids,
+      stackingOffset,
+      stackingOrder
+    } = stackingGroup;
+    const keys = ids.map(id => {
+      const dataKey = series[id].dataKey;
+      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
+    });
+    const stackedData = d3Stack().keys(keys).value((d, key) => d[key] ?? 0).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    const idOrder = stackedData.map(s => s.index);
+    const fixedOrder = () => idOrder;
+    const visibleStackedData = d3Stack().keys(keys).value((d, key) => {
+      const keyIndex = keys.indexOf(key);
+      const seriesId = ids[keyIndex];
+      if (!isItemVisible?.({
+        type: seriesType,
+        seriesId
+      })) {
+        return 0;
+      }
+      return d[key] ?? 0;
+    }).order(fixedOrder).offset(stackingOffset)(d3Dataset);
+    ids.forEach((id, index) => {
+      const {
+        dataKey,
+        valueGetter
+      } = series[id];
+      let data;
+      if (valueGetter) {
+        data = dataset.map(d => valueGetter(d));
+      } else if (dataKey) {
+        data = dataset.map(d => {
+          const value = d[dataKey];
+          return typeof value === 'number' ? value : null;
+        });
+      } else {
+        data = series[id].data;
+      }
+      const hidden = !isItemVisible?.({
+        type: seriesType,
+        seriesId: id
+      });
+      // SAFETY: 'line' and 'radialLine' series inputs are structurally identical for the
+      // fields needed to build the defaultized series result. The differing axis-ID fields
+      // are passed through via spread without being read.
+      completedSeries[id] = _extends({
+        labelMarkType: 'line+mark'
+      }, series[id], {
+        shape: series[id].shape ?? defaultShapes[(idToIndex.get(id) ?? 0) % defaultShapes.length],
+        data,
+        valueFormatter: series[id].valueFormatter ?? lineValueFormatter,
+        hidden,
+        stackedData: stackedData[index],
+        visibleStackedData: visibleStackedData[index]
+      });
+    });
+  });
+  return {
+    seriesOrder,
+    stackingGroups,
+    series: completedSeries
+  };
+}

package/internals/resolveColorProcessor.d.mts

@@ -0,0 +1,11 @@
+import type { DefaultizedSeriesType } from "../models/seriesType/index.mjs";
+import type { ChartSeriesType } from "../models/seriesType/config.mjs";
+type LineOrBarSeriesType = Extract<ChartSeriesType, 'line' | 'bar' | 'radialLine' | 'radialBar'>;
+export interface ResolveColorProcessorParams<SeriesType extends LineOrBarSeriesType, V> {
+  series: Pick<DefaultizedSeriesType<SeriesType>, 'color' | 'data' | 'colorGetter'>;
+  valueColorScale?: (value: number) => string | null;
+  categoryColorScale?: (value: V) => string | null;
+  categoryValues?: readonly V[];
+}
+export declare function resolveColorProcessor<SeriesType extends LineOrBarSeriesType, V>(params: ResolveColorProcessorParams<SeriesType, V>): (dataIndex?: number) => string;
+export {};

package/internals/resolveColorProcessor.d.ts

@@ -0,0 +1,11 @@
+import type { DefaultizedSeriesType } from "../models/seriesType/index.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
+type LineOrBarSeriesType = Extract<ChartSeriesType, 'line' | 'bar' | 'radialLine' | 'radialBar'>;
+export interface ResolveColorProcessorParams<SeriesType extends LineOrBarSeriesType, V> {
+  series: Pick<DefaultizedSeriesType<SeriesType>, 'color' | 'data' | 'colorGetter'>;
+  valueColorScale?: (value: number) => string | null;
+  categoryColorScale?: (value: V) => string | null;
+  categoryValues?: readonly V[];
+}
+export declare function resolveColorProcessor<SeriesType extends LineOrBarSeriesType, V>(params: ResolveColorProcessorParams<SeriesType, V>): (dataIndex?: number) => string;
+export {};

package/internals/resolveColorProcessor.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveColorProcessor = resolveColorProcessor;
+var _getSeriesColorFn = require("./getSeriesColorFn");
+function resolveColorProcessor(params) {
+  const {
+    series,
+    valueColorScale,
+    categoryColorScale,
+    categoryValues
+  } = params;
+  const getSeriesColor = (0, _getSeriesColorFn.getSeriesColorFn)(series);
+  if (valueColorScale) {
+    return dataIndex => {
+      if (dataIndex === undefined) {
+        return series.color;
+      }
+      const value = series.data[dataIndex];
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : valueColorScale(value);
+      if (color === null) {
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
+      }
+      return color;
+    };
+  }
+  if (categoryColorScale && categoryValues) {
+    return dataIndex => {
+      if (dataIndex === undefined) {
+        return series.color;
+      }
+      const value = categoryValues[dataIndex];
+      const fallbackValue = {
+        value: series.data[dataIndex],
+        dataIndex
+      };
+      const color = value === null ? getSeriesColor(fallbackValue) : categoryColorScale(value);
+      if (color === null) {
+        return getSeriesColor(fallbackValue);
+      }
+      return color;
+    };
+  }
+  return dataIndex => {
+    if (dataIndex === undefined) {
+      return series.color;
+    }
+    const value = series.data[dataIndex];
+    return getSeriesColor({
+      value,
+      dataIndex
+    });
+  };
+}

package/internals/resolveColorProcessor.mjs

@@ -0,0 +1,56 @@
+import { getSeriesColorFn } from "./getSeriesColorFn.mjs";
+export function resolveColorProcessor(params) {
+  const {
+    series,
+    valueColorScale,
+    categoryColorScale,
+    categoryValues
+  } = params;
+  const getSeriesColor = getSeriesColorFn(series);
+  if (valueColorScale) {
+    return dataIndex => {
+      if (dataIndex === undefined) {
+        return series.color;
+      }
+      const value = series.data[dataIndex];
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : valueColorScale(value);
+      if (color === null) {
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
+      }
+      return color;
+    };
+  }
+  if (categoryColorScale && categoryValues) {
+    return dataIndex => {
+      if (dataIndex === undefined) {
+        return series.color;
+      }
+      const value = categoryValues[dataIndex];
+      const fallbackValue = {
+        value: series.data[dataIndex],
+        dataIndex
+      };
+      const color = value === null ? getSeriesColor(fallbackValue) : categoryColorScale(value);
+      if (color === null) {
+        return getSeriesColor(fallbackValue);
+      }
+      return color;
+    };
+  }
+  return dataIndex => {
+    if (dataIndex === undefined) {
+      return series.color;
+    }
+    const value = series.data[dataIndex];
+    return getSeriesColor({
+      value,
+      dataIndex
+    });
+  };
+}