Sunday, 1 April 2018

Simple Risk Assessment Matrix table with resultant risk calculation

This post is not related to SharePoint and can be used in any web application with simple html and Jquery.

I was preparing a risk matrix table for one of my projects and thought it is worth sharing it here.

"A Risk Assessment Matrix is a project management tool that allows a quick view of the probable risks evaluated in terms of the likelihood or probability of the risk and the severity of the consequences. "

.
Let us build the below table.


Once you have the page ready, you can calculate the resultant risk by passing the likelihood and the severity to the page using query-strings. For example your page is riskMatrix.html, then:
http://mySitename/pages/riskMatrix.html?L=2&S=3, so here Likelihood=3 and Severity=3, so the resultant risk is highlighted as M.

Below is the complete code HTML, CSS and JS. Make sure you have referenced bootstrap and jquery (offline copy/CDN) in your page.
<table class="table table-bordered table-responsive" id="rMatrix">
<thead>
<tr>
<th>
</th>
<th colspan="2">
STATUS OF EVENT
</th>
<th colspan="5">
RISK CLASS
</th>
</tr>
</thead>
<tbody>
<tr lh="5">
<td rowspan="5" class="r-header" style="text-align:center">
LIKELIHOOD OF EVENT HAPPENING
</td>
<td style="min-width:50px" >
5
</td>
<td>
It is or has already happened
</td>
<td class="M">
M
</td>
<td class="H">
H
</td>
<td class="H">
H
</td>
<td class="VH">
VH
</td>
<td class="VH">
VH
</td>
</tr>
<tr lh="4">
<td>
4
</td>
<td>
It will probably happen
</td>
<td class="M">
M
</td>
<td class="M">
M
</td>
<td class="H">
H
</td>
<td class="VH">
VH
</td>
<td class="VH">
VH
</td>
</tr>
<tr lh="3">
<td>
3
</td>
<td>
It could possibly Happen
</td>
<td class="L">
L
</td>
<td class="M">
M
</td>
<td class="M">
M
</td>
<td class="H">
H
</td>
<td class="H">
H
</td>
</tr>
<tr lh="2">
<td>
2
</td>
<td>
It is to Happen
</td>
<td class="L">
L
</td>
<td class="L">
L
</td>
<td class="M">
M
</td>
<td class="M">
M
</td>
<td class="H">
H
</td>
</tr>
<tr>
<td lh="1">
1
</td>
<td >
It is unlikely to Happen
</td>
<td class="L">
L
</td>
<td class="L">
L
</td>
<td class="L">
L
</td>
<td class="M">
M
</td>
<td class="M">
M
</td>
</tr>
<tr>
<td rowspan="3" class="r-header">
LIKELY OUTCOME OF EVENT
</td>
<td colspan="2" class="r-header">
SAFETY
</td>
<td>
Near Miss
</td>
<td>
Minor Injury
</td>
<td>
Lost Time Accident
</td>
<td>
Major Injury
</td>
<td>
Fatality
</td>
</tr>
<tr>
<td colspan="2" class="r-header">
ENVIREONMENT
</td>
<td>
Potential Event
</td>
<td>
Minor Event
</td>
<td>
Important Event
</td>
<td>
Significant Event
</td>
<td>
Major Event
</td>
</tr>
<tr>
<td colspan="2" class="r-header">
COST
</td>
<td>
< 1k $
</td>
<td>
< 10k $
</td>
<td>
< 100k $
</td>
<td>
< 300k $
</td>
<td>
> 500k $
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2" class="r-header">
SEVERITY
</td>
<td s="1">
1
</td>
<td s="2">
2
</td>
<td s="3">
3
</td>
<td s="4">
4
</td>
<td s="5">
5
</td>
</tr>
</tbody>
</table>

CSS:
.VH{
background-color:#f90909;
 font-weight:550 !important;
}
.H{
background-color:#f99d09;
 font-weight:550 !important;
}
.M{
  background-color:#f9d909;
  height:60px;
  font-weight:550 !important;
}
.L{
  background-color:#4c7c04;
   font-weight:550 !important;
}
#rMatrix>tbody>tr>td, #rMatrix>tbody>tr>th, #rMatrix>tfoot>tr>td, #rMatrix>tfoot>tr>th, #rMatrix>thead>tr>td, #rMatrix>thead>tr>th {
  vertical-align:middle;
  text-align:center;
  font-weight:550;
}
 JS:

$(function(){
  var rowIndex=getQueryStrings().L;
    var columnIndex=getQueryStrings().S;
  try{
  if(rowIndex!=undefined && columnIndex!=undefined){
var column = $('#rMatrix tbody td[s='+columnIndex+']').index();
var cell = $('#rMatrix tbody tr[lh='+rowIndex+']').find('td').eq(column);
  $(cell).css('border','3px solid');
  $(cell).css('box-shadow','-5px 5px 20px 20px rgba(14, 1, 1, 0.17), -15px -11px 20px 5px rgba(14, 14, 14, 0.22)');
    $(cell).css('border-style','dashed');
    }
    }catch(ex){}
});
function getQueryStrings() {
    var assoc = {};
    var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
    var queryString = location.search.substring(1);
    var keyValues = queryString.split('&');
    for (var i in keyValues) {
        var key = keyValues[i].split('=');
        if (key.length > 1) {
            assoc[decode(key[0])] = decode(key[1]);
        }
    }
    return assoc;