@mui/x-charts-pro 9.0.0 → 9.0.2

package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.js

@@ -0,0 +1,156 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsToolbarRangeButtonTrigger = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _internals = require("@mui/x-charts/internals");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _useChartProZoom = require("../internals/plugins/useChartProZoom");
+var _rangeButtonValueToZoom = require("./rangeButtonValueToZoom");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "value", "axisId", "label", "size"];
+/**
+ * A button that sets the chart zoom to a predefined range.
+ * It renders the `baseToggleButton` slot.
+ */
+const ChartsToolbarRangeButtonTrigger = exports.ChartsToolbarRangeButtonTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarRangeButtonTrigger(_ref, ref) {
+  let {
+      render,
+      value,
+      axisId: axisIdProp,
+      label,
+      size = 'small'
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const {
+    slots,
+    slotProps
+  } = (0, _internals.useChartsSlots)();
+  const {
+    instance,
+    store
+  } = (0, _internals.useChartsContext)();
+  const activeRangeButtonKey = store.use(_useChartProZoom.selectorChartActiveRangeButtonKey);
+  const canZoomOut = store.use(_useChartProZoom.selectorChartCanZoomOut);
+  const zoomOptionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
+  const rawXAxes = store.use(_internals.selectorChartRawXAxis);
+  const {
+    domains
+  } = store.use(_internals.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 = (0, _rangeButtonValueToZoom.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 = (0, _useComponentRenderer.useComponentRenderer)(slots.baseToggleButton, render, (0, _extends2.default)({}, slotProps.baseToggleButton, {
+    onClick: handleClick,
+    selected: isActive,
+    value: label,
+    size
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.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.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The label used to identify the button for active-state tracking.
+   */
+  label: _propTypes.default.string.isRequired,
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  /**
+   * The size of the button.
+   * @default 'small'
+   */
+  size: _propTypes.default.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.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.func, _propTypes.default.shape({
+    step: _propTypes.default.number,
+    unit: _propTypes.default.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+  })])
+} : void 0;

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