Source: components/userComponents/monitoredArea/detail/PassDetail.js

  1. import React, { Component } from 'react';
  2. import * as am4core from "@amcharts/amcharts4/core";
  3. import * as am4charts from "@amcharts/amcharts4/charts";
  4. import am4themes_animated from "@amcharts/amcharts4/themes/animated";
  5. import { withNamespaces } from 'react-i18next';
  7. am4core.useTheme(am4themes_animated);
  9. /**
  10.  * @extends Component
  11.  * @hideconstructor
  12.  */
  13. class PassDetail extends React.Component {
  15.   /**
  16.    * @constructs
  17.    * @param props
  18.    */
  19. 	constructor(props) {
  20. 		super(props);
  21.     this.myRef = React.createRef();
  22. 	}
  24. 	// render() {
  25. 	// 	const { t } = this.props;
  26. 		// let table;
  27. 		//
  28. 		// table = <ReactTable
  29. 		// 	filterable
  30. 		// 	columns={[
  31. 		// 		{
  32. 		// 			Header: t('monitoredArea.info'),
  33. 		// 			accessor: "name",
  34. 		// 			width: 900,
  35. 		// 			Filter: ({filter, onChange}) => (
  36. 		// 				<div style={{position: 'relative'}}>
  37. 		// 					<input
  38. 		// 						onChange={event => onChange(event.target.value)}
  39. 		// 						value={filter ? filter.value : ''}
  40. 		// 						placeholder={t('monitoredArea.placeholderFilterByZone')}
  41. 		// 						style={{
  42. 		// 							width: '100%',
  43. 		// 							backgroundColor: 'transparent',
  44. 		// 							color: '#222222',
  45. 		// 						}}
  46. 		// 					/>
  47. 		// 					<i className="fa fa-search" style={{position: 'absolute', right: '10px', lineHeight: '30px'}}>
  48. 		//
  49. 		// 					</i>
  50. 		// 				</div>
  51. 		// 			),
  52. 		// 		},
  53. 		// 		{
  54. 		// 			Header: t('monitoredArea.passedVehicles'),
  55. 		// 			accessor: "count",
  56. 		// 			Filter: ({filter, onChange}) => (
  57. 		// 				<div style={{position: 'relative'}}>
  58. 		// 					<input
  59. 		// 						onChange={event => onChange(event.target.value)}
  60. 		// 						value={filter ? filter.value : ''}
  61. 		// 						placeholder={t('monitoredArea.placeholderFilterByValue')}
  62. 		// 						style={{
  63. 		// 							width: '100%',
  64. 		// 							backgroundColor: 'transparent',
  65. 		// 							color: '#222222',
  66. 		// 						}}
  67. 		// 					/>
  68. 		// 					<i className="fa fa-search" style={{position: 'absolute', right: '10px', lineHeight: '30px'}}>
  69. 		//
  70. 		// 					</i>
  71. 		// 				</div>
  72. 		// 			),
  73. 		// 		},
  74. 		// 	]}
  75. 		// 	data={this.props.data.tableOfTransits}
  76. 		// 	defaultPageSize={7}
  77. 		// 	className="-striped -highlight"
  78. 		//
  79. 		// />;
  80. 		// return (
  81. 		// 	<div>
  82. 		// 		<div>{table}</div>
  83. 		// 	</div>
  84. 		// );
  85.   /**
  86. 	 *
  87.    * @param data
  88.    * @returns {XYChart}
  89.    */
  90. 		createHistoGraph = (data) => {
  92. 			const { t } = this.props;
  93. 			// Create chart instance
  94. 			let chart = am4core.create("chartdiv", am4charts.XYChart);
  96.       chart.data = data;
  97.       chart.data.sort((a, b) => a.count - b.count);
  99.       chart.seriesContainer.draggable = false;
  100.       chart.seriesContainer.draggable = false;
  101.       chart.seriesContainer.resizable = false;
  103.       chart.maxZoomLevel = 1;
  105. 			// Create axes
  106. 			let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
  107. 			categoryAxis.dataFields.category = "name";
  108. 			categoryAxis.renderer.grid.template.location = 0;
  109. 			categoryAxis.renderer.minGridDistance = 30;
  110. 			//categoryAxis.renderer.labels.template.rotation = 50;
  111.       categoryAxis.renderer.labels.template.disabled = true;
  113. 			let valueAxis = chart.xAxes.push(new am4charts.ValueAxis( ));
  114. 			valueAxis.title.text = t('graph.numberOfPassedVehicles');
  116. 			// Create series
  117. 			let series = chart.series.push(new am4charts.ColumnSeries());
  118. 			series.dataFields.valueX = "count";
  119. 			series.dataFields.categoryY = "name";
  120. 			series.columns.template.tooltipText = '{valueX}';
  122.       var valueLabel = series.bullets.push(new am4charts.LabelBullet());
  123.       valueLabel.label.text = "{categoryY}";
  124.       valueLabel.label.fontSize = 10;
  125.       valueLabel.label.truncate = false;
  126.       valueLabel.label.hideOversized = false;
  127.       valueLabel.locationX = 1;
  128.       valueLabel.label.horizontalCenter = "left";
  129.       valueLabel.label.dx = 10;
  130.       valueLabel.tooltipText = '{categoryY}';
  132.       /* Create a heat rule */
  133. 			series.heatRules.push({
  134. 				"target": series.columns.template,
  135. 				"property": "fill",
  136. 				"min": am4core.color("#adf58c"),
  137. 				"max": am4core.color("#ed8186"),
  138. 				"dataField": "valueX"
  139. 			});
  141.       //Set cell size in pixels
  142.       let cellSize = 40;
  143.       //kicks in at the moment when chart has finished processing its data.
  144.       chart.events.on("datavalidated", function(ev) {
  146.         // Get objects of interest
  147.         let chart = ev.target;
  148.         let categoryAxis = chart.yAxes.getIndex(0);
  150.         // Calculate how we need to adjust chart height
  151.         let adjustHeight;
  152.         if(chart.data.length < 2){
  153.           adjustHeight = 2 * cellSize - categoryAxis.pixelHeight;
  154.         } else {
  155.           adjustHeight = chart.data.length * cellSize - categoryAxis.pixelHeight;
  156.         }
  158.         // get current chart height
  159.         let targetHeight = chart.pixelHeight + adjustHeight;
  160.         // Set it on chart's container
  162.         // console.log("cell size: " + cellSize);
  163.         // console.log("category pixel height: " + categoryAxis.pixelHeight);
  164.         // console.log("pixel height: " + chart.pixelHeight);
  165.         // console.log("adjustHeight: " + adjustHeight);
  166.         // console.log("target: " + targetHeight);
  168.         chart.svgContainer.htmlElement.style.height = targetHeight + "px";
  169.       });
  170. 			return chart;
  172. 		}
  174.   /**
  175. 	 *
  176.    */
  177. 		componentDidMount() {
  178. 			this.chart = this.createHistoGraph(this.props.data.tableOfTransits);
  180.       window.addEventListener('resize', () => {
  181.       	if (this.props.data !== undefined && this.props.data.tableOfTransits !== undefined && this.props.data.tableOfTransits.length > 0) {
  182.           //this.chart = this.createHistoGraph(this.props.data.tableOfTransits);
  183.           this.reloadData(this.props.data.tableOfTransits)
  184.         }
  185.       });
  186. 		}
  188.   /**
  189. 	 *
  190.    * @param prevProps
  191.    */
  192. 		componentDidUpdate(prevProps) {
  193.       if (this.props.data !== prevProps.data) {
  194.         if (this.props.data !== undefined && this.props.data.tableOfTransits !== undefined && this.props.data.tableOfTransits.length > 0) {
  195. 					this.reloadData(this.props.data.tableOfTransits)
  196.         }
  197.       }
  198. 		}
  200.   /**
  201. 	 *
  202.    * @param data
  203.    */
  204. 		reloadData(data){
  205.       if (this.chart !== undefined && this.chart !== null){
  206.         this.chart.data = data;
  207.         this.chart.data.sort((a, b) => a.count - b.count);
  208.         //Updating the graph to show the new data
  209.         this.chart.validateData();
  210.       }else{
  211.         this.chart = this.createHistoGraph(data);
  212.       }
  213. 		}
  215.   /**
  216. 	 *
  217.    */
  218. 		componentWillUnmount() {
  219. 			if (this.chart) {
  220. 				this.chart.dispose();
  221. 			}
  222. 		}
  224.   /**
  225. 	 *
  226.    * @returns {*}
  227.    */
  228. 		render() {
  229. 			const { t } = this.props;
  231.       let name;
  232.       if (this.props.data !== undefined && this.props.data.tableOfTransits !== undefined && this.props.data.tableOfTransits.length > 0)
  233. 				 name = t("graph.transit") + ": " + this.props.data.name;
  234.       else if (this.props.data !== undefined && this.props.data.name !== undefined)
  235.       	name = t("graph.zone") + ": " + this.props.data.name;
  236.       else name = "";
  238. 			return(
  239. 					<div className="box">
  240. 						<div className="box-header">
  241. 							<div className="col-md-10">
  242. 								<h3 className="box-title">{name}</h3>
  244. 							</div>
  246. 						</div>
  248. 						<div ref={this.myRef} className="box-body">
  250. 							{<div id="chartdiv" style={{
  251.                 width: "100%",
  252.                 height: "100%"
  253.               }}>
  254. 							</div>}
  255. 							<br/>
  259. 						</div>
  260. 					</div>
  261. 			)
  263.         // if(this.props.data){
  264.         //     return (
  265.         //         <div>
  266.         //             <div className="box">
  267.         //                 <div className="box-header">
  268.         //                     <div className="col-md-6">
  269.         //                         <h3 className="box-title text-right" >Chart of passed vehicles</h3>
  270.         //                     </div>
  271.         //                 </div>
  272.         //                 <div className="box-body">
  273.         //                     {<div id="chartdiv">
  274.         //                     </div>}
  275.         //                 </div>
  276.         //             </div>
  277.         //         </div>
  278.         //     );
  279.         // }
  280.         // else {
  281.         //     return (<div>Loading...</div>)
  282.         // }
  284. 	}
  285. }
  287. export default withNamespaces()(PassDetail);