Source: components/userComponents/monitoredArea/graph/PieGraphOfPasses.js

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';
import {createColorsConfig} from "../../../../Utils";

am4core.useTheme(am4themes_animated);


/**
 * Component which contains the dynamic state for the chart
 * @extends Component
 * @hideconstructor
 */
class PieChartOfPasses extends Component {

  /**
	 *
   * @param data
   * @returns {PieChart}
   */
	createHistoGraph = (data) => {
		const {t} = this.props;

		/* Set theme(s) */
		am4core.useTheme(am4themes_animated);

		/* Create chart */
		var chart = am4core.create("piechartpassesdiv", am4charts.PieChart);

		chart.width = am4core.percent(100);
		chart.height = 250;
		/* Add data */

		chart.data = (data && data.length > 0) ? data : [];

		/* Create series */
		var series = chart.series.push(new am4charts.PieSeries());
		series.dataFields.value = "count";
		series.dataFields.category = "name";

		let colorConfig = createColorsConfig(data.map(item => item.count));
		series.colors.list = colorConfig.colors.reverse().map(color => am4core.color(color.toRgbString()));

		/* Disable labels */
		series.labels.template.disabled = true;
		series.ticks.template.disabled = true;

		/* Create legend */
		chart.legend = new am4charts.Legend();

		if(data.length > 0){
			/* Create a separate container to put legend in */
			var legendContainer = am4core.create("legenddiv", am4core.Container);
			legendContainer.width = am4core.percent(100);
			legendContainer.height = am4core.percent(100);
			chart.legend.parent = legendContainer;
		}

		chart.events.on("datavalidated", resizeLegend);
		chart.events.on("maxsizechanged", resizeLegend);
		
		function resizeLegend(ev) {
			let l = chart.legend;
			console.log("Legend content : h" + l.contentHeight + " w" + l.contentWidth + " pth" + l.percentHeight + " rh" + l._relativeHeight + " pxh" + l._pixelHeight + " ah" + l._absoluteHeight);

			document.getElementById("legenddiv").style.height = chart.legend.contentHeight + "px";
			document.getElementById("piechartpassesdiv").style.height = chart.contentHeight + "px";
		}

		return chart;
	};

  /**
	 *
   */
	componentDidMount() {
		this.chart = this.createHistoGraph(this.props.passes);
		console.log("componentDidMount passes: " + JSON.stringify(this.props.passes))
	}

  /**
	 *
   */
	componentDidUpdate() {
		this.chart = this.createHistoGraph(this.props.passes);
		console.log("componentDidUpdate passes: " + JSON.stringify(this.props.passes))
	}

  /**
	 *
   */
	componentWillUnmount() {
		if (this.chart) {
			this.chart.dispose();
		}
	}

  /**
	 *
   * @returns {*}
   */
	render() {
		const {t} = this.props;
		return (
			<div className="box">
				<div className="box-header with-border">
						<h3 className="box-title text-right">{t('graph.pieChartOfPassedVehicles')}</h3>
				</div>
				<div className="box-body">
					<div className="row">
						<div id="piechartpassesdiv"/>
						<div id="legendwrapper">
							<div id="legenddiv"/>
							<div>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}

export default withNamespaces()(PieChartOfPasses);