Responsive Stat Bars

web-app/django/VIM/apps/main/views.py

@@ -3,7 +3,7 @@
 from django.contrib import messages
 from django.contrib.auth import login
 from django.contrib.auth.models import User
-from django.db.models import Count
+from django.db.models import Count, Q
 from django.shortcuts import redirect, render
 from django.urls import reverse
 
@@ -19,45 +19,73 @@ def home(request):
     # Fetch statistics from database
     total_instruments = Instrument.objects.count()
     total_languages = Language.objects.count()
-    total_names = InstrumentName.objects.count()
+    total_names = InstrumentName.objects.filter(verification_status="verified").count()
     total_editors = User.objects.count()
 
-    # Chart data: Top 5 instruments with most languages
+    # Chart data: Top 5 instruments with most languages (only verified names)
     top_instruments_by_languages = (
         Instrument.objects.annotate(
-            language_count=Count("instrumentname__language", distinct=True)
+            language_count=Count(
+                "instrumentname__language",
+                filter=Q(instrumentname__verification_status="verified"),
+                distinct=True,
+            )
         )
-        .filter(language_count__gt=0)  # Only instruments with at least one language
+        .filter(language_count__gt=0)
         .order_by("-language_count")[:5]
     )
 
+    # Get language from cookie (default 'en')
+    try:
+        user_language = request.COOKIES.get("googtrans", "/en/en")
+        user_language_code = user_language.split("/")[-1]
+        target_language_obj = Language.objects.filter(
+            wikidata_code=user_language_code
+        ).first()
+        target_language_label = (
+            target_language_obj.en_label if target_language_obj else "English"
+        )
+    except:
+        target_language_label = "English"
+
     instruments_chart_data = []
     for instrument in top_instruments_by_languages:
-        # Get the English name if available, otherwise use the first available name
-        try:
-            english_name = instrument.instrumentname_set.filter(
-                language__en_label="English"
+        # Try user-selected language
+        instrument_name_obj = instrument.instrumentname_set.filter(
+            language__en_label=target_language_label, verification_status="verified"
+        ).first()
+
+        # Fallback to English
+        if not instrument_name_obj:
+            instrument_name_obj = instrument.instrumentname_set.filter(
+                language__en_label="English", verification_status="verified"
             ).first()
-            name = (
-                english_name.name
-                if english_name
-                else instrument.instrumentname_set.first().name
-            )
-        except:
-            name = f"Instrument {instrument.wikidata_id}"
 
+        # Fallback to first available (must be verified)
+        if not instrument_name_obj:
+            instrument_name_obj = instrument.instrumentname_set.filter(
+                verification_status="verified"
+            ).first()
+
+        name = (
+            instrument_name_obj.name
+            if instrument_name_obj
+            else f"Instrument {instrument.wikidata_id}"
+        )
         instruments_chart_data.append(
             {"name": name, "count": instrument.language_count}
         )
 
-    # Chart data: Top 5 languages with most instrument names
+    # Chart data: Top 5 languages with most instrument names (only verified instrument names)
     top_languages_by_names = (
         Language.objects.annotate(
-            instrument_count=Count("instrumentname", distinct=True)
+            instrument_count=Count(
+                "instrumentname",
+                filter=Q(instrumentname__verification_status="verified"),
+                distinct=True,
+            )
         )
-        .filter(
-            instrument_count__gt=0
-        )  # Only languages with at least one instrument name
+        .filter(instrument_count__gt=0)
         .order_by("-instrument_count")[:5]
     )
 

web-app/django/VIM/templates/main/index.html

@@ -138,16 +138,16 @@ <h3 class="stat-number text-info mb-1">{{ total_editors|default:"2" }}</h3>
     <img id="bg-decor" src="{% static "assets/images/main/bg-decor.svg" %}" alt="background decoration" class="z-1 opacity-50 img-fluid w-100 position-absolute bottom-0" />
   </div>
   <!-- Bar Charts Section -->
-  <div class="container-fluid chart-section py-5 bg-light force-ltr">
+  <div class="container-fluid chart-section py-5 bg-light">
     <div class="container">
       <!-- First Chart: Top Instruments by Languages -->
       <div class="row mb-5 align-items-center">
         <div class="col-lg-8 order-2 order-lg-1">
-          <div class="chart-container p-4 ">
+          <div class="chart-container p-4 force-ltr">
             <div id="instruments-chart"></div>
           </div>
         </div>
-        <div class="col-lg-4 order-1 order-lg-2 text-center text-lg-start mb-4 mb-lg-0">
+        <div class="col-lg-4 order-1 order-lg-2 mb-4 mb-lg-0 d-flex flex-column mx-auto align-items-center align-items-lg-start">
           <h3 class="text-primary mb-3">Top Instruments by Language Diversity</h3>
           <p class="text-muted">
             Discover which musical instruments have names in the most languages,
@@ -157,15 +157,15 @@ <h3 class="text-primary mb-3">Top Instruments by Language Diversity</h3>
       </div>
       <!-- Second Chart: Top Languages by Instrument Names -->
       <div class="row align-items-center">
-        <div class="col-lg-4 text-center text-lg-start mb-4 mb-lg-0">
+        <div class="col-lg-4 mb-4 mb-lg-0 d-flex flex-column mx-auto align-items-center align-items-lg-start">
           <h3 class="text-primary mb-3">Top Languages by Instrument Coverage</h3>
           <p class="text-muted">
             Explore which languages contribute the most instrument names to our lexicon,
             highlighting linguistic diversity in musical terminology.
           </p>
         </div>
         <div class="col-lg-8">
-          <div class="chart-container p-4">
+          <div class="chart-container p-4 force-ltr">
             <div id="languages-chart"></div>
           </div>
         </div>