Segmented banner

GoJS
1

HI,

We would like to implement a segmented, colored banner for our nodes. We’re looking for something that looks somewhat like this:

segmented_banner.png1611×916 559 KB

Instead of coloring the whole node’s background, we want to have a banner, which would be a section at the top of each node that would contain a variable number of colored segments. Each segment should also support individual text and tooltip.

Our question is: is it possible to fulfill these requirements without turning the nodes into groups and segments into nodes? Some of our nodes that would need to support a banner are already implemented as groups with placeholders, so it probably wouldn’t be possible to implement banner segments as nodes in this case.

We were thinking about implementing the banner as a shape with a gradient background, but then we don’t see how to support segment-specific text and tooltip.

Do you have any suggestions regarding this?

2

Yes, using a linear gradient Brush seems the most natural thing to do.

What isn’t clear to me is what you mean by having different text for each segment. Your screenshot doesn’t seem to show that, does it? Did you want a string to be shown permanently in each segment?

I think you could use the same tooltip Adornment for the whole area, showing different contents as the position changes. But I haven’t tried that to make sure.

3

You’re right: the picture doesn’t show text for each segment. We do have a requirement for it though. Basically, we need to show a number value in each segment. I can see how your solution outline could work for segment-specific tooltips, but do you have an idea for segment-specific text?

4

OK, then, for generality you’ll need to use separate TextBlocks, in which case you probably don’t want to bother with the multi-color gradient.

So just have a “Table” Panel that binds Panel.itemArray to an array of information about each segment. The Panel.itemTemplate can be something like:

$(go.Panel, "TableColumn",
  new go.Binding("background", "color"),
  $(go.TextBlock, new go.Binding("text", "value"))
)

Set Panel.defaultStretch on the “Table” Panel to be go.GraphObject.Fill.

http://gojs.net/latest/intro/tablePanels.html
http://gojs.net/latest/intro/itemArrays.html

5

Ok thanks, we’ll try that out.