Обновление серии с использованием оболочки Highcharts React

Question

Я реализую приложение, используя оболочку Highcharts React.

Сейчас я пытаюсь добавить группу кнопок, которая фильтрует данные в соответствии с нажатой кнопкой и передает данные серии обратно в диаграммы. Проблема в том, что я не знаю и, похоже, не могу найти, как передать этот новый набор данных в диаграмму где-либо. Я нашел только результаты для JS Vanilla, используя jQuery. Кто-нибудь знает решение с использованием оболочки React?

Вот рабочая демо . В демоверсии я не смог выяснить, почему, когда вы выбираете опцию и выбираете обратно, она ничего не делает, но работает в моем проекте, так что об этом не стоит беспокоиться.

РЕДАКТИРОВАТЬ: в демоверсии у меня есть выбор. Выбор не проблема. Проблема в том, что я не знаю, как передать filteredData на график как новый series.

Answer 1

Вам необходимо хранить данные в состоянии и обновлять их при фильтрации:

class CustomGUIChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filteredData: this.props.data
    };
  }

  render() {
    const { data } = this.props;
    const { seriesOptions } = this.props;
    const handlePeriodClick = periodType => {
      const filteredData = data.map(option => ({
        ...option,
        data: option.data.filter(
          item =>
            moment(item[0]).diff(moment(item[0]).endOf(periodType), "days") ===
            0
        )
      }));

      this.setState({ filteredData });
    };

    ...

    return (
      <Card>
        <CardContent style={{ padding: 0 }}>
          ...
          <HighchartsReact
            highcharts={Highcharts}
            constructorType="stockChart"
            containerProps={{ style: { height: "500px", minWidth: "400px" } }}
            options={{
              series: this.state.filteredData.map((set, index) => ({
                ...set,
                type:
                  seriesOptions && seriesOptions[index].curveType
                    ? seriesOptions[index].curveType
                    : "line",
                cursor: "pointer"
              }))
            }}
            allowChartUpdate
          />
        </CardContent>
      </Card>
    );
  }
}

---

Демонстрационная версия: https://codesandbox.io/s/update-data-source-r3lm9