Add color support for charts

reports.yml

@@ -27,6 +27,13 @@
     FROM logs
     GROUP BY cache_status
     ORDER BY value DESC
+  colors:
+    - "#3273dc"
+    - "#23d160"
+    - "#ffdd57"
+    - "#ff3860"
+    - "#7957d5"
+    - "#363636"
 
 - name: domain_traffic
   label: Top Domains
@@ -87,7 +94,7 @@
 
 - name: status_distribution
   label: HTTP Statuses
-  chart: stackedBar
+  chart: pie
   query: |
     SELECT CASE
              WHEN status BETWEEN 200 AND 299 THEN '2xx'
@@ -99,3 +106,8 @@
     FROM logs
     GROUP BY bucket
     ORDER BY bucket
+  colors:
+    - "#48c78e"
+    - "#209cee"
+    - "#ffdd57"
+    - "#f14668"

scripts/generate_reports.py

@@ -108,14 +108,17 @@ def _generate_interval(interval: str, domain: Optional[str] = None) -> None:
         data = [dict(zip(headers, row)) for row in rows]
         json_path = out_dir / f"{name}.json"
         _save_json(json_path, data)
-        report_list.append(
-            {
-                "name": name,
-                "label": definition.get("label", name.title()),
-                "chart": definition.get("chart", "line"),
-                "json": f"{name}.json",
-            }
-        )
+        entry = {
+            "name": name,
+            "label": definition.get("label", name.title()),
+            "chart": definition.get("chart", "line"),
+            "json": f"{name}.json",
+        }
+        if "color" in definition:
+            entry["color"] = definition["color"]
+        if "colors" in definition:
+            entry["colors"] = definition["colors"]
+        report_list.append(entry)
 
     _save_json(out_dir / "reports.json", report_list)
     _render_html(interval, report_list, out_dir / "index.html")

templates/report.html

@@ -53,18 +53,27 @@
             options.scales.x = { stacked: true };
             options.scales.y.stacked = true;
           }
+          const dataset = {
+            label: rep.label,
+            data: values,
+            borderWidth: 1,
+            fill: rep.chart !== 'bar' && rep.chart !== 'stackedBar'
+          };
+          if (rep.colors) {
+            dataset.backgroundColor = rep.colors;
+            dataset.borderColor = rep.colors;
+          } else if (rep.color) {
+            dataset.backgroundColor = rep.color;
+            dataset.borderColor = rep.color;
+          } else {
+            dataset.backgroundColor = 'rgba(54, 162, 235, 0.5)';
+            dataset.borderColor = 'rgba(54, 162, 235, 1)';
+          }
           new Chart(document.getElementById('chart-' + rep.name), {
             type: chartType,
             data: {
               labels: labels,
-              datasets: [{
-                label: rep.label,
-                data: values,
-                backgroundColor: 'rgba(54, 162, 235, 0.5)',
-                borderColor: 'rgba(54, 162, 235, 1)',
-                borderWidth: 1,
-                fill: rep.chart !== 'bar' && rep.chart !== 'stackedBar',
-              }]
+              datasets: [dataset]
             },
             options: options
           });