Merge pull request #48 from anuraghazra/fix-circl-rank-rim

design: added a rim to circle rank's progress
This commit is contained in:
Anurag Hazra 2020-07-14 13:12:56 +05:30 committed by GitHub
commit cbd0e583ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -83,7 +83,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const statItems = Object.keys(STATS)
.filter((key) => !hide.includes(key))
.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 })
);
@ -113,6 +113,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
: `<g data-testid="rank-circle" transform="translate(400, ${
height / 1.85
})">
<circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
<circle class="rank-circle" cx="-10" cy="8" r="40" />
<text
x="0"
@ -139,6 +140,12 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
fill: ${iconColor};
display: ${!!show_icons ? "block" : "none"};
}
.rank-circle-rim {
stroke: ${titleColor};
fill: none;
stroke-width: 6;
opacity: 0.2;
}
.rank-circle {
stroke-dashoffset: 30;
stroke-dasharray: ${rankProgress};