Heatmap - Errorhistory

by Ercan Cicek

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.js"></script>
<div ng-controller="testCtrl">
  <div id="heat-chart-wrapper">
    <div class="date-area-wrapper" ng-repeat="dataSpot in data">
      <div class="date-area-container">
        <div class="date-container">
          <span>{{dataSpot.date}}</span>
        </div>
        <div class="details-wrapper">
          <div class="details-container" ng-repeat="passing in dataSpot.passings">
            <span>{{passing.time}}</span>
            <div class="status-box" ng-class="'status-' + statusBox.status" ng-repeat="statusBox in passing.sensorData"></div>
          </div>
        </div>
      </div>
      <div class="horizontal-line"></div>
    </div>
    <div class="labels-container">
      <span class="y-label" ng-repeat="label in allYLabels">{{label}}</span>
    </div>
  </div>
</div>

SCSS

$boxWidth: 60px;
$boxHeight: $boxWidth / 3;

#heat-chart-wrapper {
  position: relative;
  width: auto;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  margin: 16px;

  >.date-area-wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
   >.date-area-container {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      >.date-container {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        >span {
          font-weight: bold;
        }
      }

      >.details-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;

        >.details-container {
          position: relative;
          display: flex;
          flex-direction: row;
          &:nth-child(n + 2) {
            margin-top: 5px;
          }

          >span {
            margin-left: 24px;
            width: 60px;
            height: 19px;
          }

          >.status-box {
            width: $boxWidth;
            height: $boxHeight;

            &:nth-child(n + 2) {
              margin-left: 5px;
            }

            &.status-OK {
              background-color: #79D066;
            }

            &.status-ERROR {
              background-color: #FFFF54;
            }

            &.status-FAILURE {
              background-color: #FF6756;
            }
          }
        }
      }
    }
    > .horizontal-line {
      width: 100%;
      height: 1px;
      margin: 3px 0;
      background-color: #E2E2E2;
    }
  }
  > .labels-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    >.y-label {
      width: $boxWidth;
      height: $boxHeight;
      font-size: 11px;
      text-align: center;
      &:nth-child(n + 2) {
        margin-left: 5px;
      }
    }
  }
}

JavaScript

var app = angular.module("myApp", []);

app.controller('testCtrl', ['$scope', function($scope) {

  $scope.allYLabels = ['TruckView', 'WheelView', 'FleetFaults'];
  $scope.data = [{
      date: "17.06.2020",
      passings: [{
          time: "22:31",
          sensorData: [{
              name: "TruckView",
              status: "OK"
            },
            {
              name: "WheelView",
              status: "OK"
            },
            {
              name: "FleetFaults",
              status: "OK"
            }
          ]
        },
        {
          time: "17:57",
          sensorData: [{
              name: "TruckView",
              status: "OK"
            },
            {
              name: "WheelView",
              status: "ERROR"
            },
            {
              name: "FleetFaults",
              status: "OK"
            }
          ]
        },
        {
          time: "11:15",
          sensorData: [{
              name: "TruckView",
              status: "OK"
            },
            {
              name: "WheelView",
              status: "ERROR"
            },
            {
              name: "FleetFaults",
              status: "OK"
            }
          ]
        }
      ]
    },
    {
      date: "12.06.2020",
      passings: [{
          time: "22:11",
          sensorData: [{
              name: "TruckView",
              status: "OK"
            },
            {
              name: "WheelView",
              status: "ERROR"
            },
            {
              name: "FleetFaults",
              status: "OK"
            }
          ]
        },
        {
          time: "16:59",
          sensorData: [{
              name: "TruckView",
              status: "FAILURE"
            },
            {
              name: "WheelView",
              status: "ERROR"
            },
            {
              name: "FleetFaults",
              status: "OK"
            }
          ]
        },
        {
         ...