Add loading Animation to Most used Language card (#2197)

* add: text animation * compact progress done * cleaned code * non compact animation done * tests fixed + prettier * revert: vercel.json * remove: unnecessary import * added parameter in docs * style: improve syntax Co-authored-by: rickstaa <[email protected]>
anuraghazra · Jan 10, 2023 · 77dcdab · 77dcdab · vercel · Jan 10, 2023
1 parent 227711c
commit 77dcdab
Show file tree

Hide file tree

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

diff --git a/readme.md b/readme.md
@@ -304,6 +304,7 @@ You can provide multiple comma-separated values in the bg_color option to render
 -   `langs_count` - Show more languages on the card, between 1-10 _(number)_. Default `5`.
 -   `exclude_repo` - Exclude specified repositories _(Comma-separated values)_. Default: `[] (blank array)`.
 -   `custom_title` - Sets a custom title for the card _(string)_. Default `Most Used Languages`.
+-   `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`.
 
 > **Warning**
 > Language names should be URI-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding)

diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js
@@ -39,46 +39,53 @@ const getLongestLang = (arr) =>
  * Creates a node to display usage of a programming language in percentage
  * using text and a horizontal progress bar.
  *
- * @param {object[]} props Function properties.
+ * @param {object} props Function properties.
  * @param {number} props.width The card width
  * @param {string} props.name Name of the programming language.
  * @param {string} props.color Color of the programming language.
  * @param {string} 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 }) => {
+const createProgressTextNode = ({ width, color, name, progress, index }) => {
+  const staggerDelay = (index + 3) * 150;
   const paddingRight = 95;
   const progressTextX = width - paddingRight + 10;
   const progressWidth = width - paddingRight;
 
   return `
-    <text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
-    <text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
-    ${createProgressNode({
-      x: 0,
-      y: 25,
-      color,
-      width: progressWidth,
-      progress,
-      progressBarBackgroundColor: "#ddd",
-    })}
+    <g class="stagger" style="animation-delay: ${staggerDelay}ms">
+      <text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
+      <text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
+      ${createProgressNode({
+        x: 0,
+        y: 25,
+        color,
+        width: progressWidth,
+        progress,
+        progressBarBackgroundColor: "#ddd",
+        delay: staggerDelay + 300,
+      })}
+    </g>
   `;
 };
 
 /**
  * Creates a text only node to display usage of a programming language in percentage.
  *
- * @param {object[]} props Function properties.
+ * @param {object} props Function properties.
  * @param {Lang} props.lang Programming language object.
  * @param {number} props.totalSize Total size of all languages.
+ * @param {number} props.index Index of the programming language.
  * @returns {string} Compact layout programming language SVG node.
  */
-const createCompactLangNode = ({ lang, totalSize }) => {
+const createCompactLangNode = ({ lang, totalSize, index }) => {
   const percentage = ((lang.size / totalSize) * 100).toFixed(2);
+  const staggerDelay = (index + 3) * 150;
   const color = lang.color || "#858585";
 
   return `
-    <g>
+    <g class="stagger" style="animation-delay: ${staggerDelay}ms">
       <circle cx="5" cy="6" r="5" fill="${color}" />
       <text data-testid="lang-name" x="15" y="10" class='lang-name'>
         ${lang.name} ${percentage}%
@@ -104,7 +111,6 @@ const createLanguageTextNode = ({ langs, totalSize }) => {
       createCompactLangNode({
         lang,
         totalSize,
-        // @ts-ignore
         index,
       }),
     );
@@ -134,12 +140,13 @@ const createLanguageTextNode = ({ langs, totalSize }) => {
  */
 const renderNormalLayout = (langs, width, totalLanguageSize) => {
   return flexLayout({
-    items: langs.map((lang) => {
+    items: langs.map((lang, index) => {
       return createProgressTextNode({
-        width: width,
+        width,
         name: lang.name,
         color: lang.color || DEFAULT_LANG_COLOR,
         progress: ((lang.size / totalLanguageSize) * 100).toFixed(2),
+        index,
       });
     }),
     gap: 40,
@@ -187,7 +194,7 @@ const renderCompactLayout = (langs, width, totalLanguageSize) => {
 
   return `
     <mask id="rect-mask">
-      <rect x="0" y="0" width="${offsetWidth}" height="8" fill="white" rx="5" />
+      <rect x="0" y="0" width="${offsetWidth}" height="8" fill="white" rx="5"/>
     </mask>
     ${compactProgressBar}
 
@@ -276,6 +283,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     langs_count = DEFAULT_LANGS_COUNT,
     border_radius,
     border_color,
+    disable_animations,
   } = options;
 
   const i18n = new I18n({
@@ -324,11 +332,43 @@ const renderTopLanguages = (topLangs, options = {}) => {
     colors,
   });
 
-  card.disableAnimations();
+  if (disable_animations) card.disableAnimations();
+
   card.setHideBorder(hide_border);
   card.setHideTitle(hide_title);
   card.setCSS(
-    `.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }`,
+    `
+    @keyframes slideInAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: calc(100%-100px);
+      }
+    }
+    @keyframes growWidthAnimation {
+      from {
+        width: 0;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    .lang-name {
+      font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
+      fill: ${colors.textColor};
+    }
+    .stagger {
+      opacity: 0;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
+    }
+    #rect-mask rect{
+      animation: slideInAnimation 1s ease-in-out forwards;
+    }
+    .lang-progress{
+      animation: growWidthAnimation 0.6s ease-in-out forwards;
+    }
+    `,
   );
 
   return card.render(`

diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts
@@ -37,6 +37,7 @@ export type TopLangOptions = CommonOptions & {
   layout: "compact" | "normal";
   custom_title: string;
   langs_count: number;
+  disable_animations: boolean;
 };
 
 type WakaTimeOptions = CommonOptions & {

diff --git a/src/common/createProgressNode.js b/src/common/createProgressNode.js
@@ -10,6 +10,7 @@ import { clampValue } from "./utils.js";
  * @param {string} createProgressNodeParams.color Progress color.
  * @param {string} createProgressNodeParams.progress Progress value.
  * @param {string} createProgressNodeParams.progressBarBackgroundColor Progress bar bg color.
+ * @param {number} createProgressNodeParams.delay Delay before animation starts.
  * @returns {string} Progress node.
  */
 const createProgressNode = ({
@@ -19,20 +20,22 @@ const createProgressNode = ({
   color,
   progress,
   progressBarBackgroundColor,
+  delay,
 }) => {
   const progressPercentage = clampValue(progress, 2, 100);
 
   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
-          height="8"
-          fill="${color}"
-          rx="5" ry="5" x="0" y="0"
-          data-testid="lang-progress"
-          width="${progressPercentage}%"
-      >
-      </rect>
+      <svg data-testid="lang-progress" width="${progressPercentage}%">
+        <rect
+            height="8"
+            fill="${color}"
+            rx="5" ry="5" x="0" y="0"
+            class="lang-progress"
+            style="animation-delay: ${delay}ms;"
+        />
+      </svg>
     </svg>
   `;
 };