remove win rate plot legendsmoother loading of champion detail

apps/lol_analytics_web/assets/js/hooks/champion_win_rate_patch.js

@@ -11,7 +11,6 @@ const ChampionWinRate = {
                 const data = {
                     labels: patches,
                     datasets: [{
-                        label: 'Win rate',
                         data: winRateValues,
                         fill: false,
                         borderColor: 'rgb(75, 192, 192)',
@@ -20,10 +19,20 @@ const ChampionWinRate = {
                 };
                 this.chart = new Chart(document.getElementById("win-rate"), {
                     type: 'line',
-                    data: data
+                    data: data,
+                    options: {
+                        plugins: {
+                            legend: {
+                                display: false
+                            }
+                        }
+                    }
                 })
                 this.chart.canvas.parentNode.style.height = '250px';
                 this.chart.canvas.parentNode.style.width = '400px';
+                this.chart.labels.display = false;
+                this.chart.options.legend.display = false
+                this.chart.options.legend.display = false
             }, 1000)
         });
     }

apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/show.ex

@@ -75,6 +75,9 @@ defmodule LoLAnalyticsWeb.ChampionLive.Show do
     )
   end
 
+  @impl true
+  @spec handle_async(:get_items | :get_summoners | :get_win_rates, {:ok, any()}, map()) ::
+          {:noreply, map()}
   def handle_async(:get_win_rates, {:ok, result}, socket) do
     {:noreply, push_event(socket, "win-rate", %{winRates: result})}
   end

apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/show.html.heex

@@ -2,6 +2,11 @@
   .win-rate {
     height: 250px;
   }
+
+  .win-rate-container {
+    width: 100%;
+    height: 250px;
+  }
 </style>
 
 <.header>
@@ -15,7 +20,9 @@
 <div class="flex flex-row gap-4">
   <.champion_avatar class="w-20" id={@champion.id} name={@champion.name}
     image={"https://ddragon.leagueoflegends.com/cdn/14.11.1/img/champion/#{@champion.image}"} />
+  <div class="win-rate-container">
     <canvas class="w-full win-rate" height="250" class="win-rate" id="win-rate" phx-hook="ChampionWinRate" />
+  </div>
 </div>
 <div class="my-4" />