Update frappe-charts, use Frontend extender, fix color & comparison CSS

extensions/statistics/js/package.json

@@ -3,9 +3,9 @@
   "version": "0.0.0",
   "dependencies": {
     "flarum-webpack-config": "^0.1.0-beta.8",
-    "frappe-charts": "0.0.8",
+    "frappe-charts": "^1.1.0",
-    "webpack": "^4.0.0",
+    "webpack": "^4.22.0",
-    "webpack-cli": "^3.0.7"
+    "webpack-cli": "^3.1.2"
   },
   "scripts": {
     "build": "webpack --mode production",

extensions/statistics/js/src/admin/components/StatisticsWidget.js

@@ -11,10 +11,10 @@ import DashboardWidget from 'flarum/components/DashboardWidget';
 import SelectDropdown from 'flarum/components/SelectDropdown';
 import Button from 'flarum/components/Button';
 import icon from 'flarum/helpers/icon';
-import listItems from 'flarum/helpers/listItems';
-import ItemList from 'flarum/utils/ItemList';
 import abbreviateNumber from 'flarum/utils/abbreviateNumber';
 
+import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js';
+
 export default class StatisticsWidget extends DashboardWidget {
   init() {
     super.init();
@@ -59,7 +59,7 @@ export default class StatisticsWidget extends DashboardWidget {
                   active={period === this.selectedPeriod}
                   onclick={this.changePeriod.bind(this, period)}
                   icon={period === this.selectedPeriod ? 'fas fa-check' : true}>
-                  {app.translator.trans('flarum-statistics.admin.statistics.'+period+'_label')}
+                  {app.translator.trans(`flarum-statistics.admin.statistics.${period}_label`)}
                 </Button>
               ))}
             </SelectDropdown>
@@ -130,21 +130,24 @@ export default class StatisticsWidget extends DashboardWidget {
       {values: lastPeriod},
       {values: thisPeriod}
     ];
+    const data = {
+      labels,
+      datasets
+    };
 
     if (!context.chart) {
-      context.chart = new Chart({
+      context.chart = new Chart(elm, {
-        parent: elm,
+        data,
-        data: {labels, datasets},
         type: 'line',
         height: 200,
-        x_axis_mode: 'tick',
+        axisOptions: {
-        y_axis_mode: 'span',
+          xAxisMode: 'tick',
-        is_series: 1,
+          yAxisMode: 'span'
-        show_dots: 0,
+        },
-        colors: ['rgba(127, 127, 127, 0.2)', app.forum.attribute('themePrimaryColor')]
+        colors: ['black', app.forum.attribute('themePrimaryColor')]
       });
     } else {
-      context.chart.update_values(datasets, labels);
+      context.chart.update(data);
     }
 
     context.entity = this.selectedEntity;

extensions/statistics/less/admin.less

@@ -61,11 +61,96 @@
 }
 .StatisticsWidget-chart {
   clear: left;
-  max-width: 600px;
   margin: -20px -10px;
+}
+.StatisticsWidget-chart .chart-container {
+  position: relative;
+  .frappe-chart {
+    height: 160px !important;
 
+    .line-chart {
+      .dataset-0 {
+        opacity: 0.2;
+
+        path {
+          stroke: #7f7f7f !important;
+        }
+
+        circle {
+          fill: #7f7f7f !important;
+        }
+      }
+    }
+  }
+  .chart-legend {
+    display: none;
+  }
   // Hide the "last period" data from the tooltip
-  .chart-container .graph-svg-tip ul.data-point-list > li:first-child {
+  .graph-svg-tip ul.data-point-list > li:first-child {
     display: none;
   }
 }
+
+/*!
+ * Frappe Charts 1.0.0 by @frappe - https://frappe.io/charts
+ * License - MIT https://github.com/frappe/charts/blob/master/LICENSE
+ */
+.StatisticsWidget-chart .chart-container .graph-svg-tip {
+  position: absolute;
+  z-index: 99999;
+  padding: 10px;
+  font-size: 12px;
+  color: #959da5;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 3px;
+  ul {
+    padding-left: 0;
+    display: flex;
+  }
+  ol {
+    padding-left: 0;
+    display: flex;
+  }
+  ul.data-point-list {
+    li {
+      min-width: 90px;
+      flex: 1;
+      font-weight: 600;
+    }
+  }
+  strong {
+    color: #dfe2e5;
+    font-weight: 600;
+  }
+  .svg-pointer {
+    position: absolute;
+    height: 5px;
+    margin: 0 0 0 -5px;
+    content: ' ';
+    border: 5px solid transparent;
+    border-top-color: rgba(0, 0, 0, 0.8);
+  }
+  &.comparison {
+    padding: 0;
+    text-align: left;
+    pointer-events: none;
+    .title {
+      display: block;
+      padding: 10px;
+      margin: 0;
+      font-weight: 600;
+      line-height: 1;
+      pointer-events: none;
+    }
+    ul {
+      margin: 0;
+      white-space: nowrap;
+      list-style: none;
+    }
+    li {
+      display: inline-block;
+      padding: 5px 10px;
+    }
+  }
+}