Reorganize charts, add pie chart legend, show all days in daily chart, improve navigation

Co-authored-by: nijel <212189+nijel@users.noreply.github.com>

Author: Copilot

weblate_web/crm/templates/crm/income.html

@@ -18,17 +18,20 @@
     {% endif %}
 
     <div class="module">
-      <h2>
-        {% translate "Year:" %}
-        {% for year in years %}
-          {% if year == current_year %}
-            <strong>{{ year }}</strong>
-          {% else %}
-            <a href="{% url 'crm:income-year' year %}">{{ year }}</a>
-          {% endif %}
-          {% if not forloop.last %}|{% endif %}
-        {% endfor %}
-      </h2>
+      <table>
+        <caption>{% translate "Year" %}</caption>
+        <tr>
+          {% for year in years %}
+            <td>
+              {% if year == current_year %}
+                <strong>{{ year }}</strong>
+              {% else %}
+                <a href="{% url 'crm:income-year' year %}">{{ year }}</a>
+              {% endif %}
+            </td>
+          {% endfor %}
+        </tr>
+      </table>
     </div>
 
     <div class="module">
@@ -47,27 +50,22 @@ <h2>
     <div class="module">
       <h3>
         {% if is_monthly %}
-          {% translate "Income Distribution by Category" %}
+          {% translate "Daily Income" %}
         {% else %}
           {% translate "Monthly Income with Category Breakdown" %}
         {% endif %}
       </h3>
-      <div class="dashboard-chart">{{ chart_svg|safe }}</div>
+      {% if is_monthly %}
+        <div class="dashboard-chart">{{ daily_chart_svg|safe }}</div>
+      {% else %}
+        <div class="dashboard-chart">{{ chart_svg|safe }}</div>
+      {% endif %}
     </div>
 
-    {% if not is_monthly and pie_chart_svg %}
-      <div class="module">
-        <h3>{% translate "Category Distribution" %}</h3>
-        <div class="dashboard-chart">{{ pie_chart_svg|safe }}</div>
-      </div>
-    {% endif %}
-
-    {% if is_monthly and daily_chart_svg %}
-      <div class="module">
-        <h3>{% translate "Daily Income" %}</h3>
-        <div class="dashboard-chart">{{ daily_chart_svg|safe }}</div>
-      </div>
-    {% endif %}
+    <div class="module">
+      <h3>{% translate "Category Distribution" %}</h3>
+      <div class="dashboard-chart">{{ pie_chart_svg|safe }}</div>
+    </div>
 
     {% if is_monthly %}
       <div class="module">
@@ -76,19 +74,19 @@ <h3>{% translate "Daily Income" %}</h3>
           <thead>
             <tr>
               <th>{% translate "Category" %}</th>
-              <th class="align-right">{% translate "Amount (EUR)" %}</th>
+              <th class="align-right nowrap">{% translate "Amount (EUR)" %}</th>
             </tr>
           </thead>
           <tbody>
             {% for category, amount in income_data.items %}
               <tr>
                 <td>{{ category }}</td>
-                <td class="align-right">€{{ amount|floatformat:0 }}</td>
+                <td class="align-right nowrap">€{{ amount|floatformat:0 }}</td>
               </tr>
             {% endfor %}
             <tr class="total">
               <td>{% translate "Total" %}</td>
-              <td class="align-right">€{{ total_income|floatformat:0 }}</td>
+              <td class="align-right nowrap">€{{ total_income|floatformat:0 }}</td>
             </tr>
           </tbody>
         </table>
@@ -129,14 +127,14 @@ <h3>{% translate "Daily Income" %}</h3>
           <thead>
             <tr>
               <th>{% translate "Category" %}</th>
-              <th class="align-right">{% translate "Amount (EUR)" %}</th>
+              <th class="align-right nowrap">{% translate "Amount (EUR)" %}</th>
             </tr>
           </thead>
           <tbody>
             {% for category, amount in income_data.items %}
               <tr>
                 <td>{{ category }}</td>
-                <td class="align-right">€{{ amount|floatformat:0 }}</td>
+                <td class="align-right nowrap">€{{ amount|floatformat:0 }}</td>
               </tr>
             {% endfor %}
           </tbody>

weblate_web/crm/views.py

@@ -427,15 +427,15 @@ def generate_svg_bar_chart(  # noqa: PLR0914
         return "".join(svg_parts)
 
     def generate_svg_pie_chart(self, data: dict[str, Decimal]) -> str:  # noqa: PLR0914
-        """Generate a simple SVG pie chart for category distribution."""
+        """Generate a simple SVG pie chart for category distribution with legend."""
         if not data or sum(data.values()) == 0:
             return ""
 
-        width = 400
+        width = 500
         height = 400
-        radius = 150
-        center_x = width / 2
-        center_y = height / 2
+        radius = 120
+        center_x = 200
+        center_y = 200
 
         # Category colors
         colors = {
@@ -498,6 +498,33 @@ def generate_svg_pie_chart(self, data: dict[str, Decimal]) -> str:  # noqa: PLR0
 
                 start_angle = end_angle
 
+        # Add legend
+        legend_x = 420
+        legend_y = 50
+        legend_spacing = 25
+
+        idx = 0
+        for category, value in data.items():
+            if value == 0:
+                continue
+
+            color = colors.get(category, "#999")
+            y_pos = legend_y + idx * legend_spacing
+
+            # Legend color box
+            svg_parts.append(
+                f'<rect x="{legend_x}" y="{y_pos}" width="15" height="15" '
+                f'fill="{color}" stroke="white" stroke-width="1"/>'
+            )
+
+            # Legend text
+            svg_parts.append(
+                f'<text x="{legend_x + 20}" y="{y_pos + 12}" font-size="11" fill="#333">'
+                f"{category}: €{value:,.0f} ({value / total * 100:.0f}%)</text>"
+            )
+
+            idx += 1
+
         svg_parts.append("</svg>")
         return "".join(svg_parts)
 
@@ -631,14 +658,13 @@ def generate_svg_daily_chart(  # noqa: PLR0914
                 f"</rect>"
             )
 
-            # Show day label every 5 days
-            if day % 5 == 1 or day == num_days:
-                label_x = x + bar_width / 2
-                label_y = height - padding + 12
-                svg_parts.append(
-                    f'<text x="{label_x}" y="{label_y}" text-anchor="middle" '
-                    f'font-size="9" fill="#666">{day}</text>'
-                )
+            # Show all day labels
+            label_x = x + bar_width / 2
+            label_y = height - padding + 12
+            svg_parts.append(
+                f'<text x="{label_x}" y="{label_y}" text-anchor="middle" '
+                f'font-size="9" fill="#666">{day}</text>'
+            )
 
         svg_parts.append("</svg>")
         return "".join(svg_parts)
@@ -746,8 +772,11 @@ def get_context_data(self, **kwargs):
         context["current_month"] = month
 
         # Generate charts
+        # Always generate pie chart for both views
+        context["pie_chart_svg"] = self.generate_svg_pie_chart(income_data)
+
         if month:
-            # For monthly view, show category pie chart and daily chart
+            # For monthly view, show daily chart
             # Get all invoices for the month
             month_invoices = list(
                 Invoice.objects.filter(
@@ -757,18 +786,16 @@ def get_context_data(self, **kwargs):
                 ).prefetch_related("invoiceitem_set")
             )
 
-            context["chart_svg"] = self.generate_svg_pie_chart(income_data)
             context["daily_chart_svg"] = self.generate_svg_daily_chart(
                 year, month, month_invoices
             )
             context["is_monthly"] = True
         else:
-            # For yearly view, show stacked monthly chart and category pie
+            # For yearly view, show stacked monthly chart
             monthly_data, invoices = self.get_monthly_data(year)
             context["chart_svg"] = self.generate_svg_stacked_bar_chart(
                 monthly_data, invoices
             )
-            context["pie_chart_svg"] = self.generate_svg_pie_chart(income_data)
             context["monthly_data"] = monthly_data
             context["monthly_category_data"], _ = self.get_monthly_category_data(year)
             context["is_monthly"] = False