add colors

app/controllers/entries_controller.rb

@@ -37,6 +37,8 @@ class EntriesController < ApplicationController
 		@completion_percent_by_typ_art = {}
 		@progress_chart_data = {}
 		
+		@progress_colors = {}
+		
 		User::PRAKTIKUMSTYPEN.product(User::ENTRY_ARTEN).each do |typ, art|
 			total_required = current_user.required_hours_matrix.to_h.dig(typ, art).to_f
 			remaining_minutes = @remaining_minutes_matrix.dig(typ, art).to_i
@@ -50,9 +52,20 @@ class EntriesController < ApplicationController
 				@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
+				percent = 0
+				@completion_percent_by_typ_art[[typ, art]] = percent
+				@progress_chart_data["#{typ.capitalize} – #{art}"] = percent
 			end
+			
+			@progress_colors["#{typ.capitalize} – #{art}"] = if percent < 50
+				                          '#007bff' # Blau
+				                        elsif percent < 90
+					                        '#28a745' # Grün
+				                        else
+					                        '#dc3545' # Rot
+			                          end
+			
+			
 		end
 
 		

app/views/entries/index.html.erb

@@ -66,9 +66,11 @@
   <div class="tab-pane fade" id="chart" role="tabpanel">
     <div class="container my-4 rounded border shadow-sm py-3 px-4">
       <%= bar_chart @progress_chart_data,
+                    colors: @progress_colors.values,
                     suffix: "%",
                     donut: false,
                     height: "300px",
+
                     plugins: {
                       tooltip: {
                         callbacks: {
@@ -85,6 +87,16 @@
 
 
                     library: {
+                      datasets: [
+                                  {
+                                    backgroundColor: %|function(context) {
+          const value = context.raw;
+          if (value < 40) return "rgba(54, 162, 235, 0.7)";  // blau
+          if (value < 80) return "rgba(75, 192, 192, 0.7)";  // grün
+          return "rgba(255, 99, 132, 0.7)";                  // rot
+        }|
+                                  }
+                                ],
                       legend: { position: "bottom" },
                       tooltip: {
                         callbacks: {