How to make a graduated panel stretch to full width of the diagram?

GoJS
1

Hello,

I am trying to make a graduated panel extend to the full width of the diagram, which is resized together with the window. I used the thermometer and the rulers examples and I am binding the width of the line to the width of the node and I am updating the width of the node at ViewportBoundsChanged with setDataProperty(node, ‘width’, vb.width).

My node template is this:

$(go.Node, 'Graduated', {
        graduatedTickUnit: 10,
        pickable: false,
        layerName: 'Foreground',
        isInDocumentBounds: false,
        isAnimated: false
    },
    $(go.Shape, { geometryString: 'M0 0 H1000' }, new go.Binding('width')),
    $(go.Shape, { geometryString: 'M0 0 V20', interval: 1 }),
    $(go.TextBlock, {
        font: '10px sans-serif',
        interval: 1,
        alignmentFocus: go.Spot.TopLeft,
        segmentOffset: new go.Point(1, 1),
        graduatedFunction: function(n) {
            const value = new Date(n * 100);

            return new Intl.DateTimeFormat(navigator.language, {
                    year: 'numeric',
                    month: 'numeric',
                    day: 'numeric'}).format(value)
                + '\n'
                + new Intl.DateTimeFormat(navigator.language, {
                    hour: 'numeric',
                    minute: 'numeric',
                    second: 'numeric'
                }).format(value);
        }
    })
);

Why does my node stay 1000px wide and doesn’t expand further than that?

Best,
Lucian

2

My guess is that it’s because you specified the Shape.geometry to be a Geometry that is 1000 wide.

Instead, I suggest that you use the “LineH” figure.

$(go.Shape, "LineH", { width: 1000, height: 0 }, new go.Binding("width"))
3

Hi Walter,

Thanks for the quick reply.

The result is still the same with the following changes:

        $(go.Shape, 'LineH', { height: 0, width: 1000 }, new go.Binding('width')),
        $(go.Shape, 'LineV', { height: 20, width: 0, interval: 1 }),

Best,
Lucian

4

I just tried your code, both the unmodified original and with the change I suggested, and they both worked the way I would have expected. When I called:

myDiagram.model.set(theNode, "width", 1800)

the node became about 1800 wide – with a lot more space between the tick marks.

5

There are 2 solutions:

  1. either set the property of node.data instead of node 
diagram.model.set(node.data, 'width', vb.width);
  1. or bind to the GraphObject:
$(go.Shape, 'LineH',
    { height: 0, width: 100 },
    new go.Binding('width', '', part => part.width).ofObject()
)

I chose option 2 since I don’t need to keep this information for other purposes.

6

Normally when one has the size of a shape dependent on the size of its part, that could cause problems because the size of a panel is usually dependent on the size of its elements. But it could work in this case. So is everything OK now?

7

You’re right, it’s better to use node.data, in case the viewport becomes smaller.

Everything is fine now, thanks!