Design Studio 1.2 SDK - Creating a custom line component

[Former Member]

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:

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):

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:

Figure 3

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

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:

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:

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:

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:

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):

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: https://github.com/davelr/Design-Studio-SDK-Custom-Line

As before any feedback is appreciated!