Design Studio 1.2 SDK - Creating a custom donut component

[Former Member]

While this is not the first component I have created it's proving to be a versatile component that I wanted to share with the community.  If you're using Design Studio 1.3 you now have the ability to use and configure a donut component but for those of us stuck with 1.2 the only option is developing in the SDK.

This particular component took under two days to build, with the bulk of that time spent on the finer details such as positioning the text, sizing the arrow, ....  It's fully configurable for its intended use but additional settings could easily be added if required (ie. text color, "donut-hole" color, shadow, etc...):

Figure 1

As I do with components where it makes sense I also added the following three events:  On Click, On Mouse Over and On Mouse Out:

Figure 2

Linking a donut component to a detailed WebI is simply a matter of adding code to the On Click event, for example.

The display of both the arrow and the "From" value below the donut are triggered by setting the Previous Value.  With a value of "-1" neither are displayed; anything other than will cause both to appear.  It's important to note no data validation is done as I've assumed the dashboard developer will set reasonable percentage values.  The donut will not break if, for example, a value of 200 is used but it will display no differently from using 100.

While the logic to determine the arrow direction and color is not handled within the component it could easily be accomplished.  As it is a developer explicitly sets both the color and direction of the arrow (see Figures 3 & 4 below):

Figure 3

Figure 4

The code is quite simple and I have uploaded the two base files here: https://github.com/davelr/Design-Studio-SDK-Custom-Donut

Having not yet seen the donut in DS 1.3 I would be very curious to know how it compares.  I welcome any feedback you may have.