feat(progressbar): value input can handle array of staked data (#2037)

* fix(progressbar): bs4 progressbar wip

* refactor(progressbar): get rid of unnecessary input params, rework bs3 stacked demo

* refactor(progressbar): string setters, rename vars, remove unnecessary operations

Author: valorkin

demo/src/app/components/+progressbar/demos/bs3/stacked/stacked.html

@@ -1,10 +1,7 @@
-<bs-progress>
-  <bar *ngFor="let baz of stacked" [value]="baz.value" [type]="baz?.type">
-    <span *ngIf="baz.value > 5">{{baz?.value}}%</span>
-  </bar>
-</bs-progress>
-
+<div class="row col-lg-12">
+  <progressbar class="progress" [value]="stacked" max="100"></progressbar>
+</div>
+<br>
 <div class="row col-md-12">
-  <button type="button" class="btn btn-sm btn-primary" (click)="randomStacked()" style="margin: 15px 0;">Randomize
-  </button>
+  <button type="button" class="btn btn-sm btn-primary" (click)="randomStacked()">Randomize</button>
 </div>

demo/src/app/components/+progressbar/demos/bs3/stacked/stacked.ts

@@ -5,7 +5,6 @@ import { Component } from '@angular/core';
   templateUrl: './stacked.html'
 })
 export class DemoProgressbarStackedComponent {
-  public max: number = 200;
   public type: string;
   public stacked: any[] = [];
 
@@ -17,16 +16,14 @@ export class DemoProgressbarStackedComponent {
     let types = ['success', 'info', 'warning', 'danger'];
 
     this.stacked = [];
-    let total = 0;
     let n = Math.floor((Math.random() * 4) + 1);
     for (let i = 0; i < n; i++) {
       let index = Math.floor((Math.random() * 4));
-      let value = Math.floor((Math.random() * 30) + 1);
-      total += value;
+      let value = Math.floor((Math.random() * 27) + 3);
       this.stacked.push({
         value,
-        max: value, // i !== (n - 1) ? value : 100,
-        type: types[index]
+        type: types[index],
+        label: value + ' %'
       });
     }
   }

demo/src/app/components/+progressbar/demos/bs4/dynamic/dynamic.html

@@ -1,13 +1,13 @@
-<progress class="progress progress-striped progress-animated" [max]="max" [value]="dynamic">
+<progressbar class="progress progress-striped progress-animated" [max]="max" [value]="dynamic">
   <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span>
-</progress>
+</progressbar>
 
 <small><em>No animation</em></small>
-<progress class="progress progress-success" [value]="dynamic" [max]="100"><b>{{dynamic}}%</b></progress>
+<progressbar class="progress progress-success" [value]="dynamic" [max]="100" type="success"><b>{{dynamic}}%</b></progressbar>
 
 <small><em>Object (changes type based on value)</em></small>
-<progress class="progress progress-striped progress-animated active progress-{{ type }}" [value]="dynamic" [max]="max">
+<progressbar class="progress progress-striped progress-animated" [value]="dynamic" [max]="max" [type]="type">
   {{type}} <i *ngIf="showWarning">!!! Watch out !!!</i>
-</progress>
+</progressbar>
 
 <button type="button" class="btn btn-sm btn-primary" (click)="random()">Randomize</button>

demo/src/app/components/+progressbar/demos/bs4/stacked/stacked.html

@@ -1,16 +1,7 @@
 <div class="row col-lg-12">
-  <!-- todo: implement as component -->
-  <progress *ngFor="let baz of stacked"
-            class="progress progress-{{ baz?.type }}"
-            style="float: left;"
-            [ngStyle]="{width: baz.value + '%'}"
-            [value]="baz.value" [max]="baz.max">
-    <span *ngIf="baz.value > 3">{{baz?.value}}%</span>
-  </progress>
-  <!-- gray background -->
-  <progress class="progress" value="0" max="100" style="width: 100%;"></progress>
+  <progressbar class="progress" [value]="stacked" max="100"></progressbar>
 </div>
-
+<br>
 <div class="row col-md-12">
     <button type="button" class="btn btn-sm btn-primary" (click)="randomStacked()">Randomize</button>
 </div>

demo/src/app/components/+progressbar/demos/bs4/stacked/stacked.ts

@@ -5,7 +5,6 @@ import { Component } from '@angular/core';
   templateUrl: './stacked.html'
 })
 export class DemoProgressbarStackedBs4Component {
-  public max: number = 200;
   public type: string;
   public stacked: any[] = [];
 
@@ -17,16 +16,14 @@ export class DemoProgressbarStackedBs4Component {
     let types = ['success', 'info', 'warning', 'danger'];
 
     this.stacked = [];
-    let total = 0;
     let n = Math.floor((Math.random() * 4) + 1);
     for (let i = 0; i < n; i++) {
       let index = Math.floor((Math.random() * 4));
-      let value = Math.floor((Math.random() * 30) + 1);
-      total += value;
+      let value = Math.floor((Math.random() * 27) + 3);
       this.stacked.push({
         value,
-        max: value, // i !== (n - 1) ? value : 100,
-        type: types[index]
+        type: types[index],
+        label: value + ' %'
       });
     }
   }

demo/src/app/components/+progressbar/demos/bs4/static/static.html

@@ -1,11 +1,11 @@
 <div class="row">
   <div class="col-sm-4">
-    <progress class="progress" value="55" max="100"></progress>
+    <progressbar class="progress" value="55" max="100"></progressbar>
   </div>
   <div class="col-sm-4">
-    <progress class="progress progress-striped" value="22" max="100" type="warning">22%</progress>
+    <progressbar class="progress progress-striped" value="22" max="100" type="warning">22%</progressbar>
   </div>
   <div class="col-sm-4">
-    <progress class="progress progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progress>
+    <progressbar class="progress progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progressbar>
   </div>
 </div>

demo/src/ng-api-doc.ts

@@ -1443,8 +1443,8 @@ export const ngdoc: any = {
       },
       {
         "name": "value",
-        "type": "number",
-        "description": "<p>current value of progress bar </p>\n"
+        "type": "number | any[]",
+        "description": "<p>current value of progress bar. Could be a number or array of objects like {&quot;value&quot;:15,&quot;type&quot;:&quot;info&quot;,&quot;label&quot;:&quot;15 %&quot;} </p>\n"
       }
     ],
     "outputs": [],

src/progressbar/bar.component.ts

@@ -1,6 +1,7 @@
-import { Component, Host, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Host, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
 
 import { ProgressDirective } from './progress.directive';
+import { isBs3 } from '../utils/ng2-bootstrap-config';
 
 // todo: number pipe
 // todo: use query from progress?
@@ -10,8 +11,8 @@ import { ProgressDirective } from './progress.directive';
   <div class="progress-bar"
     style="min-width: 0;"
     role="progressbar"
-    [ngClass]="type && 'progress-bar-' + type"
-    [ngStyle]="{width: (percent < 100 ? percent : 100) + '%', transition: transition}"
+    [ngClass]="type && 'progress-bar-' + type + ' bg-' + type"
+    [ngStyle]="{width: (isBs3 ? (percent < 100 ? percent : 100) + '%' : '100%'), transition: transition}"
     aria-valuemin="0"
     [attr.aria-valuenow]="value"
     [attr.aria-valuetext]="percent.toFixed(0) + '%'"
@@ -28,6 +29,10 @@ export class BarComponent implements OnInit, OnDestroy {
   public get value():number {
     return this._value;
   }
+  @HostBinding('style.width.%') get setBarWidth(){
+    this.recalculatePercentage();
+    return this.isBs3 ? '' : this.percent;
+  };
 
   public set value(v:number) {
     if (!v && v !== 0) {
@@ -37,6 +42,9 @@ export class BarComponent implements OnInit, OnDestroy {
     this.recalculatePercentage();
   }
 
+  public get isBs3(): boolean {
+    return isBs3();
+  }
   public percent:number = 0;
   public transition:string;
   public progress:ProgressDirective;

src/progressbar/progressbar.component.ts

@@ -1,15 +1,24 @@
 import { Component, Input } from '@angular/core';
 import { ProgressbarConfig } from './progressbar.config';
+import { isBs3 } from '../utils';
 
 @Component({
   selector: 'progressbar',
   template: `
-    <div progress [animate]="animate" [max]="max">
-      <bar [type]="type" [value]="value">
+    <div progress [animate]="animate" [max]="max" [style.width]="!isBs3 ? '100%' : 'auto'">
+      <bar [type]="type" [value]="_value" *ngIf="!isStacked">
           <ng-content></ng-content>
       </bar>
+      <template [ngIf]="isStacked">
+        <bar *ngFor="let item of _value" [type]="item.type" [value]="item.value">{{item.label}}</bar>
+      </template>
     </div>
-  `
+  `,
+  styles: [`
+    :host {
+      width: 100%;
+    }
+  `]
 })
 export class ProgressbarComponent {
   /** if `true` changing value of progress bar will be animated (note: not supported by Bootstrap 4) */
@@ -18,8 +27,16 @@ export class ProgressbarComponent {
   @Input() public max:number;
   /** provide one of the four supported contextual classes: `success`, `info`, `warning`, `danger` */
   @Input() public type:string;
-  /** current value of progress bar */
-  @Input() public value:number;
+  /** current value of progress bar. Could be a number or array of objects like {"value":15,"type":"info","label":"15 %"} */
+  @Input() public set value(value: number | any[]) {
+    this.isStacked = Array.isArray(value);
+    this._value = value;
+  };
+  public isStacked: boolean = false;
+  public _value: number | any[];
+  public get isBs3(): boolean {
+    return isBs3();
+  }
 
   public constructor(config: ProgressbarConfig) {
     Object.assign(this, config);