Core tracking (#162)

Closes #140.

Presenting both core and overall progress.
Order by core first, overall second. (React translations page has the same behaviour.)
Updated jQuery to 4.0.0
Updated Bootstrap to 5.3.8

Author: m-aciek

completion.py

@@ -6,6 +6,7 @@
 import git
 import urllib3
 from potodo import potodo
+from potodo.arguments_handling import Filters
 
 
 @cache
@@ -19,7 +20,9 @@ def branches_from_peps() -> list[str]:
     ]
 
 
-def get_completion(clones_dir: str, repo: str) -> tuple[float, str, float]:
+def get_completion(
+    clones_dir: str, repo: str
+) -> tuple[float, float, str, float, float]:
     clone_path = Path(clones_dir, 'translations', repo)
     for branch in branches_from_peps() + ['master', 'main']:
         try:
@@ -39,12 +42,18 @@ def get_completion(clones_dir: str, repo: str) -> tuple[float, str, float]:
             print(f'success: {branch} {repo}: clone or switch')
             break
     path_for_merge = Path(clones_dir, 'rebased_translations', repo)
-    completion = potodo.merge_and_scan_paths(
+    project = potodo.merge_and_scan_paths(
         [clone_path],
         pot_path=Path(clones_dir, 'cpython/Doc/build/gettext'),
-        merge_path=path_for_merge,
+        merge_path=path_for_merge.absolute(),
         api_url='',
-    ).completion
+    )
+    completion = project.completion
+    core_excludes = ['**/*', '!bugs.po', '!tutorial/*', '!library/functions.po']
+    project.filter(
+        filters=Filters(False, True, 0, 100, False, False), exclude=core_excludes
+    )
+    core_completion = project.completion
 
     if completion:
         # Fetch commit from before 30 days ago and checkout
@@ -54,19 +63,28 @@ def get_completion(clones_dir: str, repo: str) -> tuple[float, str, float]:
             )
         except StopIteration:
             month_ago_completion = 0.0
+            month_ago_core_completion = 0.0
         else:
             clone_repo.git.checkout(commit.hexsha)
             with TemporaryDirectory() as tmpdir:
-                month_ago_completion = potodo.merge_and_scan_paths(
+                project = potodo.merge_and_scan_paths(
                     [clone_path],
                     pot_path=Path(clones_dir, 'cpython/Doc/build/gettext'),
                     merge_path=Path(tmpdir),
                     api_url='',
-                ).completion
+                )
+                month_ago_completion = project.completion
+                project.filter(
+                    filters=Filters(False, True, 0, 100, False, False),
+                    exclude=core_excludes,
+                )
+                month_ago_core_completion = project.completion
             clone_repo.git.checkout(branch)  # restore the original state
     else:
         month_ago_completion = 0.0
+        month_ago_core_completion = 0.0
 
     change = completion - month_ago_completion
+    core_change = core_completion - month_ago_core_completion
 
-    return completion, branch, change
+    return core_completion, completion, branch, core_change, change

generate.py

@@ -67,17 +67,21 @@ def get_project_data(
 ) -> LanguageProjectData:
     built = language.code in languages_built
     if repo:
-        completion, branch, change = get_completion(clones_dir, repo)
+        core_complation, completion, branch, core_change, change = get_completion(
+            clones_dir, repo
+        )
     else:
-        completion = 0.0
-        change = 0.0
+        core_complation = completion = 0.0
+        core_change = change = 0.0
         branch = ''
 
     return LanguageProjectData(
         language,
         repo,
         branch,
+        core_complation,
         completion,
+        core_change,
         change,
         built,
         translated_name=languages_built.get(language.code, ''),
@@ -90,7 +94,9 @@ class LanguageProjectData:
     language: Language
     repository: str | None
     branch: str
+    core_completion: float
     completion: float
+    core_change: float
     change: float
     built: bool
     translated_name: str

src/style.css

@@ -105,21 +105,25 @@ ul.links-row li:not(:first-child)::before {
 
 /* ------------------------------ Index ------------------------------------- */
 
-.progress-bar-container {
-  border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+.progress {
+  font-size: 1rem;
   height: 20px;
-  overflow: hidden;
-  position: relative;
 }
 
-.progress-bar {
-  display: inline-block;
-  color: white;
-  height: 100%;
-  line-height: 20px;
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+.outer-label {
+  display: none;
+  padding-left: .5em;
+  color: var(--text-color);
+  background-color: transparent;
+}
+
+.progress-bar.low {
+  color: transparent;
+  user-select: none;
+}
+
+.progress-bar.low + .outer-label {
+  display: flex;
 }
 
 /* ------------------------------ Metadata ---------------------------------- */

templates/base.html.jinja

@@ -8,14 +8,16 @@
 
   <title>Python Docs Translation Dashboard</title>
 
-  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.0/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
+    rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
+    crossorigin="anonymous">
   <link href="style.css" rel="stylesheet">
 </head>
 
 <body>
   <header>
     <nav class="navbar navbar-expand-md fixed-top">
-
+      <div class="container-fluid">
       <div class="navbar-brand">
         <a href="./">
           <img src="logo.png" style="height: 2rem;" alt="Python logo">
@@ -24,7 +26,7 @@
       </div>
 
       <div class="navbar-light bg-light">
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
       </div>
@@ -51,6 +53,7 @@
           </li>
         </ul>
       </div>
+      </div>
     </nav>
   </header>
 
@@ -72,10 +75,14 @@
   window.addEventListener('resize', padnavbar);
 </script>
 
-<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
-  integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+<script src="https://code.jquery.com/jquery-4.0.0.slim.min.js"
+  integrity="sha256-8DGpv13HIm+5iDNWw1XqxgFB4mj+yOKFNb+tHBZOowc="
   crossorigin="anonymous">
 </script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
+  integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
+  crossorigin="anonymous">
+</script>
+{% block extrascript %}
+{% endblock %}
 </html>

templates/index.html.jinja

@@ -3,14 +3,12 @@
 {% block main %}
 <div>
   <div class="row">
-    {% for project in completion_progress | sort(attribute='completion') | reverse %}
+    {% for project in completion_progress | sort(attribute='core_completion,completion') | reverse %}
       <div class="col-12 col-sm-6 col-md-4 d-flex">
         <div id="{{ project.language.code }}" class="card shadow mb-3 w-100">
           <div class="card-body">
             <h3 class="card-title"><a href="#{{ project.language.code }}">{{ project.language.name }}</a></h3>
             <h5 class="card-subtitle mb-2 text-muted">{{ project.translated_name }}</h5>
-            <p class="text-muted">Completion: <strong>{{ '{:.2f}%'.format(project.completion) }}</strong></p>
-            <p class="text-muted">30-day progress: {{ '{:.2f}%'.format(project.change) }}</p>
 
             <ul class="links-row">
               {% if project.built %}
@@ -25,15 +23,14 @@
                 </a>
               </li>
             </ul>
-            <div class="progress-bar-container">
-              <div class="progress-bar" style="width: {{ project.completion }}%;
-                {% if project.change %}
-                  background: linear-gradient(to left, #94cf96 {{ project.change * 100 / project.completion }}%, #4caf50 {{ project.change * 100 / project.completion }}%);
-                {% else %}
-                  background-color: #4caf50;
-                {% endif %}">
-              </div>
-            </div>
+            {# core progress bar #}
+            {% with width=project.core_completion, change=project.core_change, kind='core' %}
+            {% include 'progress_bar.html.jinja' %}
+            {% endwith %}
+            {# overall progress bar #}
+            {% with width=project.completion, change=project.change, kind='overall', extra_container_class='mt-1' %}
+            {% include 'progress_bar.html.jinja' %}
+            {% endwith %}
           </div>
         </div>
       </div>
@@ -47,3 +44,23 @@
   You can download the data on this page in <a href="https://raw.githubusercontent.com/python-docs-translations/dashboard/refs/heads/gh-pages/index.json">JSON format</a>.
 </p>
 {% endblock %}
+{% block extrascript %}
+<script>
+  function updateProgressBarVisibility() {
+    document.querySelectorAll('.main-bar').forEach(progressBar => {
+      const barWithOverflowWidth = progressBar.scrollWidth;
+      const barWidth = progressBar.clientWidth;
+
+      if (barWidth < barWithOverflowWidth) {
+        progressBar.classList.add('low');
+      } else {
+        progressBar.classList.remove('low');
+      }
+    });
+  }
+
+  updateProgressBarVisibility();
+
+  window.addEventListener('resize', updateProgressBarVisibility);
+</script>
+{% endblock %}

templates/progress_bar.html.jinja

@@ -0,0 +1,20 @@
+{# Reusable progress bar partial
+   Expects variables in the include call:
+   - width: numeric width percentage (0-100)
+   - change: numeric change value (same units as width) or falsy
+#}
+<div class="progress {{ extra_container_class }}">
+  <div class="progress-bar main-bar" style="width: {{ width }}%;
+    {% if change and width %}
+      {# compute the relative change percentage safely #}
+      {% set rel = (change * 100 / width) %}
+      background: linear-gradient(to left, #94cf96 {{ rel }}%, #4caf50 {{ rel }}%);
+    {% else %}
+      background-color: #4caf50;
+    {% endif %}">
+    {{ kind }}: {{ '{:.2f}%'.format(width) }} {% if change >= 0.01 %}({{ '{:+.2f}%'.format(change) }}){% endif %}
+  </div>
+  <div class="progress-bar outer-label">
+    {{ kind }}: {{ '{:.2f}%'.format(width) }} {% if change >= 0.01 %}({{ '{:+.2f}%'.format(change) }}){% endif %}
+  </div>
+</div>

tests/test_index.py

@@ -0,0 +1,35 @@
+import unittest
+from datetime import datetime
+import support
+
+from jinja2 import Environment, FileSystemLoader
+
+with support.import_scripts():
+    import generate
+    import repositories
+
+
+class testIndex(unittest.TestCase):
+    def test_renders(self):
+        env = Environment(loader=FileSystemLoader('templates'))
+        language_project_data = generate.LanguageProjectData(
+            language=repositories.Language('pl', 'Polish'),
+            repository='python-docs-pl',
+            branch='3.14',
+            core_completion=100,
+            completion=50,
+            core_change=1,
+            change=2,
+            built=True,
+            translated_name='Polish',
+            contribution_link='https://example.com',
+        )
+        env.get_template('index.html.jinja').render(
+            completion_progress=[language_project_data],
+            generation_time=datetime.now(),
+            duration=100,
+        )
+
+
+if __name__ == '__main__':
+    unittest.main()