perf(statistics): rewrite for performance on very large communities (…

…#3531)

Co-authored-by: Sami Mazouz <[email protected]>

extend.php

@@ -8,13 +8,13 @@
  */
 
 use Flarum\Extend;
-use Flarum\Statistics\AddStatisticsData;
 
 return [
     (new Extend\Frontend('admin'))
         ->js(__DIR__.'/js/dist/admin.js')
-        ->css(__DIR__.'/less/admin.less')
-        ->content(AddStatisticsData::class),
+        ->css(__DIR__.'/less/admin.less'),
 
     new Extend\Locales(__DIR__.'/locale'),
+    (new Extend\Routes('api'))
+        ->get('/statistics', 'flarum-statistics.get-statistics', Flarum\Statistics\Api\Controller\ShowStatisticsData::class),
 ];

js/package.json

@@ -7,15 +7,15 @@
         "frappe-charts": "^1.6.2"
     },
     "devDependencies": {
-        "@types/mithril": "^2.0.8",
-        "prettier": "^2.5.1",
+        "@types/mithril": "^2.0.11",
+        "prettier": "^2.7.1",
         "flarum-webpack-config": "^2.0.0",
-        "webpack": "^5.65.0",
-        "webpack-cli": "^4.9.1",
+        "webpack": "^5.73.0",
+        "webpack-cli": "^4.10.0",
         "@flarum/prettier-config": "^1.0.0",
         "flarum-tsconfig": "^1.0.2",
-        "typescript": "^4.5.4",
-        "typescript-coverage-report": "^0.6.1"
+        "typescript": "^4.7.4",
+        "typescript-coverage-report": "^0.6.4"
     },
     "scripts": {
         "dev": "webpack --mode development --watch",

js/src/admin/components/MiniStatisticsWidget.tsx

@@ -0,0 +1,82 @@
+import app from 'flarum/admin/app';
+
+import DashboardWidget, { IDashboardWidgetAttrs } from 'flarum/admin/components/DashboardWidget';
+import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
+import Link from 'flarum/common/components/Link';
+
+import abbreviateNumber from 'flarum/common/utils/abbreviateNumber';
+
+import type Mithril from 'mithril';
+
+export default class MiniStatisticsWidget extends DashboardWidget {
+  entities = ['users', 'discussions', 'posts'];
+
+  lifetimeData: any;
+
+  loadingLifetime = true;
+
+  oncreate(vnode: Mithril.VnodeDOM<IDashboardWidgetAttrs, this>) {
+    super.oncreate(vnode);
+
+    this.loadLifetimeData();
+  }
+
+  async loadLifetimeData() {
+    this.loadingLifetime = true;
+    m.redraw();
+
+    const data = await app.request({
+      method: 'GET',
+      url: app.forum.attribute('apiUrl') + '/statistics',
+      params: {
+        period: 'lifetime',
+      },
+    });
+
+    this.lifetimeData = data;
+    this.loadingLifetime = false;
+
+    m.redraw();
+  }
+
+  className() {
+    return 'StatisticsWidget StatisticsWidget--mini';
+  }
+
+  content() {
+    return (
+      <div className="StatisticsWidget-table">
+        <h4 className="StatisticsWidget-title">{app.translator.trans('flarum-statistics.admin.statistics.mini_heading')}</h4>
+
+        <div className="StatisticsWidget-entities">
+          <div className="StatisticsWidget-labels">
+            <div className="StatisticsWidget-label">{app.translator.trans('flarum-statistics.admin.statistics.total_label')}</div>
+          </div>
+
+          {this.entities.map((entity) => {
+            const totalCount = this.loadingLifetime ? app.translator.trans('flarum-statistics.admin.statistics.loading') : this.getTotalCount(entity);
+
+            return (
+              <div className="StatisticsWidget-entity">
+                <h3 className="StatisticsWidget-heading">{app.translator.trans('flarum-statistics.admin.statistics.' + entity + '_heading')}</h3>
+                <div className="StatisticsWidget-total" title={totalCount}>
+                  {this.loadingLifetime ? <LoadingIndicator display="inline" /> : abbreviateNumber(totalCount as number)}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="StatisticsWidget-viewFull">
+          <Link href={app.route('extension', { id: 'flarum-statistics' })}>
+            {app.translator.trans('flarum-statistics.admin.statistics.view_full')}
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  getTotalCount(entity: string): number {
+    return this.lifetimeData[entity];
+  }
+}

js/src/admin/components/StatisticsPage.tsx

@@ -0,0 +1,15 @@
+import ExtensionPage from 'flarum/admin/components/ExtensionPage';
+
+import StatisticsWidget from './StatisticsWidget';
+
+export default class StatisticsPage extends ExtensionPage {
+  content() {
+    return (
+      <div className="StatisticsPage">
+        <div className="container">
+          <StatisticsWidget />
+        </div>
+      </div>
+    );
+  }
+}