{"size": 2508, "ext": "js", "max_stars_repo_path": "src/components/graph/Graph.js", "max_stars_repo_name": "denbondd/react-stock-watcher", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/graph/Graph.js", "max_issues_repo_name": "denbondd/react-stock-watcher", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/graph/Graph.js", "max_forks_repo_name": "denbondd/react-stock-watcher", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.962962963, "max_line_length": 150, "alphanum_fraction": 0.6220095694}
import React from 'react'
import './Graph.css'
import { createChart } from 'lightweight-charts'
import { getData } from '../../api/stockCandles'

let listOfCharts = new Map();
function Graph(props) {
	const myRef = React.useRef();
	React.useEffect(() => {
		if (listOfCharts.get(props.id) === undefined) {
			getData(props.symbol, 'one', 9, makeChart);
		}
	});

	let showMoreInfoClick = () => {
		props.changeShowMoreInfoState(props.symbol);
	}

	return (
		<div className='graph-container'>
			<div ref={myRef} className='graph' />
			<div className='bottomSection'>
				<p className='showMoreInfo' onClick={showMoreInfoClick}>More Info</p>
			</div>
		</div>
	);

	function makeChart(data) {
		let width = 550;
		let height = 300;
		let chart = window.tvchart = createChart(myRef.current, {
			width: width,
			height: height,
			grid: {
				horzLines: {
					visible: false,
				},
			},
		});
		listOfCharts.set(props.id, chart)
	
		let series = chart.addAreaSeries({
			topColor: 'rgba(19, 68, 193, 0.4)',
			bottomColor: 'rgba(0, 120, 255, 0.0)',
			lineColor: 'rgba(19, 40, 153, 1.0)',
			lineWidth: 3
		});
	
		series.setData(data);
	
		let toolTip = document.createElement('div');
		toolTip.className = 'three-line-legend';
		myRef.current.appendChild(toolTip);
		toolTip.style.display = 'block';
		toolTip.style.left = 3 + 'px';
		toolTip.style.top = 3 + 'px';
	
		function setLastBarText() {
			let dateStr = data[data.length - 1].time.year + ' - ' + data[data.length - 1].time.month + ' - ' + data[data.length - 1].time.day;
			toolTip.innerHTML = `<div style="font-size: 24px; margin: 4px 0px; color: #20262E"> ${props.symbol}</div>` +
				'<div style="font-size: 22px; margin: 4px 0px; color: #20262E">' + data[data.length - 1].value + '</div>' +
				'<div>' + dateStr + '</div>';
		}
	
		setLastBarText();
	
		chart.subscribeCrosshairMove(function (param) {
			if (param === undefined || param.time === undefined || param.point.x < 0 || param.point.x > width || param.point.y < 0 || param.point.y > height) {
				setLastBarText();
			} else {
				let dateStr = param.time.year + ' - ' + param.time.month + ' - ' + param.time.day;
				let price = param.seriesPrices.get(series);
				toolTip.innerHTML = `<div style="font-size: 24px; margin: 4px 0px; color: #20262E"> ${props.symbol}</div>` +
					'<div style="font-size: 22px; margin: 4px 0px; color: #20262E">' + (Math.round(price * 100) / 100).toFixed(2) +
					'</div>' + '<div>' + dateStr + '</div>';
			}
		});
	}
}

export default Graph;