Untitled
unknown
typescript
4 years ago
2.3 kB
7
Indexable
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;
Editor is loading...