Skip to content

Commit

Permalink
Fix sorting in ranking graphs
Browse files Browse the repository at this point in the history
  • Loading branch information
Cadiducho committed Oct 21, 2023
1 parent d7bc9b3 commit cbd6cd0
Show file tree
Hide file tree
Showing 4 changed files with 1,394 additions and 1,402 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"vue-advanced-cropper": "2.8.8",
"vue-router": "4.2.2",
"vue-sonner": "0.3.2",
"vue3-apexcharts": "1.4.1",
"vue3-apexcharts": "1.4.4",
"vuedraggable": "4.1.0"
},
"devDependencies": {
Expand Down
48 changes: 31 additions & 17 deletions src/pages/ranking/Ranking.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
:mobile-cards="false"
default-sort="totalScore"
default-sort-direction="DESC"
:row-class="(row, index) => checkRowClass(row, index)"
:row-class="checkRowClass"
>

<o-table-column label="Pos." sortable numeric v-slot="props">
Expand Down Expand Up @@ -104,7 +104,7 @@
:mobile-cards="false"
default-sort="totalScore"
default-sort-direction="DESC"
:row-class="(row, index) => checkRowClass(row, index)"
:row-class="checkRowClass"
>

<o-table-column label="Pos." sortable numeric v-slot="props">
Expand Down Expand Up @@ -172,7 +172,7 @@
:mobile-cards="false"
default-sort="totalScore"
default-sort-direction="DESC"
:row-class="(row, index) => checkRowClass(row, index)"
:row-class="checkRowClass"
>

<o-table-column field="user.username" label="Nombre" sortable>
Expand Down Expand Up @@ -241,7 +241,6 @@
import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
import {communityService, grandPrixService, scoreService, seasonService} from "@/_services";
import {GrandPrix} from "@/types/GrandPrix";
import {Competition} from "@/types/Competition";
import {Season} from "@/types/Season";
import UserMiniCard from "@/components/user/UserMiniCard.vue";
import {User} from "@/types/User";
Expand Down Expand Up @@ -395,7 +394,7 @@
const gpList = result[0];
const members = result[1];
this.gps = gpList;
this.gps = gpList.filter(gp => !gp.suspended); // Para el ranking siempre me van a interesar los gps que NO estén suspendidos
this.updateChartsLegend();
this.communityMembers = new Map<string, User>();
Expand All @@ -405,8 +404,8 @@
}).then(async () => {
const grandPrixPoints = await scoreService.getUserPointsByGP(this.currentCommunity, season);
let entradas: Map<string, TableEntry> = new Map();
let entradasAcumuladas: Map<string, TableEntry> = new Map();
let entradas: Map<string, TableEntry> = new Map(); // Username -> Entrada de la tabla
let entradasAcumuladas: Map<string, TableEntry> = new Map(); // Username -> Entrada de la tabla
this.communityMembers.forEach((member) => {
entradas.set(member!.username, {
gps: new Map(),
Expand All @@ -420,6 +419,7 @@
});
});
// Para cada gran premio
Object.entries(grandPrixPoints).forEach(([gp, entry]) => {
const gpId = Number(gp);
Expand Down Expand Up @@ -462,18 +462,32 @@
let chartData = [];
let accumulatedChartData = [];
let standingsChartData = [];
for (let uPoints of entradas.get(username)!.gps.values()) {
let accumulatedChartRawData = [] as { gpId: number, points: number }[];
let standingsChartRawData = [] as { gpId: number, standing: number | null }[];
for (const [gpId, uPoints] of entradas.get(username)!.gps) {
chartData.push(uPoints.pointsInGP);
// Null para no mostrar si no existe una standing, por ejemplo, no tiene resultados las primeras carreras
let standing = (uPoints.standings > 0) ? uPoints.standings : null;
standingsChartData.push(standing);
standingsChartRawData.push({gpId, standing});
}
for (let uPoints of entradasAcumuladas.get(username)!.gps.values()) {
accumulatedChartData.push(uPoints.accumulatedPoints);
for (const [gpId, uPoints] of entradasAcumuladas.get(username)!.gps) {
accumulatedChartRawData.push({gpId, points: uPoints.accumulatedPoints});
}
// Ordeno los datos pusheados al array por el orden correcto de los gps
accumulatedChartRawData.sort((a, b) => {
return this.grandPrixList().findIndex(gp => gp.id === a.gpId) - this.grandPrixList().findIndex(gp => gp.id === b.gpId);
});
standingsChartRawData.sort((a, b) => {
return this.grandPrixList().findIndex(gp => gp.id === a.gpId) - this.grandPrixList().findIndex(gp => gp.id === b.gpId);
});
// Convierto los datos de acumulados y ranking, ya ordenados por gps, a arrays que entiendan las gráficas
const accumulatedChartData = accumulatedChartRawData.map(data => data.points);
const standingsChartData = standingsChartRawData.map(data => data.standing);
// Agrego a la gráfica de puntos
this.chartSeries = [
...this.chartSeries,
Expand All @@ -488,14 +502,14 @@
name: username,
data: accumulatedChartData,
},
]
];
this.chartStandings = [
...this.chartStandings,
{
name: username,
data: standingsChartData,
},
]
];
}
});
this.tableHasData = Object.keys(points).length > 0;
Expand All @@ -510,10 +524,10 @@
grandPrixList(): Array<GrandPrix> {
return this.gps.filter(gp => this.gpsWithPoints.includes(Number(gp.id)));
},
checkAndInsertTrophy(gp: string, score: number) {
checkAndInsertTrophy(gp: number, score: number) {
return (this.maxPointsInGrandPrix.get(gp)! == score);
},
checkWinnerCell(gp: string, score: number) {
checkWinnerCell(gp: number, score: number) {
return (this.maxAccumulatedPointsInGrandPrix.get(gp)! == score);
},
updateChartsLegend() {
Expand Down
4 changes: 2 additions & 2 deletions src/types/GrandPrix.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {BASE_URL} from "@/_services";
import {CircuitVariant, ICircuitVariant} from "@/types/CircuitVariant";

export interface IGrandPrix {
id: string;
id: number;
name: string;
code: string;
competition: Competition;
Expand All @@ -27,7 +27,7 @@ export class GrandPrix implements IGrandPrix {
variant?: CircuitVariant;
code: string;
competition: Competition;
id: string;
id: number;
laps: number;
name: string;
sessions: Array<RaceSession>;
Expand Down
Loading

0 comments on commit cbd6cd0

Please sign in to comment.