@mui/x-charts/context/CartesianProvider/computeValue.js

The community edition of the Charts components (MUI X).

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.computeValue = computeValue;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _d3Scale = require("d3-scale");
var _constants = require("../../constants");
var _axis = require("../../models/axis");
var _colorScale = require("../../internals/colorScale");
var _useTicks = require("../../hooks/useTicks");
var _getScale = require("../../internals/getScale");
var _getAxisExtremum = require("./getAxisExtremum");
const getRange = (drawingArea, axisName, isReverse) => {
  const range = axisName === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
  return isReverse ? range.reverse() : range;
};
const zoomedScaleRange = (scaleRange, zoomRange) => {
  const rangeGap = scaleRange[1] - scaleRange[0];
  const zoomGap = zoomRange[1] - zoomRange[0];

  // If current zoom show the scale between p1 and p2 percents
  // The range should be extended by adding [0, p1] and [p2, 100] segments
  const min = scaleRange[0] - zoomRange[0] * rangeGap / zoomGap;
  const max = scaleRange[1] + (100 - zoomRange[1]) * rangeGap / zoomGap;
  return [min, max];
};
const isDateData = data => data?.[0] instanceof Date;
function createDateFormatter(axis, range) {
  const timeScale = (0, _d3Scale.scaleTime)(axis.data, range);
  return (v, {
    location
  }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
}
const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
const DEFAULT_BAR_GAP_RATIO = 0.1;
function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName, zoomRange = [0, 100]) {
  const DEFAULT_AXIS_KEY = axisName === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
  const allAxis = [...(inAxis?.map((axis, index) => (0, _extends2.default)({
    id: `defaultized-${axisName}-axis-${index}`
  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
    id
  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
    id: DEFAULT_AXIS_KEY,
    scaleType: 'linear'
  }] : [])];
  const completeAxis = {};
  allAxis.forEach((axis, axisIndex) => {
    const isDefaultAxis = axisIndex === 0;
    const [minData, maxData] = (0, _getAxisExtremum.getAxisExtremum)(axis, extremumGetters, isDefaultAxis, formattedSeries);
    const range = getRange(drawingArea, axisName, axis.reverse);
    if ((0, _axis.isBandScaleConfig)(axis)) {
      const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
      const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
      // Reverse range because ordinal scales are presented from top to bottom on y-axis
      const scaleRange = axisName === 'x' ? range : [range[1], range[0]];
      const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
      completeAxis[axis.id] = (0, _extends2.default)({
        categoryGapRatio,
        barGapRatio
      }, axis, {
        scale: (0, _d3Scale.scaleBand)(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
        tickNumber: axis.data.length,
        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
          values: axis.data
        }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
      });
      if (isDateData(axis.data)) {
        const dateFormatter = createDateFormatter(axis, scaleRange);
        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
      }
    }
    if ((0, _axis.isPointScaleConfig)(axis)) {
      const scaleRange = axisName === 'x' ? range : [...range].reverse();
      const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
      completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
        scale: (0, _d3Scale.scalePoint)(axis.data, zoomedRange),
        tickNumber: axis.data.length,
        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
          values: axis.data
        }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
      });
      if (isDateData(axis.data)) {
        const dateFormatter = createDateFormatter(axis, scaleRange);
        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
      }
    }
    if (axis.scaleType === 'band' || axis.scaleType === 'point') {
      // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
      return;
    }
    const scaleType = axis.scaleType ?? 'linear';
    const extremums = [axis.min ?? minData, axis.max ?? maxData];
    const rawTickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
      range,
      domain: extremums
    }));
    const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
    const zoomedRange = zoomedScaleRange(range, zoomRange);

    // TODO: move nice to prop? Disable when there is zoom?
    const scale = (0, _getScale.getScale)(scaleType, extremums, zoomedRange).nice(rawTickNumber);
    const [minDomain, maxDomain] = scale.domain();
    const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
    completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
      scaleType: scaleType,
      scale: scale.domain(domain),
      tickNumber,
      colorScale: axis.colorMap && (0, _colorScale.getColorScale)(axis.colorMap)
    });
  });
  return {
    axis: completeAxis,
    axisIds: allAxis.map(({
      id
    }) => id)
  };
}