Dashboard 2.0 custom ui-widget creation: how to tell size when auto is specified

General
,
1

I am creating (or attempting to create) a custom D2 ui-widget. I need to know the actual size (eg 4x3). If the user specifies a size then width and height are available in this.props, but if it is configured as auto then these are both 0. Is it possible to determine the actual size, or at least the width, in which case the height is up to me I suppose?

I assume that what I need is the group width, this.props has the group id, and in the browser console I see ui-config received and details of all the groups, including the width, but I don't know how to access the ui-config object from my code.

2

This wasn't how I planned on it being used, but there is a store available with the ui-config. To access it, you can do so similarly to how we access the data stores with the messages state. In this case, we can get, from the ui store, the groups store, so:

computed: {
    ...mapState('data', ['messages']),
    ...mapState('ui', ['groups']),
},

Then, you'll be able to access the map of groups anywhere in your vue app with this.groups.

Will ask though, why do you ened to know the group width? If for styling pruposes, CSS should be able to handle that for you with %-based styling?

3

Actually, I have just realised that I don't need the width. I thought I needed the ui-node width (which I think is the group width when auto is specified. I am displaying some svg in the node and have to adjust it to fit the aspect ratio of the node. My calcs for aspect ratio was failing, obviously, when the size came in a 0 (or sometimes null), so I thought I needed the group width, but actually I just want an aspect ratio of 1:1 in that case, and don't need to do the calcs at all.

Sorry to have wasted your time.

4

Hi @Colin,
Like Joe mentioned the %-syntax is normally sufficient.

Just adding something here for completeness (for edge cases). In the heatmap node I also use all available space:

<template>
    <div ref="heatmap_container" :class="className" style="border:1px solid black;width:100%; height:100%;" />
</template>

But the library that I am using requires me to draw on specific coordinates. Which I don't know in advance. To make a long story short, I re-calculate the coordinates based on the actual width of my widget inside the dashboard:

this.cellWidth  = this.$refs.heatmap_container.clientWidth / (parseInt(this.props.columns));
this.cellHeight = this.$refs.heatmap_container.clientHeight / (parseInt(this.props.rows));

Note that I call this code in the mount event, which means it is only correct at the start. But not if the width changes. Need to fix that some time, if I ever get to it...

5

OK, thanks. That could be useful to know. In fact all I need is the aspect ratio, so if the user sets the size to auto I can make the widget square, which is fine.

1 Like
6

I was previously trying to track the size changes for my experiment using a ResizeObserver until i found the css that worked instead. This might work for you.

const resizeObserver = new ResizeObserver((entries) => {
    console.log(entries);
});

resizeObserver.observe(theHtmlElement);
1 Like
7

No time wasted at all Colin