From 9505936de644114be9c2f77ce7c21ae76293a903 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Thu, 4 Mar 2021 15:17:34 -0300
Subject: [PATCH] Sorts bar charts #483

---
 compile-sass.sh                               |   2 +-
 src/assets/css/tainacan-reports.css           |   3 +-
 src/assets/css/tainacan-reports.css.map       |   4 +-
 .../admin/js/store/modules/report/actions.js  |  41 +-
 .../admin/js/store/modules/report/getters.js  |  20 +-
 .../admin/js/store/modules/report/index.js    | 783 +++---------------
 .../js/store/modules/report/mutations.js      |  20 +-
 src/views/reports/components/chart-block.vue  |  16 -
 src/views/reports/components/number-block.vue |  26 +-
 src/views/reports/js/reports-main.js          |   8 +-
 src/views/reports/pages/reports-list.vue      | 256 +++---
 src/views/reports/tainacan-reports.scss       |   4 +-
 src/views/tainacan-admin-i18n.php             |   4 +
 13 files changed, 372 insertions(+), 815 deletions(-)
 delete mode 100644 src/views/reports/components/chart-block.vue

diff --git a/compile-sass.sh b/compile-sass.sh
index 2be3f3bfe..c7728dc25 100644
--- a/compile-sass.sh
+++ b/compile-sass.sh
@@ -13,7 +13,7 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-1 src/views/admin/scss/tainacan
 
 sass -E 'UTF-8' --cache-location .tmp/sass-cache-2 src/views/roles/tainacan-roles.scss:src/assets/css/tainacan-roles.css
 
-sass -E 'UTF-8' --cache-location .tmp/sass-cache-3 src/views/roles/tainacan-roles.scss:src/assets/css/tainacan-reports.css
+sass -E 'UTF-8' --cache-location .tmp/sass-cache-3 src/views/reports/tainacan-reports.scss:src/assets/css/tainacan-reports.css
 
 sass -E 'UTF-8' --cache-location .tmp/sass-cache-4 src/views/gutenberg-blocks/tainacan-collections/collections-list/collections-list.scss:src/assets/css/tainacan-gutenberg-block-collections-list.css
 
diff --git a/src/assets/css/tainacan-reports.css b/src/assets/css/tainacan-reports.css
index 75c999f5f..faeafd376 100644
--- a/src/assets/css/tainacan-reports.css
+++ b/src/assets/css/tainacan-reports.css
@@ -1,3 +1,4 @@
-
+#tainacan-reports-app .tainacan-icon::before {
+  opacity: 0.0; }
 
 /*# sourceMappingURL=tainacan-reports.css.map */
diff --git a/src/assets/css/tainacan-reports.css.map b/src/assets/css/tainacan-reports.css.map
index 4b34ef731..8f58aeaf8 100644
--- a/src/assets/css/tainacan-reports.css.map
+++ b/src/assets/css/tainacan-reports.css.map
@@ -1,7 +1,7 @@
 {
 "version": 3,
-"mappings": "",
-"sources": [],
+"mappings": "AAEI,4CAAuB;EACnB,OAAO,EAAE,GAAG",
+"sources": ["../../views/reports/tainacan-reports.scss"],
 "names": [],
 "file": "tainacan-reports.css"
 }
diff --git a/src/views/admin/js/store/modules/report/actions.js b/src/views/admin/js/store/modules/report/actions.js
index 8a4ba2550..fa2d84131 100644
--- a/src/views/admin/js/store/modules/report/actions.js
+++ b/src/views/admin/js/store/modules/report/actions.js
@@ -1,25 +1,5 @@
 import axios from '../../../axios';
 
-export const fetchReports = ({ commit }, {} ) => {
-
-    let endpoint = `/reports`;
-
-    return new Promise((resolve, reject) => {
-        axios.tainacan.get(endpoint)
-            .then(res => {
-                let reports = res.data;
-
-                commit('setReports', reports);
-
-                resolve({
-                    reports: reports,
-                    total: res.headers['x-wp-total']
-                });
-            })
-            .catch(error => reject(error));
-    });
-};
-
 export const fetchSummary = ({ commit }, { collectionId } ) => {
 
     let endpoint = '/reports';
@@ -41,6 +21,27 @@ export const fetchSummary = ({ commit }, { collectionId } ) => {
     });
 };
 
+export const fetchMetadata = ({ commit }, { collectionId } ) => {
+
+    let endpoint = '/reports';
+    
+    if (collectionId && collectionId != 'default')
+        endpoint += '/collection/' + collectionId + '/metadata';
+    else
+        endpoint += '/repository/metadata';
+
+    return new Promise((resolve, reject) => {
+        axios.tainacan.get(endpoint)
+            .then(res => {
+                let metadata = res.data;
+
+                commit('setMetadata', metadata);
+                resolve(metadata);
+            })
+            .catch(error => reject(error));
+    });
+};
+
 export const fetchTaxonomiesList = ({ commit }, ) => {
 
     let endpoint = '/reports/taxonomies/list'
diff --git a/src/views/admin/js/store/modules/report/getters.js b/src/views/admin/js/store/modules/report/getters.js
index 2cfb3d494..6c16b9c6b 100644
--- a/src/views/admin/js/store/modules/report/getters.js
+++ b/src/views/admin/js/store/modules/report/getters.js
@@ -1,11 +1,23 @@
-export const getReports = state => {
-  return state.reports;
-};
-
 export const getSummary = state => {
   return state.summary;
 };
 
+export const getMetadata = state => {
+  return state.metadata;
+};
+
 export const getTaxonomiesList = state => {
   return state.taxonomiesList;
 };
+
+export const getStackedBarChartOptions = state => {
+  return state.stackedBarChartOptions;
+};
+
+export const getHorizontalBarChartOptions = state => {
+  return state.horizontalBarChartOptions;
+};
+
+export const getDonutChartOptions = state => {
+  return state.donutChartOptions;
+};
diff --git a/src/views/admin/js/store/modules/report/index.js b/src/views/admin/js/store/modules/report/index.js
index 6efffb7a4..461796e08 100644
--- a/src/views/admin/js/store/modules/report/index.js
+++ b/src/views/admin/js/store/modules/report/index.js
@@ -3,668 +3,131 @@ import * as getters from './getters';
 import * as mutations from './mutations';
 
 const state = {
-    reports: [
-        {
-            chartSeries: [44, 55, 13, 43, 22],
-            chartOptions: {
-                chart: {
-                    width: 200,
-                    type: 'pie',
-                    toolbar: {
-                      show: true
-                    },
-                },
-                legend: {
-                    position: 'bottom'
-                },
-                labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
-                title: {
-                    text: 'Pie chart'
-                },
-                responsive: [{
-                    breakpoint: 1216,
-                    options: {
-                        chart: {
-                            width: 380
-                        },
-                        legend: {
-                            position: 'left'
-                        }
-                    }
-                }]
-            },
-        }, 
-        {
-            chartSeries: [
-                {
-                    name: 'Marine Sprite',
-                    data: [44, 55, 41, 37, 22]
-                }, {
-                    name: 'Striking Calf',
-                    data: [53, 32, 33, 52, 13]
-                }, {
-                    name: 'Tank Picture',
-                    data: [12, 17, 11, 9, 15]
-                }, {
-                    name: 'Bucket Slope',
-                    data: [9, 7, 5, 8, 6]
-                }
-            ],
-            chartOptions: {
-                chart: {
-                    type: 'bar',
-                    height: 350,
-                    stacked: true,
-                    stackType: '100%',
-                },
-                plotOptions: {
-                    bar: {
-                        horizontal: true,
-                    },
-                },
-                stroke: {
-                    width: 1,
-                    colors: ['#fff']
-                },
-                title: {
-                    text: '100% Stacked Bar'
-                },
-                xaxis: {
-                    categories: [2008, 2009, 2010, 2011, 2012],
-                },
-                tooltip: {
-                    y: {
-                        formatter: function (val) {
-                        return val + "K"
-                        }
-                    }
-                },
-                fill: {
-                    opacity: 1
-                },
-                legend: {
-                    position: 'top',
-                    horizontalAlign: 'left',
-                    offsetX: 40
-                }
-            },
-        },
-        {
-            chartSeries: [
-                {
-                    data: [
-                        {
-                            x: 'New Delhi',
-                            y: 218
-                        },
-                        {
-                            x: 'Kolkata',
-                            y: 149
-                        },
-                        {
-                            x: 'Mumbai',
-                            y: 184
-                        },
-                        {
-                            x: 'Ahmedabad',
-                            y: 55
-                        },
-                        {
-                            x: 'Bangaluru',
-                            y: 84
-                        },
-                        {
-                            x: 'Pune',
-                            y: 31
-                        },
-                        {
-                            x: 'Chennai',
-                            y: 70
-                        },
-                        {
-                            x: 'Jaipur',
-                            y: 30
-                        },
-                        {
-                            x: 'Surat',
-                            y: 44
-                        },
-                        {
-                            x: 'Hyderabad',
-                            y: 68
-                        },
-                        {
-                            x: 'Lucknow',
-                            y: 28
-                        },
-                        {
-                            x: 'Indore',
-                            y: 19
-                        },
-                        {
-                            x: 'Kanpur',
-                            y: 29
-                        }
-                    ]
-                }
-            ],
-            chartOptions: {
-                legend: {
-                    show: false
-                },
-                chart: {
-                    height: 350,
-                    type: 'treemap'
-                },
-                title: {
-                    text: 'Basic Treemap'
-                }
-            },
-        },
-        {
-            chartSeries: [
-                {
-                    name: 'Net Profit',
-                    data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
-                }, {
-                    name: 'Revenue',
-                    data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
-                }, {
-                    name: 'Free Cash Flow',
-                    data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
-                }
-            ],
-            chartOptions: {
-                chart: {
-                    type: 'bar',
-                    height: 350
-                },
-                plotOptions: {
-                    bar: {
-                        horizontal: false,
-                        columnWidth: '55%',
-                        endingShape: 'rounded'
-                    },
-                },
-                dataLabels: {
-                    enabled: false
-                },
-                stroke: {
-                    show: true,
-                    width: 2,
-                    colors: ['transparent']
-                },
-                xaxis: {
-                    categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
-                },
-                yaxis: {
-                    title: {
-                        text: '$ (thousands)'
-                    }
-                },
-                title: {
-                    text: 'Vertical columns'
-                },
-                fill: {
-                    opacity: 1
-                },
-                tooltip: {
-                    y: {
-                        formatter: function (val) {
-                            return "$ " + val + " thousands"
-                        }
-                    }
-                }
-            }
-        },
-        {
-            chartSeries: [
-                {
-                data: [
-                    [1327359600000,30.95],
-                    [1327446000000,31.34],
-                    [1327532400000,31.18],
-                    [1327618800000,31.05],
-                    [1327878000000,31.00],
-                    [1327964400000,30.95],
-                    [1328050800000,31.24],
-                    [1328137200000,31.29],
-                    [1328223600000,31.85],
-                    [1328482800000,31.86],
-                    [1328569200000,32.28],
-                    [1328655600000,32.10],
-                    [1328742000000,32.65],
-                    [1328828400000,32.21],
-                    [1329087600000,32.35],
-                    [1329174000000,32.44],
-                    [1329260400000,32.46],
-                    [1329346800000,32.86],
-                    [1329433200000,32.75],
-                    [1329778800000,32.54],
-                    [1329865200000,32.33],
-                    [1329951600000,32.97],
-                    [1330038000000,33.41],
-                    [1330297200000,33.27],
-                    [1330383600000,33.27],
-                    [1330470000000,32.89],
-                    [1330556400000,33.10],
-                    [1330642800000,33.73],
-                    [1330902000000,33.22],
-                    [1330988400000,31.99],
-                    [1331074800000,32.41],
-                    [1331161200000,33.05],
-                    [1331247600000,33.64],
-                    [1331506800000,33.56],
-                    [1331593200000,34.22],
-                    [1331679600000,33.77],
-                    [1331766000000,34.17],
-                    [1331852400000,33.82],
-                    [1332111600000,34.51],
-                    [1332198000000,33.16],
-                    [1332284400000,33.56],
-                    [1332370800000,33.71],
-                    [1332457200000,33.81],
-                    [1332712800000,34.40],
-                    [1332799200000,34.63],
-                    [1332885600000,34.46],
-                    [1332972000000,34.48],
-                    [1333058400000,34.31],
-                    [1333317600000,34.70],
-                    [1333404000000,34.31],
-                    [1333490400000,33.46],
-                    [1333576800000,33.59],
-                    [1333922400000,33.22],
-                    [1334008800000,32.61],
-                    [1334095200000,33.01],
-                    [1334181600000,33.55],
-                    [1334268000000,33.18],
-                    [1334527200000,32.84],
-                    [1334613600000,33.84],
-                    [1334700000000,33.39],
-                    [1334786400000,32.91],
-                    [1334872800000,33.06],
-                    [1335132000000,32.62],
-                    [1335218400000,32.40],
-                    [1335304800000,33.13],
-                    [1335391200000,33.26],
-                    [1335477600000,33.58],
-                    [1335736800000,33.55],
-                    [1335823200000,33.77],
-                    [1335909600000,33.76],
-                    [1335996000000,33.32],
-                    [1336082400000,32.61],
-                    [1336341600000,32.52],
-                    [1336428000000,32.67],
-                    [1336514400000,32.52],
-                    [1336600800000,31.92],
-                    [1336687200000,32.20],
-                    [1336946400000,32.23],
-                    [1337032800000,32.33],
-                    [1337119200000,32.36],
-                    [1337205600000,32.01],
-                    [1337292000000,31.31],
-                    [1337551200000,32.01],
-                    [1337637600000,32.01],
-                    [1337724000000,32.18],
-                    [1337810400000,31.54],
-                    [1337896800000,31.60],
-                    [1338242400000,32.05],
-                    [1338328800000,31.29],
-                    [1338415200000,31.05],
-                    [1338501600000,29.82],
-                    [1338760800000,30.31],
-                    [1338847200000,30.70],
-                    [1338933600000,31.69],
-                    [1339020000000,31.32],
-                    [1339106400000,31.65],
-                    [1339365600000,31.13],
-                    [1339452000000,31.77],
-                    [1339538400000,31.79],
-                    [1339624800000,31.67],
-                    [1339711200000,32.39],
-                    [1339970400000,32.63],
-                    [1340056800000,32.89],
-                    [1340143200000,31.99],
-                    [1340229600000,31.23],
-                    [1340316000000,31.57],
-                    [1340575200000,30.84],
-                    [1340661600000,31.07],
-                    [1340748000000,31.41],
-                    [1340834400000,31.17],
-                    [1340920800000,32.37],
-                    [1341180000000,32.19],
-                    [1341266400000,32.51],
-                    [1341439200000,32.53],
-                    [1341525600000,31.37],
-                    [1341784800000,30.43],
-                    [1341871200000,30.44],
-                    [1341957600000,30.20],
-                    [1342044000000,30.14],
-                    [1342130400000,30.65],
-                    [1342389600000,30.40],
-                    [1342476000000,30.65],
-                    [1342562400000,31.43],
-                    [1342648800000,31.89],
-                    [1342735200000,31.38],
-                    [1342994400000,30.64],
-                    [1343080800000,30.02],
-                    [1343167200000,30.33],
-                    [1343253600000,30.95],
-                    [1343340000000,31.89],
-                    [1343599200000,31.01],
-                    [1343685600000,30.88],
-                    [1343772000000,30.69],
-                    [1343858400000,30.58],
-                    [1343944800000,32.02],
-                    [1344204000000,32.14],
-                    [1344290400000,32.37],
-                    [1344376800000,32.51],
-                    [1344463200000,32.65],
-                    [1344549600000,32.64],
-                    [1344808800000,32.27],
-                    [1344895200000,32.10],
-                    [1344981600000,32.91],
-                    [1345068000000,33.65],
-                    [1345154400000,33.80],
-                    [1345413600000,33.92],
-                    [1345500000000,33.75],
-                    [1345586400000,33.84],
-                    [1345672800000,33.50],
-                    [1345759200000,32.26],
-                    [1346018400000,32.32],
-                    [1346104800000,32.06],
-                    [1346191200000,31.96],
-                    [1346277600000,31.46],
-                    [1346364000000,31.27],
-                    [1346709600000,31.43],
-                    [1346796000000,32.26],
-                    [1346882400000,32.79],
-                    [1346968800000,32.46],
-                    [1347228000000,32.13],
-                    [1347314400000,32.43],
-                    [1347400800000,32.42],
-                    [1347487200000,32.81],
-                    [1347573600000,33.34],
-                    [1347832800000,33.41],
-                    [1347919200000,32.57],
-                    [1348005600000,33.12],
-                    [1348092000000,34.53],
-                    [1348178400000,33.83],
-                    [1348437600000,33.41],
-                    [1348524000000,32.90],
-                    [1348610400000,32.53],
-                    [1348696800000,32.80],
-                    [1348783200000,32.44],
-                    [1349042400000,32.62],
-                    [1349128800000,32.57],
-                    [1349215200000,32.60],
-                    [1349301600000,32.68],
-                    [1349388000000,32.47],
-                    [1349647200000,32.23],
-                    [1349733600000,31.68],
-                    [1349820000000,31.51],
-                    [1349906400000,31.78],
-                    [1349992800000,31.94],
-                    [1350252000000,32.33],
-                    [1350338400000,33.24],
-                    [1350424800000,33.44],
-                    [1350511200000,33.48],
-                    [1350597600000,33.24],
-                    [1350856800000,33.49],
-                    [1350943200000,33.31],
-                    [1351029600000,33.36],
-                    [1351116000000,33.40],
-                    [1351202400000,34.01],
-                    [1351638000000,34.02],
-                    [1351724400000,34.36],
-                    [1351810800000,34.39],
-                    [1352070000000,34.24],
-                    [1352156400000,34.39],
-                    [1352242800000,33.47],
-                    [1352329200000,32.98],
-                    [1352415600000,32.90],
-                    [1352674800000,32.70],
-                    [1352761200000,32.54],
-                    [1352847600000,32.23],
-                    [1352934000000,32.64],
-                    [1353020400000,32.65],
-                    [1353279600000,32.92],
-                    [1353366000000,32.64],
-                    [1353452400000,32.84],
-                    [1353625200000,33.40],
-                    [1353884400000,33.30],
-                    [1353970800000,33.18],
-                    [1354057200000,33.88],
-                    [1354143600000,34.09],
-                    [1354230000000,34.61],
-                    [1354489200000,34.70],
-                    [1354575600000,35.30],
-                    [1354662000000,35.40],
-                    [1354748400000,35.14],
-                    [1354834800000,35.48],
-                    [1355094000000,35.75],
-                    [1355180400000,35.54],
-                    [1355266800000,35.96],
-                    [1355353200000,35.53],
-                    [1355439600000,37.56],
-                    [1355698800000,37.42],
-                    [1355785200000,37.49],
-                    [1355871600000,38.09],
-                    [1355958000000,37.87],
-                    [1356044400000,37.71],
-                    [1356303600000,37.53],
-                    [1356476400000,37.55],
-                    [1356562800000,37.30],
-                    [1356649200000,36.90],
-                    [1356908400000,37.68],
-                    [1357081200000,38.34],
-                    [1357167600000,37.75],
-                    [1357254000000,38.13],
-                    [1357513200000,37.94],
-                    [1357599600000,38.14],
-                    [1357686000000,38.66],
-                    [1357772400000,38.62],
-                    [1357858800000,38.09],
-                    [1358118000000,38.16],
-                    [1358204400000,38.15],
-                    [1358290800000,37.88],
-                    [1358377200000,37.73],
-                    [1358463600000,37.98],
-                    [1358809200000,37.95],
-                    [1358895600000,38.25],
-                    [1358982000000,38.10],
-                    [1359068400000,38.32],
-                    [1359327600000,38.24],
-                    [1359414000000,38.52],
-                    [1359500400000,37.94],
-                    [1359586800000,37.83],
-                    [1359673200000,38.34],
-                    [1359932400000,38.10],
-                    [1360018800000,38.51],
-                    [1360105200000,38.40],
-                    [1360191600000,38.07],
-                    [1360278000000,39.12],
-                    [1360537200000,38.64],
-                    [1360623600000,38.89],
-                    [1360710000000,38.81],
-                    [1360796400000,38.61],
-                    [1360882800000,38.63],
-                    [1361228400000,38.99],
-                    [1361314800000,38.77],
-                    [1361401200000,38.34],
-                    [1361487600000,38.55],
-                    [1361746800000,38.11],
-                    [1361833200000,38.59],
-                    [1361919600000,39.60],
-                ]
-                }
-            ],
-            chartOptions: {
-                chart: {
-                    id: 'area-datetime',
-                    type: 'area',
-                    height: 350,
-                    zoom: {
-                      autoScaleYaxis: true
-                    }
-                  },
-                  annotations: {
-                    yaxis: [{
-                      y: 30,
-                      borderColor: '#999',
-                      label: {
-                        show: true,
-                        text: 'Support',
-                        style: {
-                          color: "#fff",
-                          background: '#00E396'
-                        }
-                      }
-                    }],
-                    xaxis: [{
-                      x: new Date('14 Nov 2012').getTime(),
-                      borderColor: '#999',
-                      yAxisIndex: 0,
-                      label: {
-                        show: true,
-                        text: 'Rally',
-                        style: {
-                          color: "#fff",
-                          background: '#775DD0'
-                        }
-                      }
-                    }]
-                  },
-                  dataLabels: {
-                    enabled: false
-                  },
-                  markers: {
-                    size: 0,
-                    style: 'hollow',
-                  },
-                  xaxis: {
-                    type: 'datetime',
-                    min: new Date('01 Mar 2012').getTime(),
-                    tickAmount: 6,
-                  },
-                  tooltip: {
-                    x: {
-                      format: 'dd MMM yyyy'
-                    }
-                  },
-                  fill: {
-                    type: 'gradient',
-                    gradient: {
-                      shadeIntensity: 1,
-                      opacityFrom: 0.7,
-                      opacityTo: 0.9,
-                      stops: [0, 100]
-                    }
-                  },
-                },
-        },
-        {
-          chartSeries:
-            [
-              {
-                name: 'Metric1',
-                data: generateData(20, {
-                  min: 0,
-                  max: 90
-                })
-              },
-              {
-                name: 'Metric2',
-                data: generateData(20, {
-                  min: 0,
-                  max: 90
-                })
-              },
-              {
-                name: 'Metric3',
-                data: generateData(20, {
-                  min: 0,
-                  max: 90
-                })
-              },
-              {
-                name: 'Metric4',
-                data: generateData(20, {
-                  min: 0,
-                  max: 90
-                })
-              },
-              {
-                name: 'Metric5',
-                data: generateData(20, {
-                  min: 0,
-                  max: 90
-                })
-              },
-              {
-                name: 'Metric6',
-                data: generateData(20, {
-                  min: 0,
-                  max: 90
-                })
-              },
-              {
-                name: 'Metric7',
-                data: generateData(20, {
-                  min: 0,
-                  max: 90
-                })
-              },
-              {
-                name: 'Metric8',
-                data: generateData(20, {
-                  min: 0,
-                  max: 90
-                })
-              },
-              {
-                name: 'Metric9',
-                data: generateData(20, {
-                  min: 0,
-                  max: 90
-                })
-              }
-            ],
-            chartOptions: {
-              chart: {
-                height: 350,
-                type: 'heatmap',
-              },
-              dataLabels: {
-                enabled: false
-              },
-              colors: ["#298596"],
-              xaxis: {
-                type: 'category',
-              },
-              title: {
-                text: 'HeatMap Chart (Single color)'
-              },
-            },
-        }
-    ],
     summary: {},
-    taxonomiesList: {}
-};
-function generateData (count, yrange) {
-    var i = 0;
-    var series = [];
-    while (i < count) {
-      var x = (i + 1).toString();
-      var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-      series.push({
-        x: x,
-        y: y
-      });
-      i++;
+    taxonomiesList: {},
+    metadata: {},
+    stackedBarChartOptions: {
+        chart: {
+          type: 'bar',
+          height: 350,
+          stacked: true,
+          toolbar: {
+              show: true
+          },
+          zoom: {
+              enabled: true,
+              autoScaleYaxis: true,
+          }
+      },
+      title: {
+          text: ''
+      },
+      responsive: [{
+          breakpoint: 480,
+          options: {
+              legend: {
+                  position: 'bottom',
+                  offsetX: -10,
+                  offsetY: 0
+              }
+          }
+      }],
+      plotOptions: {
+          bar: {
+              borderRadius: 0,
+              horizontal: false,
+          },
+      },
+      xaxis: {
+          type: 'category',
+          tickPlacement: 'on',
+          categories: []
+      },
+      yaxis: {
+          title: {
+              text: ''
+          }
+      },
+      legend: {
+          position: 'right',
+          offsetY: 40
+      },
+      fill: {
+          opacity: 1
+      }
+    },
+    donutChartOptions: {
+      chart: {
+          type: 'donut',
+          toolbar: {
+            show: true
+          },
+      },
+      title: {
+          text: ''
+      },
+      stroke: {
+        width: 0
+      },
+      labels: [],
+      responsive: [{
+          breakpoint: 480,
+          options: {
+              chart: {
+                  width: 200
+              },
+              legend: {
+                  position: 'bottom'
+              }
+          }
+      }]
+    },
+    horizontalBarChartOptions: {
+      chart: {
+        type: 'bar',
+        height: 350,
+        stacked: true,
+        stackType: '100%',
+        toolbar: {
+            show: true
+        },
+        zoom: {
+            enabled: true,
+            autoScaleYaxis: true,
+        }
+      },
+      plotOptions: {
+        bar: {
+          horizontal: true,
+        },
+      },
+      title: {
+        text: ''
+      },
+      xaxis: {
+        type: 'category',
+        tickPlacement: 'on',
+        categories: [],
+      },
+      tooltip: {
+        y: {
+          formatter: function (val) {
+            return val + "%"
+          }
+        }
+      },
+      fill: {
+        opacity: 1
+      
+      },
+      legend: {
+        position: 'top',
+        horizontalAlign: 'left',
+        offsetX: 40,
+      }
     }
-    return series;
-  }
+};
+
 export default {
     namespaced: true,
     state,
diff --git a/src/views/admin/js/store/modules/report/mutations.js b/src/views/admin/js/store/modules/report/mutations.js
index 09ecfe002..4e518dba3 100644
--- a/src/views/admin/js/store/modules/report/mutations.js
+++ b/src/views/admin/js/store/modules/report/mutations.js
@@ -1,11 +1,23 @@
-export const setReports = (state, reports) => {
-  state.reports = reports;
-};
-
 export const setSummary = (state, summary) => {
   state.summary = summary;
 };
 
+export const setMetadata = (state, metadata) => {
+  state.metadata = metadata;
+};
+
 export const setTaxonomiesList = (state, taxonomiesList) => {
   state.taxonomiesList = taxonomiesList;
+};
+
+export const setStackedBarChartOptions = (state, stackedBarChartOptions) => {
+  state.stackedBarChartOptions = stackedBarChartOptions;
+};
+
+export const setHorizontalBarChartOptions = (state, horizontalBarChartOptions) => {
+  state.horizontalBarChartOptions = horizontalBarChartOptions;
+};
+
+export const setDonutChartOptions = (state, donutChartOptions) => {
+  state.donutChartOptions = donutChartOptions;
 };
\ No newline at end of file
diff --git a/src/views/reports/components/chart-block.vue b/src/views/reports/components/chart-block.vue
deleted file mode 100644
index 0633725e6..000000000
--- a/src/views/reports/components/chart-block.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <apexchart
-            height="380px"
-            :options="chartOptions" 
-            :series="chartSeries" />
-</template>
-
-<script>
-export default {
-    props: {
-        chartTitle: String,
-        chartOptions: Object,
-        chartSeries: Array
-    }
-}
-</script>
\ No newline at end of file
diff --git a/src/views/reports/components/number-block.vue b/src/views/reports/components/number-block.vue
index 2ff9d63fb..ffeb98e2e 100644
--- a/src/views/reports/components/number-block.vue
+++ b/src/views/reports/components/number-block.vue
@@ -1,9 +1,10 @@
 <template>
-    <div>
+    <div class="number-block">
         <p class="title is-2">
             <i-count-up
                     :delay="750"
-                    :end-val="total" />
+                    :end-val="total"
+                    :options="{ separator: ' ' }" />
         </p>
         <p class="subtitle is-3">
             <span class="icon has-text-gray">
@@ -21,7 +22,8 @@
                 <span class="value">
                     <i-count-up
                             :delay="750"
-                            :end-val="totalByStatus[statusOption.slug]" />
+                            :end-val="totalByStatus[statusOption.slug]"
+                            :options="{ separator: ' ' }" />
                     &nbsp;
                 </span>
                 <span 
@@ -57,9 +59,9 @@ export default {
         totalByStatus() {
             return {
                 'publish': this.summary && this.summary.totals && this.summary.totals[this.entityType] ? this.summary.totals[this.entityType].publish : 0,
-                'private': this.summary && this.summary.totals && this.summary.totals[this.entityType] ?  this.summary.totals[this.entityType].private : 0,
-                'draft': this.summary && this.summary.totals && this.summary.totals[this.entityType] ?  this.summary.totals[this.entityType].draft : 0,
-                'trash': this.summary && this.summary.totals && this.summary.totals[this.entityType] ?  this.summary.totals[this.entityType].trash : 0
+                'private': this.summary && this.summary.totals && this.summary.totals[this.entityType] ? this.summary.totals[this.entityType].private : 0,
+                'draft': this.summary && this.summary.totals && this.summary.totals[this.entityType] ? this.summary.totals[this.entityType].draft : 0,
+                'trash': this.summary && this.summary.totals && this.summary.totals[this.entityType] ? this.summary.totals[this.entityType].trash : 0
             }
         }
     }
@@ -67,9 +69,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.number-block {
+    min-height: 226px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content
+
     .title {
         margin-top: 0.25em;
     }
+    .subtitle {
+        padding-left: 0;
+        padding-right: 0;
+    }
     .status-list {
         display: flex;
         justify-content: center;
@@ -78,4 +91,5 @@ export default {
             margin: 0 1em;
         }
     }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/reports/js/reports-main.js b/src/views/reports/js/reports-main.js
index cc55b49dc..cf7834b28 100644
--- a/src/views/reports/js/reports-main.js
+++ b/src/views/reports/js/reports-main.js
@@ -15,7 +15,6 @@ import {
 Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
 
 import ReportsPage from '../reports.vue';
-import ChartBlock from '../components/chart-block.vue';
 import NumberBlock from '../components/number-block.vue';
 
 Vue.use(VueApexCharts)
@@ -37,7 +36,6 @@ Vue.use(VTooltip);
 Vue.use(Snackbar);
 Vue.use(Modal);
 
-Vue.component('chart-block', ChartBlock);
 Vue.component('number-block', NumberBlock);
 Vue.component('apexchart', VueApexCharts);
 
@@ -58,7 +56,7 @@ new Vue({
 listen("load", window, function() {
     var iconsStyle = document.createElement("style");
     iconsStyle.setAttribute('type', 'text/css');
-    iconsStyle.innerText = '.tainacan-icon{ opacity: 1 !important; }';
+    iconsStyle.innerText = '.tainacan-icon::before{ opacity: 1.0 !important; }';
     document.head.appendChild(iconsStyle);
 });
 
@@ -76,11 +74,11 @@ function listen(evnt, elem, func) {
         return r;
     } else if (document.head) {
         var iconHideStyle = document.createElement("style");
-        iconHideStyle.innerText = '.tainacan-icon{ font-size: 0px !important; }'; 
+        iconHideStyle.innerText = '.tainacan-icon::before{ opacity: 0.0 !important; }'; 
         document.head.appendChild(iconHideStyle);
     } else {
         var iconHideStyle = document.createElement("style");
-        iconHideStyle.innerText = '.tainacan-icon{ font-size: 0px !important; }'; 
+        iconHideStyle.innerText = '.tainacan-icon::before{ opacity: 0.0 !important; }'; 
         document.getElementsByTagName("head")[0].appendChild(iconHideStyle);
     }
 }
\ No newline at end of file
diff --git a/src/views/reports/pages/reports-list.vue b/src/views/reports/pages/reports-list.vue
index 2c86911ef..19b665b38 100644
--- a/src/views/reports/pages/reports-list.vue
+++ b/src/views/reports/pages/reports-list.vue
@@ -25,7 +25,7 @@
                         class="postbox"
                         :source-collection="selectedCollection"
                         :summary="summary"
-                        entity-type="collections"/>
+                        entity-type="collections" />
             </div>
             <div
                     :class="{ 'is-one-third-tablet': !selectedCollection || selectedCollection == 'default' }"
@@ -45,44 +45,68 @@
                         class="postbox"
                         :source-collection="selectedCollection"
                         :summary="summary"
-                        entity-type="taxonomies"/>
+                        entity-type="taxonomies" />
             </div>
-            <div class="column is-full">
-                <chart-block
-                        :class="{ 'skeleton': isFetchingTaxonomiesList}"
+            <div 
+                v-if="!selectedCollection || selectedCollection == 'default'"
+                    class="column is-full">
+                <apexchart
+                        v-if="!isFetchingTaxonomiesList"
+                        height="380px"
                         class="postbox"
-                        :chart-series="taxonomiesListChartSeries"
-                        :chart-options="taxonomiesListChartOptions" />
-            </div>
-            <div class="column is-half is-one-quarter-widescreen">
-                <chart-block
-                        class="postbox"
-                        :chart-series="reports[0].chartSeries"
-                        :chart-options="reports[0].chartOptions" />
-            </div>
-            <div class="column is-half is-one-quarter-widescreen">
-                <chart-block
-                        class="postbox"
-                        :chart-series="reports[1].chartSeries"
-                        :chart-options="reports[1].chartOptions" />
+                        :series="taxonomiesListChartSeries"
+                        :options="taxonomiesListChartOptions" />
+                <div 
+                        v-else
+                        style="min-height=380px"
+                        class="skeleton postbox" />
             </div>
+            <template v-else>
+                <div class="column is-full is-half-desktop">
+                    <apexchart
+                            v-if="!isFetchingMetadata"
+                            height="380px"
+                            class="postbox"
+                            :series="metadataTypeChartSeries"
+                            :options="metadataTypeChartOptions" />
+                    <div 
+                        v-else
+                        style="min-height=380px"
+                        class="skeleton postbox" />
+                </div>
+                <div class="column is-full is-half-desktop">
+                     <apexchart
+                            v-if="!isFetchingMetadata"
+                            height="380px"
+                            class="postbox"
+                            :series="metadataDistributionChartSeries"
+                            :options="metadataDistributionChartOptions" />
+                    <div 
+                            v-else
+                            style="min-height=380px"
+                            class="skeleton postbox" />
+                </div>
+            </template>
             <div class="column is-full is-half-widescreen">
-                <chart-block
+                <!-- <apexchart
+                        height="380px"
                         class="postbox"
-                        :chart-series="reports[2].chartSeries"
-                        :chart-options="reports[2].chartOptions" />
+                        :series="reports[2].chartSeries"
+                        :options="reports[2].chartOptions" /> -->
             </div>
             <div class="column is-full is-half-desktop">
-                <chart-block
+                <!-- <apexchart
+                        height="380px"
                         class="postbox"
-                        :chart-series="reports[4].chartSeries"
-                        :chart-options="reports[4].chartOptions" />
+                        :series="reports[4].chartSeries"
+                        :options="reports[4].chartOptions" /> -->
             </div>
             <div class="column is-full is-half-desktop">
-                <chart-block
+                <!-- <apexchart
+                        height="380px"
                         class="postbox"
-                        :chart-series="reports[5].chartSeries"
-                        :chart-options="reports[5].chartOptions" />
+                        :series="reports[5].chartSeries"
+                        :options="reports[5].chartOptions" /> -->
             </div>
         </div>
     </div>
@@ -99,8 +123,13 @@ export default {
             isFetchingCollections: false,
             isFetchingSummary: false,
             isFetchingTaxonomiesList: false,
+            isFetchingMetadata: false,
             taxonomiesListChartSeries: [],
-            taxonomiesListChartOptions: {}
+            taxonomiesListChartOptions: {},
+            metadataTypeChartSeries: [],
+            metadataTypeChartOptions: {},
+            metadataDistributionChartSeries: [],
+            metadataDistributionChartOptions: {}
         }
     },
     computed: {
@@ -108,9 +137,12 @@ export default {
             collections: 'getCollections',
         }),
         ...mapGetters('report', {
-            reports: 'getReports',
             summary: 'getSummary',
-            taxonomiesList: 'getTaxonomiesList'
+            metadata: 'getMetadata',
+            taxonomiesList: 'getTaxonomiesList',
+            stackedBarChartOptions: 'getStackedBarChartOptions',
+            donutChartOptions: 'getDonutChartOptions',
+            horizontalBarChartOptions: 'getHorizontalBarChartOptions'
         })
     },
     watch: {
@@ -118,6 +150,11 @@ export default {
             handler(to) {
                 this.selectedCollection = to['collection'] ? to['collection'] : 'default';
                 this.loadSummary();
+
+                if (this.selectedCollection && this.selectedCollection != 'default')
+                    this.loadMetadata();
+                else
+                    this.loadTaxonomiesList(); 
             },
             immediate: true
         }
@@ -127,15 +164,7 @@ export default {
         this.selectedCollection = this.$route.query['collection'] ? this.$route.query['collection'] : 'default';
         
         // Loads collection for the select input
-        this.isFetchingCollections = true;
-        this.fetchAllCollectionNames()
-            .then(() => {
-                this.loadSummary();
-                this.isFetchingCollections = false;
-            })
-            .catch(() => this.isFetchingCollections = false);
-        
-       this.loadTaxonomiesList();
+        this.loadCollections();
     },
     methods: {
         ...mapActions('collection', [
@@ -143,29 +172,99 @@ export default {
         ]),
         ...mapActions('report', [
             'fetchSummary',
-            'fetchTaxonomiesList'
-        ]),
-        ...mapGetters('report', [
-            'getTaxonomiesList' 
+            'fetchTaxonomiesList',
+            'fetchMetadata'
         ]),
+        loadCollections() {
+            this.isFetchingCollections = true;
+            this.fetchAllCollectionNames()
+                .then(() => this.isFetchingCollections = false)
+                .catch(() => this.isFetchingCollections = false);
+        },
         loadSummary() {
             this.isFetchingSummary = true;
             this.fetchSummary({ collectionId: this.selectedCollection })
                 .then(() => this.isFetchingSummary = false)
                 .catch(() => this.isFetchingSummary = false);
         },
+        loadMetadata() {
+            this.isFetchingMetadata = true;
+            this.fetchMetadata({ collectionId: this.selectedCollection })
+                .then(() => {
+
+                    // Building Metadata Type Donut Chart
+                    let metadataTypeValues = [];
+                    let metadataTypeLabels = [];
+
+                    for (const metadataType in this.metadata.totals.metadata_per_type) {
+                        metadataTypeValues.push(this.metadata.totals.metadata_per_type[metadataType]);
+                        metadataTypeLabels.push(metadataType);
+                    }
+                    
+                    this.metadataTypeChartSeries = metadataTypeValues;
+                    this.metadataTypeChartOptions = {
+                        ...this.donutChartOptions,
+                        ...{
+                            title: {
+                                text: this.$i18n.get('metadata_types')
+                            },
+                            labels: metadataTypeLabels,
+                        }
+                    }
+
+                    // 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 = [];
+
+                    orderedMetadataDistributions.forEach(metadataDistribution => {
+                        metadataDistributionValues.push(parseFloat(metadataDistribution.fill_percentage));
+                        metadataDistributionValuesInverted.push(100.0000 - parseFloat(metadataDistribution.fill_percentage).toFixed(4));
+                        metadataDistributionLabels.push(metadataDistribution.name);
+                    })
+
+                    this.metadataDistributionChartSeries = [
+                        { 
+                            name: this.$i18n.get('label_filled'),
+                            data: metadataDistributionValues
+                        },
+                        { 
+                            name: this.$i18n.get('label_not_filled'),
+                            data: metadataDistributionValuesInverted
+                        }
+                    ];
+                    this.metadataDistributionChartOptions = {
+                        ...this.horizontalBarChartOptions,
+                        ...{
+                            title: {
+                                text: this.$i18n.get('label_metadata_fill_distribution')
+                            },
+                            labels: metadataDistributionLabels,
+                            colors: ['#25a189', '#a23939']
+                        }
+                    }
+
+                    this.isFetchingMetadata = false;
+                })
+                .catch(() => this.isFetchingMetadata = false);
+        },
         loadTaxonomiesList() {
             this.isFetchingTaxonomiesList = true;
             this.fetchTaxonomiesList()
                 .then(() => {
+
+                    // Building Taxonomy term usage chart
+                    const orderedTaxonomies = Object.values(this.taxonomiesList).sort((a, b) => a.total_terms - b.total_terms);
                     let termsUsed = [];
                     let termsNotUsed = [];
                     let taxonomiesLabels = [];
-                    for (const taxonomy in this.taxonomiesList) {
-                        termsUsed.push(this.taxonomiesList[taxonomy].total_terms_used);
-                        termsNotUsed.push(this.taxonomiesList[taxonomy].total_terms_not_used);
-                        taxonomiesLabels.push(this.taxonomiesList[taxonomy].name);
-                    }
+
+                    orderedTaxonomies.forEach(taxonomy => {
+                        termsUsed.push(taxonomy.total_terms_used);
+                        termsNotUsed.push(taxonomy.total_terms_not_used);
+                        taxonomiesLabels.push(taxonomy.name);
+                    });
                     
                     this.taxonomiesListChartSeries = [
                         {
@@ -179,56 +278,24 @@ export default {
                     ];
                     
                     this.taxonomiesListChartOptions = {
-                        chart: {
-                            type: 'bar',
-                            height: 350,
-                            stacked: true,
-                            toolbar: {
-                                show: true
+                        ...this.stackedBarChartOptions, 
+                        ...{
+                            title: {
+                                text: this.$i18n.get('label_usage_of_terms_per_taxonomy')
                             },
-                            zoom: {
-                                enabled: true,
-                                autoScaleYaxis: true,
-                            }
-                        },
-                        title: {
-                            text: this.$i18n.get('label_usage_of_terms_per_taxonomy')
-                        },
-                        responsive: [{
-                            breakpoint: 480,
-                            options: {
-                                legend: {
-                                    position: 'bottom',
-                                    offsetX: -10,
-                                    offsetY: 0
+                            xaxis: {
+                                type: 'category',
+                                tickPlacement: 'on',
+                                categories: taxonomiesLabels,
+                            },
+                            yaxis: {
+                                title: {
+                                    text: this.$i18n.get('label_number of terms')
                                 }
                             }
-                        }],
-                        plotOptions: {
-                            bar: {
-                                borderRadius: 0,
-                                horizontal: false,
-                            },
-                        },
-                        xaxis: {
-                            type: 'category',
-                            tickPlacement: 'on',
-                            categories: taxonomiesLabels,
-                        },
-                         yaxis: {
-                            title: {
-                                text: this.$i18n.get('label_number of terms')
-                            }
-                        },
-                        legend: {
-                            position: 'right',
-                            offsetY: 40
-                        },
-                        fill: {
-                            opacity: 1
                         }
                     }
-
+                    
                     this.isFetchingTaxonomiesList = false;
                 })
                 .catch(() => this.isFetchingTaxonomiesList = false);
@@ -242,5 +309,6 @@ export default {
     padding: 1.125rem 1.25rem;
     margin-bottom: 0;
     height: 100%;
+    min-height: 380px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/reports/tainacan-reports.scss b/src/views/reports/tainacan-reports.scss
index 5a68b3199..d74b2b181 100644
--- a/src/views/reports/tainacan-reports.scss
+++ b/src/views/reports/tainacan-reports.scss
@@ -1,6 +1,6 @@
 #tainacan-reports-app {
     // Tainacan Loading
-    .tainacan-icon {
-        font-size: inherit; // Will make it 1 once window.load is done; 
+    .tainacan-icon::before {
+        opacity: 0.0; // Will make it 1 once window.load is done; 
     }
 }
\ No newline at end of file
diff --git a/src/views/tainacan-admin-i18n.php b/src/views/tainacan-admin-i18n.php
index dcb582909..80fdad4ba 100644
--- a/src/views/tainacan-admin-i18n.php
+++ b/src/views/tainacan-admin-i18n.php
@@ -21,6 +21,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'collections'                                    => __( 'Collections', 'tainacan' ),
 	'items'                                          => __( 'Items', 'tainacan' ),
 	'metadata'                                       => __( 'Metadata', 'tainacan' ),
+	'metadata_types'                                 => __( 'Metadata types', 'tainacan' ),
 	'filters'                                        => __( 'Filters', 'tainacan' ),
 	'taxonomies'                                     => __( 'Taxonomies', 'tainacan' ),
 	'activities'                                     => __( 'Activities', 'tainacan' ),
@@ -496,6 +497,9 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_number of terms'						 	 => __( 'Number of terms', 'tainacan' ),
 	'label_usage_of_terms_per_taxonomy'			 	 => __( 'Usage of terms per taxonomy', 'tainacan' ),
 	'label_loading_report'						 	 => __( 'Loading report...', 'tainacan' ),
+	'label_metadata_fill_distribution'			 	 => __( 'Metadata fill distribution', 'tainacan' ),
+	'label_not_filled'							 	 => __( 'Not filled yet', 'tainacan' ),
+	'label_filled'			 	 					 => __( 'Already filled', 'tainacan' ),
 	
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),