shuuji3.xyz
[READ-ONLY] Mirror of https://github.com/shuuji3/github-readme-stats.
github-readme-stats-shuuji3.vercel.app
2.0 kB
94 lines
1const calculateCircleProgress = (value) => {
2 let radius = 40;
3 let c = Math.PI * (radius * 2);
4
5 if (value < 0) value = 0;
6 if (value > 100) value = 100;
7
8 let percentage = ((100 - value) / 100) * c;
9 return percentage;
10};
11
12const getProgressAnimation = ({ progress }) => {
13 return `
14 @keyframes rankAnimation {
15 from {
16 stroke-dashoffset: ${calculateCircleProgress(0)};
17 }
18 to {
19 stroke-dashoffset: ${calculateCircleProgress(progress)};
20 }
21 }
22 `;
23};
24
25const getAnimations = () => {
26 return `
27 /* Animations */
28 @keyframes scaleInAnimation {
29 from {
30 transform: translate(-5px, 5px) scale(0);
31 }
32 to {
33 transform: translate(-5px, 5px) scale(1);
34 }
35 }
36 @keyframes fadeInAnimation {
37 from {
38 opacity: 0;
39 }
40 to {
41 opacity: 1;
42 }
43 }
44 `;
45};
46
47const getStyles = ({
48 titleColor,
49 textColor,
50 iconColor,
51 show_icons,
52 progress,
53}) => {
54 return `
55 .stat {
56 font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
57 }
58 .stagger {
59 opacity: 0;
60 animation: fadeInAnimation 0.3s ease-in-out forwards;
61 }
62 .rank-text {
63 font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor};
64 animation: scaleInAnimation 0.3s ease-in-out forwards;
65 }
66
67 .bold { font-weight: 700 }
68 .icon {
69 fill: ${iconColor};
70 display: ${!!show_icons ? "block" : "none"};
71 }
72
73 .rank-circle-rim {
74 stroke: ${titleColor};
75 fill: none;
76 stroke-width: 6;
77 opacity: 0.2;
78 }
79 .rank-circle {
80 stroke: ${titleColor};
81 stroke-dasharray: 250;
82 fill: none;
83 stroke-width: 6;
84 stroke-linecap: round;
85 opacity: 0.8;
86 transform-origin: -10px 8px;
87 transform: rotate(-90deg);
88 animation: rankAnimation 1s forwards ease-in-out;
89 }
90 ${process.env.NODE_ENV === "test" ? "" : getProgressAnimation({ progress })}
91 `;
92};
93
94module.exports = { getStyles, getAnimations };