Animation (React)

import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useRef, useState } from 'react';
import useEvent from 'react-use-event-hook';
import * as wjChart from '@mescius/wijmo.chart';
import * as Input from '@mescius/wijmo.react.input';
import * as Chart from '@mescius/wijmo.react.chart';
import * as ChartAnimation from '@mescius/wijmo.react.chart.animation';
import './app.css';
import { getData, getRandomData, getRandomValue } from './data';
function App() {
    const [flexChartPoints, setFlexChartPoints] = useState(10);
    const [duration, setDuration] = useState(400);
    const [chartType, setChartType] = useState("Line");
    const [data, setData] = useState([]);
    const [easing, setEasing] = useState('Swing');
    const [animationMode, setAnimationMode] = useState('All');
    const flexChartRef = useRef();
    const chartAnimationRef = useRef();
    const initializeChart = (chart) => {
        flexChartRef.current = chart;
        setDataSource();
    };
    const initializeAnimation = (animation) => {
        chartAnimationRef.current = animation;
    };
    const setDataSource = () => {
        setData(getData(flexChartPoints));
    };
    const resetChartData = () => {
        setDataSource();
    };
    const selectedTypeChanged = (e) => {
        console.log("selectedTypeIndexChanged " + e.selectedValue);
        if (e.selectedValue) {
            setChartType(e.selectedValue);
        }
    };
    const selectedEasingChanged = (e) => {
        if (e.selectedValue) {
            setEasing(e.selectedValue);
        }
    };
    const itemAdd = useEvent((args) => {
        var idx = args.selectedIndex;
        if (idx > -1) {
            func('add', idx);
        }
    });
    const itemRemove = useEvent((args) => {
        var idx = args.selectedIndex;
        if (idx > -1) {
            func('remove', idx);
        }
    });
    const func = (oper, idx) => {
        if (oper === 'add') {
            if (idx === 1) {
                addChartSeriesFirstPoint();
            }
            else if (idx === 2) {
                addChartSeriesLastPoint();
            }
            else {
                addChartSeries();
            }
        }
        else if (oper === 'remove') {
            if (idx === 1) {
                removeChartSeriesFirstPoint();
            }
            else if (idx === 2) {
                removeChartSeriesLastPoint();
            }
            else {
                removeChartSeries();
            }
        }
    };
    const addChartSeriesFirstPoint = () => {
        data.unshift(getRandomData('added' + getRandomValue(1000)));
        setData([...data]);
    };
    const addChartSeriesLastPoint = () => {
        data.push(getRandomData('added' + getRandomValue(1000)));
        setData([...data]);
    };
    const removeChartSeriesFirstPoint = () => {
        if (data.length) {
            data.shift();
            setData([...data]);
        }
    };
    const removeChartSeriesLastPoint = () => {
        if (data.length) {
            data.pop();
            setData([...data]);
        }
    };
    const valueChanged = (sender) => {
        if (sender.value < sender.min || sender.value > sender.max) {
            return;
        }
        //duration = sender.value;
        if (chartAnimationRef.current) {
            chartAnimationRef.current.duration = sender.value;
            setDuration(sender.value);
        }
    };
    const addChartSeries = () => {
        var chart = flexChartRef.current, len = chart.series.length;
        if (len >= 5) {
            return;
        }
        var series = new wjChart.Series();
        series.binding = 'y' + len;
        series.name = 'Y' + (chart.series.length + 1);
        chart.series.push(series);
    };
    const removeChartSeries = () => {
        var chart = flexChartRef.current;
        if (chart.series.length <= 0) {
            return;
        }
        chart.series.pop();
    };
    const animationModeChanged = (e) => {
        if (e.selectedValue) {
            setAnimationMode(e.selectedValue);
        }
        if (chartAnimationRef.current) {
            chartAnimationRef.current.animationMode = animationMode;
            flexChartRef.current.refresh(true);
        }
    };
    return (<div className="container">
      <div className="form-group">
        <div className="container-fluid well">
          <div className="row">
            <Input.Menu value={chartType} header="Chart type" itemClicked={selectedTypeChanged}>
              <Input.MenuItem value="Bar">Bar</Input.MenuItem>
              <Input.MenuItem value="Column">Column</Input.MenuItem>
              <Input.MenuItem value="Area">Area</Input.MenuItem>
              <Input.MenuItem value="Line">Line</Input.MenuItem>
              <Input.MenuItem value="LineSymbols">LineSymbols</Input.MenuItem>
              <Input.MenuItem value="Spline">Spline</Input.MenuItem>
              <Input.MenuItem value="SplineSymbols">SplineSymbols</Input.MenuItem>
              <Input.MenuItem value="SplineArea">SplineArea</Input.MenuItem>
              <Input.MenuItem value="Scatter">Scatter</Input.MenuItem>
            </Input.Menu>
            <Input.Menu value={animationMode} header="Animation mode" itemClicked={animationModeChanged}>
              <Input.MenuItem value="Point">Point</Input.MenuItem>
              <Input.MenuItem value="Series">Series</Input.MenuItem>
              <Input.MenuItem value="All">All</Input.MenuItem>
            </Input.Menu>
            <Input.Menu value={easing} header="Easing" itemClicked={selectedEasingChanged}>
              <Input.MenuItem value="Linear">Linear</Input.MenuItem>
              <Input.MenuItem value="Swing">Swing</Input.MenuItem>
              <Input.MenuItem value="EaseInQuad">EaseInQuad</Input.MenuItem>
              <Input.MenuItem value="EaseOutQuad">EaseOutQuad</Input.MenuItem>
              <Input.MenuItem value="EaseInOutQuad">EaseInOutQuad</Input.MenuItem>
              <Input.MenuItem value="EaseInCubic">EaseInCubic</Input.MenuItem>
              <Input.MenuItem value="EaseOutCubic">EaseOutCubic</Input.MenuItem>
              <Input.MenuItem value="EaseInOutCubic">EaseInOutCubic</Input.MenuItem>
              <Input.MenuItem value="EaseInQuart">EaseInQuart</Input.MenuItem>
              <Input.MenuItem value="EaseOutQuart">EaseOutQuart</Input.MenuItem>
              <Input.MenuItem value="EaseInOutQuart">EaseInOutQuart</Input.MenuItem>
              <Input.MenuItem value="EaseInQuint">EaseInQuint</Input.MenuItem>
              <Input.MenuItem value="EaseOutQuint">EaseOutQuint</Input.MenuItem>
              <Input.MenuItem value="EaseInOutQuint">EaseInOutQuint</Input.MenuItem>
              <Input.MenuItem value="EaseInSine">EaseInSine</Input.MenuItem>
              <Input.MenuItem value="EaseOutSine">EaseOutSine</Input.MenuItem>
              <Input.MenuItem value="EaseInOutSine">EaseInOutSine</Input.MenuItem>
              <Input.MenuItem value="EaseInExpo">EaseInExpo</Input.MenuItem>
              <Input.MenuItem value="EaseOutExpo">EaseOutExpo</Input.MenuItem>
              <Input.MenuItem value="EaseInOutExpo">EaseInOutExpo</Input.MenuItem>
              <Input.MenuItem value="EaseInCirc">EaseInCirc</Input.MenuItem>
              <Input.MenuItem value="EaseOutCirc">EaseOutCirc</Input.MenuItem>
              <Input.MenuItem value="EaseInOutCirc">EaseInOutCirc</Input.MenuItem>
              <Input.MenuItem value="EaseInBack">EaseInBack</Input.MenuItem>
              <Input.MenuItem value="EaseOutBack">EaseOutBack</Input.MenuItem>
              <Input.MenuItem value="EaseInOutBack">EaseInOutBack</Input.MenuItem>
              <Input.MenuItem value="EaseInBounce">EaseInBounce</Input.MenuItem>
              <Input.MenuItem value="EaseOutBounce">EaseOutBounce</Input.MenuItem>
              <Input.MenuItem value="EaseInOutBounce">EaseInOutBounce</Input.MenuItem>
              <Input.MenuItem value="EaseInElastic">EaseInElastic</Input.MenuItem>
              <Input.MenuItem value="EaseOutElastic">EaseOutElastic</Input.MenuItem>
              <Input.MenuItem value="EaseInOutElastic">EaseInOutElastic</Input.MenuItem>
            </Input.Menu>
            <span> Duration </span>
            <Input.InputNumber valueChanged={valueChanged} value={duration} min={200} max={5000} step={200} format="n0">
            </Input.InputNumber>
          </div>
          <div className="row">
            <button id="chartResetData" onClick={resetChartData} type="button" className="btn btn-default">
              reset data
            </button>
            <Input.Menu header="Add" itemClicked={itemAdd}>
              <Input.MenuItem>Add Series</Input.MenuItem>
              <Input.MenuItem>Add First Point</Input.MenuItem>
              <Input.MenuItem>Add Last Point</Input.MenuItem>
            </Input.Menu>
            <Input.Menu header="Remove" itemClicked={itemRemove}>
              <Input.MenuItem>Remove Series</Input.MenuItem>
              <Input.MenuItem>Remove First Point</Input.MenuItem>
              <Input.MenuItem>Remove Last Point</Input.MenuItem>
            </Input.Menu>
          </div>
        </div>
      </div>

      <Chart.FlexChart itemsSource={data} legendToggle={true} chartType={chartType} bindingX="x" initialized={initializeChart}>
        <Chart.FlexChartSeries binding="y0" name="Y1"/>
        <Chart.FlexChartSeries binding="y1" name="Y2"/>
        <Chart.FlexChartSeries binding="y2" name="Y3"/>
        <ChartAnimation.FlexChartAnimation initialized={initializeAnimation} easing={easing} duration={duration}/>
      </Chart.FlexChart>
    </div>);
}
const container = document.getElementById('app');
if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
}