Continues modular implementation of charts. #483
This commit is contained in:
mateuswetah
parent
beb6bbe7f8
commit
135c7c4efc
|
|
@ -45,12 +45,14 @@ const state = {
|
|||
xaxis: {
|
||||
type: 'category',
|
||||
tickPlacement: 'on',
|
||||
categories: []
|
||||
categories: [],
|
||||
tooltip: { enabled: true }
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
tooltip: { enabled: true }
|
||||
},
|
||||
legend: {
|
||||
position: 'right',
|
||||
|
|
@ -114,9 +116,11 @@ const state = {
|
|||
type: 'category',
|
||||
tickPlacement: 'on',
|
||||
categories: [],
|
||||
tooltip: { enabled: true }
|
||||
},
|
||||
yaxis: {
|
||||
tickPlacement: 'on',
|
||||
tooltip: { enabled: true }
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@ export default {
|
|||
trim: true,
|
||||
hideOverlappingLabels: false
|
||||
},
|
||||
tooltip: true
|
||||
tooltip: { enabled: true }
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<div class="column is-full is-two-fifths-desktop">
|
||||
<div
|
||||
v-if="metadata.totals && metadata.totals.metadata && !isBuildingMetadataDistributionChart"
|
||||
:style="{
|
||||
maxHeight: ((170 + (metadata.totals.metadata.total * 36)) <= 690 ? (170 + (metadata.totals.metadata.total * 36)) : 690) + 'px'
|
||||
}"
|
||||
class="postbox metadata-distribution-box">
|
||||
<apexchart
|
||||
:height="100 + (metadata.totals.metadata.total * 36)"
|
||||
:series="metadataDistributionChartSeries"
|
||||
:options="metadataDistributionChartOptions" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
style="min-height=740px"
|
||||
class="skeleton postbox metadata-distribution-box" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
metadataDistributionChartSeries: [],
|
||||
metadataDistributionChartOptions: {},
|
||||
metadataDistributionChartHeight: 730,
|
||||
isBuildingMetadataDistributionChart: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('report', {
|
||||
metadata: 'getMetadata',
|
||||
horizontalBarChartOptions: 'getHorizontalBarChartOptions',
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
metadata() {
|
||||
this.buildMetadataDistributionChart();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
buildMetadataDistributionChart() {
|
||||
this.isBuildingMetadataDistributionChart = true;
|
||||
|
||||
if (this.metadata.distribution) {
|
||||
// Building Metadata Distribution Bar chart
|
||||
const orderedMetadataDistributions = Object.values(this.metadata.distribution).sort((a, b) => b.fill_percentage - a.fill_percentage );
|
||||
let metadataDistributionValues = [];
|
||||
let metadataDistributionValuesInverted = [];
|
||||
let metadataDistributionLabels = [];
|
||||
const metadataCount = 100 + (this.metadata.totals.metadata.total * 36);
|
||||
|
||||
orderedMetadataDistributions.forEach(metadataDistribution => {
|
||||
metadataDistributionValues.push(parseFloat(metadataDistribution.fill_percentage));
|
||||
metadataDistributionValuesInverted.push(100.0000 - parseFloat(metadataDistribution.fill_percentage).toFixed(4));
|
||||
metadataDistributionLabels.push(metadataDistribution.name);
|
||||
})
|
||||
|
||||
// Sets first metadatum as the selected one
|
||||
if (orderedMetadataDistributions.length)
|
||||
this.selectedMetadatum = orderedMetadataDistributions[0].id;
|
||||
|
||||
this.metadataDistributionChartSeries = [
|
||||
{
|
||||
name: this.$i18n.get('label_filled'),
|
||||
data: metadataDistributionValues
|
||||
},
|
||||
{
|
||||
name: this.$i18n.get('label_not_filled'),
|
||||
data: metadataDistributionValuesInverted
|
||||
}
|
||||
];
|
||||
this.metadataDistributionChartOptions = {
|
||||
...this.horizontalBarChartOptions,
|
||||
...{
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: metadataCount,
|
||||
stacked: true,
|
||||
stackType: '100%',
|
||||
toolbar: {
|
||||
show: true
|
||||
},
|
||||
zoom: {
|
||||
type: 'y',
|
||||
enabled: true,
|
||||
autoScaleYaxis: true,
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: this.$i18n.get('label_metadata_fill_distribution')
|
||||
},
|
||||
labels: metadataDistributionLabels,
|
||||
colors: ['#25a189', '#a23939']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => this.isBuildingMetadataDistributionChart = false, 300);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="metadataList != undefined"
|
||||
class="column is-full">
|
||||
<div
|
||||
style="margin-top: 0px"
|
||||
class="postbox">
|
||||
<label>{{ $i18n.get('label_amount_of_items_per_metadatum_value') }} </label>
|
||||
<select
|
||||
v-if="!isFetchingMetadataList"
|
||||
name="select_metadata"
|
||||
id="select_metadata"
|
||||
:placeholder="$i18n.get('label_select_a_metadatum')"
|
||||
v-model="selectedMetadatum">
|
||||
<option
|
||||
v-for="(metadatum, index) of metadataListArray"
|
||||
:key="index"
|
||||
:value="metadatum.id">
|
||||
{{ metadatum.name }}
|
||||
</option>
|
||||
</select>
|
||||
<apexchart
|
||||
v-if="!isFetchingMetadataList && selectedMetadatum"
|
||||
height="380px"
|
||||
:series="metadataListChartSeries"
|
||||
:options="metadataListChartOptions" />
|
||||
<div
|
||||
v-else
|
||||
style="min-height=380px"
|
||||
class="skeleton postbox" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
metadataListChartSeries: [],
|
||||
metadataListChartOptions: {},
|
||||
isBuildingMetadataListArray: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('report', {
|
||||
metadata: 'getMetadata',
|
||||
metadataList: 'getMetadataList',
|
||||
}),
|
||||
metadataListArray() {
|
||||
return this.metadata && this.metadata != undefined && this.metadata.distribution ? Object.values(this.metadata.distribution) : [];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
buildMetadataListChart() {
|
||||
|
||||
this.isBuildingMetadataListArray = true;
|
||||
|
||||
// Building Metadata term usage chart
|
||||
const orderedMetadata = Object.values(this.metadataList).sort((a, b) => b.total_items - a.total_items);
|
||||
let metadataItemValues = [];
|
||||
let metadataItemLabels = [];
|
||||
|
||||
orderedMetadata.forEach(metadataItem => {
|
||||
metadataItemValues.push(metadataItem.total_items);
|
||||
metadataItemLabels.push(metadataItem.label);
|
||||
});
|
||||
|
||||
this.metadataListChartSeries = [
|
||||
{
|
||||
name: this.$i18n.get('label_items_with_this_metadum_value'),
|
||||
data: metadataItemValues
|
||||
}
|
||||
];
|
||||
|
||||
this.metadataListChartOptions = {
|
||||
...this.stackedBarChartOptions,
|
||||
...{
|
||||
title: {},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
tickPlacement: 'on',
|
||||
categories: metadataItemLabels,
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: this.$i18n.get('label_number_of_items')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => this.isBuildingMetadataListArray = false, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="column is-full">
|
||||
<div
|
||||
v-if="metadata && metadata.totals && !isBuildingMetadataTypeChart"
|
||||
v-if="metadata && metadata.totals && metadata.totals.metadata_per_type && !isBuildingMetadataTypeChart"
|
||||
class="postbox">
|
||||
<label>{{ $i18n.get('metadata_types') }} </label>
|
||||
<div class="graph-mode-switch">
|
||||
|
|
@ -104,7 +104,7 @@ export default {
|
|||
trim: true,
|
||||
hideOverlappingLabels: false
|
||||
},
|
||||
tooltip: true
|
||||
tooltip: { enabled: true }
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export default {
|
|||
trim: true,
|
||||
hideOverlappingLabels: false
|
||||
},
|
||||
tooltip: true
|
||||
tooltip: { enabled: true }
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ 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';
|
||||
import MetadataTypesBlock from '../components/metadata-types-block.vue';
|
||||
import MetadataDistributionBlock from '../components/metadata-distribution-block.vue';
|
||||
import MetadataListBlock from '../components/metadata-list-block.vue';
|
||||
|
||||
Vue.use(VueApexCharts)
|
||||
|
||||
|
|
@ -43,6 +45,8 @@ Vue.component('number-block', NumberBlock);
|
|||
Vue.component('items-per-term-block', ItemsPerTermBlock);
|
||||
Vue.component('terms-per-taxonomy-block', TermsPerTaxonomyBlock);
|
||||
Vue.component('metadata-types-block', MetadataTypesBlock);
|
||||
Vue.component('metadata-distribution-block', MetadataDistributionBlock);
|
||||
Vue.component('metadata-list-block', MetadataListBlock);
|
||||
Vue.component('apexchart', VueApexCharts);
|
||||
|
||||
// Changing title of pages
|
||||
|
|
|
|||
|
|
@ -80,58 +80,12 @@
|
|||
<metadata-types-block
|
||||
v-if="selectedCollection && selectedCollection != 'default'" />
|
||||
</div>
|
||||
<div
|
||||
v-if="selectedCollection && selectedCollection != 'default'"
|
||||
class="column is-full is-two-fifths-desktop">
|
||||
<div
|
||||
v-if="!isFetchingMetadata && metadata.totals && metadata.totals.metadata"
|
||||
:style="{
|
||||
maxHeight: ((170 + (metadata.totals.metadata.total * 36)) <= 690 ? (170 + (metadata.totals.metadata.total * 36)) : 690) + 'px'
|
||||
}"
|
||||
class="postbox metadata-distribution-box">
|
||||
<apexchart
|
||||
:height="100 + (metadata.totals.metadata.total * 36)"
|
||||
:series="metadataDistributionChartSeries"
|
||||
:options="metadataDistributionChartOptions" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
style="min-height=740px"
|
||||
class="skeleton postbox metadata-distribution-box" />
|
||||
</div>
|
||||
<metadata-distribution-block
|
||||
v-if="selectedCollection && selectedCollection != 'default'"/>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div
|
||||
v-if="metadataList != undefined && (selectedCollection && selectedCollection != 'default')"
|
||||
class="column is-full">
|
||||
<div
|
||||
style="margin-top: 0px"
|
||||
class="postbox">
|
||||
<label>{{ $i18n.get('label_amount_of_items_per_metadatum_value') }} </label>
|
||||
<select
|
||||
v-if="!isFetchingMetadataList"
|
||||
name="select_metadata"
|
||||
id="select_metadata"
|
||||
:placeholder="$i18n.get('label_select_a_metadatum')"
|
||||
v-model="selectedMetadatum">
|
||||
<option
|
||||
v-for="(metadatum, index) of metadataListArray"
|
||||
:key="index"
|
||||
:value="metadatum.id">
|
||||
{{ metadatum.name }}
|
||||
</option>
|
||||
</select>
|
||||
<apexchart
|
||||
v-if="!isFetchingMetadataList && selectedMetadatum"
|
||||
height="380px"
|
||||
:series="metadataListChartSeries"
|
||||
:options="metadataListChartOptions" />
|
||||
<div
|
||||
v-else
|
||||
style="min-height=380px"
|
||||
class="skeleton postbox" />
|
||||
</div>
|
||||
</div>
|
||||
<metadata-list-block
|
||||
v-if="selectedCollection && selectedCollection != 'default'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -151,13 +105,8 @@ export default {
|
|||
isFetchingMetadata: false,
|
||||
isFetchingMetadataList: false,
|
||||
isFetchingActivities: false,
|
||||
collectionsListChartSeries: [],
|
||||
collectionsListChartOptions: {},
|
||||
metadataListChartSeries: [],
|
||||
metadataListChartOptions: {},
|
||||
metadataDistributionChartSeries: [],
|
||||
metadataDistributionChartOptions: {},
|
||||
metadataDistributionChartHeight: 730,
|
||||
activitiesChartSeries: [],
|
||||
activitiesChartOptions: {}
|
||||
}
|
||||
|
|
@ -173,7 +122,6 @@ export default {
|
|||
collectionsList: 'getCollectionsList',
|
||||
activities: 'getActivities',
|
||||
stackedBarChartOptions: 'getStackedBarChartOptions',
|
||||
horizontalBarChartOptions: 'getHorizontalBarChartOptions',
|
||||
//heatMapChartOptions: 'getHeatMapChartOptions'
|
||||
}),
|
||||
metadataListArray() {
|
||||
|
|
@ -233,62 +181,6 @@ export default {
|
|||
this.isFetchingMetadata = true;
|
||||
this.fetchMetadata({ collectionId: this.selectedCollection })
|
||||
.then(() => {
|
||||
|
||||
if (this.metadata.distribution) {
|
||||
|
||||
// Building Metadata Distribution Bar chart
|
||||
const orderedMetadataDistributions = Object.values(this.metadata.distribution).sort((a, b) => b.fill_percentage - a.fill_percentage );
|
||||
let metadataDistributionValues = [];
|
||||
let metadataDistributionValuesInverted = [];
|
||||
let metadataDistributionLabels = [];
|
||||
const metadataCount = 100 + (this.metadata.totals.metadata.total * 36);
|
||||
|
||||
orderedMetadataDistributions.forEach(metadataDistribution => {
|
||||
metadataDistributionValues.push(parseFloat(metadataDistribution.fill_percentage));
|
||||
metadataDistributionValuesInverted.push(100.0000 - parseFloat(metadataDistribution.fill_percentage).toFixed(4));
|
||||
metadataDistributionLabels.push(metadataDistribution.name);
|
||||
})
|
||||
|
||||
// Sets first metadatum as the selected one
|
||||
if (orderedMetadataDistributions.length)
|
||||
this.selectedMetadatum = orderedMetadataDistributions[0].id;
|
||||
|
||||
this.metadataDistributionChartSeries = [
|
||||
{
|
||||
name: this.$i18n.get('label_filled'),
|
||||
data: metadataDistributionValues
|
||||
},
|
||||
{
|
||||
name: this.$i18n.get('label_not_filled'),
|
||||
data: metadataDistributionValuesInverted
|
||||
}
|
||||
];
|
||||
this.metadataDistributionChartOptions = {
|
||||
...this.horizontalBarChartOptions,
|
||||
...{
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: metadataCount,
|
||||
stacked: true,
|
||||
stackType: '100%',
|
||||
toolbar: {
|
||||
show: true
|
||||
},
|
||||
zoom: {
|
||||
type: 'y',
|
||||
enabled: true,
|
||||
autoScaleYaxis: true,
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: this.$i18n.get('label_metadata_fill_distribution')
|
||||
},
|
||||
labels: metadataDistributionLabels,
|
||||
colors: ['#25a189', '#a23939']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.isFetchingMetadata = false;
|
||||
})
|
||||
.catch(() => this.isFetchingMetadata = false);
|
||||
|
|
@ -348,7 +240,7 @@ export default {
|
|||
trim: true,
|
||||
hideOverlappingLabels: false
|
||||
},
|
||||
tooltip: true
|
||||
tooltip: { enabled: true }
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
|
|
@ -365,42 +257,7 @@ export default {
|
|||
loadMetadataList() {
|
||||
this.isFetchingMetadataList = true;
|
||||
this.fetchMetadataList({ collectionId: this.collectionId, metadatumId: this.selectedMetadatum })
|
||||
.then(() => {
|
||||
|
||||
// Building Metadata term usage chart
|
||||
const orderedMetadata = Object.values(this.metadataList).sort((a, b) => b.total_items - a.total_items);
|
||||
let metadataItemValues = [];
|
||||
let metadataItemLabels = [];
|
||||
|
||||
orderedMetadata.forEach(metadataItem => {
|
||||
metadataItemValues.push(metadataItem.total_items);
|
||||
metadataItemLabels.push(metadataItem.label);
|
||||
});
|
||||
|
||||
this.metadataListChartSeries = [
|
||||
{
|
||||
name: this.$i18n.get('label_items_with_this_metadum_value'),
|
||||
data: metadataItemValues
|
||||
}
|
||||
];
|
||||
|
||||
this.metadataListChartOptions = {
|
||||
...this.stackedBarChartOptions,
|
||||
...{
|
||||
title: {},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
tickPlacement: 'on',
|
||||
categories: metadataItemLabels,
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: this.$i18n.get('label_number_of_items')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.then(() => {
|
||||
this.isFetchingMetadataList = false;
|
||||
})
|
||||
.catch(() => this.isFetchingMetadataList = false);
|
||||
|
|
|
|||
Loading…
Reference in New Issue