Cell Customization

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: "system", 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': 'npm:@angular', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs', 'devextreme': 'npm:devextreme@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.5', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.3', 'devextreme-angular': 'npm:devextreme-angular@20.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, packageConfigPaths: [ "npm:*/package.json", "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular@20.1/*/package.json", "npm:devextreme-angular@20.1/ui/*/package.json", ] });

<!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/20.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.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.10.2/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>