Design Studio SDK – Pictograms

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.