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 property is used to provide a custom template for those cells that have the diff value specified in the data source. In addition, the cellTemplate property of the Dynamics column is specified to present data using the Sparkline component.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
<template>
<div>
<DxDataGrid
id="gridContainer"
:data-source="weekData"
key-expr="date"
:show-row-lines="true"
:show-column-lines="false"
:show-borders="true"
>
<DxSorting mode="none"/>
<DxPaging :page-size="10"/>
<DxColumn
:width="110"
data-field="date"
data-type="date"
/>
<DxColumn
caption="Open"
cell-template="diff-cell-template"
/>
<DxColumn
caption="Close"
cell-template="diff-cell-template"
/>
<DxColumn
:min-width="320"
caption="Dynamics"
cell-template="chart-cell-template"
/>
<DxColumn
caption="High"
cell-template="diff-cell-template"
/>
<DxColumn
caption="Low"
cell-template="diff-cell-template"
/>
<template #chart-cell-template="{ data }">
<ChartCell :cell-data="data.data.dayClose"/>
</template>
<template #diff-cell-template="{ data }">
<DiffCell :cell-data="data"/>
</template>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import {
DxDataGrid,
DxColumn,
DxSorting,
DxPaging,
} from 'devextreme-vue/data-grid';
import { weekData } from './data.js';
import DiffCell from './DiffCell.vue';
import ChartCell from './ChartCell.vue';
</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">
<DxSparkline
:data-source="cellData"
:show-min-max="true"
:point-size="6"
argument-field="date"
value-field="close"
type="line"
min-color="#f00"
max-color="#2ab71b"
>
<DxSize
:width="290"
:height="40"
/>
<DxTooltip :enabled="false"/>
</DxSparkline>
</div>
</template>
<script setup lang="ts">
import {
DxSparkline,
DxSize,
DxTooltip,
} from 'devextreme-vue/sparkline';
withDefaults(defineProps<{
cellData?: any[]
}>(), {
cellData: () => [],
});
</script>
<template>
<div :class="className(cellData)">
<div class="current-value">{{ formatCurrency(cellData) }}</div>
<div class="diff">{{ fixed(abs(cellData), 2) }}</div>
</div>
</template>
<script setup lang="ts">
import { formatNumber } from 'devextreme/localization';
withDefaults(defineProps<{
cellData?: object
}>(), {
cellData: () => {},
});
function className(value) {
return gridCellData(value).diff > 0 ? 'inc' : 'dec';
}
function formatCurrency(value) {
return formatNumber(gridCellData(value).value, { type: 'currency', currency: 'USD', precision: 2 });
}
function abs(value) {
return Math.abs(gridCellData(value).diff);
}
function fixed(value, precision) {
return value.toFixed(precision);
}
const gridCellData = function(value) {
return value.data[value.column.caption.toLowerCase()];
};
</script>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#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/23.1.5/css/dx.light.css" />
<script type="module">
import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js";
window.vueCompilerSFC = vueCompilerSFC;
</script>
<script src="https://unpkg.com/typescript@3.9.10/lib/typescript.js"></script>
<script src="https://unpkg.com/core-js@2.6.12/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"> </div>
</div>
</body>
</html>
export 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'),
}],
}];
window.exports = window.exports || {};
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'*.ts': {
loader: 'demo-ts-loader',
},
'*.svg': {
loader: 'svg-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'root:': '../../../../../',
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.3.4/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js',
'demo-ts-loader': 'root:utils/demo-ts-loader.js',
'svg-loader': 'root:utils/svg-loader.js',
'globalize': 'npm:globalize@1.7.0/dist/globalize',
'json': 'npm:systemjs-plugin-json@0.3.0/json.js',
'cldr': 'npm:cldrjs@0.5.5/dist/cldr',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.1.6/cjs',
'devextreme-vue': 'npm:devextreme-vue@23.1.6',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.2/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.49/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'globalize': {
main: '../globalize.js',
defaultExtension: 'js',
},
'cldr': {
main: '../cldr.js',
defaultExtension: 'js',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);