From 8093dc062df7798090d42ad145396fdf5a72c89b Mon Sep 17 00:00:00 2001 From: davelopez <46503462+davelopez@users.noreply.github.com> Date: Fri, 15 Sep 2023 16:49:57 +0200 Subject: [PATCH 1/6] Fix Chart legend not scrollable --- .../Visualizations/Charts/BarChart.vue | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/client/src/components/User/DiskUsage/Visualizations/Charts/BarChart.vue b/client/src/components/User/DiskUsage/Visualizations/Charts/BarChart.vue index 94015c3716ed..d1809d4eb1f8 100644 --- a/client/src/components/User/DiskUsage/Visualizations/Charts/BarChart.vue +++ b/client/src/components/User/DiskUsage/Visualizations/Charts/BarChart.vue @@ -2,7 +2,6 @@ import { BCard } from "bootstrap-vue"; import { computed, onMounted, ref, watch } from "vue"; import * as d3 from "d3"; - import type { DataValuePoint } from "."; interface BarChartProps { @@ -184,6 +183,17 @@ function createLegend() { .attr("fill", "black") .text((d) => props.labelFormatter(d)); + // Set the width of the SVG to the width of the widest entry + let maxWidth = 0; + for (const node of entries.nodes()) { + const width = (node as HTMLElement).getBoundingClientRect().width; + maxWidth = Math.max(maxWidth, width); + } + const svg = container.node()?.closest("svg"); + if (svg) { + svg.setAttribute("width", `${maxWidth}`); + } + return entries; } @@ -294,7 +304,7 @@ function setTooltipPosition(mouseX: number, mouseY: number): void {