A simple Risk Matrix chart for AngularJS
http://jsfiddle.net/joehogan/5gzfeysv/10/
Include the JS and CSS files for the plugin:
<link href="css/angular-risk-matrix.min.css" rel="stylesheet">
<script src="js/angular-risk-matrix.min.js"></script>
Add the module dependency in your AngularJS app:
angular.module('myModule', ['riskMatrix']);
<risk-matrix data="data.risks" likelihood="data.likelihoodValues" impact="data.impactValues"></risk-matrix>
An array of your risk data objects with the following property structure (at a minimum):
$scope.data.risks = [
{
Id: 1,
RiskLikelihood: 'High',
RiskImpact: 'Low'
},
{
Id: 2,
RiskLikelihood: 'Medium',
RiskImpact: 'High'
},
{
Id: 3,
RiskLikelihood: 'Low',
RiskImpact: 'Very High'
},
{
Id: 4,
RiskLikelihood: 'Very High',
RiskImpact: 'Very High'
}
];
An array of 5 likelihood values from low to high corresponding with your data, for example:
$scope.data.likelihoodValues = [
'Very Low','Low','Medium','High','Very High'
];
You can change these values to correspond with the five values you are using to quantify likelihood.
An array of 5 impact values from low to high corresponding with your data, for example:
$scope.data.impactValues = [
'Very Low','Low','Medium','High','Very High'
];
You can change these values to correspond with the five values you are using to quantify impact.
You can optionally define your own template string which will be compiled. The template controlls the format of the html of the risk item displayed on the risk matrix.
Use 'item' to refer to the current risk item:
<risk-matrix data="data.risks" likelihood="data.likelihoodValues" impact="data.impactValues" template="data.riskTemplate"></risk-matrix>
$scope.data.riskTemplate = '<div class="closed"><span ng-bind="item.Id"></span></div><div class="open"><div class="title" ng-bind="item.Title"></div><div ng-bind="\'Likelihood: \'+item.RiskLikelihood"></div><div ng-bind="\'Impact: \'+item.RiskImpact"></div><div ng-bind="\'Priority: \'+item.Priority"></div></div>';
Example using template: http://jsfiddle.net/joehogan/6xqkwf8p/3/