Enable custom list summary number

This commit is contained in:
Sam Carlton 2020-12-11 14:59:05 -06:00
parent fa16340a86
commit fd0dcb5f2f
4 changed files with 102 additions and 36 deletions

View file

@ -34,13 +34,25 @@
<script>
import statuses from '~/helpers/statuses'
import getListSummaryNumbers from '~/helpers/get-list-summary-numbers.js'
export default {
props: {
appList: {
type: Array,
required: true
default: null
},
customNumbers: {
type: Object,
default: () => {
return {
total: null,
nativePercent: null,
rosettaPercent: null,
unreportedPercent: null,
unsupportedPercent: null
}
}
}
},
data: function () {
@ -53,7 +65,7 @@ export default {
},
computed: {
total () {
return this.appList.length
return (this.customNumbers.total) ? this.customNumbers.total : this.appList.length
},
percentages () {
return [
@ -104,34 +116,24 @@ export default {
created () {
// console.log('total apps ', this.total)
// Create a totals object to collect amounts
const totals = {}
const hasCustomNumbers = Object.entries(this.customNumbers).some(([key, number]) => number !== null)
// Get status slugs from statuses
Object.entries(statuses).forEach( ([_, statusSlug]) => {
totals[statusSlug] = 0
})
if (hasCustomNumbers) {
// Count uses of each status
this.appList.forEach( app => {
// console.log('app.status', app.status)
this.nativePercent = this.customNumbers.nativePercent
this.rosettaPercent = this.customNumbers.rosettaPercent
this.unreportedPercent = this.customNumbers.unreportedPercent
this.unsupportedPercent = this.customNumbers.unsupportedPercent
for (const statusKey in statuses) {
if (app.status === statuses[statusKey]) {
totals[app.status]++
break
}
}
return
}
})
const summaryNumbers = getListSummaryNumbers(this.appList)
// console.log('totals', totals)
this.nativePercent = Number((( totals['native'] / this.total ) * 100).toFixed(1))
this.rosettaPercent = Number((( totals['rosetta'] / this.total ) * 100).toFixed(1))
this.unreportedPercent = Number((( totals['unreported'] / this.total ) * 100).toFixed(1))
this.unsupportedPercent = Number((100 - (this.nativePercent + this.rosettaPercent + this.unreportedPercent)).toFixed(1))
this.nativePercent = summaryNumbers.nativePercent
this.rosettaPercent = summaryNumbers.rosettaPercent
this.unreportedPercent = summaryNumbers.unreportedPercent
this.unsupportedPercent = summaryNumbers.unsupportedPercent
// console.log('this.nativePercent', this.nativePercent)
// console.log('this.unsupportedPercent', this.unsupportedPercent)

View file

@ -1,13 +1,16 @@
<template>
<div class="search w-full">
<div class="list-summary-wrapper flex justify-center text-center text-sm my-4">
<ListSummary
:app-list="appList"
class="max-w-4xl"
/>
<slot name="before-search">
<div class="list-summary-wrapper flex justify-center text-center text-sm my-4">
</div>
<ListSummary
:app-list="appList"
class="max-w-4xl"
/>
</div>
</slot>
<div class="search-input relative">
<input

View file

@ -0,0 +1,43 @@
import statuses from '~/helpers/statuses'
export default function ( appList ) {
const totalApps = appList.length
// Create a totals object to collect amounts
const totals = {}
// Get status slugs from statuses
Object.entries(statuses).forEach( ([_, statusSlug]) => {
totals[statusSlug] = 0
})
// Count uses of each status
appList.forEach( app => {
// console.log('app.status', app.status)
for (const statusKey in statuses) {
if (app.status === statuses[statusKey]) {
totals[app.status]++
break
}
}
})
// console.log('totals', totals)
const nativePercent = Number((( totals['native'] / totalApps ) * 100).toFixed(1))
const rosettaPercent = Number((( totals['rosetta'] / totalApps ) * 100).toFixed(1))
const unreportedPercent = Number((( totals['unreported'] / totalApps ) * 100).toFixed(1))
const unsupportedPercent = Number((100 - (nativePercent + rosettaPercent + unreportedPercent)).toFixed(1))
return {
total: totalApps,
nativePercent,
rosettaPercent,
unreportedPercent,
unsupportedPercent,
}
}

View file

@ -13,7 +13,18 @@
:quick-buttons="quickButtons"
:initial-limit="200"
@update:query="onQueryUpdate"
/>
>
<template v-slot:before-search>
<div class="list-summary-wrapper flex justify-center text-center text-sm my-4">
<ListSummary
:custom-numbers="customSummaryNumbers"
class="max-w-4xl"
/>
</div>
</template>
</Search>
<div class="flex flex-col md:flex-row space-x-0 space-y-4 md:space-y-0 md:space-x-4">
<LinkButton
@ -48,16 +59,21 @@
<script>
import axios from 'axios'
import getListSummaryNumbers from '~/helpers/get-list-summary-numbers.js'
import Search from '~/components/search.vue'
import LinkButton from '~/components/link-button.vue'
import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
import ListSummary from '~/components/list-summary.vue'
export default {
async asyncData () {
// const { default: appList } = await import('~/static/app-list.json')
// const { default: gamelist } = await import('~/static/game-list.json')
const { sortedAppList } = await import('~/helpers/get-list.js')
const { sortedAppList, allList } = await import('~/helpers/get-list.js')
return {
// Filter app list to leave out data not needed for search
@ -71,13 +87,15 @@ export default {
lastUpdated: app.lastUpdated,
category: app.category,
}
})
}),
customSummaryNumbers: getListSummaryNumbers(allList)
}
},
components: {
Search,
LinkButton,
AllUpdatesSubscribe
AllUpdatesSubscribe,
ListSummary
},
data: function () {
return {