FEATURE: charts will now use tertiary color (#6342)

app/assets/javascripts/admin/components/admin-report-chart.js.es6

@@ -4,7 +4,6 @@ import loadScript from "discourse/lib/load-script";
 export default Ember.Component.extend({
   classNames: ["admin-report-chart"],
   limit: 8,
-  primaryColor: "rgb(0,136,204)",
   total: 0,
 
   willDestroyElement() {
@@ -38,8 +37,8 @@ export default Ember.Component.extend({
             data: chartData.map(d => Math.round(parseFloat(d.y))),
             backgroundColor: prevChartData.length
               ? "transparent"
-              : "rgba(200,220,240,0.3)",
+              : model.secondary_color,
-            borderColor: this.get("primaryColor")
+            borderColor: model.primary_color
           }
         ]
       };
@@ -47,7 +46,7 @@ export default Ember.Component.extend({
       if (prevChartData.length) {
         data.datasets.push({
           data: prevChartData.map(d => Math.round(parseFloat(d.y))),
-          borderColor: this.get("primaryColor"),
+          borderColor: model.primary_color,
           borderDash: [5, 5],
           backgroundColor: "transparent",
           borderWidth: 1,

app/assets/javascripts/admin/models/report.js.es6

@@ -8,7 +8,7 @@ import { renderAvatar } from "discourse/helpers/user-avatar";
 
 // Change this line each time report format change
 // and you want to ensure cache is reset
-export const SCHEMA_VERSION = 2;
+export const SCHEMA_VERSION = 3;
 
 const Report = Discourse.Model.extend({
   average: false,

app/models/report.rb

@@ -3,14 +3,14 @@ require_dependency 'topic_subtype'
 class Report
   # Change this line each time report format change
   # and you want to ensure cache is reset
-  SCHEMA_VERSION = 2
+  SCHEMA_VERSION = 3
 
   attr_accessor :type, :data, :total, :prev30Days, :start_date,
                 :end_date, :category_id, :group_id, :labels, :async,
                 :prev_period, :facets, :limit, :processing, :average, :percent,
                 :higher_is_better, :icon, :modes, :category_filtering,
                 :group_filtering, :prev_data, :prev_start_date, :prev_end_date,
-                :dates_filtering, :error
+                :dates_filtering, :error, :primary_color, :secondary_color
 
   def self.default_days
     30
@@ -29,6 +29,8 @@ class Report
     @modes = [:table, :chart]
     @prev_data = nil
     @dates_filtering = true
+    @primary_color = rgba_color(ColorScheme.hex_for_name('tertiary'))
+    @secondary_color = rgba_color(ColorScheme.hex_for_name('tertiary'), 0.1)
   end
 
   def self.cache_key(report)
@@ -87,6 +89,8 @@ class Report
       prev30Days: self.prev30Days,
       dates_filtering: self.dates_filtering,
       report_key: Report.cache_key(self),
+      primary_color: self.primary_color,
+      secondary_color: self.secondary_color,
       labels: labels || [
         {
           type: :date,
@@ -1167,4 +1171,20 @@ class Report
       report.data << revision
     end
   end
+
+  private
+
+  def hex_to_rgbs(hex_color)
+    hex_color = hex_color.gsub('#', '')
+    rgbs = hex_color.scan(/../)
+    rgbs
+      .map! { |color| color.hex }
+      .map! { |rgb| rgb.to_i }
+  end
+
+  def rgba_color(hex, opacity = 1)
+    rgbs = hex_to_rgbs(hex)
+
+    "rgba(#{rgbs.join(',')},#{opacity})"
+  end
 end