Syntax
Argument
Description
time1
(Required) - shows the starting date and time from which we need to calculate elapsed time.
You can input the TIMEAGO function from the above code directly into a cell, or you can use the setFormula method to apply the formula.
Usage notes
The TIMEAGO function is meant to make it easier to calculate the time passed from a starting point to a current point in time
It's usage is mostly common on project management.
You can use the TIMEAGO function if you want to show something more relative to a specific time rather than a straightforward date.
Benefits
This function allows you to have a calculation of the interval passed between 2 moments without having to create complicated custom functions and methods.
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import './styles.css';
class TimeAgoFunction extends GC.Spread.CalcEngine.Functions.Function {
constructor() {
super("TIMEAGO", 1, 1);
}
evaluate (time1: any) {
switch (typeof time1) {
case 'number':
break;
case 'string':
time1 = +new Date(time1);
break;
case 'object':
if (time1.constructor === Date) time1 = time1.getTime();
break;
default:
time1 = +new Date();
}
let time2 = +new Date();
if(time1 == time2){
return "just now";
}
var isFuture = (time2 < time1);
var seconds = ( isFuture ? time1 - time2 : time2 - time1) / 1000;
var interval = seconds / 31536000;
if (interval >= 1) {
var years = Math.floor(interval);
return isFuture ? "in " + (years <= 1 ? "one year" : years + " years")
: years <= 1 ? "one year ago" : years + " years ago";
}
interval = seconds / 2592000;
if (interval >= 1) {
var months = Math.floor(interval);
return isFuture ? "in " + (months <= 1 ? "one month" : months + " months") : months <= 1 ? "one month ago" : months + " months ago";
}
interval = seconds / 86400;
if (interval >= 1) {
var days = Math.floor(interval);
return isFuture ? "in " + (days <= 1 ? "tomorrow" : days + " days")
: days <= 1 ? "yesterday" : days + " days ago";
}
interval = seconds / 3600;
if (interval > 1) {
var hours = Math.floor(interval);
return isFuture ? "in " + (hours <= 1 ? "an hour" : hours + " hours")
: hours <= 1 ? "an hour ago" : hours + " hours ago";
}
interval = seconds / 60;
if (interval > 1) {
var minutes = Math.floor(interval);
return isFuture ? "in " + (minutes <= 1 ? "a minute" : minutes + " minutes")
: minutes <= 1 ? "a minute ago" : minutes + " minutes ago";
}
seconds = Math.floor(seconds);
return isFuture ? "in " + (seconds <= 1 ? "one second" : seconds + " seconds")
: seconds <= 1 ? "one second ago" : seconds + " seconds ago";
}
}
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
autoGenerateColumns = true;
dataSource: any[];
spread: GC.Spread.Sheets.Workbook;
timeAgoFun : any;
hostStyle = {
width: '100%',
height: '100%',
overflow: 'hidden',
float: 'left'
};
constructor() {
}
initSpread($event: any) {
this.spread = $event.spread;
this.timeAgoFun = new TimeAgoFunction();
let spread = this.spread;
spread.suspendPaint();
let sheet = spread.getSheet(0);
sheet.addCustomFunction(this.timeAgoFun);
sheet.setColumnWidth(0, 200);
sheet.setColumnWidth(1, 200);
sheet.setColumnWidth(2, 150);
sheet.setValue(0,0, 'Date');
sheet.setValue(0,1, 'Formula');
sheet.setValue(0,2, 'Result');
sheet.setFormula(1,0, 'TODAY()');
sheet.setValue(1,1, '=TIMEAGO(A2)');
sheet.setFormula(1,2, 'TIMEAGO(A2)');
sheet.setValue(2,0, new Date('2020-01-20'));
sheet.setValue(2,1, '=TIMEAGO(A3)');
sheet.setFormula(2,2, 'TIMEAGO(A3)');
sheet.setValue(3,0, new Date('2021-02-10'));
sheet.setValue(3,1, '=TIMEAGO(A4)');
sheet.setFormula(3,2, 'TIMEAGO(A4)');
sheet.setValue(4,0, new Date('2021-11-29 17:12:00'));
sheet.setValue(4,1, '=TIMEAGO(A5)');
sheet.setFormula(4,2, 'TIMEAGO(A5)');
spread.resumePaint();
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet [autoGenerateColumns]='autoGenerateColumns'>
</gc-worksheet>
</gc-spread-sheets>
</div>
export function getData(){
var data = [{
"version":"14.0.5",
"sheetCount":2,
"tabStripRatio":0.6,
"customList":[
],
"activeSheetIndex":0,
"sheets":{
"Sheet1":{
"name":"Sheet1",
"isSelected":true,
"rowCount":100,
"columnCount":100,
"activeRow":15,
"activeCol":3,
"theme":{
"name":"Office",
"themeColor":{
"name":"Office",
"background1":{
"a":255,
"r":255,
"g":255,
"b":255
},
"background2":{
"a":255,
"r":231,
"g":230,
"b":230
},
"text1":{
"a":255,
"r":0,
"g":0,
"b":0
},
"text2":{
"a":255,
"r":68,
"g":84,
"b":106
},
"accent1":{
"a":255,
"r":68,
"g":114,
"b":196
},
"accent2":{
"a":255,
"r":237,
"g":125,
"b":49
},
"accent3":{
"a":255,
"r":165,
"g":165,
"b":165
},
"accent4":{
"a":255,
"r":255,
"g":192,
"b":0
},
"accent5":{
"a":255,
"r":91,
"g":155,
"b":213
},
"accent6":{
"a":255,
"r":112,
"g":173,
"b":71
},
"hyperlink":{
"a":255,
"r":5,
"g":99,
"b":193
},
"followedHyperlink":{
"a":255,
"r":149,
"g":79,
"b":114
}
},
"headingFont":"Calibri Light",
"bodyFont":"Calibri"
},
"data":{
"dataTable":{
"0":{
"0":{
"value":"Date"
},
"1":{
"value":"Formula"
},
"2":{
"value":"Result"
}
},
"1":{
"0":{
"value":"/OADate(43842)/",
"style":"__builtInTableStyle0__builtInStyle5"
},
"1":{
"value":"=TIMEAGO(A3;A5)",
"style":"__builtInTableStyle1__builtInStyle6"
},
"2":{
"value":{
"_calcError":"#NAME?",
"_code":29
},
"style":"__builtInTableStyle1__builtInStyle6",
"formula":"TIMEAGO(A3,A5)"
}
},
"2":{
"0":{
"value":43842.125,
"style":"__builtInTableStyle2__builtInStyle4"
},
"1":{
"value":"=TIMEAGO(A5)",
"style":"__builtInTableStyle1__builtInStyle6"
},
"2":{
"value":{
"_calcError":"#NAME?",
"_code":29
},
"style":"__builtInTableStyle1__builtInStyle6",
"formula":"TIMEAGO(A5)"
}
},
"3":{
"0":{
"value":"2-Aug-2009",
"style":"__builtInTableStyle3__builtInStyle3"
},
"1":{
"value":"=TIMEAGO(A1)",
"style":"__builtInTableStyle1__builtInStyle6"
},
"2":{
"value":{
"_calcError":"#NAME?",
"_code":29
},
"style":"__builtInTableStyle1__builtInStyle6",
"formula":"TIMEAGO(A1)"
}
},
"4":{
"0":{
"value":"/OADate(47651)/",
"style":"__builtInTableStyle0__builtInStyle5"
},
"1":{
"value":"=TIMEAGO(A5;A6)",
"style":"__builtInTableStyle1__builtInStyle6"
},
"2":{
"value":{
"_calcError":"#NAME?",
"_code":29
},
"style":"__builtInTableStyle1__builtInStyle6",
"formula":"TIMEAGO(A5,A6)"
}
},
"5":{
"0":{
"value":"/OADate(42736)/",
"style":"__builtInTableStyle4__builtInStyle2"
},
"1":{
"value":"=TIMEAGO(A1;A3)",
"style":"__builtInTableStyle1__builtInStyle6"
},
"2":{
"value":{
"_calcError":"#NAME?",
"_code":29
},
"style":"__builtInTableStyle1__builtInStyle6",
"formula":"TIMEAGO(A1,A3)"
}
},
"6":{
"1":{
"value":"=TIMEAGO(A4,A4)",
"style":"__builtInTableStyle1__builtInStyle6"
},
"2":{
"value":{
"_calcError":"#NAME?",
"_code":29
},
"style":"__builtInTableStyle1__builtInStyle6",
"formula":"TIMEAGO(A4;A4)"
}
},
"7":{
"1":{
"value":"=TIMEAGO(A3;A6)",
"style":"__builtInTableStyle1__builtInStyle6"
},
"2":{
"value":{
"_calcError":"#NAME?",
"_code":29
},
"style":"__builtInTableStyle1__builtInStyle6",
"formula":"TIMEAGO(A3;A6)"
}
}
},
"defaultDataNode":{
"style":{
"backColor":null,
"foreColor":"Text 1 0",
"vAlign":2,
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":false,
"diagonalDown":null,
"diagonalUp":null
}
}
},
"rowHeaderData":{
"defaultDataNode":{
"style":{
"themeFont":"Body"
}
}
},
"colHeaderData":{
"defaultDataNode":{
"style":{
"themeFont":"Body"
}
}
},
"rows":[
{
"size":19
},
{
"size":19,
"visible":true
},
{
"size":19,
"visible":true
},
{
"size":19,
"visible":true
},
{
"size":19,
"visible":true
},
{
"size":19,
"visible":true
},
{
"size":19,
"visible":true
},
{
"size":19,
"visible":true
}
],
"columns":[
{
"size":184
},
{
"size":237
},
{
"size":245
}
],
"leftCellIndex":0,
"topCellIndex":0,
"selections":{
"0":{
"row":15,
"rowCount":1,
"col":3,
"colCount":1
},
"length":1
},
"defaults":{
"colHeaderRowHeight":20,
"colWidth":64,
"rowHeaderColWidth":40,
"rowHeight":19.2,
"_isExcelDefaultColumnWidth":true
},
"rowOutlines":{
"items":[
]
},
"columnOutlines":{
"items":[
]
},
"cellStates":{
},
"outlineColumnOptions":{
},
"autoMergeRangeInfos":[
],
"tables":[
{
"name":"Table1",
"row":0,
"col":0,
"rowCount":8,
"colCount":3,
"style":{
"buildInName":"Light1"
},
"rowFilter":{
"range":{
"row":1,
"rowCount":7,
"col":0,
"colCount":3
},
"typeName":"HideRowFilter",
"dialogVisibleInfo":{
},
"filterButtonVisibleInfo":{
"0":false,
"1":false,
"2":false
},
"showFilterButton":false
},
"columns":[
{
"id":1,
"name":"Date"
},
{
"id":2,
"name":"Formula"
},
{
"id":3,
"name":"Result"
}
]
}
],
"index":0
}
},
"namedStyles":[
{
"backColor":"Accent 1 80",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"20% - Accent1"
},
{
"backColor":"Accent 2 80",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"20% - Accent2"
},
{
"backColor":"Accent 3 80",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"20% - Accent3"
},
{
"backColor":"Accent 4 80",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"20% - Accent4"
},
{
"backColor":"Accent 5 80",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"20% - Accent5"
},
{
"backColor":"Accent 6 80",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"20% - Accent6"
},
{
"backColor":"Accent 1 60",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"40% - Accent1"
},
{
"backColor":"Accent 2 60",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"40% - Accent2"
},
{
"backColor":"Accent 3 60",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"40% - Accent3"
},
{
"backColor":"Accent 4 60",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"40% - Accent4"
},
{
"backColor":"Accent 5 60",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"40% - Accent5"
},
{
"backColor":"Accent 6 60",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"40% - Accent6"
},
{
"backColor":"Accent 1 40",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"60% - Accent1"
},
{
"backColor":"Accent 2 40",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"60% - Accent2"
},
{
"backColor":"Accent 3 40",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"60% - Accent3"
},
{
"backColor":"Accent 4 40",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"60% - Accent4"
},
{
"backColor":"Accent 5 40",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"60% - Accent5"
},
{
"backColor":"Accent 6 40",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"60% - Accent6"
},
{
"backColor":"Accent 1 0",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Accent1"
},
{
"backColor":"Accent 2 0",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Accent2"
},
{
"backColor":"Accent 3 0",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Accent3"
},
{
"backColor":"Accent 4 0",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Accent4"
},
{
"backColor":"Accent 5 0",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Accent5"
},
{
"backColor":"Accent 6 0",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Accent6"
},
{
"backColor":"#ffc7ce",
"foreColor":"#9c0006",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Bad"
},
{
"backColor":"#f2f2f2",
"foreColor":"#fa7d00",
"font":"normal bold 14.7px Calibri",
"themeFont":"Body",
"borderLeft":{
"color":"#7f7f7f",
"style":1
},
"borderTop":{
"color":"#7f7f7f",
"style":1
},
"borderRight":{
"color":"#7f7f7f",
"style":1
},
"borderBottom":{
"color":"#7f7f7f",
"style":1
},
"name":"Calculation",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":"#a5a5a5",
"foreColor":"Background 1 0",
"font":"normal bold 14.7px Calibri",
"themeFont":"Body",
"borderLeft":{
"color":"#3f3f3f",
"style":6
},
"borderTop":{
"color":"#3f3f3f",
"style":6
},
"borderRight":{
"color":"#3f3f3f",
"style":6
},
"borderBottom":{
"color":"#3f3f3f",
"style":6
},
"name":"Check Cell",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"formatter":"_(* #,##0.00_);_(* (#,##0.00);_(* \"-\"??_);_(@_)",
"name":"Comma"
},
{
"backColor":null,
"formatter":"_(* #,##0_);_(* (#,##0);_(* \"-\"_);_(@_)",
"name":"Comma [0]"
},
{
"backColor":null,
"formatter":"_(\"$\"* #,##0.00_);_(\"$\"* (#,##0.00);_(\"$\"* \"-\"??_);_(@_)",
"name":"Currency"
},
{
"backColor":null,
"formatter":"_(\"$\"* #,##0_);_(\"$\"* (#,##0);_(\"$\"* \"-\"_);_(@_)",
"name":"Currency [0]"
},
{
"backColor":null,
"foreColor":"#7f7f7f",
"font":"italic normal 14.7px Calibri",
"themeFont":"Body",
"name":"Explanatory Text"
},
{
"backColor":"#c6efce",
"foreColor":"#006100",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Good"
},
{
"backColor":null,
"foreColor":"Text 2 0",
"font":"normal bold 20px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":{
"color":"Accent 1 0",
"style":5
},
"name":"Heading 1",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"Text 2 0",
"font":"normal bold 17.3px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":{
"color":"Accent 1 50",
"style":5
},
"name":"Heading 2",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"Text 2 0",
"font":"normal bold 14.7px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":{
"color":"Accent 1 40",
"style":2
},
"name":"Heading 3",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"Text 2 0",
"font":"normal bold 14.7px Calibri",
"themeFont":"Body",
"name":"Heading 4"
},
{
"backColor":"#ffcc99",
"foreColor":"#3f3f76",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"borderLeft":{
"color":"#7f7f7f",
"style":1
},
"borderTop":{
"color":"#7f7f7f",
"style":1
},
"borderRight":{
"color":"#7f7f7f",
"style":1
},
"borderBottom":{
"color":"#7f7f7f",
"style":1
},
"name":"Input",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"#fa7d00",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":{
"color":"#ff8001",
"style":6
},
"name":"Linked Cell",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":"#ffeb9c",
"foreColor":"#9c6500",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Neutral"
},
{
"backColor":null,
"foreColor":"Text 1 0",
"hAlign":3,
"vAlign":2,
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"Normal",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":"#ffffcc",
"borderLeft":{
"color":"#b2b2b2",
"style":1
},
"borderTop":{
"color":"#b2b2b2",
"style":1
},
"borderRight":{
"color":"#b2b2b2",
"style":1
},
"borderBottom":{
"color":"#b2b2b2",
"style":1
},
"name":"Note",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":"#f2f2f2",
"foreColor":"#3f3f3f",
"font":"normal bold 14.7px Calibri",
"themeFont":"Body",
"borderLeft":{
"color":"#3f3f3f",
"style":1
},
"borderTop":{
"color":"#3f3f3f",
"style":1
},
"borderRight":{
"color":"#3f3f3f",
"style":1
},
"borderBottom":{
"color":"#3f3f3f",
"style":1
},
"name":"Output",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"formatter":"0%",
"name":"Percent"
},
{
"backColor":null,
"foreColor":"Text 2 0",
"font":"normal bold 24px Calibri Light",
"themeFont":"Headings",
"name":"Title"
},
{
"backColor":null,
"foreColor":"Text 1 0",
"font":"normal bold 14.7px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":{
"color":"Accent 1 0",
"style":1
},
"borderRight":null,
"borderBottom":{
"color":"Accent 1 0",
"style":6
},
"name":"Total",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"#ff0000",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Warning Text"
},
{
"backColor":null,
"foreColor":"Text 1 0",
"hAlign":3,
"vAlign":2,
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"formatter":"General",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"__builtInStyle1",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"Text 1 0",
"hAlign":3,
"vAlign":2,
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"formatter":"m/d/yyyy",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"__builtInStyle2",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"Text 1 0",
"hAlign":3,
"vAlign":2,
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"formatter":"@",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"__builtInStyle3",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"Text 1 0",
"hAlign":3,
"vAlign":2,
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"formatter":"0",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"__builtInStyle4",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"Text 1 0",
"hAlign":3,
"vAlign":2,
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"formatter":"yyyy\\-mm\\-dd;@",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"__builtInStyle5",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"Text 1 0",
"hAlign":3,
"vAlign":2,
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"formatter":"General",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"__builtInStyle6",
"quotePrefix":true,
"diagonalDown":null,
"diagonalUp":null
},
{
"hAlign":3,
"vAlign":2,
"themeFont":"Body",
"formatter":"yyyy\\-mm\\-dd;@",
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"__builtInTableStyle0__builtInStyle5",
"diagonalDown":null,
"diagonalUp":null
},
{
"hAlign":3,
"vAlign":2,
"themeFont":"Body",
"formatter":"General",
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"__builtInTableStyle1__builtInStyle6",
"quotePrefix":true,
"diagonalDown":null,
"diagonalUp":null
},
{
"hAlign":3,
"vAlign":2,
"themeFont":"Body",
"formatter":"0",
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"__builtInTableStyle2__builtInStyle4",
"diagonalDown":null,
"diagonalUp":null
},
{
"hAlign":3,
"vAlign":2,
"themeFont":"Body",
"formatter":"@",
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"__builtInTableStyle3__builtInStyle3",
"diagonalDown":null,
"diagonalUp":null
},
{
"hAlign":3,
"vAlign":2,
"themeFont":"Body",
"formatter":"m/d/yyyy",
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"__builtInTableStyle4__builtInStyle2",
"diagonalDown":null,
"diagonalUp":null
}
]
}];
};
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
