From 761ea133dd5ec31c245f42d2c4057759581bd26d Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Wed, 30 Aug 2023 15:43:10 -0300
Subject: [PATCH] Add ProjectStats component

---
 README.markdown                        |  1 +
 src/components/ProjectStats.global.vue | 66 ++++++++++++++++++++++++++
 src/utils/index.js                     |  1 -
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ProjectStats.global.vue

diff --git a/README.markdown b/README.markdown
index 0c8b0ab..984d467 100644
--- a/README.markdown
+++ b/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       |                                                                                                                          |
diff --git a/src/components/ProjectStats.global.vue b/src/components/ProjectStats.global.vue
new file mode 100644
index 0000000..da8dc47
--- /dev/null
+++ b/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>
diff --git a/src/utils/index.js b/src/utils/index.js
index f87b136..5087657 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,4 +1,3 @@
 export * from './color'
-export * from './getMeta'
 export * from './request'
 export * from './strings'