124 lines
2.9 KiB
JavaScript
124 lines
2.9 KiB
JavaScript
/**
|
|
* {}
|
|
* @author yutent<yutent.io@gmail.com>
|
|
* @date 2023/06/07 18:41:20
|
|
*/
|
|
|
|
function html(strs, ...vals) {
|
|
let output = ''
|
|
for (let it of strs) {
|
|
output += it + (vals.shift() ?? '')
|
|
}
|
|
return output
|
|
}
|
|
|
|
function text({ color, name, pc, idx }) {
|
|
let y = 32 + ~~(idx / 2 + 1) * 36
|
|
let x1 = idx % 2 === 0 ? 27 : 227
|
|
let x2 = idx % 2 === 0 ? 44 : 244
|
|
return html`
|
|
<g class="lang">
|
|
<circle cx="${x1}" cy="${y}" r="5" fill="${color}" />
|
|
<text x="${x2}" y="${y + 4}">${name} ${pc}%</text>
|
|
</g>
|
|
`
|
|
}
|
|
|
|
function pie(langs = [], sum = 0, height) {
|
|
// 圆心坐标
|
|
let cx = 540
|
|
let radius = ~~((height - 64) / 2) // 最小半径
|
|
let cy = radius + 48
|
|
let per = 0.25
|
|
let deg = per * 2 * Math.PI // 从90度开始计算
|
|
|
|
return langs
|
|
.map((it, idx) => {
|
|
// 扇形起始坐标
|
|
let r = +radius.toFixed(3)
|
|
let lx = +(cx + Math.sin(deg) * r).toFixed(3)
|
|
let ly = +(cy - Math.cos(deg) * r).toFixed(3)
|
|
let nx, ny
|
|
let _per = +(it.size / sum).toFixed(4)
|
|
|
|
radius *= 1.05
|
|
per += _per
|
|
deg = per * 2 * Math.PI
|
|
nx = +(cx + Math.sin(deg) * r * (per > 0.5 ? 1 : -1)).toFixed(3)
|
|
ny = +(cy - Math.cos(deg) * r).toFixed(3)
|
|
|
|
return html`
|
|
<path
|
|
class="pie pie-${idx}"
|
|
d="M${cx} ${cy} L${lx} ${ly} A${r} ${r} 0 ${_per > 0.5
|
|
? 1
|
|
: 0} 1 ${nx} ${ny} Z"
|
|
fill="${it.color}"
|
|
/>
|
|
`
|
|
})
|
|
.join('')
|
|
}
|
|
|
|
export function render({ title = 'Most Used Languages', langs = [] } = {}) {
|
|
let sum = langs.reduce((n, it) => n + it.size, 0)
|
|
let height = ~~(langs.length / 2 + 1) * 36 + 32
|
|
if (height < 140) {
|
|
height = 140
|
|
}
|
|
|
|
return html`
|
|
<svg
|
|
width="800"
|
|
height="${height}"
|
|
viewBox="0 0 800 ${height}"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<style>
|
|
.header {
|
|
font: bold 22px 'Segoe UI', Ubuntu, Sans-Serif;
|
|
fill: #64b5f6;
|
|
}
|
|
.lang {
|
|
font: 14px Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
fill: #64748b;
|
|
}
|
|
.pie {
|
|
opacity: 0;
|
|
animation: fade 0.5s ease-in-out forwards;
|
|
}
|
|
${langs
|
|
.map((it, i) => `.pie-${i} {animation-delay: ${i * 100}ms}`)
|
|
.join('\n')}
|
|
@keyframes
|
|
fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
<g transform="translate(24, 32)">
|
|
<text class="header">${title}</text>
|
|
</g>
|
|
<g class="lang-list">
|
|
${langs
|
|
.map((it, idx) =>
|
|
text({
|
|
color: it.color,
|
|
name: it.name,
|
|
pc: +((100 * it.size) / sum).toFixed(2),
|
|
idx
|
|
})
|
|
)
|
|
.join('')}
|
|
</g>
|
|
|
|
<g class="lang-pie">${pie(langs, sum, height)}</g>
|
|
</svg>
|
|
`
|
|
}
|