TetraStats/lib/views/destination_graphs.dart

573 lines
24 KiB
Dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:tetra_stats/data_objects/p1nkl0bst3r.dart';
import 'package:tetra_stats/data_objects/tetra_league.dart';
import 'package:tetra_stats/data_objects/tetrio_constants.dart';
import 'package:tetra_stats/data_objects/tetrio_player_from_leaderboard.dart';
import 'package:tetra_stats/data_objects/tetrio_players_leaderboard.dart';
import 'package:tetra_stats/gen/strings.g.dart';
import 'package:tetra_stats/main.dart';
import 'package:tetra_stats/services/crud_exceptions.dart';
import 'package:tetra_stats/utils/numers_formats.dart';
import 'package:tetra_stats/views/main_view.dart';
import 'package:tetra_stats/widgets/error_thingy.dart';
import 'package:tetra_stats/widgets/future_error.dart';
import 'package:tetra_stats/widgets/text_timestamp.dart';
class DestinationGraphs extends StatefulWidget{
final String searchFor;
//final Function setState;
final BoxConstraints constraints;
final bool noSidebar;
const DestinationGraphs({super.key, required this.searchFor, required this.constraints, required this.noSidebar});
@override
State<DestinationGraphs> createState() => _DestinationGraphsState();
}
Graph graph = Graph.history;
Stats Ychart = Stats.tr;
enum Graph{
history,
leagueState,
leagueCutoffs
}
class _DestinationGraphsState extends State<DestinationGraphs> {
bool fetchData = false;
bool _gamesPlayedInsteadOfDateAndTime = false;
late ZoomPanBehavior _zoomPanBehavior;
late TooltipBehavior _historyTooltipBehavior;
late TooltipBehavior _tooltipBehavior;
late TooltipBehavior _leagueTooltipBehavior;
String yAxisTitle = "";
bool _smooth = false;
final List<DropdownMenuItem<Stats>> _yAxis = [for (MapEntry e in chartsShortTitles.entries) DropdownMenuItem(value: e.key, child: Text(e.value))];
Stats _Xchart = Stats.tr;
int _season = currentSeason-1;
ValueNotifier<String> historyPlayerUsername = ValueNotifier("");
ValueNotifier<String> historyPlayerAvatarRevizion = ValueNotifier("");
List<String> excludeRanks = [];
late Future<List<_MyScatterSpot>> futureLeague = getTetraLeagueData(_Xchart, Ychart);
String searchLeague = "";
//Duration postSeasonLeft = seasonStart.difference(DateTime.now());
@override
void initState(){
_historyTooltipBehavior = TooltipBehavior(
color: Colors.black,
borderColor: Colors.white,
enable: true,
animationDuration: 0,
builder: (dynamic data, dynamic point, dynamic series,
int pointIndex, int seriesIndex) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
"${f4.format(data.stat)} $yAxisTitle",
style: const TextStyle(fontFamily: "Eurostile Round", fontSize: 20),
),
),
Text(_gamesPlayedInsteadOfDateAndTime ? t.gamesPlayed(games: t.games(n: data.gamesPlayed)) : timestamp(data.timestamp))
],
),
);
}
);
_tooltipBehavior = TooltipBehavior(
color: Colors.black,
borderColor: Colors.white,
enable: true,
animationDuration: 0,
builder: (dynamic data, dynamic point, dynamic series,
int pointIndex, int seriesIndex) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
"${data.nickname} (${data.rank.toUpperCase()})",
style: const TextStyle(fontFamily: "Eurostile Round Extended", fontSize: 20),
),
),
Text('${f4.format(data.x)} ${chartsShortTitles[_Xchart]}\n${f4.format(data.y)} ${chartsShortTitles[Ychart]}')
],
),
);
}
);
_leagueTooltipBehavior = TooltipBehavior(
color: Colors.black,
borderColor: Colors.white,
enable: true,
animationDuration: 0,
builder: (dynamic data, dynamic point, dynamic series,
int pointIndex, int seriesIndex) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
"${f4.format(point.y)} $yAxisTitle",
style: const TextStyle(fontFamily: "Eurostile Round", fontSize: 20),
),
),
Text(timestamp(data.ts))
],
),
);
}
);
_zoomPanBehavior = ZoomPanBehavior(
enablePinching: true,
enableSelectionZooming: true,
enableMouseWheelZooming : true,
enablePanning: true,
);
super.initState();
}
Future<Map<int, Map<Stats, List<_HistoryChartSpot>>>> getHistoryData(bool fetchHistory) async {
if(fetchHistory){
try{
var history = await teto.fetchAndsaveTLHistory(widget.searchFor);
if (context.mounted) ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(t.fetchAndsaveTLHistoryResult(number: history.length))));
}on TetrioHistoryNotExist{
if (context.mounted) ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(t.noHistorySaved)));
}on P1nkl0bst3rForbidden {
if (context.mounted) ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(t.errors.p1nkl0bst3rForbidden)));
}on P1nkl0bst3rInternalProblem {
if (context.mounted) ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(t.errors.p1nkl0bst3rinternal)));
}on P1nkl0bst3rTooManyRequests{
if (context.mounted) ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(t.errors.p1nkl0bst3rTooManyRequests)));
}
}
List<List<TetraLeague>> states = await Future.wait<List<TetraLeague>>([
teto.getStates(widget.searchFor, season: 1), teto.getStates(widget.searchFor, season: 2),
]);
Map<int, Map<Stats, List<_HistoryChartSpot>>> historyData = {}; // [season][metric][spot]
for (int season = 0; season < currentSeason; season++){
if (states[season].length >= 2){
Map<Stats, List<_HistoryChartSpot>> statsMap = {};
for (var stat in Stats.values) statsMap[stat] = [for (var tl in states[season]) if (tl.getStatByEnum(stat) != null) _HistoryChartSpot(tl.timestamp, tl.gamesPlayed, tl.rank, tl.getStatByEnum(stat)!.toDouble())];
historyData[season] = statsMap;
}
}
fetchData = false;
historyPlayerUsername.value = await teto.getNicknameByID(widget.searchFor);
return historyData;
}
Future<List<_MyScatterSpot>> getTetraLeagueData(Stats x, Stats y) async {
TetrioPlayersLeaderboard leaderboard = await teto.fetchTLLeaderboard();
List<_MyScatterSpot> _spots = [
for (TetrioPlayerFromLeaderboard entry in leaderboard.leaderboard)
if (excludeRanks.indexOf(entry.rank) == -1) _MyScatterSpot(
entry.getStatByEnum(x).toDouble(),
entry.getStatByEnum(y).toDouble(),
entry.userId,
entry.username,
entry.rank,
(rankColors[entry.rank]??Colors.white).withOpacity((searchLeague.isEmpty || entry.username.startsWith(searchLeague.toLowerCase())) ? 1.0 : 0.005)
)
];
return _spots;
}
bool? getTotalFilterValue(){
if (excludeRanks.isEmpty) return true;
if (excludeRanks.length == ranks.length) return false;
return null;
}
Widget getHistoryGraph(){
return FutureBuilder<Map<int, Map<Stats, List<_HistoryChartSpot>>>>(
future: getHistoryData(fetchData),
builder: (context, snapshot) {
switch (snapshot.connectionState){
case ConnectionState.none:
case ConnectionState.waiting:
case ConnectionState.active:
return const Center(child: CircularProgressIndicator());
case ConnectionState.done:
if (snapshot.hasData){
if (snapshot.data!.isEmpty || !snapshot.data!.containsKey(_season)) return ErrorThingy(eText: "Not enough data");
List<_HistoryChartSpot> selectedGraph = snapshot.data![_season]![Ychart]!;
yAxisTitle = chartsShortTitles[Ychart]!;
return SfCartesianChart(
tooltipBehavior: _historyTooltipBehavior,
zoomPanBehavior: _zoomPanBehavior,
primaryXAxis: _gamesPlayedInsteadOfDateAndTime ? const NumericAxis() : const DateTimeAxis(),
primaryYAxis: const NumericAxis(
rangePadding: ChartRangePadding.additional,
),
margin: const EdgeInsets.all(0),
series: <CartesianSeries>[
if (_gamesPlayedInsteadOfDateAndTime) StepLineSeries<_HistoryChartSpot, int>(
enableTooltip: true,
dataSource: selectedGraph,
animationDuration: 0,
opacity: _smooth ? 0 : 1,
xValueMapper: (_HistoryChartSpot data, _) => data.gamesPlayed,
yValueMapper: (_HistoryChartSpot data, _) => data.stat,
color: Theme.of(context).colorScheme.primary,
trendlines:<Trendline>[
Trendline(
isVisible: _smooth,
period: (selectedGraph.length/175).floor(),
type: TrendlineType.movingAverage,
color: Theme.of(context).colorScheme.primary)
],
)
else StepLineSeries<_HistoryChartSpot, DateTime>(
enableTooltip: true,
dataSource: selectedGraph,
animationDuration: 0,
opacity: _smooth ? 0 : 1,
xValueMapper: (_HistoryChartSpot data, _) => data.timestamp,
yValueMapper: (_HistoryChartSpot data, _) => data.stat,
color: Theme.of(context).colorScheme.primary,
trendlines:<Trendline>[
Trendline(
isVisible: _smooth,
period: (selectedGraph.length/175).floor(),
type: TrendlineType.movingAverage,
color: Theme.of(context).colorScheme.primary)
],
),
],
);
}else{ return FutureError(snapshot); }
}
}
);
}
Widget getLeagueState (){
return FutureBuilder<List<_MyScatterSpot>>(
future: futureLeague,
builder: (context, snapshot) {
switch (snapshot.connectionState){
case ConnectionState.none:
case ConnectionState.waiting:
case ConnectionState.active:
return const Center(child: CircularProgressIndicator());
case ConnectionState.done:
if (snapshot.hasData){
return SfCartesianChart(
tooltipBehavior: _tooltipBehavior,
zoomPanBehavior: _zoomPanBehavior,
//primaryXAxis: CategoryAxis(),
series: [
ScatterSeries(
enableTooltip: true,
dataSource: snapshot.data,
animationDuration: 0,
pointColorMapper: (data, _) => data.color,
markerSettings: MarkerSettings(
isVisible: false,
borderColor: Colors.black,
),
xValueMapper: (data, _) => data.x,
yValueMapper: (data, _) => data.y,
onPointTap: (point) => Navigator.push(context, MaterialPageRoute(builder: (context) => MainView(player: snapshot.data![point.pointIndex!].nickname))),
)
],
);
}else{ return FutureError(snapshot); }
}
}
);
}
Widget getCutoffsHistory(){
return FutureBuilder<List<Cutoffs>>(
future: teto.fetchCutoffsHistory(),
builder: (context, snapshot) {
switch (snapshot.connectionState){
case ConnectionState.none:
case ConnectionState.waiting:
case ConnectionState.active:
return const Center(child: CircularProgressIndicator());
case ConnectionState.done:
if (snapshot.hasData){
yAxisTitle = chartsShortTitles[Ychart]!;
return SfCartesianChart(
tooltipBehavior: _leagueTooltipBehavior,
zoomPanBehavior: _zoomPanBehavior,
primaryXAxis: const DateTimeAxis(),
primaryYAxis: NumericAxis(
// isInversed: true,
maximum: switch (Ychart){
Stats.tr => 25000.0,
Stats.gxe => 100.00,
_ => null
},
),
margin: const EdgeInsets.all(0),
series: <CartesianSeries>[
for (String rank in ranks) StepLineSeries<Cutoffs, DateTime>(
enableTooltip: true,
dataSource: snapshot.data,
animationDuration: 0,
//opacity: 0.5,
xValueMapper: (Cutoffs data, _) => data.ts,
yValueMapper: (Cutoffs data, _) => switch (Ychart){
Stats.glicko => data.glicko[rank],
Stats.gxe => data.gxe[rank],
_ => data.tr[rank]
},
color: rankColors[rank]!
)
],
);
}else{ return FutureError(snapshot); }
}
}
);
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Card(
child: Wrap(
spacing: 20,
crossAxisAlignment: WrapCrossAlignment.center,
alignment: WrapAlignment.center,
children: [
if (graph == Graph.history) Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.person),
Padding(
padding: EdgeInsets.all(8.0),
child: ValueListenableBuilder<String>(
valueListenable: historyPlayerUsername,
builder: (context, value, child) {
return Text(value, style: TextStyle(fontSize: 22, fontFamily: "Eurostile Round Extended"));
},
)
),
],
),
if (graph == Graph.leagueState) SizedBox(
width: 300,
child: TextField(
style: TextStyle(fontSize: 18.0000),
decoration: InputDecoration(
icon: Icon(Icons.search),
isDense: true
),
onChanged: (v){
searchLeague = v;
},
onSubmitted: (v){
searchLeague = v;
setState((){futureLeague = getTetraLeagueData(_Xchart, Ychart);});
},
)
),
if (graph == Graph.history) Row(
mainAxisSize: MainAxisSize.min,
children: [
const Padding(padding: EdgeInsets.all(8.0), child: Text("Season:", style: TextStyle(fontSize: 22))),
DropdownButton(
items: [for (int i = 1; i <= currentSeason; i++) DropdownMenuItem(value: i-1, child: Text("$i"))],
value: _season,
onChanged: (value) {
setState(() {
_season = value!;
});
}
),
],
),
if (graph != Graph.leagueCutoffs) Row(
mainAxisSize: MainAxisSize.min,
children: [
const Padding(padding: EdgeInsets.all(8.0), child: Text("X:", style: TextStyle(fontSize: 22))),
DropdownButton(
items: switch (graph){
Graph.history => [DropdownMenuItem(value: false, child: Text("Date & Time")), DropdownMenuItem(value: true, child: Text("Games Played"))],
Graph.leagueState => _yAxis,
Graph.leagueCutoffs => [],
},
value: graph == Graph.history ? _gamesPlayedInsteadOfDateAndTime : _Xchart,
onChanged: (value) {
setState(() {
if (graph == Graph.history)
_gamesPlayedInsteadOfDateAndTime = value! as bool;
else _Xchart = value! as Stats;
});
}
),
],
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
const Padding(padding: EdgeInsets.all(8.0), child: Text("Y:", style: TextStyle(fontSize: 22))),
DropdownButton<Stats>(
items: graph == Graph.leagueCutoffs ? [DropdownMenuItem(value: Stats.tr, child: Text(chartsShortTitles[Stats.tr]!)), DropdownMenuItem(value: Stats.glicko, child: Text(chartsShortTitles[Stats.glicko]!)), DropdownMenuItem(value: Stats.gxe, child: Text(chartsShortTitles[Stats.gxe]!))] : _yAxis,
value: Ychart,
onChanged: (value) {
setState(() {
Ychart = value!;
});
}
),
],
),
if (graph == Graph.history) Row(
mainAxisSize: MainAxisSize.min,
children: [
Checkbox(value: _smooth,
checkColor: Colors.black,
onChanged: ((value) {
setState(() {
_smooth = value!;
});
})),
Text(t.smooth, style: const TextStyle(color: Colors.white, fontSize: 22))
],
),
if (graph == Graph.leagueState) IconButton(
color: excludeRanks.isNotEmpty ? Theme.of(context).colorScheme.primary : null,
onPressed: (){
showDialog(context: context, builder: (BuildContext context) {
return StatefulBuilder(
builder: (context, StateSetter setAlertState) {
return AlertDialog(
title: Text("Filter ranks on graph", textAlign: TextAlign.center),
content: SingleChildScrollView(
child: Column(
children: [
CheckboxListTile(value: getTotalFilterValue(), tristate: true, title: Text("All", style: TextStyle(fontFamily: "Eurostile Round Extended")), onChanged: (value){
setAlertState(
(){
if (excludeRanks.length*2 > ranks.length){
excludeRanks.clear();
}else{
excludeRanks = List.of(ranks);
}
}
);
}),
for(String rank in ranks.reversed) CheckboxListTile(value: excludeRanks.indexOf(rank) == -1, onChanged: (value){
setAlertState(
(){
if (excludeRanks.indexOf(rank) == -1){
excludeRanks.add(rank);
}else{
excludeRanks.remove(rank);
}
}
);
}, title: Text(rank.toUpperCase()),)
],
),
),
actions: <Widget>[
TextButton(
child: const Text("Apply"),
onPressed: () {Navigator.of(context).pop(); setState((){futureLeague = getTetraLeagueData(_Xchart, Ychart);});}
)
]
);
}
);
});
}, icon: Icon(Icons.filter_alt)),
IconButton(onPressed: () => _zoomPanBehavior.reset(), icon: const Icon(Icons.refresh), alignment: Alignment.center,)
],
),
),
Card(
child: SizedBox(
width: MediaQuery.of(context).size.width - (widget.noSidebar ? 0 : 88),
height: MediaQuery.of(context).size.height - 96,
child: Padding( padding: const EdgeInsets.fromLTRB(40, 30, 40, 30),
child: switch (graph){
Graph.history => getHistoryGraph(),
Graph.leagueState => getLeagueState(),
Graph.leagueCutoffs => getCutoffsHistory()
},
)
),
)
],
),
if (!widget.noSidebar) SegmentedButton<Graph>(
showSelectedIcon: false,
segments: <ButtonSegment<Graph>>[
const ButtonSegment<Graph>(
value: Graph.history,
label: Text('Player History')),
ButtonSegment<Graph>(
value: Graph.leagueState,
label: Text('League State')),
ButtonSegment<Graph>(
value: Graph.leagueCutoffs,
label: Text('League Cutoffs'),
),
],
selected: <Graph>{graph},
onSelectionChanged: (Set<Graph> newSelection) {
setState(() {
graph = newSelection.first;
switch (newSelection.first){
case Graph.leagueCutoffs:
case Graph.history:
Ychart = Stats.tr;
case Graph.leagueState:
Ychart = Stats.apm;
}
});})
],
),
);
}
}
class _HistoryChartSpot{
final DateTime timestamp;
final int gamesPlayed;
final String rank;
final double stat;
const _HistoryChartSpot(this.timestamp, this.gamesPlayed, this.rank, this.stat);
}
class _MyScatterSpot{
num x;
num y;
String id;
String nickname;
String rank;
Color color;
_MyScatterSpot(this.x, this.y, this.id, this.nickname, this.rank, this.color);
}