avior/codestats-readme
1
0
Fork 0
mirror of https://github.com/Aviortheking/codestats-readme.git synced 2025-04-22 10:42:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

design: added a rim to circle rank's progress

Browse Source
This commit is contained in:
anuraghazra 2020-07-14 13:02:45 +05:30
parent 014f710e12
commit 6f79b495a6
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/renderStatsCard.js
View File

@ -83,7 +83,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const statItems = Object.keys(STATS) const statItems = Object.keys(STATS)
.filter((key) => !hide.includes(key)) .filter((key) => !hide.includes(key))
.map((key, index) => .map((key, index) =>
// create the text nodes, and pass index so that we can calculate the line spacing // create the text nodes, and pass index so that we can calculate the line spacing
createTextNode({ ...STATS[key], index, lineHeight: lheight }) createTextNode({ ...STATS[key], index, lineHeight: lheight })
); );
@ -113,6 +113,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
: `<g data-testid="rank-circle" transform="translate(400, ${ : `<g data-testid="rank-circle" transform="translate(400, ${
height / 1.85 height / 1.85
})"> })">
<circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
<circle class="rank-circle" cx="-10" cy="8" r="40" /> <circle class="rank-circle" cx="-10" cy="8" r="40" />
<text <text
x="0" x="0"
@ -139,6 +140,12 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
fill: ${iconColor}; fill: ${iconColor};
display: ${!!show_icons ? "block" : "none"}; display: ${!!show_icons ? "block" : "none"};
} }
.rank-circle-rim {
stroke: ${titleColor};
fill: none;
stroke-width: 6;
opacity: 0.2;
}
.rank-circle { .rank-circle {
stroke-dashoffset: 30; stroke-dashoffset: 30;
stroke-dasharray: ${rankProgress}; stroke-dasharray: ${rankProgress};