React+Flask連携練習

チェックボックス増やす。
入力を複数渡したらグラフも複数書くようにする。
Flaskには配列で渡せるか？
デリミタで結合して文字列で渡すのでもまぁいい？

App.tsx

import React, { Component } from "react";
import Chart from "react-apexcharts";
import axios from "axios"

type Props = {
  //
}

type State = {
  checkedItems: Array<string>,
  getItem1: string,
  startTime: string,
  endTime: string,
  options: any,
  series: any,
}

class App extends Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      checkedItems: [],
      getItem1: "",
      startTime: "",
      endTime: "",
      options: {
        chart: {
          type: "line"
        },
        stroke: {
          width: 1,
        },
        xaxis: {
          type: 'datetime',
          categories: [],
          labels: {
            format: 'h:mm:ss', //'yyyy/MM/dd hh:mm:ss', 
            datetimeUTC: false,
          }
        },
        tooltip: { x: { format: 'yyyy/MM/dd h:mm:ss', }, },
      },
      series: [{
          name: "series-1",
          data: []
      }]
    };
    // this.handleClick = this.handleClick.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChangeGetItem1 = this.handleChangeGetItem1.bind(this);
    this.handleChangeStartTime = this.handleChangeStartTime.bind(this);
    this.handleChangeEndTime = this.handleChangeEndTime.bind(this);
    this.handleChangeCheckBox = this.handleChangeCheckBox.bind(this);
    this.handleClick2 = this.handleClick2.bind(this);
  }

  componentDidMount(){
    let iniStartTime = "";
    let iniEndTime = "";
    axios
    .post('http://xxx:xxxx/getTimeRange', {inFileName: "test.json"}
    )
    .then(response => {
      iniStartTime = response.data.startTime;
      iniEndTime = response.data.endTime;
      this.setState({startTime: iniStartTime});
      this.setState({endTime: iniEndTime});
    })
  }

  handleSubmit() {
    let newSeries: {name: string, data: Array<number>};
    let newCategories: Array<string> = [];
    axios
      .post('http://xxx:xxx/pullData',
            { inFileName: "test.json",
              dataName: this.state.checkedItems.join(","),
              startTime: this.state.startTime,
              endTime: this.state.endTime
            }
      )
      .then(response => {
        newSeries = {name: this.state.checkedItems.join(","), data: response.data.dataList};
        newCategories = response.data.timeList;
        this.setState({series: [newSeries]});
        this.setState({
          options: {
            ...this.state.options,
            xaxis: {
              ...this.state.options.xaxis,
              categories: newCategories
            }
          }
        });
      })
  }

  handleChangeGetItem1(event: React.ChangeEvent<HTMLInputElement>) {
    this.setState({getItem1: event.target.value})
  }

  handleChangeStartTime(event: React.ChangeEvent<HTMLInputElement>) {
    this.setState({startTime: event.target.value})
  }

  handleChangeEndTime(event: React.ChangeEvent<HTMLInputElement>) {
    this.setState({endTime: event.target.value})
  }

  handleChangeCheckBox(event: React.ChangeEvent<HTMLInputElement>) {
    let newCheckedItems: Array<string>;
    newCheckedItems = this.state.checkedItems
    if(this.state.checkedItems.includes(event.target.value)){
      this.setState({checkedItems: newCheckedItems.filter((checkedItem: string) => checkedItem !== event.target.value)});
    }else{
      this.setState({checkedItems: [...newCheckedItems, event.target.value]});
    }
  }


  handleClick2() {
    var i;
    const newSeriesList: Array<Object> = []
    const newData1: { name: string, data: Array<number> } 
    = { name: "series1", data: [] }
    const newData2: { name: string, data: Array<number> } 
    = { name: "series2", data: [] }
    const newCategories: Array<string> = [
      "2022/01/22 16:00:00", "2022/01/22 16:00:01", "2022/01/22 16:00:02", "2022/01/22 16:00:03",
      "2022/01/22 16:00:04", "2022/01/22 16:00:05", "2022/01/22 16:00:06", "2022/01/22 16:00:07"
    ]

    for(i=0; i<8; i++){
      newData1.data.push(Math.floor(Math.random()*130));
    }
    newSeriesList.push(newData1);
    for(i=0; i<8; i++){
      newData2.data.push(Math.floor(Math.random()*130));
    }
    newSeriesList.push(newData2);
    this.setState({series: newSeriesList});
    this.setState({
      options: {
        ...this.state.options,
        xaxis: {
          ...this.state.options.xaxis,
          categories: newCategories
        }
      }
    })
  }

  render() {
    return (
      <div className="App">
        <div className="row">
          <div className="mixed-chart">
            {/* <button onClick={this.handleClick}>update graph</button> */}
            <button onClick={this.handleSubmit}>update graph</button>
            <button onClick={this.handleClick2}>change 2 state</button>
            <Chart
              options={this.state.options}
              series={this.state.series}
              width="500"
            />
          </div>
          {/* <form onSubmit={this.handleSubmit}> */}
          <div>
            <input type="text" defaultValue={this.state.startTime} onChange={this.handleChangeStartTime} name="startTime" />
            <input type="text" defaultValue={this.state.endTime} onChange={this.handleChangeEndTime} name="endTime" />
            <input type="text" defaultValue={this.state.getItem1} onChange={this.handleChangeGetItem1} name="getItem1" />
          </div>
          <div>
            <label>
             <input type="checkbox" value="A" onChange={this.handleChangeCheckBox} checked={this.state.checkedItems.includes("A")}
              />
              A
            </label>
            <label>
             <input type="checkbox" value="B" onChange={this.handleChangeCheckBox} checked={this.state.checkedItems.includes("B")}
              />
              B
            </label>
          </div>
            {/* <input type="submit" value="更新" /> */}
          {/* </form> */}
        </div>
      </div>
    );
  }
}

export default App;