-
-
Notifications
You must be signed in to change notification settings - Fork 23.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Adds wakatime card route * Adds language progress on wakatime card * Adds wakatime card on README * Adds no coding activity node * Remove percent displayed on wakatime's card * Update readme * refactor: refactored code & added tests Co-authored-by: Anurag <[email protected]>
- Loading branch information
1 parent
e377770
commit 6e73a00
Showing
7 changed files
with
586 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| require("dotenv").config(); | ||
| const { | ||
| renderError, | ||
| parseBoolean, | ||
| clampValue, | ||
| CONSTANTS, | ||
| } = require("../src/common/utils"); | ||
| const { fetchLast7Days } = require("../src/fetchers/wakatime-fetcher"); | ||
| const wakatimeCard = require("../src/cards/wakatime-card"); | ||
|
|
||
| module.exports = async (req, res) => { | ||
| const { | ||
| username, | ||
| title_color, | ||
| icon_color, | ||
| hide_border, | ||
| line_height, | ||
| text_color, | ||
| bg_color, | ||
| theme, | ||
| cache_seconds, | ||
| hide_title, | ||
| hide_progress, | ||
| } = req.query; | ||
|
|
||
| res.setHeader("Content-Type", "image/svg+xml"); | ||
|
|
||
| try { | ||
| const last7Days = await fetchLast7Days({ username }); | ||
|
|
||
| let cacheSeconds = clampValue( | ||
| parseInt(cache_seconds || CONSTANTS.TWO_HOURS, 10), | ||
| CONSTANTS.TWO_HOURS, | ||
| CONSTANTS.ONE_DAY | ||
| ); | ||
|
|
||
| if (!cache_seconds) { | ||
| cacheSeconds = CONSTANTS.FOUR_HOURS; | ||
| } | ||
|
|
||
| res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`); | ||
|
|
||
| return res.send( | ||
| wakatimeCard(last7Days, { | ||
| hide_title: parseBoolean(hide_title), | ||
| hide_border: parseBoolean(hide_border), | ||
| line_height, | ||
| title_color, | ||
| icon_color, | ||
| text_color, | ||
| bg_color, | ||
| theme, | ||
| hide_progress, | ||
| }) | ||
| ); | ||
| } catch (err) { | ||
| return res.send(renderError(err.message, err.secondaryMessage)); | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| const { getCardColors, FlexLayout, clampValue } = require("../common/utils"); | ||
| const { getStyles } = require("../getStyles"); | ||
| const icons = require("../common/icons"); | ||
| const Card = require("../common/Card"); | ||
|
|
||
| const noCodingActivityNode = ({ color }) => { | ||
| return ` | ||
| <text x="25" y="11" class="stat bold" fill="${color}">No coding activity this week</text> | ||
| `; | ||
| }; | ||
|
|
||
| const createProgressNode = ({ | ||
| width, | ||
| color, | ||
| progress, | ||
| progressBarBackgroundColor, | ||
| }) => { | ||
| const progressPercentage = clampValue(progress, 2, 100); | ||
|
|
||
| return ` | ||
| <svg width="${width}" overflow="auto"> | ||
| <rect rx="5" ry="5" x="110" y="4" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect> | ||
| <rect | ||
| height="8" | ||
| fill="${color}" | ||
| rx="5" ry="5" x="110" y="4" | ||
| data-testid="lang-progress" | ||
| width="${progressPercentage}%" | ||
| > | ||
| </rect> | ||
| </svg> | ||
| `; | ||
| }; | ||
|
|
||
| const createTextNode = ({ | ||
| id, | ||
| label, | ||
| value, | ||
| index, | ||
| percent, | ||
| hideProgress, | ||
| progressBarColor, | ||
| progressBarBackgroundColor, | ||
| }) => { | ||
| const staggerDelay = (index + 3) * 150; | ||
|
|
||
| const cardProgress = hideProgress | ||
| ? null | ||
| : createProgressNode({ | ||
| 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" | ||
| x="${hideProgress ? 170 : 350}" | ||
| y="12.5" | ||
| data-testid="${id}" | ||
| >${value}</text> | ||
| ${cardProgress} | ||
| </g> | ||
| `; | ||
| }; | ||
|
|
||
| const renderWakatimeCard = (stats = {}, options = { hide: [] }) => { | ||
| const { languages } = stats; | ||
| const { | ||
| hide_title = false, | ||
| hide_border = false, | ||
| line_height = 25, | ||
| title_color, | ||
| icon_color, | ||
| text_color, | ||
| bg_color, | ||
| theme = "default", | ||
| hide_progress, | ||
| } = options; | ||
|
|
||
| const lheight = parseInt(line_height, 10); | ||
|
|
||
| // returns theme based colors with proper overrides and defaults | ||
| const { titleColor, textColor, iconColor, bgColor } = getCardColors({ | ||
| title_color, | ||
| icon_color, | ||
| text_color, | ||
| bg_color, | ||
| theme, | ||
| }); | ||
|
|
||
| const statItems = languages | ||
| ? languages | ||
| .filter((language) => language.hours || language.minutes) | ||
| .map((language) => { | ||
| return createTextNode({ | ||
| id: language.name, | ||
| label: language.name, | ||
| value: language.text, | ||
| percent: language.percent, | ||
| progressBarColor: titleColor, | ||
| progressBarBackgroundColor: textColor, | ||
| hideProgress: hide_progress, | ||
| }); | ||
| }) | ||
| : []; | ||
|
|
||
| // Calculate the card height depending on how many items there are | ||
| // but if rank circle is visible clamp the minimum height to `150` | ||
| let height = Math.max(45 + (statItems.length + 1) * lheight, 150); | ||
|
|
||
| const cssStyles = getStyles({ | ||
| titleColor, | ||
| textColor, | ||
| iconColor, | ||
| }); | ||
|
|
||
| const card = new Card({ | ||
| title: "Wakatime week stats", | ||
| width: 495, | ||
| height, | ||
| colors: { | ||
| titleColor, | ||
| textColor, | ||
| iconColor, | ||
| bgColor, | ||
| }, | ||
| }); | ||
|
|
||
| card.setHideBorder(hide_border); | ||
| card.setHideTitle(hide_title); | ||
| card.setCSS( | ||
| ` | ||
| ${cssStyles} | ||
| .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} } | ||
| ` | ||
| ); | ||
|
|
||
| return card.render(` | ||
| <svg x="0" y="0" width="100%"> | ||
| ${FlexLayout({ | ||
| items: statItems.length | ||
| ? statItems | ||
| : [noCodingActivityNode({ color: textColor })], | ||
| gap: lheight, | ||
| direction: "column", | ||
| }).join("")} | ||
| </svg> | ||
| `); | ||
| }; | ||
|
|
||
| module.exports = renderWakatimeCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| const axios = require("axios"); | ||
|
|
||
| const fetchLast7Days = async ({ username }) => { | ||
| const { data } = await axios.get( | ||
| `https://wakatime.com/api/v1/users/${username}/stats/last_7_days?is_including_today=true` | ||
| ); | ||
|
|
||
| return data.data; | ||
| }; | ||
|
|
||
| module.exports = { | ||
| fetchLast7Days, | ||
| }; |
Oops, something went wrong.