feat: add option to change progress bar background color for top lang…

… card in normal layout (anuraghazra#3307)
MoazAlaa7 · Oct 6, 2024 · c381720 · c381720
1 parent 92237ca
commit c381720
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/api/top-langs.js b/api/top-langs.js
@@ -33,6 +33,7 @@ export default async (req, res) => {
     border_color,
     disable_animations,
     hide_progress,
+    progress_bar_bg_color,
   } = req.query;
   res.setHeader("Content-Type", "image/svg+xml");
 
@@ -104,6 +105,7 @@ export default async (req, res) => {
         locale: locale ? locale.toLowerCase() : null,
         disable_animations: parseBoolean(disable_animations),
         hide_progress: parseBoolean(hide_progress),
+        progress_bar_bg_color,
       }),
     );
   } catch (err) {

diff --git a/readme.md b/readme.md
@@ -413,6 +413,7 @@ If we don't support your language, please consider contributing! You can find mo
 | `custom_title` | Sets a custom title for the card. | string | `Most Used Languages` |
 | `disable_animations` | Disables all animations in the card. | boolean | `false` |
 | `hide_progress` | Uses the compact layout option, hides percentages, and removes the bars. | boolean | `false` |
+| `progress_bar_bg_color` | Sets the background color of the progress bar. | string | `#ddd` |
 | `size_weight` | Configures language stats algorithm (see [Language stats algorithm](#language-stats-algorithm)). | integer | `1` |
 | `count_weight` | Configures language stats algorithm (see [Language stats algorithm](#language-stats-algorithm)). | integer | `0` |
 
@@ -842,4 +843,4 @@ Thanks! :heart:
 
 Contributions are welcome! <3
 
-Made with :heart: and JavaScript.
+Made with :heart: and JavaScript.
diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js
@@ -203,11 +203,19 @@ const trimTopLanguages = (topLangs, langs_count, hide) => {
  * @param {number} props.width The card width
  * @param {string} props.color Color of the programming language.
  * @param {string} props.name Name of the programming language.
+ * @param {string | undefined} props.progressBarBgColor Color of the background of progress bar.
  * @param {number} props.progress Usage of the programming language in percentage.
  * @param {number} props.index Index of the programming language.
  * @returns {string} Programming language SVG node.
  */
-const createProgressTextNode = ({ width, color, name, progress, index }) => {
+const createProgressTextNode = ({
+  width,
+  color,
+  name,
+  progress,
+  index,
+  progressBarBgColor,
+}) => {
   const staggerDelay = (index + 3) * 150;
   const paddingRight = 95;
   const progressTextX = width - paddingRight + 10;
@@ -223,7 +231,9 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => {
         color,
         width: progressWidth,
         progress,
-        progressBarBackgroundColor: "#ddd",
+        progressBarBackgroundColor: progressBarBgColor
+          ? `#${progressBarBgColor}`
+          : "#ddd",
         delay: staggerDelay + 300,
       })}
     </g>
@@ -322,9 +332,15 @@ const createDonutLanguagesNode = ({ langs, totalSize }) => {
  * @param {Lang[]} langs Array of programming languages.
  * @param {number} width Card width.
  * @param {number} totalLanguageSize Total size of all languages.
+ * @param {string | undefined} progressBarBgColor Color of the background of progress bar.
  * @returns {string} Normal layout card SVG object.
  */
-const renderNormalLayout = (langs, width, totalLanguageSize) => {
+const renderNormalLayout = (
+  langs,
+  width,
+  totalLanguageSize,
+  progressBarBgColor,
+) => {
   return flexLayout({
     items: langs.map((lang, index) => {
       return createProgressTextNode({
@@ -335,6 +351,7 @@ const renderNormalLayout = (langs, width, totalLanguageSize) => {
           ((lang.size / totalLanguageSize) * 100).toFixed(2),
         ),
         index,
+        progressBarBgColor,
       });
     }),
     gap: 40,
@@ -738,6 +755,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     border_radius,
     border_color,
     disable_animations,
+    progress_bar_bg_color,
   } = options;
 
   const i18n = new I18n({
@@ -798,7 +816,12 @@ const renderTopLanguages = (topLangs, options = {}) => {
     width = width + 50; // padding
     finalLayout = renderDonutLayout(langs, width, totalLanguageSize);
   } else {
-    finalLayout = renderNormalLayout(langs, width, totalLanguageSize);
+    finalLayout = renderNormalLayout(
+      langs,
+      width,
+      totalLanguageSize,
+      progress_bar_bg_color,
+    );
   }
 
   const card = new Card({

diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts
@@ -44,6 +44,7 @@ export type TopLangOptions = CommonOptions & {
   langs_count: number;
   disable_animations: boolean;
   hide_progress: boolean;
+  progress_bar_bg_color: string;
 };
 
 export type WakaTimeOptions = CommonOptions & {