react-jsx-highstock/dist/es/components/RangeSelector/RangeSelector.js

Highcharts (including Highstock) charts built using React components

import * as React from 'react';
import { useState, useEffect } from 'react';
import { useHighcharts, useAxis, useChart, useModifiedProps } from 'react-jsx-highcharts';
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
const RangeSelector = ({
  enabled = true,
  children,
  ...restProps
}) => {
  const props = {
    enabled,
    ...restProps
  };
  const [rendered, setRendered] = useState(false);
  const Highcharts = useHighcharts();
  const chart = useChart();
  const axis = useAxis('xAxis');
  useEffect(() => {
    if (!axis) return;

    // Workaround inferred from http://jsfiddle.net/x40me94t/2/
    const chartObj = chart.object;
    chartObj.options.rangeSelector.enabled = true;
    // Initialise RangeSelector (see https://github.com/highcharts/highcharts/blob/dd730ab/js/parts/RangeSelector.js#L1464-L1468)
    Highcharts.fireEvent(chartObj, 'afterGetContainer');
    const opts = getRangeSelectorConfig(props, Highcharts);
    updateRangeSelector(opts, chart);
    const renderRangeSelector = createRenderRangeSelector(chart, axis);
    const axisObj = axis.object;
    Highcharts.addEvent(axisObj, 'afterSetExtremes', renderRangeSelector);
    setRendered(true);
    return () => {
      const axisObj = axis.object;
      Highcharts.removeEvent(axisObj, 'afterSetExtremes', renderRangeSelector);
      try {
        updateRangeSelector({
          enabled: false
        }, chart);
      } catch {
        // ignore as chart might have been already unmounted
      }
    };
  }, [axis]);
  const modifiedProps = useModifiedProps(props);
  useEffect(() => {
    if (!axis || !rendered) return;
    if (modifiedProps !== false) {
      updateRangeSelector(modifiedProps, chart);
    }
  });
  if (!children || !rendered) return null;
  return /*#__PURE__*/_jsx(_Fragment, {
    children: children
  });
};
const getRangeSelectorConfig = (props, Highcharts) => {
  return {
    ...(Highcharts.defaultOptions && Highcharts.defaultOptions.rangeSelector),
    ...props,
    inputEnabled: false,
    buttons: []
  };
};
const updateRangeSelector = (config, chart) => {
  chart.update({
    rangeSelector: config
  }, true);
};
const createRenderRangeSelector = (chart, axis) => {
  return () => {
    const chartObj = chart.object;
    const extremes = axis.getExtremes();
    // Fixes #40
    chartObj.rangeSelector.render.call(chartObj.rangeSelector, extremes.min, extremes.max);
  };
};
export default RangeSelector;