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).
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:
Name | Type | Description |
title | String | |
fillColor | String | |
number | String | |
numberUnit | String |
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!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
8 | |
8 | |
7 | |
6 | |
5 | |
4 | |
4 | |
4 | |
3 | |
3 |