Skip to content

Commit

Permalink
Fix truncation of compact wakatime progress bar when langs_count is s…
Browse files Browse the repository at this point in the history 
…et (anuraghazra#2228)

* refactor: use default value for languages

* fix: truncated compact progress bar

* test: add test for truncated compact progress bar with langs_count set
  • Loading branch information
@raychanks @devantler
raychanks authored and devantler committed May 1, 2023
1 parent f014890 commit 5ab3f21
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 11 deletions.
18 changes: 10 additions & 8 deletions src/cards/wakatime-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ const recalculatePercentages = (languages) => {
* @returns {string} WakaTime card SVG.
*/
const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
let { languages } = stats;
let { languages = [] } = stats;
const {
hide_title = false,
hide_border = false,
Expand All @@ -174,20 +174,24 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
custom_title,
locale,
layout,
langs_count = languages ? languages.length : 0,
langs_count = languages.length,
border_radius,
border_color,
} = options;

const shouldHideLangs = Array.isArray(hide) && hide.length > 0;
if (shouldHideLangs && languages !== undefined) {
if (shouldHideLangs) {
const languagesToHide = new Set(hide.map((lang) => lowercaseTrim(lang)));
languages = languages.filter(
(lang) => !languagesToHide.has(lowercaseTrim(lang.name)),
);
recalculatePercentages(languages);
}

// Since the percentages are sorted in descending order, we can just
// slice from the beginning without sorting.
languages = languages.slice(0, langs_count);
recalculatePercentages(languages);

const i18n = new I18n({
locale,
translations: wakatimeCardLocales,
Expand All @@ -209,10 +213,8 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
});

const filteredLanguages = languages
? languages
.filter((language) => language.hours || language.minutes)
.slice(0, langsCount)
: [];
.filter((language) => language.hours || language.minutes)
.slice(0, langsCount);

// Calculate the card height depending on how many items there are
// but if rank circle is visible clamp the minimum height to `150`
Expand Down
164 changes: 161 additions & 3 deletions tests/__snapshots__/renderWakatimeCard.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,17 +122,175 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
data-testid="lang-progress"
x="0"
y="0"
width="6.6495"
width="415.61699999999996"
height="8"
fill="#858585"
/>
<rect
mask="url(#rect-mask)"
data-testid="lang-progress"
x="6.6495"
x="415.61699999999996"
y="0"
width="0.465"
width="29.0625"
height="8"
fill="#3178c6"
/>
<g transform="translate(25, 25)">
<circle cx="5" cy="6" r="5" fill="#858585" />
<text data-testid="lang-name" x="15" y="10" class='lang-name'>
Other - 19 mins
</text>
</g>
<g transform="translate(230, 25)">
<circle cx="5" cy="6" r="5" fill="#3178c6" />
<text data-testid="lang-name" x="15" y="10" class='lang-name'>
TypeScript - 1 min
</text>
</g>
</svg>
</g>
</svg>
"
`;

exports[`Test Render Wakatime Card should render correctly with compact layout when langs_count is set 1`] = `
"
<svg
width="495"
height="115"
viewBox="0 0 495 115"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-labelledby="descId"
>
<title id="titleId"></title>
<desc id="descId"></desc>
<style>
.header {
font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
fill: #2f80ed;
animation: fadeInAnimation 0.8s ease-in-out forwards;
}
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.header { font-size: 15.5px; }
}
.stat {
font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #434d58;
}
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.stat { font-size:12px; }
}
.stagger {
opacity: 0;
animation: fadeInAnimation 0.3s ease-in-out forwards;
}
.rank-text {
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58;
animation: scaleInAnimation 0.3s ease-in-out forwards;
}
.not_bold { font-weight: 400 }
.bold { font-weight: 700 }
.icon {
fill: #4c71f2;
display: none;
}
.rank-circle-rim {
stroke: #2f80ed;
fill: none;
stroke-width: 6;
opacity: 0.2;
}
.rank-circle {
stroke: #2f80ed;
stroke-dasharray: 250;
fill: none;
stroke-width: 6;
stroke-linecap: round;
opacity: 0.8;
transform-origin: -10px 8px;
transform: rotate(-90deg);
animation: rankAnimation 1s forwards ease-in-out;
}
.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
</style>
<rect
data-testid="card-bg"
x="0.5"
y="0.5"
rx="4.5"
height="99%"
stroke="#e4e2e2"
width="494"
fill="#fffefe"
stroke-opacity="1"
/>
<g
data-testid="card-title"
transform="translate(25, 35)"
>
<g transform="translate(0, 0)">
<text
x="0"
y="0"
class="header"
data-testid="header"
>Wakatime Stats</text>
</g>
</g>
<g
data-testid="main-card-body"
transform="translate(0, 55)"
>
<svg x="0" y="0" width="100%">
<mask id="rect-mask">
<rect x="25" y="0" width="440" height="8" fill="white" rx="5" />
</mask>
<rect
mask="url(#rect-mask)"
data-testid="lang-progress"
x="0"
y="0"
width="436.4025"
height="8"
fill="#858585"
/>
<rect
mask="url(#rect-mask)"
data-testid="lang-progress"
x="436.4025"
y="0"
width="30.503999999999998"
height="8"
fill="#3178c6"
/>
Expand Down
9 changes: 9 additions & 0 deletions tests/renderWakatimeCard.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,15 @@ describe("Test Render Wakatime Card", () => {
expect(card).toMatchSnapshot();
});

it("should render correctly with compact layout when langs_count is set", () => {
const card = renderWakatimeCard(wakaTimeData.data, {
layout: "compact",
langs_count: 2,
});

expect(card).toMatchSnapshot();
});

it("should hide languages when hide is passed", () => {
document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, {
hide: ["YAML", "Other"],
Expand Down

0 comments on commit 5ab3f21

Please sign in to comment.