From e7add788446568a2c6bcc2532edd04eef628511c Mon Sep 17 00:00:00 2001
From: Moustafa Banqusli <banqusli@infai.org>
Date: Mon, 25 Oct 2021 18:29:11 +0200
Subject: [PATCH] #373 change diagram for species
---
.../sharedFilter/FilterHistoryDiagrams.ts | 2 +
.../sharedFilter/FilterHistoryDiagrams.vue | 2 +-
app/src/diagramsSchema/Diagrams.schema.ts | 61 +++++++++++++------
3 files changed, 46 insertions(+), 19 deletions(-)
diff --git a/app/src/components/shared/sharedFilter/FilterHistoryDiagrams.ts b/app/src/components/shared/sharedFilter/FilterHistoryDiagrams.ts
index 4a032d17f..bfc802690 100644
--- a/app/src/components/shared/sharedFilter/FilterHistoryDiagrams.ts
+++ b/app/src/components/shared/sharedFilter/FilterHistoryDiagrams.ts
@@ -123,6 +123,8 @@ export default class FilterHistoryDiagrams extends Vue {
const fullName = this.getSpeciesFullName(item.Species);
Object.assign(item, {SpeciesFullName: fullName});
dataWithSpeciesName.push(item);
+ } else {
+ dataWithSpeciesName.push(item);
}
}
return dataWithSpeciesName;
diff --git a/app/src/components/shared/sharedFilter/FilterHistoryDiagrams.vue b/app/src/components/shared/sharedFilter/FilterHistoryDiagrams.vue
index 9b40159b4..380f75b37 100644
--- a/app/src/components/shared/sharedFilter/FilterHistoryDiagrams.vue
+++ b/app/src/components/shared/sharedFilter/FilterHistoryDiagrams.vue
@@ -26,7 +26,7 @@
<FilterHistoryDiagramCard :title="$t('sharedTable.speciesSeparatedTitle')"
:showFailAlert="showFailAlert"
:errorMessage="errorMessage"
- :isScaleDiagram="false"
+ :isScaleDiagram="true"
:spec="countSpeciesBreakdown"/>
<FilterHistoryDiagramCard :title="$t('sharedTable.speciesSummarizedTitle')"
diff --git a/app/src/diagramsSchema/Diagrams.schema.ts b/app/src/diagramsSchema/Diagrams.schema.ts
index 306ede13a..3f949a5b5 100644
--- a/app/src/diagramsSchema/Diagrams.schema.ts
+++ b/app/src/diagramsSchema/Diagrams.schema.ts
@@ -22,7 +22,11 @@ export function getVisitedTransect(data: Array<{}>, i18n: VueI18n) {
scale: {domain: {selection: "brush"}},
axis: {title: i18n.t("sharedTable.date").toString()},
},
- y: {field: "Count", type: "quantitative", axis: {title: i18n.t("sharedTable.numberOfTransectsCommitted").toString()}},
+ y: {
+ field: "Count",
+ type: "quantitative",
+ axis: {title: i18n.t("sharedTable.numberOfTransectsCommitted").toString()},
+ },
tooltip: {field: "Count", type: "quantitative"},
},
}, {
@@ -72,7 +76,11 @@ export function getCreatedInspection(data: Array<{}>, i18n: VueI18n) {
scale: {domain: {selection: "brush"}},
axis: {title: i18n.t("sharedTable.date").toString()},
},
- y: {field: "Count", type: "quantitative", axis: {title: i18n.t("sharedTable.numberOfInspections").toString()}},
+ y: {
+ field: "Count",
+ type: "quantitative",
+ axis: {title: i18n.t("sharedTable.numberOfInspections").toString()},
+ },
tooltip: {field: "Count", type: "quantitative"},
},
}, {
@@ -151,27 +159,44 @@ export function getCountSpecies(data: Array<{}>, i18n: VueI18n) {
export function getCountSpeciesBreakdown(data: Array<{}>, i18n: VueI18n) {
return {
+ width: "container",
data: {
values: data,
},
- mark: "bar",
- encoding: {
- column: {
- field: "End",
- type: "temporal",
- timeUnit: "utcmonthdate",
- header: {title: i18n.t("sharedTable.date").toString(), labelOrient: "bottom"},
+ vconcat: [{
+ width: 1000,
+ mark: {type: "bar", tooltip: true},
+ encoding: {
+ x: {
+ timeUnit: "utcmonthdate", field: "Start", type: "temporal",
+ scale: {domain: {selection: "brush"}},
+ axis: {title: i18n.t("sharedTable.date").toString()},
+ },
+ y: {
+ aggregate: "sum",
+ field: "Count",
+ type: "quantitative",
+ axis: {title: i18n.t("sharedTable.speciesSeparated").toString()},
+ },
+ color: {
+ field: "SpeciesFullName",
+ type: "nominal",
+ legend: {title: i18n.t("sharedTable.species").toString()},
+ },
+ tooltip: {field: "Count", type: "quantitative"},
},
- y: {
- aggregate: "sum",
- type: "quantitative",
- field: "Count",
- axis: {title: i18n.t("sharedTable.speciesSeparated").toString()},
+ }, {
+ width: 1000,
+ height: 60,
+ mark: {type: "bar", tooltip: true},
+ selection: {brush: {type: "interval", encodings: ["x"]}},
+ encoding: {
+ x: {timeUnit: "utcmonthdate", field: "Start", type: "temporal", axis: {title: ""}},
+ y: {aggregate: "sum", field: "Count", type: "quantitative", axis: {title: ""}},
+ color: {field: "SpeciesFullName", type: "nominal", title: ""},
+ tooltip: {field: "Count", type: "quantitative"},
},
- x: {field: "SpeciesFullName", type: "ordinal", axis: null},
- tooltip: {field: "SpeciesFullName", type: "ordinal"},
- },
- config: {view: {stroke: "transparent"}, axis: {domainWidth: 1}},
+ }],
};
}
--
GitLab