<dx-data-grid id="gridContainer"
[dataSource]="dataSource"
[showRowLines]="true"
[showColumnLines]="false"
[showBorders]="true">
<dxo-sorting mode="none"></dxo-sorting>
<dxo-paging [pageSize]="10"></dxo-paging>
<dxi-column dataField="date" [width]="110" dataType="date"></dxi-column>
<dxi-column caption="Open" cellTemplate="diffCellTemplate"></dxi-column>
<dxi-column caption="Close" cellTemplate="diffCellTemplate"></dxi-column>
<dxi-column caption="Dynamics" [minWidth]="320" cellTemplate="chartCellTemplate"></dxi-column>
<dxi-column caption="High" cellTemplate="diffCellTemplate"></dxi-column>
<dxi-column caption="Low" cellTemplate="diffCellTemplate"></dxi-column>
<div *dxTemplate="let d of 'chartCellTemplate'">
<div class="chart-cell">
<dx-sparkline
[dataSource]="d.data.dayClose"
argumentField="date"
valueField="close"
type="line"
[showMinMax]="true"
minColor="#f00"
maxColor="#2ab71b"
[pointSize]="6">
<dxo-size [width]="290" [height]="40"></dxo-size>
<dxo-tooltip [enabled]="false"></dxo-tooltip>
</dx-sparkline>
</div>
</div>
<div *dxTemplate="let d of 'diffCellTemplate'" [class]="(d | gridCellData).diff > 0 ? 'inc' : 'dec'">
<div class="current-value">{{(d | gridCellData).value | currency:'USD':'symbol'}}</div>
<div class="diff">{{abs((d | gridCellData).diff) | number:'1.2-2'}}</div>
</div>
</dx-data-grid>
import { NgModule, Component, Pipe, PipeTransform, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxDataGridModule,
DxSparklineModule,
DxTemplateModule } from 'devextreme-angular';
import { Service, WeekData } from './app.service';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
providers: [Service]
})
export class AppComponent {
dataSource: WeekData[];
constructor(service: Service) {
this.dataSource = service.getWeekData();
}
abs(value) {
return Math.abs(value);
}
}
@Pipe({ name: 'gridCellData' })
export class GridCellDataPipe implements PipeTransform {
transform(gridData: any) {
return gridData.data[gridData.column.caption.toLowerCase()];
}
}
@NgModule({
imports: [
BrowserModule,
DxDataGridModule,
DxTemplateModule,
DxSparklineModule
],
declarations: [AppComponent, GridCellDataPipe],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #gridContainer td {
vertical-align: middle;
}
::ng-deep #gridContainer .chart-cell {
overflow: visible;
}
::ng-deep #gridContainer .current-value {
display: inline-block;
}
::ng-deep #gridContainer .diff {
position: relative;
display: table-cell;
font-size: 16px;
}
::ng-deep #gridContainer .inc .diff {
color: #2ab71b;
}
::ng-deep #gridContainer .inc .diff:before {
content: '+';
}
::ng-deep #gridContainer .dec .diff:before {
content: '-';
}
::ng-deep #gridContainer .dec .diff {
color: #f00;
}
::ng-deep #gridContainer .inc .diff:after,
::ng-deep #gridContainer .dec .diff:after {
content: '';
display: block;
height: 10px;
width: 10px;
position: absolute;
right: -12px;
top: 6px;
background-repeat: no-repeat;
background-size: 10px 10px;
}
::ng-deep #gridContainer .inc .diff:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADKSURBVHjaYtTaLs1ABEiG0nPRJa56PEHhsxBhmCUQT4OyrwHxcXyKmQgYJgHE64CYDYrXQcXIMhCbAcgWkGzgNKh38QUB0QamIUUErkhKI9ZAGyCeTERkTYaqxWsgKA2txhdG6GGsvUNGGpeBRMUiGhCFGsqGzUBQQJsxkA5AemaiG5hDIBIIgQSgK0FmMDACs549kN5FZLjhA7+A2A2U9YSAOBeLAk4gnoBDczoOcSFGPIUDPxB/wCHHiKtwYGKgMhg1cBAaCBBgAJTUIL3ToPZfAAAAAElFTkSuQmCC');
}
::ng-deep #gridContainer .dec .diff:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADJSURBVHjaYvzPgBfgkhYA4o8QFahKmBioDEYNHIQGsgBxIBCLkqgvAYi/g1mMjMjir0EJzR6If/6HpChKMMgMe3DKBeIcKhiY8x/MYoDj+RQYNgdkGLqBbEB8kgzDToL1YjEQhKWB+BUJhj0H64Eahs1AELYhMpJ+gtUiGYbLQBBOI8LANLBaIg1kAAc0vkiAqSPBQFAkHcNi2DGoHMkGgrAENOCRI0ECRQ2JBoKwJTQCfkLZDPgMZPxPXN5NhtJzMSsJVBMAAgwAyWSY2svfmrwAAAAASUVORK5CYII=');
}
import { Injectable } from '@angular/core';
export class Value {
value: number;
diff: number;
}
export class DayClose {
close: number;
date: Date;
}
export class WeekData {
date: Date;
open: Value;
high: Value;
low: Value;
close: Value;
volume: number;
adjClose: number;
dayClose: DayClose[];
}
let weekData: WeekData[] = [{
"date": new Date("2013/12/23"),
"open": {
"value": 3563.19,
"diff": 92.76
},
"high": {
"value": 3591.31,
"diff": 50.34
},
"low": {
"value": 3552.3,
"diff": 129.44
},
"close": {
"value": 3574.02,
"diff": 42.83
},
"volume": 1254340000,
"adjClose": 3574.02,
"dayClose": [{
"close": 3569.4,
"date": new Date("2013/12/23")
}, {
"close": 3572.8,
"date": new Date("2013/12/24")
}, {
"close": 3584.58,
"date": new Date("2013/12/26")
}, {
"close": 3574.02,
"date": new Date("2013/12/27")
}]
}, {
"date": new Date("2013/12/16"),
"open": {
"value": 3470.43,
"diff": -45.24
},
"high": {
"value": 3540.97,
"diff": 16.96
},
"low": {
"value": 3422.86,
"diff": -26.88
},
"close": {
"value": 3531.19,
"diff": 74.79
},
"volume": 2261352000,
"adjClose": 3531.19,
"dayClose": [{
"close": 3475.79,
"date": new Date("2013/12/16")
}, {
"close": 3469.32,
"date": new Date("2013/12/17")
}, {
"close": 3509.63,
"date": new Date("2013/12/18")
}, {
"close": 3498.63,
"date": new Date("2013/12/19")
}, {
"close": 3531.19,
"date": new Date("2013/12/20")
}]
}, {
"date": new Date("2013/12/09"),
"open": {
"value": 3515.67,
"diff": 19.48
},
"high": {
"value": 3524.01,
"diff": 12.91
},
"low": {
"value": 3449.74,
"diff": -3.48
},
"close": {
"value": 3456.4,
"diff": -47.86
},
"volume": 1802822000,
"adjClose": 3456.4,
"dayClose": [{
"close": 3516.17,
"date": new Date("2013/12/09")
}, {
"close": 3514.2,
"date": new Date("2013/12/10")
}, {
"close": 3468.99,
"date": new Date("2013/12/11")
}, {
"close": 3460.29,
"date": new Date("2013/12/12")
}, {
"close": 3456.4,
"date": new Date("2013/12/13")
}]
}, {
"date": new Date("2013/12/02"),
"open": {
"value": 3496.19,
"diff": 62.27
},
"high": {
"value": 3511.1,
"diff": 15.13
},
"low": {
"value": 3453.22,
"diff": 32.86
},
"close": {
"value": 3504.26,
"diff": 16.44
},
"volume": 1810088000,
"adjClose": 3504.26,
"dayClose": [{
"close": 3481.15,
"date": new Date("2013/12/02")
}, {
"close": 3479.34,
"date": new Date("2013/12/03")
}, {
"close": 3483.01,
"date": new Date("2013/12/04")
}, {
"close": 3477.73,
"date": new Date("2013/12/05")
}, {
"close": 3504.26,
"date": new Date("2013/12/06")
}]
}, {
"date": new Date("2013/11/25"),
"open": {
"value": 3433.92,
"diff": 10.45
},
"high": {
"value": 3495.97,
"diff": 66.77
},
"low": {
"value": 3420.36,
"diff": 61.05
},
"close": {
"value": 3487.82,
"diff": 65.8
},
"volume": 1508490000,
"adjClose": 3487.82,
"dayClose": [{
"close": 3427.49,
"date": new Date("2013/11/25")
}, {
"close": 3445.76,
"date": new Date("2013/11/26")
}, {
"close": 3470.48,
"date": new Date("2013/11/27")
}, {
"close": 3487.82,
"date": new Date("2013/11/29")
}]
}, {
"date": new Date("2013/11/18"),
"open": {
"value": 3423.47,
"diff": 63.64
},
"high": {
"value": 3429.2,
"diff": 6.62
},
"low": {
"value": 3359.31,
"diff": 12.9
},
"close": {
"value": 3422.02,
"diff": -0.56
},
"volume": 1742680000,
"adjClose": 3422.02,
"dayClose": [{
"close": 3388.87,
"date": new Date("2013/11/18")
}, {
"close": 3378.13,
"date": new Date("2013/11/19")
}, {
"close": 3367.17,
"date": new Date("2013/11/20")
}, {
"close": 3402.74,
"date": new Date("2013/11/21")
}, {
"close": 3422.02,
"date": new Date("2013/11/22")
}]
}, {
"date": new Date("2013/11/11"),
"open": {
"value": 3359.83,
"diff": -28.87
},
"high": {
"value": 3422.58,
"diff": 21.31
},
"low": {
"value": 3346.41,
"diff": 28.01
},
"close": {
"value": 3422.58,
"diff": 55.74
},
"volume": 1812784000,
"adjClose": 3422.58,
"dayClose": [{
"close": 3362.98,
"date": new Date("2013/11/11")
}, {
"close": 3365.23,
"date": new Date("2013/11/12")
}, {
"close": 3405.56,
"date": new Date("2013/11/13")
}, {
"close": 3415.14,
"date": new Date("2013/11/14")
}, {
"close": 3422.58,
"date": new Date("2013/11/15")
}]
}, {
"date": new Date("2013/11/04"),
"open": {
"value": 3388.7,
"diff": 6.52
},
"high": {
"value": 3401.27,
"diff": -7.01
},
"low": {
"value": 3318.4,
"diff": -46.25
},
"close": {
"value": 3366.84,
"diff": -12.92
},
"volume": 2011546000,
"adjClose": 3366.84,
"dayClose": [{
"close": 3384.75,
"date": new Date("2013/11/04")
}, {
"close": 3388.82,
"date": new Date("2013/11/05")
}, {
"close": 3385.38,
"date": new Date("2013/11/06")
}, {
"close": 3321.41,
"date": new Date("2013/11/07")
}, {
"close": 3366.84,
"date": new Date("2013/11/08")
}]
}, {
"date": new Date("2013/10/28"),
"open": {
"value": 3382.18,
"diff": 20.42
},
"high": {
"value": 3408.28,
"diff": 8.24
},
"low": {
"value": 3364.65,
"diff": 34.45
},
"close": {
"value": 3379.76,
"diff": -4.07
},
"volume": 1962860000,
"adjClose": 3379.76,
"dayClose": [{
"close": 3382.68,
"date": new Date("2013/10/28")
}, {
"close": 3391.75,
"date": new Date("2013/10/29")
}, {
"close": 3385.38,
"date": new Date("2013/10/30")
}, {
"close": 3377.73,
"date": new Date("2013/10/31")
}, {
"close": 3379.76,
"date": new Date("2013/11/01")
}]
}, {
"date": new Date("2013/10/21"),
"open": {
"value": 3361.76,
"diff": 148.38
},
"high": {
"value": 3400.04,
"diff": 44.41
},
"low": {
"value": 3330.2,
"diff": 118.15
},
"close": {
"value": 3383.83,
"diff": 29.95
},
"volume": 1952026000,
"adjClose": 3383.83,
"dayClose": [{
"close": 3361.18,
"date": new Date("2013/10/21")
}, {
"close": 3366.93,
"date": new Date("2013/10/22")
}, {
"close": 3346.05,
"date": new Date("2013/10/23")
}, {
"close": 3362.38,
"date": new Date("2013/10/24")
}, {
"close": 3383.83,
"date": new Date("2013/10/25")
}]
}, {
"date": new Date("2013/10/14"),
"open": {
"value": 3213.38,
"diff": -2.39
},
"high": {
"value": 3355.63,
"diff": 115.52
},
"low": {
"value": 3212.05,
"diff": 94.36
},
"close": {
"value": 3353.88,
"diff": 120.05
},
"volume": 1772590000,
"adjClose": 3353.88,
"dayClose": [{
"close": 3256.02,
"date": new Date("2013/10/14")
}, {
"close": 3244.66,
"date": new Date("2013/10/15")
}, {
"close": 3281.67,
"date": new Date("2013/10/16")
}, {
"close": 3301.28,
"date": new Date("2013/10/17")
}, {
"close": 3353.88,
"date": new Date("2013/10/18")
}]
}, {
"date": new Date("2013/10/07"),
"open": {
"value": 3215.77,
"diff": 25.37
},
"high": {
"value": 3240.11,
"diff": -16.6
},
"low": {
"value": 3117.69,
"diff": -69.17
},
"close": {
"value": 3233.83,
"diff": -8.74
},
"volume": 1891806000,
"adjClose": 3233.83,
"dayClose": [{
"close": 3215.69,
"date": new Date("2013/10/07")
}, {
"close": 3153.87,
"date": new Date("2013/10/08")
}, {
"close": 3142.54,
"date": new Date("2013/10/09")
}, {
"close": 3210.84,
"date": new Date("2013/10/10")
}, {
"close": 3233.83,
"date": new Date("2013/10/11")
}]
}, {
"date": new Date("2013/09/30"),
"open": {
"value": 3190.4,
"diff": -51.92
},
"high": {
"value": 3256.71,
"diff": 13.28
},
"low": {
"value": 3186.86,
"diff": -15.89
},
"close": {
"value": 3242.57,
"diff": 12.27
},
"volume": 1793200000,
"adjClose": 3242.57,
"dayClose": [{
"close": 3218.2,
"date": new Date("2013/09/30")
}, {
"close": 3253.05,
"date": new Date("2013/10/01")
}, {
"close": 3253.26,
"date": new Date("2013/10/02")
}, {
"close": 3213.83,
"date": new Date("2013/10/03")
}, {
"close": 3242.57,
"date": new Date("2013/10/04")
}]
}, {
"date": new Date("2013/09/23"),
"open": {
"value": 3242.32,
"diff": 39.13
},
"high": {
"value": 3243.43,
"diff": -5.09
},
"low": {
"value": 3202.75,
"diff": 39.62
},
"close": {
"value": 3230.3,
"diff": 5.57
},
"volume": 1775808000,
"adjClose": 3230.3,
"dayClose": [{
"close": 3219.34,
"date": new Date("2013/09/23")
}, {
"close": 3218.66,
"date": new Date("2013/09/24")
}, {
"close": 3208.55,
"date": new Date("2013/09/25")
}, {
"close": 3234.04,
"date": new Date("2013/09/26")
}, {
"close": 3230.3,
"date": new Date("2013/09/27")
}]
}, {
"date": new Date("2013/09/16"),
"open": {
"value": 3203.19,
"diff": 57.17
},
"high": {
"value": 3248.52,
"diff": 59.28
},
"low": {
"value": 3163.13,
"diff": 17.11
},
"close": {
"value": 3224.73,
"diff": 46.45
},
"volume": 1839474000,
"adjClose": 3224.73,
"dayClose": [{
"close": 3168.69,
"date": new Date("2013/09/16")
}, {
"close": 3190.83,
"date": new Date("2013/09/17")
}, {
"close": 3231.31,
"date": new Date("2013/09/18")
}, {
"close": 3237.61,
"date": new Date("2013/09/19")
}, {
"close": 3224.73,
"date": new Date("2013/09/20")
}]
}, {
"date": new Date("2013/09/09"),
"open": {
"value": 3146.02,
"diff": 48.37
},
"high": {
"value": 3189.24,
"diff": 40.25
},
"low": {
"value": 3146.02,
"diff": 68.89
},
"close": {
"value": 3178.28,
"diff": 44.9
},
"volume": 1668658000,
"adjClose": 3178.28,
"dayClose": [{
"close": 3169.93,
"date": new Date("2013/09/09")
}, {
"close": 3185.07,
"date": new Date("2013/09/10")
}, {
"close": 3179.86,
"date": new Date("2013/09/11")
}, {
"close": 3175.57,
"date": new Date("2013/09/12")
}, {
"close": 3178.28,
"date": new Date("2013/09/13")
}]
}, {
"date": new Date("2013/09/03"),
"open": {
"value": 3097.65,
"diff": -29.36
},
"high": {
"value": 3148.99,
"diff": 1.12
},
"low": {
"value": 3077.13,
"diff": 23.87
},
"close": {
"value": 3133.38,
"diff": 59.57
},
"volume": 1670570000,
"adjClose": 3133.38,
"dayClose": [{
"close": 3091.76,
"date": new Date("2013/09/03")
}, {
"close": 3124.54,
"date": new Date("2013/09/04")
}, {
"close": 3129.94,
"date": new Date("2013/09/05")
}, {
"close": 3133.38,
"date": new Date("2013/09/06")
}]
}, {
"date": new Date("2013/08/26"),
"open": {
"value": 3127.01,
"diff": 52.63
},
"high": {
"value": 3147.87,
"diff": 20.82
},
"low": {
"value": 3053.26,
"diff": -8.16
},
"close": {
"value": 3073.81,
"diff": -50.46
},
"volume": 1417628000,
"adjClose": 3073.81,
"dayClose": [{
"close": 3122.67,
"date": new Date("2013/08/26")
}, {
"close": 3059.58,
"date": new Date("2013/08/27")
}, {
"close": 3072.17,
"date": new Date("2013/08/28")
}, {
"close": 3093.36,
"date": new Date("2013/08/29")
}, {
"close": 3073.81,
"date": new Date("2013/08/30")
}]
}, {
"date": new Date("2013/08/19"),
"open": {
"value": 3074.38,
"diff": -32.68
},
"high": {
"value": 3127.05,
"diff": -22.19
},
"low": {
"value": 3061.42,
"diff": -6.65
},
"close": {
"value": 3124.27,
"diff": 50.36
},
"volume": 1305026000,
"adjClose": 3124.27,
"dayClose": [{
"close": 3069.76,
"date": new Date("2013/08/19")
}, {
"close": 3082.17,
"date": new Date("2013/08/20")
}, {
"close": 3071.47,
"date": new Date("2013/08/21")
}, {
"close": 3101.82,
"date": new Date("2013/08/22")
}, {
"close": 3124.27,
"date": new Date("2013/08/23")
}]
}, {
"date": new Date("2013/08/12"),
"open": {
"value": 3107.06,
"diff": -29.71
},
"high": {
"value": 3149.24,
"diff": 3.99
},
"low": {
"value": 3068.07,
"diff": -28.34
},
"close": {
"value": 3073.91,
"diff": -44.66
},
"volume": 1563892000,
"adjClose": 3073.91,
"dayClose": [{
"close": 3125.93,
"date": new Date("2013/08/12")
}, {
"close": 3141.06,
"date": new Date("2013/08/13")
}, {
"close": 3129.45,
"date": new Date("2013/08/14")
}, {
"close": 3076.23,
"date": new Date("2013/08/15")
}, {
"close": 3073.91,
"date": new Date("2013/08/16")
}]
}, {
"date": new Date("2013/08/05"),
"open": {
"value": 3136.77,
"diff": 69.29
},
"high": {
"value": 3145.25,
"diff": 1.73
},
"low": {
"value": 3096.41,
"diff": 33.5
},
"close": {
"value": 3118.57,
"diff": -24.95
},
"volume": 1565072000,
"adjClose": 3118.57,
"dayClose": [{
"close": 3143.19,
"date": new Date("2013/08/05")
}, {
"close": 3122.2,
"date": new Date("2013/08/06")
}, {
"close": 3118.69,
"date": new Date("2013/08/07")
}, {
"close": 3130.13,
"date": new Date("2013/08/08")
}, {
"close": 3118.57,
"date": new Date("2013/08/09")
}]
}, {
"date": new Date("2013/07/29"),
"open": {
"value": 3067.48,
"diff": 5.98
},
"high": {
"value": 3143.52,
"diff": 67.29
},
"low": {
"value": 3062.91,
"diff": 33.84
},
"close": {
"value": 3143.52,
"diff": 67.29
},
"volume": 1759648000,
"adjClose": 3143.52,
"dayClose": [{
"close": 3068.95,
"date": new Date("2013/07/29")
}, {
"close": 3085.33,
"date": new Date("2013/07/30")
}, {
"close": 3090.19,
"date": new Date("2013/07/31")
}, {
"close": 3126.3,
"date": new Date("2013/08/01")
}, {
"close": 3143.52,
"date": new Date("2013/08/02")
}]
}, {
"date": new Date("2013/07/22"),
"open": {
"value": 3061.5,
"diff": -15.52
},
"high": {
"value": 3076.23,
"diff": -14.98
},
"low": {
"value": 3029.07,
"diff": -6.92
},
"close": {
"value": 3076.23,
"diff": 31.3
},
"volume": 1796810000,
"adjClose": 3076.23,
"dayClose": [{
"close": 3055.23,
"date": new Date("2013/07/22")
}, {
"close": 3031.4,
"date": new Date("2013/07/23")
}, {
"close": 3041.16,
"date": new Date("2013/07/24")
}, {
"close": 3061.67,
"date": new Date("2013/07/25")
}, {
"close": 3076.23,
"date": new Date("2013/07/26")
}]
}, {
"date": new Date("2013/07/15"),
"open": {
"value": 3077.02,
"diff": 100.41
},
"high": {
"value": 3091.21,
"diff": 12.14
},
"low": {
"value": 3035.99,
"diff": 80.62
},
"close": {
"value": 3044.93,
"diff": -34.14
},
"volume": 1621772000,
"adjClose": 3044.93,
"dayClose": [{
"close": 3079.85,
"date": new Date("2013/07/15")
}, {
"close": 3077.47,
"date": new Date("2013/07/16")
}, {
"close": 3085.28,
"date": new Date("2013/07/17")
}, {
"close": 3077.82,
"date": new Date("2013/07/18")
}, {
"close": 3044.93,
"date": new Date("2013/07/19")
}]
}, {
"date": new Date("2013/07/08"),
"open": {
"value": 2976.61,
"diff": 43.13
},
"high": {
"value": 3079.07,
"diff": 115.25
},
"low": {
"value": 2955.37,
"diff": 41.89
},
"close": {
"value": 3079.07,
"diff": 115.85
},
"volume": 1616522000,
"adjClose": 3079.07,
"dayClose": [{
"close": 2966.13,
"date": new Date("2013/07/08")
}, {
"close": 2984.32,
"date": new Date("2013/07/09")
}, {
"close": 3000.66,
"date": new Date("2013/07/10")
}, {
"close": 3059.46,
"date": new Date("2013/07/11")
}, {
"close": 3079.07,
"date": new Date("2013/07/12")
}]
}, {
"date": new Date("2013/07/01"),
"open": {
"value": 2933.48,
"diff": 80.83
},
"high": {
"value": 2963.82,
"diff": 36.33
},
"low": {
"value": 2913.48,
"diff": 88.3
},
"close": {
"value": 2963.22,
"diff": 53.62
},
"volume": 1365580000,
"adjClose": 2963.22,
"dayClose": [{
"close": 2927.35,
"date": new Date("2013/07/01")
}, {
"close": 2929.63,
"date": new Date("2013/07/02")
}, {
"close": 2941.41,
"date": new Date("2013/07/03")
}, {
"close": 2963.22,
"date": new Date("2013/07/05")
}]
}, {
"date": new Date("2013/06/24"),
"open": {
"value": 2852.65,
"diff": -114.68
},
"high": {
"value": 2927.49,
"diff": -74.4
},
"low": {
"value": 2825.18,
"diff": -28.51
},
"close": {
"value": 2909.6,
"diff": 31.66
},
"volume": 2135946000,
"adjClose": 2909.6,
"dayClose": [{
"close": 2848.2,
"date": new Date("2013/06/24")
}, {
"close": 2866.5,
"date": new Date("2013/06/25")
}, {
"close": 2893.85,
"date": new Date("2013/06/26")
}, {
"close": 2906.84,
"date": new Date("2013/06/27")
}, {
"close": 2909.6,
"date": new Date("2013/06/28")
}]
}, {
"date": new Date("2013/06/17"),
"open": {
"value": 2967.33,
"diff": -27.7
},
"high": {
"value": 3001.89,
"diff": -2.78
},
"low": {
"value": 2853.69,
"diff": -60.51
},
"close": {
"value": 2877.94,
"diff": -65.92
},
"volume": 1973904000,
"adjClose": 2877.94,
"dayClose": [{
"close": 2971.26,
"date": new Date("2013/06/17")
}, {
"close": 2996.09,
"date": new Date("2013/06/18")
}, {
"close": 2959.5,
"date": new Date("2013/06/19")
}, {
"close": 2890.33,
"date": new Date("2013/06/20")
}, {
"close": 2877.94,
"date": new Date("2013/06/21")
}]
}, {
"date": new Date("2013/06/10"),
"open": {
"value": 2995.03,
"diff": 10.44
},
"high": {
"value": 3004.67,
"diff": -2.63
},
"low": {
"value": 2914.2,
"diff": 2.26
},
"close": {
"value": 2943.86,
"diff": -47.01
},
"volume": 1557972000,
"adjClose": 2943.86,
"dayClose": [{
"close": 2990.49,
"date": new Date("2013/06/10")
}, {
"close": 2959.84,
"date": new Date("2013/06/11")
}, {
"close": 2926.14,
"date": new Date("2013/06/12")
}, {
"close": 2962.9,
"date": new Date("2013/06/13")
}, {
"close": 2943.86,
"date": new Date("2013/06/14")
}]
}, {
"date": new Date("2013/06/03"),
"open": {
"value": 2984.59,
"diff": -39.79
},
"high": {
"value": 3007.3,
"diff": -29.7
},
"low": {
"value": 2911.94,
"diff": -67.96
},
"close": {
"value": 2990.87,
"diff": 9.11
},
"volume": 1837828000,
"adjClose": 2990.87,
"dayClose": [{
"close": 2990.79,
"date": new Date("2013/06/03")
}, {
"close": 2973.69,
"date": new Date("2013/06/04")
}, {
"close": 2937.14,
"date": new Date("2013/06/05")
}, {
"close": 2950.3,
"date": new Date("2013/06/06")
}, {
"close": 2990.87,
"date": new Date("2013/06/07")
}]
}, {
"date": new Date("2013/05/28"),
"open": {
"value": 3024.38,
"diff": 5.1
},
"high": {
"value": 3037,
"diff": -16.51
},
"low": {
"value": 2979.9,
"diff": 14.6
},
"close": {
"value": 2981.76,
"diff": -9.26
},
"volume": 1812077500,
"adjClose": 2981.76,
"dayClose": [{
"close": 3011.94,
"date": new Date("2013/05/28")
}, {
"close": 2994.82,
"date": new Date("2013/05/29")
}, {
"close": 3011.83,
"date": new Date("2013/05/30")
}, {
"close": 2981.76,
"date": new Date("2013/05/31")
}]
}, {
"date": new Date("2013/05/20"),
"open": {
"value": 3019.28,
"diff": 46.32
},
"high": {
"value": 3053.51,
"diff": 24.55
},
"low": {
"value": 2965.3,
"diff": -6.43
},
"close": {
"value": 2991.02,
"diff": -37.94
},
"volume": 1794250000,
"adjClose": 2991.02,
"dayClose": [{
"close": 3020.97,
"date": new Date("2013/05/20")
}, {
"close": 3026.45,
"date": new Date("2013/05/21")
}, {
"close": 2999.13,
"date": new Date("2013/05/22")
}, {
"close": 2991.45,
"date": new Date("2013/05/23")
}, {
"close": 2991.02,
"date": new Date("2013/05/24")
}]
}, {
"date": new Date("2013/05/13"),
"open": {
"value": 2972.96,
"diff": 24.06
},
"high": {
"value": 3028.96,
"diff": 47.94
},
"low": {
"value": 2971.73,
"diff": 29.48
},
"close": {
"value": 3028.96,
"diff": 47.94
},
"volume": 1810862000,
"adjClose": 3028.96,
"dayClose": [{
"close": 2982.09,
"date": new Date("2013/05/13")
}, {
"close": 2996.05,
"date": new Date("2013/05/14")
}, {
"close": 3002.62,
"date": new Date("2013/05/15")
}, {
"close": 2999.34,
"date": new Date("2013/05/16")
}, {
"close": 3028.96,
"date": new Date("2013/05/17")
}]
}, {
"date": new Date("2013/05/06"),
"open": {
"value": 2948.9,
"diff": 99.36
},
"high": {
"value": 2981.02,
"diff": 28.8
},
"low": {
"value": 2942.25,
"diff": 93.21
},
"close": {
"value": 2981.02,
"diff": 36.43
},
"volume": 1696512000,
"adjClose": 2981.02,
"dayClose": [{
"close": 2955.36,
"date": new Date("2013/05/06")
}, {
"close": 2952.88,
"date": new Date("2013/05/07")
}, {
"close": 2968.24,
"date": new Date("2013/05/08")
}, {
"close": 2961.12,
"date": new Date("2013/05/09")
}, {
"close": 2981.02,
"date": new Date("2013/05/10")
}]
}, {
"date": new Date("2013/04/29"),
"open": {
"value": 2849.54,
"diff": 57.77
},
"high": {
"value": 2952.22,
"diff": 91.53
},
"low": {
"value": 2849.04,
"diff": 68.22
},
"close": {
"value": 2944.59,
"diff": 104.04
},
"volume": 1793206000,
"adjClose": 2944.59,
"dayClose": [{
"close": 2866.95,
"date": new Date("2013/04/29")
}, {
"close": 2887.44,
"date": new Date("2013/04/30")
}, {
"close": 2873.35,
"date": new Date("2013/05/01")
}, {
"close": 2911.14,
"date": new Date("2013/05/02")
}, {
"close": 2944.59,
"date": new Date("2013/05/03")
}]
}, {
"date": new Date("2013/04/22"),
"open": {
"value": 2791.77,
"diff": -49.49
},
"high": {
"value": 2860.69,
"diff": 11.53
},
"low": {
"value": 2780.82,
"diff": 49.85
},
"close": {
"value": 2840.55,
"diff": 60.09
},
"volume": 1757180000,
"adjClose": 2840.55,
"dayClose": [{
"close": 2810.07,
"date": new Date("2013/04/22")
}, {
"close": 2835.37,
"date": new Date("2013/04/23")
}, {
"close": 2834.12,
"date": new Date("2013/04/24")
}, {
"close": 2848.66,
"date": new Date("2013/04/25")
}, {
"close": 2840.55,
"date": new Date("2013/04/26")
}]
}, {
"date": new Date("2013/04/15"),
"open": {
"value": 2841.26,
"diff": 68.96
},
"high": {
"value": 2849.16,
"diff": -14.5
},
"low": {
"value": 2730.97,
"diff": -33.37
},
"close": {
"value": 2780.46,
"diff": -76.02
},
"volume": 1740460000,
"adjClose": 2780.46,
"dayClose": [{
"close": 2797.47,
"date": new Date("2013/04/15")
}, {
"close": 2838.41,
"date": new Date("2013/04/16")
}, {
"close": 2781.98,
"date": new Date("2013/04/17")
}, {
"close": 2741.95,
"date": new Date("2013/04/18")
}, {
"close": 2780.46,
"date": new Date("2013/04/19")
}]
}, {
"date": new Date("2013/04/08"),
"open": {
"value": 2772.3,
"diff": -47.48
},
"high": {
"value": 2863.66,
"diff": 35.02
},
"low": {
"value": 2764.34,
"diff": 20.08
},
"close": {
"value": 2856.48,
"diff": 84.73
},
"volume": 1578374000,
"adjClose": 2856.48,
"dayClose": [{
"close": 2786.13,
"date": new Date("2013/04/08")
}, {
"close": 2804.67,
"date": new Date("2013/04/09")
}, {
"close": 2859.21,
"date": new Date("2013/04/10")
}, {
"close": 2859.07,
"date": new Date("2013/04/11")
}, {
"close": 2856.48,
"date": new Date("2013/04/12")
}]
}, {
"date": new Date("2013/04/01"),
"open": {
"value": 2819.78,
"diff": 9.03
},
"high": {
"value": 2828.64,
"diff": 7.97
},
"low": {
"value": 2744.26,
"diff": -34.52
},
"close": {
"value": 2771.75,
"diff": -46.94
},
"volume": 1589176000,
"adjClose": 2771.75,
"dayClose": [{
"close": 2797.07,
"date": new Date("2013/04/01")
}, {
"close": 2820.62,
"date": new Date("2013/04/02")
}, {
"close": 2795.04,
"date": new Date("2013/04/03")
}, {
"close": 2794.92,
"date": new Date("2013/04/04")
}, {
"close": 2771.75,
"date": new Date("2013/04/05")
}]
}, {
"date": new Date("2013/03/25"),
"open": {
"value": 2810.75,
"diff": 39.22
},
"high": {
"value": 2820.67,
"diff": 9.19
},
"low": {
"value": 2778.78,
"diff": 15.66
},
"close": {
"value": 2818.69,
"diff": 17.88
},
"volume": 1541860000,
"adjClose": 2818.69,
"dayClose": [{
"close": 2789.45,
"date": new Date("2013/03/25")
}, {
"close": 2806.5,
"date": new Date("2013/03/26")
}, {
"close": 2809.98,
"date": new Date("2013/03/27")
}, {
"close": 2818.69,
"date": new Date("2013/03/28")
}]
}, {
"date": new Date("2013/03/18"),
"open": {
"value": 2771.53,
"diff": -26.6
},
"high": {
"value": 2811.48,
"diff": -0.81
},
"low": {
"value": 2763.12,
"diff": -24.6
},
"close": {
"value": 2800.81,
"diff": 1.4
},
"volume": 1642786000,
"adjClose": 2800.81,
"dayClose": [{
"close": 2792.3,
"date": new Date("2013/03/18")
}, {
"close": 2787.27,
"date": new Date("2013/03/19")
}, {
"close": 2805.91,
"date": new Date("2013/03/20")
}, {
"close": 2774.85,
"date": new Date("2013/03/21")
}, {
"close": 2800.81,
"date": new Date("2013/03/22")
}]
}, {
"date": new Date("2013/03/11"),
"open": {
"value": 2798.13,
"diff": 59.92
},
"high": {
"value": 2812.29,
"diff": -0.44
},
"low": {
"value": 2787.72,
"diff": 52.8
},
"close": {
"value": 2799.41,
"diff": -4.7
},
"volume": 1767280000,
"adjClose": 2799.41,
"dayClose": [{
"close": 2811.86,
"date": new Date("2013/03/11")
}, {
"close": 2800.81,
"date": new Date("2013/03/12")
}, {
"close": 2798.68,
"date": new Date("2013/03/13")
}, {
"close": 2807.3,
"date": new Date("2013/03/14")
}, {
"close": 2799.41,
"date": new Date("2013/03/15")
}]
}, {
"date": new Date("2013/03/04"),
"open": {
"value": 2738.21,
"diff": -17.98
},
"high": {
"value": 2812.73,
"diff": 48.77
},
"low": {
"value": 2734.92,
"diff": 45.09
},
"close": {
"value": 2804.11,
"diff": 56.36
},
"volume": 1732232000,
"adjClose": 2804.11,
"dayClose": [{
"close": 2759.53,
"date": new Date("2013/03/04")
}, {
"close": 2799.25,
"date": new Date("2013/03/05")
}, {
"close": 2792.56,
"date": new Date("2013/03/06")
}, {
"close": 2799.49,
"date": new Date("2013/03/07")
}, {
"close": 2804.11,
"date": new Date("2013/03/08")
}]
}, {
"date": new Date("2013/02/25"),
"open": {
"value": 2756.19,
"diff": -14.51
},
"high": {
"value": 2763.96,
"diff": -18.9
},
"low": {
"value": 2689.83,
"diff": -10.49
},
"close": {
"value": 2747.75,
"diff": 10.47
},
"volume": 1879756000,
"adjClose": 2747.75,
"dayClose": [{
"close": 2700.97,
"date": new Date("2013/02/25")
}, {
"close": 2713.02,
"date": new Date("2013/02/26")
}, {
"close": 2741.26,
"date": new Date("2013/02/27")
}, {
"close": 2738.58,
"date": new Date("2013/02/28")
}, {
"close": 2747.75,
"date": new Date("2013/03/01")
}]
}, {
"date": new Date("2013/02/19"),
"open": {
"value": 2770.7,
"diff": -3.74
},
"high": {
"value": 2782.86,
"diff": -0.33
},
"low": {
"value": 2700.32,
"diff": -56.11
},
"close": {
"value": 2737.28,
"diff": -27.39
},
"volume": 1869942500,
"adjClose": 2737.28,
"dayClose": [{
"close": 2782.86,
"date": new Date("2013/02/19")
}, {
"close": 2739.99,
"date": new Date("2013/02/20")
}, {
"close": 2711.51,
"date": new Date("2013/02/21")
}, {
"close": 2737.28,
"date": new Date("2013/02/22")
}]
}, {
"date": new Date("2013/02/11"),
"open": {
"value": 2774.44,
"diff": 25.04
},
"high": {
"value": 2783.19,
"diff": 3.06
},
"low": {
"value": 2756.43,
"diff": 40.92
},
"close": {
"value": 2764.67,
"diff": -10.89
},
"volume": 1788838000,
"adjClose": 2764.67,
"dayClose": [{
"close": 2774.64,
"date": new Date("2013/02/11")
}, {
"close": 2762.62,
"date": new Date("2013/02/12")
}, {
"close": 2773.77,
"date": new Date("2013/02/13")
}, {
"close": 2771.43,
"date": new Date("2013/02/14")
}, {
"close": 2764.67,
"date": new Date("2013/02/15")
}]
}, {
"date": new Date("2013/02/04"),
"open": {
"value": 2749.4,
"diff": 11.78
},
"high": {
"value": 2780.13,
"diff": 11.5
},
"low": {
"value": 2715.51,
"diff": -7.01
},
"close": {
"value": 2775.56,
"diff": 11.6
},
"volume": 1960002000,
"adjClose": 2775.56,
"dayClose": [{
"close": 2715.68,
"date": new Date("2013/02/04")
}, {
"close": 2754.99,
"date": new Date("2013/02/05")
}, {
"close": 2746.35,
"date": new Date("2013/02/06")
}, {
"close": 2746.5,
"date": new Date("2013/02/07")
}, {
"close": 2775.56,
"date": new Date("2013/02/08")
}]
}, {
"date": new Date("2013/01/28"),
"open": {
"value": 2737.62,
"diff": -6.65
},
"high": {
"value": 2768.63,
"diff": -0.68
},
"low": {
"value": 2722.52,
"diff": 2.69
},
"close": {
"value": 2763.96,
"diff": 27.23
},
"volume": 2040876000,
"adjClose": 2763.96,
"dayClose": [{
"close": 2742.43,
"date": new Date("2013/01/28")
}, {
"close": 2743.58,
"date": new Date("2013/01/29")
}, {
"close": 2738.71,
"date": new Date("2013/01/30")
}, {
"close": 2731.53,
"date": new Date("2013/01/31")
}, {
"close": 2763.96,
"date": new Date("2013/02/01")
}]
}, {
"date": new Date("2013/01/22"),
"open": {
"value": 2744.27,
"diff": 10.81
},
"high": {
"value": 2769.31,
"diff": 12.63
},
"low": {
"value": 2719.83,
"diff": 9.03
},
"close": {
"value": 2736.73,
"diff": -6.51
},
"volume": 1864040000,
"adjClose": 2736.73,
"dayClose": [{
"close": 2746.19,
"date": new Date("2013/01/22")
}, {
"close": 2762.17,
"date": new Date("2013/01/23")
}, {
"close": 2723.53,
"date": new Date("2013/01/24")
}, {
"close": 2736.73,
"date": new Date("2013/01/25")
}]
}, {
"date": new Date("2013/01/14"),
"open": {
"value": 2733.46,
"diff": 20.02
},
"high": {
"value": 2756.68,
"diff": 7.32
},
"low": {
"value": 2710.8,
"diff": 7.05
},
"close": {
"value": 2743.24,
"diff": -5.02
},
"volume": 1809576000,
"adjClose": 2743.24,
"dayClose": [{
"close": 2735.7,
"date": new Date("2013/01/14")
}, {
"close": 2722.98,
"date": new Date("2013/01/15")
}, {
"close": 2734.73,
"date": new Date("2013/01/16")
}, {
"close": 2747.15,
"date": new Date("2013/01/17")
}, {
"close": 2743.24,
"date": new Date("2013/01/18")
}]
}, {
"date": new Date("2013/01/07"),
"open": {
"value": 2713.44,
"diff": -14.23
},
"high": {
"value": 2749.36,
"diff": -1.46
},
"low": {
"value": 2703.75,
"diff": -12.29
},
"close": {
"value": 2748.26,
"diff": 23.77
},
"volume": 1741254000,
"adjClose": 2748.26,
"dayClose": [{
"close": 2724.22,
"date": new Date("2013/01/07")
}, {
"close": 2718.72,
"date": new Date("2013/01/08")
}, {
"close": 2727.65,
"date": new Date("2013/01/09")
}, {
"close": 2744.18,
"date": new Date("2013/01/10")
}, {
"close": 2748.26,
"date": new Date("2013/01/11")
}]
}];
@Injectable()
export class Service {
getWeekData() {
return weekData;
}
}
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
System.config({
transpiler: 'ts',
typescriptOptions: {
module: "commonjs",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@3.4.5/lib/typescript.js',
'@angular/core': 'npm:@angular/core@8.0.0/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@8.0.0/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@8.0.0/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@8.0.0/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@8.0.0/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'npm:@angular/router@8.0.0/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@8.0.0/bundles/forms.umd.js',
'@angular/common/http': 'npm:@angular/common@8.0.0/bundles/common-http.umd.js',
'tslib': 'npm:tslib/tslib.js',
'rxjs': 'npm:rxjs@6.3.3',
'rxjs/operators': 'npm:rxjs@6.3.3/operators',
'devextreme': 'npm:devextreme@19.2',
'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.7/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
'devexpress-gantt': 'npm:devexpress-gantt',
'devextreme-angular': 'npm:devextreme-angular@19.2'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'rxjs': { main: 'index.js', defaultExtension: 'js' },
'rxjs/operators': { main: 'index.js', defaultExtension: 'js' },
'devextreme-angular': {
main: 'index.js',
defaultExtension: 'js'
}
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>