Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Active Contributor

New version here:

Design Studio SDK - Progress Bar Set Makeover



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)

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:
  • 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!

Labels in this area