Enable custom list summary number

components/list-summary.vue

@@ -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 hasCustomNumbers = Object.entries(this.customNumbers).some(([key, number]) => number !== null)
-        const totals = {}
 
-        // Get status slugs from statuses
+        if (hasCustomNumbers) {
-        Object.entries(statuses).forEach( ([_, statusSlug]) => {
-            totals[statusSlug] = 0
-        })
 
-        // Count uses of each status
+            this.nativePercent = this.customNumbers.nativePercent
-        this.appList.forEach( app => {
+            this.rosettaPercent = this.customNumbers.rosettaPercent
-            // console.log('app.status', app.status)
+            this.unreportedPercent = this.customNumbers.unreportedPercent
+            this.unsupportedPercent = this.customNumbers.unsupportedPercent
 
-            for (const statusKey in statuses) {
+            return
-                if (app.status === statuses[statusKey]) {
+        }
-                    totals[app.status]++
-                    break
-                }
-            }
 
-        })
+        const summaryNumbers = getListSummaryNumbers(this.appList)
 
-        // console.log('totals', totals)
+        this.nativePercent = summaryNumbers.nativePercent
-
+        this.rosettaPercent = summaryNumbers.rosettaPercent
-        this.nativePercent = Number((( totals['native'] / this.total ) * 100).toFixed(1))
+        this.unreportedPercent = summaryNumbers.unreportedPercent
-        this.rosettaPercent = Number((( totals['rosetta'] / this.total ) * 100).toFixed(1))
+        this.unsupportedPercent = summaryNumbers.unsupportedPercent
-        this.unreportedPercent = Number((( totals['unreported'] / this.total ) * 100).toFixed(1))
-
-        this.unsupportedPercent = Number((100 - (this.nativePercent + this.rosettaPercent + this.unreportedPercent)).toFixed(1))
 
         // console.log('this.nativePercent', this.nativePercent)
         // console.log('this.unsupportedPercent', this.unsupportedPercent)

components/search.vue

@@ -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
+        <slot name="before-search">
-                :app-list="appList"
+            <div class="list-summary-wrapper flex justify-center text-center text-sm my-4">
-                class="max-w-4xl"
-            />
 
-        </div>
+                <ListSummary
+                    :app-list="appList"
+                    class="max-w-4xl"
+                />
+
+            </div>
+        </slot>
 
         <div class="search-input relative">
             <input

helpers/get-list-summary-numbers.js

@@ -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,
+    }
+}

pages/index.vue

@@ -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 {