Your search did not match any results.

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.

Backend API
import React from 'react'; import DataGrid, { Column, Sorting, Paging, } from 'devextreme-react/data-grid'; import service from './data.js'; import DiffCell from './DiffCell.js'; import ChartCell from './ChartCell.js'; class App extends React.Component { constructor(props) { super(props); this.dataSource = service.getWeekData(); } render() { return ( <DataGrid id="gridContainer" dataSource={this.dataSource} keyExpr="date" showRowLines={true} showColumnLines={false} showBorders={true}> <Sorting mode="none" /> <Paging defaultPageSize={10} /> <Column dataField="date" width={110} dataType="date" /> <Column caption="Open" cellRender={DiffCell} /> <Column caption="Close" cellRender={DiffCell} /> <Column caption="Dynamics" minWidth={320} cellRender={ChartCell} /> <Column caption="High" cellRender={DiffCell} /> <Column caption="Low" cellRender={DiffCell} /> </DataGrid> ); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('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" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <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>
#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='); }
import React from 'react'; import Sparkline, { Size, Tooltip } from 'devextreme-react/sparkline'; export default function ChartCell(cellData) { return ( <div className="chart-cell"> <Sparkline dataSource={cellData.data.dayClose} argumentField="date" valueField="close" type="line" showMinMax={true} minColor="#f00" maxColor="#2ab71b" pointSize={6}> <Size width={290} height={40} /> <Tooltip enabled={false} /> </Sparkline> </div> ); }
import React from 'react'; import 'devextreme/localization/globalize/currency'; import { formatNumber } from 'devextreme/localization'; function gridCellData(gridData) { return gridData.data[gridData.column.caption.toLowerCase()]; } export default function DiffCell(cellData) { return ( <div className={gridCellData(cellData).diff > 0 ? 'inc' : 'dec'}> <div className="current-value">{formatNumber(gridCellData(cellData).value, { type: 'currency', currency: 'USD', precision: 2 })}</div> <div className="diff">{Math.abs(gridCellData(cellData).diff).toFixed(2)}</div> </div> ); }
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; }, };
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.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', '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-react': 'npm:devextreme-react@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', // SystemJS plugins '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': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.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, react: true, }, }; System.config(window.config);