| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76 | 2×
2×
2×
2×
| var PieProgress, React;
React = require('react');
PieProgress = React.createClass({displayName: "PieProgress",
propTypes: {
size: React.PropTypes.number.isRequired,
value: React.PropTypes.number.isRequired,
roundToQuarters: React.PropTypes.bool
},
radius: function(size) {
return size / 2;
},
buildCircle: function(value) {
var arcX, arcY, d, longArc, radius, size, x, y;
size = this.props.size;
radius = this.radius(size);
value = parseInt(value);
value = Math.min(Math.max(value, 0), 100);
x = Math.cos((2 * Math.PI) / (100 / value));
y = Math.sin((2 * Math.PI) / (100 / value));
longArc = value <= 50 ? 0 : 1;
arcX = radius + (y * radius);
arcY = radius - (x * radius);
return d = "M" + radius + " " + radius + " L" + radius + " 0 A" + radius + " " + radius + " 0 " + longArc + " 1 " + arcX + " " + arcY + " z";
},
roundToQuarters: function(value) {
if (value <= 49) {
return 25;
} else if (value >= 50 && value < 75) {
return 50;
} else {
return 75;
}
},
render: function() {
var circle, finished, fullCircle, notStarted, path, pieCircle, radius, ref, roundToQuarters, size, value;
ref = this.props, size = ref.size, value = ref.value, roundToQuarters = ref.roundToQuarters;
radius = this.radius(size);
fullCircle = React.createElement("circle", {
"r": "" + radius,
"cx": "" + radius,
"cy": "" + radius,
"className": 'slice'
});
circle = roundToQuarters != null ? this.buildCircle(this.roundToQuarters(value)) : this.buildCircle(value);
path = React.createElement("path", {
"d": "" + circle,
"className": 'slice'
});
pieCircle = React.createElement("svg", {
"width": "" + size,
"height": "" + size,
"className": 'pie-progress'
}, path);
finished = React.createElement("svg", {
"className": 'finished'
}, React.createElement("path", {
"d": "M12 0C5.372 0 0 5.373 0 12c0 6.627 5.372 12 12 12c6.628 0 12-5.373 12-12C24 5.373 18.628 0 12 0z M10.557 19.455l-7.042-7.042l2.828-2.828l4.243 4.242l7.07-7.071l2.829 2.829L10.557 19.455z"
}));
notStarted = React.createElement("i", {
"className": "fa fa-minus"
});
if (value >= 100) {
return finished;
} else if (value <= 0) {
return notStarted;
} else {
return pieCircle;
}
}
});
module.exports = PieProgress;
|