Skip to Content

Github repo

Download extension

 

Hi everyone!

My name is Denzale “Wolf” Reese and, a few weeks ago, I had the honor of joining the SAP Analytics team. The opportunity to support our Developer Community is truly a dream come true, and I am thrilled to be publishing my first blog post. Due to a very supportive team, I have already learned a ton. So far I have been focusing on maintaining the existing open-source visualization extensions for SAP Lumira, as well as creating new ones. Since I came in with little knowledge of the D3.js JavaScript library and no experience with Lumira, I want to help others get started by sharing a bit about the path I took to modify an existing open-source visualization extension (Extended Bar Chart).

Learning Resources

I started by learning about the D3.js (Data-Driven Documents) JavaScript Library that the visualization extensions are built with (Note: The current SAP Web IDE Plugin uses version 3 of D3.js, not yet the recent version 4. They’re very different!). I found the following resources to be helpful:

After gaining a fundamental understanding of D3.js, I began to learn more specifically about using this to build visualization extensions for SAP Lumira using these:

I built some simple “Hello world” bar and bubble chart extensions just to test out the process, before receiving a request to build an extension that could visualize ABC Analysis —- similar to this example from Wikipedia:

ABC Analysis

Before I get into building the extension, I want to give you a brief overview of ABC Analysis itself. I learned that ABC Analysis is a technique typically used to categorize and efficiently manage items in an inventory. Items are divided into 3 categories (A, B, C) based on the following characteristics:

  • A items make up the top ~70-80% of the value of the inventory, but only 10-20% of the inventory items
  • B items make up ~15-25% of the value, and ~30% of the items
  • C items make up the bottom ~5% of the value, but ~50% of the items

The value of each item is found by finding the proportion of that item’s annual cost, out of the total cost of the inventory (annual cost / total inventory cost = item value). The annual cost for each item is calculated by multiplying (cost per item x annual demand = annual cost). This technique helps managers determine which items are highly important/need to be tracked closely (A), moderately important (B), and least important/can be more loosely attended to (C).

References:

Extension

The extension is built on top of the existing Extended Bar Chart extension by Jay Thoden van Velzen. Though the Extended Bar Chart was not exactly what I needed and tied to a different dataset, you can easily alter existing extensions to better fit your needs (see Annie’s mini-blog series on this). This extension features a bar chart where both the height and width of the bars have meaning; a good base to start from for the ABC Analysis chart since it does the same.

/profile/Np6D2l3iD6QNHrULHinwjH/documents/7K0uIx6dqF0uYQxHgFbnD7/thumbnail?max_x=850&max_y=850

Data Mapping & Plot Setup

First, store the dimension names in variables since the column names for “value” and “classification” may differ depending on the dataset used.

/profile/Np6D2l3iD6QNHrULHinwjH/documents/Fdci96rhz2W6VZECXDYpXf/thumbnail?max_x=850&max_y=850

Next add a SVG element to the container, setting the width and height of the plot to be within the margins (A great practice that was already in the code!).

/profile/Np6D2l3iD6QNHrULHinwjH/documents/G1tKbbjHzDiWCgMNUUL874/thumbnail?max_x=850&max_y=850

Scales

Create scales for color and x-y values. The color scale will use the built-in color palette array to map indexes to hex codes. The x scale will map the width of the plot to the values 0 to 100%. The y scale will map the height of the plot to the values 0 to 100%.

/profile/Np6D2l3iD6QNHrULHinwjH/documents/OCBlwPAW48mx0EcIBpwSkI/thumbnail?max_x=850&max_y=850

Functions & Variables

The sortABC() function separates the data into three arrays based on each record’s value for the classification dimension: A, B, or C. It then returns those three arrays. ­­

/profile/Np6D2l3iD6QNHrULHinwjH/documents/zXUc6on6l507NN8rOhqb1z/thumbnail?max_x=850&max_y=850

We now have an array containing arrays of the data classified as A, B, and C at the indexes 0, 1, and 2 respectively. Find the lengths of each of these arrays to determine how many items each classification comprises, and add them all to get the total items.

/profile/Np6D2l3iD6QNHrULHinwjH/documents/iN0wHKMvOnNPQTOiSjaVH7/thumbnail?max_x=850&max_y=850

The calcUsageValue() function sums all of the item values for each classification array.

/profile/Np6D2l3iD6QNHrULHinwjH/documents/6MhmYEuMSDV7LmGYa8g73C/thumbnail?max_x=850&max_y=850

Here store the total values for each classification, as well as the percentage of total items the classification makes up.

/profile/Np6D2l3iD6QNHrULHinwjH/documents/AX0j89TtJFWDC059OpPXOn/thumbnail?max_x=850&max_y=850

Bars

Append our bars to the plot with a width corresponding to the percentage of the total items it represents, and a height matching the total value of its items. The getStartX() and getStartY() helper functions are what make the bars render right after each other on the x-axis, and stack on the y-axis.

 /profile/Np6D2l3iD6QNHrULHinwjH/documents/ldbpL4LEXrnaYKt0A29T3V/thumbnail?max_x=850&max_y=850

Data

Included in the repo are two sample CSV’s, as well as the following Excel file with functions to help you do your own ABC Analysis:

/profile/Np6D2l3iD6QNHrULHinwjH/documents/0FNrU0LLQKTQwemRLB0ing/thumbnail?max_x=850&max_y=850

The Excel file has the necessary columns. You just need to add rows with the item’s id (if applicable), the item’s cost per unit, and the annual demand for the item. The Excel sheet will calculate the annual cost for each item, total cost of the inventory, and each item’s value as a percentage. Lastly, in the “classification” column you need to label each item as A, B, or C. To do this, I recommend sorting the table rows by descending usage value. Then label the items as close as you see fit to the criteria for each classification: A items making up the top ~70-80% of the value, B items the middle ~15-25%, and C items the bottom ~5%.

/profile/Np6D2l3iD6QNHrULHinwjH/documents/3WcTnn8vSbnLV2PcSIaVWv/thumbnail?max_x=850&max_y=850

The sample CSV’s also contain columns for item id, cost per unit, annual demand, annual cost, value, and classification (A, B, C). To use the extension in Lumira you need to add the dimension corresponding to value, followed by the dimension for classification. Any measure can be added.

 /profile/Np6D2l3iD6QNHrULHinwjH/documents/sHei5PrYm34gssAontPS7k/thumbnail?max_x=850&max_y=850

and voilà! We have successfully modified an existing visualization extension to fit our specific use case.

/profile/Np6D2l3iD6QNHrULHinwjH/documents/RZdJTlxXDuyzfmWFpdA71A/thumbnail?max_x=850&max_y=850

 

Future Iterations

In the future, I would love to see this extension gain the ability to do the ABC Analysis itself without relying on the user to classify the items. It is a somewhat tricky problem, as ABC Analysis is often arbitrary. The criteria for each classification group is often left to what works best for a particular inventory, or the preference of the manager. If you are up for that challenge, or see any more contributions you would like to make, feel free to further build on this open-source project.

Thank you for reading 🙂!

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Adrian Paul

    Nice blog “Mr. Wolf” !  😉

    And thanks for adding the ABC Analysis to the extensions marketplace – this will be a very useful additional capability for Lumira.

     

    (1) 
  2. Jay Thoden van Velzen

    Great stuff.

    And I love that you re-used some of my code for further extensions. It was always my intention to share that code not so people would simply directly use the extension itself, but to show how easy it is to create visualizations that don’t exist yet, or otherwise tell the best story to communicate your analysis. Really nice work.

    (1) 

Leave a Reply