import React from "react";

import axios from 'axios'; import { Spin } from 'antd';

import GenericChart from '../../../Chart/GenericChart';

import { timeParse} from "d3-time-format"; const parseDate = timeParse("%Y-%m-%d");

class ChartContainer extends React.PureComponent { displayName = ChartContainer.name;

constructor(props) { super(props); this.state = {oChartData: [], bDisplay: false}; }

// ------------------ // LifeCycles Methods // ------------------ componentDidMount() { console.log('ChartContainer - componentDidMount'); }

componentWillUnmount() { console.log('ChartContainer - componentWillUnmount'); }

componentDidUpdate(prevProps, prevState) { console.log('ChartContainer - componentDidUpdate');

const {sSelectedNodeCode, sCurrencyCode, sRootNodeCode} = this.props; this.fetchData(sRootNodeCode + sCurrencyCode, sSelectedNodeCode);
}

fetchData = (sRootNodeWithCurrency, sSelectedNodeCode) => { axios.get('api/Treenode/getNodeBarData/?sTreeCode=' + sRootNodeWithCurrency + '&sNodeCode=' + sSelectedNodeCode) .then(response => this.setState({oChartData: this.formatData(response.data), bDisplay: true})) .catch(responseError => console.log(responseError));
}

formatData = (data) => data.map(el => ({ date: parseDate(el.oDate.split("T")[0]), open:el.tOHLC[0], high:el.tOHLC[1], low:el.tOHLC[2], close:el.tOHLC[3], volume:el.lVolume }));

render() { console.log('ChartContainer - render'); const {sSelectedNodeCode, dHeight} = this.props; const {oChartData, bDisplay} = this.state;

let oChart = null;

if (bDisplay === false)
oChart = <Spin/> else oChart = <GenericChart sTitle = {sSelectedNodeCode} dHeight = {dHeight} oChartData = {oChartData}/>

return oChart; } }

export default ChartContainer;

​