Merge pull request #131 from SpeciesFileGroup/development

Add ProjectStats component

README.markdown

@@ -165,6 +165,7 @@ TaxonPages provides a set of global components that could be used to create your
 | `<Dropdown/>`         | Dropdown menu                                  |                                                                                                                          |
 | `<GalleryImage/>`     |                                                | [Link](https://github.com/SpeciesFileGroup/taxonpages/blob/main/src/components/Gallery/GalleryImage.global.vue#L40)      |
 | `<ImageViewer/>`      |                                                |                                                                                                                          |
+| `<ProjectStats/>`     | TaxonWorks Project Statistics                  |                                                                                                                          |
 | `<TabMenu/>`          |                                                |                                                                                                                          |
 | `<TabItem/>`          |                                                |                                                                                                                          |
 | `<VMap/>`             | Interactive map that use Leaflet library       |                                                                                                                          |

src/components/ProjectStats.global.vue

@@ -0,0 +1,66 @@
+<template>
+  <component :is="tag">
+    <slot
+      v-for="([type, value], index) in list"
+      :type="type"
+      :value="value"
+    >
+      <span>
+        {{ type }}: {{ value }}{{ index < list.length - 1 ? '; ' : '' }}
+      </span>
+    </slot>
+  </component>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { makeAPIRequest } from '@/utils'
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  },
+
+  tag: {
+    type: String,
+    default: 'span'
+  }
+})
+
+const stats = ref({ data: [] })
+
+const selectedData = computed(() =>
+  props.data.map((item) => item.toLowerCase())
+)
+const list = computed(() => {
+  const currentStats = stats.value.data
+
+  return currentStats.length
+    ? filterStats(currentStats)
+    : selectedData.value.map((item) => [item, '??'])
+})
+
+function filterStats(currentStats) {
+  const list = props.data.length
+    ? currentStats.filter(([key]) => selectedData.value.includes(key))
+    : currentStats
+
+  list.sort(
+    ([a], [b]) => selectedData.value.indexOf(a) - selectedData.value.indexOf(b)
+  )
+
+  return list
+}
+
+onMounted(() => {
+  makeAPIRequest.get('/stats').then((response) => {
+    const data = Object.entries(response.data.data).map(([key, value]) => [
+      key.toLowerCase(),
+      value.toLocaleString()
+    ])
+
+    stats.value.data = data
+  })
+})
+</script>

src/utils/index.js

@@ -1,4 +1,3 @@
 export * from './color'
-export * from './getMeta'
 export * from './request'
 export * from './strings'