Moves taxonomies list and term usage charts to separate components. #483

src/assets/css/tainacan-reports.css

@@ -16,5 +16,34 @@
       padding: 0; }
       #tainacan-reports-app .columns .column .postbox {
         margin: 0.75rem; }
+  #tainacan-reports-app .postbox {
+    padding: 1.125rem 1.25rem;
+    margin-bottom: 0;
+    height: 100%;
+    min-height: 380px;
+    background-color: var(--tainacan-block-gray0, #f6f6f6); }
+    #tainacan-reports-app .postbox label {
+      font-weight: bold;
+      font-size: 0.875rem; }
+    #tainacan-reports-app .postbox.metadata-distribution-box {
+      margin: 0px 0px 0.75rem 1.5rem !important;
+      overflow-y: auto; }
+    #tainacan-reports-app .postbox .box-header {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      flex-wrap: wrap; }
+      #tainacan-reports-app .postbox .box-header .box-header__item {
+        margin-bottom: 10px; }
+  #tainacan-reports-app .graph-mode-switch {
+    display: inline-block; }
+    #tainacan-reports-app .graph-mode-switch button {
+      border: none !important;
+      background: none !important;
+      box-shadow: none !important;
+      padding: 0;
+      cursor: pointer; }
+      #tainacan-reports-app .graph-mode-switch button.current {
+        color: var(--wp-admin-theme-color, #007cba); }
 
 /*# sourceMappingURL=tainacan-reports.css.map */

src/assets/css/tainacan-reports.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA,qBAAsB;EAClB,OAAO,EAAE,iBAAiB;EAC1B,MAAM,EAAE,CAAC;EAGT,4CAAuB;IACnB,OAAO,EAAE,GAAG;EAGhB,6BAAQ;IACJ,MAAM,EAAE,OAAO;EAGnB,wCAAmB;IACf,aAAa,EAAE,IAAI;EAGvB,8BAAS;IACL,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,UAAU;IACvB,eAAe,EAAE,MAAM;IAEvB,sCAAQ;MACJ,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,CAAC;MAEV,+CAAS;QACL,MAAM,EAAE,OAAO",
+"mappings": "AAAA,qBAAsB;EAClB,OAAO,EAAE,iBAAiB;EAC1B,MAAM,EAAE,CAAC;EAGT,4CAAuB;IACnB,OAAO,EAAE,GAAG;EAGhB,6BAAQ;IACJ,MAAM,EAAE,OAAO;EAGnB,wCAAmB;IACf,aAAa,EAAE,IAAI;EAGvB,8BAAS;IACL,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,UAAU;IACvB,eAAe,EAAE,MAAM;IAEvB,sCAAQ;MACJ,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,CAAC;MAEV,+CAAS;QACL,MAAM,EAAE,OAAO;EAK3B,8BAAS;IACL,OAAO,EAAE,gBAAgB;IACzB,aAAa,EAAE,CAAC;IAChB,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,KAAK;IACjB,gBAAgB,EAAE,oCAAoC;IAEtD,oCAAM;MACF,WAAW,EAAE,IAAI;MACjB,SAAS,EAAE,QAAQ;IAEvB,wDAA4B;MACxB,MAAM,EAAE,iCAAiC;MACzC,UAAU,EAAE,IAAI;IAGpB,0CAAY;MACR,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,QAAQ;MACrB,eAAe,EAAE,aAAa;MAC9B,SAAS,EAAE,IAAI;MAEf,4DAAkB;QACd,aAAa,EAAE,IAAI;EAI/B,wCAAmB;IACf,OAAO,EAAE,YAAY;IACrB,+CAAO;MACH,MAAM,EAAE,eAAe;MACvB,UAAU,EAAE,eAAe;MAC3B,UAAU,EAAE,eAAe;MAC3B,OAAO,EAAE,CAAC;MACV,MAAM,EAAE,OAAO;MAEf,uDAAU;QACN,KAAK,EAAE,oCAAoC",
 "sources": ["../../views/reports/tainacan-reports.scss"],
 "names": [],
 "file": "tainacan-reports.css"

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

@@ -18,6 +18,10 @@ export const getTaxonomiesList = state => {
   return state.taxonomiesList;
 };
 
+export const getIsFetchingTaxonomiesList = state => {
+  return state.isFetchingTaxomiesList;
+};
+
 export const getTaxonomyTerms = state => {
   return state.taxonomyTerms;
 };

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

@@ -5,6 +5,7 @@ import * as mutations from './mutations';
 const state = {
     summary: {},
     taxonomiesList: {},
+    isFetchingTaxonomiesList: false,
     colletionsList: {},
     taxonomyTerms: {},
     metadata: {},

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

@@ -18,6 +18,10 @@ export const setTaxonomiesList = (state, taxonomiesList) => {
   state.taxonomiesList = taxonomiesList;
 };
 
+export const setIsFetchingTaxonomiesList = (state, isFetchingTaxomiesList) => {
+  return state.isFetchingTaxomiesList = isFetchingTaxomiesList;
+};
+
 export const setTaxonomyTerms = (state, taxonomyTerms) => {
   state.taxonomyTerms = taxonomyTerms;
 };

src/views/reports/components/items-per-term-block.vue

@@ -0,0 +1,228 @@
+<template>
+     <div 
+            v-if="taxonomiesList != undefined"
+            class="column is-full">
+        <div class="postbox">
+            <div class="box-header">
+                <div class="box-header__item">
+                    <label 
+                            v-if="!isFetchingTaxonomiesList"
+                            for="select_taxonomies">
+                        {{ $i18n.get('label_items_per_term_from_taxonomy') }}&nbsp;
+                    </label>
+                    <select
+                            v-if="!isFetchingTaxonomiesList"
+                            name="select_taxonomies"
+                            id="select_taxonomies"
+                            :placeholder="$i18n.get('label_select_a_taxonomy')"
+                            v-model="selectedTaxonomy">
+                        <option 
+                                v-for="(taxonomy, index) of taxonomiesListArray"
+                                :key="index"
+                                :value="taxonomy">
+                            {{ taxonomy.name + ' (' + taxonomy.total_terms + ' ' + ( taxonomy.total_terms == 1 ? $i18n.get('term') : $i18n.get('terms') ) + ')' }} 
+                        </option>
+                    </select>
+                </div>
+                <div 
+                        v-if="selectedTaxonomy && selectedTaxonomy.id"
+                        class="box-header__item">
+                    <label for="max_terms">Termos por página:</label>
+                    <input
+                            type="number"
+                            step="1"
+                            min="1"
+                            max="999"
+                            class="screen-per-page"
+                            name="max_terms"
+                            id="max_terms"
+                            maxlength="3"
+                            :disabled="isBuildingTaxonomyTermsChart"
+                            v-model.number="maxTermsToDisplay">
+                </div>
+                <div 
+                        v-if="selectedTaxonomy && selectedTaxonomy.id"
+                        class="box-header__item tablenav-pages">
+                    <span class="displaying-num">{{ selectedTaxonomy.total_terms + ' ' + $i18n.get('terms') }}</span>
+                    <span class="pagination-links">
+                        <span
+                                @click="!isBuildingTaxonomyTermsChart ? termsDisplayedPage = 1 : null"
+                                :class="{'tablenav-pages-navspan disabled' : termsDisplayedPage <= 1 || isBuildingTaxonomyTermsChart}"
+                                class="first-page button"
+                                aria-hidden="true">
+                            «
+                        </span>
+                        <span
+                                @click="(termsDisplayedPage > 1 && !isBuildingTaxonomyTermsChart) ? termsDisplayedPage-- : null"
+                                :class="{'tablenav-pages-navspan disabled' : termsDisplayedPage <= 1 || isBuildingTaxonomyTermsChart}"
+                                class="prev-page button"
+                                aria-hidden="true">
+                            ‹
+                        </span>
+                        <span class="paging-input">
+                            <label
+                                    for="current-page-selector"
+                                    class="screen-reader-text">
+                                {{ $i18n.get('label_current_page') }}
+                            </label>
+                            <input
+                                    class="current-page"
+                                    id="current-page-selector"
+                                    type="number"
+                                    step="1"
+                                    min="1"
+                                    :disabled="isBuildingTaxonomyTermsChart || maxTermsToDisplay >= selectedTaxonomy.total_terms"
+                                    :max="Math.ceil(selectedTaxonomy.total_terms/maxTermsToDisplay)"
+                                    name="paged"
+                                    v-model.number="termsDisplayedPage"
+                                    size="1"
+                                    aria-describedby="table-paging">
+                            <span class="tablenav-paging-text"> de <span class="total-pages">{{ Math.ceil(selectedTaxonomy.total_terms/maxTermsToDisplay) }}</span></span>
+                        </span>
+                        <span 
+                                @click="(!isBuildingTaxonomyTermsChart && termsDisplayedPage < Math.ceil(selectedTaxonomy.total_terms/maxTermsToDisplay)) ? termsDisplayedPage++ : null"
+                                :class="{'tablenav-pages-navspan disabled' : isBuildingTaxonomyTermsChart || termsDisplayedPage >= Math.ceil(selectedTaxonomy.total_terms/maxTermsToDisplay) }"
+                                aria-hidden="true"
+                                class="next-page button">
+                            ›
+                        </span>
+                        <span
+                                @click="!isBuildingTaxonomyTermsChart ? termsDisplayedPage = Math.ceil(selectedTaxonomy.total_terms/maxTermsToDisplay) : null"
+                                :class="{'tablenav-pages-navspan disabled': isBuildingTaxonomyTermsChart || termsDisplayedPage >= Math.ceil(selectedTaxonomy.total_terms/maxTermsToDisplay) }"
+                                class="last-page button"
+                                aria-hidden="true">
+                            »
+                        </span>
+                    </span>
+                </div>
+            </div>
+            <apexchart
+                    v-if="!isFetchingTaxonomiesList && !isFetchingTaxonomyTerms && selectedTaxonomy && selectedTaxonomy.id"
+                    height="380px"
+                    :series="taxonomyTermsChartSeries"
+                    :options="taxonomyTermsChartOptions" />
+            <div 
+                v-else
+                style="min-height=380px"
+                class="skeleton postbox" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+    data() {
+        return {
+            isFetchingTaxonomyTerms: false,
+            isBuildingTaxonomyTermsChart: false,
+            selectedTaxonomy: {},
+            maxTermsToDisplay: 64,
+            termsDisplayedPage: 1,
+            taxonomyTermsChartSeries: [],
+            taxonomyTermsChartOptions: {},
+        }
+    },
+    computed: {
+        ...mapGetters('report', {
+            isFetchingTaxonomiesList: 'getIsFetchingTaxonomiesList',
+            taxonomyTerms: 'getTaxonomyTerms',
+            taxonomiesList: 'getTaxonomiesList',
+            stackedBarChartOptions: 'getStackedBarChartOptions',
+        }),
+        taxonomiesListArray() {
+            return this.taxonomiesList && this.taxonomiesList != undefined ? Object.values(this.taxonomiesList) : [];
+        },
+    },
+    watch: {
+        taxonomiesListArray: {
+            handler() {
+                if (this.taxonomiesListArray && this.taxonomiesListArray.length)
+                    this.selectedTaxonomy = this.taxonomiesListArray[0];
+            },
+            immediate: true
+        },
+        selectedTaxonomy() {
+            this.termsDisplayedPage = 1;
+            if (this.selectedTaxonomy && this.selectedTaxonomy.id)
+                this.loadTaxonomyTerms();
+        },
+        termsDisplayedPage() {
+            this.buildTaxonomyTermsChart();
+        },
+        maxTermsToDisplay() {
+            this.termsDisplayedPage = 1;
+            this.buildTaxonomyTermsChart();
+        }
+    },
+    methods: {
+         ...mapActions('report', [
+            'fetchTaxonomyTerms'
+         ]),
+        buildTaxonomyTermsChart() {
+        
+            this.isBuildingTaxonomyTermsChart = true;
+
+            // Building Taxonomy term usage chart
+            let orderedTerms = Object.values(this.taxonomyTerms).sort((a, b) => b.count - a.count);
+            orderedTerms = orderedTerms.slice((this.termsDisplayedPage - 1) * this.maxTermsToDisplay, ((this.termsDisplayedPage - 1) * this.maxTermsToDisplay) + this.maxTermsToDisplay);
+            
+            let termsValues = [];
+            let termsLabels = [];
+
+            orderedTerms.forEach(term => {
+                termsValues.push(term.count);
+                termsLabels.push(term.name);
+            });
+            
+            this.taxonomyTermsChartSeries = [
+                {
+                    name: this.$i18n.get('label_terms_used'),
+                    data: termsValues
+                }
+            ];
+            this.taxonomyTermsChartOptions = {
+                ...this.stackedBarChartOptions, 
+                ...{
+                    title: {},
+                    xaxis: {
+                        type: 'category',
+                        tickPlacement: 'on',
+                        categories: termsLabels,
+                        labels: {
+                            show: true,
+                            trim: true,
+                            hideOverlappingLabels: false
+                        },
+                        tooltip: true
+                    },
+                    yaxis: {
+                        title: {
+                            text: this.$i18n.get('label_number_of_items')
+                        }
+                    },
+                    animations: {
+                        enabled: orderedTerms.length <= 40
+                    }
+                }
+            }
+
+            setTimeout(() => { 
+                this.isBuildingTaxonomyTermsChart = false;
+            }, 500);
+        },
+        loadTaxonomyTerms() {
+            this.isFetchingTaxonomyTerms = true;
+
+            this.fetchTaxonomyTerms(this.selectedTaxonomy.id)
+                .then(() => {
+                    this.buildTaxonomyTermsChart();
+                    this.isFetchingTaxonomyTerms = false;
+                })
+                .catch(() => this.isFetchingTaxonomyTerms = false);
+
+        }
+    }
+}
+</script>

src/views/reports/components/number-block.vue

@@ -74,7 +74,7 @@ export default {
 
 <style lang="scss" scoped>
 .number-block {
-    min-height: 210px;
+    min-height: 210px !important;
     display: flex;
     flex-direction: column;
     justify-content: center;

src/views/reports/components/terms-per-taxonomy-block.vue

@@ -0,0 +1,110 @@
+<template>
+    <div 
+            v-if="taxonomiesList != undefined"
+            class="column is-full">
+        <apexchart
+                v-if="!isFetchingTaxonomiesList"
+                height="380px"
+                class="postbox"
+                :series="taxonomiesListChartSeries"
+                :options="taxonomiesListChartOptions" />
+        <div 
+                v-else
+                style="min-height=380px"
+                class="skeleton postbox" />
+    </div>
+</template>
+
+
+<script>
+import { mapActions, mapMutations, mapGetters } from 'vuex';
+
+export default {
+    data() {
+        return {
+            isFetchingTaxonomiesList: false,
+            taxonomiesListChartSeries: [],
+            taxonomiesListChartOptions: {},
+        }
+    },
+    computed: {
+        ...mapGetters('report', {
+            taxonomiesList: 'getTaxonomiesList',
+            stackedBarChartOptions: 'getStackedBarChartOptions',
+            isFetchingTaxonomiesList: 'getIsFetchingTaxonomiesList',
+        }),
+        taxonomiesListArray() {
+            return this.taxonomiesList && this.taxonomiesList != undefined ? Object.values(this.taxonomiesList) : [];
+        },
+    },
+    watch: {
+
+    },
+    mounted() {
+        this.loadTaxonomiesList();
+    },
+    methods: {
+         ...mapActions('report', [
+            'fetchTaxonomiesList'
+         ]),
+         ...mapMutations('report', [
+            'setIsFetchingTaxonomiesList'
+         ]),
+         loadTaxonomiesList() {
+            this.setIsFetchingTaxonomiesList(true);
+            this.fetchTaxonomiesList()
+                .then(() => {
+                    // Building Taxonomy term usage chart
+                    const orderedTaxonomies = this.taxonomiesListArray.sort((a, b) => b.total_terms - a.total_terms);
+                    let termsUsed = [];
+                    let termsNotUsed = [];
+                    let taxonomiesLabels = [];
+
+                    orderedTaxonomies.forEach(taxonomy => {
+                        termsUsed.push(taxonomy.total_terms_used);
+                        termsNotUsed.push(taxonomy.total_terms_not_used);
+                        taxonomiesLabels.push(taxonomy.name);
+                    });
+
+                    this.taxonomiesListChartSeries = [
+                        {
+                            name: this.$i18n.get('label_terms_used'),
+                            data: termsUsed
+                        },
+                        {
+                            name: this.$i18n.get('label_terms_not_used'),
+                            data: termsNotUsed
+                        }
+                    ];
+                    
+                    this.taxonomiesListChartOptions = {
+                        ...this.stackedBarChartOptions, 
+                        ...{
+                            title: {
+                                text: this.$i18n.get('label_usage_of_terms_per_taxonomy')
+                            },
+                            xaxis: {
+                                type: 'category',
+                                tickPlacement: 'on',
+                                categories: taxonomiesLabels,
+                                labels: {
+                                    show: true,
+                                    trim: true,
+                                    hideOverlappingLabels: false
+                                },
+                                tooltip: true
+                            },
+                            yaxis: {
+                                title: {
+                                    text: this.$i18n.get('label_number_of_terms')
+                                }
+                            }
+                        }
+                    }
+                    this.setIsFetchingTaxonomiesList(true);
+                })
+                .catch(() => this.setIsFetchingTaxonomiesList(false));
+        },
+    }
+}
+</script>

src/views/reports/js/reports-main.js

@@ -16,6 +16,8 @@ Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'develo
 
 import ReportsPage from '../reports.vue';
 import NumberBlock from '../components/number-block.vue';
+import ItemsPerTermBlock from '../components/items-per-term-block.vue';
+import TermsPerTaxonomyBlock from '../components/terms-per-taxonomy-block.vue';
 
 Vue.use(VueApexCharts)
 
@@ -37,6 +39,8 @@ Vue.use(Snackbar);
 Vue.use(Modal);
 
 Vue.component('number-block', NumberBlock);
+Vue.component('items-per-term-block', ItemsPerTermBlock);
+Vue.component('terms-per-taxonomy-block', TermsPerTaxonomyBlock);
 Vue.component('apexchart', VueApexCharts);
 
 // Changing title of pages

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

@@ -70,124 +70,13 @@
                             style="min-height=380px"
                             class="skeleton postbox" />
                 </div>
-                <div 
+
-                    v-if="!selectedCollection || selectedCollection == 'default'"
+                <terms-per-taxonomy-block 
-                        class="column is-full">
+                        v-if="!selectedCollection || selectedCollection == 'default'"/>
-                    <apexchart
+                
-                            v-if="!isFetchingTaxonomiesList"
+                <items-per-term-block 
-                            height="380px"
+                        v-if="!selectedCollection || selectedCollection == 'default'" />
-                            class="postbox"
+                
-                            :series="taxonomiesListChartSeries"
-                            :options="taxonomiesListChartOptions" />
-                    <div 
-                            v-else
-                            style="min-height=380px"
-                            class="skeleton postbox" />
-                </div>
-                <div 
-                    v-if="taxonomiesList != undefined && (!selectedCollection || selectedCollection == 'default')"
-                        class="column is-full">
-                    <div class="postbox">
-                        <div class="box-header">
-                            <div class="box-header__item">
-                                <label for="select_taxonomies">{{ $i18n.get('label_items_per_term_from_taxonomy') }}&nbsp;</label>
-                                <select
-                                        v-if="!isFetchingTaxonomiesList"
-                                        name="select_taxonomies"
-                                        id="select_taxonomies"
-                                        :placeholder="$i18n.get('label_select_a_taxonomy')"
-                                        v-model="selectedTaxonomy">
-                                    <option 
-                                            v-for="(taxonomy, index) of taxonomiesListArray"
-                                            :key="index"
-                                            :value="taxonomy">
-                                        {{ taxonomy.name + ' (' + taxonomy.total_terms + ' ' + ( taxonomy.total_terms == 1 ? $i18n.get('term') : $i18n.get('terms') ) + ')' }} 
-                                    </option>
-                                </select>
-                            </div>
-                            <div 
-                                    v-if="selectedTaxonomy && selectedTaxonomy.id"
-                                    class="box-header__item">
-                                <label for="max_terms">Termos por página:</label>
-                                <input
-                                        type="number"
-                                        step="1"
-                                        min="1"
-                                        max="999"
-                                        class="screen-per-page"
-                                        name="max_terms"
-                                        id="max_terms"
-                                        maxlength="3"
-                                        :disabled="isBuildingTaxonomyTermsChart"
-                                        v-model.number="maxTermsToDisplay">
-                            </div>
-                            <div 
-                                    v-if="selectedTaxonomy && selectedTaxonomy.id"
-                                    class="box-header__item tablenav-pages">
-                                <span class="displaying-num">{{ selectedTaxonomy.total_terms + ' ' + $i18n.get('terms') }}</span>
-                                <span class="pagination-links">
-                                    <span
-                                            @click="!isBuildingTaxonomyTermsChart ? termsDisplayedPage = 1 : null"
-                                            :class="{'tablenav-pages-navspan disabled' : termsDisplayedPage <= 1 || isBuildingTaxonomyTermsChart}"
-                                            class="first-page button"
-                                            aria-hidden="true">
-                                        «
-                                    </span>
-                                    <span
-                                            @click="(termsDisplayedPage > 1 && !isBuildingTaxonomyTermsChart) ? termsDisplayedPage-- : null"
-                                            :class="{'tablenav-pages-navspan disabled' : termsDisplayedPage <= 1 || isBuildingTaxonomyTermsChart}"
-                                            class="prev-page button"
-                                            aria-hidden="true">
-                                        ‹
-                                    </span>
-                                    <span class="paging-input">
-                                        <label
-                                                for="current-page-selector"
-                                                class="screen-reader-text">
-                                            {{ $i18n.get('label_current_page') }}
-                                        </label>
-                                        <input
-                                                class="current-page"
-                                                id="current-page-selector"
-                                                type="number"
-                                                step="1"
-                                                min="1"
-                                                :disabled="isBuildingTaxonomyTermsChart"
-                                                :max="Math.ceil(selectedTaxonomy.total_terms/maxTermsToDisplay)"
-                                                name="paged"
-                                                v-model.number="termsDisplayedPage"
-                                                size="1"
-                                                aria-describedby="table-paging">
-                                        <span class="tablenav-paging-text"> de <span class="total-pages">{{ Math.ceil(selectedTaxonomy.total_terms/maxTermsToDisplay) }}</span></span>
-                                    </span>
-                                    <span 
-                                            @click="(!isBuildingTaxonomyTermsChart && termsDisplayedPage < Math.ceil(selectedTaxonomy.total_terms/maxTermsToDisplay)) ? termsDisplayedPage++ : null"
-                                            :class="{'tablenav-pages-navspan disabled' : isBuildingTaxonomyTermsChart || termsDisplayedPage >= Math.ceil(selectedTaxonomy.total_terms/maxTermsToDisplay) }"
-                                            aria-hidden="true"
-                                            class="next-page button">
-                                        ›
-                                    </span>
-                                    <span
-                                            @click="!isBuildingTaxonomyTermsChart ? termsDisplayedPage = Math.ceil(selectedTaxonomy.total_terms/maxTermsToDisplay) : null"
-                                            :class="{'tablenav-pages-navspan disabled': isBuildingTaxonomyTermsChart || termsDisplayedPage >= Math.ceil(selectedTaxonomy.total_terms/maxTermsToDisplay) }"
-                                            class="last-page button"
-                                            aria-hidden="true">
-                                        »
-                                    </span>
-                                </span>
-                            </div>
-                        </div>
-                        <apexchart
-                                v-if="!isFetchingTaxonomiesList && !isFetchingTaxonomyTerms && selectedTaxonomy && selectedTaxonomy.id"
-                                height="380px"
-                                :series="taxonomyTermsChartSeries"
-                                :options="taxonomyTermsChartOptions" />
-                        <div 
-                            v-else
-                            style="min-height=380px"
-                            class="skeleton postbox" />
-                    </div>
-                </div>
                 <template v-if="selectedCollection && selectedCollection != 'default'">
                     <div class="column is-full">
                         <div 
@@ -292,36 +181,26 @@ export default {
     data() {
         return {
             selectedCollection: 'default',
-            selectedTaxonomy: {},
             selectedMetadatum: '',
             isFetchingCollections: false,
             isFetchingSummary: false,
             isFetchingCollectionsList: false,
-            isFetchingTaxonomiesList: false,
-            isFetchingTaxonomyTerms: false,
             isFetchingMetadata: false,
             isBuildingMetadataTypeChart: false,
-            isBuildingTaxonomyTermsChart: false,
             isFetchingMetadataList: false,
             isFetchingActivities: false,
             collectionsListChartSeries: [],
             collectionsListChartOptions: {},
-            taxonomiesListChartSeries: [],
-            taxonomiesListChartOptions: {},
             metadataListChartSeries: [],
             metadataListChartOptions: {},
             metadataTypeChartMode: 'bar',
-            taxonomyTermsChartSeries: [],
-            taxonomyTermsChartOptions: {},
             metadataTypeChartSeries: [],
             metadataTypeChartOptions: {},
             metadataDistributionChartSeries: [],
             metadataDistributionChartOptions: {},
             metadataDistributionChartHeight: 730,
             activitiesChartSeries: [],
-            activitiesChartOptions: {},
+            activitiesChartOptions: {}
-            maxTermsToDisplay: 64,
-            termsDisplayedPage: 1
         }
     },
     computed: {
@@ -332,8 +211,6 @@ export default {
             summary: 'getSummary',
             metadata: 'getMetadata',
             metadataList: 'getMetadataList',
-            taxonomyTerms: 'getTaxonomyTerms',
-            taxonomiesList: 'getTaxonomiesList',
             collectionsList: 'getCollectionsList',
             activities: 'getActivities',
             stackedBarChartOptions: 'getStackedBarChartOptions',
@@ -341,12 +218,9 @@ export default {
             horizontalBarChartOptions: 'getHorizontalBarChartOptions',
             //heatMapChartOptions: 'getHeatMapChartOptions'
         }),
-        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: {
         '$route.query': {
@@ -356,32 +230,18 @@ export default {
                 this.loadMetadata();
                 this.loadActivities();
 
-                if (!this.selectedCollection || this.selectedCollection == 'default') {
+                if (!this.selectedCollection || this.selectedCollection == 'default')
                     this.loadCollectionsList();
-                    this.loadTaxonomiesList();
-                }
                 
             },
             immediate: true
         },
-        selectedTaxonomy() {
-            this.termsDisplayedPage = 1;
-            if (this.selectedTaxonomy && this.selectedTaxonomy.id)
-                this.loadTaxonomyTerms();
-        },
         selectedMetadatum() {
             if (this.selectedMetadatum && this.selectedMetadatum != '')
                 this.loadMetadataList();
         },
         metadataTypeChartMode() {
             this.buildMetadataTypeChart();
-        },
-        termsDisplayedPage() {
-            this.buildTaxonomyTermsChart();
-        },
-        maxTermsToDisplay() {
-            this.termsDisplayedPage = 1;
-            this.buildTaxonomyTermsChart();
         }
     },
     created() {
@@ -398,8 +258,6 @@ export default {
         ...mapActions('report', [
             'fetchSummary',
             'fetchCollectionsList',
-            'fetchTaxonomiesList',
-            'fetchTaxonomyTerms',
             'fetchMetadata',
             'fetchMetadataList',
             'fetchActivities'
@@ -599,135 +457,12 @@ export default {
                 })
                 .catch(() => this.isFetchingCollectionsList = false);
         },
-        loadTaxonomiesList() {
-            this.isFetchingTaxonomiesList = true;
-            this.fetchTaxonomiesList()
-                .then(() => {
-
-                    // Building Taxonomy term usage chart
-                    const orderedTaxonomies = this.taxonomiesListArray.sort((a, b) => b.total_terms - a.total_terms);
-                    let termsUsed = [];
-                    let termsNotUsed = [];
-                    let taxonomiesLabels = [];
-
-                    orderedTaxonomies.forEach(taxonomy => {
-                        termsUsed.push(taxonomy.total_terms_used);
-                        termsNotUsed.push(taxonomy.total_terms_not_used);
-                        taxonomiesLabels.push(taxonomy.name);
-                    });
-            
-                    // Sets taxonomy terms now that we have the 
-                    if (orderedTaxonomies.length)
-                        this.selectedTaxonomy = orderedTaxonomies[0]; 
-
-                    this.taxonomiesListChartSeries = [
-                        {
-                            name: this.$i18n.get('label_terms_used'),
-                            data: termsUsed
-                        },
-                        {
-                            name: this.$i18n.get('label_terms_not_used'),
-                            data: termsNotUsed
-                        }
-                    ];
-                    
-                    this.taxonomiesListChartOptions = {
-                        ...this.stackedBarChartOptions, 
-                        ...{
-                            title: {
-                                text: this.$i18n.get('label_usage_of_terms_per_taxonomy')
-                            },
-                            xaxis: {
-                                type: 'category',
-                                tickPlacement: 'on',
-                                categories: taxonomiesLabels,
-                                labels: {
-                                    show: true,
-                                    trim: true,
-                                    hideOverlappingLabels: false
-                                },
-                                tooltip: true
-                            },
-                            yaxis: {
-                                title: {
-                                    text: this.$i18n.get('label_number_of_terms')
-                                }
-                            }
-                        }
-                    }
-                    
-                    this.isFetchingTaxonomiesList = false;
-                })
-                .catch(() => this.isFetchingTaxonomiesList = false);
-        },
-        buildTaxonomyTermsChart() {
-        
-            this.isBuildingTaxonomyTermsChart = true;
-
-            // Building Taxonomy term usage chart
-            let orderedTerms = Object.values(this.taxonomyTerms).sort((a, b) => b.count - a.count);
-            orderedTerms = orderedTerms.slice((this.termsDisplayedPage - 1) * this.maxTermsToDisplay, ((this.termsDisplayedPage - 1) * this.maxTermsToDisplay) + this.maxTermsToDisplay);
-            
-            let termsValues = [];
-            let termsLabels = [];
-
-            orderedTerms.forEach(term => {
-                termsValues.push(term.count);
-                termsLabels.push(term.name);
-            });
-            
-            this.taxonomyTermsChartSeries = [
-                {
-                    name: this.$i18n.get('label_terms_used'),
-                    data: termsValues
-                }
-            ];
-            
-            this.taxonomyTermsChartOptions = {
-                ...this.stackedBarChartOptions, 
-                ...{
-                    title: {},
-                    xaxis: {
-                        type: 'category',
-                        tickPlacement: 'on',
-                        categories: termsLabels,
-                        labels: {
-                            show: true,
-                            trim: true,
-                            hideOverlappingLabels: false
-                        },
-                        tooltip: true
-                    },
-                    yaxis: {
-                        title: {
-                            text: this.$i18n.get('label_number_of_items')
-                        }
-                    },
-                    animations: {
-                        enabled: orderedTerms.length <= 40
-                    }
-                }
-            }
-
-            setTimeout(() => { this.isBuildingTaxonomyTermsChart = false; }, 500);
-        },
-        loadTaxonomyTerms() {
-            this.isFetchingTaxonomyTerms = true;
-
-            this.fetchTaxonomyTerms(this.selectedTaxonomy.id)
-                .then(() => {
-                    this.buildTaxonomyTermsChart();
-                    this.isFetchingTaxonomyTerms = false;
-                })
-                .catch(() => this.isFetchingTaxonomyTerms = false);
-
-        },
         loadMetadataList() {
             this.isFetchingMetadataList = true;
             this.fetchMetadataList({ collectionId: this.collectionId, metadatumId: this.selectedMetadatum })
                 .then(() => {
                     
-                    // Building Taxonomy term usage chart
+                    // Building Metadata term usage chart
                     const orderedMetadata = Object.values(this.metadataList).sort((a, b) => b.total_items - a.total_items);
                     let metadataItemValues = [];
                     let metadataItemLabels = [];
@@ -856,48 +591,4 @@ export default {
         }
     }
 }
-</script>
+</script>
-
-<style lang="scss" scoped> 
-.postbox {
-    padding: 1.125rem 1.25rem;
-    margin-bottom: 0;
-    height: 100%;
-    min-height: 380px;
-    background-color: var(--tainacan-gray0, #f6f6f6);
-
-    label {
-        font-weight: bold;
-        font-size: 0.875rem;
-    }
-    &.metadata-distribution-box {
-        margin: 0px 0px 0.75rem 1.5rem !important;  
-        overflow-y: auto;
-    }
-
-    .box-header {
-        display: flex;
-        align-items: baseline;
-        justify-content: space-between;
-        flex-wrap: wrap;
-
-        .box-header__item {
-            margin-bottom: 10px;
-        }
-    }
-}
-.graph-mode-switch {
-    display: inline-block;
-    button {
-        border: none !important;
-        background: none !important;
-        box-shadow: none !important;
-        padding: 0;
-        cursor: pointer;
-
-        &.current {
-            color: var(--wp-admin-theme-color, #007cba);
-        }
-    }
-}
-</style>

src/views/reports/tainacan-reports.scss

@@ -29,4 +29,46 @@
             }
         }
     }
+
+    .postbox {
+        padding: 1.125rem 1.25rem;
+        margin-bottom: 0;
+        height: 100%;
+        min-height: 380px;
+        background-color: var(--tainacan-block-gray0, #f6f6f6);
+    
+        label {
+            font-weight: bold;
+            font-size: 0.875rem;
+        }
+        &.metadata-distribution-box {
+            margin: 0px 0px 0.75rem 1.5rem !important;  
+            overflow-y: auto;
+        }
+    
+        .box-header {
+            display: flex;
+            align-items: baseline;
+            justify-content: space-between;
+            flex-wrap: wrap;
+    
+            .box-header__item {
+                margin-bottom: 10px;
+            }
+        }
+    }
+    .graph-mode-switch {
+        display: inline-block;
+        button {
+            border: none !important;
+            background: none !important;
+            box-shadow: none !important;
+            padding: 0;
+            cursor: pointer;
+    
+            &.current {
+                color: var(--wp-admin-theme-color, #007cba);
+            }
+        }
+    }
 }