Как внедрить селектор даты в HighChart StockChart в reactjs (без jQuery)

Question

Я использовал хай-чарты в реактивном приложении и относительно новый для обоих. Последний недостающий элемент моей цели - подключить всплывающее окно календаря к диапазону выбора даты на биржевой диаграмме. Без jQuery. Есть пара примеров, которые приближаются к тому, что я хотел бы.

Публикация, которая ссылается на использование jQuery: Поддержка HighChart - jQuery пример

Публикация, которая ссылается на использование response-day-picker вне графика: Сообщение найдено на форуме поддержки HighChart

Я работаю полностью, используя календарь выбора дня реакции вне Диаграмма, включая сантехнику - обновление диапазона выбора после выбора даты и др. c. Я даже пытался перенести этот элемент в диаграмму SVG, но не смог заставить его работать. Поэтому моя цель - реализовать облегченный инструмент выбора даты, который можно привязать к встроенным элементам ввода данных селектора внутри области диаграммы (опять же без jQuery).

Любая помощь будет быть высоко ценится.

Answer 1

Вы можете отобразить компонент DayPicker после нажатия на элемент ввода по умолчанию и использовать метод xAxis.setExtremes, чтобы применить выбранную дату.

class HighchartsChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      minInput: false,
      maxInput: false
    };
  }

  selectDay(time, isMin){
    const timestamp = time.getTime();
    const xAxis = this.internalChart.xAxis[0];

    xAxis.setExtremes(
      isMin ? timestamp : xAxis.min,
      isMin ? xAxis.max : timestamp
    );
    this.setState(isMin ? {minInput: false} : {maxInput: false});
  }

  render() {
    return (
      <div>
        <HighchartsReact
          constructorType={'stockChart'}
          highcharts={Highcharts}
          options={{
            chart: {
              events: {
                load: (function(component){
                  return function(){
                    const inputGroup = this.rangeSelector.inputGroup.element.children;
                    inputGroup[1].addEventListener('click', function(){
                      component.setState({minInput: true});
                    });

                    inputGroup[3].addEventListener('click', function(){
                      component.setState({maxInput: true});
                    });

                    component.internalChart = this;
                  } 
                })(this),
              }
            },
            ...options
          }}
        />
        {
          this.state.minInput && 
          <DayPicker onDayClick={(time) => {
            this.selectDay(time, true);
          }} />
        }
        {
          this.state.maxInput && 
          <DayPicker onDayClick={(time) => {
            this.selectDay(time);
          }} />
        }
      </div>
    );
  }
}

---

Демонстрационная версия: https://codesandbox.io/s/highcharts-react-demo-mqqhu

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes