champion detail win rate chart

2024-06-17 00:37:33 +02:00
parent 648dacdd1a
commit 3e443617e9
8 changed files with 133 additions and 22 deletions
@@ -18,18 +18,22 @@
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
 import "phoenix_html"
 // Establish Phoenix Socket and LiveView configuration.
-import {Socket} from "phoenix"
-import {LiveSocket} from "phoenix_live_view"
+import { Socket } from "phoenix"
+import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
+import { ChampionWinRate } from "./hooks/champion_win_rate_patch"

 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
  longPollFallbackMs: 2500,
-  params: {_csrf_token: csrfToken}
+  params: { _csrf_token: csrfToken },
+  hooks: {
+    ChampionWinRate,
+  }
 })

 // Show progress bar on live navigation and form submits
-topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" })
 window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
 window.addEventListener("phx:page-loading-stop", _info => topbar.hide())

@@ -0,0 +1,38 @@
+import Chart from "chart.js/auto"
+
+const ChampionWinRate = {
+    mounted() {
+        console.log("mounted")
+        this.handleEvent("points", (event) => console.log("123"))
+
+        // this.props = { id: this.el.getAttribute("data-id") };
+        this.handleEvent("win-rate", ({ winRates }) => {
+            console.log(">>>>>>>")
+            console.log(winRates);
+            patches = winRates.map((winRate) => {
+                return winRate.patch_number
+            })
+            winRateValues = winRates.map((winRate) => winRate.win_rate)
+            setInterval(() => {
+                const data = {
+                    labels: patches,
+                    datasets: [{
+                        label: 'Win rate',
+                        data: winRateValues,
+                        fill: false,
+                        borderColor: 'rgb(75, 192, 192)',
+                        tension: 0.1
+                    }]
+                };
+                this.chart = new Chart(document.getElementById("win-rate"), {
+                    type: 'line',
+                    data: data
+                })
+                this.chart.canvas.parentNode.style.height = '250px';
+                this.chart.canvas.parentNode.style.width = '400px';
+            }, 1000)
+        });
+    }
+}
+
+export { ChampionWinRate };
@@ -0,0 +1,28 @@
+{
+  "name": "assets",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "chart.js": "^4.4.3"
+      }
+    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
+    "node_modules/chart.js": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
+      "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    }
+  }
+}
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "chart.js": "^4.4.3"
+  }
+}