Set a max width for distribution with little bar

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),