Skip to content

Commit

Permalink
refactor(Stats): new StatCard component. Use in stats page (#871)
Browse files Browse the repository at this point in the history
  • Loading branch information
@raphodn
raphodn authored Sep 29, 2024
1 parent 588c97a commit 55ffabe
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 74 deletions.
22 changes: 22 additions & 0 deletions src/components/StatCard.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<template>
<v-card
:title="value"
:subtitle="subtitle"
variant="tonal"
/>
</template>

<script>
export default {
props: {
value: {
type: Number,
default: 0
},
subtitle: {
type: String,
default: ''
},
}
}
</script>
7 changes: 7 additions & 0 deletions src/i18n/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,8 @@
"TopContributors": "Top contributors",
"TopLocations": "Top locations",
"TopProducts": "Top products",
"Today": "Today",
"Total": "Total",
"Type": "Type",
"Upload": "Upload",
"User": "User",
Expand Down Expand Up @@ -428,6 +430,7 @@
"WrongCredentials": "Error: wrong credentials"
},
"Stats": {
"AddedToday": "Added today",
"Prices": "Prices",
"PricesToday": "Prices added today",
"PricesTotal": "Total prices",
Expand All @@ -439,7 +442,11 @@
"Total": "Total",
"WithPrice": "With a price",
"WithProduct": "With a product",
"WithProductBarcode": "With a product barcode",
"WithProductCategory": "With a product category",
"WithoutProduct": "Without a product",
"WithBarcode": "With a barcode",
"WithCategory": "With a category",
"LastUpdated": "Last updated on {date}"
},
"UserDashboard": {
Expand Down
13 changes: 7 additions & 6 deletions src/views/Home.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<template>
<h1 class="text-h5 mb-1">
<h2 class="text-h6">
{{ $t('Home.Welcome.Generic') }}
</h1>
</h2>

<br>

<v-row>
<v-col sm="6" md="4" lg="3">
<v-card :title="todayPriceCount" :subtitle="$t('Stats.PricesToday')" variant="tonal" />
<v-col cols="6" sm="4" md="3" lg="2">
<StatCard :value="todayPriceCount" :subtitle="$t('Stats.Today')" />
</v-col>
<v-col sm="6" md="4" lg="3">
<v-card :title="totalPriceCount" :subtitle="$t('Stats.PricesTotal')" variant="tonal" />
<v-col cols="6" sm="4" md="3" lg="2">
<StatCard :value="totalPriceCount" :subtitle="$t('Stats.Total')" />
</v-col>
</v-row>

Expand Down Expand Up @@ -53,6 +53,7 @@ import utils from '../utils.js'
export default {
components: {
StatCard: defineAsyncComponent(() => import('../components/StatCard.vue')),
PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue'))
},
data() {
Expand Down
137 changes: 69 additions & 68 deletions src/views/Stats.vue
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,79 @@
<template>
<h1 class="text-h5 mb-1">
{{ $t('Stats.Title') }}
<v-progress-circular v-if="loading" indeterminate :size="30" />
</h1>
<h2 class="text-h6 mb-1">
<v-icon size="x-small" icon="mdi-tag-outline" />
{{ $t('Common.Prices') }}
</h2>

<v-row>
<v-col cols="12" md="6" lg="4">
<v-card :title="$t('Common.Prices')" height="100%">
<v-card-text>
<p>
{{ $t('Stats.Total') }} <strong>{{ stats.price_count }}</strong>
</p>
<p>
{{ $t('Stats.WithProduct') }} <v-chip label size="small" density="comfortable" class="mr-1">
barcode
</v-chip>
<strong>{{ stats.price_barcode_count }}</strong>
</p>
<p>
{{ $t('Stats.WithoutProduct') }} <v-chip label size="small" density="comfortable" class="mr-1">
category
</v-chip>
<strong>{{ stats.price_category_count }}</strong>
</p>
</v-card-text>
</v-card>
<v-col cols="6" sm="4" md="3" lg="2">
<StatCard :value="stats.price_count" :subtitle="$t('Stats.Total')" />
</v-col>
<v-col cols="6" sm="4" md="3" lg="2">
<StatCard :value="stats.price_barcode_count" :subtitle="$t('Stats.WithBarcode')" />
</v-col>
<v-col cols="6" sm="4" md="3" lg="2">
<StatCard :value="stats.price_category_count" :subtitle="$t('Stats.WithCategory')" />
</v-col>
</v-row>

<v-col cols="12" md="6" lg="4">
<v-card :title="$t('Common.Products')" height="100%">
<v-card-text>
<p>
{{ $t('Stats.Total') }} <strong>{{ stats.product_count }}</strong>
</p>
<p>
{{ $t('Stats.WithPrice') }} <strong>{{ stats.product_with_price_count }}</strong>
</p>
</v-card-text>
</v-card>
<br>

<h2 class="text-h6 mb-1">
<v-icon size="x-small" icon="mdi-database-outline" />
{{ $t('Common.Products') }}
</h2>

<v-row>
<v-col cols="6" sm="4" md="3" lg="2">
<StatCard :value="stats.product_count" :subtitle="$t('Stats.Total')" />
</v-col>
<v-col cols="6" sm="4" md="3" lg="2">
<StatCard :value="stats.product_with_price_count" :subtitle="$t('Stats.WithPrice')" />
</v-col>
</v-row>

<br>

<v-col cols="12" md="6" lg="4">
<v-card :title="$t('Common.Locations')" height="100%">
<v-card-text>
<p>
{{ $t('Stats.Total') }} <strong>{{ stats.location_count }}</strong>
</p>
<p>
{{ $t('Stats.WithPrice') }} <strong>{{ stats.location_with_price_count }}</strong>
</p>
</v-card-text>
</v-card>
<h2 class="text-h6 mb-1">
<v-icon size="x-small" icon="mdi-map-marker-outline" />
{{ $t('Common.Locations') }}
</h2>

<v-row>
<v-col cols="6" sm="4" md="3" lg="2">
<StatCard :value="stats.location_count" :subtitle="$t('Stats.Total')" />
</v-col>
<v-col cols="6" sm="4" md="3" lg="2">
<StatCard :value="stats.location_with_price_count" :subtitle="$t('Stats.WithPrice')" />
</v-col>
</v-row>

<br>

<v-col cols="12" md="6" lg="4">
<v-card :title="$t('Common.Proofs')" height="100%">
<v-card-text>
<p>
{{ $t('Stats.Total') }} <strong>{{ stats.proof_count }}</strong>
</p>
<p>
{{ $t('Stats.WithPrice') }} <strong>{{ stats.proof_with_price_count }}</strong>
</p>
</v-card-text>
</v-card>
<h2 class="text-h6 mb-1">
<v-icon size="x-small" icon="mdi-image" />
{{ $t('Common.Proofs') }}
</h2>

<v-row>
<v-col cols="6" sm="4" md="3" lg="2">
<StatCard :value="stats.proof_count" :subtitle="$t('Stats.Total')" />
</v-col>
<v-col cols="6" sm="4" md="3" lg="2">
<StatCard :value="stats.proof_with_price_count" :subtitle="$t('Stats.WithPrice')" />
</v-col>
</v-row>

<br>

<h2 class="text-h6 mb-1">
<v-icon size="x-small" icon="mdi-account-outline" />
{{ $t('Common.Users') }}
</h2>

<v-col cols="12" md="6" lg="4">
<v-card :title="$t('Stats.Users')" height="100%">
<v-card-text>
<p>
{{ $t('Stats.Total') }} <strong>{{ stats.user_count }}</strong>
</p>
<p>
{{ $t('Stats.WithPrice') }} <strong>{{ stats.user_with_price_count }}</strong>
</p>
</v-card-text>
</v-card>
<v-row>
<v-col cols="6" sm="4" md="3" lg="2">
<StatCard :value="stats.user_with_price_count" :subtitle="$t('Stats.WithPrice')" />
</v-col>
</v-row>

Expand All @@ -92,10 +89,14 @@
</template>

<script>
import { defineAsyncComponent } from 'vue'
import api from '../services/api'
import utils from '../utils.js'
export default {
components: {
StatCard: defineAsyncComponent(() => import('../components/StatCard.vue')),
},
data() {
return {
stats: {
Expand Down

0 comments on commit 55ffabe

Please sign in to comment.