+
@@ -59,7 +59,7 @@
v-model="scalingValue"
:items="enlargementValues"
item-title="label"
- dense
+ density="compact"
hide-details
:disabled="isSvg()"
/>
diff --git a/src/components/visualizations/TreeMap.vue b/src/components/visualizations/TreeMap.vue
index c2672cd..30cdaed 100644
--- a/src/components/visualizations/TreeMap.vue
+++ b/src/components/visualizations/TreeMap.vue
@@ -126,8 +126,18 @@ const initializeVisualisation = () => {
visualization.value.innerHTML = "";
}
+ let width: number = props.width ? props.width : (visualization.value?.clientWidth || 0);
+ if (!props.width) {
+ let currentEl = visualization.value;
+ while (currentEl && currentEl.clientWidth === 0) {
+ // Wait until the visualization has a width
+ currentEl = currentEl.parentElement;
+ }
+ width = currentEl?.clientWidth || 0;
+ }
+
const settings = {
- width: props.width ? props.width : visualization.value?.clientWidth,
+ width: width,
height: props.height - 20,
rerootCallback: d => {
if(visualizationComputed.value) {
@@ -137,6 +147,8 @@ const initializeVisualisation = () => {
getTooltipText: d => tooltipContent(d)
} as TreemapSettings;
+ console.log(JSON.stringify(settings));
+
const treemap = new UnipeptTreemap(
visualization.value as HTMLElement,
props.data.getRoot(),