EPC template

by Zonedark

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl">
   <div id="EPC" class="EPC">
      <div class="leftPart">
         <div ng-repeat="bar in Bars" style="border-spacing:0 2px;display:table;z-index:5">
            <div class="bar" ng-style="bar.Style">
               <label>{{bar.Value}}</label>
               <label style="position:absolute;right:10px">{{bar.Tag}}</label>
            </div>
            <div class="arrow-right" ng-style="bar.Color" ng-show="bar.DisplayPointyEnd">

            </div>
         </div>
         <div>
            Bâtiment énergivore
         </div>
      </div>
      <div class="ActualValueLine" ng-style="{top: getActualValuePosition()}">
         <div class="testDotLine">

         </div>
         <div class="ActualBar">
            <div class="arrow-left">

            </div>
            <div class="ActualBarValue">
               {{ActualValue}}
            </div>
            <div class="ActualBarUnit">
               {{Unit}}
            </div>
         </div>
      </div>

      <div class="rightPart">
			&nbsp;


      </div>
   </div>
</div>

CSS

.bar {
   border: none;
   z-index: 5;
   position: relative;
   padding-left: 10px;
   height: 30px;
   line-height: 30px;
   float: left;
}

.arrow-right {
   width: 0;
   height: 0;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   float: left;
   border-left: 15px solid black;
   z-index: 5;
}

.arrow-left {
   width: 0;
   height: 0;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   float:left;
   border-right: 15px solid black;
   z-index: 5;
}

.EPC {
   width: 600px;
	height:600px;
   position: relative;
}

.leftPart {
   width: 60%;
   border-right: solid 1px black;
   float: left;
   z-index: 1;
   position: relative;
}

.rightPart {
   width: 40%;
	height:100%;
   float: left;
}

.ActualBar {
   float: left;
   border: none;
   z-index: 5;
   margin-left: 5px;
}

.testDotLine {
   height: 15px;
   float: left;
   width: 380px;
   max-width: 100%;
   border-bottom: dashed 1px black;
   z-index: 0;
}

.ActualBarValue {
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 5px;
   height: 30px;
   background-color: black;
   color: white;
   float:left;
}

.ActualBarUnit {
   padding-left: 10px;
   padding-top: 5px;
   height: 30px;
   background-color: white;
   color: black;

}

.ActualValueLine {
   position: absolute;
   left: 0;
}

JavaScript

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

myApp.controller('MyCtrl', ['$scope', function($scope) {
   $scope.name = "Angular";
	$scope.Unit = "kWh Ep/m².an";
   $scope.Bars = [{
      Value: "≤ 50",
      Tag: "A",
		DisplayPointyEnd: true,
      Color: {
         'border-left-color': 'rgb(0, 166, 82)'
      },
      Style: {
         'width': '80px',
         'background-color': 'rgb(0, 166, 82)',
         'color': 'black'
      }
   }, {
      Value: "50 à 90",
      Tag: "B",
		DisplayPointyEnd: true,
      Color: {
         'border-left-color': 'rgb(80, 184, 73)'
      },
      Style: {
         'width': '110px',
         'background-color': 'rgb(80, 184, 73)',
         'color': 'black'
      }
   }, {
      Value: "91 à 150",
      Tag: "C",
		DisplayPointyEnd: true,
      Color: {
         'border-left-color': 'rgb(192, 215, 49)'
      },
      Style: {
         'width': '140px',
         'background-color': 'rgb(192, 215, 49)',
         'color': 'black'
      }
   }, {
      Value: "151 à 230",
      Tag: "D",
		DisplayPointyEnd: true,
      Color: {
         'border-left-color': 'rgb(254, 242, 0)'
      },
      Style: {
         'width': '170px',
         'background-color': 'rgb(254, 242, 0)',
         'color': 'black'
      }
   }, {
      Value: "231 à 330",
      Tag: "E",
		DisplayPointyEnd: true,
      Color: {
         'border-left-color': 'rgb(252, 185, 19)'
      },
      Style: {
         'width': '200px',
         'background-color': 'rgb(252, 185, 19)',
         'color': 'black'
      }
   }, {
      Value: "331 à 450",
      Tag: "F",
		DisplayPointyEnd: true,
      Color: {
         'border-left-color': 'rgb(243, 112, 32)'
      },
      Style: {
         'width': '230px',
         'background-color': 'rgb(243, 112, 32)',
         'color': 'white'
      }
   }, {
      Value: "451 à 590",
      Tag: "G",
		DisplayPointyEnd: true,
      Color: {
         'border-left-color': 'rgb(237, 27, 36)'
      },
      Style: {
         'width':...