cluedin-widget/core/components/charts/RadialProgress.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, PropTypes } from 'react';
import d3Chart from '../../d3/index';
import ReactDom from 'react-dom';

export default class RadialProgress extends Component {

  static propTypes = {
    diameter: PropTypes.number,
    minValue: PropTypes.number,
    maxValue: PropTypes.number,
    value: PropTypes.number,
    label: PropTypes.string,
  };

  componentDidMount() {
    const {
      label,
      diameter,
      value,
      minValue,
      maxValue,
    } = this.props;

    const chartElement = ReactDom.findDOMNode(this.refs.chart);

    d3Chart.radialProgress(chartElement)
      .label(label || '')
      .diameter(diameter)
      .minValue(minValue || 0)
      .maxValue(maxValue || 36000)
      .value(value)
      .render();
  }

  render() {
    return (<div><div ref="chart"></div></div>);
  }
}