Webpack (#4)

See https://github.com/flarum/core/pull/1367

* Replace gulp with webpack and npm scripts for JS compilation
* Set up Travis CI to commit compiled JS
* Restructure `js` directory; only one instance of npm, forum/admin are "submodules"
* Restructure `less` directory

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

@@ -0,0 +1,185 @@
+/*
+ * This file is part of Flarum.
+ *
+ * (c) Toby Zerner <toby.zerner@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+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';
+
+export default class StatisticsWidget extends DashboardWidget {
+  init() {
+    super.init();
+
+    // Create a Date object which represents the start of the day in the
+    // configured timezone. To do this we convert a UTC time into that timezone,
+    // reset to the first hour of the day, and then convert back into UTC time.
+    // We'll be working with seconds rather than milliseconds throughout too.
+    let today = new Date();
+    today.setTime(today.getTime() + app.data.statistics.timezoneOffset * 1000);
+    today.setUTCHours(0, 0, 0, 0);
+    today.setTime(today.getTime() - app.data.statistics.timezoneOffset * 1000);
+    today = today / 1000;
+
+    this.entities = ['users', 'discussions', 'posts'];
+    this.periods = {
+      today: {start: today, end: today + 86400, step: 3600},
+      last_7_days: {start: today - 86400 * 7, end: today, step: 86400},
+      last_28_days: {start: today - 86400 * 28, end: today, step: 86400},
+      last_12_months: {start: today - 86400 * 364, end: today, step: 86400 * 7}
+    };
+
+    this.selectedEntity = 'users';
+    this.selectedPeriod = 'last_7_days';
+  }
+
+  className() {
+    return 'StatisticsWidget';
+  }
+
+  content() {
+    const thisPeriod = this.periods[this.selectedPeriod];
+
+    return (
+      <div className="StatisticsWidget-table">
+        <div className="StatisticsWidget-labels">
+          <div className="StatisticsWidget-label">{app.translator.trans('flarum-statistics.admin.statistics.total_label')}</div>
+          <div className="StatisticsWidget-label">
+            <SelectDropdown buttonClassName="Button Button--text" caretIcon="fas fa-caret-down">
+              {Object.keys(this.periods).map(period => (
+                <Button
+                  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')}
+                </Button>
+              ))}
+            </SelectDropdown>
+          </div>
+        </div>
+
+        {this.entities.map(entity => {
+          const totalCount = this.getTotalCount(entity);
+          const thisPeriodCount = this.getPeriodCount(entity, thisPeriod);
+          const lastPeriodCount = this.getPeriodCount(entity, this.getLastPeriod(thisPeriod));
+          const periodChange = lastPeriodCount > 0 && (thisPeriodCount - lastPeriodCount) / lastPeriodCount * 100;
+
+          return (
+            <a className={'StatisticsWidget-entity'+(this.selectedEntity === entity ? ' active' : '')} onclick={this.changeEntity.bind(this, entity)}>
+              <h3 className="StatisticsWidget-heading">{app.translator.trans('flarum-statistics.admin.statistics.'+entity+'_heading')}</h3>
+              <div className="StatisticsWidget-total" title={totalCount}>{abbreviateNumber(totalCount)}</div>
+              <div className="StatisticsWidget-period" title={thisPeriodCount}>
+                {abbreviateNumber(thisPeriodCount)}{' '}
+                {periodChange ? (
+                  <span className={'StatisticsWidget-change StatisticsWidget-change--'+(periodChange > 0 ? 'up' : 'down')}>
+                    {icon('fas fa-arrow-'+(periodChange > 0 ? 'up' : 'down'))}
+                    {Math.abs(periodChange.toFixed(1))}%
+                  </span>
+                ) : ''}
+              </div>
+            </a>
+          );
+        })}
+
+        <div className="StatisticsWidget-chart" config={this.drawChart.bind(this)}/>
+      </div>
+    );
+  }
+
+  drawChart(elm, isInitialized, context) {
+    if (context.chart && context.entity === this.selectedEntity && context.period === this.selectedPeriod) {
+      return;
+    }
+
+    const offset = app.data.statistics.timezoneOffset;
+    const period = this.periods[this.selectedPeriod];
+    const periodLength = period.end - period.start;
+    const labels = [];
+    const thisPeriod = [];
+    const lastPeriod = [];
+
+    for (let i = period.start; i < period.end; i += period.step) {
+      let label;
+
+      if (period.step < 86400) {
+        label = moment.unix(i + offset).utc().format('h A');
+      } else {
+        label = moment.unix(i + offset).utc().format('D MMM');
+
+        if (period.step > 86400) {
+          label += ' - ' + moment.unix(i + offset + period.step - 1).utc().format('D MMM');
+        }
+      }
+
+      labels.push(label);
+
+      thisPeriod.push(this.getPeriodCount(this.selectedEntity, {start: i, end: i + period.step}));
+
+      lastPeriod.push(this.getPeriodCount(this.selectedEntity, {start: i - periodLength, end: i - periodLength + period.step}));
+    }
+
+    const datasets = [
+      {values: lastPeriod},
+      {values: thisPeriod}
+    ];
+
+    if (!context.chart) {
+      context.chart = new Chart({
+        parent: elm,
+        data: {labels, datasets},
+        type: 'line',
+        height: 200,
+        x_axis_mode: 'tick',
+        y_axis_mode: 'span',
+        is_series: 1,
+        show_dots: 0,
+        colors: ['rgba(127, 127, 127, 0.2)', app.forum.attribute('themePrimaryColor')]
+      });
+    } else {
+      context.chart.update_values(datasets, labels);
+    }
+
+    context.entity = this.selectedEntity;
+    context.period = this.selectedPeriod;
+  }
+
+  changeEntity(entity) {
+    this.selectedEntity = entity;
+  }
+
+  changePeriod(period) {
+    this.selectedPeriod = period;
+  }
+
+  getTotalCount(entity) {
+    return app.data.statistics[entity].total;
+  }
+
+  getPeriodCount(entity, period) {
+    const timed = app.data.statistics[entity].timed;
+    let count = 0;
+
+    for (const time in timed) {
+      if (time >= period.start && time < period.end) {
+        count += timed[time];
+      }
+    }
+
+    return count;
+  }
+
+  getLastPeriod(thisPeriod) {
+    return {
+      start: thisPeriod.start - (thisPeriod.end - thisPeriod.start),
+      end: thisPeriod.start
+    };
+  }
+}

extensions/statistics/js/src/admin/index.js

@@ -0,0 +1,12 @@
+import app from 'flarum/app';
+import { extend } from 'flarum/extend';
+
+import DashboardPage from 'flarum/components/DashboardPage';
+
+import StatisticsWidget from './components/StatisticsWidget';
+
+app.initializers.add('flarum-statistics', () => {
+  extend(DashboardPage.prototype, 'availableWidgets', widgets => {
+    widgets.push(<StatisticsWidget/>);
+  });
+});