Gauges Overview

import {
    ArcGauge,
    LinearGauge,
    RadialGauge
} from '@progress/kendo-react-gauges';

const DemoContainer = ({ heading, children }) =>
    (<div><h1>{heading}</h1>{children}</div>);

const value = 30;
const pointer = {
    value: value
};

const arcCenterRenderer = (currentValue, color) => {
    return (<h3 style={{color: color}}>{currentValue}%</h3>);
};

const gaugeStyles = {
    display: 'block'
};

const GaugeContainer = () => (
    <DemoContainer heading="Gauges demos">
        <div className="row">
            <div className="col-sm-12 col-md-2">
                <LinearGauge style={gaugeStyles} pointer={pointer} />
            </div>
            <div className="col-sm-12 col-md-5">
                <RadialGauge style={gaugeStyles} pointer={pointer} />
            </div>
            <div className="col-sm-12 col-md-5">
                <ArcGauge style={gaugeStyles} value={value} arcCenterRender={arcCenterRenderer} />
            </div>
        </div>
    </DemoContainer>
);

ReactDOM.render(
    <GaugeContainer />,
    document.querySelector('my-app')
);