UX: USe bar chart for admin search logs details page.

UX: USe bar chart for admin search logs details page.

A bar chart is better when comparing the values across the X axis.

diff --git a/app/assets/javascripts/admin/components/admin-graph.js.es6 b/app/assets/javascripts/admin/components/admin-graph.js.es6
index 7752230..5fbcade 100644
--- a/app/assets/javascripts/admin/components/admin-graph.js.es6
+++ b/app/assets/javascripts/admin/components/admin-graph.js.es6
@@ -3,6 +3,8 @@ import { number } from "discourse/lib/formatter";
 
 export default Ember.Component.extend({
   tagName: "canvas",
+  type: "line",
+
   refreshChart() {
     const ctx = this.$()[0].getContext("2d");
     const model = this.get("model");
@@ -14,14 +16,16 @@ export default Ember.Component.extend({
         {
           data: rawData.map(r => r.y),
           label: model.get("title"),
-          backgroundColor: "rgba(200,220,240,0.3)",
+          backgroundColor: `rgba(200,220,240,${
+            this.get("type") === "bar" ? 1 : 0.3
+          })`,
           borderColor: "#08C"
         }
       ]
     };
 
     const config = {
-      type: "line",
+      type: this.get("type"),
       data: data,
       options: {
         responsive: true,
diff --git a/app/assets/javascripts/admin/templates/search-logs-term.hbs b/app/assets/javascripts/admin/templates/search-logs-term.hbs
index 5e64003..8b9a6cc 100644
--- a/app/assets/javascripts/admin/templates/search-logs-term.hbs
+++ b/app/assets/javascripts/admin/templates/search-logs-term.hbs
@@ -9,7 +9,7 @@
 </h2>
 
 {{#conditional-loading-spinner condition=refreshing}}
-  {{admin-graph model=model}}
+  {{admin-graph model=model type="bar"}}
 
   <br><br>
   <h2> {{i18n "admin.logs.search_logs.header_search_results"}} </h2>

GitHub sha: e2ad374e

@techAPJ Do you recall why we switch to bars and then back to line again?

Line graphs looks bad when trying to compare values across the X-axis.

Screenshot from 2019-03-29 12-15-01

1 Like