From 5dff8e53e1c1dca705ad4fc10c758b889321524f Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Wed, 3 Apr 2024 16:02:25 +0200
Subject: [PATCH] add left margin for example
---
.../content/ArticleSystemDistributionPlot.vue | 23 +++++++++++++++----
1 file changed, 18 insertions(+), 5 deletions(-)
diff --git a/components/content/ArticleSystemDistributionPlot.vue b/components/content/ArticleSystemDistributionPlot.vue
index 5ad27815..1d872d62 100644
--- a/components/content/ArticleSystemDistributionPlot.vue
+++ b/components/content/ArticleSystemDistributionPlot.vue
@@ -4,10 +4,23 @@ import * as d3 from "d3";
import * as Plot from "@observablehq/plot";
import { useDisplay } from "vuetify";
+export interface PlotMargin {
+ marginTop: number,
+ marginRight: number,
+ marginBottom: number,
+ marginLeft: number
+}
+
+const margin = ref<PlotMargin>({
+ marginTop: 50,
+ marginRight: 50,
+ marginBottom: 100,
+ marginLeft: 40
+
+})
const { width } = useDisplay();
const systemHits = ref(undefined)
const refseqTaxo = ref(undefined)
-const marginRight = ref(50)
const selectedTaxoRank = ref("phylum")
const taxoRanks: Ref<string[]> = ref([
"species",
@@ -86,13 +99,13 @@ const systemStatistics = computed(() => {
})
const distributionOptions = computed(() => {
+ const { marginLeft, marginRight } = toValue(margin)
return {
- marginBottom: 100,
- marginRight: marginRight.value,
+ ...toValue(margin),
y: { label: `% of genomes encoding ${toValue(page)?.title ?? 'the system'}` },
x: { label: selectedTaxoRank.value, tickRotate: 45 },
- color: { scheme: "plasma", legend: true, domain: [0, 100] },
- width: computedWidth.value - marginRight.value,
+ color: { scheme: "plasma", legend: true, domain: [0, 100], marginLeft: 10 },
+ width: computedWidth.value - marginRight - marginLeft,
marks: [
Plot.barY(
toValue(computedDistribution),
--
GitLab