Moves taxonomies list and term usage charts to separate components. #483
This commit is contained in:
mateuswetah
parent
fd1610ebcd
commit
ed7376eca3
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import * as mutations from './mutations';
|
|||
const state = {
|
||||
summary: {},
|
||||
taxonomiesList: {},
|
||||
isFetchingTaxonomiesList: false,
|
||||
colletionsList: {},
|
||||
taxonomyTerms: {},
|
||||
metadata: {},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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') }}
|
||||
</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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -70,124 +70,13 @@
|
|||
style="min-height=380px"
|
||||
class="skeleton postbox" />
|
||||
</div>
|
||||
<div
|
||||
v-if="!selectedCollection || selectedCollection == 'default'"
|
||||
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>
|
||||
<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') }} </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>
|
||||
|
||||
<terms-per-taxonomy-block
|
||||
v-if="!selectedCollection || selectedCollection == 'default'"/>
|
||||
|
||||
<items-per-term-block
|
||||
v-if="!selectedCollection || selectedCollection == 'default'" />
|
||||
|
||||
<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: {},
|
||||
maxTermsToDisplay: 64,
|
||||
termsDisplayedPage: 1
|
||||
activitiesChartOptions: {}
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
||||
<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>
|
||||
</script>
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue