Stock Index (React)

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.

This example uses React.

Description
index.html
app.js
data.js
styles.css

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.

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);