From 44a78cbc7f2de2cc79b9732177499c78b07ab650 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 2 May 2024 11:05:36 +0200
Subject: [PATCH] Set a max width for distribution with little bar
---
.../content/ArticleSystemDistributionPlot.vue | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/components/content/ArticleSystemDistributionPlot.vue b/components/content/ArticleSystemDistributionPlot.vue
index f5baa9e0..6b401539 100644
--- a/components/content/ArticleSystemDistributionPlot.vue
+++ b/components/content/ArticleSystemDistributionPlot.vue
@@ -15,7 +15,7 @@ export interface PlotMargin {
const margin = ref<PlotMargin>({
marginTop: 50,
- marginRight: 20,
+ marginRight: 30,
marginBottom: 100,
marginLeft: 40
@@ -46,9 +46,6 @@ const genomeCountValue = ref<number>(10)
const genomePercentDomain = ref<[number, number]>([0, 100])
const genomePercentValue = ref<[number, number]>([0, 0])
const resetPercent = ref<Fn | null>(null)
-
-
-const axisOptions = ref<string[]>([{ title: "Percentage genomes", value: "percent" }, { title: "Number genomes", value: "size" }])
const plotY = ref<string>("percent")
const plotFill = ref<string>("size")
@@ -63,11 +60,14 @@ onMounted(() => {
const plotContainer = ref(null)
-
+const maxBarWidth = ref<number>(100)
const computedWidth = computed(() => {
+ const { marginLeft, marginRight } = toValue(margin)
+ const filteredDistributionVal = toValue(filteredDistribution)
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);
+ // compare screen width and how many bar I have
+ const totalWidthMax = marginLeft + marginRight + filteredDistributionVal.length * toValue(maxBarWidth)
+ return Math.min(Math.max(screenWidth, 550), totalWidthMax);
});
const computedDistribution = computed(() => {
@@ -138,7 +138,7 @@ const distributionOptions = computed(() => {
marginLeft: 10,
label: toValue(plotFill) === 'percent' ? toValue(plotLabelPercent) : toValue(plotLabelCount),
},
- width: computedWidth.value - marginRight - marginLeft,
+ width: computedWidth.value,
marks: [
Plot.barY(
toValue(filteredDistribution),
--
GitLab