Number of items with a certain metadata value. #483

src/views/admin/js/store/modules/report/actions.js

@@ -28,7 +28,7 @@ export const fetchMetadata = ({ commit }, { collectionId } ) => {
     if (collectionId && collectionId != 'default')
         endpoint += '/collection/' + collectionId + '/metadata';
     else
-        endpoint += '/repository/metadata';
+        endpoint += '/metadata';
 
     return new Promise((resolve, reject) => {
         axios.tainacan.get(endpoint)
@@ -42,6 +42,27 @@ export const fetchMetadata = ({ commit }, { collectionId } ) => {
     });
 };
 
+export const fetchMetadataList = ({ commit }, { collectionId, metadatumId } ) => {
+
+    let endpoint = '/reports';
+    
+    if (collectionId && collectionId != 'default')
+        endpoint += '/collection/' + collectionId + '/metadata/' + metadatumId;
+    else
+        endpoint += '/metadata/' + metadatumId;
+
+    return new Promise((resolve, reject) => {
+        axios.tainacan.get(endpoint)
+            .then(res => {
+                let metadataList = res.data.list;
+
+                commit('setMetadataList', metadataList);
+                resolve(metadataList);
+            })
+            .catch(error => reject(error));
+    });
+};
+
 export const fetchCollectionsList = ({ commit }) => {
 
     let endpoint = '/reports/collection'

src/views/admin/js/store/modules/report/getters.js

@@ -6,6 +6,10 @@ export const getMetadata = state => {
   return state.metadata;
 };
 
+export const getMetadataList = state => {
+  return state.metadataList;
+};
+
 export const getCollectionsList = state => {
   return state.collectionsList;
 };

src/views/admin/js/store/modules/report/index.js

@@ -8,6 +8,7 @@ const state = {
     colletionsList: {},
     taxonomyTerms: {},
     metadata: {},
+    metadataList: {},
     stackedBarChartOptions: {
         chart: {
           type: 'bar',

src/views/admin/js/store/modules/report/mutations.js

@@ -6,6 +6,10 @@ export const setMetadata = (state, metadata) => {
   state.metadata = metadata;
 };
 
+export const setMetadataList = (state, metadataList) => {
+  state.metadataList = metadataList;
+};
+
 export const setCollectionsList = (state, collectionsList) => {
   state.collectionsList = collectionsList;
 };

src/views/reports/pages/reports-list.vue

@@ -101,7 +101,7 @@
                         </option>
                     </select>
                     <apexchart
-                            v-if="!isFetchingTaxonomiesList && selectedTaxonomy"
+                            v-if="!isFetchingTaxonomiesList && !isFetchingTaxonomyTerms && selectedTaxonomy"
                             height="380px"
                             class="postbox"
                             :series="taxonomyTermsChartSeries"
@@ -143,6 +143,33 @@
                         style="min-height=740px"
                         class="skeleton postbox" />
             </div>
+            <div 
+                    v-if="metadataList != undefined"
+                    class="column is-full">
+                <select 
+                        v-if="!isFetchingMetadata"
+                        name="select_metadata"
+                        id="select_metadata"
+                        :placeholder="$i18n.get('label_select_a_metadata')"
+                        v-model="selectedMetadatum">
+                    <option 
+                            v-for="(metadatum, index) of metadataListArray"
+                            :key="index"
+                            :value="metadatum.id">
+                        {{ metadatum.name }}
+                    </option>
+                </select>
+                <apexchart
+                        v-if="!isFetchingMetadataList && !isFetchingMetadata && selectedMetadatum"
+                        height="380px"
+                        class="postbox"
+                        :series="metadataListChartSeries"
+                        :options="metadataListChartOptions" />
+                <div 
+                        v-else
+                        style="min-height=380px"
+                        class="skeleton postbox" />
+            </div>
         </div>
     </div>
 </template>
@@ -156,16 +183,20 @@ export default {
         return {
             selectedCollection: 'default',
             selectedTaxonomy: '',
+            selectedMetadatum: '',
             isFetchingCollections: false,
             isFetchingSummary: false,
             isFetchingCollectionsList: false,
             isFetchingTaxonomiesList: false,
             isFetchingTaxonomyTerms: false,
             isFetchingMetadata: false,
+            isFetchingMetadataList: false,
             collectionsListChartSeries: [],
             collectionsListChartOptions: {},
             taxonomiesListChartSeries: [],
             taxonomiesListChartOptions: {},
+            metadataListChartSeries: [],
+            metadataListChartOptions: {},
             taxonomyTermsChartSeries: [],
             taxonomyTermsChartOptions: {},
             metadataTypeChartSeries: [],
@@ -182,6 +213,7 @@ export default {
         ...mapGetters('report', {
             summary: 'getSummary',
             metadata: 'getMetadata',
+            metadataList: 'getMetadataList',
             taxonomyTerms: 'getTaxonomyTerms',
             taxonomiesList: 'getTaxonomiesList',
             collectionsList: 'getCollectionsList',
@@ -191,6 +223,9 @@ export default {
         }),
         taxonomiesListArray() {
             return this.taxonomiesList && this.taxonomiesList != undefined ? Object.values(this.taxonomiesList) : [];
+        },
+        metadataListArray() {
+            return this.metadata && this.metadata != undefined && this.metadata.distribution ? Object.values(this.metadata.distribution) : [];
         }
     },
     watch: {
@@ -198,10 +233,9 @@ export default {
             handler(to) {
                 this.selectedCollection = to['collection'] ? to['collection'] : 'default';
                 this.loadSummary();
+                this.loadMetadata();
 
-                if (this.selectedCollection && this.selectedCollection != 'default')
+                if (!this.selectedCollection || this.selectedCollection == 'default') {
-                    this.loadMetadata();
-                else {
                     this.loadCollectionsList();
                     this.loadTaxonomiesList();
                 }
@@ -212,6 +246,10 @@ export default {
         selectedTaxonomy() {
             if (this.selectedTaxonomy && this.selectedTaxonomy != '')
                 this.loadTaxonomyTerms();
+        },
+        selectedMetadatum() {
+            if (this.selectedMetadatum && this.selectedMetadatum != '')
+                this.loadMetadataList();
         }
     },
     created() {
@@ -230,7 +268,8 @@ export default {
             'fetchCollectionsList',
             'fetchTaxonomiesList',
             'fetchTaxonomyTerms',
-            'fetchMetadata'
+            'fetchMetadata',
+            'fetchMetadataList'
         ]),
         loadCollections() {
             this.isFetchingCollections = true;
@@ -272,6 +311,7 @@ export default {
                     }
 
                     if (this.metadata.distribution) {
+
                         // Building Metadata Distribution Bar chart
                         const orderedMetadataDistributions = Object.values(this.metadata.distribution).sort((a, b) => b.fill_percentage - a.fill_percentage);
                         let metadataDistributionValues = [];
@@ -285,6 +325,10 @@ export default {
                             metadataDistributionLabels.push(metadataDistribution.name);
                         })
 
+                        // Sets first metadatum as the selected one 
+                        if (orderedMetadataDistributions.length)
+                            this.selectedMetadatum = orderedMetadataDistributions[0].id;
+
                         this.metadataDistributionChartSeries = [
                             { 
                                 name: this.$i18n.get('label_filled'),
@@ -489,6 +533,51 @@ export default {
                 })
                 .catch(() => this.isFetchingTaxonomyTerms = false);
 
+        },
+        loadMetadataList() {
+            this.isFetchingMetadataList = true;
+            this.fetchMetadataList({ collectionId: this.collectionId, metadatumId: this.selectedMetadatum })
+                .then(() => {
+                    
+                    // Building Taxonomy term usage chart
+                    const orderedMetadata = Object.values(this.metadataList).sort((a, b) => a.total_items - b.total_items);
+                    let metadataItemValues = [];
+                    let metadataItemLabels = [];
+
+                    orderedMetadata.forEach(metadataItem => {
+                        metadataItemValues.push(metadataItem.total_items);
+                        metadataItemLabels.push(metadataItem.label);
+                    }); 
+
+                    this.metadataListChartSeries = [
+                        {
+                            name: this.$i18n.get('label_items_with_this_metadum_value'),
+                            data: metadataItemValues
+                        }
+                    ];
+                    
+                    this.metadataListChartOptions = {
+                        ...this.stackedBarChartOptions, 
+                        ...{
+                            title: {
+                                text: this.$i18n.get('label_amount_of_items_per_metadatum_value')
+                            },
+                            xaxis: {
+                                type: 'category',
+                                tickPlacement: 'on',
+                                categories: metadataItemLabels,
+                            },
+                            yaxis: {
+                                title: {
+                                    text: this.$i18n.get('label_number_of_items')
+                                }
+                            }
+                        }
+                    }
+                    
+                    this.isFetchingMetadataList = false;
+                })
+                .catch(() => this.isFetchingMetadataList = false);
         }
     }
 }

src/views/tainacan-admin-i18n.php

@@ -508,6 +508,8 @@ return apply_filters( 'tainacan-admin-i18n', [
 	/* translators: To be displayed with the number of Taxonomies used in the colllection */
 	'label_used'								 	 => __( 'Used', 'tainacan' ),
 	'label_select_a_taxonomy'					 	 => __( 'Select a taxonomy', 'tainacan' ),
+	'label_items_with_this_metadum_value'		 	 => __( 'Items with this metadatum value', 'tainacan' ),
+	'label_amount_of_items_per_metadatum_value'		 => __( 'Amount of items per metadatum value', 'tainacan' ),
 	
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),