From 9773d924fbe00791bfaa67681c610bafc486ec66 Mon Sep 17 00:00:00 2001
From: Florian Bussmann <hallo@florian-bussmann.de>
Date: Mon, 26 Apr 2021 21:04:34 +0200
Subject: [PATCH] feat: limit langs shown on wakatime card (#988)

---
 api/wakatime.js            | 2 ++
 docs/readme_de.md          | 1 +
 docs/readme_es.md          | 1 +
 readme.md                  | 1 +
 src/cards/wakatime-card.js | 6 +++++-
 5 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/api/wakatime.js b/api/wakatime.js
index 029d64e923dc7..2efcc4f8b7e4b 100644
--- a/api/wakatime.js
+++ b/api/wakatime.js
@@ -25,6 +25,7 @@ module.exports = async (req, res) => {
     custom_title,
     locale,
     layout,
+    langs_count,
     api_domain,
     range,
     border_radius,
@@ -66,6 +67,7 @@ module.exports = async (req, res) => {
         border_radius,
         locale: locale ? locale.toLowerCase() : null,
         layout,
+        langs_count,
       }),
     );
   } catch (err) {
diff --git a/docs/readme_de.md b/docs/readme_de.md
index 83ba425bdb894..7c3dfb07581cb 100644
--- a/docs/readme_de.md
+++ b/docs/readme_de.md
@@ -174,6 +174,7 @@ Du kannst mehrere, mit Kommas separierte, Werte in der bg_color Option angeben,
 - `hide_progress` - Verbirgt die Fortschrittanzeige und Prozentzahl _(boolean)_
 - `custom_title` - Legt einen benutzerdefinierten Titel fest
 - `layout` - Wechselt zwischen zwei verschiedenen Layouts: `default` & `compact`
+- `langs_count` - Begrenzt die Anzahl der angezeigten Sprachen auf der Karte
 - `api_domain` - Legt eine benutzerdefinierte API Domain fest, z.B. für [Hakatime](https://github.com/mujx/hakatime) oder [Wakapi](https://github.com/muety/wakapi)
 - `range` – Fragt eine eine Zeitspanne an, als die standardmäßig in WakaTime hinterlegte, z.B. `last_7_days`. Siehe [WakaTime API Dokumentation](https://wakatime.com/developers#stats).
 
diff --git a/docs/readme_es.md b/docs/readme_es.md
index a59de8dd94890..ae0cc830f0e8e 100644
--- a/docs/readme_es.md
+++ b/docs/readme_es.md
@@ -192,6 +192,7 @@ Puedes pasar mútliples valores separados por coma en la opción `bg_color` para
 - `hide_progress` - Oculta la barra de progreso y el porcentaje _(booleano)_
 - `custom_title` - Establece un título personalizado
 - `layout` - Cambia entre los dos diseños disponibles `default` & `compact`
+- `langs_count` - Limita el número de idiomas que aparecen en el mapa
 - `api_domain` - Establece un dominio de API personalizado para la tarjeta
 
 ---
diff --git a/readme.md b/readme.md
index 353fedcc4c1c4..73d0f9aba38e2 100644
--- a/readme.md
+++ b/readme.md
@@ -211,6 +211,7 @@ You can provide multiple comma-separated values in bg_color option to render a g
 - `hide_progress` - Hides the progress bar and percentage _(boolean)_
 - `custom_title` - Sets a custom title for the card
 - `layout` - Switch between two available layouts `default` & `compact`
+- `langs_count` - Limit number of languages on the card, defaults to all reported langauges
 - `api_domain` - Set a custom API domain for the card, e.g. to use services like [Hakatime](https://github.com/mujx/hakatime) or [Wakapi](https://github.com/muety/wakapi)
 - `range` – Request a range different from your WakaTime default, e.g. `last_7_days`. See [WakaTime API docs](https://wakatime.com/developers#stats) for list of available options.
 
diff --git a/src/cards/wakatime-card.js b/src/cards/wakatime-card.js
index 7b2096a641fca..bf4f3bc6b866d 100644
--- a/src/cards/wakatime-card.js
+++ b/src/cards/wakatime-card.js
@@ -2,7 +2,7 @@ const Card = require("../common/Card");
 const I18n = require("../common/I18n");
 const { getStyles } = require("../getStyles");
 const { wakatimeCardLocales } = require("../translations");
-const { getCardColors, FlexLayout } = require("../common/utils");
+const { clampValue, getCardColors, FlexLayout } = require("../common/utils");
 const { createProgressNode } = require("../common/createProgressNode");
 const languageColors = require("../common/languageColors.json");
 
@@ -99,6 +99,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     custom_title,
     locale,
     layout,
+    langs_count = languages ? languages.length : 0,
     border_radius
   } = options;
 
@@ -109,6 +110,8 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
 
   const lheight = parseInt(line_height, 10);
 
+  langsCount = clampValue(parseInt(langs_count), 1, langs_count);
+
   // returns theme based colors with proper overrides and defaults
   const { titleColor, textColor, iconColor, bgColor } = getCardColors({
     title_color,
@@ -121,6 +124,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   const statItems = languages
     ? languages
         .filter((language) => language.hours || language.minutes)
+        .slice(0, langsCount)
         .map((language) => {
           return createTextNode({
             id: language.name,