statistics tab for discord chat

client/app/pages/stats/stats.scss

@@ -0,0 +1,3 @@
+.Stats {
+  padding: 10px;
+}

client/app/pages/stats/stats.tsx

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import { HorizontalBar } from 'react-chartjs-2';
+import { chain, map } from 'lodash';
+import { axios } from '../../services';
+import './stats.scss';
+
+interface IState {
+  data: {
+    username: string;
+    count: number;
+  }[];
+}
+
+/**
+ * a page to show discord chat statistics
+ * currently keeps track of number messages that contain external links
+ */
+export class Stats extends Component<any, IState> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      data: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getdata();
+  }
+
+  async getdata() {
+    const messages = await axios.get('/api/logger/linkedmessages');
+    const data: any = chain(messages.data)
+      .map((v, k) => {
+        return { username: k, count: v };
+      })
+      .orderBy(v => v.count, 'desc')
+      .value();
+
+    this.setState({ data });
+  }
+
+  render() {
+    const data: any = {
+      labels: map(this.state.data, v => v.username),
+      datasets: [
+        {
+          label: 'Count',
+          backgroundColor: 'rgba(114,137,218, 0.4)',
+          borderColor: 'rgba(114,137,218, 0.9)',
+          borderWidth: 1,
+          hoverBackgroundColor: 'rgba(114,137,218, 0.6)',
+          hoverBorderColor: 'rgba(114,137,218, 1)',
+          data: map(this.state.data, v => v.count),
+        },
+      ],
+      options: {
+        responsive: true,
+      },
+    };
+
+    return (
+      <div className="content">
+        <div className="card" style={{ maxWidth: '1000px' }}>
+          <div className="card__header">Shitposts</div>
+          <HorizontalBar data={data} height={500} />
+        </div>
+      </div>
+    );
+  }
+}