Skip to content

Commit

Permalink
feat: #3 add statistics page
Browse files Browse the repository at this point in the history
  • Loading branch information
MV88 committed Nov 21, 2021
1 parent b2f2a4a commit a98a694
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 0 deletions.
6 changes: 6 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ module.exports = {
html: { normal: "never", void: "always" },
},
],
"prettier/prettier": [
"error",
{
endOfLine: "auto",
},
],
"no-console": "off",
},
};
3 changes: 3 additions & 0 deletions components/layout/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@
<b-nav-item>
<NuxtLink to="/attempts" tag="span"> Attempts </NuxtLink>
</b-nav-item>
<b-nav-item>
<NuxtLink to="/statistics" tag="span"> Statistics </NuxtLink>
</b-nav-item>
<b-nav-item>
<NuxtLink to="/gallery" tag="span"> Gallery </NuxtLink>
</b-nav-item>
Expand Down
71 changes: 71 additions & 0 deletions pages/statistics.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<template>
<div class="flex-container statistics">
<b-container>
<p>
In this page you can see a bunch of statistics <br />like the total
number number of successful attempts:
<strong>{{ totalAttempts }}</strong>
</p>
<h5>Number of usages per rope</h5>
<b-table striped hover :items="ropesUsage" :fields="fieldsRopes">
<template #cell(rope)="data">
{{
`${data.value.brand} ${data.value.length} m
${data.value.thickness} mm`
}}
</template>
</b-table>
<h5>Number of times we climbed a certain grade</h5>
<b-table striped hover :items="counterGrades" :fields="fieldsGrades" />
</b-container>
</div>
</template>

<script>
export default {
name: "Statistics",
components: {},
data() {
return {
width: window.innerWidth,
fieldsRopes: ["rope", "value"],
fieldsGrades: ["grade", "value"],
};
},
computed: {
attempts() {
return this.$store.getters.getResourcesAttempts;
},
ropesUsage() {
return this.$store.getters.getRopesUsage;
},
counterGrades() {
return this.$store.getters.counterGrades;
},
totalAttempts() {
return this.$store.getters.totalAttempts;
},
},
mounted() {
this.getData();
},
methods: {
async getData() {
const attempts = await this.$axios.$get("api/v1/attempts");
this.$store.commit("setResources", {
name: "attempts",
resources: attempts.result,
});
},
},
};
</script>

<style>
.statistics {
padding-top: 16px;
}
.statistics table {
width: unset;
}
</style>
28 changes: 28 additions & 0 deletions store/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,34 @@ export const getters = {
getShowDeleteGalleryById: (state) => state.show.delete.galleryById,
getResources: (state) => state.resources,
getResourcesAttempts: (state) => state.resources.attempts || [],
getRopesUsage: (state, getters) => {
const usage = {};
getters.getResourcesAttempts.forEach(({ hasRope, tries }) => {
const val =
usage[hasRope.id] && usage[hasRope.id].value
? usage[hasRope.id].value
: 0;
usage[hasRope.id] = {};
usage[hasRope.id].value = val + tries;
usage[hasRope.id].rope = hasRope;
});
return Object.keys(usage).map((key) => ({ id: key, ...usage[key] }));
},
totalAttempts: (state, getters) => {
return getters.getResourcesAttempts.length;
},
counterGrades: (state, getters) => {
const grades = {};
getters.getResourcesAttempts.forEach(({ hasRoute }) => {
const id = hasRoute.hasGrade.french;
const val = grades[id] && grades[id].value ? grades[id].value : 0;
grades[id] = {};
grades[id].name = hasRoute.name;
grades[id].grade = hasRoute.hasGrade.french;
grades[id].value = val + 1;
});
return Object.keys(grades).map((key) => ({ id: key, ...grades[key] }));
},
getResourcesStyles: (state) => state.resources.styles || [],
getResourcesGalleries: (state) => state.resources.galleries || [],
getResourcesRopes: (state) => state.resources.ropes || [],
Expand Down

0 comments on commit a98a694

Please sign in to comment.