feat: hide specific languages in "Top languages" card (#150)

* add new query param to hide specific languages in top languages card

* [top-langs] add function to clean out the provided lang name

* [top-langs] rename 'hide_lang' => 'hide', refactor logic for parsing the list of provided languages to hide

* [top-langs] take list of languages to hide, as a json array

* chore: minor changes

* docs: added docs for hide lang

Co-authored-by: anuraghazra <hazru.anurag@gmail.com>

src/renderTopLanguages.js

@@ -23,6 +23,8 @@ const createProgressNode = ({ width, color, name, progress }) => {
   `;
 };
 
+const lowercaseTrim = (name) => name.toLowerCase().trim();
+
 const renderTopLanguages = (topLangs, options = {}) => {
   const {
     hide_title,
@@ -30,24 +32,32 @@ const renderTopLanguages = (topLangs, options = {}) => {
     title_color,
     text_color,
     bg_color,
-    hide_langs_below,
+    hide,
     theme,
   } = options;
 
   let langs = Object.values(topLangs);
+  let langsToHide = {};
+
+  // populate langsToHide map for quick lookup
+  // while filtering out
+  if (hide) {
+    hide.forEach((langName) => {
+      langsToHide[lowercaseTrim(langName)] = true;
+    });
+  }
+
+  // filter out langauges to be hidden
+  langs = langs
+    .sort((a, b) => b.size - a.size)
+    .filter((lang) => {
+      return !langsToHide[lowercaseTrim(lang.name)];
+    });
 
   const totalSize = langs.reduce((acc, curr) => {
     return acc + curr.size;
   }, 0);
 
-  // hide langs
-  langs = langs
-    .sort((a, b) => b.size - a.size)
-    .filter((lang) => {
-      if (!hide_langs_below) return true;
-      return (lang.size / totalSize) * 100 > hide_langs_below;
-    });
-
   // returns theme based colors with proper overrides and defaults
   const { titleColor, textColor, bgColor } = getCardColors({
     title_color,

src/utils.js

@@ -44,6 +44,14 @@ function parseBoolean(value) {
   }
 }
 
+function parseJSON(str) {
+  try {
+    return JSON.parse(str);
+  } catch (err) {
+    return [];
+  }
+}
+
 function clampValue(number, min, max) {
   return Math.max(min, Math.min(number, max));
 }
@@ -118,7 +126,8 @@ function getCardColors({
 
 const fn = () => {};
 // return console instance based on the environment
-const logger = process.env.NODE_ENV !== "test" ? console : { log: fn, error: fn };
+const logger =
+  process.env.NODE_ENV !== "test" ? console : { log: fn, error: fn };
 
 const CONSTANTS = {
   THIRTY_MINUTES: 1800,
@@ -132,6 +141,7 @@ module.exports = {
   encodeHTML,
   isValidHexColor,
   request,
+  parseJSON,
   parseBoolean,
   fallbackColor,
   FlexLayout,