Skip to content

Commit

Permalink
Merge pull request #278 from DurhamAcademy/245-edit-matches-page-for-…
Browse files Browse the repository at this point in the history 
…this-year

created matchvisualization
  • Loading branch information
@PrestonSwigart
PrestonSwigart authored Jan 17, 2025
2 parents 970f3a5 + ffe73a5 commit e0f4237
Show file tree
Hide file tree
Showing 3 changed files with 499 additions and 232 deletions.
227 changes: 227 additions & 0 deletions components/25-reefscape/MatchVisualization.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
<script setup lang="ts">
import Sentiment from 'sentiment';
import BarChart from '../charts/BarChart.vue';
let sentiment = new Sentiment();
let options = {
extras: {
mid: -2,
pretty: 0,
broke: -3.5,
disabled: -3.5,
quickly: 2,
easily: 2,
dog: -3,
},
};
const props = defineProps<{
rowData: any;
}>();
const selectedMatch = ref(1);
props.rowData.rawData.sort(compareMatchNumbers);
function compareMatchNumbers(a: any, b: any) {
//TODO i hate this work around rly need to fix this
let matchA =
typeof a.matchNumber == 'string' ? parseInt(a.matchNumber) : a.matchNumber;
let matchB =
typeof b.matchNumber == 'string' ? parseInt(b.matchNumber) : b.matchNumber;
if (matchA < matchB) {
return -1;
}
if (matchA > matchB) {
return 1;
}
return 0;
}
const chartLabels = [
'Auto Coral L1',
'Auto Coral L2',
'Auto Coral L3',
'Auto Coral L4',
'Coral L1',
'Coral L2',
'Coral L3',
'Coral L4',
'Net',
'Net Miss',
'Processor',
'Processor Miss'
];
let currData: any = ref(props.rowData.rawData[selectedMatch.value - 1]);
watch(selectedMatch, () => {
currData.value = props.rowData.rawData[selectedMatch.value - 1];
chartData.value = [
currData.value.auto.coralL1,
currData.value.auto.coralL2,
currData.value.auto.coralL3,
currData.value.auto.coralL4,
currData.value.teleop.coralL1,
currData.value.teleop.coralL2,
currData.value.teleop.coralL3,
currData.value.teleop.coralL4,
currData.value.teleop.net,
currData.value.teleop.netMiss,
currData.value.teleop.processor,
currData.value.teleop.processorMiss,
];
chartTitle.value = 'Match ' + currData.value.matchNumber;
sentimentScore = sentiment.analyze(
props.rowData.rawData[selectedMatch.value - 1].notes.notes,
).score;
});
let sentimentScore = sentiment.analyze(
props.rowData.rawData[selectedMatch.value - 1].notes.notes,
).score;
let chartData = ref([
currData.value.auto.coralL1,
currData.value.auto.coralL2,
currData.value.auto.coralL3,
currData.value.auto.coralL4,
currData.value.teleop.coralL1,
currData.value.teleop.coralL2,
currData.value.teleop.coralL3,
currData.value.teleop.coralL4,
currData.value.teleop.net,
currData.value.teleop.netMiss,
currData.value.teleop.processor,
currData.value.teleop.processorMiss,
]);
let chartTitle = ref('Match ' + currData.value.matchNumber);
let promptedNotesOptions = ['Defense', 'Offense', 'Driver'];
let promptedNotesDetailedOptions = [
['Defense location', 'Risk of fouls', 'Other'],
[
'Shooing location(s)',
'Ability to avoid defense',
'Weakness of cycles',
'Other',
],
['Strengths', 'Weaknesses', 'Other'],
];
console.log(props.rowData.rawData);
</script>

<template>
<UCard>
<div class="flex flex-wrap">
<div class="flex-auto">
<BarChart
class="mb-1"
:labels="chartLabels"
:data="chartData"
:chart-title="chartTitle"
height="h-80"
width="w-80"
></BarChart>
</div>
<div class="flex-auto whitespace-normal max-h-72 w-72 max-w-72">
<div
v-if="rowData.rawData[selectedMatch - 1].auto.position != undefined"
>
<p class="font-extrabold text-sm inline-block">
Auto Position: &nbsp;
</p>
<p class="text-sm inline-block">
{{ rowData.rawData[selectedMatch - 1].auto.position }}
</p>
</div>
<p class="font-extrabold text-sm">Auto & Endgame:</p>
<div class="pb-1">
<UBadge
color="sky"
variant="subtle"
v-if="rowData.rawData[selectedMatch - 1].auto.mobility"
class="mr-1.5 mt-2"
>Mobility</UBadge
>
<UBadge
color="indigo"
variant="subtle"
v-for="endgame in rowData.rawData[selectedMatch - 1].endgame
.endgame"
class="mr-1.5 mt-2"
>
{{ endgame }}
</UBadge>
</div>
<div class="text-wrap max-w-72 h-2/3 max-h-2/3 overflow-y-scroll">
<div
v-for="(item, index) in rowData.rawData[selectedMatch - 1].notes
.promptedNotes"
>
<div v-if="item.selected">
<div class="pb-1">
<span class="font-extrabold mr-2 text-sm">{{
promptedNotesOptions[index] + ':'
}}</span>
<UBadge
:color="
item.rating > 3 ? 'green' : item.rating < 3 ? 'red' : 'gray'
"
:variant="
item.rating == 2 || item.rating == 4 ? 'soft' : 'subtle'
"
>{{ item.rating }}</UBadge
>
</div>
<div v-for="(text, i) in item.notes">
<p
v-if="text != ''"
class="text-xs pb-0 font-semibold underline-offset-2"
>
{{ promptedNotesDetailedOptions[index][i] + ':' }}
</p>
<p v-if="text != ''" class="pb-2.5 text-xs">{{ text }}</p>
</div>
</div>
</div>
<span class="font-extrabold text-sm">Other notes: </span>
<UBadge
:color="
sentimentScore > 1
? 'green'
: sentimentScore < -1
? 'red'
: 'gray'
"
:variant="
sentimentScore < 1 && sentimentScore > -1 ? 'soft' : 'subtle'
"
>{{ sentimentScore }}</UBadge
>
<p class="pb-2 text-xs">
{{
rowData.rawData[selectedMatch - 1].notes.notes == ''
? 'None'
: rowData.rawData[selectedMatch - 1].notes.notes
}}
</p>
</div>
</div>
</div>

<template #footer>
<UPagination
v-model="selectedMatch"
:total="rowData.rawData.length"
show-last
show-first
:page-count="1"
:max="7"
:active-button="{ variant: 'outline' }"
:inactive-button="{ color: 'gray' }"
/>
</template>
</UCard>
</template>
36 changes: 17 additions & 19 deletions pages/dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import PouchDB from 'pouchdb';
import databases, { type TeamInfo } from '~/utils/databases';
import OuterComponents from '~/components/website-utils/OuterComponents.vue';
let syncDisable = ref(false);
//
async function sync() {
syncDisable.value = true;
await PouchDB.sync(
Expand Down Expand Up @@ -258,7 +258,7 @@ async function updateTeamData() {
<div
class="w-full my-8 text-center font-sans font-bold !text-primary text-5xl"
>
ChocoChips Scouting 🍪<! -- title! -->
ChocoChips Scouting
</div>
<UCard
class="mb-8 px-4 pb-4"
Expand Down Expand Up @@ -353,10 +353,10 @@ async function updateTeamData() {
<div class="h-40 overflow-y-auto px-4 rounded-md">
<div
v-for="(event, index) in pastEvents"
class="bg-gray-100 rounded-md"
class="bg-gray-100 rounded-md dark:bg-gray-800"
>
<div class="my-2 p-2">
<p class="font-medium">{{ event.name }}</p>
<p class="font-medium dark:text-white">{{ event.name }}</p>
<UButton
class="rounded-full my-0.5"
icon="i-heroicons-map-pin-solid"
Expand All @@ -373,19 +373,19 @@ async function updateTeamData() {
/>
<div class="flex my-0.5">
<UButton
class="rounded-full mx-0.5"
class="rounded-full mx-0.5 dark:hover:bg-primary-950"
icon="i-heroicons-calendar-days-solid"
variant="outline"
color="gray"
color="primary"
/>
<UButton
v-if="typeof event.week === 'number'"
class="rounded-full mx-0.5 mr-1"
class="rounded-full mx-0.5 mr-1 dark:hover:bg-primary-950"
:label="'Week ' + (parseInt(event.week) + 1)"
color="gray"
color="primary"
variant="outline"
/>
<p class="my-auto mx-0.5">
<p class="my-auto mx-0.5 dark:text-white">
{{
months.at(event.start_date.split('-')[1] - 1) +
' ' +
Expand Down Expand Up @@ -416,7 +416,7 @@ async function updateTeamData() {
class="rounded-full mx-0.5 mr-1"
color="primary"
/>
<p class="my-auto mx-0.5 font-sans">
<p class="my-auto mx-0.5 font-sans dark:text-white">
{{ placeify(teamEventData[index].rank) }} Place with a
Record of
{{
Expand Down Expand Up @@ -551,15 +551,13 @@ async function updateTeamData() {
</div>
</div>
<div v-else>
<p class="font-medium text-xl text-center">No Events Scheduled</p>
<div class="flex-auto">
<img
src="/public/sadcookie.png"
height="140"
width="140"
class="mx-auto"
/>
</div>
<p class="font-medium text-xl text-center !text-primary">No Events Scheduled</p>
<NuxtImg
src="/sadcookie.png"
class="mx-auto"
width="145"
height="145"
/>
</div>
</template>
</UTabs>
Expand Down
Loading

0 comments on commit e0f4237

Please sign in to comment.