Merge pull request #193 from SaltieRL/player-compare-playlist

Player compare/progression playlist

backend/blueprints/spa_api/service_layers/player/play_style.py

@@ -50,7 +50,8 @@ def create_from_id(cls, id_: str, raw=False, rank=None, replay_ids=None, playlis
         )
 
     @staticmethod
-    def create_all_stats_from_id(id_: str, rank=None, replay_ids=None) -> PlayerDataPoint:
+    def create_all_stats_from_id(id_: str, rank: int = None, replay_ids: List[str] = None, playlist: int = None,
+                                 win: bool = None) -> PlayerDataPoint:
         session = current_app.config['db']()
         game_count = player_wrapper.get_total_games(session, id_)
         if game_count == 0:
@@ -59,7 +60,8 @@ def create_all_stats_from_id(id_: str, rank=None, replay_ids=None) -> PlayerData
             rank = get_rank(id_)
         averaged_stats, global_stats = player_stat_wrapper.get_averaged_stats(session, id_,
                                                                               redis=current_app.config['r'], raw=True,
-                                                                              rank=rank, replay_ids=replay_ids)
+                                                                              rank=rank, replay_ids=replay_ids,
+                                                                              playlist=playlist, win=win)
         playstyle_data_raw: PlayerDataPoint = PlayerDataPoint(name=id_,
                                                               data_points=[
                                                                   DataPoint(k, averaged_stats[k])

backend/blueprints/spa_api/service_layers/player/play_style_progression.py

@@ -18,13 +18,14 @@ class PlayStyleProgression:
     def create_progression(id_: str,
                            time_unit: TimeUnit = None,
                            start_date: datetime.datetime = None,
-                           end_date: datetime.datetime = None) -> List['PlayStyleProgressionDataPoint']:
+                           end_date: datetime.datetime = None,
+                           playlist: int = None) -> List['PlayStyleProgressionDataPoint']:
         session = current_app.config['db']()
         game_count = player_wrapper.get_total_games(session, id_)
         if game_count == 0:
             raise UserHasNoReplays()
         data = player_stat_wrapper.get_progression_stats(session, id_, time_unit=time_unit, start_date=start_date,
-                                                         end_date=end_date)
+                                                         end_date=end_date, playlist=playlist)
         session.close()
 
         return [

backend/blueprints/spa_api/spa_api.py

@@ -131,8 +131,12 @@ def api_get_player_play_style(id_):
         playlist = request.args['playlist']
     else:
         playlist = 13  # standard
-    if 'win' in request.args:
-        win = bool(int(request.args['win']))
+    if 'result' in request.args:
+        result = request.args['result']
+        if result == 'win':
+            win = True
+        elif result == 'loss':
+            win = False
     else:
         win = None
     play_style_response = PlayStyleResponse.create_from_id(id_, raw='raw' in request.args, rank=rank, playlist=playlist,
@@ -144,7 +148,8 @@ def api_get_player_play_style(id_):
 def api_get_player_play_style_all(id_):
     accepted_query_params = [
         QueryParam(name='rank', optional=True, type_=int),
-        QueryParam(name='replay_ids', optional=True)
+        QueryParam(name='replay_ids', optional=True),
+        QueryParam(name='playlist', optional=True, type_=int),
     ]
     query_params = get_query_params(accepted_query_params, request)
 
@@ -158,6 +163,7 @@ def api_get_player_play_style_progress(id_):
         QueryParam(name='time_unit', optional=True, type_=convert_to_enum(TimeUnit)),
         QueryParam(name='start_date', optional=True, type_=convert_to_datetime),
         QueryParam(name='end_date', optional=True, type_=convert_to_datetime),
+        QueryParam(name='playlist', optional=True, type_=int),
     ]
     query_params = get_query_params(accepted_query_params, request)
 

backend/database/wrapper/stats/player_stat_wrapper.py

@@ -89,7 +89,8 @@ def get_averaged_stats(self, session, id_: str, rank: int = None, redis=None, ra
     def get_progression_stats(self, session, id_,
                               time_unit: 'TimeUnit' = TimeUnit.MONTH,
                               start_date: datetime.datetime = None,
-                              end_date: datetime.datetime = None):
+                              end_date: datetime.datetime = None,
+                              playlist: int = 13):
 
         if time_unit == TimeUnit.MONTH:
             date = func.to_char(Game.match_date, 'YY-MM')
@@ -128,6 +129,9 @@ def get_progression_stats(self, session, id_,
         if end_date is not None:
             mean_query = mean_query.filter(Game.match_date < end_date)
             std_query = std_query.filter(Game.match_date < end_date)
+        if playlist is not None:
+            mean_query = mean_query.filter(Game.playlist == playlist)
+            std_query = std_query.filter(Game.playlist == playlist)
 
         mean_query = mean_query.all()
         std_query = std_query.all()

webapp/src/Components/Player/Compare/PlayStyle/PlayerComparePlayStyleCharts.tsx

@@ -2,12 +2,15 @@ import { FormControlLabel, Grid, Switch, Typography } from "@material-ui/core"
 import * as React from "react"
 import { PlayStyleRawResponse, PlayStyleResponse } from "src/Models"
 import { getPlayStyle, getPlayStyleRaw } from "../../../../Requests/Player/getPlayStyle"
+import { PlaylistSelect } from "../../../Shared/Selects/PlaylistSelect"
 import { RankSelect } from "../../../Shared/Selects/RankSelect"
 import { PlayerPlayStyleChart } from "../../Overview/PlayStyle/PlayerPlayStyleChart"
 import { PlayerCompareTable } from "./PlayerCompareTable"
 
 interface Props {
     players: Player[]
+    playlist: number
+    handlePlaylistChange?: (playlist: number) => void
 }
 
 interface State {
@@ -20,7 +23,12 @@ interface State {
 export class PlayerComparePlayStyleCharts extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props)
-        this.state = {playerPlayStyles: [], playerPlayStylesRaw: [], rank: -1, heatmapMode: false}
+        this.state = {
+            playerPlayStyles: [],
+            playerPlayStylesRaw: [],
+            rank: -1,
+            heatmapMode: false
+        }
     }
 
     public componentDidMount() {
@@ -46,6 +54,9 @@ export class PlayerComparePlayStyleCharts extends React.PureComponent<Props, Sta
         if (this.state.rank !== prevState.rank) {
             this.handleAddPlayers(this.props.players, true)
         }
+        if (this.props.playlist !== prevProps.playlist) {
+            this.handleAddPlayers(this.props.players, true)
+        }
     }
 
     public render() {
@@ -66,6 +77,17 @@ export class PlayerComparePlayStyleCharts extends React.PureComponent<Props, Sta
                 label="Heatmap mode"
             />
         )
+
+        const dropDown = (
+            <PlaylistSelect
+                selectedPlaylist={this.props.playlist}
+                handleChange={this.handlePlaylistsChange}
+                inputLabel="Playlist"
+                helperText="Select playlist to use"
+                dropdownOnly
+                currentPlaylistsOnly
+                multiple={false}/>
+        )
         return (
             <>
                 <Grid item xs={12} style={{textAlign: "center"}}>
@@ -75,6 +97,9 @@ export class PlayerComparePlayStyleCharts extends React.PureComponent<Props, Sta
                                 helperText="Select the rank to plot as average"
                                 noneLabel="Default"/>
                 </Grid>
+                <Grid item xs={12} style={{textAlign: "center"}}>
+                    {dropDown}
+                </Grid>
                 {chartTitles.map((chartTitle, i) => {
                     return (
                         <Grid item xs={12} md={5} lg={3} key={chartTitle}
@@ -103,7 +128,7 @@ export class PlayerComparePlayStyleCharts extends React.PureComponent<Props, Sta
 
     private readonly handleAddPlayers = (players: Player[], reload: boolean = false) => {
         const rank = this.state.rank === -1 ? undefined : this.state.rank
-        Promise.all(players.map((player) => getPlayStyle(player.id, rank)))
+        Promise.all(players.map((player) => getPlayStyle(player.id, rank, this.props.playlist)))
             .then((playerPlayStyles) => {
                 if (reload) {
                     this.setState({playerPlayStyles})
@@ -113,7 +138,7 @@ export class PlayerComparePlayStyleCharts extends React.PureComponent<Props, Sta
                     })
                 }
             })
-        Promise.all(players.map((player) => getPlayStyleRaw(player.id)))
+        Promise.all(players.map((player) => getPlayStyleRaw(player.id, this.props.playlist)))
             .then((playerPlayStylesRaw) => {
                 if (reload) {
                     this.setState({playerPlayStylesRaw})
@@ -142,4 +167,11 @@ export class PlayerComparePlayStyleCharts extends React.PureComponent<Props, Sta
                                             heatmapMode: boolean) => {
         this.setState({heatmapMode})
     }
+
+    private readonly handlePlaylistsChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
+        const selectedPlaylist = event.target.value as any as number
+        if (this.props.handlePlaylistChange) {
+            this.props.handlePlaylistChange(selectedPlaylist)
+        }
+    }
 }

webapp/src/Components/Player/Compare/PlayerCompareContent.tsx

@@ -11,12 +11,13 @@ type PlayerCompareTab = "Current" | "Progression"
 
 interface State {
     selectedTab: PlayerCompareTab
+    playlist: number
 }
 
 export class PlayerCompareContent extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props)
-        this.state = {selectedTab: "Current"}
+        this.state = {selectedTab: "Current", playlist: 13}
     }
 
     public render() {
@@ -33,13 +34,15 @@ export class PlayerCompareContent extends React.PureComponent<Props, State> {
                 {this.state.selectedTab === "Current" ?
                     <div style={{padding: 16, paddingBottom: 48}}>
                         <Grid container spacing={32}>
-                            <PlayerComparePlayStyleCharts players={this.props.players}/>
+                            <PlayerComparePlayStyleCharts players={this.props.players} playlist={this.state.playlist}
+                                                          handlePlaylistChange={this.handlePlaylistChange}/>
                         </Grid>
                     </div>
                     :
                     <div style={{padding: 16, paddingBottom: 48}}>
                         <Grid container spacing={32} justify="center">
-                            <PlayerProgressionCharts players={this.props.players}/>
+                            <PlayerProgressionCharts players={this.props.players} playlist={this.state.playlist}
+                                                          handlePlaylistChange={this.handlePlaylistChange}/>
                         </Grid>
                     </div>
                 }
@@ -50,4 +53,8 @@ export class PlayerCompareContent extends React.PureComponent<Props, State> {
     private readonly handleSelectTab = (event: React.ChangeEvent, selectedTab: PlayerCompareTab) => {
         this.setState({selectedTab})
     }
+
+    private readonly handlePlaylistChange = (playlist: number) => {
+        this.setState({playlist})
+    }
 }

webapp/src/Components/Player/Compare/Progression/PlayerProgressionCharts.tsx

@@ -6,11 +6,14 @@ import { PlayStyleProgressionPoint } from "src/Models"
 import { getProgression } from "../../../../Requests/Player/getProgression"
 import { convertSnakeAndCamelCaseToReadable } from "../../../../Utils/String"
 import { ClearableDatePicker } from "../../../Shared/ClearableDatePicker"
+import { PlaylistSelect } from "../../../Shared/Selects/PlaylistSelect"
 import { FieldSelect } from "./FieldSelect"
 import { ProgressionChart } from "./ProgressionChart"
 
 interface Props {
     players: Player[]
+    playlist: number
+    handlePlaylistChange?: (playlist: number) => void
 }
 
 export type TimeUnit = "day" | "month" | "quarter" | "year"
@@ -23,6 +26,7 @@ interface State {
     startDate: moment.Moment | null
     endDate: moment.Moment | null
     timeUnit: "day" | "month" | "quarter" | "year"
+    playlist: number | null
 }
 
 export class PlayerProgressionCharts extends React.PureComponent<Props, State> {
@@ -34,7 +38,8 @@ export class PlayerProgressionCharts extends React.PureComponent<Props, State> {
             selectedFields: [],
             startDate: null,
             endDate: null,
-            timeUnit: "month"
+            timeUnit: "month",
+            playlist: this.props.playlist
         }
     }
 
@@ -65,7 +70,8 @@ export class PlayerProgressionCharts extends React.PureComponent<Props, State> {
 
         if ((this.state.timeUnit !== prevState.timeUnit)
             || (this.state.startDate !== prevState.startDate)
-            || (this.state.endDate !== prevState.endDate)) {
+            || (this.state.endDate !== prevState.endDate)
+            || (this.state.playlist !== prevState.playlist)) {
             this.refreshAllData()
                 .then(this.updateFields)
         }
@@ -82,10 +88,19 @@ export class PlayerProgressionCharts extends React.PureComponent<Props, State> {
             player: players[i],
             playStyleProgressionPoints
         }))
-
+        const dropDown = (
+            <PlaylistSelect
+                selectedPlaylist={this.props.playlist}
+                handleChange={this.handlePlaylistsChange}
+                inputLabel="Playlist"
+                helperText="Select playlist to use"
+                dropdownOnly
+                currentPlaylistsOnly
+                multiple={false}/>
+        )
         return (
             <>
-                <Grid item xs={12} md={10} xl={8} style={{textAlign: "center"}} container spacing={16}>
+                <Grid item xs={12} md={12} xl={10} style={{textAlign: "center"}} container spacing={16}>
                     <Grid item xs={12} sm={6} lg={4}>
                         <FieldSelect fields={this.state.fields}
                                      selectedFields={this.state.selectedFields}
@@ -122,6 +137,9 @@ export class PlayerProgressionCharts extends React.PureComponent<Props, State> {
                                              label="End date"/>
                     </Grid>
                 </Grid>
+                <Grid item xs={12} style={{textAlign: "center"}}>
+                    {dropDown}
+                </Grid>
                 {this.state.selectedFields.map((field) => {
                     return (
                         <Grid item xs={12} md={6} lg={5} key={field}
@@ -173,7 +191,8 @@ export class PlayerProgressionCharts extends React.PureComponent<Props, State> {
         return getProgression(playerId, {
             timeUnit: this.state.timeUnit === null ? undefined : this.state.timeUnit,
             startDate: this.state.startDate === null ? undefined : this.state.startDate,
-            endDate: this.state.endDate === null ? undefined : this.state.endDate
+            endDate: this.state.endDate === null ? undefined : this.state.endDate,
+            playlist: this.state.playlist === null ? undefined : this.state.playlist
         })
     }
 
@@ -201,4 +220,12 @@ export class PlayerProgressionCharts extends React.PureComponent<Props, State> {
     private readonly handleTimeUnitChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
         this.setState({timeUnit: event.target.value as TimeUnit})
     }
+
+    private readonly handlePlaylistsChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
+        const selectedPlaylist = event.target.value as any as number
+        this.setState({playlist: selectedPlaylist})
+        if (this.props.handlePlaylistChange) {
+            this.props.handlePlaylistChange(selectedPlaylist)
+        }
+    }
 }