*This extension will be open sourced on GitHub in a few weeks*
In order to visualize more management use cases with SAP Lumira, several "management" extensions will be published in the near future.
One of them is the Competition Chart, which allows you to compare your own products or company to your competitors. As you can see in the screenshot below, your own product is set to 100 percent. You mark the product to be set to 100 percent in an additional column in your dataset (value = 1) and add this as a measure to the field "Benchmark". The percentages of the other products are calculated based on their input values.
Furthermore, a third dimension can be visualized with the size of the bubbles. All measures and dimensions can be named freely with the respective dimension or measure. In each bracket of the tooltip you can see the original value that has been processed to a percentage.
Development Process
1.1 Processing the input data
In order to calculate percentages for the input data and keep the original data, the data array is duplicated. The percentages will be determined based on the dataset with a "1" in the "Benchmark" measure, which represents the product with 100 percent. With the following piece of code the percentage for each element is calculated and stored in the new duplicated array.
//Clone data
var dataset = JSON.parse(JSON.stringify(data));
//process data and calculate percentages
data.forEach(function(d,i) {
//Benefit
dataset[i][ms1] = (d[ms1]/ownBenefit) * 100;
//Value
dataset[i][ms0] = (d[ms0]/ownValue) * 100;
//Additional
if(additionalValue){
dataset[i][ms3] = (d[ms3]/ownAdditional) * 100;
}
});
1.2 Set dynamic margins
To add additional space on the edges of the chart to prevent the bubbles from overlapping with the axes or being shown outside of the chart, the domains of the x and y axis are adjusted. The minimum and maximum of the dataset is determined and 10 percent margin is added.
//Determine max and min of the data and add margin
var xMax1 = (d3.max(dataset, function(d) { return d[ms1]; }));
var yMax1 = (d3.max(dataset, function(d) { return d[ms0]; }));
var xMin1 = (d3.min(dataset, function(d) { return d[ms1]; }));
var yMin1 = (d3.min(dataset, function(d) { return d[ms0]; }));
var xMax = xMax1 + (xMax1-xMin1)*0.1;
var yMax = yMax1 + (yMax1-yMin1)*0.1;
var xMin = xMin1 - (xMax1-xMin1)*0.1;
var yMin = yMin1 - (yMax1-yMin1)*0.1;
1.3 Show 100 percent lines
The product with a "1" in the "Benchmark" measure, which has 100 percent is highlighted by an additional line for each x and y axis. For this purpose, the coordinates of the line are defined, and a svg line element is added to the chart. The code below shows this for the x axis.
var lineX = {
'x1':(function(d) { return x( xMin ); }),
'y1':(function(d) { return y( 100 ); }),
'x2':(function(d) { return x( xMax ); }),
'y2':(function(d) { return y( 100); })
};
var lines = svg.append("g");
lines.append("svg:line")
.attr("x1", lineX.x1)
.attr("y1", lineX.y1)
.attr("x2", lineX.x2)
.attr("y2", lineX.y2)
.attr("class","sap_viz_ext_competitionchart_label-line");
1.4 Append a div element to the svg container: "Show labels"
It is not easy to use div elements in the svg container of the extension. In order to show the checkbox for the labels besides from the chart, I used a normal HTML checkbox. With the following piece of code you can do this for your own extensions.
svg.append("foreignObject")
.attr("width", 100)
.attr("height", 100)
.attr("x", height)
.append("xhtml:body")
.html("<form><input type=checkbox id=sap_viz_ext_competitionchart_check
style=display:inline-block/><b> Show labels</b></form>")
.on("click", function(d, i){ // Click handling};
Custom Visualization Properties
Many users have asked for visualization properties and customization tools, for example the ability to change colors of single parts of an extension. In general there are properties in the compose room of SAP Lumira for the background, size or the refresh behaviour. This is probably the first extension that supports the coloring of individual objects. Within the compose room you can set an individual color for each of the four rectangles divided by the horizontal 100 percent lines. You can find the properties in the 'Visualization Properties' tab after selecting the visualization.
As for a developer´s point of view it is possible to display SAP UI5 elements in this visualization properties tab. Some of the standard elements might not fit in that area, but there is an option customizing an element. Due to the complexity of this topic, I have covered this in a separate blog post: SAP Lumira Extension Development: Custom Visualization Properties
Next Steps
The new field of custom visualization properties offers many additional features for new and as well as existing extensions. Consider supporting this in your own projects. As for the Competition Chart, the design of the extension can be improved, and additional features for using it in the context of other use cases can be implemented.
If you have any additional ideas please contribute to the project at GitHub (*coming soon*) or comment on this blogpost.
Resources
- SAP Managed Tags:
1 Comment
