Source: components/userComponents/monitoredArea/eventSum/LoadEventSum.js

import React from "react";
import {withNamespaces} from 'react-i18next';

const LocalConfiguration = require('../../../../LocalConfiguration');

/**
 * Event summary - vehicle classification
 * @extends Component
 * @hideconstructor
 */
class LoadEventSum extends React.Component {

  /**
   * @constructs
   * @param props
   */
	constructor(props) {
		super(props);
	}

  /**
   *
   */
	componentDidUpdate() {
		console.log("LoadEventSum: componentDidUpdate");
	}
/**
 */
	render() {
		const {t} = this.props;
		//let transitsA = [{zones:[0,1],count:1},{zones:[2,0],count:12},{zones:[0,2],count:8},{zones:[0,0],count:5},{zones:[1,0],count:7},{zones:[2,1],count:4},{zones:[2,2],count:10},{zones:[1,1],count:5},{zones:[1,2],count:9}];
		//this.state = {
		//  transits : [],
		////transits: transitsA,
		//transitsCount : 0
		//};
		let sumOfTransit = 0;
		if (this.props.data && this.props.data.length > 0) {
			sumOfTransit = this.props.data.filter(transit => transit.count)
				.reduce((sum, transit) => sum + transit.count, 0);
		}

		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 className="col-md-12 col-sm-12 col-xs-12">
              <div className="info-box">
                <span className="info-box-icon bg-aqua"><i className="fa fa-car"></i></span>

                <div className="info-box-content">
                  <span className="info-box-text">{t('loadEventSum.allTransits')}</span>
                  <span className="info-box-number">{sumOfTransit}</span>

                </div>
              </div>
            </div>
            {/* <div className="col-md-12 col-sm-12 col-xs-12">
                        <div className="info-box">
                            <span className="info-box-icon bg-aqua"><i className="fa fa-bus"></i></span>

                            <div className="info-box-content">
                                <span className="info-box-text">{t('loadEventSum.busTransits')}</span>
                                <span className="info-box-number" style={{color:'red'}}>TODO</span>
                            </div>
                        </div>
                    </div>
                    <div className="col-md-12 col-sm-12 col-xs-12">
                        <div className="info-box">
                            <span className="info-box-icon bg-aqua"><i className="fa fa-subway"></i></span>

                            <div className="info-box-content">
                                <span className="info-box-text">{t('loadEventSum.busTransits')}</span>
                                <span className="info-box-number" style={{color:'red'}}>TODO</span>
                            </div>
                        </div>
                    </div>*/}
          </div>
        </div>
      </div>
		);
	}
}

export default withNamespaces()(LoadEventSum);