import React, { Component } from 'react';
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import { withNamespaces } from 'react-i18next';
am4core.useTheme(am4themes_animated);
/**
* @extends Component
* @hideconstructor
*/
class PassDetail extends React.Component {
/**
* @constructs
* @param props
*/
constructor(props) {
super(props);
this.myRef = React.createRef();
}
// render() {
// const { t } = this.props;
// let table;
//
// table = <ReactTable
// filterable
// columns={[
// {
// Header: t('monitoredArea.info'),
// accessor: "name",
// width: 900,
// Filter: ({filter, onChange}) => (
// <div style={{position: 'relative'}}>
// <input
// onChange={event => onChange(event.target.value)}
// value={filter ? filter.value : ''}
// placeholder={t('monitoredArea.placeholderFilterByZone')}
// style={{
// width: '100%',
// backgroundColor: 'transparent',
// color: '#222222',
// }}
// />
// <i className="fa fa-search" style={{position: 'absolute', right: '10px', lineHeight: '30px'}}>
//
// </i>
// </div>
// ),
// },
// {
// Header: t('monitoredArea.passedVehicles'),
// accessor: "count",
// Filter: ({filter, onChange}) => (
// <div style={{position: 'relative'}}>
// <input
// onChange={event => onChange(event.target.value)}
// value={filter ? filter.value : ''}
// placeholder={t('monitoredArea.placeholderFilterByValue')}
// style={{
// width: '100%',
// backgroundColor: 'transparent',
// color: '#222222',
// }}
// />
// <i className="fa fa-search" style={{position: 'absolute', right: '10px', lineHeight: '30px'}}>
//
// </i>
// </div>
// ),
// },
// ]}
// data={this.props.data.tableOfTransits}
// defaultPageSize={7}
// className="-striped -highlight"
//
// />;
// return (
// <div>
// <div>{table}</div>
// </div>
// );
/**
*
* @param data
* @returns {XYChart}
*/
createHistoGraph = (data) => {
const { t } = this.props;
// Create chart instance
let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = data;
chart.data.sort((a, b) => a.count - b.count);
chart.seriesContainer.draggable = false;
chart.seriesContainer.draggable = false;
chart.seriesContainer.resizable = false;
chart.maxZoomLevel = 1;
// Create axes
let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
//categoryAxis.renderer.labels.template.rotation = 50;
categoryAxis.renderer.labels.template.disabled = true;
let valueAxis = chart.xAxes.push(new am4charts.ValueAxis( ));
valueAxis.title.text = t('graph.numberOfPassedVehicles');
// Create series
let series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "count";
series.dataFields.categoryY = "name";
series.columns.template.tooltipText = '{valueX}';
var valueLabel = series.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text = "{categoryY}";
valueLabel.label.fontSize = 10;
valueLabel.label.truncate = false;
valueLabel.label.hideOversized = false;
valueLabel.locationX = 1;
valueLabel.label.horizontalCenter = "left";
valueLabel.label.dx = 10;
valueLabel.tooltipText = '{categoryY}';
/* Create a heat rule */
series.heatRules.push({
"target": series.columns.template,
"property": "fill",
"min": am4core.color("#adf58c"),
"max": am4core.color("#ed8186"),
"dataField": "valueX"
});
//Set cell size in pixels
let cellSize = 40;
//kicks in at the moment when chart has finished processing its data.
chart.events.on("datavalidated", function(ev) {
// Get objects of interest
let chart = ev.target;
let categoryAxis = chart.yAxes.getIndex(0);
// Calculate how we need to adjust chart height
let adjustHeight;
if(chart.data.length < 2){
adjustHeight = 2 * cellSize - categoryAxis.pixelHeight;
} else {
adjustHeight = chart.data.length * cellSize - categoryAxis.pixelHeight;
}
// get current chart height
let targetHeight = chart.pixelHeight + adjustHeight;
// Set it on chart's container
// console.log("cell size: " + cellSize);
// console.log("category pixel height: " + categoryAxis.pixelHeight);
// console.log("pixel height: " + chart.pixelHeight);
// console.log("adjustHeight: " + adjustHeight);
// console.log("target: " + targetHeight);
chart.svgContainer.htmlElement.style.height = targetHeight + "px";
});
return chart;
}
/**
*
*/
componentDidMount() {
this.chart = this.createHistoGraph(this.props.data.tableOfTransits);
window.addEventListener('resize', () => {
if (this.props.data !== undefined && this.props.data.tableOfTransits !== undefined && this.props.data.tableOfTransits.length > 0) {
//this.chart = this.createHistoGraph(this.props.data.tableOfTransits);
this.reloadData(this.props.data.tableOfTransits)
}
});
}
/**
*
* @param prevProps
*/
componentDidUpdate(prevProps) {
if (this.props.data !== prevProps.data) {
if (this.props.data !== undefined && this.props.data.tableOfTransits !== undefined && this.props.data.tableOfTransits.length > 0) {
this.reloadData(this.props.data.tableOfTransits)
}
}
}
/**
*
* @param data
*/
reloadData(data){
if (this.chart !== undefined && this.chart !== null){
this.chart.data = data;
this.chart.data.sort((a, b) => a.count - b.count);
//Updating the graph to show the new data
this.chart.validateData();
}else{
this.chart = this.createHistoGraph(data);
}
}
/**
*
*/
componentWillUnmount() {
if (this.chart) {
this.chart.dispose();
}
}
/**
*
* @returns {*}
*/
render() {
const { t } = this.props;
let name;
if (this.props.data !== undefined && this.props.data.tableOfTransits !== undefined && this.props.data.tableOfTransits.length > 0)
name = t("graph.transit") + ": " + this.props.data.name;
else if (this.props.data !== undefined && this.props.data.name !== undefined)
name = t("graph.zone") + ": " + this.props.data.name;
else name = "";
return(
<div className="box">
<div className="box-header">
<div className="col-md-10">
<h3 className="box-title">{name}</h3>
</div>
</div>
<div ref={this.myRef} className="box-body">
{<div id="chartdiv" style={{
width: "100%",
height: "100%"
}}>
</div>}
<br/>
</div>
</div>
)
// if(this.props.data){
// return (
// <div>
// <div className="box">
// <div className="box-header">
// <div className="col-md-6">
// <h3 className="box-title text-right" >Chart of passed vehicles</h3>
// </div>
// </div>
// <div className="box-body">
// {<div id="chartdiv">
// </div>}
// </div>
// </div>
// </div>
// );
// }
// else {
// return (<div>Loading...</div>)
// }
}
}
export default withNamespaces()(PassDetail);