Bump chart.js from 2.9.4 to 3.2.1 in /apps/client/assets (#1647)

* Bump chart.js from 2.9.4 to 3.2.1 in /apps/client/assets

Bumps [chart.js](https://github.com/chartjs/Chart.js) from 2.9.4 to 3.2.1.
- [Release notes](https://github.com/chartjs/Chart.js/releases)
- [Commits](chartjs/Chart.js@v2.9.4...v3.2.1)

Signed-off-by: dependabot[bot] <[email protected]>

* 3.0 upgrade

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Justin Toniazzo <[email protected]>

Author: dependabot[bot]

apps/client/assets/js/components/twitch/TwitchEmoteWatcher.tsx

@@ -1,7 +1,13 @@
 import * as React from "react";
 import { StyleSheet, css } from "aphrodite";
 import { Header } from "semantic-ui-react";
-import { Chart } from "chart.js";
+import {
+  BarController,
+  BarElement,
+  CategoryScale,
+  Chart,
+  LinearScale,
+} from "chart.js";
 import { Socket } from "phoenix";
 
 import { FormBox } from "@components/FormBox";
@@ -81,11 +87,11 @@ export class TwitchEmoteWatcher extends React.Component<Props, State> {
   componentDidMount() {
     const { chartId } = this.state;
     const canvas = document.getElementById(chartId) as HTMLCanvasElement;
+    Chart.register(BarController, BarElement, CategoryScale, LinearScale);
     const context = canvas.getContext("2d");
     const chart = new Chart(context, {
-      type: "horizontalBar",
+      type: "bar",
       data: {
-        labels: [],
         datasets: [
           {
             label: "",
@@ -96,31 +102,7 @@ export class TwitchEmoteWatcher extends React.Component<Props, State> {
         ],
       },
       options: {
-        scales: {
-          yAxes: [
-            {
-              scaleLabel: {
-                display: false,
-              },
-              ticks: {
-                min: 0,
-                beginAtZero: true,
-              },
-            },
-          ],
-          xAxes: [
-            {
-              scaleLabel: {
-                display: false,
-              },
-              ticks: {
-                min: 0,
-                suggestedMax: 3,
-                beginAtZero: true,
-              },
-            },
-          ],
-        },
+        indexAxis: "y",
       },
     });
     this.setState({ chart });
@@ -159,20 +141,22 @@ export class TwitchEmoteWatcher extends React.Component<Props, State> {
 
   oneMinuteWindowUpdate(emotes) {
     const entries = Object.keys(emotes).map((key) => [key, emotes[key]]);
-    const sortedEntries = entries.sort((a, b) => {
-      const [aEmote, aCount] = a;
-      const [bEmote, bCount] = b;
-
-      if (aCount < bCount) {
-        return 1;
-      }
-
-      if (aCount > bCount) {
-        return -1;
-      }
-
-      return 0;
-    });
+    const sortedEntries = entries
+      .sort((a, b) => {
+        const [aEmote, aCount] = a;
+        const [bEmote, bCount] = b;
+
+        if (aCount < bCount) {
+          return 1;
+        }
+
+        if (aCount > bCount) {
+          return -1;
+        }
+
+        return 0;
+      })
+      .slice(0, 15);
 
     const sortedKeys = sortedEntries.map((entry) => entry[0]);
     const sortedValues = sortedEntries.map((entry) => entry[1]);

apps/client/assets/package.json

@@ -18,7 +18,7 @@
     "apollo-boost": "^0.4.9",
     "babel-preset-es2017": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "chart.js": "^2.9.4",
+    "chart.js": "^3.2.1",
     "clipboard": "^2.0.8",
     "graphql": "^14.7.0",
     "graphql-tag": "^2.12.4",
@@ -46,7 +46,6 @@
     "three": "^0.127.0"
   },
   "devDependencies": {
-    "@types/chart.js": "^2.9.31",
     "@types/react": "^16.14.5",
     "@types/react-dom": "^17.0.3",
     "@types/react-redux": "^7.1.16",

apps/client/assets/yarn.lock

@@ -215,13 +215,6 @@
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
   integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
 
-"@types/chart.js@^2.9.31":
-  version "2.9.31"
-  resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.9.31.tgz#e8ebc7ed18eb0e5114c69bd46ef8e0037c89d39d"
-  integrity sha512-hzS6phN/kx3jClk3iYqEHNnYIRSi4RZrIGJ8CDLjgatpHoftCezvC44uqB3o3OUm9ftU1m7sHG8+RLyPTlACrA==
-  dependencies:
-    moment "^2.10.2"
-
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -2016,28 +2009,10 @@ chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chart.js@^2.9.4:
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
-  dependencies:
-    chartjs-color "^2.1.0"
-    moment "^2.10.2"
-
-chartjs-color-string@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.3.0.tgz#0e7e1e8dba37eae8415fd3db38bf572007dd958f"
-  integrity sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^0.5.3"
+chart.js@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.2.1.tgz#1a17d6a88cef324ef711949e227eb51d6c4c26d3"
+  integrity sha512-XsNDf3854RGZkLCt+5vWAXGAtUdKP2nhfikLGZqud6G4CvRE2ts64TIxTTfspOin2kEZvPgomE29E6oU02dYjQ==
 
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
   version "3.5.1"
@@ -2159,11 +2134,6 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
-  integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
-
 color-convert@^1.9.0:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.2.tgz#49881b8fba67df12a96bdf3f56c0aab9e7913147"
@@ -5071,11 +5041,6 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
-moment@^2.10.2:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
-  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"