cluedin-widget/core/components/entityRelated/EntityKPIViewer.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from 'react';
import RadialProgress from '../charts/RadialProgress.jsx';

class EntityKpiDecorator extends Component {
  render() {
    const { title } = this.props;

    return (
      <div style={{ float: 'left', marginRight: '30px', textAlign: 'center' }}>
        <div style={{marginBottom: '15px' }}>{title}</div>

        {this.props.children}
      </div>
    );
  }
}

export default class EntityKPIViewer extends Component {
  render() {
    const { kpi } = this.props;
    const key = kpi.key;

    switch (key) {
      case 'property-organization.kpi-communication':
        return (<EntityKpiDecorator title="Communication Index">
          <RadialProgress diameter={150} value={parseInt(kpi.value, 10)} minValue={0} maxValue={10}/>
        </EntityKpiDecorator>);
      case 'property-organization.kpi-connectivity':
        return (<EntityKpiDecorator title="Connectivity Index">
          <RadialProgress diameter={150} value={parseInt(kpi.value, 10)} minValue={0} maxValue={10}/>
        </EntityKpiDecorator>);
      default:
        return (<span></span>);
    }
  }
}