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/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());
+  }
+}