Adds first level of child term navigation to the items per term chart #483
This commit is contained in:
mateuswetah
parent
c3e9c1362b
commit
7644a97a66
|
|
@ -114,17 +114,20 @@ export const fetchTaxonomiesList = ({ commit }, force) => {
|
|||
});
|
||||
};
|
||||
|
||||
export const fetchTaxonomyTerms = ({ commit }, { taxonomyId, collectionId, force }) => {
|
||||
export const fetchTaxonomyTerms = ({ commit }, { taxonomyId, collectionId, parentTerm, force }) => {
|
||||
|
||||
let endpoint = '/reports';
|
||||
|
||||
if (collectionId && collectionId != 'default')
|
||||
endpoint += '/collection/' + collectionId + '/metadata/' + taxonomyId;
|
||||
endpoint += '/collection/' + collectionId + '/metadata/' + taxonomyId + '?';
|
||||
else
|
||||
endpoint += '/taxonomy/' + taxonomyId;
|
||||
endpoint += '/taxonomy/' + taxonomyId + '?';
|
||||
|
||||
if (force)
|
||||
endpoint += '?force=yes';
|
||||
endpoint += '&force=yes';
|
||||
|
||||
if (parentTerm)
|
||||
endpoint += '&parent=' + parentTerm;
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.tainacan.get(endpoint)
|
||||
|
|
@ -135,7 +138,11 @@ export const fetchTaxonomyTerms = ({ commit }, { taxonomyId, collectionId, force
|
|||
else
|
||||
taxonomyTerms = res.data.terms ? Object.values(res.data.terms) : [];
|
||||
|
||||
commit('setTaxonomyTerms', taxonomyTerms);
|
||||
if (parentTerm)
|
||||
commit('setTaxonomyChildTerms', taxonomyTerms);
|
||||
else
|
||||
commit('setTaxonomyTerms', taxonomyTerms);
|
||||
|
||||
commit('setReportLatestCachedOn', { report: 'taxonomy-terms-' + (collectionId ? collectionId : 'default') + '-' + taxonomyId, reportLatestCachedOn: res.data.report_cached_on });
|
||||
resolve(taxonomyTerms);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -22,6 +22,10 @@ export const getTaxonomyTerms = state => {
|
|||
return state.taxonomyTerms;
|
||||
};
|
||||
|
||||
export const getTaxonomyChildTerms = state => {
|
||||
return state.taxonomyChildTerms;
|
||||
};
|
||||
|
||||
export const getActivities = state => {
|
||||
return state.activities;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ const state = {
|
|||
summary: {},
|
||||
taxonomiesList: {},
|
||||
collectionsList: {},
|
||||
taxonomyTerms: {},
|
||||
taxonomyTerms: [],
|
||||
taxonomyChildTerms: [],
|
||||
metadata: {},
|
||||
metadataList: {},
|
||||
activities: {},
|
||||
|
|
|
|||
|
|
@ -24,6 +24,10 @@ export const setTaxonomyTerms = (state, taxonomyTerms) => {
|
|||
state.taxonomyTerms = taxonomyTerms;
|
||||
};
|
||||
|
||||
export const setTaxonomyChildTerms = (state, taxonomyTerms) => {
|
||||
state.taxonomyChildTerms = taxonomyTerms;
|
||||
};
|
||||
|
||||
export const setActivities = (state, activities) => {
|
||||
state.activities = activities;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-if="isRepositoryLevel ? taxonomiesList != undefined : metadataList != undefined">
|
||||
<div v-if="taxonomiesList != undefined">
|
||||
<div
|
||||
:class="{ 'skeleton': isFetchingData || isBuildingChart || isFetchingTaxonomyTerms || !selectedTaxonomy || !selectedTaxonomy.id }"
|
||||
class="postbox">
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
v-for="(taxonomy, index) of taxonomiesListArray"
|
||||
:key="index"
|
||||
:value="taxonomy">
|
||||
{{ taxonomy.name + (isRepositoryLevel ? (' (' + taxonomy.total_terms + ' ' + ( taxonomy.total_terms == 1 ? $i18n.get('term') : $i18n.get('terms') ) + ')') : '') }}
|
||||
{{ taxonomy.name + ' (' + taxonomy.total_terms + ' ' + ( taxonomy.total_terms == 1 ? $i18n.get('term') : $i18n.get('terms') ) + ')' }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -125,10 +125,6 @@ import { reportsChartMixin } from '../js/reports-mixin';
|
|||
|
||||
export default {
|
||||
mixins: [ reportsChartMixin ],
|
||||
props: {
|
||||
isRepositoryLevel: false,
|
||||
collectionId: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFetchingTaxonomyTerms: false,
|
||||
|
|
@ -140,18 +136,14 @@ export default {
|
|||
computed: {
|
||||
...mapGetters('report', {
|
||||
taxonomiesList: 'getTaxonomiesList',
|
||||
metadataList: 'getMetadataList',
|
||||
stackedBarChartOptions: 'getStackedBarChartOptions',
|
||||
reportsLatestCachedOn: 'getReportsLatestCachedOn'
|
||||
}),
|
||||
taxonomiesListArray() {
|
||||
if (this.isRepositoryLevel)
|
||||
return this.taxonomiesList && this.taxonomiesList != undefined ? Object.values(this.taxonomiesList) : [];
|
||||
else
|
||||
return this.metadataList && this.metadataList != undefined && Array.isArray(this.metadataList) ? this.metadataList : [];
|
||||
return this.taxonomiesList && this.taxonomiesList != undefined ? Object.values(this.taxonomiesList) : [];
|
||||
},
|
||||
taxonomyTermsLatestCachedOn() {
|
||||
return this.reportsLatestCachedOn['taxonomy-terms-' + (this.collectionId ? this.collectionId : 'default') + '-' + this.selectedTaxonomy.id];
|
||||
return this.reportsLatestCachedOn['taxonomy-terms-' + this.selectedTaxonomy.id];
|
||||
},
|
||||
currentTotalTerms() {
|
||||
return Array.isArray(this.chartData) ? this.chartData.length : 0
|
||||
|
|
@ -185,31 +177,21 @@ export default {
|
|||
...mapActions('report', [
|
||||
'fetchTaxonomyTerms'
|
||||
]),
|
||||
...mapActions('metadata', [
|
||||
'fetchMetadata'
|
||||
]),
|
||||
buildTaxonomyTermsChart() {
|
||||
|
||||
this.isBuildingChart = true;
|
||||
|
||||
// Building Taxonomy term usage chart
|
||||
let orderedTerms = JSON.parse(JSON.stringify(this.chartData)).sort((a, b) => { return this.isRepositoryLevel ? b.count - a.count : b.total_items - a.total_items });
|
||||
let orderedTerms = JSON.parse(JSON.stringify(this.chartData)).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 = [];
|
||||
|
||||
if (this.isRepositoryLevel) {
|
||||
orderedTerms.forEach(term => {
|
||||
termsValues.push(term.count);
|
||||
termsLabels.push(term.name);
|
||||
});
|
||||
} else {
|
||||
orderedTerms.forEach(term => {
|
||||
termsValues.push(term.total_items);
|
||||
termsLabels.push(term.label);
|
||||
});
|
||||
}
|
||||
orderedTerms.forEach(term => {
|
||||
termsValues.push(term.count);
|
||||
termsLabels.push(term.name);
|
||||
});
|
||||
|
||||
this.chartSeries = [
|
||||
{
|
||||
|
|
@ -248,7 +230,7 @@ export default {
|
|||
loadTaxonomyTerms(force) {
|
||||
this.isFetchingTaxonomyTerms = true;
|
||||
|
||||
this.fetchTaxonomyTerms({ taxonomyId: this.selectedTaxonomy.id, collectionId: this.collectionId, force: force })
|
||||
this.fetchTaxonomyTerms({ taxonomyId: this.selectedTaxonomy.id, force: force })
|
||||
.then(() => {
|
||||
this.buildTaxonomyTermsChart();
|
||||
this.isFetchingTaxonomyTerms = false;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,460 @@
|
|||
<template>
|
||||
<div v-if="metadataList != undefined">
|
||||
<div
|
||||
:class="{ 'skeleton': isFetchingData || isBuildingChart || isFetchingMetadatumTerms || !selectedMetadatum || !selectedMetadatum.id }"
|
||||
class="postbox">
|
||||
<div
|
||||
:style="selectedParentTerm ? 'margin-left: 0px;' : ''"
|
||||
:class="selectedParentTerm ? 'columns' : ''">
|
||||
<div :class="selectedParentTerm ? 'column is-half' : ''">
|
||||
<div class="box-header">
|
||||
<div class="box-header__item">
|
||||
<label
|
||||
v-if="!isFetchingData"
|
||||
for="select_metadata_for_terms">
|
||||
{{ $i18n.get('label_items_per_term_from_taxonomy_metadatum') }}
|
||||
</label>
|
||||
<select
|
||||
v-if="!isFetchingData"
|
||||
name="select_metadata_for_terms"
|
||||
id="select_metadata_for_terms"
|
||||
:placeholder="$i18n.get('label_select_a_taxonomy_metadatum')"
|
||||
v-model="selectedMetadatum">
|
||||
<option
|
||||
v-for="(metadatum, index) of metadataListArray"
|
||||
:key="index"
|
||||
:value="metadatum">
|
||||
{{ metadatum.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div
|
||||
v-if="selectedMetadatum && selectedMetadatum.id && currentTotalTerms >= 56"
|
||||
class="box-header__item">
|
||||
<label for="max_terms">{{ $i18n.get('label_terms_per_page') }}</label>
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
min="1"
|
||||
max="999"
|
||||
class="screen-per-page"
|
||||
name="max_terms"
|
||||
id="max_terms"
|
||||
maxlength="3"
|
||||
:disabled="isBuildingChart"
|
||||
v-model.number="maxTermsToDisplay">
|
||||
</div>
|
||||
<div
|
||||
v-if="selectedMetadatum && selectedMetadatum.id && currentTotalTerms >= 56"
|
||||
class="box-header__item tablenav-pages">
|
||||
<span class="displaying-num">{{ currentTotalTerms + ' ' + $i18n.get('terms') }}</span>
|
||||
<span class="pagination-links">
|
||||
<span
|
||||
@click="!isBuildingChart ? termsDisplayedPage = 1 : null"
|
||||
:class="{'tablenav-pages-navspan disabled' : termsDisplayedPage <= 1 || isBuildingChart}"
|
||||
class="first-page button"
|
||||
aria-hidden="true">
|
||||
«
|
||||
</span>
|
||||
<span
|
||||
@click="(termsDisplayedPage > 1 && !isBuildingChart) ? termsDisplayedPage-- : null"
|
||||
:class="{'tablenav-pages-navspan disabled' : termsDisplayedPage <= 1 || isBuildingChart}"
|
||||
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="isBuildingChart || maxTermsToDisplay >= currentTotalTerms"
|
||||
:max="Math.ceil(currentTotalTerms/maxTermsToDisplay)"
|
||||
name="paged"
|
||||
v-model.number="termsDisplayedPage"
|
||||
size="1"
|
||||
aria-describedby="table-paging">
|
||||
<span class="tablenav-paging-text"> {{ $i18n.get('info_of') }} <span class="total-pages">{{ Math.ceil(currentTotalTerms/maxTermsToDisplay) }}</span></span>
|
||||
</span>
|
||||
<span
|
||||
@click="(!isBuildingChart && termsDisplayedPage < Math.ceil(currentTotalTerms/maxTermsToDisplay)) ? termsDisplayedPage++ : null"
|
||||
:class="{'tablenav-pages-navspan disabled' : isBuildingChart || termsDisplayedPage >= Math.ceil(currentTotalTerms/maxTermsToDisplay) }"
|
||||
aria-hidden="true"
|
||||
class="next-page button">
|
||||
›
|
||||
</span>
|
||||
<span
|
||||
@click="!isBuildingChart ? termsDisplayedPage = Math.ceil(currentTotalTerms/maxTermsToDisplay) : null"
|
||||
:class="{'tablenav-pages-navspan disabled': isBuildingChart || termsDisplayedPage >= Math.ceil(currentTotalTerms/maxTermsToDisplay) }"
|
||||
class="last-page button"
|
||||
aria-hidden="true">
|
||||
»
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<apexchart
|
||||
v-if="!isFetchingData && !isBuildingChart && !isFetchingMetadatumTerms && selectedMetadatum && selectedMetadatum.id"
|
||||
height="380px"
|
||||
:series="chartSeries"
|
||||
:options="chartOptions" />
|
||||
</div>
|
||||
<div
|
||||
v-if="!isFetchingData && !isFetchingMetadatumTerms && selectedMetadatum && selectedParentTerm"
|
||||
class="column is-half">
|
||||
<div class="box-header">
|
||||
<div class="box-header__item">
|
||||
<label
|
||||
v-if="!isFetchingMetadatumChildTerms">
|
||||
{{ $i18n.get('label_items_per_child_terms_of') }} <em>{{ selectedParentTerm }}</em>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
v-if="currentTotalChildTerms >= 56"
|
||||
class="box-header__item">
|
||||
<label for="max_terms">{{ $i18n.get('label_terms_per_page') }}</label>
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
min="1"
|
||||
max="999"
|
||||
class="screen-per-page"
|
||||
name="max_terms"
|
||||
id="max_terms"
|
||||
maxlength="3"
|
||||
:disabled="isBuildingChildrenChart"
|
||||
v-model.number="maxChildTermsToDisplay">
|
||||
</div>
|
||||
<div
|
||||
v-if="currentTotalChildTerms >= 56"
|
||||
class="box-header__item tablenav-pages">
|
||||
<span class="displaying-num">{{ currentTotalChildTerms + ' ' + $i18n.get('terms') }}</span>
|
||||
<span class="pagination-links">
|
||||
<span
|
||||
@click="!isBuildingChildrenChart ? childTermsDisplayedPage = 1 : null"
|
||||
:class="{'tablenav-pages-navspan disabled' : childTermsDisplayedPage <= 1 || isBuildingChildrenChart}"
|
||||
class="first-page button"
|
||||
aria-hidden="true">
|
||||
«
|
||||
</span>
|
||||
<span
|
||||
@click="(childTermsDisplayedPage > 1 && !isBuildingChildrenChart) ? childTermsDisplayedPage-- : null"
|
||||
:class="{'tablenav-pages-navspan disabled' : childTermsDisplayedPage <= 1 || isBuildingChildrenChart}"
|
||||
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="isBuildingChildrenChart || maxChildTermsToDisplay >= currentTotalChildTerms"
|
||||
:max="Math.ceil(currentTotalChildTerms/maxChildTermsToDisplay)"
|
||||
name="paged"
|
||||
v-model.number="childTermsDisplayedPage"
|
||||
size="1"
|
||||
aria-describedby="table-paging">
|
||||
<span class="tablenav-paging-text"> {{ $i18n.get('info_of') }} <span class="total-pages">{{ Math.ceil(currentTotalChildTerms/maxChildTermsToDisplay) }}</span></span>
|
||||
</span>
|
||||
<span
|
||||
@click="(!isBuildingChildrenChart && childTermsDisplayedPage < Math.ceil(currentTotalChildTerms/maxChildTermsToDisplay)) ? childTermsDisplayedPage++ : null"
|
||||
:class="{'tablenav-pages-navspan disabled' : isBuildingChildrenChart || childTermsDisplayedPage >= Math.ceil(currentTotalChildTerms/maxChildTermsToDisplay) }"
|
||||
aria-hidden="true"
|
||||
class="next-page button">
|
||||
›
|
||||
</span>
|
||||
<span
|
||||
@click="!isBuildingChildrenChart ? childTermsDisplayedPage = Math.ceil(currentTotalChildTerms/maxChildTermsToDisplay) : null"
|
||||
:class="{'tablenav-pages-navspan disabled': isBuildingChildrenChart || childTermsDisplayedPage >= Math.ceil(currentTotalChildTerms/maxChildTermsToDisplay) }"
|
||||
class="last-page button"
|
||||
aria-hidden="true">
|
||||
»
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<apexchart
|
||||
v-if="!isBuildingChildrenChart && !isFetchingMetadatumChildTerms"
|
||||
height="380px"
|
||||
:series="childrenChartSeries"
|
||||
:options="childrenChartOptions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="metadatumTermsLatestCachedOn"
|
||||
class="box-last-cached-on">
|
||||
<span>{{ $i18n.get('label_report_generated_on') + ': ' + new Date(metadatumTermsLatestCachedOn).toLocaleString() }}</span>
|
||||
<button
|
||||
@click="loadMetadatumTerms(true)">
|
||||
<span class="screen-reader-text">
|
||||
{{ $i18n.get('label_get_latest_report') }}
|
||||
</span>
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-updating tainacan-icon-rotate-270" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
import { reportsChartMixin } from '../js/reports-mixin';
|
||||
|
||||
export default {
|
||||
mixins: [ reportsChartMixin ],
|
||||
props: {
|
||||
collectionId: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFetchingMetadatumTerms: false,
|
||||
selectedMetadatum: {},
|
||||
maxTermsToDisplay: 56,
|
||||
termsDisplayedPage: 1,
|
||||
selectedParentTerm: '',
|
||||
isFetchingMetadatumChildTerms: false,
|
||||
isBuildingChildrenChart: false,
|
||||
childrenChartSeries: [],
|
||||
childrenChartOptions: {},
|
||||
maxChildTermsToDisplay: 56,
|
||||
childTermsDisplayedPage: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('report', {
|
||||
metadataList: 'getMetadataList',
|
||||
taxonomyChildTerms: 'getTaxonomyChildTerms',
|
||||
stackedBarChartOptions: 'getStackedBarChartOptions',
|
||||
reportsLatestCachedOn: 'getReportsLatestCachedOn'
|
||||
}),
|
||||
metadataListArray() {
|
||||
return this.metadataList && Array.isArray(this.metadataList) ? this.metadataList : [];
|
||||
},
|
||||
metadatumTermsLatestCachedOn() {
|
||||
return this.reportsLatestCachedOn['taxonomy-terms-' + (this.collectionId ? this.collectionId : 'default') + '-' + this.selectedMetadatum.id];
|
||||
},
|
||||
currentTotalTerms() {
|
||||
return Array.isArray(this.chartData) ? this.chartData.length : 0
|
||||
},
|
||||
currentTotalChildTerms() {
|
||||
return Array.isArray(this.taxonomyChildTerms) ? this.taxonomyChildTerms.length : 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
metadataListArray: {
|
||||
handler() {
|
||||
if (this.metadataListArray && this.metadataListArray.length)
|
||||
this.selectedMetadatum = this.metadataListArray[0];
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
selectedMetadatum: {
|
||||
handler() {
|
||||
this.termsDisplayedPage = 1;
|
||||
if (this.selectedMetadatum && this.selectedMetadatum.id)
|
||||
this.loadMetadatumTerms();
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
termsDisplayedPage() {
|
||||
this.buildMetadatumTermsChart();
|
||||
},
|
||||
maxTermsToDisplay() {
|
||||
this.termsDisplayedPage = 1;
|
||||
this.buildMetadatumTermsChart();
|
||||
},
|
||||
selectedParentTerm() {
|
||||
if (this.selectedParentTerm) {
|
||||
this.loadMetadatumChildTerms();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('report', [
|
||||
'fetchTaxonomyTerms'
|
||||
]),
|
||||
...mapActions('metadata', [
|
||||
'fetchMetadata'
|
||||
]),
|
||||
buildMetadatumTermsChart() {
|
||||
|
||||
this.isBuildingChart = true;
|
||||
|
||||
// Building Taxonomy term usage chart
|
||||
let orderedTerms = JSON.parse(JSON.stringify(this.chartData)).sort((a, b) => b.total_items - a.total_items );
|
||||
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.total_items);
|
||||
termsLabels.push(term.label);
|
||||
});
|
||||
|
||||
this.chartSeries = [
|
||||
{
|
||||
name: this.$i18n.get('label_terms_used'),
|
||||
data: termsValues
|
||||
}
|
||||
];
|
||||
this.chartOptions = {
|
||||
...this.stackedBarChartOptions,
|
||||
...{
|
||||
title: {},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
tickPlacement: 'on',
|
||||
categories: termsLabels,
|
||||
labels: {
|
||||
show: true,
|
||||
trim: true,
|
||||
hideOverlappingLabels: false
|
||||
},
|
||||
tooltip: { enabled: true }
|
||||
},
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: true
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
autoScaleYaxis: true,
|
||||
},
|
||||
events: {
|
||||
dataPointSelection: (event, chartContext, config) => {
|
||||
if (config.dataPointIndex >=0 && orderedTerms[config.dataPointIndex] && orderedTerms[config.dataPointIndex].total_children) {
|
||||
this.selectedParentTerm = orderedTerms[config.dataPointIndex].value;
|
||||
console.log(orderedTerms[config.dataPointIndex])
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: this.$i18n.get('label_number_of_items')
|
||||
}
|
||||
},
|
||||
animations: {
|
||||
enabled: orderedTerms.length <= 40
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => this.isBuildingChart = false, 500);
|
||||
},
|
||||
buildMetadatumChildTermsChart() {
|
||||
|
||||
this.isBuildingChildrenChart = true;
|
||||
|
||||
// Building Taxonomy term usage chart
|
||||
let orderedTerms = JSON.parse(JSON.stringify(this.taxonomyChildTerms)).sort((a, b) => b.total_items - a.total_items );
|
||||
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.total_items);
|
||||
termsLabels.push(term.label);
|
||||
});
|
||||
|
||||
this.childrenChartSeries = [
|
||||
{
|
||||
name: this.$i18n.get('label_terms_used'),
|
||||
data: termsValues
|
||||
}
|
||||
];
|
||||
this.childrenChartOptions = {
|
||||
...this.stackedBarChartOptions,
|
||||
...{
|
||||
title: {},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
tickPlacement: 'on',
|
||||
categories: termsLabels,
|
||||
labels: {
|
||||
show: true,
|
||||
trim: true,
|
||||
hideOverlappingLabels: false
|
||||
},
|
||||
tooltip: { enabled: true }
|
||||
},
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: true
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
autoScaleYaxis: true,
|
||||
},
|
||||
events: {
|
||||
dataPointSelection: (event, chartContext, config) => {
|
||||
if (config.dataPointIndex >= 0 && orderedTerms[config.dataPointIndex] && orderedTerms[config.dataPointIndex].total_children) {
|
||||
this.selectedParentTerm = orderedTerms[config.dataPointIndex].value;
|
||||
console.log(orderedTerms[config.dataPointIndex])
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: this.$i18n.get('label_number_of_items')
|
||||
}
|
||||
},
|
||||
animations: {
|
||||
enabled: orderedTerms.length <= 40
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => this.isBuildingChildrenChart = false, 500);
|
||||
setTimeout(() => console.log(this.childrenChartSeries, this.isBuildingChildrenChart, this.isFetchingMetadatumChildTerms), 1000);
|
||||
},
|
||||
loadMetadatumTerms(force) {
|
||||
this.isFetchingMetadatumTerms = true;
|
||||
|
||||
this.fetchTaxonomyTerms({ taxonomyId: this.selectedMetadatum.id, collectionId: this.collectionId, force: force })
|
||||
.then(() => {
|
||||
this.buildMetadatumTermsChart();
|
||||
this.selectedParentTerm = '';
|
||||
this.isFetchingMetadatumTerms = false;
|
||||
})
|
||||
.catch(() => this.isFetchingMetadatumTerms = false);
|
||||
},
|
||||
loadMetadatumChildTerms(force) {
|
||||
this.isFetchingMetadatumChildTerms = true;
|
||||
|
||||
this.fetchTaxonomyTerms({ taxonomyId: this.selectedMetadatum.id, collectionId: this.collectionId, parentTerm: this.selectedParentTerm, force: force })
|
||||
.then(() => {
|
||||
this.buildMetadatumChildTermsChart();
|
||||
this.isFetchingMetadatumChildTerms = false;
|
||||
})
|
||||
.catch(() => this.isFetchingMetadatumChildTerms = false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -17,6 +17,7 @@ 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 ItemsPerTermCollectionBlock from '../components/items-per-term-collection-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';
|
||||
|
|
@ -49,6 +50,7 @@ Vue.use(Modal);
|
|||
|
||||
Vue.component('number-block', NumberBlock);
|
||||
Vue.component('items-per-term-block', ItemsPerTermBlock);
|
||||
Vue.component('items-per-term-collection-block', ItemsPerTermCollectionBlock);
|
||||
Vue.component('terms-per-taxonomy-block', TermsPerTaxonomyBlock);
|
||||
Vue.component('metadata-types-block', MetadataTypesBlock);
|
||||
Vue.component('metadata-distribution-block', MetadataDistributionBlock);
|
||||
|
|
|
|||
|
|
@ -198,10 +198,15 @@
|
|||
</metadata-distribution-block>
|
||||
|
||||
<items-per-term-block
|
||||
v-if="isRepositoryLevel"
|
||||
class="column is-full"
|
||||
:chart-data="taxonomyTerms"
|
||||
:is-fetching-data="isRepositoryLevel ? isFetchingTaxonomiesList : isFetchingMetadataList"
|
||||
:is-repository-level="isRepositoryLevel"
|
||||
:is-fetching-data="isFetchingTaxonomiesList" />
|
||||
<items-per-term-collection-block
|
||||
v-else
|
||||
class="column is-full"
|
||||
:chart-data="taxonomyTerms"
|
||||
:is-fetching-data="isFetchingMetadataList"
|
||||
:collection-id="selectedCollection" />
|
||||
|
||||
<activities-per-user-block
|
||||
|
|
|
|||
|
|
@ -544,6 +544,8 @@ return apply_filters( 'tainacan-admin-i18n', [
|
|||
'label_number_of_items' => __( 'Number of items', 'tainacan' ),
|
||||
'label_usage_of_terms_per_taxonomy' => __( 'Usage of terms per taxonomy', 'tainacan' ),
|
||||
'label_items_per_term_from_taxonomy' => __( 'Items per term from taxonomy:', 'tainacan' ),
|
||||
'label_items_per_term_from_taxonomy_metadatum' => __( 'Items per term from taxonomy metadatum:', 'tainacan' ),
|
||||
'label_items_per_child_terms_of' => __( 'Items per child terms of:', 'tainacan' ),
|
||||
'label_items_per_collection' => __( 'Items per collection', 'tainacan' ),
|
||||
'label_loading_report' => __( 'Loading report...', 'tainacan' ),
|
||||
'label_metadata_fill_distribution' => __( 'Metadata fill distribution', 'tainacan' ),
|
||||
|
|
@ -552,8 +554,9 @@ return apply_filters( 'tainacan-admin-i18n', [
|
|||
/* translators: To be displayed with the number of Taxonomies not used in the colllection */
|
||||
'label_not_used' => __( 'Not used', 'tainacan' ),
|
||||
/* translators: To be displayed with the number of Taxonomies used in the colllection */
|
||||
'label_used' => __( 'Used', 'tainacan' ),
|
||||
'label_select_a_taxonomy' => __( 'Select a taxonomy', 'tainacan' ),
|
||||
'label_used' => __( 'Used', 'tainacan' ),
|
||||
'label_select_a_taxonomy_metadatum' => __( 'Select a taxonomy metadatum', 'tainacan' ),
|
||||
'label_items_with_this_metadum_value' => __( 'Items with this metadatum value', 'tainacan' ),
|
||||
'label_amount_of_items_per_metadatum_value' => __( 'Amount of items per metadatum value', 'tainacan' ),
|
||||
'label_activities_during_year' => __( 'Activities during the year', 'tainacan' ),
|
||||
|
|
|
|||
Loading…
Reference in New Issue