Your search did not match any results.
Data Grid

Cell Customization

Documentation

The DataGrid comes with vast capabilities for setting up custom templates for grid cells. In this demo, you can see how the grid’s onCellPrepared option is used to provide a custom template for those cells that have the diff value specified in the data source. In addition, the cellTemplate option of the Dynamics column is specified to present data using the Sparkline widget.

Copy to CodeSandBox
Apply
Reset
<template> <div> <dx-data-grid id="gridContainer" :data-source="dataSource" :show-row-lines="true" :show-column-lines="false" :show-borders="true" > <dx-sorting mode="none"/> <dx-paging :page-size="10"/> <dx-column :width="110" data-field="date" data-type="date" /> <dx-column caption="Open" cell-template="diffCellTemplate" /> <dx-column caption="Close" cell-template="diffCellTemplate" /> <dx-column :min-width="320" caption="Dynamics" cell-template="chartCellTemplate" /> <dx-column caption="High" cell-template="diffCellTemplate" /> <dx-column caption="Low" cell-template="diffCellTemplate" /> <div slot="chartCellTemplate" slot-scope="{ data }" > <chart-cell :cell-data="data.data.dayClose"/> </div> <div slot="diffCellTemplate" slot-scope="{ data }" > <diff-cell :cell-data="data"/> </div> </dx-data-grid> </div> </template> <script> import { DxDataGrid, DxColumn, DxSorting, DxPaging } from 'devextreme-vue/data-grid'; import service from './data.js'; import DiffCell from './DiffCell.vue'; import ChartCell from './ChartCell.vue'; export default { components: { DxDataGrid, DxColumn, DxSorting, DxPaging, DiffCell, ChartCell }, data() { return { dataSource: service.getWeekData() }; } }; </script> <style scoped> #gridContainer td { vertical-align: middle; } #gridContainer .chart-cell { overflow: visible; } #gridContainer .current-value { display: inline-block; } #gridContainer .diff { position: relative; display: table-cell; font-size: 16px; } #gridContainer .inc .diff { color: #2ab71b; } #gridContainer .inc .diff:before { content: '+'; } #gridContainer .dec .diff:before { content: '-'; } #gridContainer .dec .diff { color: #f00; } #gridContainer .inc .diff:after, #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; } #gridContainer .inc .diff:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADKSURBVHjaYtTaLs1ABEiG0nPRJa56PEHhsxBhmCUQT4OyrwHxcXyKmQgYJgHE64CYDYrXQcXIMhCbAcgWkGzgNKh38QUB0QamIUUErkhKI9ZAGyCeTERkTYaqxWsgKA2txhdG6GGsvUNGGpeBRMUiGhCFGsqGzUBQQJsxkA5AemaiG5hDIBIIgQSgK0FmMDACs549kN5FZLjhA7+A2A2U9YSAOBeLAk4gnoBDczoOcSFGPIUDPxB/wCHHiKtwYGKgMhg1cBAaCBBgAJTUIL3ToPZfAAAAAElFTkSuQmCC'); } #gridContainer .dec .diff:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADJSURBVHjaYvzPgBfgkhYA4o8QFahKmBioDEYNHIQGsgBxIBCLkqgvAYi/g1mMjMjir0EJzR6If/6HpChKMMgMe3DKBeIcKhiY8x/MYoDj+RQYNgdkGLqBbEB8kgzDToL1YjEQhKWB+BUJhj0H64Eahs1AELYhMpJ+gtUiGYbLQBBOI8LANLBaIg1kAAc0vkiAqSPBQFAkHcNi2DGoHMkGgrAENOCRI0ECRQ2JBoKwJTQCfkLZDPgMZPxPXN5NhtJzMSsJVBMAAgwAyWSY2svfmrwAAAAASUVORK5CYII='); } </style>
<template> <div class="chart-cell"> <dx-sparkline :data-source="cellData" :show-min-max="true" :point-size="6" argument-field="date" value-field="close" type="line" min-color="#f00" max-color="#2ab71b" > <dx-size :width="290" :height="40" /> <dx-tooltip :enabled="false"/> </dx-sparkline> </div> </template> <script> import { DxSparkline, DxSize, DxTooltip } from 'devextreme-vue/sparkline'; export default { components: { DxSparkline, DxSize, DxTooltip }, props: { cellData: { type: Array, default: () => [] } } }; </script>
<template> <div :class="cellData | className"> <div class="current-value">{{ cellData | formatCurrency('USD') }}</div> <div class="diff">{{ cellData | abs | fixed(2) }}</div> </div> </template> <script> import { DxSparkline, DxSize, DxTooltip } from 'devextreme-vue/sparkline'; import Globalize from 'globalize'; import 'devextreme/localization/globalize/currency'; const gridCellData = function(value) { return value.data[value.column.caption.toLowerCase()]; }; export default { components: { DxSparkline, DxSize, DxTooltip }, filters: { className(value) { return gridCellData(value).diff > 0 ? 'inc' : 'dec'; }, formatCurrency(value, currency) { return Globalize.formatCurrency(gridCellData(value).value, currency); }, abs(value) { return Math.abs(gridCellData(value).diff); }, fixed(value, precision) { return value.toFixed(precision); } }, props: { cellData: { type: Object, default: () => {} } } }; </script>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <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.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
const 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') }] }]; export default { getWeekData() { return weekData; } };
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js', 'globalize': 'npm:globalize/dist/globalize', 'cldr': 'npm:cldrjs/dist/cldr', 'cldr-data': '../../../../js/cldr', 'json': 'npm:systemjs-plugin-json/json.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, 'globalize': { main: '../globalize.js', defaultExtension: 'js' }, 'cldr': { main: '../cldr.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });