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

A bar chart is better when comparing the values across the X axis.
discourse · Mar 29, 2019 · e2ad374 · e2ad374 · tgxworld · Mar 29, 2019
1 parent f458cba
commit e2ad374
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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>