From d59b75af8d500fbdc87ed9e42071b90459966acd Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 25 Apr 2024 15:20:25 +0200
Subject: [PATCH] plot width depending on html container
---
components/content/ArticleSystemDistributionPlot.vue | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/components/content/ArticleSystemDistributionPlot.vue b/components/content/ArticleSystemDistributionPlot.vue
index 1d38ba8c..908347da 100644
--- a/components/content/ArticleSystemDistributionPlot.vue
+++ b/components/content/ArticleSystemDistributionPlot.vue
@@ -4,6 +4,7 @@ import { computed, toValue, ref, onMounted, watchEffect, unref } from 'vue'
import * as d3 from "d3";
import * as Plot from "@observablehq/plot";
import { useDisplay } from "vuetify";
+import { useElementSize } from '@vueuse/core'
export interface PlotMargin {
marginTop: number,
@@ -14,7 +15,7 @@ export interface PlotMargin {
const margin = ref<PlotMargin>({
marginTop: 50,
- marginRight: 50,
+ marginRight: 20,
marginBottom: 100,
marginLeft: 40
@@ -62,9 +63,11 @@ onMounted(() => {
})
+const plotContainer = ref(null)
const computedWidth = computed(() => {
- const screenWidth = toValue(width) > 1280 ? 1280 : toValue(width)
+ const screenWidth = useElementSize(plotContainer, { width: 500, height: 0 }, { box: 'border-box' }).width.value
+ // const screenWidth = toValue(width) > 1280 ? 1280 : toValue(width)
return Math.max(screenWidth, 550);
});
@@ -225,7 +228,7 @@ async function fetchRefSeqTaxo() {
</v-card-text>
<v-card variant="elevated" elevation="1" :loading="pending">
- <v-card-text>
+ <v-card-text ref="plotContainer">
<v-row no-gutters>
<v-col>
<v-select v-model="selectedTaxoRank" :items="taxoRanks" density="compact"
--
GitLab