Skip to Content

Update for Lumira 1.29: Github Download Link with customizing property to setup background colors in Compose Room


Here on SCN we already have many great viz extensions featured, be it open sourced or developed by SAP Partners. When I recently needed to perform a got the SWOT analysis for one of my projects, I immediately saw this as an opportunity for Lumira!


Business User Case

SWOT Analysis is a useful technique for understanding and an organization’s strengths and weaknesses, and is used to identify the opportunities to expand its markets and improve its business operations, and identify the threats the organization face in its external environment.

To use the extensions one need an excel sheet, which includes four columns: based on Environment (internal/ external), Category (strength/ weaknesses/ opportunities/ threats), and Description and Measure (corresponding to the sequence of category section).


SWOTSample.jpg

A SWOT analysis aims to identify the key internal and external factors that are important in order to achieve a business objective. A SWOT analysis groups key pieces of information into two main levels:

  • internal factors – the strengths and weaknesses internally in the organization
  • external factors – the opportunities and threats represented by the external environment of the organization

Developing the Extension for SAP Lumira

1. Create a DIV extension

The SWOT extension is a pretty simple project, the only trick is replacing DIV with SVG. The first step is creating a new div based data visualization extension project in Web IDE.

  • – In SAP Web IDE, from File menu choose New -> Project from Template
  • – Choose Visualization Extension
  • – Type all necessary information including Project Name, Extension Name, ID and so on.
  • – The most important step is in “4 Quick Layout Configuration”, choose “using DIV” in PlotArea

/wp-content/uploads/2015/10/createproject_813640.jpg

2. Sort data with special sequence

The next step is mapping data with d3.nest() and link .sortKeys() with a callback function. Each level can be sorted by a key – a simple solution is using d3.ascending or d3.descendingas property by alphabetic or numeric order. Status, fortunately, can be sorted in ascending order, but Priority requires a custom order. Create an array in the order you want and use .indexOf() to create the order’s comparator function.

3. Binding data twice

After grouping the data based on their category property, the container will bind the data first time to <div> to each card. D3’s selection.data() function collaborates with .enter() binding data to selected not existing elements. Binding is like “attaching” or associating data to specific elements, so that later user can reference those values to apply mapping rules. The first binding will create four <div> cards and save the result in a variable.

/wp-content/uploads/2015/10/content_sec_813656.jpg

Content_sec will be assigned to all of the <div class=”contentSection”> attached with data, but each of the div’s only represent themselves with filtered parts of the total. The are required to bind twice and the description for each of the cards , and append <ul> and <li> for descriptions.

/wp-content/uploads/2015/10/content_desp_813657.jpg

4. CSS for card, card title and capital letter

The last step is creating a container for cards using flexbox. Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Each of the cards are the flex items, and can be contained inside a parent element as flex container.

If the regular layout is based on both block and inline flow directions, the flex layout is based on “flex-flow directions”. Basically, the items will be laid out following either the main axis (left-right) or the cross axis (top-bottom).

/* parent element*/

.container{

      display: -webkit-flex;

      display: flex;

      -webkit-flex-flow: row wrap;

      flex-flow: row wrap;

      height:100%;

}


/* child element */

.swotanlyContainer .contentSection{

               box-sizing:border-box;

               -moz-box-sizing:border-box;  /* Firefox */

               -webkit-box-sizing:border-box; /* Safari */

               text-align: center;

               width:44%;

               height: 50%;

               font-size: 1.4em;

               color: #003459;

               border-color: #ccc;

               border-style:solid;

               border-width:medium;

               position:relative;

}

The Capital letter for each card comes from

     content_sec.append(“div”)

.attr(“class”, “capitalLet float_right”)

      .text(function(d){   

               return d.key.split(“”)[0];   

      });

And attach the following css

.swotanlyContainer .capital_letR{

    font-family: “Times New Roman”,Georgia,Serif;

    float: right;

    margin: 0 0 1em 1em;

}

The internal and external array titles are text on top of a background image which is stores in

          bundles -> sap -> viz -> ext -> swotanalysis -> sap_viz_ext_swotanalysis -> style -> array.svg

Result

/wp-content/uploads/2015/10/colorful_v1_813658.jpg

Colorful version

*TIP: sectioncolor array contains the background colors of each card, and the sequence of the color is the same as the elements in priority_order array.

Next-Step

/wp-content/uploads/2015/10/v2_lumira_813665.jpg

I’m working on defining the custom property in compose room of Lumira to setup color for each card by user. More reference in below link:

Visualization Extension Plugin for SAP Web IDE Guide

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply