@mui/x-charts 9.2.0 → 9.3.0

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
+    });
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "9.2.0",
+  "version": "9.3.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -34,9 +34,9 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.6.0",
+    "@mui/x-internal-gestures": "^9.3.0",
     "@mui/x-charts-vendor": "^9.0.0",
-    "@mui/x-internals": "^9.1.0",
-    "@mui/x-internal-gestures": "^9.2.0"
+    "@mui/x-internals": "^9.1.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",