Merge remote-tracking branch 'org/next'

backend/api-renamed/top-langs.js

@@ -29,6 +29,7 @@ export default async (req, res) => {
     title_color,
     text_color,
     bg_color,
+    prog_bar_bg_color,
     theme,
     cache_seconds,
     layout,
@@ -147,6 +148,7 @@ export default async (req, res) => {
         title_color,
         text_color,
         bg_color,
+        prog_bar_bg_color,
         theme,
         layout,
         langs_count,

backend/src/cards/top-languages.js

@@ -216,6 +216,7 @@ const getDisplayValue = (size, percentages, format) => {
  * @param {object} props Function properties.
  * @param {number} props.width The card width
  * @param {string} props.color Color of the programming language.
+ * @param {string} props.progBarBgColor Color of the background of progress bar.
  * @param {string} props.name Name of the programming language.
  * @param {number} props.size Size of the programming language.
  * @param {number} props.totalSize Total size of all languages.
@@ -226,6 +227,7 @@ const getDisplayValue = (size, percentages, format) => {
 const createProgressTextNode = ({
   width,
   color,
+  progBarBgColor,
   name,
   size,
   totalSize,
@@ -250,7 +252,9 @@ const createProgressTextNode = ({
         color,
         width: progressWidth,
         progress,
-        progressBarBackgroundColor: "#ddd",
+        progressBarBackgroundColor: progBarBgColor
+          ? `#${progBarBgColor}`
+          : "#ddd",
         delay: staggerDelay + 300,
       })}
     </g>
@@ -367,10 +371,17 @@ const createDonutLanguagesNode = ({ langs, totalSize, statsFormat }) => {
  * @param {Lang[]} langs Array of programming languages.
  * @param {number} width Card width.
  * @param {number} totalLanguageSize Total size of all languages.
+ * @param progBarBgColor Color of the background of progress bar.
  * @param {string} statsFormat Stats format.
  * @returns {string} Normal layout card SVG object.
  */
-const renderNormalLayout = (langs, width, totalLanguageSize, statsFormat) => {
+const renderNormalLayout = (
+  langs,
+  width,
+  totalLanguageSize,
+  progBarBgColor,
+  statsFormat,
+) => {
   return flexLayout({
     items: langs.map((lang, index) => {
       return createProgressTextNode({
@@ -381,6 +392,7 @@ const renderNormalLayout = (langs, width, totalLanguageSize, statsFormat) => {
         totalSize: totalLanguageSize,
         statsFormat,
         index,
+        progBarBgColor,
       });
     }),
     gap: 40,
@@ -787,6 +799,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     title_color,
     text_color,
     bg_color,
+    prog_bar_bg_color,
     hide,
     hide_progress,
     theme,
@@ -872,6 +885,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
       langs,
       width,
       totalLanguageSize,
+      prog_bar_bg_color,
       stats_format,
     );
   }

backend/src/cards/types.d.ts

@@ -53,6 +53,7 @@ export type TopLangOptions = CommonOptions & {
   langs_count: number;
   disable_animations: boolean;
   hide_progress: boolean;
+  prog_bar_bg_color: string;
   stats_format: "percentages" | "bytes";
 };
 

backend/src/common/render.js

@@ -72,7 +72,7 @@ const createProgressNode = ({
 
   return `
     <svg width="${width}" x="${x}" y="${y}">
-      <rect rx="5" ry="5" x="0" y="0" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect>
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect>
       <svg data-testid="lang-progress" width="${progressPercentage}%">
         <rect
             height="8"

backend/tests/__snapshots__/renderWakatimeCard.test.js.snap

@@ -114,7 +114,7 @@ exports[`Test Render WakaTime Card should render correctly 1`] = `
       >19 mins</text>
       
     <svg width="220" x="110" y="4">
-      <rect rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"></rect>
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"></rect>
       <svg data-testid="lang-progress" width="89.38%">
         <rect
             height="8"
@@ -137,7 +137,7 @@ exports[`Test Render WakaTime Card should render correctly 1`] = `
       >1 min</text>
       
     <svg width="220" x="110" y="4">
-      <rect rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"></rect>
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"></rect>
       <svg data-testid="lang-progress" width="6.25%">
         <rect
             height="8"
@@ -576,7 +576,7 @@ exports[`Test Render WakaTime Card should render correctly with percent display
       >47.39 %</text>
       
     <svg width="220" x="110" y="4">
-      <rect rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"></rect>
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"></rect>
       <svg data-testid="lang-progress" width="47.39%">
         <rect
             height="8"
@@ -599,7 +599,7 @@ exports[`Test Render WakaTime Card should render correctly with percent display
       >50.48 %</text>
       
     <svg width="220" x="110" y="4">
-      <rect rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"></rect>
+      <rect data-testid="progress-background" rx="5" ry="5" x="0" y="0" width="220" height="8" fill="#434d58"></rect>
       <svg data-testid="lang-progress" width="50.48%">
         <rect
             height="8"

backend/tests/renderTopLanguagesCard.test.js

@@ -486,6 +486,7 @@ describe("Test renderTopLanguages", () => {
       icon_color: "1b998b",
       text_color: "9991",
       bg_color: "252525",
+      prog_bar_bg_color: "444",
     };
 
     document.body.innerHTML = renderTopLanguages(langs, { ...customColors });
@@ -502,6 +503,15 @@ describe("Test renderTopLanguages", () => {
       "fill",
       "#252525",
     );
+
+    const progressBackgroundNodes = queryAllByTestId(
+      document.body,
+      "progress-background",
+    );
+    expect(progressBackgroundNodes.length).toBeGreaterThan(0);
+    progressBackgroundNodes.forEach((el) => {
+      expect(el).toHaveAttribute("fill", "#444");
+    });
   });
 
   it("should render custom colors with themes", () => {