Overview

The timescale is the column header of the gantt chart in a GanttSheet, and it allows you to show smaller or greater time units.

Tier Mode There are 3 tiers (top, middle and bottom tier) in the timescale layout. You can use GC.Spread.Sheets.GanttSheet.TimescaleTierMode to change its layout: middle middleBottom topMiddleBottom Show Scale Separator The scale line separates the top and middle tiers. You can show or hide the scale line: Tiers Config Each top, middle and bottom tier is configurable with these properties: unit: GC.Spread.Sheets.GanttSheet.TimescaleUnit count: number labelAlign: "Left" | "Center" | "Right" showTickLines: boolean formatter: string The formatter can be a Spread Number Format string for Date values like "yyyy-mm-dd", with GanttSheet special keywords, or it can be a callback function that will be executed during formatting.
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { FormsModule } from '@angular/forms'; import { SpreadSheetsModule } from '@mescius/spread-sheets-angular'; import GC from '@mescius/spread-sheets'; import "@mescius/spread-sheets-tablesheet"; import "@mescius/spread-sheets-ganttsheet"; import './styles.css'; declare let SplitView: any; @Component({ selector: 'app-component', templateUrl: './app.component.html' }) export class AppComponent { spread: GC.Spread.Sheets.Workbook; ganttSheet: GC.Spread.Sheets.GanttSheet; myTable: any; showScaleSeparator = true; showTopScaleTick = true; showMiddleScaleTick = true; showBottomScaleTick = true; timescaleMode = "2"; showTopScalePanel = false; showMiddleScalePanel = true; showBottomScalePanel = true; topScaleUnit: ""; topScaleCount: "1"; topScaleAlign: ""; topScaleFormat: ""; middleScaleUnit: ""; middleScaleCount: "1"; middleScaleAlign: ""; middleScaleFormat: ""; bottomScaleUnit: ""; bottomScaleCount: "1"; bottomScaleAlign: ""; bottomScaleFormat: ""; supposedFormats = [ undefined, [ { value: `yyyy`, info: `2009, 2010,... ` }, { value: `'yy`, info: `'09, '10, ...` }, { value: `yy`, info: `09, 10,...` }, { value: `"Year" {!YEAR_FROM_START}`, info: `Year 1, Year 2 ... (From Start)` }, { value: `"Y"{!YEAR_FROM_START}`, info: `Y1, Y2, Y3, ... (From Start)` }, { value: `{!YEAR_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)` }, { value: `"Year" {!YEAR_FROM_END}`, info: `Year 2, Year 1... (From End)` }, { value: `"Y" {!YEAR_FROM_END}`, info: `Y3, Y2, Y1, ... (From End)` }, { value: `{!YEAR_FROM_END}`, info: `4, 3, 2, 1, ... (From End)` }, ], [ { value: `{!HALF_YEAR("1st","2nd")} "Half"`, info: `1st Half, 2nd Half, ... ` }, { value: `yyyy, "Half" {!HALF_YEAR("1","2")}`, info: `2009, Half 1, 2009, Half 2, ...` }, { value: `"Half" {!HALF_YEAR("1","2")}`, info: `Half 1, Half 2, ...` }, { value: `'yy "H" {!HALF_YEAR("1","2")}`, info: `'09 H1, '09 H2, ...` }, { value: `"H" {!HALF_YEAR("1","2")}`, info: `H1, H2, ...` }, { value: `{!HALF_YEAR("1","2")}`, info: `1, 2,…` }, { value: `{!HALF_YEAR("1","2")}"H"yy`, info: `1H09, 2H09, ...` }, { value: `"Half" {!HALF_YEAR_FROM_START}`, info: `Half 1, Half 2, Half 3, ... (From Start)` }, { value: `"H" {!HALF_YEAR_FROM_START}`, info: `H1, H2, H3, ... (From Start)` }, { value: `{!HALF_YEAR_FROM_START}`, info: `1, 2, 3, ... (From Start)` }, { value: `"Half" {!HALF_YEAR_FROM_END}`, info: `Half 3, Half 2, Half 1, ... (From End)` }, { value: `"H"{!HALF_YEAR_FROM_END}`, info: `H3, H2, H1, ... (From End)` }, { value: `{!HALF_YEAR_FROM_END}`, info: `3, 2, 1, ... (From End)` }, ], [ { value: `{!QUARTER("1st","2nd","3rd","4th")} "Quarter"`, info: `1st Quarter` }, { value: `yyyy "Qtr" {!QUARTER("1","2","3","4")}`, info: `2009 Qtr 1` }, { value: `"Qtr" {!QUARTER("1","2","3","4")}`, info: `Qtr 1, Qtr 2, ...` }, { value: `'yy "Q"{!QUARTER("1","2","3","4")}`, info: `'09 Q1, '09 Q2, ...` }, { value: `"Q"{!QUARTER("1","2","3","4")}`, info: `Q1, Q2, ...` }, { value: `{!QUARTER("1","2","3","4")}`, info: `1, 2, ...` }, { value: `{!QUARTER("1","2","3","4")}"Q"yy`, info: `1Q09, 2Q09, ...` }, { value: `"Quarter" {!QUARTER_FROM_START}`, info: `Quarter 1, Quarter 2, ... (From Start)` }, { value: `"Q"{!QUARTER_FROM_START}`, info: `Q1, Q2, Q3, Q4, ... (From Start)` }, { value: `{!QUARTER_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)` }, { value: `"Quarter" {!QUARTER_FROM_END}`, info: `Quarter 2, Quarter 1, ... (From End)` }, { value: `"Q"{!QUARTER_FROM_END}`, info: `Q4, Q3, Q2, Q1, ... (From End)` }, { value: `{!QUARTER_FROM_END}`, info: `4, 3, 2, 1, ... (From End)` }, ], [ { value: `yyyy mmmm`, info: `2009 January ` }, { value: `yy mmm`, info: `'09 Jan` }, { value: `mmmm`, info: `January` }, { value: `mmm`, info: `Jan, Feb,..` }, { value: `mmmmm`, info: `J, F, ...` }, { value: `m`, info: `1, 2,...` }, { value: `'yy m`, info: `'09 1` }, { value: `yy/m`, info: `09/1` }, { value: `"Month" {!MONTH_FROM_START}`, info: `Month 1, Month 2, ... (From Start)` }, { value: `"M" {!MONTH_FROM_START}`, info: `M1, M2, M3, ... (From Start)` }, { value: `{!MONTH_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)` }, { value: `"Month" {!MONTH_FROM_END}`, info: `Month 2, Month 1, ... (From End)` }, { value: `"M"{!MONTH_FROM_END}`, info: `M3, M2, M1, ... (From End)` }, { value: `{!MONTH_FROM_END}`, info: `4, 3, 2, 1, ... (From End)` }, ], [ { value: `d`, info: `1, 11, 21, ... ` }, { value: `{!THIRDS_OF_MONTH("B","M","E")}`, info: `B, M, E,..` }, { value: `{!THIRDS_OF_MONTH("Beginning","Middle","End")}`, info: `Beginning, Middle, End, ...` }, { value: `m/d`, info: `1/1, 1/11, 1/21, ...` }, { value: `m/{!THIRDS_OF_MONTH("B","M","E")}`, info: `1/B, 1/M, 1/E, ...` }, { value: `mmmm {!THIRDS_OF_MONTH("Beginning","Middle","End")}`, info: `January Beginning, January Middle, ...` }, { value: `mmm d`, info: `Jan 1, Jan 11, Jan 21, ...` }, { value: `mmm {!THIRDS_OF_MONTH("B","M","E")}`, info: `Jan B. Jan M, Jan E, ...` }, { value: `mmmm d`, info: `January 1, January 11, January 21, ...` }, { value: `yy/m/d`, info: `09/1/1, 09/1/11, 09/1/21, ...` }, { value: `yy/m/{!THIRDS_OF_MONTH("B","M","E")}`, info: `09/1/B, 09/1/M, 09/1/E, ...` }, { value: `'yy mmm d`, info: `'09 Jan 1, '09 Jan 11, '09 Jan 21, ...` }, { value: `'yy mmm {!THIRDS_OF_MONTH("B","M","E")}`, info: `'09 Jan B, '09 Jan M, '09 Jan E, ...` }, { value: `yyyy mmmm d`, info: `2009 January 1, 2009 January 11, ...` }, { value: `yyyy mmmm {!THIRDS_OF_MONTH("Beginning","Middle","End")}`, info: `2009 January Beginning, ...` }, ], [ { value: `yyyy mmmm d`, info: `2009 January 25 ` }, { value: `'yy mmm d`, info: `'09 Jan 25` }, { value: `mmmm d`, info: `January 25` }, { value: `mmm d`, info: `Jan 25, Feb 1,...` }, { value: `mmmmm d`, info: `J 25, F1, ...` }, { value: `yy/m/d`, info: `09/1/25, 09/2/1, ...` }, { value: `m/d`, info: `1/25, 2/1, ...` }, { value: `d`, info: `25, 1, ...` }, { value: `ddd dd`, info: `Sun 25` }, { value: `ddd yy/m/d`, info: `Sun 09/1/25` }, { value: `ddd 'yy mmmm d`, info: `Sun '09 January 25` }, { value: `ddd 'yy mmm d`, info: `Sun '09 Jan 25` }, { value: `ddd mmmm d`, info: `Sun January 25` }, { value: `ddd mmm d`, info: `Sun Jan 25` }, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")} mmm d`, info: `Su Jan 25` }, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")} mmm d`, info: `S Jan 25` }, { value: `ddd dd`, info: `Sun 25` }, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")} d`, info: `Su 25` }, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")}mmmmm d`, info: `SJ 25` }, { value: `ddd m/d`, info: `Sun 1/25` }, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")} m/d`, info: `Su 1/25` }, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")} m/d`, info: `S 1/25` }, { value: `{!WEEK_OF_YEAR}`, info: `1, 2, ... 52, 1, 2, ...` }, { value: `ddd {!WEEK_OF_YEAR}`, info: `Sun 1, ..., Sun 52, Sun 1, ...` }, { value: `"Week" {!WEEK_FROM_START}`, info: `Week 1, Week 2, ... (From Start)` }, { value: `"W"{!WEEK_FROM_START}`, info: `W1, W2, W3, W4, ... (From Start)` }, { value: `{!WEEK_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)` }, { value: `"Week" {!WEEK_FROM_END}`, info: `Week 2, Week 1, ... (From End)` }, { value: `"W"{!WEEK_FROM_END}`, info: `W4, W3, W2, W1, ... (From End)` }, { value: `{!WEEK_FROM_END}`, info: `4, 3, 2, 1, ...(From End)` }, ], [ { value: `ddd 'yy mmm d`, info: `Wed '09 Jan 28 ` }, { value: `ddd mmmm d`, info: `Wed January 28` }, { value: `ddd mmm d`, info: `Wed Jan 28` }, { value: `ddd mmmmm d`, info: `Wed J 28` }, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")} d`, info: `We 28` }, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")}mmmmm d `, info: `WJ 28` }, { value: `ddd m/d`, info: `Wed 1/28` }, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")} m/d`, info: `We 1/28` }, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")} m/d`, info: `W 1/28` }, { value: `ddd d`, info: `Wed 28` }, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")} d`, info: `We 28` }, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")} d `, info: `W 28` }, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")}d `, info: `W28` }, { value: `'yy mmm d`, info: `'09 Jan 28` }, { value: `mmm d`, info: `Jan 28, Jan 29, ...` }, { value: `mmmmm d`, info: `J 28, J 29, ...` }, { value: `dddd`, info: `Sunday, Monday, ...` }, { value: `ddd`, info: `Sun, Mon,Tue, ...` }, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")}`, info: `Su, Mo, Tu,...` }, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")}`, info: `S, M,T,...` }, { value: `yy/m/d`, info: `09/1/28, 09/1/29, ...` }, { value: `ddd yy/m/d`, info: `Wed 09/1/28, Thu 09/1/29, ...` }, { value: `m/d`, info: `1/28, 1/29, ...` }, { value: `d`, info: `1, 2, ... ` }, { value: `yyyy {!DAY_OF_YEAR}`, info: `2009 128 (Day of Year)` }, { value: `'yy {!DAY_OF_YEAR}`, info: `'09 128 (Day of Year)` }, { value: `{!DAY_OF_YEAR}`, info: `128 (Day of Year)` }, { value: `"Day"{!DAY_FROM_START}`, info: `Day 1, Day 2 ... (From Start)` }, { value: `"D" {!DAY_FROM_START}`, info: `D1, D2, D3, ... (From Start)` }, { value: `{!DAY_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)` }, { value: `"Day" {!DAY_FROM_END}`, info: `Day 2 Day 1, ... (From End) ` }, { value: `"D" {!DAY_FROM_END}`, info: `D3, D2, D1, ... (From End)` }, { value: `{!DAY_FROM_END}`, info: `4, 3, 2, 1, ... (From End)` }, ], [ { value: `ddd mmm d, h`, info: `Wed Jan 28, 11 ` }, { value: `mmm d, h`, info: `Jan 28, 11` }, { value: `m/d h`, info: `1/28 11` }, { value: `h:mm`, info: `11, info: 00, 12, info: 00, ...` }, { value: `h`, info: `11, 12, ...` }, { value: `hh`, info: `11, 12, ...` }, { value: `"Hour" {!HOUR_FROM_START}`, info: `Hour 1, Hour 2, ... (From Start)` }, { value: `"H"{!HOUR_FROM_START}`, info: `H1, H2, H3, ... (From Start)` }, { value: `{!HOUR_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)` }, { value: `"Hour" {!HOUR_FROM_END}`, info: `Hour 2, Hour 1, ... (From End)` }, { value: `"H"{!HOUR_FROM_END}`, info: `H3, H2, H1, ... (From End)` }, { value: `{!HOUR_FROM_END}`, info: `4, 3, 2, 1, ... (From End)` }, ], [ { value: `hh:mm`, info: `13:45, 13:46, ... ` }, { value: `{!Minute}`, info: `45, 46, 47, ..` }, { value: `"Minute" {!Minute_FROM_START}`, info: `Minute 1, Minute 2, ... (From Start)` }, { value: `"M"{!Minute_FROM_START}`, info: `M1, M2, M3, ... (From Start)` }, { value: `{!Minute_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)` }, { value: `"Minute" {!Minute_FROM_END}`, info: `Minute 2, Minute 1, ... (From End)` }, { value: `"M"{!Minute_FROM_END}`, info: `M3, M2, M1, ... (From End)` }, { value: `{!Minute_FROM_END}`, info: `4, 3, 2, 1, ... (From End)` }, ] ]; hostStyle = { width: '100%', height: '100%' }; initSpread($event: any) { this.spread = $event.spread; let spread = this.spread; spread.suspendPaint(); spread.clearSheets(); this.initDataSource(spread); this.initGanttSheet(spread); spread.resumePaint(); initSplitView(spread); } initDataSource(spread: any) { let tableName = "Gantt_Id"; let baseApiUrl = getBaseApiUrl(); let apiUrl = baseApiUrl + "/" + tableName; let dataManager = spread.dataManager(); this.myTable = dataManager.addTable("myTable", { batch: true, remote: { read: { url: apiUrl } }, schema: { hierarchy: { type: "Parent", column: "parentId" }, columns: { id: { isPrimaryKey: true }, taskNumber: { dataType: "rowOrder" } } } }); } initGanttSheet(spread: any) { let ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet); this.ganttSheet = ganttSheet; let view = this.myTable.addView("ganttView", [ { value: "taskNumber", caption: "NO.", width: 60 }, { value: "name", caption: "Task Name", width: 200 }, { value: "duration", caption: "Duration", width: 90 }, { value: "predecessors", caption: "Predecessors", width: 120 } ]); view.fetch().then(function() { ganttSheet.bindGanttView(view); }); this.initSidePanel(); } toggleScaleSeparator() { this.showScaleSeparator = !this.showScaleSeparator; let timescale = this.ganttSheet.project.timescale; timescale.showScaleSeparator = this.showScaleSeparator; } toggleTopScaleTick() { this.showTopScaleTick = !this.showTopScaleTick; } toggleMiddleScaleTick() { this.showMiddleScaleTick = !this.showMiddleScaleTick; } toggleBottomScaleTick() { this.showBottomScaleTick = !this.showBottomScaleTick; } changeTimeScaleMode(event: any) { this.timescaleMode = event.target.value; let mode = Number(this.timescaleMode); if (mode === 1) { this.showTopScalePanel = false; this.showMiddleScalePanel = true; this.showBottomScalePanel = false; } else if (mode === 2) { this.showTopScalePanel = false; this.showMiddleScalePanel = true; this.showBottomScalePanel = true; } else if (mode === 3) { this.showTopScalePanel = true; this.showMiddleScalePanel = true; this.showBottomScalePanel = true; } this.syncOptionToPanel(undefined) } syncTopScaleFormatOptions() { let topScaleFormatItem = document.getElementById("top-scale-format"); let unit = this.topScaleUnit; let formatListItem = this.createFormatOptionList(unit); topScaleFormatItem.innerHTML = formatListItem; this.topScaleFormat = ""; } syncMiddleScaleFormatOptions() { let middleScaleFormatItem = document.getElementById("middle-scale-format"); let unit = this.middleScaleUnit; let formatListItem = this.createFormatOptionList(unit); middleScaleFormatItem.innerHTML = formatListItem; this.middleScaleFormat = ""; } syncBottomScaleFormatOptions() { let bottomScaleFormatItem = document.getElementById("bottom-scale-format"); let unit = this.bottomScaleUnit; let formatListItem = this.createFormatOptionList(unit); bottomScaleFormatItem.innerHTML = formatListItem; this.bottomScaleFormat = ""; } initSidePanel() { this.syncOptionToPanel(true); } syncOptionToPanel(includeMode: any) { let timescale = this.ganttSheet.project.timescale; let tierMode = Number(this.timescaleMode); if (includeMode) { if (this.showScaleSeparator !== timescale.showScaleSeparator) { this.toggleScaleSeparator(); } } if (tierMode === 1 || tierMode === 2 || tierMode === 3) { this.middleScaleUnit = timescale.middleTier.unit; this.syncMiddleScaleFormatOptions(); this.middleScaleCount = timescale.middleTier.count; this.middleScaleAlign = timescale.middleTier.labelAlign; this.middleScaleFormat = timescale.middleTier.formatter ? timescale.middleTier.formatter : ""; if (this.showMiddleScaleTick !== timescale.middleTier.showTickLines) { this.toggleMiddleScaleTick(); } } if (tierMode === 2 || tierMode === 3) { this.bottomScaleUnit = timescale.bottomTier.unit; this.syncBottomScaleFormatOptions(); this.bottomScaleCount = timescale.bottomTier.count; this.bottomScaleAlign = timescale.bottomTier.labelAlign; this.bottomScaleFormat = timescale.bottomTier.formatter ? timescale.bottomTier.formatter : ""; if (this.showBottomScaleTick !== timescale.bottomTier.showTickLines) { this.toggleBottomScaleTick(); } } if (tierMode === 3) { this.topScaleUnit = timescale.topTier.unit; this.syncTopScaleFormatOptions(); this.topScaleCount = timescale.topTier.count; this.topScaleAlign = timescale.topTier.labelAlign; this.topScaleFormat = timescale.topTier.formatter ? timescale.topTier.formatter : ""; if (this.showTopScaleTick !== timescale.topTier.showTickLines) { this.toggleTopScaleTick(); } } } updateTimeScale() { let mode = Number(this.timescaleMode); let ganttSheet = this.ganttSheet; let timescale = ganttSheet.project.timescale; let unit, formatter; ganttSheet.suspendPaint(); timescale.tierMode = Number(mode); timescale.showScaleSeparator = this.showScaleSeparator; if (mode === 1 || mode === 2 || mode === 3) { unit = Number(this.middleScaleUnit); formatter = this.middleScaleFormat ? this.middleScaleFormat : undefined; timescale.middleTier.unit = unit; timescale.middleTier.count = Number(this.middleScaleCount); timescale.middleTier.labelAlign = this.middleScaleAlign; if (formatter) { timescale.middleTier.formatter = this.supposedFormats[unit] ? this.supposedFormats[unit][formatter].value : undefined; } else { timescale.middleTier.formatter = undefined; } timescale.middleTier.showTickLines = this.showMiddleScaleTick; } if (mode === 2 || mode === 3) { unit = Number(this.bottomScaleUnit); formatter = this.bottomScaleFormat ? this.bottomScaleFormat : undefined; timescale.bottomTier.unit = unit; timescale.bottomTier.count = Number(this.bottomScaleCount); timescale.bottomTier.labelAlign = this.bottomScaleAlign; if (formatter) { timescale.bottomTier.formatter = this.supposedFormats[unit] ? this.supposedFormats[unit][formatter].value : undefined; } else { timescale.bottomTier.formatter = undefined; } timescale.bottomTier.showTickLines = this.showBottomScaleTick; } if (mode === 3) { unit = Number(this.topScaleUnit); formatter = this.topScaleFormat ? this.topScaleFormat : undefined; timescale.topTier.unit = unit; timescale.topTier.count = Number(this.topScaleCount); timescale.topTier.labelAlign = this.topScaleAlign; if (formatter) { timescale.topTier.formatter = this.supposedFormats[unit] ? this.supposedFormats[unit][formatter].value : undefined; } else { timescale.topTier.formatter = undefined; } timescale.topTier.showTickLines = this.showTopScaleTick; } ganttSheet.resumePaint(); } createFormatOptionList(target: any) { let formats = this.supposedFormats[target]; let options = `<option value="">None</option>`; for (let i = 0; i < formats.length; i++) { let format = formats[i]; options += `<option value="${i}">${format.info}</option>`; } return options; } } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api'; } function initSplitView(spread: any) { let host = document.getElementById("split-view"); let content = host.getElementsByClassName("split-content")[0]; let panel = host.getElementsByClassName("split-panel")[0]; new SplitView({ host: host, content: content, panel: panel, refreshContent: function() { spread.refresh(); } }); } @NgModule({ imports: [BrowserModule, SpreadSheetsModule, FormsModule], 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"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/spread/source/splitView/splitView.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> <!-- plugins --> <script src="$DEMOROOT$/spread/source/splitView/SplitView.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 id="split-view" class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets split-content" [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> <gc-worksheet> </gc-worksheet> </gc-spread-sheets> <div class="options-container split-panel"> <div class="option-row option-title"> Config the timescale style. </div> <div class="option-block"> <div class="option-row selection-box"> <label for="timescale-mode">Mode</label> <select id="timescale-mode" (change)="changeTimeScaleMode($event)"> <option value="1">One Tier(middle)</option> <option value="2" selected>Two Tier(middleBottom)</option> <option value="3">Three Tier(topMiddleBottom)</option> </select> </div> <div class="option-row"> <label class="option-checkbox active" id="scale-separator" [ngClass]="{'active': showScaleSeparator}" (click)="toggleScaleSeparator()">Separate Scale</label> <div class="option-info">* checkbox toggle whether show the scale separator.</div> </div> </div> <div class="option-block hide" id="top-scale-panel" [ngClass]="{'hide': !showTopScalePanel}"> <div class="option-info toggle">* toggle panel for the "Mode" option.</div> <div class="option-row option-title"> Top Scale Config. </div> <div class="option-row selection-box"> <label for="top-scale-unit">Unit</label> <select id="top-scale-unit" [(ngModel)]="topScaleUnit" (change)="syncTopScaleFormatOptions($event)"> <option value="1">years</option> <option value="2">halfYears</option> <option value="3">quarters</option> <option value="4">months</option> <option value="5">thirdsOfMonth</option> <option value="6">weeks</option> <option value="7">days</option> <option value="8">hours</option> <option value="9">minutes</option> </select> </div> <div class="option-row input-box"> <label for="top-scale-count">Count</label> <input type="text" id="top-scale-count" [(ngModel)]="topScaleCount" /> <div class="option-info valid">* valid value: integer</div> </div> <div class="option-row selection-box"> <label for="top-scale-align">Align</label> <select id="top-scale-align" [(ngModel)]="topScaleAlign"> <option value="Left">Left</option> <option value="Center">Center</option> <option value="Right">Right</option> </select> </div> <div class="option-row selection-box"> <label for="top-scale-format">Formatter</label> <select id="top-scale-format" [(ngModel)]="topScaleFormat"> <option value="">None</option> </select> </div> <div class="option-row"> <label class="option-checkbox" id="top-scale-tick" [ngClass]="{'active': showTopScaleTick}" (click)="toggleTopScaleTick()">Tick Lines</label> <div class="option-info">* checkbox toggle whether show the top scale tick lines.</div> </div> </div> <div class="option-block hide" id="middle-scale-panel" [ngClass]="{'hide': !showMiddleScalePanel}"> <div class="option-info toggle">* toggle panel for the "Mode" option.</div> <div class="option-row option-title"> Middle Scale Config. </div> <div class="option-row selection-box"> <label for="middle-scale-unit">Unit</label> <select id="middle-scale-unit" [(ngModel)]="middleScaleUnit" (change)="syncMiddleScaleFormatOptions($event)"> <option value="1">years</option> <option value="2">halfYears</option> <option value="3">quarters</option> <option value="4">months</option> <option value="5">thirdsOfMonth</option> <option value="6">weeks</option> <option value="7">days</option> <option value="8">hours</option> <option value="9">minutes</option> </select> </div> <div class="option-row input-box"> <label for="middle-scale-count">Count</label> <input type="text" id="middle-scale-count" value="1" [(ngModel)]="middleScaleCount" /> <div class="option-info valid">* valid value: integer</div> </div> <div class="option-row selection-box"> <label for="middle-scale-align">Align</label> <select id="middle-scale-align" [(ngModel)]="middleScaleAlign"> <option value="Left">Left</option> <option value="Center">Center</option> <option value="Right">Right</option> </select> </div> <div class="option-row selection-box"> <label for="middle-scale-format">Formatter</label> <select id="middle-scale-format" [(ngModel)]="middleScaleFormat"> <option value="">None</option> </select> </div> <div class="option-row"> <label class="option-checkbox active" id="middle-scale-tick" [ngClass]="{'active': showMiddleScaleTick}" (click)="toggleMiddleScaleTick()">Tick Lines</label> <div class="option-info">* checkbox toggle whether show the top scale tick lines.</div> </div> </div> <div class="option-block hide" id="bottom-scale-panel" [ngClass]="{'hide': !showBottomScalePanel}"> <div class="option-info toggle">* toggle panel for the "Mode" option.</div> <div class="option-row option-title"> Bottom Scale Config. </div> <div class="option-row selection-box"> <label for="bottom-scale-unit">Unit</label> <select id="bottom-scale-unit" [(ngModel)]="bottomScaleUnit" (change)="syncBottomScaleFormatOptions($event)"> <option value="1">years</option> <option value="2">halfYears</option> <option value="3">quarters</option> <option value="4">months</option> <option value="5">thirdsOfMonth</option> <option value="6">weeks</option> <option value="7">days</option> <option value="8">hours</option> <option value="9">minutes</option> </select> </div> <div class="option-row input-box"> <label for="bottom-scale-count">Count</label> <input type="text" id="bottom-scale-count" value="1" [(ngModel)]="bottomScaleCount" /> <div class="option-info valid">* valid value: integer</div> </div> <div class="option-row selection-box"> <label for="bottom-scale-align">Align</label> <select id="bottom-scale-align" [(ngModel)]="bottomScaleAlign"> <option value="Left">Left</option> <option value="Center">Center</option> <option value="Right">Right</option> </select> </div> <div class="option-row selection-box"> <label for="bottom-scale-format">Formatter</label> <select id="bottom-scale-format" [(ngModel)]="bottomScaleFormat"> <option value="">None</option> </select> </div> <div class="option-row"> <label class="option-checkbox active" id="bottom-scale-tick" [ngClass]="{'active': showBottomScaleTick}" (click)="toggleBottomScaleTick()">Tick Lines</label> <div class="option-info">* checkbox toggle whether show the top scale tick lines.</div> </div> </div> <input type="button" id="set-scale" class="option-button" value="Set Timescale" (click)="updateTimeScale()"> </div> </div>
.options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; box-shadow: inset 0px 0 4px 0 rgba(0,0,0,0.4); } .option-block { background: #fff; padding: 8px; margin: 12px 0; border-radius: 4px; border: 1px dashed #82bc00; box-shadow: 0px 0 6px 0 rgba(0,0,0,0.1); } .option-block.toggle { border: 1px dotted #f7a711; } .option-row { font-size: 14px; box-sizing: border-box; padding: 4px 0; } .option-title { font-weight: bold; color: #656565; } .option-info { font-size: 12px; color: #919191; margin-top: 6px; font-weight: normal; } .option-info.valid { color: #82bc00; } .option-info.toggle { color: #f7a711; } .option-button { width: 100%; padding: 0; line-height: 20px; background: #82bc00; color: #fff; transition: 0.3s; cursor: pointer; outline: none; border-radius: 4px; box-sizing: border-box; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); border: none; } .option-button:hover { background: #82bc00; color: #fff; box-shadow: 0 3px 8px 0 rgba(0,0,0,0.4); } .option-checkbox { background: #fff; border: 1px dashed #f7a711; color: #f7a711; padding: 2px 4px; transition: 0.3s; box-sizing: border-box; cursor: pointer; } .option-checkbox.active { color: #fff; background: #f7a711; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); border-radius: 4px; } .selection-box { position: relative; } .selection-box > select { text-align: left; width: 100%; height: 20px; padding: 0; line-height: 20px; background: transparent; border: none; border-bottom: 2px solid #656565; color: #656565; transition: 0.3s; cursor: pointer; outline: none; box-sizing: border-box; } .selection-box > select > option { background: white; } .selection-box > select:focus { border-bottom: 2px solid #82bc00; color: #82bc00; box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3); } .selection-box > label { position: absolute; cursor: pointer; font-size: 12px; color: #fff; background: #656565; padding: 0 4px; right: 0; top: 6px; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); } .input-box { position: relative; } .input-box > input[type=text] { width: 100%; background: transparent; border: none; color: #656565; border-bottom: 2px solid #656565; outline: none; box-sizing: border-box; transition: 0.3s; } .input-box > input[type=text]:focus { color: #82bc00; border-bottom: 2px solid #82bc00; } .input-box > label { cursor: pointer; position: absolute; right: 0; top: 5px; font-size: 12px; color: #fff; background: #656565; padding: 0 4px; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); }
(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-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js', '@mescius/spread-sheets-ganttsheet': 'npm:@mescius/spread-sheets-ganttsheet/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);