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

Stats card gradient (anuraghazra#218)

Browse Source
This commit is contained in:
Nathan Chu 2020-07-28 19:32:35 -04:00
parent 8854c6d6cb
commit d685d4d9df
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/renderStatsCard.js
View File

@ -54,6 +54,8 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const lheight = parseInt(line_height);
const isGradient = !(bg_color == undefined || bg_color.length == 6 || bg_color.length == 3)
// returns theme based colors with proper overrides and defaults
const { titleColor, textColor, iconColor, bgColor } = getCardColors({
title_color,
@ -63,6 +65,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
theme,
});
const gradientBgColor = isGradient ? bg_color.split(',') : undefined;
// Meta data for creating text nodes with createTextNode function
const STATS = {
stars: {
@ -143,12 +146,20 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
width="494"
height="99%"
rx="4.5"
fill="${bgColor}"
fill="${isGradient ? "url('#gradient')" : bgColor}"
stroke="#E4E2E2"
stroke-opacity="${hide_border ? 0 : 1}"
/>
`;
const gradient = isGradient ? `
<defs>
<linearGradient id="gradient" gradientTransform="rotate(${gradientBgColor[0]})">
<stop offset="0%" stop-color="#${gradientBgColor[1]}" />
<stop offset="100%" stop-color="#${gradientBgColor[2]}" />
</linearGradient>
</defs>`
: undefined
const rankCircle = hide_rank
? ""
: `<g data-testid="rank-circle" transform="translate(400, ${
@ -179,6 +190,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
${styles}
</style>
${isGradient ? gradient : ""}
${border}
${title}