-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (80 loc) · 2.25 KB
/
index.html
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>React Circular Legend</title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-weight: 200;
margin: 0 auto;
width: 750px;
}
</style>
</head>
<body>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.3.0/react-dom.js"></script>
<script src="//fb.me/JSXTransformer-0.13.3.js"></script>
<script src="dist/react-circular-legend.js"></script>
<script type="text/jsx">
function sigFigs(n, sig) {
var mult = Math.pow(10,
sig - Math.floor(Math.log(n) / Math.LN10) - 1);
return Math.round(n * mult) / mult;
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
domain: [0, 10000],
ticks: [0, 2500, 5000, 10000]
}
}
componentDidMount() {
setTimeout(() => this.update(), 2000);
}
update() {
const max = sigFigs(Math.random() * 1e6, 1);
const pattern = [
[0, 1, 2, 3],
[0, 1.25, 2.5, 5, 10],
[1, 3, 5],
[0, 2, 4, 8],
];
const rand = Math.floor(Math.random() * 4);
const min = max/pattern[rand][pattern[rand].length -1];
this.setState({
domain: [0, max],
ticks: pattern[rand].map((num) => num*min),
});
setTimeout(() => this.update(), 2000);
}
render() {
const { ticks, domain } = this.state;
const width = 400;
const rangeMax = width/2.5;
return (
<div>
<h1>react-circular-legend</h1>
<div style={{position: 'relative'}}>
<svg width={width} height={width} style={{position: 'absolute', top: 0, left: 0, right: 0, margin: 'auto'}}>
<CircularLegend
ticks={ticks}
domainMax={domain[1]}
domainMin={domain[0]}
rangeMax={rangeMax}
fontSize={12}
innerSvg={true}
/>
</svg>
</div>
</div>
);
}
};
ReactDOM.render(<App/>, document.getElementById('root')) //document.body);
</script>
<div id="root"></div>
</body>
</html>