@mui/x-charts-pro 9.0.1 → 9.0.3

package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.mjs

@@ -0,0 +1,150 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "value", "axisId", "label", "size"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useChartsContext, useChartsSlots, selectorChartRawXAxis, selectorChartXAxisWithDomains, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { selectorChartActiveRangeButtonKey, selectorChartCanZoomOut } from "../internals/plugins/useChartProZoom/index.mjs";
+import { rangeButtonValueToZoom } from "./rangeButtonValueToZoom.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that sets the chart zoom to a predefined range.
+ * It renders the `baseToggleButton` slot.
+ */
+const ChartsToolbarRangeButtonTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarRangeButtonTrigger(_ref, ref) {
+  let {
+      render,
+      value,
+      axisId: axisIdProp,
+      label,
+      size = 'small'
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const {
+    instance,
+    store
+  } = useChartsContext();
+  const activeRangeButtonKey = store.use(selectorChartActiveRangeButtonKey);
+  const canZoomOut = store.use(selectorChartCanZoomOut);
+  const zoomOptionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const rawXAxes = store.use(selectorChartRawXAxis);
+  const {
+    domains
+  } = store.use(selectorChartXAxisWithDomains);
+
+  // Resolve the target axis ID: use the prop, or find the first zoomable x-axis.
+  const resolvedAxisId = React.useMemo(() => {
+    if (axisIdProp !== undefined) {
+      return axisIdProp;
+    }
+    if (!rawXAxes) {
+      return undefined;
+    }
+    return rawXAxes.find(axis => zoomOptionsLookup[axis.id] !== undefined)?.id;
+  }, [axisIdProp, rawXAxes, zoomOptionsLookup]);
+
+  // Determine if the resolved axis is ordinal (band/point) to use index-based domain.
+  const resolvedAxis = React.useMemo(() => rawXAxes?.find(axis => axis.id === resolvedAxisId), [rawXAxes, resolvedAxisId]);
+  const isOrdinal = resolvedAxis?.scaleType === 'band' || resolvedAxis?.scaleType === 'point';
+
+  // Get the full domain for the target axis, ignoring the current zoom.
+  // For ordinal axes (band/point), use index-based range since domain values are categories.
+  const axisDomain = React.useMemo(() => {
+    if (resolvedAxisId === undefined) {
+      return undefined;
+    }
+    const domainDef = domains[resolvedAxisId];
+    if (!domainDef || domainDef.domain.length < 2) {
+      return undefined;
+    }
+    if (isOrdinal) {
+      return {
+        min: 0,
+        max: domainDef.domain.length - 1
+      };
+    }
+    const min = domainDef.domain[0];
+    const max = domainDef.domain[domainDef.domain.length - 1];
+    return {
+      min: Number(min),
+      max: Number(max)
+    };
+  }, [resolvedAxisId, domains, isOrdinal]);
+  const handleClick = React.useCallback(() => {
+    if (resolvedAxisId === undefined || !axisDomain) {
+      return;
+    }
+    const zoom = rangeButtonValueToZoom(value, {
+      scaleType: resolvedAxis?.scaleType ?? 'linear',
+      data: resolvedAxis?.data,
+      domain: axisDomain
+    });
+    instance.setAxisZoomData(resolvedAxisId, {
+      axisId: resolvedAxisId,
+      start: zoom.start,
+      end: zoom.end
+    });
+    instance.setActiveRangeButtonKey(label);
+  }, [resolvedAxisId, resolvedAxis, axisDomain, value, instance, label]);
+
+  // Determine if this button is selected.
+  // When explicitly clicked, activeRangeButtonKey matches the label.
+  // When no button has been clicked and zoom is at full range, the null-value button is active.
+  const isActive = activeRangeButtonKey === label || activeRangeButtonKey === null && value === null && !canZoomOut;
+  const element = useComponentRenderer(slots.baseToggleButton, render, _extends({}, slotProps.baseToggleButton, {
+    onClick: handleClick,
+    selected: isActive,
+    value: label,
+    size
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarRangeButtonTrigger.displayName = "ChartsToolbarRangeButtonTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarRangeButtonTrigger.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The axis ID to apply the range to.
+   * Defaults to the first x-axis with zoom enabled.
+   */
+  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The label used to identify the button for active-state tracking.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * The size of the button.
+   * @default 'small'
+   */
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  /**
+   * The range value. Specifies how far back from the end of the data to zoom.
+   *
+   * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
+   * - `[start, end]` — An absolute date range.
+   * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
+   * - `null` — Resets zoom to show all data.
+   */
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.func, PropTypes.shape({
+    step: PropTypes.number,
+    unit: PropTypes.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+  })])
+} : void 0;
+export { ChartsToolbarRangeButtonTrigger };

package/ChartsToolbarPro/ChartsToolbarZoomInTrigger.js

@@ -33,7 +33,7 @@ const ChartsToolbarZoomInTrigger = exports.ChartsToolbarZoomInTrigger = /*#__PUR
     instance,
     store
   } = (0, _internals.useChartsContext)();
-  const disabled = store.use(_useChartProZoom.selectorChartCanZoomIn);
+  const disabled = !store.use(_useChartProZoom.selectorChartCanZoomIn);
   const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps.baseButton, {
     onClick: () => instance.zoomIn(),
     disabled

package/ChartsToolbarPro/ChartsToolbarZoomInTrigger.mjs

@@ -26,7 +26,7 @@ const ChartsToolbarZoomInTrigger = /*#__PURE__*/React.forwardRef(function Charts
     instance,
     store
   } = useChartsContext();
-  const disabled = store.use(selectorChartCanZoomIn);
+  const disabled = !store.use(selectorChartCanZoomIn);
   const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps.baseButton, {
     onClick: () => instance.zoomIn(),
     disabled

package/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.js

@@ -33,7 +33,7 @@ const ChartsToolbarZoomOutTrigger = exports.ChartsToolbarZoomOutTrigger = /*#__P
     instance,
     store
   } = (0, _internals.useChartsContext)();
-  const disabled = store.use(_useChartProZoom.selectorChartCanZoomOut);
+  const disabled = !store.use(_useChartProZoom.selectorChartCanZoomOut);
   const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps.baseButton, {
     onClick: () => instance.zoomOut(),
     disabled

package/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.mjs

@@ -26,7 +26,7 @@ const ChartsToolbarZoomOutTrigger = /*#__PURE__*/React.forwardRef(function Chart
     instance,
     store
   } = useChartsContext();
-  const disabled = store.use(selectorChartCanZoomOut);
+  const disabled = !store.use(selectorChartCanZoomOut);
   const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps.baseButton, {
     onClick: () => instance.zoomOut(),
     disabled

package/ChartsToolbarPro/index.d.mts

@@ -1,6 +1,7 @@
 export * from "./ChartsToolbarPro.mjs";
 export * from "./ChartsToolbarZoomInTrigger.mjs";
 export * from "./ChartsToolbarZoomOutTrigger.mjs";
+export * from "./ChartsToolbarRangeButtonTrigger.mjs";
 export * from "./ChartsToolbarPrintExportTrigger.mjs";
 export * from "./ChartsToolbarImageExportTrigger.mjs";
 export type { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "./Toolbar.types.mjs";

package/ChartsToolbarPro/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./ChartsToolbarPro.js";
 export * from "./ChartsToolbarZoomInTrigger.js";
 export * from "./ChartsToolbarZoomOutTrigger.js";
+export * from "./ChartsToolbarRangeButtonTrigger.js";
 export * from "./ChartsToolbarPrintExportTrigger.js";
 export * from "./ChartsToolbarImageExportTrigger.js";
 export type { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "./Toolbar.types.js";

package/ChartsToolbarPro/index.js

@@ -36,6 +36,17 @@ Object.keys(_ChartsToolbarZoomOutTrigger).forEach(function (key) {
     }
   });
 });
+var _ChartsToolbarRangeButtonTrigger = require("./ChartsToolbarRangeButtonTrigger");
+Object.keys(_ChartsToolbarRangeButtonTrigger).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsToolbarRangeButtonTrigger[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsToolbarRangeButtonTrigger[key];
+    }
+  });
+});
 var _ChartsToolbarPrintExportTrigger = require("./ChartsToolbarPrintExportTrigger");
 Object.keys(_ChartsToolbarPrintExportTrigger).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/ChartsToolbarPro/index.mjs

@@ -1,6 +1,7 @@
 export * from "./ChartsToolbarPro.mjs";
 export * from "./ChartsToolbarZoomInTrigger.mjs";
 export * from "./ChartsToolbarZoomOutTrigger.mjs";
+export * from "./ChartsToolbarRangeButtonTrigger.mjs";
 export * from "./ChartsToolbarPrintExportTrigger.mjs";
 export * from "./ChartsToolbarImageExportTrigger.mjs";
 export {};

package/ChartsToolbarPro/rangeButtonValueToZoom.d.mts

@@ -0,0 +1,66 @@
+/**
+ * A calendar interval unit for range buttons.
+ */
+export type RangeButtonIntervalUnit = 'microsecond' | 'millisecond' | 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
+/**
+ * Parameters passed to a range button function value.
+ */
+export interface RangeButtonFunctionParams {
+  /**
+   * The scale type of the axis (e.g., `'time'`, `'band'`, `'linear'`).
+   */
+  scaleType: string;
+  /**
+   * The axis data values. Available for ordinal (band/point) axes.
+   */
+  data: readonly unknown[] | undefined;
+  /**
+   * The full domain bounds, ignoring any current zoom.
+   * For time axes, these are timestamps. For ordinal axes, these are indices.
+   */
+  domain: {
+    min: number;
+    max: number;
+  };
+}
+/**
+ * Defines the value of a range button.
+ *
+ * - `{ unit, step }` — A calendar interval from the end of the data.
+ *   @example { unit: 'month', step: 3 } // Last 3 months
+ *   @example { unit: 'year' } // Last year (step defaults to 1)
+ * - `[start, end]` — An absolute date range.
+ *   @example [new Date(2024, 0, 1), new Date(2024, 6, 1)] // Jan–Jul 2024
+ * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
+ *   @example ({ domain }) => ({ start: 0, end: 50 }) // First half of data
+ *   @example ({ data }) => {
+ *     const lastFive = Math.max(0, data.length - 5);
+ *     return { start: (lastFive / (data.length - 1)) * 100, end: 100 };
+ *   } // Last 5 items on an ordinal axis
+ * - `null` — Resets zoom to show all data.
+ *   @example null // Show all data
+ */
+export type RangeButtonValue = {
+  unit: RangeButtonIntervalUnit;
+  step?: number;
+} | [Date, Date] | ((params: RangeButtonFunctionParams) => {
+  start: number;
+  end: number;
+}) | null;
+/**
+ * Converts a range button value to zoom start/end percentages.
+ *
+ * The range is calculated from the end of the axis domain.
+ * For example, `{ unit: 'month', step: 3 }` will zoom to show the last 3 months of data.
+ *
+ * @param value The range button value.
+ * @param params The axis context passed to function values.
+ * @param params.scaleType The scale type of the axis.
+ * @param params.data The axis data values (for ordinal axes).
+ * @param params.domain The full domain bounds.
+ * @returns The zoom start and end percentages (0-100).
+ */
+export declare function rangeButtonValueToZoom(value: RangeButtonValue, params: RangeButtonFunctionParams): {
+  start: number;
+  end: number;
+};

package/ChartsToolbarPro/rangeButtonValueToZoom.d.ts

@@ -0,0 +1,66 @@
+/**
+ * A calendar interval unit for range buttons.
+ */
+export type RangeButtonIntervalUnit = 'microsecond' | 'millisecond' | 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
+/**
+ * Parameters passed to a range button function value.
+ */
+export interface RangeButtonFunctionParams {
+  /**
+   * The scale type of the axis (e.g., `'time'`, `'band'`, `'linear'`).
+   */
+  scaleType: string;
+  /**
+   * The axis data values. Available for ordinal (band/point) axes.
+   */
+  data: readonly unknown[] | undefined;
+  /**
+   * The full domain bounds, ignoring any current zoom.
+   * For time axes, these are timestamps. For ordinal axes, these are indices.
+   */
+  domain: {
+    min: number;
+    max: number;
+  };
+}
+/**
+ * Defines the value of a range button.
+ *
+ * - `{ unit, step }` — A calendar interval from the end of the data.
+ *   @example { unit: 'month', step: 3 } // Last 3 months
+ *   @example { unit: 'year' } // Last year (step defaults to 1)
+ * - `[start, end]` — An absolute date range.
+ *   @example [new Date(2024, 0, 1), new Date(2024, 6, 1)] // Jan–Jul 2024
+ * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
+ *   @example ({ domain }) => ({ start: 0, end: 50 }) // First half of data
+ *   @example ({ data }) => {
+ *     const lastFive = Math.max(0, data.length - 5);
+ *     return { start: (lastFive / (data.length - 1)) * 100, end: 100 };
+ *   } // Last 5 items on an ordinal axis
+ * - `null` — Resets zoom to show all data.
+ *   @example null // Show all data
+ */
+export type RangeButtonValue = {
+  unit: RangeButtonIntervalUnit;
+  step?: number;
+} | [Date, Date] | ((params: RangeButtonFunctionParams) => {
+  start: number;
+  end: number;
+}) | null;
+/**
+ * Converts a range button value to zoom start/end percentages.
+ *
+ * The range is calculated from the end of the axis domain.
+ * For example, `{ unit: 'month', step: 3 }` will zoom to show the last 3 months of data.
+ *
+ * @param value The range button value.
+ * @param params The axis context passed to function values.
+ * @param params.scaleType The scale type of the axis.
+ * @param params.data The axis data values (for ordinal axes).
+ * @param params.domain The full domain bounds.
+ * @returns The zoom start and end percentages (0-100).
+ */
+export declare function rangeButtonValueToZoom(value: RangeButtonValue, params: RangeButtonFunctionParams): {
+  start: number;
+  end: number;
+};

package/ChartsToolbarPro/rangeButtonValueToZoom.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rangeButtonValueToZoom = rangeButtonValueToZoom;
+var _warning = require("@mui/x-internals/warning");
+/**
+ * A calendar interval unit for range buttons.
+ */
+
+/**
+ * Parameters passed to a range button function value.
+ */
+
+/**
+ * Defines the value of a range button.
+ *
+ * - `{ unit, step }` — A calendar interval from the end of the data.
+ *   @example { unit: 'month', step: 3 } // Last 3 months
+ *   @example { unit: 'year' } // Last year (step defaults to 1)
+ * - `[start, end]` — An absolute date range.
+ *   @example [new Date(2024, 0, 1), new Date(2024, 6, 1)] // Jan–Jul 2024
+ * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
+ *   @example ({ domain }) => ({ start: 0, end: 50 }) // First half of data
+ *   @example ({ data }) => {
+ *     const lastFive = Math.max(0, data.length - 5);
+ *     return { start: (lastFive / (data.length - 1)) * 100, end: 100 };
+ *   } // Last 5 items on an ordinal axis
+ * - `null` — Resets zoom to show all data.
+ *   @example null // Show all data
+ */
+
+/**
+ * Attempts to convert a value to a timestamp.
+ * Handles Date objects, numeric timestamps, and date-like strings.
+ *
+ * @returns The timestamp in milliseconds, or `undefined` if the value is not date-like.
+ */
+function toTimestamp(val) {
+  if (val instanceof Date) {
+    return val.getTime();
+  }
+  if (typeof val === 'number') {
+    return val;
+  }
+  if (typeof val === 'string') {
+    const parsed = Date.parse(val);
+    if (!Number.isNaN(parsed)) {
+      return parsed;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Converts ordinal data to timestamps.
+ * Items that cannot be converted are kept as `NaN` so their index is preserved.
+ * Returns `undefined` if fewer than 2 items could be converted.
+ */
+function toTimestampArray(data) {
+  const timestamps = new Array(data.length);
+  let convertedItems = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    const ts = toTimestamp(data[i]);
+    if (ts !== undefined) {
+      convertedItems += 1;
+      timestamps[i] = ts;
+    } else {
+      timestamps[i] = Number.NaN;
+    }
+  }
+  return convertedItems >= 2 ? timestamps : undefined;
+}
+
+/**
+ * Converts a range button value to zoom start/end percentages.
+ *
+ * The range is calculated from the end of the axis domain.
+ * For example, `{ unit: 'month', step: 3 }` will zoom to show the last 3 months of data.
+ *
+ * @param value The range button value.
+ * @param params The axis context passed to function values.
+ * @param params.scaleType The scale type of the axis.
+ * @param params.data The axis data values (for ordinal axes).
+ * @param params.domain The full domain bounds.
+ * @returns The zoom start and end percentages (0-100).
+ */
+function rangeButtonValueToZoom(value, params) {
+  if (value === null) {
+    return {
+      start: 0,
+      end: 100
+    };
+  }
+  if (typeof value === 'function') {
+    const result = value(params);
+    if (process.env.NODE_ENV !== 'production' && result.end < result.start) {
+      (0, _warning.warnOnce)([`MUI X Charts: Range button function returned an end value (${result.end}) lower than the start value (${result.start}).`, 'This likely produces an unexpected zoom range.']);
+    }
+    return {
+      start: result.start,
+      end: result.end
+    };
+  }
+  const {
+    domain: {
+      min: domainMin,
+      max: domainMax
+    },
+    data: ordinalData
+  } = params;
+
+  // For ordinal axes with date-like data, resolve date ranges and intervals to matching indices.
+  const timestamps = ordinalData ? toTimestampArray(ordinalData) : undefined;
+  if (timestamps) {
+    const maxIndex = timestamps.length - 1;
+    if (Array.isArray(value)) {
+      const startTarget = value[0].getTime();
+      const endTarget = value[1].getTime();
+      if (process.env.NODE_ENV !== 'production' && endTarget < startTarget) {
+        (0, _warning.warnOnce)(['MUI X Charts: Range button received a date range whose end is before its start.', 'This produces an empty zoom range.']);
+      }
+      const firstGte = timestamps.findIndex(ts => !Number.isNaN(ts) && ts >= startTarget);
+      const lastLte = timestamps.findLastIndex(ts => !Number.isNaN(ts) && ts <= endTarget);
+      const startIndex = firstGte === -1 ? maxIndex : firstGte;
+      const endIndex = lastLte === -1 ? 0 : lastLte;
+      return {
+        start: startIndex / maxIndex * 100,
+        end: endIndex / maxIndex * 100
+      };
+    }
+
+    // Interval — compute target date from the last valid data point's timestamp.
+    const lastValidIndex = timestamps.findLastIndex(ts => !Number.isNaN(ts));
+    const lastTimestamp = timestamps[lastValidIndex];
+    const targetStartMs = computeIntervalStart(value, lastTimestamp);
+    const firstGte = timestamps.findIndex(ts => !Number.isNaN(ts) && ts >= targetStartMs);
+    const startIndex = firstGte === -1 ? maxIndex : firstGte;
+    return {
+      start: startIndex / maxIndex * 100,
+      end: 100
+    };
+  }
+  if (process.env.NODE_ENV !== 'production' && ordinalData !== undefined) {
+    (0, _warning.warnOnce)(['MUI X Charts: Range button received a date value for an ordinal axis whose data could not be parsed as dates.', 'The zoom range may not match the intended selection. Provide date-like axis data or use a function value.']);
+  }
+  const domainRange = domainMax - domainMin;
+  if (domainRange <= 0) {
+    return {
+      start: 0,
+      end: 100
+    };
+  }
+
+  // Absolute date range
+  if (Array.isArray(value)) {
+    const [rangeStart, rangeEnd] = value;
+    if (process.env.NODE_ENV !== 'production' && rangeEnd.getTime() < rangeStart.getTime()) {
+      (0, _warning.warnOnce)(['MUI X Charts: Range button received a date range whose end is before its start.', 'This produces an empty zoom range.']);
+    }
+    const startPercent = (rangeStart.getTime() - domainMin) / domainRange * 100;
+    const endPercent = (rangeEnd.getTime() - domainMin) / domainRange * 100;
+    return {
+      start: startPercent,
+      end: endPercent
+    };
+  }
+
+  // Interval — subtract from the end of the domain
+  const targetStartMs = computeIntervalStart(value, domainMax);
+  const startPercent = (targetStartMs - domainMin) / domainRange * 100;
+  return {
+    start: startPercent,
+    end: 100
+  };
+}
+
+/**
+ * Computes the start timestamp for a calendar interval subtracted from a reference point.
+ */
+function computeIntervalStart(interval, referenceMs) {
+  const {
+    unit,
+    step = 1
+  } = interval;
+  switch (unit) {
+    case 'year':
+      {
+        const d = new Date(referenceMs);
+        d.setFullYear(d.getFullYear() - step);
+        return d.getTime();
+      }
+    case 'month':
+      {
+        const d = new Date(referenceMs);
+        d.setMonth(d.getMonth() - step);
+        return d.getTime();
+      }
+    case 'week':
+      return referenceMs - step * 7 * 24 * 60 * 60 * 1000;
+    case 'day':
+      return referenceMs - step * 24 * 60 * 60 * 1000;
+    case 'hour':
+      return referenceMs - step * 60 * 60 * 1000;
+    case 'minute':
+      return referenceMs - step * 60 * 1000;
+    case 'second':
+      return referenceMs - step * 1000;
+    case 'millisecond':
+      return referenceMs - step;
+    case 'microsecond':
+      return referenceMs - step / 1000;
+    default:
+      return 0;
+  }
+}