From ccbf4cebe0004caeed820a535a4c0988b3639d51 Mon Sep 17 00:00:00 2001 From: Christoph Marzell Date: Fri, 19 Dec 2025 09:40:16 +0100 Subject: [PATCH] add colors --- app/controllers/entries_controller.rb | 17 +++++++++++++++-- app/views/entries/index.html.erb | 12 ++++++++++++ 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/app/controllers/entries_controller.rb b/app/controllers/entries_controller.rb index 2be0481..b71405e 100644 --- a/app/controllers/entries_controller.rb +++ b/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 diff --git a/app/views/entries/index.html.erb b/app/views/entries/index.html.erb index 7aa8a94..ea63427 100644 --- a/app/views/entries/index.html.erb +++ b/app/views/entries/index.html.erb @@ -66,9 +66,11 @@
<%= 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: {