translation badges: add number of unfinished translations (#26429)

* some clean up and add missing translations

* unfinished

* set proper width

* make this variable common

selfdrive/ui/tests/test_translations.py

@@ -9,6 +9,7 @@ import xml.etree.ElementTree as ET
 from selfdrive.ui.update_translations import TRANSLATIONS_DIR, LANGUAGES_FILE, update_translations
 
 TMP_TRANSLATIONS_DIR = os.path.join(TRANSLATIONS_DIR, "tmp")
+UNFINISHED_TRANSLATION_TAG = "<translation type=\"unfinished\""  # non-empty translations can be marked unfinished
 LOCATION_TAG = "<location "
 
 
@@ -56,7 +57,7 @@ class TestTranslations(unittest.TestCase):
     for name, file in self.translation_files.items():
       with self.subTest(name=name, file=file):
         cur_translations = self._read_translation_file(TRANSLATIONS_DIR, file)
-        self.assertTrue("<translation type=\"unfinished\">" not in cur_translations,
+        self.assertTrue(UNFINISHED_TRANSLATION_TAG not in cur_translations,
                         f"{file} ({name}) translation file has unfinished translations. Finish translations or mark them as completed in Qt Linguist")
 
   def test_vanished_translations(self):

selfdrive/ui/translations/create_badges.py

@@ -2,19 +2,22 @@
 import json
 import os
 import requests
+import xml.etree.ElementTree as ET
 
 from common.basedir import BASEDIR
+from selfdrive.ui.tests.test_translations import UNFINISHED_TRANSLATION_TAG
 from selfdrive.ui.update_translations import LANGUAGES_FILE, TRANSLATIONS_DIR
 
 TRANSLATION_TAG = "<translation"
-UNFINISHED_TRANSLATION_TAG = "<translation type=\"unfinished\""
 BADGE_HEIGHT = 20 + 8
+SHIELDS_URL = "https://img.shields.io/badge"
 
 if __name__ == "__main__":
   with open(LANGUAGES_FILE, "r") as f:
     translation_files = json.load(f)
 
-  badge_svg = [f'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="{len(translation_files) * BADGE_HEIGHT}">']
+  badge_svg = []
+  max_badge_width = 0  # keep track of max width to set parent element
   for idx, (name, file) in enumerate(translation_files.items()):
     with open(os.path.join(TRANSLATIONS_DIR, f"{file}.ts"), "r") as tr_f:
       tr_file = tr_f.read()
@@ -28,19 +31,28 @@ if __name__ == "__main__":
         unfinished_translations += 1
 
     percent_finished = int(100 - (unfinished_translations / total_translations * 100.))
-    color = "green" if percent_finished == 100 else "orange" if percent_finished >= 70 else "red"
+    color = "green" if percent_finished == 100 else "orange" if percent_finished > 90 else "red"
 
-    r = requests.get(f"https://img.shields.io/badge/LANGUAGE {name}-{percent_finished}%25 complete-{color}", timeout=10)
+    # Download badge
+    badge_label = f"LANGUAGE {name}"
+    badge_message = f"{percent_finished}% complete"
+    if unfinished_translations != 0:
+      badge_message += f" ({unfinished_translations} unfinished translations)"
+
+    r = requests.get(f"{SHIELDS_URL}/{badge_label}-{badge_message}-{color}", timeout=10)
     assert r.status_code == 200, "Error downloading badge"
     content_svg = r.content.decode("utf-8")
 
-    # make tag ids in each badge unique
+    max_badge_width = max(max_badge_width, int(ET.fromstring(content_svg).get("width")))
+
+    # Make tag ids in each badge unique to combine them into one svg
     for tag in ("r", "s"):
       content_svg = content_svg.replace(f'id="{tag}"', f'id="{tag}{idx}"')
       content_svg = content_svg.replace(f'"url(#{tag})"', f'"url(#{tag}{idx})"')
 
     badge_svg.extend([f'<g transform="translate(0, {idx * BADGE_HEIGHT})">', content_svg, "</g>"])
 
+  badge_svg.insert(0, f'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="{len(translation_files) * BADGE_HEIGHT}" width="{max_badge_width}">')
   badge_svg.append("</svg>")
 
   with open(os.path.join(BASEDIR, "translation_badge.svg"), "w") as badge_f: