Maybe you want a different way to convey a single KPI in order to draw attention. Perhaps infer a goal without using conditional formatting. Maybe it's a different way to show a percentage. Maybe you are just bored of KPI tiles.
In SAP Lumira we do see a degree of capability to create Infographics in the form of vector graphics with dynamic texts, etc but I hadn't yet in Design Studio (nor Lumira at that) seen the ability to create something similar to example like this:
Example taken from https://vis4.net/blog/posts/choose-your-icons-wisely/
(Note: This was the first example I ran across - I'm not agreeing for or against healthcare reform in the US. 
)
(Note 2: The author on the page laments that the 'quality' of this icon is not meaningful enough, but I'm not that picky, let's move on to seeing what we can do.)
I googled for D3 pictogram and ran across this good starter page with example code on how I could create a pictogram in D3: Pictogram grid in d3js
I've since heavily modified this code to allow for parameterization of properties such as:
- Background Color
- Fill color and empty color of shapes
- Font size/color/family
- Shape (This is the 'd' attribute of an SVG path)
- X and Y padding
- Number of Rows and Number of Columns
- Fill direction (forward or backward)
- Partial fill (top to bottom, bottom to top, left to right, right to left)
- Alignment
- Title with placeholders (Example: {value} out of {max}:
- {value} - Databound (or manual) value of a single KPI
- {max} - 'Target' or 'Max'
- {scaledvalue} - Value converted based on number of shapes (rows * columns)
- {scaledmax} - Number of shaped (rows * columns)
- {percent} - Percent of max that the value has
So how does this look at design time? Let us pull in a Pictogram and see the defaults:
Here we see a pictogram similar to the D3 example with a placeholder manual value and a max of 20 set as a default. Also you can see the General cosmetic properties on display.
What if we'd like to do a fancy progress indicator? Let's mess around with some of the properties:
So a few things I've changed. The most important ones were I changed rows to 1, giving a shape/cell count of 10, and I changed a few colors, and the Shape property to be the SVG path of the Windows logo. (Courtesy https://commons.wikimedia.org/wiki/File:Windows_logo_-_2012.svg)
What else? Could we do a single icon representing a slow fill instead of multiples?
Yes, with a few other cosmetic changes, and changing the fill direction to 'Bottom to Top' we can achieve that effect.
(Shape for Apple logo courtesy of https://commons.wikimedia.org/wiki/File:Apple_logo_black.svg)
So from here I started playing around a little more just to see the variety and below you can see a compilation of several different pictograms you could send up with.
The source code is available to pull down now or you can view the main important parts on Github here:
sdkpackage/Pictogram.js at master · org-scn-design-studio-community/sdkpackage · GitHub
This one ended up being pretty fun to play with and will be available later this week in the open source SCN Design Studio SDK Development Community download. (Just a few minor things to clean up before then)
As always, feedback or ideas always welcomed.