add bar chart

app/controllers/entries_controller.rb

@@ -35,6 +35,7 @@ class EntriesController < ApplicationController
 		end
 		
 		@completion_percent_by_typ_art = {}
+		@progress_chart_data = {}
 		
 		User::PRAKTIKUMSTYPEN.product(User::ENTRY_ARTEN).each do |typ, art|
 			total_required = current_user.required_hours_matrix.to_h.dig(typ, art).to_f
@@ -47,12 +48,18 @@ class EntriesController < ApplicationController
 				percent = (done_minutes / required_minutes.to_f * 100).round
 				percent = 100 if percent > 100
 				@completion_percent_by_typ_art[[typ, art]] = percent
+				@progress_chart_data["#{typ.capitalize} – #{art}"] = percent
 			else
 				@completion_percent_by_typ_art[[typ, art]] = 0
+				@progress_chart_data["#{typ.capitalize} – #{art}"] = 0
 			end
 		end
 
 		
+		
+
+		
+		
 		@total_kilometer_costs_by_year  = Entry.total_kilometer_cost_by_year(current_user)
 		@fortbildungskosten_by_year     = Entry.total_fortbildungskosten_by_year(current_user)
 		@selbstsupervision_by_year      = Entry.total_supervision_by_year(current_user)

app/javascript/application.js

@@ -3,7 +3,8 @@ import { application } from "controllers/application"
 
 import $ from "jquery"
 import "bootstrap"
-
+import "chartkick"
+import "Chart.bundle"
 window.$ = $
 window.jQuery = $
 

app/views/entries/index.html.erb

@@ -1,5 +1,26 @@
 <h1 class="mb-4">Meine Einträge</h1>
 
+<h5 class="mt-4">📊 Fortschritt je Kombination</h5>
+
+<div class="container my-4 rounded border shadow-sm py-3 px-4">
+
+<%= bar_chart @progress_chart_data,
+              donut: false,
+              height: "300px",
+              library: {
+                legend: { position: "bottom" },
+
+                  tooltip: {
+                    callbacks: {
+                      label: %|function(context) {
+                return context.label + ": " + context.parsed + "%";
+              }|
+                    }
+                  }
+
+              } %>
+
+</div>
 <!-- 🔢 Zusammenfassung -->
 <div class="container my-4 rounded border shadow-sm py-3 px-4">
   <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">

app/views/layouts/application.html.erb

@@ -14,6 +14,14 @@
   <!-- Custom Styles (optional) -->
   <!-- JS: Bootstrap Bundle (inkl. Popper) -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" defer></script>
+
+  <!-- Chart.js (korrekt ohne integrity) -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.0/chart.umd.min.js" crossorigin="anonymous"></script>
+
+  <!-- Chartkick -->
+  <script src="https://cdn.jsdelivr.net/npm/chartkick@4.1.1/dist/chartkick.min.js"></script>
+
+
   <script>
       document.addEventListener('DOMContentLoaded', function () {
           const modalElement = document.getElementById('deleteConfirmModal');
@@ -186,5 +194,9 @@
             setTimeout(() => flash.remove(), 500);
         }, 2000);
     });
+
+    document.addEventListener("turbo:load", () => {
+        Chartkick.configure({ language: "de" });
+    });
 </script>
 

config/importmap.rb

@@ -17,3 +17,5 @@ pin "bootstrap", to: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/boots
 # Chart.js + interne Abhängigkeit
 pin "chart.js", to: "https://ga.jspm.io/npm:chart.js@4.4.1/dist/chart.js"
 pin "@kurkle/color", to: "https://ga.jspm.io/npm:@kurkle/color@0.3.2/dist/color.esm.js"
+pin "chartkick", to: "chartkick.js"
+pin "Chart.bundle", to: "Chart.bundle.js"