Stock Index | Features | MESCIUS DataViewsJS React Demos

This example shows how you can add a single row at the column header row, which is useful for display things like charts that are always on top of data. By default, Spread.Views shows individual header rows in each column header. When you set the separateColumn property to false, Spread.Views shows one header row entry instead of individual ones. In this demo, not having separate columns in the column headers allows the developer to display a chart that is always at the top of the data, even when scrolling. This can also be extended to other types of data at the top of the grid.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Rows/StockIndex/react/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="rows, header row, headerrow" />
<meta
name="description"
content="This example shows how you can add a single row at the column header row, which is useful for display things like charts that are always on top of data."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stock Index | Features | MESCIUS DataViewsJS React Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'react',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/node_modules/lodash/lodash.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/systemjs/dist/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript">
System.import('./app.js');
</script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';
import DataView from '@grapecity/dataviews.react';
import { GridLayout } from '@grapecity/dataviews.grid';
import { data, splitData } from './data';
let stockChart;
const data0 = splitData(data);
const chartOptions = {
title: {
text: 'STOCK INDEX',
left: 'center',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
},
},
grid: {
left: '5%',
right: '5%',
bottom: '15%',
},
xAxis: {
type: 'category',
data: data0.categoryData,
scale: true,
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
splitNumber: 20,
min: 'dataMin',
max: 'dataMax',
},
yAxis: {
scale: true,
splitArea: {
show: true,
},
},
dataZoom: [
{
type: 'inside',
start: 50,
end: 100,
},
{
show: true,
type: 'slider',
y: '90%',
start: 50,
end: 100,
},
],
series: [
{
name: 'STOCK INDEX',
type: 'candlestick',
data: data0.values,
},
],
};
const cols = [
{ id: 'date', caption: 'Date', dataField: 'date' },
{ id: 'open', caption: 'Open', dataField: 'open' },
{ id: 'close', caption: 'Close', dataField: 'close' },
{ id: 'low', caption: 'Low', dataField: 'low' },
{ id: 'high', caption: 'High', dataField: 'high' },
];
const layout = new GridLayout({
headerRow: {
visible: true,
height: 250,
separateColumn: false,
renderer: '<div id="stockWrapper" style="widht:100%;height:100%;"></div>',
},
});
class App extends React.Component {
componentDidMount() {
stockChart = echarts.init(document.getElementById('stockWrapper'));
stockChart.setOption(chartOptions);
}
render() {
const handleColumnChanged = (e) => {
if (e.type === 'resized' && stockChart) {
stockChart.resize();
}
};
return (
<DataView
id="grid"
className="grid"
data={data}
cols={cols}
layout={layout}
autoFocus
onColumnChanged={handleColumnChanged}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));

import _ from 'lodash';
export const data = [
{
date: '2018/1/24',
open: 2320.26,
close: 2320.26,
low: 2287.3,
high: 2362.94,
},
{
date: '2018/1/25',
open: 2300,
close: 2291.3,
low: 2288.26,
high: 2308.38,
},
{
date: '2018/1/28',
open: 2295.35,
close: 2346.5,
low: 2295.35,
high: 2346.92,
},
{
date: '2018/1/29',
open: 2347.22,
close: 2358.98,
low: 2337.35,
high: 2363.8,
},
{
date: '2018/1/30',
open: 2360.75,
close: 2382.48,
low: 2347.89,
high: 2383.76,
},
{
date: '2018/1/31',
open: 2383.43,
close: 2385.42,
low: 2371.23,
high: 2391.82,
},
{
date: '2018/2/1',
open: 2377.41,
close: 2419.02,
low: 2369.57,
high: 2421.15,
},
{
date: '2018/2/4',
open: 2425.92,
close: 2428.15,
low: 2417.58,
high: 2440.38,
},
{
date: '2018/2/5',
open: 2411,
close: 2433.13,
low: 2403.3,
high: 2437.42,
},
{
date: '2018/2/6',
open: 2432.68,
close: 2434.48,
low: 2427.7,
high: 2441.73,
},
{
date: '2018/2/7',
open: 2430.69,
close: 2418.53,
low: 2394.22,
high: 2433.89,
},
{
date: '2018/2/8',
open: 2416.62,
close: 2432.4,
low: 2414.4,
high: 2443.03,
},
{
date: '2018/2/18',
open: 2441.91,
close: 2421.56,
low: 2415.43,
high: 2444.8,
},
{
date: '2018/2/19',
open: 2420.26,
close: 2382.91,
low: 2373.53,
high: 2427.07,
},
{
date: '2018/2/20',
open: 2383.49,
close: 2397.18,
low: 2370.61,
high: 2397.94,
},
{
date: '2018/2/21',
open: 2378.82,
close: 2325.95,
low: 2309.17,
high: 2378.82,
},
{
date: '2018/2/22',
open: 2322.94,
close: 2314.16,
low: 2308.76,
high: 2330.88,
},
{
date: '2018/2/25',
open: 2320.62,
close: 2325.82,
low: 2315.01,
high: 2338.78,
},
{
date: '2018/2/26',
open: 2313.74,
close: 2293.34,
low: 2289.89,
high: 2340.71,
},
{
date: '2018/2/27',
open: 2297.77,
close: 2313.22,
low: 2292.03,
high: 2324.63,
},
{
date: '2018/2/28',
open: 2322.32,
close: 2365.59,
low: 2308.92,
high: 2366.16,
},
{
date: '2018/3/1',
open: 2364.54,
close: 2359.51,
low: 2330.86,
high: 2369.65,
},
{
date: '2018/3/4',
open: 2332.08,
close: 2273.4,
low: 2259.25,
high: 2333.54,
},
{
date: '2018/3/5',
open: 2274.81,
close: 2326.31,
low: 2270.1,
high: 2328.14,
},
{
date: '2018/3/6',
open: 2333.61,
close: 2347.18,
low: 2321.6,
high: 2351.44,
},
{
date: '2018/3/7',
open: 2340.44,
close: 2324.29,
low: 2304.27,
high: 2352.02,
},
{
date: '2018/3/8',
open: 2326.42,
close: 2318.61,
low: 2314.59,
high: 2333.67,
},
{
date: '2018/3/11',
open: 2314.68,
close: 2310.59,
low: 2296.58,
high: 2320.96,
},
{
date: '2018/3/12',
open: 2309.16,
close: 2286.6,
low: 2264.83,
high: 2333.29,
},
{
date: '2018/3/13',
open: 2282.17,
close: 2263.97,
low: 2253.25,
high: 2286.33,
},
{
date: '2018/3/14',
open: 2255.77,
close: 2270.28,
low: 2253.31,
high: 2276.22,
},
{
date: '2018/3/15',
open: 2269.31,
close: 2278.4,
low: 2250,
high: 2312.08,
},
{
date: '2018/3/18',
open: 2267.29,
close: 2240.02,
low: 2239.21,
high: 2276.05,
},
{
date: '2018/3/19',
open: 2244.26,
close: 2257.43,
low: 2232.02,
high: 2261.31,
},
{
date: '2018/3/20',
open: 2257.74,
close: 2317.37,
low: 2257.42,
high: 2317.86,
},
{
date: '2018/3/21',
open: 2318.21,
close: 2324.24,
low: 2311.6,
high: 2330.81,
},
{
date: '2018/3/22',
open: 2321.4,
close: 2328.28,
low: 2314.97,
high: 2332,
},
{
date: '2018/3/25',
open: 2334.74,
close: 2326.72,
low: 2319.91,
high: 2344.89,
},
{
date: '2018/3/26',
open: 2318.58,
close: 2297.67,
low: 2281.12,
high: 2319.99,
},
{
date: '2018/3/27',
open: 2299.38,
close: 2301.26,
low: 2289,
high: 2323.48,
},
{
date: '2018/3/28',
open: 2273.55,
close: 2236.3,
low: 2232.91,
high: 2273.55,
},
{
date: '2018/3/29',
open: 2238.49,
close: 2236.62,
low: 2228.81,
high: 2246.87,
},
{
date: '2018/4/1',
open: 2229.46,
close: 2234.4,
low: 2227.31,
high: 2243.95,
},
{
date: '2018/4/2',
open: 2234.9,
close: 2227.74,
low: 2220.44,
high: 2253.42,
},
{
date: '2018/4/3',
open: 2232.69,
close: 2225.29,
low: 2217.25,
high: 2241.34,
},
{
date: '2018/4/8',
open: 2196.24,
close: 2211.59,
low: 2180.67,
high: 2212.59,
},
{
date: '2018/4/9',
open: 2215.47,
close: 2225.77,
low: 2215.47,
high: 2234.73,
},
{
date: '2018/4/10',
open: 2224.93,
close: 2226.13,
low: 2212.56,
high: 2233.04,
},
{
date: '2018/4/11',
open: 2236.98,
close: 2219.55,
low: 2217.26,
high: 2242.48,
},
{
date: '2018/4/12',
open: 2218.09,
close: 2206.78,
low: 2204.44,
high: 2226.26,
},
{
date: '2018/4/15',
open: 2199.91,
close: 2181.94,
low: 2177.39,
high: 2204.99,
},
{
date: '2018/4/16',
open: 2169.63,
close: 2194.85,
low: 2165.78,
high: 2196.43,
},
{
date: '2018/4/17',
open: 2195.03,
close: 2193.8,
low: 2178.47,
high: 2197.51,
},
{
date: '2018/4/18',
open: 2181.82,
close: 2197.6,
low: 2175.44,
high: 2206.03,
},
{
date: '2018/4/19',
open: 2201.12,
close: 2244.64,
low: 2200.58,
high: 2250.11,
},
{
date: '2018/4/22',
open: 2236.4,
close: 2242.17,
low: 2232.26,
high: 2245.12,
},
{
date: '2018/4/23',
open: 2242.62,
close: 2184.54,
low: 2182.81,
high: 2242.62,
},
{
date: '2018/4/24',
open: 2187.35,
close: 2218.32,
low: 2184.11,
high: 2226.12,
},
{
date: '2018/4/25',
open: 2213.19,
close: 2199.31,
low: 2191.85,
high: 2224.63,
},
{
date: '2018/4/26',
open: 2203.89,
close: 2177.91,
low: 2173.86,
high: 2210.58,
},
{
date: '2018/5/2',
open: 2170.78,
close: 2174.12,
low: 2161.14,
high: 2179.65,
},
{
date: '2018/5/3',
open: 2179.05,
close: 2205.5,
low: 2179.05,
high: 2222.81,
},
{
date: '2018/5/6',
open: 2212.5,
close: 2231.17,
low: 2212.5,
high: 2236.07,
},
{
date: '2018/5/7',
open: 2227.86,
close: 2235.57,
low: 2219.44,
high: 2240.26,
},
{
date: '2018/5/8',
open: 2242.39,
close: 2246.3,
low: 2235.42,
high: 2255.21,
},
{
date: '2018/5/9',
open: 2246.96,
close: 2232.97,
low: 2221.38,
high: 2247.86,
},
{
date: '2018/5/10',
open: 2228.82,
close: 2246.83,
low: 2225.81,
high: 2247.67,
},
{
date: '2018/5/13',
open: 2247.68,
close: 2241.92,
low: 2231.36,
high: 2250.85,
},
{
date: '2018/5/14',
open: 2238.9,
close: 2217.01,
low: 2205.87,
high: 2239.93,
},
{
date: '2018/5/15',
open: 2217.09,
close: 2224.8,
low: 2213.58,
high: 2225.19,
},
{
date: '2018/5/16',
open: 2221.34,
close: 2251.81,
low: 2210.77,
high: 2252.87,
},
{
date: '2018/5/17',
open: 2249.81,
close: 2282.87,
low: 2248.41,
high: 2288.09,
},
{
date: '2018/5/20',
open: 2286.33,
close: 2299.99,
low: 2281.9,
high: 2309.39,
},
{
date: '2018/5/21',
open: 2297.11,
close: 2305.11,
low: 2290.12,
high: 2305.3,
},
{
date: '2018/5/22',
open: 2303.75,
close: 2302.4,
low: 2292.43,
high: 2314.18,
},
{
date: '2018/5/23',
open: 2293.81,
close: 2275.67,
low: 2274.1,
high: 2304.95,
},
{
date: '2018/5/24',
open: 2281.45,
close: 2288.53,
low: 2270.25,
high: 2292.59,
},
{
date: '2018/5/27',
open: 2286.66,
close: 2293.08,
low: 2283.94,
high: 2301.7,
},
{
date: '2018/5/28',
open: 2293.4,
close: 2321.32,
low: 2281.47,
high: 2322.1,
},
{
date: '2018/5/29',
open: 2323.54,
close: 2324.02,
low: 2321.17,
high: 2334.33,
},
{
date: '2018/5/30',
open: 2316.25,
close: 2317.75,
low: 2310.49,
high: 2325.72,
},
{
date: '2018/5/31',
open: 2320.74,
close: 2300.59,
low: 2299.37,
high: 2325.53,
},
{
date: '2018/6/3',
open: 2300.21,
close: 2299.25,
low: 2294.11,
high: 2313.43,
},
{
date: '2018/6/4',
open: 2297.1,
close: 2272.42,
low: 2264.76,
high: 2297.1,
},
{
date: '2018/6/5',
open: 2270.71,
close: 2270.93,
low: 2260.87,
high: 2276.86,
},
{
date: '2018/6/6',
open: 2264.43,
close: 2242.11,
low: 2240.07,
high: 2266.69,
},
{
date: '2018/6/7',
open: 2242.26,
close: 2210.9,
low: 2205.07,
high: 2250.63,
},
{
date: '2018/6/13',
open: 2190.1,
close: 2148.35,
low: 2126.22,
high: 2190.1,
},
];
export function splitData(data) {
const categoryData = [];
const values = [];
for (let i = 0; i < data.length; i++) {
const tempData = _.map(data[i], _.identity);
categoryData.push(tempData.splice(0, 1)[0]);
values.push(tempData);
}
return {
categoryData,
values,
};
}

.gc-header-row-cell {
padding: 4px;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd3MvU3RvY2tJbmRleC9yZWFjdC9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL1Jvd3MvU3RvY2tJbmRleC9yZWFjdC9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsWUFBQTtBQ0NGIiwiZmlsZSI6IkZlYXR1cmVzL1Jvd3MvU3RvY2tJbmRleC9yZWFjdC9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmdjLWhlYWRlci1yb3ctY2VsbCB7XG4gIHBhZGRpbmc6IDRweDtcbn1cbiIsIi5nYy1oZWFkZXItcm93LWNlbGwge1xuICBwYWRkaW5nOiA0cHg7XG59Il19 */

(function () {
const IS_PROD = window.process.env.NODE_ENV === 'production';
const USE_NPM = window.process.env.USE_NPM;
const USE_CDN = window.process.env.USE_CDN;
const SITE_ROOT = window.process.env.SITE_ROOT;
const FRAMEWORK = window.process.env.FRAMEWORK;
const ext = IS_PROD ? '.min.js' : '.js';
function js(name) {
return name + ext;
}
function npm(t) {
if (!t.file) {
t.file = IS_PROD ? t.prod : t.dev;
}
const version = USE_CDN && t.version ? '@' + t.version : '';
const path = t.pkg + version + '/' + t.file;
if (USE_CDN) {
return 'https://unpkg.com/' + path;
}
return 'npm:' + path;
}
function dv(t) {
if (USE_CDN || USE_NPM) {
t.file = 'dist/' + t.file + '.min.js';
return npm(t);
}
return SITE_ROOT + '/static/dataviews/' + js(t.file);
}
const isTypeScript = FRAMEWORK === 'angular';
const babelConfig = {
es2015: true,
react: true,
};
const meta = {
js: {
babelOptions: babelConfig,
},
ts: {
typescriptOptions: {
tsconfig: true
},
},
};
const map = {
// gc.dataviews packages
'@grapecity/dataviews.common': dv({pkg:'@grapecity/dataviews.common',file:'gc.dataviews.common',version:'1.8.17'}),
'@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.17'}),
'@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.17'}),
'@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.17'}),
'@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.17'}),
'@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.17'}),
'@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.17'}),
'@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.17'}),
'@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.17'}),
'@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.17'}),
'@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.17'}),
'@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.17'}),
'@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.17'}),
'@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.17'}),
// third-party libs
react: npm({pkg:'react',prod:'umd/react.production.min.js',dev:'umd/react.development.js',version:'16.13.1'}),
'react-dom': npm({pkg:'react-dom',prod:'umd/react-dom.production.min.js',dev:'umd/react-dom.development.js',version:'16.13.1'}),
'react-router-dom': npm({pkg:'react-router-dom',prod:'umd/react-router-dom.min.js',dev:'umd/react-router-dom.js',version:'5.2.0'}),
'vue': npm({pkg:'vue',file:'dist/vue.js',version:'2.6.12'}),
'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.4.3'}),
'lodash': npm({pkg: 'lodash', file: js('lodash')}),
'zone.js': npm({pkg: 'zone.js', file: js('dist/zone')}),
'rxjs': npm({pkg: 'rxjs', file: js('bundles/rxjs.umd')}),
'rxjs/operators': npm({pkg:'rxjs-operators-bundle',prod:'dist/bundle.min.js',dev:'dist/bundle.js',version:'1.0.2'}),
'@angular/core': npm({pkg: '@angular/core', file: js('bundles/core.umd')}),
'@angular/common': npm({pkg: '@angular/common', file: js('bundles/common.umd')}),
'@angular/compiler': npm({pkg: '@angular/compiler', file: js('bundles/compiler.umd')}),
'@angular/platform-browser': npm({pkg: '@angular/platform-browser', file: js('bundles/platform-browser.umd')}),
'@angular/platform-browser-dynamic': npm({pkg: '@angular/platform-browser-dynamic', file: js('bundles/platform-browser-dynamic.umd')}),
'@angular/http': npm({pkg: '@angular/http', file: js('bundles/http.umd')}),
'@angular/common/http': npm({pkg: '@angular/common', file: js('bundles/common-http.umd')}),
'@angular/router': npm({pkg: '@angular/router', file: js('bundles/router.umd')}),
'@angular/forms': npm({pkg: '@angular/forms', file: js('bundles/forms.umd')}),
// systemjs plugins
'systemjs-plugin-json': npm({pkg:'systemjs-plugin-json',file:'json.js',version:'0.3.0'}),
'systemjs-plugin-css': npm({pkg:'systemjs-plugin-css',file:'css.js',version:'0.1.37'}),
'systemjs-plugin-babel': npm({pkg:'systemjs-plugin-babel',file:'plugin-babel.js',version:'0.0.25'}),
'systemjs-babel-build': npm({pkg:'systemjs-plugin-babel',file:'systemjs-babel-browser.js',version:'0.0.25'}),
'plugin-typescript': npm({pkg:'plugin-typescript',file:'lib/plugin.js',version:'8.0.0'}),
'typescript': npm({pkg:'typescript',file:'lib/typescript.js',version:'4.0.2'}),
'systemjs-vue-browser': npm({pkg:'systemjs-vue-browser',file:'index.js',version:'1.0.11'}),
};
const config = {
defaultJSExtensions: true,
transpiler: isTypeScript ? 'plugin-typescript' : 'systemjs-plugin-babel',
typescriptOptions: {
tsconfig: true
},
meta: {
'*.json': {loader: 'systemjs-plugin-json'},
'*.css': {loader: 'systemjs-plugin-css'},
'*.vue': {loader: 'systemjs-vue-browser'},
'*.js': meta.js,
'*.ts': meta.ts,
'app.js': {
format: 'esm',
babelOptions: babelConfig,
},
'typescript': {
exports: 'ts',
},
'@grapecity/dataviews.common': {
format: 'amd',
},
'@grapecity/dataviews.core': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.grid': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.cardlayout': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.masonry': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.calendar': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.timeline': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.trellis': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.gantt': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.searchbox': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.react': {
format: 'amd',
deps: [
'react',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.vue': {
format: 'amd',
deps: [
'vue',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.angular': {
format: 'amd',
deps: [
'@angular/core',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.csvexport': {
format: 'amd',
deps: [
'@grapecity/dataviews.common'
],
},
},
paths: {
// paths serve as alias
'npm:': SITE_ROOT + '/node_modules/',
},
// map tells the System loader where to look for things
map: map,
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'.': { defaultExtension: isTypeScript ? 'ts' : 'js' },
node_modules: { defaultExtension: 'js' },
}
};
// fast format detection to avoid detection by source code using regexp
Object.keys(map).filter(function (key) {
return !config.meta[key];
}).forEach(function (key) {
const path = map[key];
if (path.indexOf('/umd') >= 0 || path.indexOf('.umd') >= 0) {
config.meta[key] = { format: 'amd' };
}
if (path.indexOf('/cjs') >= 0) {
config.meta[key] = { format: 'cjs' };
}
});
System.config(config);
})(this);

Stock Index (React)

Feedback