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
x
import React from 'react';import DataGrid, { Column, Sorting, Paging, Pager,} from 'devextreme-react/data-grid';import { weekData } from './data.ts';import DiffCell from './DiffCell.tsx';import ChartCell from './ChartCell.tsx';const App = () => ( <DataGrid id="gridContainer" dataSource={weekData} keyExpr="date" showRowLines={true} showColumnLines={false} showBorders={true}> <Sorting mode="none" /> <Paging defaultPageSize={10} /> <Pager visible={true} /> <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;xxxxxxxxxximport React from 'react';import DataGrid, { Column, Sorting, Paging, Pager,} from 'devextreme-react/data-grid';import { weekData } from './data.js';import DiffCell from './DiffCell.js';import ChartCell from './ChartCell.js';const App = () => ( <DataGrid id="gridContainer" dataSource={weekData} keyExpr="date" showRowLines={true} showColumnLines={false} showBorders={true} > <Sorting mode="none" /> <Paging defaultPageSize={10} /> <Pager visible={true} /> <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;xxxxxxxxxximport React from 'react';import Sparkline, { Size, Tooltip } from 'devextreme-react/sparkline';import { type DataGridTypes } from 'devextreme-react/data-grid';const ChartCell = (cellData: DataGridTypes.ColumnCellTemplateData) => ( <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>);export default ChartCell;xxxxxxxxxximport React from 'react';import 'devextreme/localization/globalize/currency';import { formatNumber } from 'devextreme/localization';import { type DataGridTypes } from 'devextreme-react/data-grid';const getGridCellData = (gridData: DataGridTypes.ColumnCellTemplateData) => gridData.data[gridData.column.caption.toLowerCase()];const DiffCell = (cellData: DataGridTypes.ColumnCellTemplateData) => { const gridCellData = getGridCellData(cellData); return ( <div className={gridCellData.diff > 0 ? 'inc' : 'dec'}> <div className="current-value">{formatNumber(gridCellData.value, { type: 'currency', currency: 'USD', precision: 2 })}</div> <div className="diff">{Math.abs(gridCellData.diff).toFixed(2)}</div> </div> );};export default DiffCell;xxxxxxxxxximport React from 'react';import ReactDOM from 'react-dom';import App from './App.tsx';ReactDOM.render( <App />, document.getElementById('app'),);xxxxxxxxxxexport 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'), }],}];xxxxxxxxxxwindow.exports = window.exports || {};window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, 'openai': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', 'bundles:': 'bundles/', 'externals:': 'bundles/externals/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', '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/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@3.4.4/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign', 'devextreme': 'npm:devextreme@24.2.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.2.6/cjs', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.60/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/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', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // 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.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/common/core/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, '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);xxxxxxxxxximport React from 'react';import Sparkline, { Size, Tooltip } from 'devextreme-react/sparkline';const ChartCell = (cellData) => ( <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>);export default ChartCell;xxxxxxxxxximport React from 'react';import 'devextreme/localization/globalize/currency';import { formatNumber } from 'devextreme/localization';const getGridCellData = (gridData) => gridData.data[gridData.column.caption.toLowerCase()];const DiffCell = (cellData) => { const gridCellData = getGridCellData(cellData); return ( <div className={gridCellData.diff > 0 ? 'inc' : 'dec'}> <div className="current-value"> {formatNumber(gridCellData.value, { type: 'currency', currency: 'USD', precision: 2 })} </div> <div className="diff">{Math.abs(gridCellData.diff).toFixed(2)}</div> </div> );};export default DiffCell;xxxxxxxxxximport React from 'react';import ReactDOM from 'react-dom';import App from './App.js';ReactDOM.render(<App />, document.getElementById('app'));xxxxxxxxxxexport 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'), }, ], },];xxxxxxxxxx<html lang="en"> <head></head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body></html>xxxxxxxxxx#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=');}