Design Studio SDK (1.3) - D3 fun making a Progress Bar Set/Bar Chart

[mike_howles4]

New version here:

Design Studio SDK - Progress Bar Set Makeover

ORIGINAL OLD POST FOLLOWS:

Update:

Now available to install - Details on how here: Design Studio 1.2/1.3 SDK - Design Studio Utility Pack

TODO:

Finish Bar Select click handling (unfinished)

Original Post:

An interesting question by sara.g was asked here related to Conditional Formatting a chart (Dynamic threshold setting-Conditional Formatting in Charts).

In short, I think the end-result was micro-chart type of visualization like this, so this is my reference point of where this component I am talking about started.

The end-result isn't 100% a match (sorry, sara.g!) but it gets you kinda close (end product screen shot below for comparison -- But keep reading!)

One version:

Similar with 'inline labels':

So rewinding a moment, this was the thought process for this one.  In the thread mentions, tammy.powlas3 and sara.g started to talk about SDK options and my recent LaunchPad component was mentioned as possibly a good start ( Design Studio SDK (1.3) - Databound and Colored KPI Tile Set using SDK Launchpad ).  I thought about it and agreed that probably most of the properties available in the Additional Properties Sheet and in the BIAL methods is enough to reuse in a similar fashion but instead of a SAPUI5 TileContainer component, it would give me a chance to try another visualization component from scratch.  I chose D3 again, as I need the practice.

So let's see what options I ended up with at design-time in a blank dashboard after dragging over a fresh component:

You'll notice that the 'Additional Properties' panel looks similar to the one in the Launch Pad component, with maybe a little bit of a facelift in the buttons and a few different properties, etc... Same concept, however, which is a list of KPIs and some per-KPI formatting options.  The real difference is in the rendering (see canvas).  So let's talk about the properties a little more and then see the changes in action (the fun D3 part).

• In-Line Labels: Shown in original illustrations, toggles whether the labels are overlaid as part of the bar or outside of the bar.
• Gradient is Full Width: This controls whether the gradient overlay should stop at the end of the value of each bar, or extend to the entire domain of the set (for a progress bar effect, as an example)
• Gradient Start/Stop (0.00 - 1.00): The beginning/end of the gradient overlay
• Gradient Start/Stop Color: Beginning and ending gradient color
• Gradient Start/Stop Opacity (0.00 - 1.00): Controls transparency of beginning and end of gradient (set both to 0 if you don't want gradients)
• Bar Fill Opacity (0.00 - 1.00): If you'd like the bars to appear translucent
• Bar Roundness: Radius of rounded corners of bars.  Set to 0 if you don't want round corners
• Bar Height: Static Height of the bars in pixels.  If you set to -1, the height will be distributed proportionately based on component height.  Depending on your usage, static and auto heights have their place.
• Label Width: Width of labels, meaningless if you turn on in-line labels.

As you can see, I had a little fun with the number of properties for simple cosmetics sake but it was just because it was so cool using D3's transition effects and should serve as a pretty nice example of how to make some slick visual component if you can understand D3's power.  I'm still learning so if you look at my code there's probably a much better way to do a lot of this.  Let's now look at the runtime BIAL methods and then a few more screen shots:

• removeAllBars() - Removes all bars
• addBar(title, number?, numberUnit?, fillColor?) - Adds/Updates a bar based on title
• removeBar(title) - Removes a bar based on title
• getBarClicked() - Gets last bar clicked
• getBarProperty(title) - Gets a bar's properties (by title) back in a JSON structure:
  

  Name	Type	Description
  title	String
  fillColor	String
  number	String
  numberUnit	String

• setBarThickness(thickness) - Sets bar thickness (aka height), -1 will set as auto
• getBarThickness() - Gets bar thickness
• setInlineLabels(true/false) - Set inline labels on/off
• getInlineLabels() - Returns whether labels are inline or not.

And below is a sample snippet of BIAL used in a following animation at the bottom of this post:

Below is the set up at design time.  Note the design-time transitions as the properties are changed (20MB animated GIF, sorry low-bandwidth users):

Click if not animating

And one more, for a BIAL + SDK D3 visualization + runtime example in a quick animation to give you an idea of the possibilities, end-to-end:

Click if not animating

EDIT: Added an orientation property for horizontal or vertical transitions:

I will update this post with source code links and information however it will be in the usual place and packaged for usage after I clean up a few thing.  It will probably be available late this week or early next week after the US holidays.

Any feedback/suggestions/questions ahead of time are welcomed!