import React from "react";
import { TimeSeries } from "pondjs";
import _ from "lodash";

import { Charts, ChartContainer, ChartRow, YAxis, LineChart } from "react-timeseries-charts";

export function TimeSeriesGraph(props) {

	const series = _.map(props.tagHistory, (tag, key) => {
		const points = _.reverse(_.map(tag, ({timestamp, value}) => {
			return [timestamp.getTime(), parseFloat(value)];
		}));
		return new TimeSeries({
			name: props.tagDescriptions[key],
			columns: ["time", props.tagDescriptions[key]],
			points: points
		});
	});

	// const lineCharts = _.map(props.tagHistory, (tag, key) => {
	// 	return <LineChart key={key} axis="axis1" series={series[key]} column={[props.tagDescriptions[key]]} />;
	// });
	
	
	return(
		<ChartContainer timeRange={series[0].timerange()} width={800}>
			<ChartRow height="200">
				<YAxis id="axis1" min={0} max={500} width="60" type="linear"/>
				<Charts>
					<LineChart axis="axis1" series={series[0]} column={[props.tagDescriptions[0]]} />;
				</Charts>
			</ChartRow>
		</ChartContainer>
	);
}

