import { Component } from '@angular/core';
import { DataService } from './data.service';
import { IData } from './data.interface';
@Component({
selector: 'my-app',
templateUrl: 'app/app.html'
//template: `<h1>Hello {{name}}</h1><pie-chart></pie-chart><bar-chart></bar-chart>`,
})
export class AppComponent {
name = 'Angular';
passedFilter : boolean = true;
UnpassedFilter : boolean = true;
dataOrvisual : boolean = true;
customer: any = [];
product: any = [];
staff:any = [];
data: IData[];
mobileUpDown : boolean = false;
filterContent:any = {'customer':'All','productname':'All','operatorname':'All','passed':'true','unpassed':'true'};
constructor(private dataService: DataService) { }
customerChange(value):void{
this.filterContent.customer = value;
this.dataService.filterData(this.filterContent);
}
productChange(value):void{
this.filterContent.productname = value;
this.dataService.filterData(this.filterContent);
}
staffChange(value):void{
this.filterContent.operatorname = value;
this.dataService.filterData(this.filterContent);
}
ngOnInit() {
let a = this.dataService;
let data = a.actualData();
this.data = data;
let customer = data.map(function(obj) { return obj.customer; });
this.customer = customer.filter(function(v,i) { return customer.indexOf(v) == i; });
let product = data.map(function(obj) { return obj.productname; });
this.product = product.filter(function(v,i) { return product.indexOf(v) == i; });
let staff = data.map(function(obj) { return obj.operatorname; });
this.staff = staff.filter(function(v,i) { return staff.indexOf(v) == i; });
}
addData(): void {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { PieChartComponent } from './pie-chart.component';
import {BarChartComponent} from './bar-chart.component';
import { TableViewComponent } from './table.component';
import { DataService } from './data.service';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, PieChartComponent, BarChartComponent , TableViewComponent],
bootstrap: [ AppComponent ],
providers: [DataService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<!DOCTYPE html>
<html>
<head>
<title>Angular Quickstart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
/*reset classes*/
.padding-0{
padding:0px;
}
.pad-top-1em{
padding-top:1em;
}
.pad-top-5em{
padding-top:.5em;
}
.pad-bot-1em{
padding-bottom:1em;
}
.pad-right-1em{
padding-right:1em;
}
.mar-bot-1em{
margin-bottom:1em;
}
/*Common Classes*/
.primary-bg{
background: #337ab7;
}
.secondary-bg{
background: #FAFAFA;
}
.header-font{
font-size: 18px;
}
.text-white{
color:white;
}
.display-inline{
display: inline;
}
.dataVis{
padding: 5px;
font-size: 10px;
border: 1px solid transparent;
border-radius: 9px 9px 0px 0px;
background-color: #337ab7;
color:white;
}
.dataVis span{
cursor:pointer;
}
label input{
margin-right: 5px !important;
}
/*custom Classes*/
.custom-select{
height: 24px;
padding: 2px 10px;
}
.custom-boxContainer{
border: 1px solid #cccccc;
text-align: center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #999 0px 0px 4px;
-moz-box-shadow: #999 0px 0px 4px;
box-shadow: #999 0px 0px 4px;
}
.left-curve-button{
padding: 3px;
border: 1px solid gray;
border-radius: 10px 0px 0px 10px;
cursor: pointer;
font-size: 10px;
}
.right-curve-button{
padding: 3px;
border: 1px solid gray;
border-radius: 0px 10px 10px 0px;
cursor: pointer;
font-size: 10px;
}
.checkedCurveButton{
background: #337ab7;
color:white;
}
.mobileFilter{
background: #6baed6;
padding-top: .5em;
}
.form-group label{
margin-top: 3px;
font-size: 12px;
text-align: right;
margin-right: 5px;
}
.customDate{
width: 170px;
display: inline-block;
margin-left: 18px;
}
.customDateBtn{
width: 50px;
display: inline-block;
}
.customDate label{
float: left;
font-size: 12px;
}
.customDate input{
width: 130px;
height: 20px;
}
.spinner {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
}
.cube1, .cube2 {
background-color: #337ab7;
width: 15px;
height: 15px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
animation: sk-cubemove 1.8s infinite ease-in-out;
}
.cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
@-webkit-keyframes sk-cubemove {
25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
100% { -webkit-transform: rotate(-360deg) }
}
@keyframes sk-cubemove {
25% {
transform: translateX(42px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
} 50% {
transform: translateX(42px) translateY(42px) rotate(-179deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
} 50.1% {
transform: translateX(42px) translateY(42px) rotate(-180deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
} 75% {
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
} 100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
</style>
<!-- Polyfills -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app><div class="spinner">
<div class="cube1"></div>
<div class="cube2"></div>
</div></my-app>
</body>
</html>
<!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
// Copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs@5.0.1',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
'typescript': 'npm:typescript@2.0.10/lib/typescript.js',
'd3': 'https://d3js.org/d3.v3.min.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'd3': {
defaultExtension: "js"
}
}
});
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<!--<h1>Hello {{name}}</h1><pie-chart></pie-chart><bar-chart></bar-chart>-->
<div class="container-fluid padding-0">
<div class="col-xs-12 primary-bg">
<div class="container text-center">
<h4 class="text-white header-font">AI Quote Dashboard</h4>
</div>
</div>
<div class="col-xs-12 secondary-bg pad-top-5em" [hidden]="mobileUpDown">
<div class="container">
<div class="col-xs-12 text-center pad-bot-1em">
<div class="display-inline pad-right-1em">
<span class="left-curve-button" (click)="dataOrvisual = !dataOrvisual" [ngClass]="dataOrvisual ? 'checkedCurveButton' : 'unchecked'">visual view</span>
<span class="right-curve-button" (click)="dataOrvisual = !dataOrvisual" [ngClass]="dataOrvisual ? 'unchecked' : 'checkedCurveButton'">Data view</span>
</div>
<div class="display-inline">
<span class="left-curve-button" (click)="passedFilter = !passedFilter" [ngClass]="passedFilter ? 'checkedCurveButton' : 'unchecked'">Passed</span>
<span class="right-curve-button" (click)="UnpassedFilter = !UnpassedFilter" [ngClass]="UnpassedFilter ? 'checkedCurveButton' : 'unchecked'" >Unpassed</span>
</div>
</div>
<div class="col-xs-12">
<div class="col-xs-12 col-sm-4">
<div class="form-group col-xs-12 padding-0">
<label class="col-xs-4 col-md-3 padding-0">Customer list:</label>
<div class="col-xs-8 padding-0">
<select class="form-control custom-select" (change)='customerChange($event.target.value)'>
<option >All</option>
<option *ngFor="let d of customer" [value]="d">{{d}}</option>
</select>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="form-group col-xs-12 padding-0">
<label class="col-xs-4 col-md-3 padding-0">Product list:</label>
<div class="col-xs-8 padding-0">
<select class="form-control custom-select" #t (change)='productChange($event.target.value)'>
<option >All</option>
<option *ngFor="let d of product" [value]="d">{{d}}</option>
</select>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="form-group col-xs-12 padding-0">
<label class="col-xs-4 col-md-3 padding-0">Staff list:</label>
<div class="col-xs-8 padding-0">
<select class="form-control custom-select" #t (change)='staffChange($event.target.value)'>
<option>All</option>
<option *ngFor="let d of staff" [value]="d">{{d}}</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 hidden-sm hidden-md hidden-lg mobileFilter">
<div class="col-xs-10">
<p class="text-center">Filters</p>
</div>
<div class="col-xs-2" (click)="mobileUpDown = !mobileUpDown" [hidden]="mobileUpDown">
<span class="glyphicon glyphicon-chevron-up"></span>
</div>
<div class="col-xs-2" (click)="mobileUpDown = !mobileUpDown" [hidden]="!mobileUpDown">
<span class="glyphicon glyphicon-chevron-down"></span>
</div>
</div>
<div [hidden]="!dataOrvisual" class="col-xs-12 pad-top-1em">
<div class="container pad-top-1em">
<div class="col-xs-12 col-sm-5 col-sm-offset-1 secondary-bg mar-bot-1em padding-0 custom-boxContainer">
<pie-chart></pie-chart>
</div>
<div class="col-xs-12 col-sm-5 col-sm-offset-1 secondary-bg mar-bot-1em padding-0 custom-boxContainer">
<bar-chart></bar-chart>
</div>
</div>
</div>
<div [hidden]="dataOrvisual" class="col-xs-12 pad-top-1em">
<table-view></table-view>
</div>
</div>
import { Component, ElementRef, ViewChild, AfterViewInit } from "@angular/core";
import { IData } from './data.interface';
import { DataService } from './data.service';
import * as D3 from "d3";
@Component({
selector: "pie-chart",
templateUrl: "app/pie-chart.html"
// styles: ['div {padding:3em}']
})
export class PieChartComponent implements AfterViewInit {
@ViewChild("containerPieChart") element: ElementRef;
dataOrvisual : boolean = true;
private host: D3.Selection<any>;
private svg: D3.Selection<any>;
private width: number;
private height: number;
private radius: number;
private htmlElement: HTMLElement;
private pieData: any = [{'key':'completed','values':0},{'key':'NotListed','values':0}];
constructor(private dataService: DataService) { }
ngAfterViewInit() {
this.htmlElement = this.element.nativeElement;
this.host = D3.select(this.htmlElement);
let parseDate = D3.time.format("%d-%m-%Y").parse
let tempDate:string = '04-08-2017';
let completedQuotes:number = 0;
let notListedQuotes:number = 0;
this.dataService.$data.subscribe(data => {
this.pieData = [{'key':'completed','values':0},{'key':'NotListed','values':0}];
completedQuotes = 0;
notListedQuotes = 0;
data.forEach(function(value){
if(parseDate(value.acquisitiondate).toString() == parseDate(tempDate).toString() && parseDate(value.quotedate) && parseDate(value.acquisitiondate).toString() == parseDate(value.quotedate).toString()){
completedQuotes++;
}else if(parseDate(value.acquisitiondate).toString() == parseDate(tempDate).toString()){
notListedQuotes++;
}
});
this.pieData[0].values = completedQuotes;
this.pieData[1].values = notListedQuotes;
if(completedQuotes || notListedQuotes){
this.setup();
this.buildSVG();
this.buildPie();
}else{
this.host.html("");
this.svg = this.host.append("p").text("No Relevent Data to Show");
}
});
}
private setup(): void {
this.width = 250;
this.height = 250;
this.radius = Math.min(this.width, this.height) / 2;
}
private buildSVG(): void {
this.host.html("");
this.svg = this.host.append("svg")
.attr("viewBox", `0 0 ${this.width} ${this.height}`)
.append("g")
.attr("transform", `translate(${this.width / 2},${this.height / 2})`);
}
private buildPie(): void {
let pie = D3.layout.pie();
let values = this.pieData.map(data => data.values);
let arcSelection = this.svg.selectAll(".arc")
.data(pie(values))
.enter()
.append("g")
.attr("class", "arc");
this.populatePie(arcSelection);
}
private populatePie(arcSelection: D3.Selection<D3.layout.pie.Arc<number>>): void {
let innerRadius = this.radius - 50;
let outerRadius = this.radius - 10;
let pieColor = D3.scale.category20c();
let arc = D3.svg.arc<D3.layout.pie.Arc<number>>()
.outerRadius(outerRadius);
arcSelection.append("path")
.attr("d", arc)
.attr("fill", (datum, index) => {
return pieColor(this.pieData[index].key);
});
arcSelection.append("text")
.attr("transform", (datum: any) => {
datum.innerRadius = 0;
datum.outerRadius = outerRadius;
return "translate(" + arc.centroid(datum) + ")";
})
.text((datum, index) => (this.pieData[index].key +"("+this.pieData[index].values+")" ) )
.style("text-anchor", "middle");
}
}
<div class="col-xs-12 text-center dataVis">
<span (click)="dataOrvisual = true">Visual View</span>
<span>|</span>
<span (click)="dataOrvisual = false">Data View</span>
</div>
<div [hidden]="!dataOrvisual" class="col-xs-12">
<div #containerPieChart></div>
</div>
<div [hidden]="dataOrvisual" class="col-xs-12">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Label</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let d of pieData">
<td [innerHTML]="d.key"></td>
<td [innerHTML]="d.values"></td>
</tr>
</tbody>
</table>
</div>
</div>
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { IData } from './data.interface';
@Injectable()
export class DataService {
private mockData: IData[] =[{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "01-08-2017",
"quotedate": "01-08-2017",
"duedate": "01-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "27-07-2017",
"quotedate": "27-07-2017",
"duedate": "27-07-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "27-07-2017",
"quotedate": "27-07-2017",
"duedate": "27-07-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "27-07-2017",
"quotedate": "27-07-2017",
"duedate": "27-07-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "01-08-2017",
"quotedate": "01-08-2017",
"duedate": "01-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "04-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "01-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "27-07-2017",
"quotedate": "27-07-2017",
"duedate": "27-07-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "10-08-2017",
"quotedate": "10-08-2017",
"duedate": "18-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "04-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "04-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "04-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "04-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "27-07-2017",
"quotedate": "27-07-2017",
"duedate": "27-07-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "27-07-2017",
"quotedate": "27-07-2017",
"duedate": "27-07-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "04-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "04-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "27-07-2017",
"quotedate": "27-07-2017",
"duedate": "27-07-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "27-07-2017",
"quotedate": "27-07-2017",
"duedate": "27-07-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "27-07-2017",
"quotedate": "27-07-2017",
"duedate": "27-07-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "03-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "03-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "03-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "03-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "03-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "03-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "03-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "03-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "03-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
},{
"id": 1,
"companyid": 11,
"folderid": 22,
"productname": "google",
"partname": "chrome",
"partno": 1,
"operatorname": "raj",
"operationtime": "20:30",
"weld": 0,
"bend": 0,
"quote": 0,
"inspection": 0,
"status": 0,
"acquisitiondate": "03-08-2017",
"quotedate": "04-08-2017",
"duedate": "04-08-2017",
"customer": "ford",
"enquiryno": "234",
"lot": ""
}];
private filteredData : IData[];
private dataSubject = new BehaviorSubject<IData[]>(this.mockData);
$data = this.dataSubject.asObservable();
actualData(){
return this.mockData;
}
filterData(newData: any) {
let filterData = this.mockData.filter(function(value){
return (newData.productname == 'All' || newData.productname == value.productname) && (newData.customer == 'All' || newData.customer == value.customer) && (newData.operatorname == 'All' || newData.operatorname == value.operatorname);
})
this.dataSubject.next(filterData);
}
}
export interface IData {
id: number,
companyid: number,
folderid: number,
productname: string,
partname: string,
partno: number,
operatorname:string,
operationtime:string,
weld: number,
bend: number,
quote: string,
inspection: string,
status: number,
acquisitiondate:string,
quotedate:string,
duedate:string,
customer:string,
enquiryno:number,
lot:number
}
import { Component, AfterViewInit } from "@angular/core";
import { IData } from './data.interface';
import { DataService } from './data.service';
@Component({
selector: "table-view",
templateUrl: "app/table-chart.html"
})
export class TableViewComponent{
data: IData[];
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.$data.subscribe(data => {
debugger;
this.data = data;
});
}
}
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>id</th>
<th>companyid</th>
<th>folderid</th>
<th>productname</th>
<th>partname</th>
<th>partno</th>
<th>operatorname</th>
<th>operationtime</th>
<th>weld</th>
<th>bend</th>
<th>quote</th>
<th>inspection</th>
<th>status</th>
<th>acquisitiondate</th>
<th>quotedate</th>
<th>duedate</th>
<th>customer</th>
<th>enquiryno</th>
<th>lot</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let d of data">
<td [innerHTML]="d.id"></td>
<td [innerHTML]="d.companyid"></td>
<td [innerHTML]="d.folderid"></td>
<td [innerHTML]="d.productname"></td>
<td [innerHTML]="d.partname"></td>
<td [innerHTML]="d.partno"></td>
<td [innerHTML]="d.operatorname"></td>
<td [innerHTML]="d.operationtime"></td>
<td [innerHTML]="d.weld"></td>
<td [innerHTML]="d.bend"></td>
<td [innerHTML]="d.quote"></td>
<td [innerHTML]="d.inspection"></td>
<td [innerHTML]="d.status"></td>
<td [innerHTML]="d.acquisitiondate"></td>
<td [innerHTML]="d.quotedate"></td>
<td [innerHTML]="d.duedate"></td>
<td [innerHTML]="d.customer"></td>
<td [innerHTML]="d.enquiryno"></td>
<td [innerHTML]="d.lot"></td>
</tr>
</tbody>
</table>
</div><!--end of .table-responsive-->
</div>
</div>
</div>
import { Component, ElementRef, ViewChild, AfterViewInit } from "@angular/core";
import { IData } from './data.interface';
import { DataService } from './data.service';
import * as D3 from "d3";
import {DatepickerModule} from 'ng2-bootstrap';
@Component({
selector: "bar-chart",
templateUrl: "app/bar-chart.html"
//styles: ['div {padding:3em}']
})
export class BarChartComponent implements AfterViewInit {
/*bar Chart filter components */
private customDate : boolean = false;
private custFirstDate = new Date();
private custLastDate = new Date(this.custFirstDate.getFullYear(), this.custFirstDate.getMonth(), 2);
private filterValue : string = "week";
private filterBar(value) : void{
this.customDate = (value == "custom")?true : false;
if(value == "week"){
this.filterValue = "week";
}else if(value == "month"){
this.filterValue = "month";
}else{
this.filterValue = "custom";
}
this.barChartBuilder();
}
private curr = new Date(); // get current date
private weekfirst = this.curr.getDate() - this.curr.getDay(); // First day is the day of the month - the day of the week
private weeklast = this.weekfirst + 6; // last day is the first day + 6
private firstdayweek = new Date(this.curr.setDate(this.weekfirst))
private lastdayweek = new Date(this.curr.setDate(this.weeklast))
private dateMonth = new Date();
private firstDayMonth = new Date(this.dateMonth.getFullYear(), this.dateMonth.getMonth(), 1);
private lastDayMonth = new Date(this.dateMonth.getFullYear(), this.dateMonth.getMonth() + 1, 0);
private displayData : any;
private getCustDateValues():void{
if(this.custFirstDate && this.custLastDate && (new Date(this.custFirstDate) < new Date(this.custLastDate))){
this.barChartBuilder();
}
}
private barChartBuilder():void{
var data : any ;
if(this.filterValue == "week"){
this.displayData = this.filteredValues(this.firstdayweek,this.lastdayweek);
this.ConstructBar(this.displayData);
}else if(this.filterValue == "month"){
this.displayData = this.filteredValues(this.firstDayMonth,this.lastDayMonth);
this.ConstructBar(this.displayData);
}else{
this.displayData = this.filteredValues(this.custFirstDate,this.custLastDate);
this.ConstructBar(this.displayData);
}
}
private filteredValues(first:any,last:any) : any{
var data = this.groupedBarData.filter(function(value){
var parts:any =value.date.split('-');
var mydate1 = new Date(parts[2],parts[1]-1,parts[0]);
if(!first.getMonth){
first = new Date(first);
last = new Date(last);
}
return (mydate1 >= first && mydate1 <= last)
});
return data;
}
private ConstructBar(data:any):void{
var groupData : any = data;
if(data.length > 0){
this.setup(groupData);
this.buildSVG(groupData);
this.buildBar(groupData);
}else{
this.host.html("");
this.svg = this.host.append("p").text("No Relevent Data to Show");
}
}
@ViewChild("containerBarChart") element: ElementRef;
dataOrvisual : boolean = true;
private host: D3.Selection<any>;
private svg: D3.Selection<any>;
private width: number;
private height:number;
private htmlElement: HTMLElement;
private margin : any;
private x0 : D3.Selection<any>;
private x1 : D3.Selection<any>;
private y : D3.Selection<any>;
private xAxis : D3.Selection<any>;
private yAxis : D3.Selection<any>;
private color :D3.Selection<any>;
private groupedBarData : {value:[{label:string,count:number}], date: string }[] = [];
constructor(private dataService: DataService) { }
ngAfterViewInit() {
this.htmlElement = this.element.nativeElement;
this.host = D3.select(this.htmlElement);
this.dataService.$data.subscribe(data => {
this.groupedBarData = [];
let listedDate = data.map(function(obj) { return obj.acquisitiondate; });
listedDate = listedDate.filter(function(v,i) { return listedDate.indexOf(v) == i; });
let CompletedDate = data.map(function(obj) { return obj.quotedate; });
CompletedDate = CompletedDate.filter(function(v,i) { return CompletedDate.indexOf(v) == i; });
let finalDates = listedDate.concat(CompletedDate.filter(function (item) {
return listedDate.indexOf(item) < 0 && item;
}));
for(let i=0;i<finalDates.length;i++){
let listedDate = 0;
let CompletedDate = 0;
data.forEach(function(value){
if(finalDates[i] == value.acquisitiondate){
listedDate++;
}
if(finalDates[i] == value.quotedate){
CompletedDate++;
}
});
this.groupedBarData.push({'value':[{'label':'listedDate','count':listedDate},{'label':'completedDate','count':CompletedDate}],'date':finalDates[i]});
}
//this.groupedBarData = [{'value':[{'label':'listedDate','count':20},{'label':'completedDate','count':40}],'date':'7-8-2017'}]
this.barChartBuilder();
});
}
private setup(data): void {
this.width = 550;
this.height = 550;
this. margin = {top: 20, right: 20, bottom: 40, left: 30};
this.x0 = D3.scale.ordinal().rangeRoundBands([0, this.width-200], .1);
this.x1 = D3.scale.ordinal();
this.y = D3.scale.linear().range([this.height-100, 0]);
this.xAxis = D3.svg.axis().scale(this.x0).tickSize(0).orient("bottom");
this.yAxis = D3.svg.axis().scale(this.y).orient("left");
this.color = D3.scale.ordinal().range(["#6baed6","#3182bd"]);
}
private buildSVG(data): void {
this.host.html("");
this.svg = this.host.append("svg")
.attr("viewBox", `0 0 ${this.width} ${this.height}`)
.append("g")
.attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
}
private buildBar(data): void{
let categoriesNames = data.map(function(d) { return d.date; });
let rateNames = data[0].value.map(function(d) { return d.label; });
this.x0.domain(categoriesNames);
this.x1.domain(rateNames).rangeRoundBands([0, this.x0.rangeBand()]);
this.y.domain([0, D3.max(data, function(categorie) { return D3.max(categorie.value, function(d) { return d.count; }); })]);
this.svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (this.height-100) + ")")
.call(this.xAxis);
this.svg.append("g")
.attr("class", "y axis")
.style('opacity','0')
.call(this.yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 3)
.attr("dy", ".3em")
// .style("text-anchor", "end")
// .style('font-weight','bold')
// .text("Value");
this.svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');
let tempX0 = this.x0;
let tempX1 = this.x1;
let tempColor = this.color;
let tempY = this.y;
let tempHeight = this.height-100;
this.svg.selectAll(".slice")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform",function(d) { return "translate(" + tempX0(d.date) + ",0)"; })
//.attr("transform",function(d) { return "translate(0,0)"; })
.selectAll("rect")
.data(function(d) { return d.value; })
.enter().append("rect")
.attr("width", this.x1.rangeBand())
.attr("x", function(d) { return tempX1(d.label); })
.style("fill", function(d) { return tempColor(d.label) })
.attr("y", function(d) { return tempY(0); })
.attr("height", function(d) { return tempHeight - tempY(0); })
.transition()
.delay(function (d) {return Math.random()*1000;})
.duration(1000)
.attr("y", function(d) { return tempY(d.count); })
.attr("height", function(d) { return tempHeight - tempY(d.count); });
let legends = this.svg.selectAll(".legend")
.data(data[0].value.map(function(d) { return d.label; }).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d,i) { return "translate(-30," + i * 20 + ")"; })
legends.append("rect")
.attr("x", this.width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d) { return tempColor(d); })
legends.append("text")
.attr("x", this.width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) {return d; })
}
}
<div class="col-xs-12 text-center dataVis">
<span (click)="dataOrvisual = true">Visual View</span>
<span>|</span>
<span (click)="dataOrvisual = false">Data View</span>
</div>
<div class="col-xs-12 pad-top-5em text-left" >
<div class="col-xs-4">
<label><input type="radio" name="filter" value="week" checked="checked" (click)="filterBar($event.target.value)">Weekly</label>
</div>
<div class="col-xs-4">
<label><input type="radio" name="filter" value="month" (click)="filterBar($event.target.value)">Monthly</label>
</div>
<div class="col-xs-4">
<label><input type="radio" name="filter" value="custom" (click)="filterBar($event.target.value)">Custom</label>
</div>
</div>
<div class="col-xs-12 pad-top-5em text-left" [hidden]="!customDate">
<div class="customDate">
<label>From:</label>
<input type="date" [value]="custFirstDate" (input)="custFirstDate = $event.target.value">
</div>
<div class="customDate" >
<label>To:</label>
<input type="date" [value]="custLastDate" (input)="custLastDate = $event.target.value">
</div>
<div class="customDateBtn">
<button (click)="getCustDateValues()">Filter</button>
</div>
</div>
<div [hidden]="!dataOrvisual" class="col-xs-12">
<div #containerBarChart></div>
</div>
<div [hidden]="dataOrvisual" class="col-xs-12">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Date</th>
<th>Listed</th>
<th>Completed</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let d of displayData">
<td [innerHTML]="d.date"></td>
<td [innerHTML]="d.value[0].count"></td>
<td [innerHTML]="d.value[1].count"></td>
</tr>
</tbody>
</table>
</div>
</div>