Insights Viz – Code Snippets

Table Viz Code Snippet

HTML Template

<style>

  .table-container{

      width: 100%;

      overflow-x: auto;

      box-shadow: 0 0 10px rgba(0,0,0,0.25);

      border-radius: 10px;

      font-family: ‘Inter-Medium’, sans-serif;

  }

 

  .insight_table{

      width: 100%;

      border-collapse: collapse;

      table-layout: fixed;

  }

  .insight_table th, .insight_table td{

      text-align: left;

  }

  .insight_table td {

      text-align: left;

      border-bottom: 1px solid #f2f2f2;

      color: #000000;

      font-size: 14px;

      color: #666;

      line-height: 1rem;

      font-weight: unset!important;

      padding-top: 10px;

      padding-bottom: 10px;

      padding-left: 10px;

      border-bottom: 1px solid #f2f2f2;

      word-wrap: break-word;

  }

  .insight_table th {

      text-align: left;

      color: #fff;

      line-height: 1rem;

      font-weight: unset!important;

      padding-top: 10px;

      padding-bottom: 10px;

      padding-left: 10px;

      padding-right: 5px;

      background-color: #0b132b;

      border-bottom: 3px solid #0b132b;

      border-top: 3px solid #0b132b;

      font-size: 14px;

      height: 5px;

      word-wrap: break-word;

  }

 

  .insight_table tbody tr:hover {

      background-color: #ECECFF;

  }

 

  .error_div {

    color: #ba3939;

    background: #ffe0e0;

    border: 1px solid #a33a3a;

    padding: 5px;

  }

 

  .no_data_div {

    color: #204a8e;

    background: #c9ddff;

    border: 1px solid #4c699b;

    padding: 5px;

    text-align: center;

  }

</style>

{{^error}}

<div class=”table-container”>

  <table class=”insight_table”>

    <thead>

      <tr>

        {{#table_heading}}

          <th>{{column_name}}</th>

        {{/table_heading}}

      </tr>

    </thead>

    <tbody>

      {{#table_data}}

      <tr>

        {{#row}}

        <td>{{cell_value}}</td>

        {{/row}}

      </tr>

      {{/table_data}}  

    </tbody>

  </table>

</div>

{{^is_data}}

  <div class=”no_data_div”>

    <span style=”font-weight: bold;”>No Data</span><br>

  </div>

{{/is_data}}

{{/error}}

{{#error}}

  <div class=”error_div”>

    <span style=”font-weight: bold;”>Error:</span><br>

    {{error_msg}}

  </div>

{{/error}}

 

Sample Python Script

error = False

error_msg = “”

if len(DM) > 0:

    is_data = True

    if “dm1” in DM:

        dm = DM[‘dm1’]

        no_of_rows = VAR.get(‘no_of_rows’, len(dm))

        table_data = []

        column_names = [VAR[key] for key in sorted(VAR.keys()) if key.startswith(‘col’)]

        if len(column_names) == 0:

            error = True

            dm_columns = []

            if len(dm) > 0:

                dm_columns = list(dm[0].keys())

            error_msg = “No columns are given in variables. Please provide at least one column name in variables; All column variables are of string format and should start with ‘col’; Data model columns are ” + ‘, ‘.join(dm_columns)

        elif len(column_names) > 5:

            error = True

            error_msg = “More than 5 columns are not allowed. Given columns are ” + ‘, ‘.join(column_names)

        else:

            if len(dm) > 0:

                is_data = True

                dm_columns = list(dm[0].keys())

                dm_keys_len = len(dm_columns)

                if dm_keys_len >= len(column_names):

                    miss_ele = []

                    for elem in column_names:

                        if elem not in dm_columns:

                            miss_ele.append(elem)

                    if len(miss_ele) == 0:

                        for i in range(len(dm)):

                            if i < no_of_rows:

                                cell_data = []

                                for column in column_names:

                                    cell_data.append({

                                        “cell_value”: dm[i][column] if dm[i][column] is not None else “-“

                                    })

                                table_data.append({

                                    “row”: cell_data

                                })

                            else:

                                break

                    else:

                        error = True

                        error_msg = “Column names given in varaibles do not match with the names in Data model. Data model columns are ” + ‘, ‘.join(dm_columns) + “; Unknown column name in variable is ” + ‘, ‘.join(miss_ele)

                else:

                    error = True

                    error_msg = “Data model has less columns when comapared to given columns in variables. Data model columns are ” + ‘, ‘.join(dm_columns) + “; Given columns in variables are ” + ‘, ‘.join(column_names)

            else:

                is_data = False

        table_heading = [{“column_name”: column} for column in column_names]

        VALUE[‘table_heading’] = table_heading

        VALUE[‘table_data’] = table_data

        VALUE[‘is_data’] = is_data

    else:

        error = True

        error_msg = “Data model is expected to be having label name as dm1”

else:

    is_data = False

 

VALUE[‘is_data’] = is_data

VALUE[‘error’] = error

VALUE[‘error_msg’] = error_msg

 

Distribution Viz Code Snippet

HTML Template

<style>

  .bargraph_data{

         padding-top:1px;

     }

     .bargraph_table{

         padding-top:10px;

         width:100%;

         align-items:left;

         text-align:left;

         border-collapse:seperate;

         border-spacing:10px;

     }

 

     .bargraph_label{

          text-align:left;

          padding-left:10px;

          width:10%;

          padding-bottom:3px;

          padding-top:3px;

          font-size: 13px;

     }

   

     .bargraph_bar{

         border-radius:5px;

         text-align:right;

         padding-right:2px;

         float:left;

         background:#19499d;

     }

     .bargraph_barchart{

         width:90%;

         border-radius: 5px;

         padding-right:20px;

         color:white;

     }

   

     .bargraph_pct{

         width:15%;

         text-align:left;

     }

 

     .bargraph_background{

         display:block;

         background-color:#dddbde;

         border-radius: 5px;

         text-align:left;

         color:black;

     }

     

     .error_div {

      color: #ba3939;

      background: #ffe0e0;

      border: 1px solid #a33a3a;

      padding: 5px;

    }

</style>

{{^error}}

<div style=”position: absolute;inset: 0; border-radius: 5px; font-family: ‘Inter-Medium’, sans-serif;”>

  <div style = “height:45px”>

      <div style=”display: flex;margin-top: 2px; padding-left: 10px; margin-bottom: 5px;”>

          <span style=” color: black; font-size:16px; font-weight: bold; padding-top: 7px;”> {{panel_heading}} </span>

      </div>

      {{#is_data}}

      <div>

          <div style = “padding-left:10px;”>

              <span style = “font-size:14px; “>{{{top_msg}}}</span>

          </div>

      </div>

      {{/is_data}}

      {{^is_data}}

      <div style=”font-style:italic;padding-left: 10px;”>No data found in the selected time period</div>

      {{/is_data}}

  </div>

  <div style=”padding-left: 5px; padding-top:10px; height:70px”>

      <div style=”display: flex; “>

          <?xml version=”1.0″ encoding=”UTF-8″?><svg id=”a” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″ style=”width: 25px; height: 25px; fill: #ffc000″>

              <path d=”m15.82,12.17l-4.65-1.96c-.06-.02-.1-.07-.12-.12l-1.92-4.56c-.08-.18-.34-.19-.42,0l-2.04,4.29s-.06.09-.11.11l-4.42,2.17c-.18.09-.17.35.02.43l4.67,1.74c.06.02.11.07.14.14l1.74,4.63c.08.2.36.2.43,0l1.7-4.59c.02-.06.07-.11.14-.14l4.84-1.82c.14-.05.14-.24,0-.3Z”/>

              <path d=”m19.56,17.54s-.05-.03-.06-.06l-.99-2.35c-.04-.1-.17-.1-.22,0l-1.05,2.21s-.03.04-.06.06l-2.28,1.12c-.09.05-.09.18.01.22l2.41.9s.06.04.07.07l.9,2.38c.04.1.19.1.22,0l.87-2.36s.04-.06.07-.07l2.49-.94c.07-.03.07-.13,0-.15l-2.4-1.01Z”/>

              <path d=”m14.91,5.52l2.41.9s.06.04.07.07l.9,2.38c.04.1.19.1.22,0l.87-2.36s.04-.06.07-.07l2.49-.94c.07-.03.07-.13,0-.15l-2.4-1.01s-.05-.03-.06-.06l-.99-2.35c-.04-.1-.17-.1-.22,0l-1.05,2.21s-.03.04-.06.06l-2.28,1.12c-.09.05-.09.18.01.22Z”/>

          </svg>

          <div style=”margin-top: 3px; padding-left: 10px; color: #19499d; font-weight: bold; font-family: Inter-Medium;”>INSIGHTS</div>

      </div>

      {{#is_data}}

      <ul style=”font-size: 13px;”>

          {{#insight_data}}

          <li>

              {{{msg}}}

          </li>

          {{/insight_data}}

      </ul>

      {{/is_data}}

      {{^is_data}}

      <div style=” text-align: left; font-family: ‘Inter-Medium’, sans-serif; font-style:italic;padding-left: 30px;”>No insights observed </div>

      {{/is_data}}

  </div>

  <div style=” text-align: left; font-family: ‘Inter-Medium’, sans-serif; padding-top: 15px;”>      

      <div style = “padding-left:10px;font-size:13px; “><b>Distribution</b></div>

          <table class = “bargraph_table”>

              {{#bar_data}}

              <tr class = “bargraph_data” style=”opacity: {{opacity}};”>

                  <td class=”bargraph_label”> {{bar_title}} </td>

                      <td class = “bargraph_barchart”>

                          <div class = “bargraph_background”>                                        

                              <div class = “bargraph_bar” style=” width:{{bar_pct}}% ; color:white;”>

                                  {{#disp_in}}

                                      <span style =”padding-right:15px”>{{bar_pct}}%</span>

                                  {{/disp_in}}

                                  {{^disp_in}}

                                      &nbsp;

                                  {{/disp_in}}                    

                              </div>

                              {{#disp_out}}

                              <span style =”padding-left:5px”>{{bar_pct}}%</span>

                              {{/disp_out}}

                              {{^disp_out}}

                              {{^pct_100}}

                                  &nbsp;

                              {{/pct_100}}

                              {{/disp_out}}                                                

                          </div>

                      </td>

              </tr>

              {{/bar_data}}

          </table>

      </div>

</div>

{{/error}}

{{#error}}

<div class=”error_div”>

    <span style=”font-weight: bold;”>Error:</span><br>

    {{error_msg}}

  </div>

{{/error}}

Sample Python Script

error = False

error_msg = “”

heading = “”

top_msg = “”

top_sum = 0

least_sum = 0

others = 0

top_bottom_n = VAR.get(‘top_bottom_n’, 5)

heading = VAR.get(‘heading’, None)

if len(DM) > 0:

    is_data = True

    if “dm1” in DM:

        data = DM[‘dm1’]

        category_column = VAR.get(‘category_column’, None)

        count_column = VAR.get(‘count_column’, None)

        if category_column is None and count_column is None:

            error = True

            error_msg = “Variables category_column and count_column is to be added.”

        elif category_column is None:

            error = True

            error_msg = “Variables category_column is to be added.”

        elif count_column is None:

            error = True

            error_msg = “Variables count_column is to be added.”

        else:

            if category_column == count_column:

                error = True

                error_msg = “Variables category_column and count_column are the same.”

            else:

                dm_columns = []

                if len(data) > 0:

                    dm_columns = list(data[0].keys())

                    if category_column not in dm_columns and count_column not in dm_columns:

                        error = True

                        error_msg = “Coulumns ” + category_column +  ” and ” + count_column + ” is not in the data model; Available Columns are ” + “, “.join(dm_columns)

                    elif category_column not in dm_columns:

                        error = True

                        error_msg = “Coulumn ” + category_column + ” is not in the data model; Available Columns are ” + “, “.join(dm_columns)

                    elif count_column not in dm_columns:

                        error = True

                        error_msg = “Coulumn ” + count_column + ” is not in the data model; Available Columns are ” + “, “.join(dm_columns)

                    else:

                        dm0 = data[0]

                        if not isinstance(dm0[category_column], str) and isinstance(dm0[count_column], str):

                            error = True

                            error_msg = “Coulumn ” + category_column + ” is not a string, expected to be a string column; Column ” + count_column + ” is a string, expcted to be a numeric.”

                        elif not isinstance(dm0[category_column], str):

                            error = True

                            error_msg = “Coulumn ” + category_column + ” is not a string, expected to be a string column.”

                        elif isinstance(dm0[count_column], str):

                            error = True

                            error_msg = “Coulumn ” + count_column + ” is a string, expected to be a numeric.”

                        else:

                            data_arr = []

                            total = 0

                            for i in range(len(data)):

                                data_arr.append([data[i][category_column], data[i][count_column]])

                                total += data[i][count_column]

 

                            if len(data_arr) > 0:

                                is_data = True

                                data_arr.sort(key=lambda x: x[1], reverse = True)

 

                                data_pct_arr = []

                                topn_pct = 0

                                for i in range(len(data_arr)):

                                    pct = round((data_arr[i][1]/total)*100, 2)

                                    data_pct_arr.append([data_arr[i][0], data_arr[i][1], pct])

                                    if i < top_bottom_n:

                                        topn_pct += pct

                               

                                top_msg = “Out of the total <b>%s</b>, the <b>top %s</b> account for <b>%s</b>” % (total, top_bottom_n, str(100.00 if topn_pct>=100 else round(topn_pct, 2))+”%”)

 

                                insight_data =[]

                                for i in range(len(data_pct_arr)):

                                    if i < 2:

                                        insight_data.append({

                                            “msg”: “<b>%s</b> contributes to <b>%s</b>” % (data_pct_arr[i][0],str(data_pct_arr[i][2])+”%”)

                                        })

                                VALUE[‘insight_data’] = insight_data

 

                                top_l = top_bottom_n

                                bottom_l = top_bottom_n*2

 

                                #bar graph data

                               

                                if(len(data_pct_arr)<top_l and len(data_pct_arr)>0):  

                                    for i in range(len(data_pct_arr)):

                                        if i< top_l:

                                            top_sum = top_sum + data_pct_arr[i][2]

                                    top_sum = round(top_sum,2)

                                    least_sum = 0

                                    others = 0

 

                                if (len(data_pct_arr)>=top_l and len(data_pct_arr)<bottom_l):

                                    top = data_pct_arr[:top_l]

                                    for i in range(len(top)):

                                        top_sum = top_sum + data_pct_arr[i][2]

                                   

                                    least = data_pct_arr[top_l:]

                                    for i in range(len(least)):

                                        least_sum = least_sum + least[i][2]

                                    top_sum = round(top_sum,2)

                                    least_sum = round(least_sum,2)

                                    others = 0

 

                                if (len(data_pct_arr)>=bottom_l):

                                    for i in range(len(data_pct_arr)):

                                        if i < top_l:

                                            top_sum = top_sum + data_pct_arr[i][2]

 

                                    least = data_pct_arr[-top_l:]

                                    for i in range(len(least)):

                                        least_sum = least_sum + least[i][2]

                                    top_sum = round(top_sum,2)

                                    least_sum = round(least_sum,2)

                                    others = round(100-(top_sum+least_sum),2)

 

                            else:

                                is_data = False

                                top_msg = “No data found in the selected time period”

    else:

        error = True

        error_msg = “Data model is expected to be having label name as dm1”

else:

    is_data = False

 

if heading is None:

    error = True

    error_msg = “Variable heading missing. Add heading varaible to add a heading to this pannel”

 

VALUE[‘is_data’] = is_data

VALUE[‘error’] = error

VALUE[‘error_msg’] = error_msg

 

 

def inputfunction(bar_title,bar_pct, check_other=False, others = 0):

    if round(bar_pct,2) >= 100:

        bar_pct = 100.00

    elif round(bar_pct,2) <= 0.00:

        bar_pct = 0.00

    else:

        bar_pct = round(bar_pct,2)

   

    if round(bar_pct,2)<80:

        disp_out= True

        disp_in = False

    else:

        disp_out = False

        disp_in = True

    if round(bar_pct,2) >=99 :

        pct_100 = True

    else:

        pct_100 = False

    if round(bar_pct,2) ==0 :

        opacity = 1.0 if check_other and others > 0 else 0.3

    else:

        opacity = 1.0

 

    return {

        “bar_title”:bar_title,

        “bar_pct”:bar_pct,

        “disp_in”: disp_in,

        “disp_out”:disp_out,

        “pct_100”: pct_100,

        “opacity”: opacity

    }

 

bar_data = []

bar_data.append(inputfunction(“Top “+str(top_bottom_n),top_sum))

bar_data.append(inputfunction(“Least “+str(top_bottom_n),least_sum, True, others))

bar_data.append(inputfunction(“Others”,others))

 

VALUE[‘bar_data’]=bar_data

VALUE[‘top_msg’]=top_msg

VALUE[‘bar_data’]=bar_data

VALUE[‘panel_heading’] = heading

 

Bar Insight Code Snippet

HTML Template

<style>

    .bar-card{

        position:absolute;

        top: 0;

        left: 0;

        padding-top: 10px;

        padding-left: 15px;

        inset: 0;

        font-family: ‘Inter-Medium’, sans-serif;

    }

    .decline_heading {

        font-size: 15px;

    }

    .bar_table{

        padding-top: 6px;

        width:100%;

        align-items: left;

        text-align: left;

        border-collapse: separate;

        border-spacing: 10px

    }

    .bar_table_head, .bar_distribution_data{

        padding-top: 2px;

    }

    .bar_distribution{

        text-align: right;

        padding-right: 5px;

        width: 10%;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }

    .uei_cat_bar{

        border-radius: 20px;

        text-align: right;

        padding-right: 5px;

    }

 

    .error_div {

      color: #ba3939;

      background: #ffe0e0;

      border: 1px solid #a33a3a;

      padding: 5px;

    }

   

    .no_data_div {

      color: #204a8e;

      background: #c9ddff;

      border: 1px solid #4c699b;

      padding: 5px;

      text-align: center;

    }

    .bar_title {

        font-size: 16px;

        font-weight: bold;

    }

</style>

{{^error}}

<div class=”bar-card”>

    <div class=”bar_title”>

        {{title}}

    </div>

    <table class=”bar_table”>

        {{#out_data}}

        <tr class=”bar_distribution_data”>

            <td class=”bar_distribution”>{{category}}</td>

            <td style=”width: 80%; background-color: #c9ddff; border-radius: 10px;”>

                <div style=”display: flex;”>

                    <div class=”uei_cat_bar” style=”background-color:#4075C5 ; width:{{pct}};”>

                        &nbsp;

                    </div>

                    <!– <div style=”float: left; padding-left: 5px; font-weight: bold;”>

                        {{pct}}

                    </div> –>

                </div>

            </td>

            <td>

                <div style=”float: left; padding-left: 5px; font-weight: bold;”>

                    {{pct}}

                </div>

            </td>

        </tr>

        {{/out_data}}

    </table>

</div>

{{^is_data}}

<div class=”no_data_div”>

  <span style=”font-weight: bold;”>No Data</span><br>

</div>

{{/is_data}}

{{/error}}

{{#error}}

<div class=”error_div”>

  <span style=”font-weight: bold;”>Error:</span><br>

  {{error_msg}}

</div>

{{/error}}

Sample Python Script

error = False

error_msg = “”

 

if len(DM) > 0:

    is_data = True

    if “dm1” in DM:

        data = DM[‘dm1’]

        category_column = VAR.get(‘category_column’, None)

        count_column = VAR.get(‘count_column’, None)

        if category_column is None and count_column is None:

            error = True

            error_msg = “Variables category_column and count_column is to be added.”

        elif category_column is None:

            error = True

            error_msg = “Variables category_column is to be added.”

        elif count_column is None:

            error = True

            error_msg = “Variables count_column is to be added.”

        else:

            if category_column == count_column:

                error = True

                error_msg = “Variables category_column and count_column are the same.”

            else:

                dm_columns = []

                if len(data) > 0:

                    dm_columns = list(data[0].keys())

                    if category_column not in dm_columns and count_column not in dm_columns:

                        error = True

                        error_msg = “Coulumns ” + category_column +  ” and ” + count_column + ” is not in the data model; Available Columns are ” + “, “.join(dm_columns)

                    elif category_column not in dm_columns:

                        error = True

                        error_msg = “Coulumn ” + category_column + ” is not in the data model; Available Columns are ” + “, “.join(dm_columns)

                    elif count_column not in dm_columns:

                        error = True

                        error_msg = “Coulumn ” + count_column + ” is not in the data model; Available Columns are ” + “, “.join(dm_columns)

                    else:

                        dm0 = data[0]

                        if not isinstance(dm0[category_column], str) and isinstance(dm0[count_column], str):

                            error = True

                            error_msg = “Coulumn ” + category_column + ” is not a string, expected to be a string column; Column ” + count_column + ” is a string, expcted to be a numeric.”

                        elif not isinstance(dm0[category_column], str):

                            error = True

                            error_msg = “Coulumn ” + category_column + ” is not a string, expected to be a string column.”

                        elif isinstance(dm0[count_column], str):

                            error = True

                            error_msg = “Coulumn ” + count_column + ” is a string, expected to be a numeric.”

                        else:

                            no_of_bars = VAR.get(‘no_of_category_to_show’, None)

                            bar_data = []

                            total = 0

                            for i in range(len(data)):

                                bar_data.append([data[i][category_column], data[i][count_column]])

                                total += data[i][count_column]

                           

                            bar_data.sort(key=lambda x: x[1], reverse = True)

 

                            if no_of_bars is None:

                                no_of_bars = len(bar_data)

                                title = category_column.title() + ” distribution”

                            else:

                                title = “Top ” + str(no_of_bars) + ” ” + category_column.title() + ” distribution”

 

                            out_data = []

                            for i in range(len(bar_data)):

                                if i < no_of_bars:

                                    out_data.append({

                                        “category”: bar_data[i][0].title(),

                                        “pct”: str(round((bar_data[i][1]/total)*100, 2)) + “%”

                                    })

                                else:

                                    break

                            VALUE[‘out_data’] = out_data

                            VALUE[‘title’] = title

    else:

        error = True

        error_msg = “Data model is expected to have ‘dm1’ key”

else:

    is_data = False

 

 

VALUE[‘is_data’] = is_data

VALUE[‘error’] = error

VALUE[‘error_msg’] = error_msg

Info Insight Code Snippet

HTML Template

<style>

  .insight_card{

      position: absolute;

      inset: 0;

      font-family: ‘Inter-Medium’, sans-serif;

      padding: 10px 20px;

  }

 

  .insight_heading {

      color: white;

      font-size: 20px;

      margin-bottom: 10px;

      display: none;

  }

 

  .insight_value {

      font-size: 40px;

      margin-bottom: 10px;

      text-align: center;

      color: white;

  }

 

  .insight_link {

      color: #373A3C;

  }

 

  .insight_link:hover {

      opacity: 0.7;

      cursor: pointer;

  }

 

  .insight_info {

      font-size: 14px;

      margin-bottom: 10px;

      padding-top: 10px;

      display: flex;

      width: 100%;

      border-top: 1px solid black;

      /* align-items: center; */

      justify-content: center;

      /* border-radius: 8px; */

      /* background-color: #E9EFFA; */

      /* padding: 8px; */

  }

  .svg_div {

      width: 30px;

  }

  .insight_message {

      margin-left: 8px;

      color: white;

      display: flex;

      align-items: center;

      justify-content: center;

      text-align: center;

  }

 

  .error_div {

    color: #ba3939;

    background: #ffe0e0;

    border: 1px solid #a33a3a;

    padding: 5px;

  }

</style>

<div class=”insight_card”  style=”background-color:{{color}}”>

  {{^error}}

  <div class=”insight_heading”>

      {{title}}

  </div>

  <div class=”insight_value”>

        {{metric_value}}

  </div>

  <div class=”insight_info”>

      <div class=”insight_message”>

          {{{message}}}

      </div>

  </div>

  {{/error}}

  {{#error}}

  <div class=”error_div”>

      <span style=”font-weight: bold;”>Error:</span><br>

      {{error_msg}}

    </div>

  {{/error}}

</div>

Sample Python Script

data = DM.get(“DM1”,[])

prefix = VAR.get(“data_prefix”,None)

good_message = VAR.get(“good_message”,None)

error_message = VAR.get(“error_message”,None)

 

if len(data)>0:

    value = data[0][f'{prefix}_pct’]

    actual = data[0][f'{prefix}_actual’]

    expected = data[0][f'{prefix}_expected’]

    diff = expected-actual

 

    good_threshold = VAR.get(“good_threshold”,95)

    fair_threshold = VAR.get(“fair_threshold”,85)

 

    if value == 100:

        status = “Excellent”

        color = “#73BF69”

    elif value >= good_threshold:

        status = “Good”

        color = “#73BF69”

    elif value < good_threshold and value >= fair_threshold:

        status = “Fair”

        color = “#FA6400”

    else:

        status = “Poor”

        color = “#C4162A”

   

    if value == 100:

        good_message = good_message.replace(‘{_value_}’, str(expected))

        description = f'{good_message}’

    else:

        description = f'{diff} out of {expected} {error_message}’

 

else:

    status = “N.A.”

    color = “grey”

    description = “No data available for the selected time period”

 

VALUE[‘metric_value’] = status

VALUE[‘message’] = description

VALUE[‘color’] = color

RUM arrow Viz Code Snippet

HTML Template

<style>

.flex-container {

  display: flex;

  flex-wrap: nowrap;

  text-align: center;

  font-family: Heebo, Inter, Helvetica, Arial, sans-serif;

  font-size: 1.2rem;

  font-weight: 400;

  margin-left: 260px

 

}

 

.top-row {

  display: block;

  position: relative;

  float: left;

  width: calc(100% / 7 – 11px);

  height: 30px; /* Use the variable value directly */

  line-height: 40px; /* Use the variable value directly */

  margin-right: 10px; /* Use the variable value directly */

  padding: 0 20px;

}

 

.box-item {

  display: block;

  position: relative;

  float: left;

  width: calc(100% / 7 – 11px);

  height: 40px; /* Use the variable value directly */

  line-height: 40px; /* Use the variable value directly */

  margin-right: 10px; /* Use the variable value directly */

  padding: 0 20px;

  background-color: #fcc; /* Use the variable value directly */

  border-radius: 4px;

  color: white;

}

 

.box-item:before {

  content: ”;

  position: absolute;

  right: -8px;

  height: 0;

  width: 0;

  border-top: 20px solid transparent; /* Use the variable value directly */

  border-bottom: 20px solid transparent; /* Use the variable value directly */

  /*border-left: 10px solid #fcc; /* Use the variable value directly */

  border-radius: 4px;

  border-left: var(–before-border-left);

 

}

 

.box-item:after {

  content: ”;

  position: absolute;

  left: -1px;

  height: 0;

  width: 0;

  border-top: 20px solid transparent; /* Use the variable value directly */

  border-bottom: 20px solid transparent; /* Use the variable value directly */

  border-left: 10px solid #fff; /* Use the variable value directly */

  border-radius: 4px;

 

}

 

</style>

<div class=”flex-container”>

  {{#value_data}}

  <div class=”top-row” style=”width:{{width}}”>{{value}}</div>

  {{/value_data}}

</div>

<div class=”flex-container”>

  {{#label_data}}

  <div class=”box-item” style=”background-color: {{color}}; –before-border-left: 10px solid {{color}}; width:{{width}}”>{{name}}</div>

 {{/label_data}}

</div>

 

Sample Python Script

data = DM[‘dm1’]

data_list = []

 

for item in data:

    for key, value in item.items():

        if key in [‘DNS’, ‘TCP’, ‘Req’, ‘SSL’, ‘Resp’, ‘Processing’, ‘OnLoad’]:

            value = round((value / 1_000_000), 2)

 

            if key in [‘DNS’, ‘TCP’, ‘Req’, ‘SSL’]:

                # Updated conditions for DNS, TCP, Req, and SSL

                if value < 1000:

                    color = ‘#58a44c’

                    width = ‘8%’

                elif value >= 1000 and value <= 3000:

                    color = ‘#ff780a’

                    width = ‘12%’

                else:

                    color = ‘#e02f44’

                    width = ‘17%’

            elif key in [‘Resp’, ‘Processing’]:

                # Updated conditions for Resp and Processing

                if value < 3000:

                    color = ‘#58a44c’

                    width = ‘8%’

                elif value >= 3000 and value <= 5000:

                    color = ‘#ff780a’

                    width = ‘12%’

                else:

                    color = ‘#e02f44’

                    width = ‘17%’

            elif key == ‘OnLoad’:

                # Updated conditions for OnLoad

                if value < 1000:

                    color = ’58a44c’

                    width = ‘8%’

                elif value >= 1000 and value <= 3000:

                    color = ‘#ff780a’

                    width = ‘12%’

                else:

                    color = ‘#e02f44’

                    width = ‘17%’

 

            data_list.append({

                ‘name’: key,

                ‘value’: str(value) + (‘ms’ if key in [‘DNS’, ‘TCP’, ‘Req’, ‘SSL’, ‘Resp’, ‘Processing’, ‘OnLoad’] else ”),

                ‘color’: color,

                ‘width’: width

            })

 

VALUE[‘label_data’] = data_list

VALUE[‘value_data’] = data_list

 

Resources

Browse through our resources to learn how you can accelerate digital transformation within your organisation.