Fixes char click not working on items per term collection block #794.
This commit is contained in:
mateuswetah
parent
61863ee205
commit
343866c1cc
|
|
@ -144,7 +144,8 @@
|
|||
v-if="!isFetchingData && !isBuildingChart && !isFetchingMetadatumTerms && selectedMetadatum && selectedMetadatum.id"
|
||||
height="380px"
|
||||
:series="chartSeries"
|
||||
:options="chartOptions" />
|
||||
:options="chartOptions"
|
||||
@data-point-selection="handleDataPointClick" />
|
||||
<button
|
||||
v-if=" !isFetchingData && !isFetchingMetadatumTerms && selectedMetadatum"
|
||||
class="button-secondary hide-column-button"
|
||||
|
|
@ -243,7 +244,8 @@
|
|||
v-if="!isBuildingChildrenChart && !isFetchingMetadatumChildTerms"
|
||||
height="380px"
|
||||
:series="childrenChartSeries"
|
||||
:options="childrenChartOptions" />
|
||||
:options="childrenChartOptions"
|
||||
@data-point-selection="handleDataPointClickChildren" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
|
|
@ -333,7 +335,9 @@ export default {
|
|||
maxChildTermsToDisplay: 56,
|
||||
childTermsDisplayedPage: 1,
|
||||
isChildColumnCollapsed: false,
|
||||
itemsPerTermChartMode: 'bar'
|
||||
itemsPerTermChartMode: 'bar',
|
||||
orderedTerms: [],
|
||||
orderedChildTerms: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -416,18 +420,86 @@ export default {
|
|||
'setTaxonomyTerms',
|
||||
'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() {
|
||||
this.isBuildingChart = true;
|
||||
|
||||
// Building Taxonomy term usage chart
|
||||
let orderedTerms = 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);
|
||||
let preOrderedTerms = JSON.parse(JSON.stringify(this.taxonomyTerms)).sort((a, b) => b.total_items - a.total_items );
|
||||
this.orderedTerms = preOrderedTerms.slice((this.termsDisplayedPage - 1) * this.maxTermsToDisplay, ((this.termsDisplayedPage - 1) * this.maxTermsToDisplay) + this.maxTermsToDisplay);
|
||||
|
||||
if (this.itemsPerTermChartMode == 'treemap') {
|
||||
this.chartSeries = [
|
||||
{
|
||||
name: this.$i18n.get('label_items_per_term'),
|
||||
data: orderedTerms.map((aTerm) => { return {
|
||||
data: this.orderedTerms.map((aTerm) => { return {
|
||||
x: aTerm.label,
|
||||
y: aTerm.total_items
|
||||
} })
|
||||
|
|
@ -445,20 +517,7 @@ export default {
|
|||
},
|
||||
zoom: {
|
||||
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: {
|
||||
enabled: true,
|
||||
|
|
@ -473,11 +532,11 @@ export default {
|
|||
tooltip: {
|
||||
custom: ({ dataPointIndex }) => {
|
||||
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">
|
||||
<span>` + this.$i18n.get('label_items_per_term') + `: <strong>` + orderedTerms[dataPointIndex].total_items + `</strong></span>
|
||||
`+ (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.get('label_items_per_term') + `: <strong>` + this.orderedTerms[dataPointIndex].total_items + `</strong></span>
|
||||
`+ (this.orderedTerms[dataPointIndex].total_children
|
||||
? (`<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>`;
|
||||
|
|
@ -493,7 +552,7 @@ export default {
|
|||
let termsValues = [];
|
||||
let termsLabels = [];
|
||||
|
||||
orderedTerms.forEach(term => {
|
||||
this.orderedTerms.forEach(term => {
|
||||
termsValues.push(term.total_items);
|
||||
termsLabels.push(term.label);
|
||||
});
|
||||
|
|
@ -529,33 +588,16 @@ export default {
|
|||
zoom: {
|
||||
enabled: 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: {
|
||||
custom: ({ dataPointIndex }) => {
|
||||
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">
|
||||
<span>` + this.$i18n.get('label_items_per_term') + `: <strong>` + orderedTerms[dataPointIndex].total_items + `</strong></span>
|
||||
`+ (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.get('label_items_per_term') + `: <strong>` + this.orderedTerms[dataPointIndex].total_items + `</strong></span>
|
||||
`+ (this.orderedTerms[dataPointIndex].total_children
|
||||
? (`<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>`;
|
||||
|
|
@ -567,7 +609,7 @@ export default {
|
|||
}
|
||||
},
|
||||
animations: {
|
||||
enabled: orderedTerms.length <= 40
|
||||
enabled: this.orderedTerms.length <= 40
|
||||
},
|
||||
noData: {
|
||||
text: '0 ' + this.$i18n.get('label_items_with_this_metadatum_value')
|
||||
|
|
@ -583,14 +625,14 @@ export default {
|
|||
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 preOrderedTerms = JSON.parse(JSON.stringify(this.taxonomyChildTerms)).sort((a, b) => b.total_items - a.total_items );
|
||||
this.orderedChildTerms = preOrderedTerms.slice((this.termsDisplayedPage - 1) * this.maxTermsToDisplay, ((this.termsDisplayedPage - 1) * this.maxTermsToDisplay) + this.maxTermsToDisplay);
|
||||
|
||||
if (this.itemsPerTermChartMode == 'treemap') {
|
||||
this.childrenChartSeries = [
|
||||
{
|
||||
name: this.$i18n.get('label_items_per_term'),
|
||||
data: orderedTerms.map((aTerm) => { return {
|
||||
data: this.orderedChildTerms.map((aTerm) => { return {
|
||||
x: aTerm.label,
|
||||
y: aTerm.total_items
|
||||
} })
|
||||
|
|
@ -608,33 +650,7 @@ export default {
|
|||
},
|
||||
zoom: {
|
||||
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: {
|
||||
enabled: true,
|
||||
|
|
@ -649,11 +665,11 @@ export default {
|
|||
tooltip: {
|
||||
custom: ({ dataPointIndex }) => {
|
||||
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">
|
||||
<span>` + this.$i18n.get('label_items_per_term') + `: <strong>` + orderedTerms[dataPointIndex].total_items + `</strong></span>
|
||||
`+ (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.get('label_items_per_term') + `: <strong>` + this.orderedChildTerms[dataPointIndex].total_items + `</strong></span>
|
||||
`+ (this.orderedChildTerms[dataPointIndex].total_children
|
||||
? (`<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>`;
|
||||
|
|
@ -669,7 +685,7 @@ export default {
|
|||
let termsValues = [];
|
||||
let termsLabels = [];
|
||||
|
||||
orderedTerms.forEach(term => {
|
||||
this.orderedChildTerms.forEach(term => {
|
||||
termsValues.push(term.total_items);
|
||||
termsLabels.push(term.label);
|
||||
});
|
||||
|
|
@ -705,25 +721,7 @@ export default {
|
|||
zoom: {
|
||||
enabled: 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: {
|
||||
title: {
|
||||
|
|
@ -733,18 +731,18 @@ export default {
|
|||
tooltip: {
|
||||
custom: ({ dataPointIndex }) => {
|
||||
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">
|
||||
<span>` + this.$i18n.get('label_items_per_term') + `: <strong>` + orderedTerms[dataPointIndex].total_items + `</strong></span>
|
||||
`+ (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.get('label_items_per_term') + `: <strong>` + this.orderedChildTerms[dataPointIndex].total_items + `</strong></span>
|
||||
`+ (this.orderedChildTerms[dataPointIndex].total_children
|
||||
? (`<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>`;
|
||||
}
|
||||
},
|
||||
animations: {
|
||||
enabled: orderedTerms.length <= 40
|
||||
enabled: this.orderedChildTerms.length <= 40
|
||||
},
|
||||
noData: {
|
||||
text: this.$i18n.get('label_items_with_this_metadatum_value')
|
||||
|
|
|
|||
Loading…
Reference in New Issue