diff --git a/components/content/ArticleSystemDistributionPlot.vue b/components/content/ArticleSystemDistributionPlot.vue index f5baa9e0a5bf8f21272d46d1f74c1576ea29a2d6..6b4015395feff3019550deb301381cbb318a4784 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),