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

More adjustments to current charts in separate components. #483.

This commit is contained in:
mateuswetah 2021-03-29 12:05:59 -03:00
parent 135c7c4efc
commit 032b84e2e0
9 changed files with 199 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/admin/js/store/modules/report/index.js
View File

@ -5,23 +5,23 @@ import * as mutations from './mutations';
const state = {
summary: {},
taxonomiesList: {},
colletionsList: {},
collectionsList: {},
taxonomyTerms: {},
metadata: {},
metadataList: {},
activities: {},
stackedBarChartOptions: {
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true,
autoScaleYaxis: true,
}
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true,
autoScaleYaxis: true,
}
},
title: {
text: ''

110
src/views/reports/components/collections-list-block.vue Normal file
View File

@ -0,0 +1,110 @@
<template>
<div class="column is-full">
<apexchart
v-if="!isBuildingCollectionsList && collectionsList && Object.values(collectionsList).length"
height="380px"
class="postbox"
:series="collectionsListChartSeries"
:options="collectionsListChartOptions" />
<div
v-else
style="min-height=380px"
class="skeleton postbox" />
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
data() {
return {
isBuildingCollectionsList: false,
metadataListChartSeries: [],
metadataListChartOptions: {},
}
},
computed: {
...mapGetters('report', {
collectionsList: 'getCollectionsList',
stackedBarChartOptions: 'getStackedBarChartOptions',
}),
},
watch: {
collectionsList: {
handler() {
this.buildCollectionsList();
},
immediate: true
}
},
methods: {
buildCollectionsList() {
this.isBuildingCollectionsList = true;
// Building Collections items chart
const orderedCollections = Object.values(this.collectionsList).sort((a, b) => b.items.total - a.items.total);
let privateItems = [];
let publicItems = [];
let trashItems = [];
let draftItems = [];
let collectionsLabels = [];
orderedCollections.forEach(collection => {
privateItems.push(collection.items.private);
publicItems.push(collection.items.publish);
draftItems.push(collection.items.draft);
trashItems.push(collection.items.trash);
collectionsLabels.push(collection.name);
});
this.collectionsListChartSeries = [
{
name: this.$i18n.get('status_publish'),
data: publicItems
},
{
name: this.$i18n.get('status_private'),
data: privateItems
},
{
name: this.$i18n.get('status_draft'),
data: draftItems
},
{
name: this.$i18n.get('status_trash'),
data: trashItems
}
];
this.collectionsListChartOptions = {
...this.stackedBarChartOptions,
...{
title: {
text: this.$i18n.get('label_items_per_collection')
},
xaxis: {
type: 'category',
tickPlacement: 'on',
categories: collectionsLabels,
labels: {
show: true,
trim: true,
hideOverlappingLabels: false
},
tooltip: { enabled: true }
},
yaxis: {
title: {
text: this.$i18n.get('items')
}
}
}
}
this.isBuildingCollectionsList = false;
}
}
}
</script>

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

@ -145,10 +145,13 @@ export default {
},
immediate: true
},
selectedTaxonomy() {
this.termsDisplayedPage = 1;
if (this.selectedTaxonomy && this.selectedTaxonomy.id)
this.loadTaxonomyTerms();
selectedTaxonomy: {
handler() {
this.termsDisplayedPage = 1;
if (this.selectedTaxonomy && this.selectedTaxonomy.id)
this.loadTaxonomyTerms();
},
immediate: true
},
termsDisplayedPage() {
this.buildTaxonomyTermsChart();

7
src/views/reports/components/metadata-distribution-block.vue
View File

@ -37,8 +37,11 @@ export default {
})
},
watch: {
metadata() {
this.buildMetadataDistributionChart();
metadata: {
handler() {
this.buildMetadataDistributionChart();
},
immediate: true,
}
},
methods: {

34
src/views/reports/components/metadata-list-block.vue
View File

@ -33,26 +33,56 @@
</template>
<script>
import { mapGetters } from 'vuex';
import { mapActions, mapGetters } from 'vuex';
export default {
data() {
return {
metadataListChartSeries: [],
metadataListChartOptions: {},
isBuildingMetadataListArray: false
isBuildingMetadataListArray: false,
selectedMetadatum: '',
isFetchingMetadataList: false
}
},
computed: {
...mapGetters('report', {
metadata: 'getMetadata',
metadataList: 'getMetadataList',
stackedBarChartOptions: 'getStackedBarChartOptions',
}),
metadataListArray() {
return this.metadata && this.metadata != undefined && this.metadata.distribution ? Object.values(this.metadata.distribution) : [];
},
},
watch: {
metadataListArray: {
handler() {
this.selectedMetadatum = (this.metadataListArray.length && this.metadataListArray[0].id) ? this.metadataListArray[0].id : '';
},
immediate: true
},
selectedMetadatum: {
handler() {
if (this.selectedMetadatum)
this.loadMetadataList();
},
immediate: true
}
},
methods: {
...mapActions('report', [
'fetchMetadataList'
]),
loadMetadataList() {
this.isFetchingMetadataList = true;
this.fetchMetadataList({ collectionId: this.collectionId, metadatumId: this.selectedMetadatum })
.then(() => {
this.buildMetadataListChart();
this.isFetchingMetadataList = false;
})
.catch(() => this.isFetchingMetadataList = false);
},
buildMetadataListChart() {
this.isBuildingMetadataListArray = true;

11
src/views/reports/components/metadata-types-block.vue
View File

@ -47,7 +47,7 @@ export default {
isBuildingMetadataTypeChart: false,
metadataTypeChartMode: 'bar',
metadataTypeChartSeries: [],
metadataTypeChartOptions: {},
metadataTypeChartOptions: {}
}
},
computed: {
@ -61,13 +61,16 @@ export default {
metadataTypeChartMode() {
this.buildMetadataTypeChart();
},
metadata() {
this.buildMetadataTypeChart();
metadata: {
handler() {
this.buildMetadataTypeChart();
},
immediate: true
}
},
methods: {
buildMetadataTypeChart() {
this.isBuildingMetadataTypeChart = true;
// Building Metadata Type Donut Chart

12
src/views/reports/components/number-block.vue
View File

@ -15,7 +15,7 @@
&nbsp;{{ $i18n.get(entityType) }}
</p>
<p
v-if="summary.totals && entityType == 'taxonomies'"
v-if="summary.totals && summary.totals[entityType] && entityType == 'taxonomies'"
class="subtitle is-6">
{{ $i18n.get('label_used') + ': ' + summary.totals[entityType].used + ' | ' + $i18n.get('label_not_used') + ': ' + summary.totals[entityType].not_used }}
</p>
@ -58,14 +58,14 @@ export default {
},
computed: {
total() {
return this.summary && this.summary.totals && this.summary.totals[this.entityType] ? this.summary.totals[this.entityType].total : 0;
return this.summary && this.summary.totals && this.summary.totals[this.entityType] && this.summary.totals[this.entityType].total ? this.summary.totals[this.entityType].total : 0;
},
totalByStatus() {
return {
'publish': this.summary && this.summary.totals && this.summary.totals[this.entityType] ? this.summary.totals[this.entityType].publish : 0,
'private': this.summary && this.summary.totals && this.summary.totals[this.entityType] ? this.summary.totals[this.entityType].private : 0,
'draft': this.summary && this.summary.totals && this.summary.totals[this.entityType] ? this.summary.totals[this.entityType].draft : 0,
'trash': this.summary && this.summary.totals && this.summary.totals[this.entityType] ? this.summary.totals[this.entityType].trash : 0
'publish': this.summary && this.summary.totals && this.summary.totals[this.entityType] && this.summary.totals[this.entityType].publish ? this.summary.totals[this.entityType].publish : 0,
'private': this.summary && this.summary.totals && this.summary.totals[this.entityType] && this.summary.totals[this.entityType].private ? this.summary.totals[this.entityType].private : 0,
'draft': this.summary && this.summary.totals && this.summary.totals[this.entityType] && this.summary.totals[this.entityType].draft ? this.summary.totals[this.entityType].draft : 0,
'trash': this.summary && this.summary.totals && this.summary.totals[this.entityType] && this.summary.totals[this.entityType].trash ? this.summary.totals[this.entityType].trash : 0
}
}
}

2
src/views/reports/js/reports-main.js
View File

@ -21,6 +21,7 @@ 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';
import CollectionsListBlock from '../components/collections-list-block.vue';
Vue.use(VueApexCharts)
@ -47,6 +48,7 @@ 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('collections-list-block', CollectionsListBlock);
Vue.component('apexchart', VueApexCharts);
// Changing title of pages

133
src/views/reports/pages/reports-list.vue
View File

@ -18,10 +18,10 @@
</select>
<div class="columns is-multiline">
<div
:class="{ 'is-three-fifths-desktop': selectedCollection && selectedCollection != 'default' }"
:class="{ 'is-three-fifths-desktop': !isRepositoryLevel }"
class="column is-full columns is-multiline">
<div
v-if="!selectedCollection || selectedCollection == 'default'"
v-if="isRepositoryLevel"
class="column is-full is-one-third-tablet has-text-centered">
<number-block
:class="{ 'skeleton': isFetchingSummary }"
@ -30,7 +30,7 @@
entity-type="collections" />
</div>
<div
:class="{ 'is-one-third-tablet': !selectedCollection || selectedCollection == 'default' }"
:class="{ 'is-one-third-tablet': isRepositoryLevel }"
class="column is-full is-half-tablet has-text-centered">
<number-block
:class="{ 'skeleton': isFetchingSummary }"
@ -39,9 +39,9 @@
entity-type="items"/>
</div>
<div
v-if="!selectedCollection || selectedCollection == 'default'"
v-if="isRepositoryLevel"
class="column is-full is-one-third-tablet has-text-centered">
<number-block
<number-block
:class="{ 'skeleton': isFetchingSummary }"
class="postbox"
:summary="summary"
@ -50,42 +50,30 @@
<div
v-else
class="column is-full is-half-tablet has-text-centered">
<number-block
<number-block
:class="{ 'skeleton': isFetchingMetadata }"
class="postbox"
:summary="metadata"
entity-type="metadata" />
</div>
<div
v-if="!selectedCollection || selectedCollection == 'default'"
class="column is-full">
<apexchart
v-if="!isFetchingCollectionsList"
height="380px"
class="postbox"
:series="collectionsListChartSeries"
:options="collectionsListChartOptions" />
<div
v-else
style="min-height=380px"
class="skeleton postbox" />
</div>
<collections-list-block
v-if="isRepositoryLevel" />
<terms-per-taxonomy-block
v-if="!selectedCollection || selectedCollection == 'default'"/>
v-if="isRepositoryLevel"/>
<items-per-term-block
v-if="!selectedCollection || selectedCollection == 'default'" />
v-if="isRepositoryLevel" />
<metadata-types-block
v-if="selectedCollection && selectedCollection != 'default'" />
v-if="!isRepositoryLevel" />
</div>
<metadata-distribution-block
v-if="selectedCollection && selectedCollection != 'default'"/>
v-if="!isRepositoryLevel"/>
</div>
<div class="columns">
<metadata-list-block
v-if="selectedCollection && selectedCollection != 'default'" />
v-if="!isRepositoryLevel" />
</div>
</div>
</template>
@ -98,15 +86,11 @@ export default {
data() {
return {
selectedCollection: 'default',
selectedMetadatum: '',
isFetchingCollections: false,
isFetchingSummary: false,
isFetchingCollectionsList: false,
isFetchingMetadata: false,
isFetchingMetadataList: false,
isFetchingActivities: false,
metadataListChartSeries: [],
metadataListChartOptions: {},
activitiesChartSeries: [],
activitiesChartOptions: {}
}
@ -118,15 +102,12 @@ export default {
...mapGetters('report', {
summary: 'getSummary',
metadata: 'getMetadata',
metadataList: 'getMetadataList',
collectionsList: 'getCollectionsList',
activities: 'getActivities',
stackedBarChartOptions: 'getStackedBarChartOptions',
//heatMapChartOptions: 'getHeatMapChartOptions'
}),
metadataListArray() {
return this.metadata && this.metadata != undefined && this.metadata.distribution ? Object.values(this.metadata.distribution) : [];
},
isRepositoryLevel() {
return !this.selectedCollection || this.selectedCollection == 'default';
}
},
watch: {
'$route.query': {
@ -141,10 +122,6 @@ export default {
},
immediate: true
},
selectedMetadatum() {
if (this.selectedMetadatum && this.selectedMetadatum != '')
this.loadMetadataList();
}
},
created() {
@ -162,7 +139,6 @@ export default {
'fetchSummary',
'fetchCollectionsList',
'fetchMetadata',
'fetchMetadataList',
'fetchActivities'
]),
loadCollections() {
@ -180,88 +156,15 @@ export default {
loadMetadata() {
this.isFetchingMetadata = true;
this.fetchMetadata({ collectionId: this.selectedCollection })
.then(() => {
this.isFetchingMetadata = false;
})
.then(() => this.isFetchingMetadata = false)
.catch(() => this.isFetchingMetadata = false);
},
loadCollectionsList() {
this.isFetchingCollectionsList = true;
this.fetchCollectionsList()
.then(() => {
// Building Collections items chart
const orderedCollections = Object.values(this.collectionsList).sort((a, b) => b.items.total - a.items.total);
let privateItems = [];
let publicItems = [];
let trashItems = [];
let draftItems = [];
let collectionsLabels = [];
orderedCollections.forEach(collection => {
privateItems.push(collection.items.private);
publicItems.push(collection.items.publish);
draftItems.push(collection.items.draft);
trashItems.push(collection.items.trash);
collectionsLabels.push(collection.name);
});
this.collectionsListChartSeries = [
{
name: this.$i18n.get('status_publish'),
data: publicItems
},
{
name: this.$i18n.get('status_private'),
data: privateItems
},
{
name: this.$i18n.get('status_draft'),
data: draftItems
},
{
name: this.$i18n.get('status_trash'),
data: trashItems
}
];
this.collectionsListChartOptions = {
...this.stackedBarChartOptions,
...{
title: {
text: this.$i18n.get('label_items_per_collection')
},
xaxis: {
type: 'category',
tickPlacement: 'on',
categories: collectionsLabels,
labels: {
show: true,
trim: true,
hideOverlappingLabels: false
},
tooltip: { enabled: true }
},
yaxis: {
title: {
text: this.$i18n.get('items')
}
}
}
}
this.isFetchingCollectionsList = false;
})
.then(() => this.isFetchingCollectionsList = false)
.catch(() => this.isFetchingCollectionsList = false);
},
loadMetadataList() {
this.isFetchingMetadataList = true;
this.fetchMetadataList({ collectionId: this.collectionId, metadatumId: this.selectedMetadatum })
.then(() => {
this.isFetchingMetadataList = false;
})
.catch(() => this.isFetchingMetadataList = false);
},
loadActivities() {
this.isFetchingActivities = true;
this.fetchActivities({ collectionId: this.selectedCollection })