-
Notifications
You must be signed in to change notification settings - Fork 2
/
github-chart.js
57 lines (52 loc) · 1.72 KB
/
github-chart.js
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
import React from 'react';
import PropTypes from 'prop-types';
const Chart = ({ data }) => {
const css_string = data
.map((chart) => {
const { color, start_degrees, end_degrees } = chart;
return ` ${color} ${start_degrees}deg ${end_degrees}deg`;
})
.join();
return (
<div className='flex flex-col gap-8 grow'>
<div className='flex flex-col'>
<h2 className='m-0 text-white text-xl font-bold'>GitHub Chart</h2>
<a
href='https://github.com/PaulieScanlon/css-conic-gradient-charts/blob/main/components/github-chart.js'
target='_blank'
rel='noopener'
className='m-0 text-xs text-gray-400 flex hover:text-yellow-300'
>
./components/github-chart.js
</a>
</div>
<div className='flex grow justify-center'>
<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' className='w-full h-full rounded-full'>
<clipPath id='hole'>
<path d='M 50 0 a 50 50 0 0 1 0 100 50 50 0 0 1 0 -100 v 18 a 2 2 0 0 0 0 64 2 2 0 0 0 0 -64' />
</clipPath>
<foreignObject x='0' y='0' width='100' height='100' clipPath='url(#hole)'>
<div
xmlns='http://www.w3.org/1999/xhtml'
className='w-full h-full'
style={{
background: `conic-gradient(${css_string})`,
}}
/>
</foreignObject>
</svg>
</div>
</div>
);
};
Chart.propTypes = {
/** Shape of the data to drive the chart */
data: PropTypes.arrayOf(
PropTypes.shape({
name: PropTypes.string.isRequired,
value: PropTypes.number.isRequired,
color: PropTypes.string,
})
).isRequired,
};
export default Chart;