Skip to content

Commit

Permalink
feat: hide wakatime languages (anuraghazra#1212)
Browse files Browse the repository at this point in the history
* feat: added option to hide languages

* feat: recalculate percentages for hidden languages

* refactor: reverted langs_count and did some formatting

* doc: added hide to readme

* feat: make languages var mutable and improve filter logic

Co-authored-by: Adrian Kunz <[email protected]>

* refactor: improve code and added tests

Co-authored-by: Adrian Kunz <[email protected]>
Co-authored-by: Anurag <[email protected]>
  • Loading branch information
3 people authored Aug 27, 2021
1 parent 8f31634 commit 1a3edca
Show file tree
Hide file tree
Showing 8 changed files with 82 additions and 37 deletions.
3 changes: 3 additions & 0 deletions api/wakatime.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ const {
renderError,
parseBoolean,
clampValue,
parseArray,
CONSTANTS,
isLocaleAvailable,
} = require("../src/common/utils");
Expand All @@ -26,6 +27,7 @@ module.exports = async (req, res) => {
locale,
layout,
langs_count,
hide,
api_domain,
range,
border_radius,
Expand Down Expand Up @@ -58,6 +60,7 @@ module.exports = async (req, res) => {
custom_title,
hide_title: parseBoolean(hide_title),
hide_border: parseBoolean(hide_border),
hide: parseArray(hide),
line_height,
title_color,
icon_color,
Expand Down
1 change: 1 addition & 0 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,7 @@ You can provide multiple comma-separated values in bg_color option to render a g
#### Wakatime Card Exclusive Options:

- `hide` - Hide the languages specified from the card _(Comma-separated values)_
- `hide_title` - _(boolean)_
- `line_height` - Sets the line-height between text _(number)_
- `hide_progress` - Hides the progress bar and percentage _(boolean)_
Expand Down
9 changes: 6 additions & 3 deletions src/cards/top-languages-card.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,18 @@ const Card = require("../common/Card");
const I18n = require("../common/I18n");
const { langCardLocales } = require("../translations");
const { createProgressNode } = require("../common/createProgressNode");
const { clampValue, getCardColors, flexLayout } = require("../common/utils");
const {
clampValue,
getCardColors,
flexLayout,
lowercaseTrim,
} = require("../common/utils");

const DEFAULT_CARD_WIDTH = 300;
const DEFAULT_LANGS_COUNT = 5;
const DEFAULT_LANG_COLOR = "#858585";
const CARD_PADDING = 25;

const lowercaseTrim = (name) => name.toLowerCase().trim();

const createProgressTextNode = ({ width, color, name, progress }) => {
const paddingRight = 95;
const progressTextX = width - paddingRight + 10;
Expand Down
78 changes: 52 additions & 26 deletions src/cards/wakatime-card.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@ const { getStyles } = require("../getStyles");
const { wakatimeCardLocales } = require("../translations");
const languageColors = require("../common/languageColors.json");
const { createProgressNode } = require("../common/createProgressNode");
const { clampValue, getCardColors, flexLayout } = require("../common/utils");
const {
clampValue,
getCardColors,
flexLayout,
lowercaseTrim,
} = require("../common/utils");

const noCodingActivityNode = ({ color, text }) => {
return `
Expand Down Expand Up @@ -61,34 +66,47 @@ const createTextNode = ({
const cardProgress = hideProgress
? null
: createProgressNode({
x: 110,
y: 4,
progress: percent,
color: progressBarColor,
width: 220,
name: label,
progressBarBackgroundColor,
});
x: 110,
y: 4,
progress: percent,
color: progressBarColor,
width: 220,
name: label,
progressBarBackgroundColor,
});

return `
<g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
<text class="stat bold" y="12.5">${label}:</text>
<text class="stat bold" y="12.5" data-testid="${id}">${label}:</text>
<text
class="stat"
x="${hideProgress ? 170 : 350}"
y="12.5"
data-testid="${id}"
>${value}</text>
${cardProgress}
</g>
`;
};

const recalculatePercentages = (languages) => {
// recalculating percentages so that,
// compact layout's progress bar does not break when hiding languages
const totalSum = languages.reduce(
(totalSum, language) => totalSum + language.percent,
0,
);
const weight = (100 / totalSum).toFixed(2);
languages.forEach((language) => {
language.percent = (language.percent * weight).toFixed(2);
});
};

const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
const { languages } = stats;
let { languages } = stats;
const {
hide_title = false,
hide_border = false,
hide,
line_height = 25,
title_color,
icon_color,
Expand All @@ -104,6 +122,15 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
border_color,
} = options;

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

const i18n = new I18n({
locale,
translations: wakatimeCardLocales,
Expand Down Expand Up @@ -131,8 +158,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
Expand Down Expand Up @@ -186,17 +213,16 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
</mask>
${compactProgressBar}
${createLanguageTextNode({
x: 0,
y: 25,
langs: filteredLanguages,
totalSize: 100,
}).join("")}
x: 0,
y: 25,
langs: filteredLanguages,
totalSize: 100,
}).join("")}
`;
} else {
finalLayout = flexLayout({
items: filteredLanguages.length
? filteredLanguages
.map((language) => {
? filteredLanguages.map((language) => {
return createTextNode({
id: language.name,
label: language.name,
Expand All @@ -208,11 +234,11 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
});
})
: [
noCodingActivityNode({
color: textColor,
text: i18n.t("wakatimecard.nocodingactivity"),
}),
],
noCodingActivityNode({
color: textColor,
text: i18n.t("wakatimecard.nocodingactivity"),
}),
],
gap: lheight,
direction: "column",
}).join("");
Expand Down
2 changes: 2 additions & 0 deletions src/common/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ function measureText(str, fontSize = 10) {
.reduce((cur, acc) => acc + cur) * fontSize
);
}
const lowercaseTrim = (name) => name.toLowerCase().trim();

module.exports = {
renderError,
Expand All @@ -248,4 +249,5 @@ module.exports = {
logger,
CONSTANTS,
CustomError,
lowercaseTrim,
};
6 changes: 2 additions & 4 deletions tests/__snapshots__/renderWakatimeCard.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,11 @@ exports[`Test Render Wakatime Card should render correctly 1`] = `
<svg x=\\"0\\" y=\\"0\\" width=\\"100%\\">
<g transform=\\"translate(0, 0)\\">
<g class=\\"stagger\\" style=\\"animation-delay: NaNms\\" transform=\\"translate(25, 0)\\">
<text class=\\"stat bold\\" y=\\"12.5\\">Other:</text>
<text class=\\"stat bold\\" y=\\"12.5\\" data-testid=\\"Other\\">Other:</text>
<text
class=\\"stat\\"
x=\\"350\\"
y=\\"12.5\\"
data-testid=\\"Other\\"
>19 mins</text>
<svg width=\\"220\\" x=\\"110\\" y=\\"4\\">
Expand All @@ -122,12 +121,11 @@ exports[`Test Render Wakatime Card should render correctly 1`] = `
</g>
</g><g transform=\\"translate(0, 25)\\">
<g class=\\"stagger\\" style=\\"animation-delay: NaNms\\" transform=\\"translate(25, 0)\\">
<text class=\\"stat bold\\" y=\\"12.5\\">TypeScript:</text>
<text class=\\"stat bold\\" y=\\"12.5\\" data-testid=\\"TypeScript\\">TypeScript:</text>
<text
class=\\"stat\\"
x=\\"350\\"
y=\\"12.5\\"
data-testid=\\"TypeScript\\"
>1 min</text>
<svg width=\\"220\\" x=\\"110\\" y=\\"4\\">
Expand Down
1 change: 0 additions & 1 deletion tests/renderTopLanguages.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
require("@testing-library/jest-dom");
const cssToObject = require("css-to-object");
const fetchTopLanguages = require("../src/fetchers/top-languages-fetcher");
const renderTopLanguages = require("../src/cards/top-languages-card");

const { queryByTestId, queryAllByTestId } = require("@testing-library/dom");
Expand Down
19 changes: 16 additions & 3 deletions tests/renderWakatimeCard.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
require("@testing-library/jest-dom");
const renderWakatimeCard = require("../src/cards/wakatime-card");
const { queryByTestId } = require("@testing-library/dom");

const renderWakatimeCard = require("../src/cards/wakatime-card");
const { wakaTimeData } = require("./fetchWakatime.test");

describe("Test Render Wakatime Card", () => {
Expand All @@ -16,6 +17,16 @@ describe("Test Render Wakatime Card", () => {
expect(card).toMatchSnapshot();
});

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

expect(queryByTestId(document.body, /YAML/i)).toBeNull();
expect(queryByTestId(document.body, /Other/i)).toBeNull();
expect(queryByTestId(document.body, /TypeScript/i)).not.toBeNull();
});

it("should render translations", () => {
document.body.innerHTML = renderWakatimeCard({}, { locale: "cn" });
expect(document.getElementsByClassName("header")[0].textContent).toBe(
Expand All @@ -28,9 +39,11 @@ describe("Test Render Wakatime Card", () => {
});

it("should render without rounding", () => {
document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, { border_radius: "0" });
document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, {
border_radius: "0",
});
expect(document.querySelector("rect")).toHaveAttribute("rx", "0");
document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, { });
document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, {});
expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
});
});

0 comments on commit 1a3edca

Please sign in to comment.