Here’s a component I created for a dashboard where the client requested a visual hierarchy of related KPI tiles, showing relationships by connecting lines:

Design Studio SDK - line img1.JPG

Figure 1

While the design does not convey a lot of information and does not make the best use of available space it was exactly what the business requested.  However, with the limited number of components available in DS 1.2 this was not possible to do out-of-the-box so I set out to create the required components, including the line component seen above (I also created the status circle and trend arrow indicators if anyone is interested, but they are straight-forward for the most part):

Design Studio SDK - line img2.JPG

Figure 2

The line is multi-configurable, and can be stretched/reduced as required.  By default the line shifts, or “bends”, mid-point on the canvas from one side to the other.  The Bend Type parameter will allow this bend to occur at the “Top”, “Middle” or “Bottom” as required:

Design Studio SDK - line img4.jpg

Figure 3

The Direction of this “bend” can also be changed, as seen below in Figure 4:

Design Studio SDK - line img3.jpg

Figure 4

With the requirement to show an arrow-head to indicate directional flow I made this an optional parameter.  Since the data flow only went left, right or down I configured the arrow-head to only point in one of these three directions.  To add an “up” arrow-head would be minimal work based on the current code, and in thinking back I should have added it.  One thing to note is both the “Top” and “Middle” Bend Type result in a downward pointing arrow while the “Bottom” Bend Type will point either left or right, depending on the set Direction:

Design Studio SDK - line img5.jpg

Figure 5

One quirk with this bend occurs when an arrow-head is added (and again when removed).  Rather than run along the edge of the canvas the line is “pulled in” to allow for joining the line to the arrow-head at the center:

Design Studio SDK - line img10.jpg

Figure 6

This was a design-decision on my part that I’m still not convinced was the best, as a line with a bend then has a different end-point when the arrow is displayed.  It wouldn’t take much to adjust the code to always have this ending part of the line remain off-set from the edge of the canvas, regardless of the arrow-head being displayed or not.

As the line component is reduced in either the vertical or horizontal direction, the default bend is reduced, and at a certain point (4 times line width is what I chose) it will change to a perfectly straight, canvas-centered, vertical or horizontal line respectfully:

Design Studio SDK - line img6.jpg

Figure 7

And last but not least both the line Color and thickness/weight (Size) can be changed, with a change in line size resulting in a proportional change to the size of the arrow-head:

Design Studio SDK - line img7.jpg

Figure 8

By combining two or more Line components together more complex lines can be displayed (see the red line above in Figure 8 and the last line object in Figure 9 below):

Design Studio SDK - line img8.jpg

Figure 9

It would be simple enough to enhance this Line component, adding diaganal line capabilities for example.

I have uploaded the two base source files here:

As before any feedback is appreciated!

To report this post you need to login first.


You must be Logged on to comment or reply to a post.

Leave a Reply