Migrate overallStats store to pinia

src/components/overall-statistics/HeroPictureSelect.vue

@@ -77,12 +77,14 @@ import { Component, Prop } from "vue-property-decorator";
 import { HeroPick } from "@/store/overallStats/types";
 import { ERaceEnum } from "@/store/typings";
 import { getAsset } from "@/helpers/url-functions";
+import { useOverallStatsStore } from "@/store/overallStats/store";
 
 @Component({})
 export default class HeroPictureSelect extends Vue {
   @Prop() heroIndex!: number;
 
   public dialogOpened = false;
+  private overallStatsStore = useOverallStatsStore();
 
   openDialog() {
     this.dialogOpened = true;
@@ -93,17 +95,17 @@ export default class HeroPictureSelect extends Vue {
 
     if (hero.heroId === "none" || hero.heroId === "all") {
       if (this.heroIndex === 0 || this.heroIndex === 3) {
-        this.$store.direct.commit.overallStatistics.SET_HIRO_PICK({
+       this.overallStatsStore.SET_HERO_PICK({
           index: this.heroIndex + 1,
           heroPick: hero,
         });
-        this.$store.direct.commit.overallStatistics.SET_HIRO_PICK({
+       this.overallStatsStore.SET_HERO_PICK({
           index: this.heroIndex + 2,
           heroPick: hero,
         });
       }
       if (this.heroIndex === 1 || this.heroIndex === 4) {
-        this.$store.direct.commit.overallStatistics.SET_HIRO_PICK({
+       this.overallStatsStore.SET_HERO_PICK({
           index: this.heroIndex + 1,
           heroPick: hero,
         });
@@ -121,15 +123,15 @@ export default class HeroPictureSelect extends Vue {
         allPickedRaces[1] !== hero.race &&
         allPickedRaces[1] !== ERaceEnum.RANDOM
       ) {
-        this.$store.direct.commit.overallStatistics.SET_HIRO_PICK({
+       this.overallStatsStore.SET_HERO_PICK({
           index: this.heroIndex + 1,
           heroPick: {
             name: "anyhero",
             heroId: "all",
             race: ERaceEnum.TOTAL,
           },
         });
-        this.$store.direct.commit.overallStatistics.SET_HIRO_PICK({
+       this.overallStatsStore.SET_HERO_PICK({
           index: this.heroIndex + 2,
           heroPick: {
             name: "anyhero",
@@ -143,7 +145,7 @@ export default class HeroPictureSelect extends Vue {
         allPickedRaces[2] !== hero.race &&
         allPickedRaces[2] !== ERaceEnum.RANDOM
       ) {
-        this.$store.direct.commit.overallStatistics.SET_HIRO_PICK({
+       this.overallStatsStore.SET_HERO_PICK({
           index: this.heroIndex + 2,
           heroPick: {
             name: "anyhero",
@@ -154,8 +156,8 @@ export default class HeroPictureSelect extends Vue {
       }
     }
 
-    this.$store.direct.commit.overallStatistics.SET_HIRO_PICK(newPick);
-    this.$store.direct.dispatch.overallStatistics.loadHeroWinrates();
+   this.overallStatsStore.SET_HERO_PICK(newPick);
+    this.overallStatsStore.loadHeroWinrates();
     this.dialogOpened = false;
   }
 
@@ -245,7 +247,7 @@ export default class HeroPictureSelect extends Vue {
   }
 
   get heroPicks() {
-    return this.$store.direct.state.overallStatistics.heroPicks;
+    return this.overallStatsStore.heroPicks;
   }
 
   get heroPickName() {

src/components/overall-statistics/HeroWinrate.vue

@@ -40,31 +40,34 @@
 import Vue from "vue";
 import { Component } from "vue-property-decorator";
 import HeroPictureSelect from "@/components/overall-statistics/HeroPictureSelect.vue";
+import { useOverallStatsStore } from "@/store/overallStats/store";
 
 @Component({
   components: { HeroPictureSelect },
 })
 export default class HeroWinrate extends Vue {
+  private overallStatsStore = useOverallStatsStore();
+
   get winrateClass() {
     if (this.winrate > 0.55) return "won";
     if (this.winrate < 0.45) return "lost";
     return "";
   }
 
   get winrate() {
-    return this.$store.direct.state.overallStatistics.heroWinrate.winrate;
+    return this.overallStatsStore.heroWinrate.winrate;
   }
 
   get wins() {
-    return this.$store.direct.state.overallStatistics.heroWinrate.wins;
+    return this.overallStatsStore.heroWinrate.wins;
   }
 
   get losses() {
-    return this.$store.direct.state.overallStatistics.heroWinrate.losses;
+    return this.overallStatsStore.heroWinrate.losses;
   }
 
   mounted() {
-    this.$store.direct.dispatch.overallStatistics.loadHeroWinrates();
+    this.overallStatsStore.loadHeroWinrates();
   }
 }
 </script>

src/components/overall-statistics/tabs/HeroTab.vue

@@ -50,6 +50,7 @@ import HeroWinrate from "@/components/overall-statistics/HeroWinrate.vue";
 import PlayedHeroesChart from "@/components/overall-statistics/PlayedHeroesChart.vue";
 import { EGameMode, EPick } from "@/store/typings";
 import { PlayedHero } from "@/store/overallStats/types";
+import { useOverallStatsStore } from "@/store/overallStats/store";
 @Component({
   components: {
     PlayedHeroesChart,
@@ -62,10 +63,11 @@ import { PlayedHero } from "@/store/overallStats/types";
 export default class HeroTab extends Mixins(GameModesMixin) {
   public selectedHeroesPlayedPick = 0;
   public selectedHeroesPlayedMode = EGameMode.GM_1ON1;
+  private overallStatsStore = useOverallStatsStore();
 
   async mounted() {
     await this.loadActiveGameModes();
-    await this.$store.direct.dispatch.overallStatistics.loadPlayedHeroes();
+    await this.overallStatsStore.loadPlayedHeroes();
   }
 
   get gameModes() {
@@ -94,7 +96,7 @@ export default class HeroTab extends Mixins(GameModesMixin) {
   }
 
   get selectedPlayedHeroes(): PlayedHero[] {
-    const heroes = this.$store.direct.state.overallStatistics.playedHeroes;
+    const heroes = this.overallStatsStore.playedHeroes;
     if (heroes.length === 0) return [];
     return (
       heroes.filter((g) => g.gameMode == this.selectedHeroesPlayedMode)[0]

src/components/overall-statistics/tabs/MmrDistributionTab.vue

@@ -65,12 +65,14 @@ import GameModeSelect from "@/components/common/GameModeSelect.vue";
 import MmrDistributionChart from "@/components/overall-statistics/MmrDistributionChart.vue";
 import { Watch } from "vue-property-decorator";
 import { useOauthStore } from "@/store/oauth/store";
+import { useOverallStatsStore } from "@/store/overallStats/store";
 
 @Component({
   components: { MmrDistributionChart, GameModeSelect, GatewaySelect },
 })
 export default class PlayerActivityTab extends Mixins(GameModesMixin) {
   private oauthStore = useOauthStore();
+  private overallStatsStore = useOverallStatsStore();
   public selectedSeason: Season = { id: 1 };
   public selectedGameMode: EGameMode = EGameMode.GM_1ON1;
   public selectedGateWay: Gateways = Gateways.Europe;
@@ -81,7 +83,7 @@ export default class PlayerActivityTab extends Mixins(GameModesMixin) {
   }
 
   get loadingMapAndRaceStats(): boolean {
-    return this.$store.direct.state.overallStatistics.loadingMapAndRaceStats;
+    return this.overallStatsStore.loadingMapAndRaceStats;
   }
 
   public async setSelectedSeason(season: Season) {
@@ -105,7 +107,7 @@ export default class PlayerActivityTab extends Mixins(GameModesMixin) {
       gameMode: this.selectedGameMode,
       gateWay: this.selectedGateWay,
     };
-    await this.$store.direct.dispatch.overallStatistics.loadMmrDistribution(payload);
+    await this.overallStatsStore.loadMmrDistribution(payload);
     this.loadingData = false;
   }
 
@@ -138,7 +140,7 @@ export default class PlayerActivityTab extends Mixins(GameModesMixin) {
   }
 
   get mmrDistribution() {
-    return this.$store.direct.state.overallStatistics.mmrDistribution;
+    return this.overallStatsStore.mmrDistribution;
   }
 
   get standardDeviation(): string {

src/components/overall-statistics/tabs/PlayerActivityTab.vue

@@ -182,6 +182,7 @@ import PopularGameTimeChart from "@/components/overall-statistics/PopularGameTim
 import { EGameMode } from "@/store/typings";
 import ActivityPerDayChart from "@/components/overall-statistics/ActivityPerDayChart.vue";
 import MapsPerSeasonChart from "@/components/overall-statistics/MapsPerSeasonChart.vue";
+import { useOverallStatsStore } from "@/store/overallStats/store";
 
 @Component({
   components: {
@@ -199,6 +200,7 @@ export default class PlayerActivityTab extends Mixins(GameModesMixin) {
   public selectedSeasonForMaps = "All";
   public overWrittenOnce = false;
   public selectedModeForMaps = EGameMode.GM_1ON1;
+  private overallStatsStore = useOverallStatsStore();
 
   async mounted(): Promise<void> {
     await this.loadActiveGameModes();
@@ -254,7 +256,7 @@ export default class PlayerActivityTab extends Mixins(GameModesMixin) {
   }
 
   get loadingGamesPerDayStats(): boolean {
-    return this.$store.direct.state.overallStatistics.loadingGamesPerDayStats;
+    return this.overallStatsStore.loadingGamesPerDayStats;
   }
 
   get mapsPerSeason(): MapCount[] {
@@ -264,7 +266,7 @@ export default class PlayerActivityTab extends Mixins(GameModesMixin) {
     }
 
     const selectedSeasonMaps =
-      this.$store.direct.state.overallStatistics.matchesOnMapPerSeason.filter(
+      this.overallStatsStore.matchesOnMapPerSeason.filter(
         (m) =>
           m.season ===
           (this.selectedSeasonForMaps === "All"
@@ -280,17 +282,17 @@ export default class PlayerActivityTab extends Mixins(GameModesMixin) {
   }
 
   get loadingPlayersPerDayStats(): boolean {
-    return this.$store.direct.state.overallStatistics.loadingPlayersPerDayStats;
+    return this.overallStatsStore.loadingPlayersPerDayStats;
   }
 
   get gameDays(): GameDayPerMode[] {
-    return this.$store.direct.state.overallStatistics.gamesPerDay[0];
+    return this.overallStatsStore.gamesPerDay[0];
   }
 
   get gameDaysForGateways(): GameDayPerMode[][] {
-    const all = this.$store.direct.state.overallStatistics.gamesPerDay[0];
-    const us = this.$store.direct.state.overallStatistics.gamesPerDay[1];
-    const eu = this.$store.direct.state.overallStatistics.gamesPerDay[2];
+    const all = this.overallStatsStore.gamesPerDay[0];
+    const us = this.overallStatsStore.gamesPerDay[1];
+    const eu = this.overallStatsStore.gamesPerDay[2];
     const filterForCurrentMode = (all: GameDayPerMode[]) => {
       return all.filter((g) => g.gameMode === this.selectedGamesPerDayMode);
     };
@@ -303,21 +305,21 @@ export default class PlayerActivityTab extends Mixins(GameModesMixin) {
 
   get playersPerDay(): GameDay[] {
     return (
-      this.$store.direct.state.overallStatistics.playersPerDay
+      this.overallStatsStore.playersPerDay
         .reverse()
         ?.splice(
           0,
-          this.$store.direct.state.overallStatistics.playersPerDay.length - 1
+          this.overallStatsStore.playersPerDay.length - 1
         ) ?? []
     );
   }
 
   get gameLength(): GameLength[] {
-    return this.$store.direct.state.overallStatistics.gameLengths;
+    return this.overallStatsStore.gameLengths;
   }
 
   get popularGameHours(): PopularGameHour[] {
-    return this.$store.direct.state.overallStatistics.popularGameHours;
+    return this.overallStatsStore.popularGameHours;
   }
 }
 </script>

src/components/overall-statistics/tabs/WinratesTab.vue

@@ -101,6 +101,7 @@ import {
 } from "@/store/overallStats/types";
 import { Watch } from "vue-property-decorator";
 import { ERaceEnum } from "@/store/typings";
+import { useOverallStatsStore } from "@/store/overallStats/store";
 @Component({
   components: { PlayerStatsRaceVersusRaceOnMapTableCell },
 })
@@ -109,6 +110,7 @@ export default class WinratesTab extends Vue {
   public selectedPatch = "All";
   public selectedMmr = 0;
   public selectedMap = this.$t("common.overall");
+  private overallStatsStore = useOverallStatsStore();
 
   get headers() {
     return [
@@ -203,7 +205,7 @@ export default class WinratesTab extends Vue {
   }
 
   get statsPerRaceAndMap(): StatsPerWinrate[] {
-    return this.$store.direct.state.overallStatistics.statsPerMapAndRace;
+    return this.overallStatsStore.statsPerMapAndRace;
   }
 
   get patches() {

src/components/player/tabs/PlayerStatisticTab.vue

@@ -139,6 +139,7 @@ import PlayerHeroStatistics from "@/components/player/PlayerHeroStatistics.vue";
 import PlayerHeroWinRate from "@/components/player/PlayerHeroWinRate.vue";
 import { races } from "@/helpers/profile";
 import { TranslateResult } from "vue-i18n";
+import { useOverallStatsStore } from "@/store/overallStats/store";
 
 @Component({
   components: {
@@ -157,6 +158,7 @@ export default class PlayerStatisticTab extends Mixins(GameModesMixin) {
   public selectedMap = "Overall";
   public selectedMapHeroWinRate = "Overall";
   public races = races;
+  private overallStatsStore = useOverallStatsStore();
 
   get selectedSeason() {
     return this.$store.direct.state.player.selectedSeason;
@@ -275,7 +277,7 @@ export default class PlayerStatisticTab extends Mixins(GameModesMixin) {
   }
 
   public getMaps(): void {
-    this.$store.direct.dispatch.overallStatistics.loadMapsPerSeason();
+    this.overallStatsStore.loadMapsPerSeason();
   }
 
   get maps() {

src/store/index.ts

@@ -5,7 +5,6 @@ import { createDirectStore } from "direct-vuex";
 import tournaments from "./tournaments/index";
 import player from "./player/index";
 import matches from "./match/index";
-import overallStatistics from "./overallStats/index";
 import personalSettings from "./personalSettings/index";
 import clan from "./clan/index";
 import admin from "./admin/index";
@@ -26,7 +25,6 @@ const mod = {
     player,
     rankings,
     matches,
-    overallStatistics,
     personalSettings,
     clan,
     admin,