From 135c7c4efc0f0d1d4308a000bc1c7db70020cd7c Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Sun, 28 Mar 2021 18:13:42 -0300
Subject: [PATCH] Continues modular implementation of charts. #483

---
 .../admin/js/store/modules/report/index.js    |   8 +-
 .../components/items-per-term-block.vue       |   2 +-
 .../metadata-distribution-block.vue           | 106 ++++++++++++
 .../components/metadata-list-block.vue        |  98 +++++++++++
 .../components/metadata-types-block.vue       |   4 +-
 .../components/terms-per-taxonomy-block.vue   |   2 +-
 src/views/reports/js/reports-main.js          |   4 +
 src/views/reports/pages/reports-list.vue      | 155 +-----------------
 8 files changed, 224 insertions(+), 155 deletions(-)
 create mode 100644 src/views/reports/components/metadata-distribution-block.vue
 create mode 100644 src/views/reports/components/metadata-list-block.vue

diff --git a/src/views/admin/js/store/modules/report/index.js b/src/views/admin/js/store/modules/report/index.js
index 08dd2240f..8dd12890b 100644
--- a/src/views/admin/js/store/modules/report/index.js
+++ b/src/views/admin/js/store/modules/report/index.js
@@ -45,12 +45,14 @@ const state = {
       xaxis: {
           type: 'category',
           tickPlacement: 'on',
-          categories: []
+          categories: [],
+          tooltip: { enabled: true }
       },
       yaxis: {
           title: {
               text: ''
-          }
+          },
+          tooltip: { enabled: true }
       },
       legend: {
           position: 'right',
@@ -114,9 +116,11 @@ const state = {
         type: 'category',
         tickPlacement: 'on',
         categories: [],
+        tooltip: { enabled: true }
       },
       yaxis: {
         tickPlacement: 'on',
+        tooltip: { enabled: true }
       },
       tooltip: {
         y: {
diff --git a/src/views/reports/components/items-per-term-block.vue b/src/views/reports/components/items-per-term-block.vue
index 5b5fecf39..11b015426 100644
--- a/src/views/reports/components/items-per-term-block.vue
+++ b/src/views/reports/components/items-per-term-block.vue
@@ -197,7 +197,7 @@ export default {
                             trim: true,
                             hideOverlappingLabels: false
                         },
-                        tooltip: true
+                        tooltip: { enabled: true }
                     },
                     yaxis: {
                         title: {
diff --git a/src/views/reports/components/metadata-distribution-block.vue b/src/views/reports/components/metadata-distribution-block.vue
new file mode 100644
index 000000000..ebaa8a421
--- /dev/null
+++ b/src/views/reports/components/metadata-distribution-block.vue
@@ -0,0 +1,106 @@
+<template>
+    <div class="column is-full is-two-fifths-desktop">
+        <div 
+                v-if="metadata.totals && metadata.totals.metadata && !isBuildingMetadataDistributionChart"
+                :style="{
+                    maxHeight: ((170 + (metadata.totals.metadata.total * 36)) <= 690 ? (170 + (metadata.totals.metadata.total * 36)) : 690) + 'px'
+                }"
+                class="postbox metadata-distribution-box">
+            <apexchart
+                    :height="100 + (metadata.totals.metadata.total * 36)"
+                    :series="metadataDistributionChartSeries"
+                    :options="metadataDistributionChartOptions" />
+        </div>
+        <div 
+                v-else
+                style="min-height=740px"
+                class="skeleton postbox metadata-distribution-box" />
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+    data() {
+        return {
+            metadataDistributionChartSeries: [],
+            metadataDistributionChartOptions: {},
+            metadataDistributionChartHeight: 730,
+            isBuildingMetadataDistributionChart: false
+        }
+    },
+    computed: {
+        ...mapGetters('report', {
+            metadata: 'getMetadata',
+            horizontalBarChartOptions: 'getHorizontalBarChartOptions',
+        })
+    },
+    watch: {
+        metadata() {
+            this.buildMetadataDistributionChart();
+        }
+    },
+    methods: {
+        buildMetadataDistributionChart() {
+            this.isBuildingMetadataDistributionChart = true;
+
+            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 = [];
+                let metadataDistributionValuesInverted = [];
+                let metadataDistributionLabels = [];
+                const metadataCount = 100 + (this.metadata.totals.metadata.total * 36);
+
+                orderedMetadataDistributions.forEach(metadataDistribution => {
+                    metadataDistributionValues.push(parseFloat(metadataDistribution.fill_percentage));
+                    metadataDistributionValuesInverted.push(100.0000 - parseFloat(metadataDistribution.fill_percentage).toFixed(4));
+                    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'),
+                        data: metadataDistributionValues
+                    },
+                    { 
+                        name: this.$i18n.get('label_not_filled'),
+                        data: metadataDistributionValuesInverted
+                    }
+                ];
+                this.metadataDistributionChartOptions = {
+                    ...this.horizontalBarChartOptions,
+                    ...{
+                        chart: {
+                            type: 'bar',
+                            height: metadataCount,
+                            stacked: true,
+                            stackType: '100%',
+                            toolbar: {
+                                show: true
+                            },
+                            zoom: {
+                                type: 'y',
+                                enabled: true,
+                                autoScaleYaxis: true,
+                            }
+                        },
+                        title: {
+                            text: this.$i18n.get('label_metadata_fill_distribution')
+                        },
+                        labels: metadataDistributionLabels,
+                        colors: ['#25a189', '#a23939']
+                    }
+                }
+            }
+
+            setTimeout(() => this.isBuildingMetadataDistributionChart = false, 300);
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/reports/components/metadata-list-block.vue b/src/views/reports/components/metadata-list-block.vue
new file mode 100644
index 000000000..dc7998688
--- /dev/null
+++ b/src/views/reports/components/metadata-list-block.vue
@@ -0,0 +1,98 @@
+<template>
+    <div
+            v-if="metadataList != undefined"
+            class="column is-full">
+        <div
+                style="margin-top: 0px"
+                class="postbox">
+            <label>{{ $i18n.get('label_amount_of_items_per_metadatum_value') }}&nbsp;</label>
+            <select 
+                    v-if="!isFetchingMetadataList"
+                    name="select_metadata"
+                    id="select_metadata"
+                    :placeholder="$i18n.get('label_select_a_metadatum')"
+                    v-model="selectedMetadatum">
+                <option 
+                        v-for="(metadatum, index) of metadataListArray"
+                        :key="index"
+                        :value="metadatum.id">
+                    {{ metadatum.name }} 
+                </option>
+            </select>
+            <apexchart
+                    v-if="!isFetchingMetadataList && selectedMetadatum"
+                    height="380px"
+                    :series="metadataListChartSeries"
+                    :options="metadataListChartOptions" />
+            <div 
+                v-else
+                style="min-height=380px"
+                class="skeleton postbox" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+    data() {
+        return {
+            metadataListChartSeries: [],
+            metadataListChartOptions: {},
+            isBuildingMetadataListArray: false
+        }
+    },
+    computed: {
+        ...mapGetters('report', {
+            metadata: 'getMetadata',
+            metadataList: 'getMetadataList',
+        }),
+        metadataListArray() {
+            return this.metadata && this.metadata != undefined && this.metadata.distribution ? Object.values(this.metadata.distribution) : [];
+        }
+    },
+    methods: {
+        buildMetadataListChart() {
+
+            this.isBuildingMetadataListArray = true;
+
+            // Building Metadata term usage chart
+            const orderedMetadata = Object.values(this.metadataList).sort((a, b) => b.total_items - a.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: {},
+                    xaxis: {
+                        type: 'category',
+                        tickPlacement: 'on',
+                        categories: metadataItemLabels,
+                    },
+                    yaxis: {
+                        title: {
+                            text: this.$i18n.get('label_number_of_items')
+                        }
+                    }
+                }
+            }
+
+            setTimeout(() => this.isBuildingMetadataListArray = false, 500);
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/reports/components/metadata-types-block.vue b/src/views/reports/components/metadata-types-block.vue
index 94953cd24..901239d23 100644
--- a/src/views/reports/components/metadata-types-block.vue
+++ b/src/views/reports/components/metadata-types-block.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="column is-full">
         <div 
-                v-if="metadata && metadata.totals && !isBuildingMetadataTypeChart"
+                v-if="metadata && metadata.totals && metadata.totals.metadata_per_type && !isBuildingMetadataTypeChart"
                 class="postbox">
             <label>{{ $i18n.get('metadata_types') }}&nbsp;</label>
             <div class="graph-mode-switch">
@@ -104,7 +104,7 @@ export default {
                                 trim: true,
                                 hideOverlappingLabels: false
                             },
-                            tooltip: true
+                            tooltip: { enabled: true }
                         }
                     }
                 }));
diff --git a/src/views/reports/components/terms-per-taxonomy-block.vue b/src/views/reports/components/terms-per-taxonomy-block.vue
index 9b68749ea..2a9dfc645 100644
--- a/src/views/reports/components/terms-per-taxonomy-block.vue
+++ b/src/views/reports/components/terms-per-taxonomy-block.vue
@@ -86,7 +86,7 @@ export default {
                                     trim: true,
                                     hideOverlappingLabels: false
                                 },
-                                tooltip: true
+                                tooltip: { enabled: true }
                             },
                             yaxis: {
                                 title: {
diff --git a/src/views/reports/js/reports-main.js b/src/views/reports/js/reports-main.js
index 0562c9572..8a4321cdd 100644
--- a/src/views/reports/js/reports-main.js
+++ b/src/views/reports/js/reports-main.js
@@ -19,6 +19,8 @@ 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';
 import MetadataTypesBlock from '../components/metadata-types-block.vue';
+import MetadataDistributionBlock from '../components/metadata-distribution-block.vue';
+import MetadataListBlock from '../components/metadata-list-block.vue';
 
 Vue.use(VueApexCharts)
 
@@ -43,6 +45,8 @@ Vue.component('number-block', NumberBlock);
 Vue.component('items-per-term-block', ItemsPerTermBlock);
 Vue.component('terms-per-taxonomy-block', TermsPerTaxonomyBlock);
 Vue.component('metadata-types-block', MetadataTypesBlock);
+Vue.component('metadata-distribution-block', MetadataDistributionBlock);
+Vue.component('metadata-list-block', MetadataListBlock);
 Vue.component('apexchart', VueApexCharts);
 
 // Changing title of pages
diff --git a/src/views/reports/pages/reports-list.vue b/src/views/reports/pages/reports-list.vue
index a3a263d19..0350ab6d0 100644
--- a/src/views/reports/pages/reports-list.vue
+++ b/src/views/reports/pages/reports-list.vue
@@ -80,58 +80,12 @@
                 <metadata-types-block
                         v-if="selectedCollection && selectedCollection != 'default'" />
             </div>
-            <div 
-                    v-if="selectedCollection && selectedCollection != 'default'"
-                    class="column is-full is-two-fifths-desktop">
-                <div 
-                        v-if="!isFetchingMetadata && metadata.totals && metadata.totals.metadata"
-                        :style="{
-                            maxHeight: ((170 + (metadata.totals.metadata.total * 36)) <= 690 ? (170 + (metadata.totals.metadata.total * 36)) : 690) + 'px'
-                        }"
-                        class="postbox metadata-distribution-box">
-                    <apexchart
-                            :height="100 + (metadata.totals.metadata.total * 36)"
-                            :series="metadataDistributionChartSeries"
-                            :options="metadataDistributionChartOptions" />
-                </div>
-                <div 
-                        v-else
-                        style="min-height=740px"
-                        class="skeleton postbox metadata-distribution-box" />
-            </div>
+            <metadata-distribution-block 
+                    v-if="selectedCollection && selectedCollection != 'default'"/>
         </div>
         <div class="columns">
-            <div 
-                    v-if="metadataList != undefined && (selectedCollection && selectedCollection != 'default')"
-                    class="column is-full">
-                <div
-                        style="margin-top: 0px"
-                        class="postbox">
-                    <label>{{ $i18n.get('label_amount_of_items_per_metadatum_value') }}&nbsp;</label>
-                    <select 
-                            v-if="!isFetchingMetadataList"
-                            name="select_metadata"
-                            id="select_metadata"
-                            :placeholder="$i18n.get('label_select_a_metadatum')"
-                            v-model="selectedMetadatum">
-                        <option 
-                                v-for="(metadatum, index) of metadataListArray"
-                                :key="index"
-                                :value="metadatum.id">
-                            {{ metadatum.name }} 
-                        </option>
-                    </select>
-                    <apexchart
-                            v-if="!isFetchingMetadataList && selectedMetadatum"
-                            height="380px"
-                            :series="metadataListChartSeries"
-                            :options="metadataListChartOptions" />
-                    <div 
-                        v-else
-                        style="min-height=380px"
-                        class="skeleton postbox" />
-                </div>
-            </div>
+            <metadata-list-block 
+                    v-if="selectedCollection && selectedCollection != 'default'" />
         </div>
     </div>
 </template>
@@ -151,13 +105,8 @@ export default {
             isFetchingMetadata: false,
             isFetchingMetadataList: false,
             isFetchingActivities: false,
-            collectionsListChartSeries: [],
-            collectionsListChartOptions: {},
             metadataListChartSeries: [],
             metadataListChartOptions: {},
-            metadataDistributionChartSeries: [],
-            metadataDistributionChartOptions: {},
-            metadataDistributionChartHeight: 730,
             activitiesChartSeries: [],
             activitiesChartOptions: {}
         }
@@ -173,7 +122,6 @@ export default {
             collectionsList: 'getCollectionsList',
             activities: 'getActivities',
             stackedBarChartOptions: 'getStackedBarChartOptions',
-            horizontalBarChartOptions: 'getHorizontalBarChartOptions',
             //heatMapChartOptions: 'getHeatMapChartOptions'
         }),
         metadataListArray() {
@@ -233,62 +181,6 @@ export default {
             this.isFetchingMetadata = true;
             this.fetchMetadata({ collectionId: this.selectedCollection })
                 .then(() => {
-
-                    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 = [];
-                        let metadataDistributionValuesInverted = [];
-                        let metadataDistributionLabels = [];
-                        const metadataCount = 100 + (this.metadata.totals.metadata.total * 36);
-
-                        orderedMetadataDistributions.forEach(metadataDistribution => {
-                            metadataDistributionValues.push(parseFloat(metadataDistribution.fill_percentage));
-                            metadataDistributionValuesInverted.push(100.0000 - parseFloat(metadataDistribution.fill_percentage).toFixed(4));
-                            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'),
-                                data: metadataDistributionValues
-                            },
-                            { 
-                                name: this.$i18n.get('label_not_filled'),
-                                data: metadataDistributionValuesInverted
-                            }
-                        ];
-                        this.metadataDistributionChartOptions = {
-                            ...this.horizontalBarChartOptions,
-                            ...{
-                                chart: {
-                                    type: 'bar',
-                                    height: metadataCount,
-                                    stacked: true,
-                                    stackType: '100%',
-                                    toolbar: {
-                                        show: true
-                                    },
-                                    zoom: {
-                                        type: 'y',
-                                        enabled: true,
-                                        autoScaleYaxis: true,
-                                    }
-                                },
-                                title: {
-                                    text: this.$i18n.get('label_metadata_fill_distribution')
-                                },
-                                labels: metadataDistributionLabels,
-                                colors: ['#25a189', '#a23939']
-                            }
-                        }
-                    }
-
                     this.isFetchingMetadata = false;
                 })
                 .catch(() => this.isFetchingMetadata = false);
@@ -348,7 +240,7 @@ export default {
                                     trim: true,
                                     hideOverlappingLabels: false
                                 },
-                                tooltip: true
+                                tooltip: { enabled: true }
                             },
                             yaxis: {
                                 title: {
@@ -365,42 +257,7 @@ export default {
         loadMetadataList() {
             this.isFetchingMetadataList = true;
             this.fetchMetadataList({ collectionId: this.collectionId, metadatumId: this.selectedMetadatum })
-                .then(() => {
-                    
-                    // Building Metadata term usage chart
-                    const orderedMetadata = Object.values(this.metadataList).sort((a, b) => b.total_items - a.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: {},
-                            xaxis: {
-                                type: 'category',
-                                tickPlacement: 'on',
-                                categories: metadataItemLabels,
-                            },
-                            yaxis: {
-                                title: {
-                                    text: this.$i18n.get('label_number_of_items')
-                                }
-                            }
-                        }
-                    }
-                    
+                .then(() => { 
                     this.isFetchingMetadataList = false;
                 })
                 .catch(() => this.isFetchingMetadataList = false);