Untitled

import { createChart, IChartApi, ISeriesApi } from 'lightweight-charts';
import Papa from 'papaparse';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '..';
import LineData from '../interfaces/LineData';
import { setData } from '../redux/actions';

function MyChart2() {

    let chart: IChartApi | null = null;


    //component will mount
    useEffect(() => {

        const myChart = createChart(document.body, { width: 800, height: 600 });
        chart = myChart;

        const lineSeries = chart.addLineSeries();

        InitLineSeries(chart, lineSeries);

        //component will unmount
        return () => {
            if (chart !== null) {
                chart.remove();
                chart = null;
            }
        }
    }, [])

    const InitLineSeries = (chart: IChartApi, lineSeries: ISeriesApi<"Line">) => {
        //read csv
        Papa.parse("http://localhost:3000/data.csv", {
            download: true,
            complete: result => {
                var data: LineData[] = [];

                result.data.forEach(e => {
                    var row = e as string[];
                    var time: string = row[0];
                    var value: number = +row[1];
                    data.push({ time: time, value: value });
                });

                //nefunguje
                //SendToStore(data);

                //nefunguje
                //const storeData = GetFromStore();
                //lineSeries.setData(storeData);

                /*chart.timeScale().setVisibleRange({
                    from: data[0].time,
                    to: data[data.length - 1].time,
                });*/
            }
        });
    }

    const SendToStore = (data: LineData[]) => {
        const dispatch = useDispatch();
        dispatch(setData(data));
    }

    const GetFromStore = () => {
        const storeData = useSelector((state: RootState) => state.chartData);

        return storeData;
    }

    return (
        <div
            id='lightweight_chart_container'
            className={'LightweightChart'}
        />
    );
}

export default MyChart2;