You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
1.0 KiB
32 lines
1.0 KiB
7 years ago
|
import React, { Component } from 'react'
|
||
|
|
import PropTypes from 'prop-types'
|
||
|
|
import styles from './Donut.scss'
|
||
|
|
|
||
|
|
const Donut = ({ value, size, strokewidth }) => {
|
||
|
|
console.log('value: ', value)
|
||
|
|
console.log('size: ', size)
|
||
|
|
console.log('strokewidth: ', strokewidth)
|
||
|
|
|
||
|
|
const halfsize = (size * 0.5);
|
||
|
|
const radius = halfsize - (strokewidth * 0.5);
|
||
|
|
const circumference = 2 * Math.PI * radius;
|
||
|
|
const strokeval = ((value * circumference) / 100);
|
||
|
|
const dashval = (strokeval + ' ' + circumference);
|
||
|
|
|
||
|
|
const trackstyle = {strokeWidth: 5};
|
||
|
|
const indicatorstyle = {strokeWidth: strokewidth, strokeDasharray: dashval}
|
||
|
|
const rotateval = 'rotate(-90 '+37.5+','+37.5+')';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<svg width={75} height={75} className={styles.donutchart}>
|
||
|
|
<circle r={30} cx={37.5} cy={37.5} transform={rotateval} style={trackstyle} className={styles.donutchartTrack} />
|
||
|
|
<circle r={30} cx={37.5} cy={37.5} transform={rotateval} style={indicatorstyle} className={styles.donutchartIndicator} />
|
||
|
|
</svg>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
Donut.propTypes = {
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Donut
|