Day Planner | Features | MESCIUS DataViewsJS Angular Demos

Day Planner (Angular)

This example demonstrates usage of the DataViews row template feature by arranging data from a table into a layout that looks much like a day planner, with dates on the left and events and items on the right. Each day you see is a row in the data table.

This example uses Angular.

Description
index.html
app.component.ts
app.ts
data.ts
styles.css

This example demonstrates usage of the DataViews row template feature by arranging data from a table into a layout that looks much like a day planner, with dates on the left and events and items on the right. Each day you see is a row in the data table.

Notice this sample shows how to use a function in the template. In the source code this is accomplished with very little code using CSS and HTML markup techniques.

This example demonstrates usage of the DataViews row template feature by arranging data from a table into a layout that looks much like a day planner, with dates on the left and events and items on the right. Each day you see is a row in the data table. Notice this sample shows how to use a function in the template. In the source code this is accomplished with very little code using CSS and HTML markup techniques.
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/RowTemplates/DayPlanner/angular/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="rows, template, row template, rowtemplate" /> <meta name="description" content="This example demonstrates usage of the DataViews row template feature by arranging data from a table into a layout that looks much like a day planner, with dates on the left and events and items on the right. Each day you see is a row in the data table." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Day Planner | Features | MESCIUS DataViewsJS Angular 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/angular-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: 'angular', DVJS_LICENSE_KEY: 'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr', SJS_LICENSE_KEY: 'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep', }, }; </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> <template id="template" style="display: none"> {{function getTime(time, type){ var date = new Date(time); var arr = date.toDateString().split(' '); switch (type) { case 'day': return arr[2]; case 'week': return arr[0]; case 'month': return arr[1] + ', ' + arr[3]; default: return ''; } }}} <div class="template-wrapper"> <div class="template-container"> <div class="left-container" data-column="time"></div> <div class="right-container" data-column="details"></div> </div> </div> </template> <app-root></app-root> <script type="text/javascript"> System.import('./app.ts'); </script> </body> </html>
import { Component } from '@angular/core'; import { GridLayout } from '@grapecity/dataviews.grid'; import { data } from './data'; const timePresenter = '<div class="day">{{=getTime(it.time, "day")}}</div>' + '<div class="week">{{=getTime(it.time, "week")}}</div>' + '<div class="month">{{=getTime(it.time, "month")}}</div>'; const detailsPresenter = '{{? it.details.medicine}}<div class="medicine"><div class="title">Medicine:</div><div class="content">{{=it.details.medicine}}</div></div>{{?}}' + '{{? it.details.note}}<div class="note"><div class="title">Note:</div><div class="content">{{=it.details.note}}</div></div>{{?}}' + '{{? it.details.moods}}<div class="moods"><div class="title">Moods:</div><div class="content">{{=it.details.moods}}</div></div>{{?}}'; const cols = [ { id: 'time', dataField: 'time', presenter: timePresenter }, { id: 'details', dataField: 'details', presenter: detailsPresenter }, ]; const layout = new GridLayout({ autoRowHeight: true, showRowHeader: false, showColHeader: false, rowTemplate: '#template', }); @Component({ selector: 'app-root', template: ` <gc-dataview id="grid" class="grid" [data]="data" [cols]="cols" [layout]="layout" autoFocus></gc-dataview> `, }) export class AppComponent { data = data; cols = cols; layout = layout; }
import { NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; import { DataViewModule } from '@grapecity/dataviews.angular'; // zone.js should be loaded last to fix error 'ZoneAwarePromise has been overwritten' import 'zone.js'; @NgModule({ declarations: [AppComponent], imports: [DataViewModule, BrowserModule, FormsModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {} if (process.env.NODE_ENV === 'production') { enableProdMode(); } platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err) => console.error(err));
export const data = [ { time: 1419091200000, details: { medicine: 'Vitamin B, Vitamin C', }, }, { time: 1418918400000, details: { medicine: 'Vitamin A, Vitamin B, Vitamin C', note: 'Need to renew registration by this day or get a fine.', }, }, { time: 1418745600000, details: { medicine: 'Vitamin A, Vitamin B, Vitamin C', note: 'Today is my birthday!', moods: 'Angelic Confident, Dynamic', }, }, { time: 1418572800000, details: { medicine: 'Vitamin A, ', note: 'Meeting with agent at 4:00 pm', moods: 'Determined', }, }, ];
.gc-cell { border: 0; padding: 0; } .gc-viewport { background: url("/dataviewsjs/demos/images/grid-background.png"); padding: 1em; } .template-wrapper { margin-bottom: 1em; } .template-container { background: #c8ffbe; border: solid 1px #e0e0e0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; width: 677px; } .gc-row.gc-selected { background: none; color: inherit; } .gc-focused .template-container { background: #623b5a; } .gc-focused .left-container div { color: #fff; } .gc-focused .left-container:after { border-left: solid #623b5a; border-width: 5px; } .gc-row.gc-focused { background-color: inherit; } .left-container { float: left; width: 75px; } .left-container:after { border: solid transparent; border-left: solid #c8ffbe; border-width: 5px; content: " "; height: 0; left: 75px; position: absolute; top: 10px; width: 0; } .right-container { background: #fff; margin-left: 75px; min-height: 96px; width: 600px; } .day { color: #333; font-size: 2.5em; text-align: center; } .week { color: #333; font-size: 1.1em; text-align: center; } .month { color: #999; font-size: 0.8em; text-align: center; } .title { color: #623b5a; font-size: 16px; } .content { color: #777; overflow: hidden; text-overflow: ellipsis; } .note, .medicine, .moods { padding: 5px 10px; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd1RlbXBsYXRlcy9EYXlQbGFubmVyL2FuZ3VsYXIvc3R5bGVzLnNjc3MiLCJGZWF0dXJlcy9Sb3dUZW1wbGF0ZXMvRGF5UGxhbm5lci9hbmd1bGFyL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxTQUFBO0VBQ0EsVUFBQTtBQ0NGOztBREVBO0VBQ0UsZ0VBQUE7RUFDQSxZQUFBO0FDQ0Y7O0FERUE7RUFDRSxrQkFBQTtBQ0NGOztBREVBO0VBQ0UsbUJBQUE7RUFDQSx5QkFBQTtFQUNBLHVDQUFBO0VBQ0EsZ0JBQUE7RUFDQSxrQkFBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLGdCQUFBO0VBQ0EsY0FBQTtBQ0NGOztBREVBO0VBQ0UsbUJBQUE7QUNDRjs7QURFQTtFQUNFLFdBQUE7QUNDRjs7QURFQTtFQUNFLDBCQUFBO0VBQ0EsaUJBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0FDQ0Y7O0FERUE7RUFDRSxXQUFBO0VBQ0EsV0FBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7RUFDQSwwQkFBQTtFQUNBLGlCQUFBO0VBQ0EsWUFBQTtFQUNBLFNBQUE7RUFDQSxVQUFBO0VBQ0Esa0JBQUE7RUFDQSxTQUFBO0VBQ0EsUUFBQTtBQ0NGOztBREVBO0VBQ0UsZ0JBQUE7RUFDQSxpQkFBQTtFQUNBLGdCQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UsV0FBQTtFQUNBLGdCQUFBO0VBQ0Esa0JBQUE7QUNDRjs7QURFQTtFQUNFLFdBQUE7RUFDQSxnQkFBQTtFQUNBLGtCQUFBO0FDQ0Y7O0FERUE7RUFDRSxXQUFBO0VBQ0EsZ0JBQUE7RUFDQSxrQkFBQTtBQ0NGOztBREVBO0VBQ0UsY0FBQTtFQUNBLGVBQUE7QUNDRjs7QURFQTtFQUNFLFdBQUE7RUFDQSxnQkFBQTtFQUNBLHVCQUFBO0FDQ0Y7O0FERUE7OztFQUdFLGlCQUFBO0FDQ0YiLCJmaWxlIjoiRmVhdHVyZXMvUm93VGVtcGxhdGVzL0RheVBsYW5uZXIvYW5ndWxhci9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmdjLWNlbGwge1xuICBib3JkZXI6IDA7XG4gIHBhZGRpbmc6IDA7XG59XG5cbi5nYy12aWV3cG9ydCB7XG4gIGJhY2tncm91bmQ6IHVybCgnL2RhdGF2aWV3c2pzL2RlbW9zL2ltYWdlcy9ncmlkLWJhY2tncm91bmQucG5nJyk7XG4gIHBhZGRpbmc6IDFlbTtcbn1cblxuLnRlbXBsYXRlLXdyYXBwZXIge1xuICBtYXJnaW4tYm90dG9tOiAxZW07XG59XG5cbi50ZW1wbGF0ZS1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kOiAjYzhmZmJlO1xuICBib3JkZXI6IHNvbGlkIDFweCAjZTBlMGUwO1xuICBib3gtc2hhZG93OiAwIDAgMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgd2lkdGg6IDY3N3B4O1xufVxuXG4uZ2Mtcm93LmdjLXNlbGVjdGVkIHtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY29sb3I6IGluaGVyaXQ7XG59XG5cbi5nYy1mb2N1c2VkIC50ZW1wbGF0ZS1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kOiAjNjIzYjVhO1xufVxuXG4uZ2MtZm9jdXNlZCAubGVmdC1jb250YWluZXIgZGl2IHtcbiAgY29sb3I6ICNmZmY7XG59XG5cbi5nYy1mb2N1c2VkIC5sZWZ0LWNvbnRhaW5lcjphZnRlciB7XG4gIGJvcmRlci1sZWZ0OiBzb2xpZCAjNjIzYjVhO1xuICBib3JkZXItd2lkdGg6IDVweDtcbn1cblxuLmdjLXJvdy5nYy1mb2N1c2VkIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogaW5oZXJpdDtcbn1cblxuLmxlZnQtY29udGFpbmVyIHtcbiAgZmxvYXQ6IGxlZnQ7XG4gIHdpZHRoOiA3NXB4O1xufVxuXG4ubGVmdC1jb250YWluZXI6YWZ0ZXIge1xuICBib3JkZXI6IHNvbGlkIHRyYW5zcGFyZW50O1xuICBib3JkZXItbGVmdDogc29saWQgI2M4ZmZiZTtcbiAgYm9yZGVyLXdpZHRoOiA1cHg7XG4gIGNvbnRlbnQ6ICcgJztcbiAgaGVpZ2h0OiAwO1xuICBsZWZ0OiA3NXB4O1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMTBweDtcbiAgd2lkdGg6IDA7XG59XG5cbi5yaWdodC1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kOiAjZmZmO1xuICBtYXJnaW4tbGVmdDogNzVweDtcbiAgbWluLWhlaWdodDogOTZweDtcbiAgd2lkdGg6IDYwMHB4O1xufVxuXG4uZGF5IHtcbiAgY29sb3I6ICMzMzM7XG4gIGZvbnQtc2l6ZTogMi41ZW07XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cblxuLndlZWsge1xuICBjb2xvcjogIzMzMztcbiAgZm9udC1zaXplOiAxLjFlbTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4ubW9udGgge1xuICBjb2xvcjogIzk5OTtcbiAgZm9udC1zaXplOiAwLjhlbTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4udGl0bGUge1xuICBjb2xvcjogIzYyM2I1YTtcbiAgZm9udC1zaXplOiAxNnB4O1xufVxuXG4uY29udGVudCB7XG4gIGNvbG9yOiAjNzc3O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbn1cblxuLm5vdGUsXG4ubWVkaWNpbmUsXG4ubW9vZHMge1xuICBwYWRkaW5nOiA1cHggMTBweDtcbn1cbiIsIi5nYy1jZWxsIHtcbiAgYm9yZGVyOiAwO1xuICBwYWRkaW5nOiAwO1xufVxuXG4uZ2Mtdmlld3BvcnQge1xuICBiYWNrZ3JvdW5kOiB1cmwoXCIvZGF0YXZpZXdzanMvZGVtb3MvaW1hZ2VzL2dyaWQtYmFja2dyb3VuZC5wbmdcIik7XG4gIHBhZGRpbmc6IDFlbTtcbn1cblxuLnRlbXBsYXRlLXdyYXBwZXIge1xuICBtYXJnaW4tYm90dG9tOiAxZW07XG59XG5cbi50ZW1wbGF0ZS1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kOiAjYzhmZmJlO1xuICBib3JkZXI6IHNvbGlkIDFweCAjZTBlMGUwO1xuICBib3gtc2hhZG93OiAwIDAgMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgd2lkdGg6IDY3N3B4O1xufVxuXG4uZ2Mtcm93LmdjLXNlbGVjdGVkIHtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY29sb3I6IGluaGVyaXQ7XG59XG5cbi5nYy1mb2N1c2VkIC50ZW1wbGF0ZS1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kOiAjNjIzYjVhO1xufVxuXG4uZ2MtZm9jdXNlZCAubGVmdC1jb250YWluZXIgZGl2IHtcbiAgY29sb3I6ICNmZmY7XG59XG5cbi5nYy1mb2N1c2VkIC5sZWZ0LWNvbnRhaW5lcjphZnRlciB7XG4gIGJvcmRlci1sZWZ0OiBzb2xpZCAjNjIzYjVhO1xuICBib3JkZXItd2lkdGg6IDVweDtcbn1cblxuLmdjLXJvdy5nYy1mb2N1c2VkIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogaW5oZXJpdDtcbn1cblxuLmxlZnQtY29udGFpbmVyIHtcbiAgZmxvYXQ6IGxlZnQ7XG4gIHdpZHRoOiA3NXB4O1xufVxuXG4ubGVmdC1jb250YWluZXI6YWZ0ZXIge1xuICBib3JkZXI6IHNvbGlkIHRyYW5zcGFyZW50O1xuICBib3JkZXItbGVmdDogc29saWQgI2M4ZmZiZTtcbiAgYm9yZGVyLXdpZHRoOiA1cHg7XG4gIGNvbnRlbnQ6IFwiIFwiO1xuICBoZWlnaHQ6IDA7XG4gIGxlZnQ6IDc1cHg7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAxMHB4O1xuICB3aWR0aDogMDtcbn1cblxuLnJpZ2h0LWNvbnRhaW5lciB7XG4gIGJhY2tncm91bmQ6ICNmZmY7XG4gIG1hcmdpbi1sZWZ0OiA3NXB4O1xuICBtaW4taGVpZ2h0OiA5NnB4O1xuICB3aWR0aDogNjAwcHg7XG59XG5cbi5kYXkge1xuICBjb2xvcjogIzMzMztcbiAgZm9udC1zaXplOiAyLjVlbTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4ud2VlayB7XG4gIGNvbG9yOiAjMzMzO1xuICBmb250LXNpemU6IDEuMWVtO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5cbi5tb250aCB7XG4gIGNvbG9yOiAjOTk5O1xuICBmb250LXNpemU6IDAuOGVtO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5cbi50aXRsZSB7XG4gIGNvbG9yOiAjNjIzYjVhO1xuICBmb250LXNpemU6IDE2cHg7XG59XG5cbi5jb250ZW50IHtcbiAgY29sb3I6ICM3Nzc7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xufVxuXG4ubm90ZSxcbi5tZWRpY2luZSxcbi5tb29kcyB7XG4gIHBhZGRpbmc6IDVweCAxMHB4O1xufSJdfQ== */
(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);