Risikomatrix Test

by Malin Jayakody

HTML

<table id="risk"></table>

CSS

.riskGraph {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.riskGraph td {
  border: 1px solid #000000;
  padding: 10px 0px;
  text-align: center;
}

.riskGraph td a {
  text-decoration: none;
  color: #000000;
}

.riskGraph td.rowName,
.riskGraph tr.colName td {
  border: none;
  background-color: #FFFFFF;
  text-align: right;
  padding-right: 10px;
  white-space: nowrap;
}

.riskGraph tr.colName td {
  text-align: center;
}


/* at first fill every two rows with the same color */


/* red */

.riskGraph #frequently,
.riskGraph #probably {
  background-color: #d04437;
}


/* yellow */

.riskGraph #occasionally,
.riskGraph #imaginably {
  background-color: #f6c342;
}


/* green */

.riskGraph #unlikely,
.riskGraph #unimaginably {
  background-color: #8eb021;
}


/* now refill exceptions */


/* red */

.riskGraph #occasionally .critically,
.riskGraph #occasionally .catastrophically,
.riskGraph #imaginably .catastrophically {
  background-color: #d04437;
}


/* yellow */

.riskGraph #frequently .insignificantly,
.riskGraph #probably .insignificantly,
.riskGraph #unlikely .critically,
.riskGraph #unlikely .catastrophically {
  background-color: #f6c342;
}


/* green */

.riskGraph #imaginably .insignificantly {
  background-color: #8eb021;
}

JavaScript

(function($, definition) {
  var moduleName = 'RiskMatrix',
    module = definition($),
    hasDefine = typeof define === "function";

  if (hasDefine) {
    define('module-name-key-here', module);
  } else {
    this[moduleName] = module;
  }
}(jQuery, function($) {
  'use strict';

  var rows = [
      'frequently',
      'probably',
      'occasionally',
      'imaginably',
      'unlikely',
      'unimaginably'
    ],
    rowNames = {
      'frequently': 'häufig',
      'probably': 'wahrscheinlich',
      'occasionally': 'gelegentlich',
      'imaginably': 'entfernt vorstellbar',
      'unlikely': 'unwahrscheinlich',
      'unimaginably': 'unvorstellbar'
    },
    cols = [
      'insignificantly',
      'marginally',
      'critically',
      'catastrophically'
    ],
    colNames = {
      'insignificantly': 'unwesentlich',
      'marginally': 'geringfügig',
      'critically': 'kritisch',
      'catastrophically': 'katastrophal'
    },
    defaults = {};

  var Constructor = function(element, options) {
    if (!element || !$(element).is('table') || !options || !$.isArray(options.values)) {
      throw new Error('Parameters invalid or missing!');
    }
    this.element = element;
    this.options = $.extend({}, defaults, options);
  };

  var module = Constructor.prototype;

  module.render = function() {
    var table = this.element,
      values = this.options.values;
    table.addClass('riskGraph');
    $.each(rows, function(i, rowId) {
      var row = $('<tr></tr>').attr('id', rowId).appendTo(table);
      $.each(cols, function(j, colClass) {
        if (j == 0) {
          $('<td></td>').addClass('rowName').text(rowNames[rowId]).appendTo(row);
        }

        $('<td></td>').addClass(colClass)
          .append($('<a></a>')
            .attr('href', 'javascript:alert("' + values[i][j][1] + '");').html(values[i][j][0])
          )
          .appendTo(row);
      });
    });

    var lastRow =...