From d4a2e9a740c031fa874d2890d7ddecd837c0ca17 Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Thu, 4 May 2023 02:35:19 -0400 Subject: [PATCH] UX: Use fixed colors for admin stacked chart reports (#21371) * UX: Use fixed colors for admin stacked chart reports * Fix specs --- .../concerns/reports/consolidated_api_requests.rb | 5 +---- .../concerns/reports/consolidated_page_views.rb | 11 +++-------- app/models/concerns/reports/trust_level_growth.rb | 12 ++++-------- app/models/report.rb | 13 ++++--------- spec/models/report_spec.rb | 10 +++++----- 5 files changed, 17 insertions(+), 34 deletions(-) diff --git a/app/models/concerns/reports/consolidated_api_requests.rb b/app/models/concerns/reports/consolidated_api_requests.rb index 60184f92dde..242f67e2e32 100644 --- a/app/models/concerns/reports/consolidated_api_requests.rb +++ b/app/models/concerns/reports/consolidated_api_requests.rb @@ -9,12 +9,9 @@ module Reports::ConsolidatedApiRequests report.modes = [:stacked_chart] - tertiary = ColorScheme.hex_for_name("tertiary") || "0088cc" - danger = ColorScheme.hex_for_name("danger") || "e45735" - requests = filters.map do |filter| - color = filter == "api" ? report.rgba_color(tertiary) : report.rgba_color(danger) + color = filter == "api" ? report.colors[0] : report.colors[1] { req: filter, diff --git a/app/models/concerns/reports/consolidated_page_views.rb b/app/models/concerns/reports/consolidated_page_views.rb index 41854f56686..dbccc395d5a 100644 --- a/app/models/concerns/reports/consolidated_page_views.rb +++ b/app/models/concerns/reports/consolidated_page_views.rb @@ -9,16 +9,11 @@ module Reports::ConsolidatedPageViews report.modes = [:stacked_chart] - tertiary = ColorScheme.hex_for_name("tertiary") || "0088cc" - danger = ColorScheme.hex_for_name("danger") || "e45735" - requests = filters.map do |filter| - color = report.rgba_color(tertiary) - - color = report.lighten_color(tertiary, 0.25) if filter == "page_view_anon" - - color = report.rgba_color(danger, 0.75) if filter == "page_view_crawler" + color = report.colors[0] + color = report.colors[1] if filter == "page_view_anon" + color = report.colors[2] if filter == "page_view_crawler" { req: filter, diff --git a/app/models/concerns/reports/trust_level_growth.rb b/app/models/concerns/reports/trust_level_growth.rb index d1f82f06891..3b393426c08 100644 --- a/app/models/concerns/reports/trust_level_growth.rb +++ b/app/models/concerns/reports/trust_level_growth.rb @@ -49,16 +49,12 @@ module Reports::TrustLevelGrowth end end - tertiary = ColorScheme.hex_for_name("tertiary") || "0088cc" - quaternary = ColorScheme.hex_for_name("quaternary") || "e45735" - requests = filters.map do |filter| - color = report.rgba_color(quaternary) - - color = report.lighten_color(tertiary, 0.25) if filter == "tl1_reached" - color = report.rgba_color(tertiary) if filter == "tl2_reached" - color = report.lighten_color(quaternary, 0.25) if filter == "tl3_reached" + color = report.colors[0] + color = report.colors[1] if filter == "tl1_reached" + color = report.colors[2] if filter == "tl2_reached" + color = report.colors[3] if filter == "tl3_reached" { req: filter, diff --git a/app/models/report.rb b/app/models/report.rb index 1cf45d27cfe..ca79d36bc93 100644 --- a/app/models/report.rb +++ b/app/models/report.rb @@ -422,20 +422,15 @@ class Report add_counts report, subject, "topics.created_at" end - def lighten_color(hex, amount) - hex = adjust_hex(hex) - rgb = hex.scan(/../).map { |color| color.hex } - rgb[0] = [(rgb[0].to_i + 255 * amount).round, 255].min - rgb[1] = [(rgb[1].to_i + 255 * amount).round, 255].min - rgb[2] = [(rgb[2].to_i + 255 * amount).round, 255].min - "#%02x%02x%02x" % rgb - end - def rgba_color(hex, opacity = 1) rgbs = hex_to_rgbs(adjust_hex(hex)) "rgba(#{rgbs.join(",")},#{opacity})" end + def colors + %w[#1EB8D1 #9BC53D #721D8D #E84A5F #8A6916] + end + private def adjust_hex(hex) diff --git a/spec/models/report_spec.rb b/spec/models/report_spec.rb index 75587791902..d71e86086e4 100644 --- a/spec/models/report_spec.rb +++ b/spec/models/report_spec.rb @@ -1323,13 +1323,13 @@ RSpec.describe Report do page_view_logged_in_report = reports.data.find { |r| r[:req] == "page_view_logged_in" } page_view_anon_report = reports.data.find { |r| r[:req] == "page_view_anon" } - expect(page_view_crawler_report[:color]).to eql("rgba(200,0,1,0.75)") + expect(page_view_crawler_report[:color]).to eql("#721D8D") expect(page_view_crawler_report[:data][0][:y]).to eql(3) - expect(page_view_logged_in_report[:color]).to eql("rgba(0,136,204,1)") + expect(page_view_logged_in_report[:color]).to eql("#1EB8D1") expect(page_view_logged_in_report[:data][0][:y]).to eql(2) - expect(page_view_anon_report[:color]).to eql("#40c8ff") + expect(page_view_anon_report[:color]).to eql("#9BC53D") expect(page_view_anon_report[:data][0][:y]).to eql(1) ensure end @@ -1371,10 +1371,10 @@ RSpec.describe Report do api_report = reports.data.find { |r| r[:req] == "api" } user_api_report = reports.data.find { |r| r[:req] == "user_api" } - expect(api_report[:color]).to eql("rgba(0,136,204,1)") + expect(api_report[:color]).to eql("#1EB8D1") expect(api_report[:data][0][:y]).to eql(2) - expect(user_api_report[:color]).to eql("rgba(200,0,1,1)") + expect(user_api_report[:color]).to eql("#9BC53D") expect(user_api_report[:data][0][:y]).to eql(1) ensure end