This example shows custom shapes, you can create different types of diagrams using custom shapes in SpreadJS.
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 '@mescius/spread-sheets-shapes';
import './styles.css';
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
hostStyle = {
width: '100%',
height: '100%',
overflow: 'hidden',
float: 'left'
};
spread: any;
constructor() {
}
initSpread($event: any) {
let spread = $event.spread;
this.spread = spread;
let activeSheet = spread.getActiveSheet();
this.spread.options.allowUserZoom = false;
this.addCarDiagram(activeSheet);
this.initDamageAreaShapes(spread);
let accidentTypeButtonsGroup = this.initAccidentType(activeSheet);
let severityButtonsGroup = this.initSeverity(activeSheet);
this.initInfoArea(activeSheet);
(function shapeClicked() {
let host = spread.getHost();
host.addEventListener("click", function(e: any) {
let offset = getOffset(host),
left = offset.left,
top = offset.top;
let x = e.pageX - left,
y = e.pageY - top;
let hitTest = activeSheet.hitTest(x, y);
if (hitTest.shapeHitInfo) {
let shape = hitTest.shapeHitInfo.shape;
let shapeStyle = shape.style();
shapeStyle.fill.color = (shapeStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)");
shape.style(shapeStyle);
//Roof Damage
if (shape.name() == "roof") {
let button = find(accidentTypeButtonsGroup, 'roofDamage');
let buttonStyle = button.style();
buttonStyle.fill.color = (buttonStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)");
button.style(buttonStyle);
}
else if (shape.name() == "roofDamage") {
let button = activeSheet.shapes.get("roof");
let buttonStyle = button.style();
buttonStyle.fill.color = (buttonStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)");
button.style(buttonStyle);
}
//Bumper Damage
else if (shape.name() == "front" || shape.name() == "rear") {
let front = activeSheet.shapes.get("front"),
rear = activeSheet.shapes.get("rear");
let button = find(accidentTypeButtonsGroup, 'bumperDamage');
if (front.style().fill.color === "rgb(255,0,0)" || rear.style().fill.color === "rgb(255,0,0)") {
let buttonStyle = button.style();
buttonStyle.fill.color = "rgb(255,0,0)";
button.style(buttonStyle);
} else if (front.style().fill.color === "rgb(144,238,144)" && rear.style().fill.color === "rgb(144,238,144)") {
let buttonStyle = button.style();
buttonStyle.fill.color = "rgb(144,238,144)";
button.style(buttonStyle);
}
}
else if (shape.name() == 'bumperDamage') {
let front = activeSheet.shapes.get("front"),
rear = activeSheet.shapes.get("rear");
let frontStyle = front.style(),
rearStyle = rear.style();
let button = find(accidentTypeButtonsGroup, 'bumperDamage');
if (button.style().fill.color === "rgb(255,0,0)") {
frontStyle.fill.color = "rgb(255,0,0)";
rearStyle.fill.color = "rgb(255,0,0)";
front.style(frontStyle);
rear.style(rearStyle);
} else {
frontStyle.fill.color = "rgb(144,238,144)";
rearStyle.fill.color = "rgb(144,238,144)";
front.style(frontStyle);
rear.style(rearStyle);
}
}
//Severity
else if (shape.name() === "highSeverity" || shape.name() === "mediumSeverity" || shape.name() === "lowSeverity") {
for (let s = 0; s < severityButtonsGroup.length; s++) {
if (severityButtonsGroup[s].name() !== shape.name()) {
let buttonStyle = severityButtonsGroup[s].style();
buttonStyle.fill.color = "rgb(144,238,144)"
severityButtonsGroup[s].style(buttonStyle);
}
}
}
else if (shape.name() === 'other') {
let otherShapes = ['frontWindshield', 'rearTop','leftFrontDoor', 'leftBackDoor', 'leftBack', 'rightFrontDoor', 'rightBackDoor', 'rightBack'];
let button = find(accidentTypeButtonsGroup, 'other');
for (let i = 0; i < otherShapes.length; i++) {
const shapeName = otherShapes[i];
let curShape = activeSheet.shapes.get(shapeName);
let curShapeStyle = curShape.style();
curShapeStyle.fill.color = button.style().fill.color;
curShape.style(curShapeStyle);
}
} else if (shape.name() === 'hood' || shape.name() === 'leftFront' || shape.name() === 'rightFront') {
let overheatedShapes = ['hood', 'leftFront', 'rightFront'];
let allGreen = true;
let button = find(accidentTypeButtonsGroup, 'overheated');
for (let i = 0; i < overheatedShapes.length; i++) {
const shapeName = overheatedShapes[i];
let curShape = activeSheet.shapes.get(shapeName);
if (curShape.style().fill.color == "rgb(255,0,0)") {
allGreen = false;
}
}
if (allGreen) {
let buttonStyle = button.style();
buttonStyle.fill.color = "rgb(144,238,144)";
button.style(buttonStyle);
} else {
let buttonStyle = button.style();
buttonStyle.fill.color = "rgb(255,0,0)";
button.style(buttonStyle);
}
} else if (shape.name() === 'overheated') {
let overheatedShapes = ['hood', 'leftFront', 'rightFront'];
let button = find(accidentTypeButtonsGroup, 'overheated');
for (let i = 0; i < overheatedShapes.length; i++) {
const shapeName = overheatedShapes[i];
let curShape = activeSheet.shapes.get(shapeName);
let curShapeStyle = curShape.style();
curShapeStyle.fill.color = button.style().fill.color;
curShape.style(curShapeStyle);
}
}
else {
let otherShapes = ['frontWindshield', 'rearTop','leftFrontDoor', 'leftBackDoor', 'leftBack', 'rightFrontDoor', 'rightBackDoor', 'rightBack'];
let allGreen = true;
let button = find(accidentTypeButtonsGroup, 'other');
for (let i = 0; i < otherShapes.length; i++) {
const shapeName = otherShapes[i];
let curShape = activeSheet.shapes.get(shapeName);
if (curShape.style().fill.color == "rgb(255,0,0)") {
allGreen = false;
}
}
if (allGreen) {
let buttonStyle = button.style();
buttonStyle.fill.color = "rgb(144,238,144)";
button.style(buttonStyle);
} else {
let buttonStyle = button.style();
buttonStyle.fill.color = "rgb(255,0,0)";
button.style(buttonStyle);
}
}
}
function find(array: any[], name: string) {
for (let i = 0; i < array.length; i++) {
const ele = array[i] as any;
if (ele.name() === name) {
return ele
}
}
return null;
}
function getOffset(elem: any) {
let docElem, box = {
top: 0,
left: 0
},
doc = elem && elem.ownerDocument;
if (!doc) {
return;
}
docElem = doc.documentElement;
if (typeof elem.getBoundingClientRect !== void 0) {
box = elem.getBoundingClientRect();
}
return {
top: box.top + window.pageYOffset - docElem.clientTop,
left: box.left + window.pageXOffset - docElem.clientLeft
};
}
});
})();
let workbookShapes = activeSheet.shapes.all();
for (let s = 0; s < workbookShapes.length; s++) {
workbookShapes[s].allowMove(false);
workbookShapes[s].allowResize(false);
}
activeSheet.setRowCount(35);
activeSheet.setColumnCount(20);
activeSheet.name("Car Insurance Claim");
activeSheet.options.gridline = {
showVerticalGridline: false,
showHorizontalGridline: false
};
activeSheet.options.colHeaderVisible = false;
activeSheet.options.rowHeaderVisible = false;
spread.options.allowUserDragDrop = false;
// spread.options.tabStripVisible = false;
this.lockCells(activeSheet);
}
addCarDiagram(sheet: any) {
sheet.setColumnWidth(0, 200);
sheet.setColumnWidth(10, 200);
let startCellRect = sheet.getCellRect(0, 0),
endCellRect = sheet.getCellRect(22, 10),
spreadElement = this.spread.getHost();
let offset = spreadElement.getBoundingClientRect();
let x = offset.left - sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader),
y = offset.top - sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader);
sheet.pictures.add("CarDiagram", "../Car Diagram.png", x, y, endCellRect.x - startCellRect.x, endCellRect.y - startCellRect.y);
sheet.addSpan(1, 3, 1, 2);
sheet.getCell(1, 3).text("Passenger Side");
sheet.getCell(1, 3).font("12pt Arial");
sheet.addSpan(20, 3, 1, 2);
sheet.getCell(20, 3).text("Driver's Side");
sheet.getCell(20, 3).font("12pt Arial");
}
initDamageAreaShapes(spread: any) {
let sheet = spread.getSheet(0);
spread.addSheet(1, new GC.Spread.Sheets.Worksheet("Damage_Areas"));
let startColor = "lightgreen";
let damageAreaSheet = spread.getSheet(1);
let damageAreas = ["Area", "Left", "Top", "Width", "Height", "Stroke Color", "Line Width"],
front = ["front", 11, 136, 57, 167, "blue", 3],
hood = ["hood", 123, 149, 142, 140, "blue", 3],
frontWindshield = ["frontWindshield", 257, 149, 70, 140, "blue", 3],
roof = ["roof", 325, 165, 158, 110, "blue", 3],
rearTop = ["rearTop", 481, 149, 158, 143, "blue", 3],
rear = ["rear", 661, 134, 63, 171, "blue", 3],
leftFront = ["leftFront", 110, 310, 157, 85, "blue", 3],
leftFrontDoor = ["leftFrontDoor", 257, 283, 140, 112, "blue", 3],
leftBackDoor = ["leftBackDoor", 392, 283, 121, 111, "blue", 3],
leftBack = ["leftBack", 465, 284, 168, 110, "blue", 3],
rightFront = ["rightFront", 111, 44, 156, 76, "blue", 3],
rightFrontDoor = ["rightFrontDoor", 258, 44, 139, 113, "blue", 3],
rightBackDoor = ["rightBackDoor", 391, 44, 123, 115, "blue", 3],
rightBack = ["rightBack", 465, 44, 168, 110, "blue", 3];
damageAreaSheet.setArray(0, 0, [
damageAreas,
front,
hood,
frontWindshield,
roof,
rearTop,
rear,
leftFront,
leftFrontDoor,
leftBackDoor,
leftBack,
rightFront,
rightFrontDoor,
rightBackDoor,
rightBack
]);
let frontModel = {
left: "=Damage_Areas!B2",
top: "=Damage_Areas!C2",
width: "=Damage_Areas!D2",
height: "=Damage_Areas!E2",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 1, 8],
["L", 17, 4],
["L", 19, 0],
["L", 31, 0],
["L", 33, 4],
["L", 51, 4],
["L", 56, 10],
["L", 57, 49],
["L", 52, 50],
["L", 51, 116],
["L", 57, 118],
["L", 57, 158],
["L", 51, 163],
["L", 34, 162],
["L", 31, 166],
["L", 19, 167],
["L", 18, 163],
["L", 1, 158],
["Z"]
]
]
};
let hoodModel = {
left: "=Damage_Areas!B3",
top: "=Damage_Areas!C3",
width: "=Damage_Areas!D3",
height: "=Damage_Areas!E3",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 10, 0],
["L", 142, 0],
["L", 133, 23],
["L", 133, 107],
["L", 142, 140],
["L", 10, 140],
["L", 0, 100],
["L", 0, 40],
["Z"]
]
]
};
let frontWindshieldModel = {
left: "=Damage_Areas!B4",
top: "=Damage_Areas!C4",
width: "=Damage_Areas!D4",
height: "=Damage_Areas!E4",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 6, 0],
["L", 72, 16],
["L", 67, 38],
["L", 67, 101],
["L", 69, 127],
["L", 6, 140],
["L", 0, 108],
["L", 0, 27],
["Z"]
]
]
};
let roofModel = {
left: "=Damage_Areas!B5",
top: "=Damage_Areas!C5",
width: "=Damage_Areas!D5",
height: "=Damage_Areas!E5",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 2, 0],
["L", 160, 0],
["L", 156, 23],
["L", 156, 86],
["L", 160, 110],
["L", 2, 110],
["L", 0, 86],
["L", 0, 23],
["Z"]
]
]
};
let rearTopModel = {
left: "=Damage_Areas!B6",
top: "=Damage_Areas!C6",
width: "=Damage_Areas!D6",
height: "=Damage_Areas!E6",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 8, 16],
["L", 102, 0],
["L", 149, 0],
["L", 156, 32],
["L", 156, 104],
["L", 149, 141],
["L", 102, 143],
["L", 8, 128],
["L", 0, 101],
["L", 0, 38],
["Z"]
]
]
};
let rearModel = {
left: "=Damage_Areas!B7",
top: "=Damage_Areas!C7",
width: "=Damage_Areas!D7",
height: "=Damage_Areas!E7",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 1, 10],
["L", 19, 1],
["L", 32, 5],
["L", 33, 2],
["L", 45, 2],
["L", 46, 6],
["L", 59, 9],
["L", 63, 12],
["L", 63, 158],
["L", 58, 162],
["L", 48, 164],
["L", 45, 169],
["L", 33, 169],
["L", 31, 166],
["L", 21, 171],
["L", 1, 164],
["Z"]
]
]
};
let leftFrontModel = {
left: "=Damage_Areas!B8",
top: "=Damage_Areas!C8",
width: "=Damage_Areas!D8",
height: "=Damage_Areas!E8",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 6, 48],
["L", 21, 29],
["L", 59, 20],
["L", 136, 14],
["L", 157, 8],
["L", 150, 24],
["L", 148, 47],
["L", 150, 69],
["L", 157, 85],
["L", 140, 85],
//Wheel well
["L", 136, 71],
["L", 128, 58],
["L", 119, 52],
["L", 107, 47],
["L", 94, 46],
["L", 83, 47],
["L", 68, 52],
["L", 60, 61],
["L", 54, 70],
["L", 50, 85],
["L", 21, 85],
["L", 13, 71],
["L", 2, 67],
["Z"]
]
]
};
let leftFrontDoorModel = {
left: "=Damage_Areas!B9",
top: "=Damage_Areas!C9",
width: "=Damage_Areas!D9",
height: "=Damage_Areas!E9",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 9, 36],
["L", 84, 2],
["L", 116, 0],
["L", 140, 0],
["L", 134, 74],
["L", 140, 112],
["L", 12, 112],
["L", 7, 105],
["L", 4, 96],
["L", 1, 81],
["L", 2, 64],
["L", 5, 49],
["Z"]
]
]
};
let leftBackDoorModel = {
left: "=Damage_Areas!B10",
top: "=Damage_Areas!C10",
width: "=Damage_Areas!D10",
height: "=Damage_Areas!E10",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 6, 0],
["L", 71, 1],
["L", 95, 20],
["L", 115, 44],
["L", 121, 53],
["L", 117, 62],
["L", 105, 68],
["L", 87, 85],
["L", 78, 100],
["L", 75, 111],
["L", 5, 111],
["L", 2, 97],
["L", 0, 79],
["L", 1, 61],
["L", 3, 38],
["Z"]
]
]
};
let leftBackModel = {
left: "=Damage_Areas!B11",
top: "=Damage_Areas!C11",
width: "=Damage_Areas!D11",
height: "=Damage_Areas!E11",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 0, 0],
["L", 51, 9],
["L", 110, 34],
["L", 154, 43],
["L", 163, 49],
["L", 166, 55],
["L", 152, 55],
["L", 149, 73],
["L", 168, 80],
["L", 168, 91],
["L", 164, 97],
["L", 159, 97],
["L", 153, 110],
["L", 100, 110],
//Wheel well
["L", 96, 97],
["L", 86, 84],
["L", 69, 74],
["L", 60, 72],
["L", 50, 73],
["L", 40, 73],
["L", 32, 78],
["L", 24, 85],
["L", 19, 92],
["L", 14, 101],
["L", 13, 110],
["L", 3, 110],
["L", 9, 96],
["L", 17, 81],
["L", 31, 69],
["L", 44, 61],
["L", 49, 55],
["L", 44, 44],
["L", 29, 27],
["L", 14, 12],
["Z"]
]
]
};
let rightFrontModel = {
left: "=Damage_Areas!B12",
top: "=Damage_Areas!C12",
width: "=Damage_Areas!D12",
height: "=Damage_Areas!E12",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 19, 0],
["L", 50, 0],
//Wheel well
["L", 53, 13],
["L", 57, 23],
["L", 69, 33],
["L", 80, 38],
["L", 96, 41],
["L", 110, 37],
["L", 120, 30],
["L", 130, 24],
["L", 135, 12],
["L", 140, 0],
["L", 157, 0],
["L", 150, 12],
["L", 149, 22],
["L", 148, 33],
["L", 146, 42],
["L", 149, 55],
["L", 152, 68],
["L", 156, 76],
["L", 143, 73],
["L", 123, 71],
["L", 66, 66],
["L", 47, 64],
["L", 34, 59],
["L", 21, 54],
["L", 36, 53],
["L", 32, 37],
["L", 9, 38],
["L", 2, 35],
["L", 1, 19],
["L", 4, 16],
["L", 11, 16],
["Z"]
]
]
};
let rightFrontDoorModel = {
left: "=Damage_Areas!B13",
top: "=Damage_Areas!C13",
width: "=Damage_Areas!D13",
height: "=Damage_Areas!E13",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 10, 0],
["L", 139, 0],
["L", 135, 16],
["L", 132, 35],
["L", 136, 72],
["L", 139, 113],
["L", 106, 113],
["L", 78, 110],
["L", 10, 76],
["L", 3, 63],
["L", 0, 47],
["L", 0, 36],
["L", 2, 23],
["L", 4, 12],
["Z"]
]
]
};
let rightBackDoorModel = {
left: "=Damage_Areas!B14",
top: "=Damage_Areas!C14",
width: "=Damage_Areas!D14",
height: "=Damage_Areas!E14",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 6, 0],
["L", 76, 0],
["L", 80, 14],
["L", 89, 28],
["L", 96, 37],
["L", 108, 44],
["L", 118, 49],
["L", 123, 57],
["L", 118, 67],
["L", 111, 76],
["L", 93, 93],
["L", 74, 110],
["L", 55, 114],
["L", 30, 115],
["L", 6, 114],
["L", 1, 39],
["L", 3, 17],
["Z"]
]
]
};
let rightBackModel = {
left: "=Damage_Areas!B15",
top: "=Damage_Areas!C15",
width: "=Damage_Areas!D15",
height: "=Damage_Areas!E15",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 0, 0],
["L", 12, 0],
//Wheel well
["L", 15, 11],
["L", 22, 25],
["L", 33, 33],
["L", 45, 39],
["L", 55, 40],
["L", 70, 39],
["L", 84, 31],
["L", 91, 22],
["L", 97, 13],
["L", 101, 0],
["L", 150, 0],
["L", 155, 4],
["L", 157, 12],
["L", 165, 15],
["L", 168, 18],
["L", 167, 30],
["L", 160, 34],
["L", 149, 36],
["L", 151, 55],
["L", 164, 55],
["L", 165, 61],
["L", 155, 68],
["L", 122, 74],
["L", 107, 78],
["L", 52, 102],
["L", 34, 107],
["L", 1, 110],
["L", 31, 83],
["L", 43, 69],
["L", 48, 52],
["L", 38, 46],
["L", 26, 40],
["L", 18, 33],
["L", 10, 19],
["L", 6, 13],
["Z"]
]
]
};
sheet.shapes.add('front', frontModel);
sheet.shapes.add('hood', hoodModel);
sheet.shapes.add('frontWindshield', frontWindshieldModel);
sheet.shapes.add('roof', roofModel);
sheet.shapes.add('rearTop', rearTopModel);
sheet.shapes.add('rear', rearModel);
sheet.shapes.add('leftFront', leftFrontModel);
sheet.shapes.add('leftFrontDoor', leftFrontDoorModel);
sheet.shapes.add('leftBackDoor', leftBackDoorModel);
sheet.shapes.add('leftBack', leftBackModel);
sheet.shapes.add('rightFront', rightFrontModel);
sheet.shapes.add('rightFrontDoor', rightFrontDoorModel);
sheet.shapes.add('rightBackDoor', rightBackDoorModel);
sheet.shapes.add('rightBack', rightBackModel);
}
initAccidentType(sheet: any) {
let rowHeaderWidth = sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader),
colHeaderHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader),
shapeType = GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle,
hAlignment = GC.Spread.Sheets.HorizontalAlign.center,
vAlignment = GC.Spread.Sheets.VerticalAlign.center,
accidentTypeShapeInfo = [
[4, 11, "bumperDamage", "Bumper Damage"],
[6, 11, "roofDamage", "Roof Damage"],
[4, 15, "overheated", "Overheated"],
[6, 15, "other", "Other"]
],
cellRect,
margin = 5;
sheet.addSpan(4, 10, 4, 1);
let cell = sheet.getCell(4, 10);
cell.text("Accident Type");
cell.hAlign(hAlignment);
cell.vAlign(vAlignment);
cell.font("20pt Arial");
let accidentTypeButtonsGroup = [];
for (let s = 0; s < accidentTypeShapeInfo.length; s++) {
let tempShapeInfo = accidentTypeShapeInfo[s];
sheet.addSpan(tempShapeInfo[0], tempShapeInfo[1], 2, 4);
cellRect = this.getRangeOutsideWindow(sheet, <number>tempShapeInfo[0], <number>tempShapeInfo[1], 2, 4);
let tempShape = sheet.shapes.add(tempShapeInfo[2], shapeType, cellRect.x - rowHeaderWidth + margin, cellRect.y - colHeaderHeight + margin, cellRect.width - (2 * margin), cellRect.height - (2 * margin));
tempShape.text(tempShapeInfo[3]);
let tempShapeStyle = tempShape.style();
tempShapeStyle.line.color = "darkgreen";
tempShapeStyle.fill.color = "lightgreen";
tempShapeStyle.fill.transparency = 0.5;
tempShapeStyle.textFrame.hAlign = hAlignment;
tempShapeStyle.textFrame.vAlign = vAlignment;
tempShapeStyle.textEffect.color = 'black';
tempShape.style(tempShapeStyle);
accidentTypeButtonsGroup.push(tempShape);
}
return accidentTypeButtonsGroup;
}
initSeverity(sheet: any) {
let rowHeaderWidth = sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader),
colHeaderHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader),
shapeType = GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle,
hAlignment = GC.Spread.Sheets.HorizontalAlign.center,
vAlignment = GC.Spread.Sheets.VerticalAlign.center,
severityShapeInfo = [
[8, "highSeverity", "High"],
[10, "mediumSeverity", "Medium"],
[12, "lowSeverity", "Low"]
],
cellRect,
margin = 5;
sheet.addSpan(8, 10, 6, 1);
let cell = sheet.getCell(8, 10);
cell.text("Severity");
cell.hAlign(hAlignment);
cell.vAlign(vAlignment);
cell.font("20pt Arial");
let severityButtonsGroup = [];
for (let s = 0; s < severityShapeInfo.length; s++) {
let tempShapeInfo = severityShapeInfo[s];
sheet.addSpan(tempShapeInfo[0], 11, 2, 2);
cellRect = this.getRangeOutsideWindow(sheet, <number>tempShapeInfo[0], 11, 2, 2);
let tempShape = sheet.shapes.add(tempShapeInfo[1], shapeType, cellRect.x - rowHeaderWidth + margin, cellRect.y - colHeaderHeight + margin, cellRect.width - (2 * margin), cellRect.height - (2 * margin));
tempShape.text(tempShapeInfo[2]);
let tempShapeStyle = tempShape.style();
tempShapeStyle.line.color = "darkgreen";
tempShapeStyle.fill.color = "lightgreen";
tempShapeStyle.fill.transparency = 0.5;
tempShapeStyle.textFrame.hAlign = hAlignment;
tempShapeStyle.textFrame.vAlign = vAlignment;
tempShapeStyle.textEffect.color = 'black';
tempShape.style(tempShapeStyle);
severityButtonsGroup.push(tempShape);
}
return severityButtonsGroup;
}
getRangeOutsideWindow (sheet: any, row: number, col: number, rowCount: number, colCount: number) {
let x = 0, y = 0, width = 0, height = 0;
for (let i = 0; i < colCount; i ++) {
width += sheet.getColumnWidth(col + i);
}
for (let i = 0; i < rowCount; i ++) {
height += sheet.getRowHeight(row + i);
}
for (let i = 0; i <= row; i ++) {
y += sheet.getRowHeight(i);
}
for (let i = 0; i <= col; i ++) {
if (i === col) {
x += sheet.getColumnWidth(i) / 2;
} else {
x += sheet.getColumnWidth(i);
}
}
return {
x: x,
y: y,
width: width,
height: height
}
}
initInfoArea(sheet: any) {
let border = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
sheet.addSpan(8, 13, 1, 3);
sheet.getCell(8, 13).text("Driver Name:");
sheet.addSpan(8, 16, 1, 3);
sheet.getRange(8, 16, 1, 3).borderBottom(border);
sheet.addSpan(9, 13, 1, 3);
sheet.getCell(9, 13).text("Vehicle Make/Model/Year:");
sheet.addSpan(9, 16, 1, 3);
sheet.getRange(9, 16, 1, 3).borderBottom(border);
sheet.addSpan(10, 13, 1, 6);
sheet.getCell(10, 13).text("Details:");
sheet.addSpan(11, 13, 3, 6);
sheet.getRange(11, 13, 3, 6).setBorder(border, {
all: true
});
}
lockCells(sheet: any) {
sheet.getRange(8, 16, 1, 3).locked(false);
sheet.getRange(9, 16, 1, 3).locked(false);
sheet.getRange(11, 13, 3, 6).locked(false);
sheet.options.isProtected = true;
sheet.setActiveCell(8, 6);
sheet.options.protectionOptions.allowSelectLockedCells = false;
sheet.options.protectionOptions.allowSelectUnlockedCells = true;
sheet.options.protectionOptions.allowEditObjects = false;
}
}
@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="$DEMOROOT$/spread/source/data/businessDashboard.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/ReportTemplate.js" type="text/javascript"></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></gc-worksheet>
</gc-spread-sheets>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
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-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/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);
