chore(demo): progress chart

Author: jkuri

package-lock.json

@@ -41,6 +41,7 @@
     "@ngtools/webpack": "^1.6.0",
     "@types/body-parser": "^1.16.4",
     "@types/cors": "^2.8.1",
+    "@types/d3": "^4.10.1",
     "@types/express": "^4.0.36",
     "@types/jasmine": "^2.5.53",
     "@types/multer": "^1.3.2",
@@ -53,6 +54,7 @@
     "core-js": "^2.5.0",
     "cors": "^2.8.4",
     "css-loader": "^0.28.4",
+    "d3": "^4.10.2",
     "express": "^4.15.4",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
@@ -79,6 +81,7 @@
     "style-loader": "^0.18.2",
     "to-string-loader": "^1.1.5",
     "ts-node": "^3.3.0",
+    "tslint": "^5.7.0",
     "typescript": "^2.4.2",
     "webpack": "^3.5.4",
     "webpack-dev-server": "^2.7.1",

package.json

@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { NgUploaderModule } from './ngx-uploader/module/ngx-uploader.module';
 import { AppComponent } from './app.component';
 import { AppHomeComponent } from './components/app-home';
+import { AppProgressChartComponent } from './components/app-progress-chart';
 
 @NgModule({
   imports: [
@@ -16,7 +17,7 @@ import { AppHomeComponent } from './components/app-home';
   providers: [
     { provide: APP_BASE_HREF, useValue: '/' }
   ],
-  declarations: [ AppComponent, AppHomeComponent ],
+  declarations: [ AppComponent, AppHomeComponent, AppProgressChartComponent ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule {}

src/app.module.ts

@@ -1,4 +1,28 @@
 <div class="hero is-fullheight">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns">
+        <div class="column is-12">
+          <div class="browser-window">
+            <div class="browser-topbar">
+              <span class="dot red"></span>
+              <span class="dot yellow"></span>
+              <span class="dot green"></span>
+              <span class="browser-title">
+                http://ngx-uploader.com
+              </span>
+            </div>
+            <div class="browser-container">
+              <app-progress-chart [percent]="'20'"></app-progress-chart>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- <div class="hero is-fullheight">
   <div class="hero-body">
     <div class="container">
       <div class="columns">
@@ -38,4 +62,6 @@ <h1>Drag & Drop</h1>
       </div>
     </div>
   </div>
-</div>
+</div> -->
+
+

src/assets/public/images/document.svg

@@ -18,6 +18,7 @@ export class AppHomeComponent {
   humanizeBytes: Function;
   dragOver: boolean;
   options: UploaderOptions;
+  percent: number;
 
   constructor() {
     this.options = { concurrency: 1 };

src/components/app-home/app-home.component.html

@@ -0,0 +1,3 @@
+<div class="progress-chart">
+  <img src="images/document.svg">
+</div>

src/components/app-home/app-home.component.ts

@@ -0,0 +1,78 @@
+import { Component, Input, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import { pie, select, arc, interpolate, easeCubic } from 'd3';
+
+@Component({
+  selector: 'app-progress-chart',
+  templateUrl: 'app-progress-chart.component.html'
+})
+export class AppProgressChartComponent implements OnChanges {
+  @Input() percent: number;
+
+  el: HTMLElement;
+  ratio: number;
+  line: any;
+  chart: any;
+
+  constructor(private elementRef: ElementRef) { }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.el) {
+      this.el = this.elementRef.nativeElement.querySelector('.progress-chart');
+      this.render();
+    }
+
+    this.ratio = this.percent / 100;
+    this.animate();
+  }
+
+  render(): void {
+    const w = 230;
+    const h = 230;
+
+    const outerRadius = w / 2;
+    const innerRadius = 105;
+
+    const svg = select(this.el)
+      .append('svg')
+      .attr('width', w)
+      .attr('height', h);
+
+    const g = svg.append('g')
+      .attr('transform', `translate(${w / 2}, ${(h / 2)})`);
+
+    const a = arc()
+      .innerRadius(innerRadius)
+      .outerRadius(outerRadius)
+      .startAngle(0)
+      .endAngle(2 * Math.PI);
+
+    this.line = arc()
+      .innerRadius(innerRadius)
+      .outerRadius(outerRadius)
+      .startAngle(0);
+
+    this.chart = g.append('path')
+      .datum({ endAngle: 0 })
+      .attr('d', this.line)
+      .attr('fill', '#4083FF');
+  }
+
+  arcTween = (transition: any, newAngle: number) => {
+    transition.attrTween('d', d => {
+      const ipolate = interpolate(d.endAngle, newAngle);
+
+      return (t) => {
+        d.endAngle = ipolate(t);
+        return this.line(d);
+      };
+    });
+  }
+
+  animate(): void {
+    this.chart.transition()
+      .duration(500)
+      .ease(easeCubic)
+      .call(this.arcTween, ((2 * Math.PI) * this.ratio))
+  }
+
+}

src/components/app-progress-chart/app-progress-chart.component.html

@@ -0,0 +1 @@
+export * from './app-progress-chart.component';

src/components/app-progress-chart/app-progress-chart.component.ts

@@ -2,11 +2,7 @@ import { EventEmitter } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
-import { Subscriber } from 'rxjs/Subscriber';
-import 'rxjs/add/observable/of';
-import 'rxjs/add/observable/from';
 import 'rxjs/add/operator/mergeMap';
-import 'rxjs/add/operator/map';
 
 export interface BlobFile extends Blob {
   name: string;