tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes char click not working on items per term collection block #794.

This commit is contained in:
mateuswetah 2024-02-22 11:53:35 -03:00
parent 61863ee205
commit 343866c1cc
1 changed files with 105 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
src/views/reports/components/items-per-term-collection-block.vue
View File

@ -144,7 +144,8 @@
v-if="!isFetchingData && !isBuildingChart && !isFetchingMetadatumTerms && selectedMetadatum && selectedMetadatum.id" v-if="!isFetchingData && !isBuildingChart && !isFetchingMetadatumTerms && selectedMetadatum && selectedMetadatum.id"
height="380px" height="380px"
:series="chartSeries" :series="chartSeries"
:options="chartOptions" /> :options="chartOptions"
@data-point-selection="handleDataPointClick" />
<button <button
v-if=" !isFetchingData && !isFetchingMetadatumTerms && selectedMetadatum" v-if=" !isFetchingData && !isFetchingMetadatumTerms && selectedMetadatum"
class="button-secondary hide-column-button" class="button-secondary hide-column-button"
@ -243,7 +244,8 @@
v-if="!isBuildingChildrenChart && !isFetchingMetadatumChildTerms" v-if="!isBuildingChildrenChart && !isFetchingMetadatumChildTerms"
height="380px" height="380px"
:series="childrenChartSeries" :series="childrenChartSeries"
:options="childrenChartOptions" /> :options="childrenChartOptions"
@data-point-selection="handleDataPointClickChildren" />
</div> </div>
<div <div
v-else v-else
@ -333,7 +335,9 @@ export default {
maxChildTermsToDisplay: 56, maxChildTermsToDisplay: 56,
childTermsDisplayedPage: 1, childTermsDisplayedPage: 1,
isChildColumnCollapsed: false, isChildColumnCollapsed: false,
itemsPerTermChartMode: 'bar' itemsPerTermChartMode: 'bar',
orderedTerms: [],
orderedChildTerms: []
} }
}, },
computed: { computed: {
@ -416,18 +420,86 @@ export default {
'setTaxonomyTerms', 'setTaxonomyTerms',
'setReportLatestCachedOn' 'setReportLatestCachedOn'
]), ]),
handleDataPointClick(event, chartContext, config) {
if ( this.itemsPerTermChartMode == 'treemap' ) {
if (config.dataPointIndex >= 0 && this.orderedTerms[config.dataPointIndex]) {
const existingParentTermIndex = this.selectedParentTerm.findIndex((term) => term.id == this.orderedTerms[config.dataPointIndex].value);
if (existingParentTermIndex < 0) {
this.selectedParentTerm.push({
id: this.orderedTerms[config.dataPointIndex].value,
label: this.orderedTerms[config.dataPointIndex].label
})
}
}
} else {
if (config.dataPointIndex >= 0 && this.orderedTerms[config.dataPointIndex]) {
const existingParentTermIndex = this.selectedParentTerm.findIndex((term) => term.id == this.orderedTerms[config.dataPointIndex].value);
if (existingParentTermIndex < 0) {
// Removes siblings from the hierarchy, if existing
if (this.selectedParentTerm.length && (this.selectedParentTerm[this.selectedParentTerm.length - 1].id != this.orderedTerms[config.dataPointIndex].parent) )
this.selectedParentTerm.pop();
this.selectedParentTerm.push({
id: this.orderedTerms[config.dataPointIndex].value,
label: this.orderedTerms[config.dataPointIndex].label
});
}
}
}
},
handleDataPointClickChildren(event, chartContext, config) {
if ( this.itemsPerTermChartMode == 'treemap' ) {
if (config.dataPointIndex >= 0 && this.orderedChildTerms[config.dataPointIndex]) {
const existingParentTermIndex = this.selectedParentTerm.findIndex((term) => term.id == this.orderedChildTerms[config.dataPointIndex].value);
if (existingParentTermIndex < 0) {
// Removes siblings from the hierarchy, if existing
if (this.selectedParentTerm.length && (this.selectedParentTerm[this.selectedParentTerm.length - 1].id != this.orderedChildTerms[config.dataPointIndex].parent) )
this.selectedParentTerm.pop();
const previousMetadatumChildTermsLatestCachedOn = this.metadatumChildTermsLatestCachedOn ? this.metadatumChildTermsLatestCachedOn.replace('-is-child-chart', '') : '';
this.selectedParentTerm.push({
id: this.orderedChildTerms[config.dataPointIndex].value,
label: this.orderedChildTerms[config.dataPointIndex].label
});
this.setTaxonomyTerms(this.taxonomyChildTerms);
this.setReportLatestCachedOn({
report: 'taxonomy-terms-' + (this.collectionId ? this.collectionId : 'default') + '-' + this.selectedMetadatum.id + (this.selectedParentTerm.length > 2 && this.selectedParentTerm[this.selectedParentTerm.length - 2] && this.selectedParentTerm[this.selectedParentTerm.length - 2].id ? '-' + this.selectedParentTerm[this.selectedParentTerm.length - 1].id : ''),
reportLatestCachedOn: previousMetadatumChildTermsLatestCachedOn
});
this.buildMetadatumTermsChart();
}
}
} else {
if (config.dataPointIndex >= 0 && this.orderedChildTerms[config.dataPointIndex]) {
const previousMetadatumChildTermsLatestCachedOn = this.metadatumChildTermsLatestCachedOn ? this.metadatumChildTermsLatestCachedOn.replace('-is-child-chart', '') : '';
this.selectedParentTerm.push({
id: this.orderedChildTerms[config.dataPointIndex].value,
label: this.orderedChildTerms[config.dataPointIndex].label
});
this.setTaxonomyTerms(this.taxonomyChildTerms);
this.setReportLatestCachedOn({
report: 'taxonomy-terms-' + (this.collectionId ? this.collectionId : 'default') + '-' + this.selectedMetadatum.id + (this.selectedParentTerm.length > 2 && this.selectedParentTerm[this.selectedParentTerm.length - 2] && this.selectedParentTerm[this.selectedParentTerm.length - 2].id ? '-' + this.selectedParentTerm[this.selectedParentTerm.length - 1].id : ''),
reportLatestCachedOn: previousMetadatumChildTermsLatestCachedOn
});
this.buildMetadatumTermsChart();
}
}
},
buildMetadatumTermsChart() { buildMetadatumTermsChart() {
this.isBuildingChart = true; this.isBuildingChart = true;
// Building Taxonomy term usage chart // Building Taxonomy term usage chart
let orderedTerms = JSON.parse(JSON.stringify(this.taxonomyTerms)).sort((a, b) => b.total_items - a.total_items ); let preOrderedTerms = JSON.parse(JSON.stringify(this.taxonomyTerms)).sort((a, b) => b.total_items - a.total_items );
orderedTerms = orderedTerms.slice((this.termsDisplayedPage - 1) * this.maxTermsToDisplay, ((this.termsDisplayedPage - 1) * this.maxTermsToDisplay) + this.maxTermsToDisplay); this.orderedTerms = preOrderedTerms.slice((this.termsDisplayedPage - 1) * this.maxTermsToDisplay, ((this.termsDisplayedPage - 1) * this.maxTermsToDisplay) + this.maxTermsToDisplay);
if (this.itemsPerTermChartMode == 'treemap') { if (this.itemsPerTermChartMode == 'treemap') {
this.chartSeries = [ this.chartSeries = [
{ {
name: this.$i18n.get('label_items_per_term'), name: this.$i18n.get('label_items_per_term'),
data: orderedTerms.map((aTerm) => { return { data: this.orderedTerms.map((aTerm) => { return {
x: aTerm.label, x: aTerm.label,
y: aTerm.total_items y: aTerm.total_items
} }) } })
@ -445,20 +517,7 @@ export default {
}, },
zoom: { zoom: {
enabled: false enabled: false
},
events: {
dataPointSelection: (event, chartContext, config) => {
if (config.dataPointIndex >= 0 && orderedTerms[config.dataPointIndex]) {
const existingParentTermIndex = this.selectedParentTerm.findIndex((term) => term.id == orderedTerms[config.dataPointIndex].value);
if (existingParentTermIndex < 0) {
this.selectedParentTerm.push({
id: orderedTerms[config.dataPointIndex].value,
label: orderedTerms[config.dataPointIndex].label
})
} }
}
}
},
}, },
dataLabels: { dataLabels: {
enabled: true, enabled: true,
@ -473,11 +532,11 @@ export default {
tooltip: { tooltip: {
custom: ({ dataPointIndex }) => { custom: ({ dataPointIndex }) => {
return `<div class="tainacan-custom-tooltip"> return `<div class="tainacan-custom-tooltip">
<div class="tainacan-custom-tooltip__header">` + orderedTerms[dataPointIndex].label + `</div> <div class="tainacan-custom-tooltip__header">` + this.orderedTerms[dataPointIndex].label + `</div>
<div class="tainacan-custom-tooltip__body"> <div class="tainacan-custom-tooltip__body">
<span>` + this.$i18n.get('label_items_per_term') + `: <strong>` + orderedTerms[dataPointIndex].total_items + `</strong></span> <span>` + this.$i18n.get('label_items_per_term') + `: <strong>` + this.orderedTerms[dataPointIndex].total_items + `</strong></span>
`+ (orderedTerms[dataPointIndex].total_children `+ (this.orderedTerms[dataPointIndex].total_children
? (`<span>` + this.$i18n.getWithVariables(orderedTerms[dataPointIndex].total_children > 1 ? 'instruction_click_to_see_%s_child_terms' : 'instruction_click_to_see_%s_child_term', [ orderedTerms[dataPointIndex].total_children ]) + `</span>`) ? (`<span>` + this.$i18n.getWithVariables(this.orderedTerms[dataPointIndex].total_children > 1 ? 'instruction_click_to_see_%s_child_terms' : 'instruction_click_to_see_%s_child_term', [ this.orderedTerms[dataPointIndex].total_children ]) + `</span>`)
: `` : ``
) + ) +
`</div></div>`; `</div></div>`;
@ -493,7 +552,7 @@ export default {
let termsValues = []; let termsValues = [];
let termsLabels = []; let termsLabels = [];
orderedTerms.forEach(term => { this.orderedTerms.forEach(term => {
termsValues.push(term.total_items); termsValues.push(term.total_items);
termsLabels.push(term.label); termsLabels.push(term.label);
}); });
@ -529,33 +588,16 @@ export default {
zoom: { zoom: {
enabled: true, enabled: true,
autoScaleYaxis: true, autoScaleYaxis: true,
},
events: {
dataPointSelection: (event, chartContext, config) => {
if (config.dataPointIndex >= 0 && orderedTerms[config.dataPointIndex]) {
const existingParentTermIndex = this.selectedParentTerm.findIndex((term) => term.id == orderedTerms[config.dataPointIndex].value);
if (existingParentTermIndex < 0) {
// Removes siblings from the hierarchy, if existing
if (this.selectedParentTerm.length && (this.selectedParentTerm[this.selectedParentTerm.length - 1].id != orderedTerms[config.dataPointIndex].parent) )
this.selectedParentTerm.pop();
this.selectedParentTerm.push({
id: orderedTerms[config.dataPointIndex].value,
label: orderedTerms[config.dataPointIndex].label
});
} }
}
}
},
}, },
tooltip: { tooltip: {
custom: ({ dataPointIndex }) => { custom: ({ dataPointIndex }) => {
return `<div class="tainacan-custom-tooltip"> return `<div class="tainacan-custom-tooltip">
<div class="tainacan-custom-tooltip__header">` + orderedTerms[dataPointIndex].label + `</div> <div class="tainacan-custom-tooltip__header">` + this.orderedTerms[dataPointIndex].label + `</div>
<div class="tainacan-custom-tooltip__body"> <div class="tainacan-custom-tooltip__body">
<span>` + this.$i18n.get('label_items_per_term') + `: <strong>` + orderedTerms[dataPointIndex].total_items + `</strong></span> <span>` + this.$i18n.get('label_items_per_term') + `: <strong>` + this.orderedTerms[dataPointIndex].total_items + `</strong></span>
`+ (orderedTerms[dataPointIndex].total_children `+ (this.orderedTerms[dataPointIndex].total_children
? (`<span>` + this.$i18n.getWithVariables(orderedTerms[dataPointIndex].total_children > 1 ? 'instruction_click_to_see_%s_child_terms' : 'instruction_click_to_see_%s_child_term', [ orderedTerms[dataPointIndex].total_children ]) + `</span>`) ? (`<span>` + this.$i18n.getWithVariables(this.orderedTerms[dataPointIndex].total_children > 1 ? 'instruction_click_to_see_%s_child_terms' : 'instruction_click_to_see_%s_child_term', [ this.orderedTerms[dataPointIndex].total_children ]) + `</span>`)
: `` : ``
) + ) +
`</div></div>`; `</div></div>`;
@ -567,7 +609,7 @@ export default {
} }
}, },
animations: { animations: {
enabled: orderedTerms.length <= 40 enabled: this.orderedTerms.length <= 40
}, },
noData: { noData: {
text: '0 ' + this.$i18n.get('label_items_with_this_metadatum_value') text: '0 ' + this.$i18n.get('label_items_with_this_metadatum_value')
@ -583,14 +625,14 @@ export default {
this.isBuildingChildrenChart = true; this.isBuildingChildrenChart = true;
// Building Taxonomy term usage chart // Building Taxonomy term usage chart
let orderedTerms = JSON.parse(JSON.stringify(this.taxonomyChildTerms)).sort((a, b) => b.total_items - a.total_items ); let preOrderedTerms = 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); this.orderedChildTerms = preOrderedTerms.slice((this.termsDisplayedPage - 1) * this.maxTermsToDisplay, ((this.termsDisplayedPage - 1) * this.maxTermsToDisplay) + this.maxTermsToDisplay);
if (this.itemsPerTermChartMode == 'treemap') { if (this.itemsPerTermChartMode == 'treemap') {
this.childrenChartSeries = [ this.childrenChartSeries = [
{ {
name: this.$i18n.get('label_items_per_term'), name: this.$i18n.get('label_items_per_term'),
data: orderedTerms.map((aTerm) => { return { data: this.orderedChildTerms.map((aTerm) => { return {
x: aTerm.label, x: aTerm.label,
y: aTerm.total_items y: aTerm.total_items
} }) } })
@ -608,33 +650,7 @@ export default {
}, },
zoom: { zoom: {
enabled: false enabled: false
},
events: {
dataPointSelection: (event, chartContext, config) => {
if (config.dataPointIndex >= 0 && orderedTerms[config.dataPointIndex]) {
const existingParentTermIndex = this.selectedParentTerm.findIndex((term) => term.id == orderedTerms[config.dataPointIndex].value);
if (existingParentTermIndex < 0) {
// Removes siblings from the hierarchy, if existing
if (this.selectedParentTerm.length && (this.selectedParentTerm[this.selectedParentTerm.length - 1].id != orderedTerms[config.dataPointIndex].parent) )
this.selectedParentTerm.pop();
const previousMetadatumChildTermsLatestCachedOn = this.metadatumChildTermsLatestCachedOn ? this.metadatumChildTermsLatestCachedOn.replace('-is-child-chart', '') : '';
this.selectedParentTerm.push({
id: orderedTerms[config.dataPointIndex].value,
label: orderedTerms[config.dataPointIndex].label
});
this.setTaxonomyTerms(this.taxonomyChildTerms);
this.setReportLatestCachedOn({
report: 'taxonomy-terms-' + (this.collectionId ? this.collectionId : 'default') + '-' + this.selectedMetadatum.id + (this.selectedParentTerm.length > 2 && this.selectedParentTerm[this.selectedParentTerm.length - 2] && this.selectedParentTerm[this.selectedParentTerm.length - 2].id ? '-' + this.selectedParentTerm[this.selectedParentTerm.length - 1].id : ''),
reportLatestCachedOn: previousMetadatumChildTermsLatestCachedOn
});
this.buildMetadatumTermsChart();
} }
}
}
},
}, },
dataLabels: { dataLabels: {
enabled: true, enabled: true,
@ -649,11 +665,11 @@ export default {
tooltip: { tooltip: {
custom: ({ dataPointIndex }) => { custom: ({ dataPointIndex }) => {
return `<div class="tainacan-custom-tooltip"> return `<div class="tainacan-custom-tooltip">
<div class="tainacan-custom-tooltip__header">` + orderedTerms[dataPointIndex].label + `</div> <div class="tainacan-custom-tooltip__header">` + this.orderedChildTerms[dataPointIndex].label + `</div>
<div class="tainacan-custom-tooltip__body"> <div class="tainacan-custom-tooltip__body">
<span>` + this.$i18n.get('label_items_per_term') + `: <strong>` + orderedTerms[dataPointIndex].total_items + `</strong></span> <span>` + this.$i18n.get('label_items_per_term') + `: <strong>` + this.orderedChildTerms[dataPointIndex].total_items + `</strong></span>
`+ (orderedTerms[dataPointIndex].total_children `+ (this.orderedChildTerms[dataPointIndex].total_children
? (`<span>` + this.$i18n.getWithVariables(orderedTerms[dataPointIndex].total_children > 1 ? 'instruction_click_to_see_%s_child_terms' : 'instruction_click_to_see_%s_child_term', [ orderedTerms[dataPointIndex].total_children ]) + `</span>`) ? (`<span>` + this.$i18n.getWithVariables(this.orderedChildTerms[dataPointIndex].total_children > 1 ? 'instruction_click_to_see_%s_child_terms' : 'instruction_click_to_see_%s_child_term', [ this.orderedChildTerms[dataPointIndex].total_children ]) + `</span>`)
: `` : ``
) + ) +
`</div></div>`; `</div></div>`;
@ -669,7 +685,7 @@ export default {
let termsValues = []; let termsValues = [];
let termsLabels = []; let termsLabels = [];
orderedTerms.forEach(term => { this.orderedChildTerms.forEach(term => {
termsValues.push(term.total_items); termsValues.push(term.total_items);
termsLabels.push(term.label); termsLabels.push(term.label);
}); });
@ -705,25 +721,7 @@ export default {
zoom: { zoom: {
enabled: true, enabled: true,
autoScaleYaxis: true, autoScaleYaxis: true,
},
events: {
dataPointSelection: (event, chartContext, config) => {
if (config.dataPointIndex >= 0 && orderedTerms[config.dataPointIndex]) {
const previousMetadatumChildTermsLatestCachedOn = this.metadatumChildTermsLatestCachedOn ? this.metadatumChildTermsLatestCachedOn.replace('-is-child-chart', '') : '';
this.selectedParentTerm.push({
id: orderedTerms[config.dataPointIndex].value,
label: orderedTerms[config.dataPointIndex].label
});
this.setTaxonomyTerms(this.taxonomyChildTerms);
this.setReportLatestCachedOn({
report: 'taxonomy-terms-' + (this.collectionId ? this.collectionId : 'default') + '-' + this.selectedMetadatum.id + (this.selectedParentTerm.length > 2 && this.selectedParentTerm[this.selectedParentTerm.length - 2] && this.selectedParentTerm[this.selectedParentTerm.length - 2].id ? '-' + this.selectedParentTerm[this.selectedParentTerm.length - 1].id : ''),
reportLatestCachedOn: previousMetadatumChildTermsLatestCachedOn
});
this.buildMetadatumTermsChart();
} }
}
},
}, },
yaxis: { yaxis: {
title: { title: {
@ -733,18 +731,18 @@ export default {
tooltip: { tooltip: {
custom: ({ dataPointIndex }) => { custom: ({ dataPointIndex }) => {
return `<div class="tainacan-custom-tooltip"> return `<div class="tainacan-custom-tooltip">
<div class="tainacan-custom-tooltip__header">` + orderedTerms[dataPointIndex].label + `</div> <div class="tainacan-custom-tooltip__header">` + this.orderedChildTerms[dataPointIndex].label + `</div>
<div class="tainacan-custom-tooltip__body"> <div class="tainacan-custom-tooltip__body">
<span>` + this.$i18n.get('label_items_per_term') + `: <strong>` + orderedTerms[dataPointIndex].total_items + `</strong></span> <span>` + this.$i18n.get('label_items_per_term') + `: <strong>` + this.orderedChildTerms[dataPointIndex].total_items + `</strong></span>
`+ (orderedTerms[dataPointIndex].total_children `+ (this.orderedChildTerms[dataPointIndex].total_children
? (`<span>` + this.$i18n.getWithVariables(orderedTerms[dataPointIndex].total_children > 1 ? 'instruction_click_to_see_%s_child_terms' : 'instruction_click_to_see_%s_child_term', [ orderedTerms[dataPointIndex].total_children ]) + `</span>`) ? (`<span>` + this.$i18n.getWithVariables(this.orderedChildTerms[dataPointIndex].total_children > 1 ? 'instruction_click_to_see_%s_child_terms' : 'instruction_click_to_see_%s_child_term', [ this.orderedChildTerms[dataPointIndex].total_children ]) + `</span>`)
: `` : ``
) + ) +
`</div></div>`; `</div></div>`;
} }
}, },
animations: { animations: {
enabled: orderedTerms.length <= 40 enabled: this.orderedChildTerms.length <= 40
}, },
noData: { noData: {
text: this.$i18n.get('label_items_with_this_metadatum_value') text: this.$i18n.get('label_items_with_this_metadatum_value')