Wednesday, November 30, 2016

Medusa KPI Skins

At the current project I'm working on a JavaFX dashboard using gauges...which is awesome :)
And so I was looking for interesting designs that might be useful for a dashboard visualizing KPI's (Key Performance Indicators). So I stumbled upon two interesting designs that might be a good fit for a grid or tile based dashboard layout.
So here they are...

The TileTextKpiSkin on the left side shows the current value by the text, a bar, the maximum value it could reach (here 100) and the value in percentage.
The TileKpiSkin on the right side shows the current value by it's number, a defined threshold (75) and a needle that shows where the current value is in the given range.
Both tiles also show a title on the upper left corner.'s nothing special but didn't take long to implement it so why not :)

Both skins are part of the latest Medusa version (6.3) which you can find here

*** UPDATE ***
After playing around with the new skins I came to the conclusion that it would also make sense to have the ability to visualize sections. So I've added them to both skins and they will be available with the next version (6.4) of Medusa.
Here is a little screenshot of how they will look like...

So as soon as you have sections enabled the threshold won't be shown on the left skin (TileKpiSkin) but only the active section.
On the right right skin (TileTextKpiSkin) the bar and the percentage text will either be colored with the default value (barColor) or with the color of the active section. I've also added the unit text for the right skin.

That's it for keep coding... 

No comments:

Post a Comment