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. :razz: )
(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:
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
6 | |
6 | |
5 | |
4 | |
3 | |
3 | |
3 | |
3 | |
3 | |
2 |