FIX: alignment + offset text display

src/main/angular/package.json

@@ -7,7 +7,7 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "deploy": "scp -P2222 -r dist/angular/browser/* root@10.255.0.1:/srv/Data/www/ && git tag \"DEPLOY-FRONT---$(date +'%F---%H-%M-%S')\""
+    "deploy": "ng build && scp -P2222 -r dist/angular/browser/* root@10.255.0.1:/srv/Data/www/ && git tag \"DEPLOY-FRONT---$(date +'%F---%H-%M-%S')\""
   },
   "private": true,
   "dependencies": {

src/main/angular/src/app/electro/energy/electro-energy.component.html

@@ -6,7 +6,7 @@
 
   <div class="option">
     <button class="arrowLeft" (click)="shiftAlignment(+1)">&larr;</button>
-    {{ alignment.display }} {{ offset > 0 ? -offset : '' }}
+    {{ offset > 0 ? -offset : '' }}{{ alignment === Alignment.FIVE && offset > 0 ? 'x' : '' }} {{ alignment.display }}{{ offset > 1 ? alignment.plural : '' }}
     <button class="arrowRight" (click)="shiftAlignment(-1)">&rarr;</button>
   </div>
 

src/main/angular/src/app/electro/energy/electro-energy.component.ts

@@ -15,6 +15,8 @@ import {SeriesService} from '../../series/series.service';
 })
 export class ElectroEnergyComponent implements OnInit, OnDestroy {
 
+  protected readonly Alignment = Alignment;
+
   protected aggregations: AggregationWrapperDto = AggregationWrapperDto.EMPTY;
 
   protected alignment: Alignment = Alignment.DAY;

src/main/angular/src/app/series/Alignment.ts

@@ -4,21 +4,22 @@ export class Alignment {
 
   private static readonly values: Alignment[] = [];
 
-  static readonly FIVE = new Alignment('FIVE', '5 Minuten', Alignment.offsetTitleFive);
+  static readonly FIVE = new Alignment('FIVE', '5 Minuten', '', Alignment.offsetTitleFive);
 
-  static readonly HOUR = new Alignment('HOUR', 'Stunde', Alignment.offsetTitleHour);
+  static readonly HOUR = new Alignment('HOUR', 'Stunde', 'n', Alignment.offsetTitleHour);
 
-  static readonly DAY = new Alignment('DAY', 'Tag', Alignment.offsetTitleDay);
+  static readonly DAY = new Alignment('DAY', 'Tag', 'e', Alignment.offsetTitleDay);
 
-  static readonly WEEK = new Alignment('WEEK', 'Woche', Alignment.offsetTitleWeek);
+  static readonly WEEK = new Alignment('WEEK', 'Woche', 'n', Alignment.offsetTitleWeek);
 
-  static readonly MONTH = new Alignment('MONTH', 'Monat', Alignment.offsetTitleMonth);
+  static readonly MONTH = new Alignment('MONTH', 'Monat', 'e', Alignment.offsetTitleMonth);
 
-  static readonly YEAR = new Alignment('YEAR', 'Jahr', Alignment.offsetTitleYear);
+  static readonly YEAR = new Alignment('YEAR', 'Jahr', 'e', Alignment.offsetTitleYear);
 
   constructor(
     readonly name: string,
     readonly display: string,
+    readonly plural: string,
     readonly offsetTitle: (offset: number, locale: string) => string
   ) {
     Alignment.values.push(this);

src/main/angular/src/app/shared/percent-bar/percent-bar.component.less

@@ -1,17 +1,21 @@
 @import "../../../../colors.less";
 
 .bar {
-  position: relative;
+  display: flex;
-  color: white;
   border-radius: 0.5em;
 
   .part {
-    float: left;
     white-space: nowrap;
     font-size: 40%;
 
     .text {
-      padding-left: 0.25em;
+      padding-left: 0.4em;
+    }
+  }
+
+  .part:first-child {
+    .text:first-child {
+      padding-left: 0.8em;
     }
   }