Design Studio SDK (1.3) – D3 fun making a Progress Bar Set/Bar Chart
New version here:
ORIGINAL OLD POST FOLLOWS:
Now available to install – Details on how here: Design Studio 1.2/1.3 SDK – Design Studio Utility Pack
Finish Bar Select click handling (unfinished)
An interesting question by Sara G Iyer 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 Iyer!) but it gets you kinda close (end product screen shot below for comparison — But keep reading!)
Similar with ‘inline labels’:
So rewinding a moment, this was the thought process for this one. In the thread mentions, Tammy Powlas and Sara G Iyer 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!