Add basic tables and graphs for various tables.

Add basic tables and graphs for viewing things like uploads over time, new users
over time, comments over time, etc. Located at https://betabooru.donmai.us/reports.

The graphing uses Apache ECharts: https://echarts.apache.org/en/index.html.

app/javascript/packs/application.js

@@ -55,6 +55,7 @@ import PreviewSizeMenuComponent from "../src/javascripts/preview_size_menu_compo
 import RelatedTag from "../src/javascripts/related_tag.js";
 import Shortcuts from "../src/javascripts/shortcuts.js";
 import TagCounter from "../src/javascripts/tag_counter.js";
+import TimeSeriesComponent from "../src/javascripts/time_series_component.js";
 import Upload from "../src/javascripts/uploads.js";
 import UserTooltip from "../src/javascripts/user_tooltips.js";
 import Utility from "../src/javascripts/utility.js";
@@ -82,6 +83,7 @@ Danbooru.PreviewSizeMenuComponent = PreviewSizeMenuComponent;
 Danbooru.RelatedTag = RelatedTag;
 Danbooru.Shortcuts = Shortcuts;
 Danbooru.TagCounter = TagCounter;
+Danbooru.TimeSeriesComponent = TimeSeriesComponent;
 Danbooru.Upload = Upload;
 Danbooru.UserTooltip = UserTooltip;
 Danbooru.Utility = Utility;

app/javascript/src/javascripts/current_user.js

@@ -11,4 +11,10 @@ CurrentUser.update = function(settings) {
   });
 };
 
+CurrentUser.darkMode = function() {
+  let theme = CurrentUser.data("theme");
+
+  return theme === "dark" || (theme === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+};
+
 export default CurrentUser;

app/javascript/src/javascripts/time_series_component.js

@@ -0,0 +1,72 @@
+import * as echarts from "echarts";
+import startCase from "lodash/startCase";
+import CurrentUser from "./current_user.js";
+
+export default class TimeSeriesComponent {
+  constructor({ container = null, data = [], columns = [], theme = null } = {}) {
+    this.container = container;
+    this.data = data;
+    this.columns = columns;
+    this.theme = CurrentUser.darkMode() ? "dark" : null;
+
+    this.options = {
+      dataset: {
+        dimensions: ["date", ...columns],
+        source: data,
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "cross",
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        }
+      },
+      toolbox: {
+        feature: {
+          dataView: {},
+          dataZoom: {
+            yAxisIndex: "none"
+          },
+          magicType: {
+            type: ["line", "bar"],
+          },
+          restore: {},
+          saveAsImage: {}
+        }
+      },
+      dataZoom: [
+        { type: "inside" },
+        { type: "slider" }
+      ],
+      grid: {
+        left: "1%",
+        right: "1%",
+        containLabel: true
+      },
+      legend: {
+        data: columns.map(startCase),
+      },
+      xAxis: { type: "time" },
+      yAxis: columns.map(name => ({ type: "value" })),
+      series: columns.map(name => ({
+        name: startCase(name),
+        type: "line",
+        areaStyle: {},
+        emphasis: {
+          focus: "series"
+        },
+        encode: {
+          x: "date",
+          y: name
+        }
+      }))
+    };
+
+    this.chart = echarts.init(container, this.theme);
+    this.chart.setOption(this.options);
+
+    $(window).on("resize.danbooru", () => this.chart.resize());
+  }
+}