This example shows custom shapes, you can create different types of diagrams using custom shapes in SpreadJS.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-vue";
import '@mescius/spread-sheets-shapes';
const spreadRef = ref(null);
const initSpread = (spread) => {
spreadRef.value = spread;
let activeSheet = spread.getActiveSheet();
spread.options.allowUserZoom = false;
addCarDiagram(activeSheet);
initDamageAreaShapes(spread);
let accidentTypeButtonsGroup = initAccidentType(activeSheet);
let severityButtonsGroup = initSeverity(activeSheet);
initInfoArea(activeSheet);
(function shapeClicked() {
let spread = spreadRef.value;
let host = spread.getHost();
host.addEventListener("click", function (e) {
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, name) {
for (let i = 0; i < array.length; i++) {
const ele = array[i];
if (ele.name() === name) {
return ele;
}
}
return null;
}
function getOffset(elem) {
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;
lockCells(activeSheet);
}
const LoadRevenueTable = (activeSheet) => {
let tableColumns = [],
names = ["month", "revenue", "unitsSold"],
labels = ["Month", "Revenue ($)", "Units Sold"];
names.forEach(function (name, index) {
let tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
tableColumn.name(labels[index]);
tableColumn.dataField(name);
tableColumns.push(tableColumn);
});
// Find the table in the sheet and add the data to it
let table = activeSheet.tables.findByName("RevenueTable");
table.autoGenerateColumns(false);
table.bindColumns(tableColumns);
table.bindingPath("revenue_chart");
activeSheet.getRange(4, 14, 12, 1).formatter("$###,0");
}
const addCarDiagram = (sheet) => {
sheet.setColumnWidth(0, 200);
sheet.setColumnWidth(10, 200);
let spread = spreadRef.value;
let startCellRect = sheet.getCellRect(0, 0),
endCellRect = sheet.getCellRect(22, 10),
spreadElement = 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");
}
const initDamageAreaShapes = (spread) => {
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);
}
const initAccidentType = (sheet) => {
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 = getRangeOutsideWindow(sheet, tempShapeInfo[0], 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;
}
const initSeverity = (sheet) => {
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 = getRangeOutsideWindow(sheet, 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;
}
const getRangeOutsideWindow = (sheet, row, col, rowCount, colCount) => {
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
}
}
const initInfoArea = (sheet) => {
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,
});
}
const lockCells = (sheet) => {
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;
}
</script>
<style scoped>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/data/ReportTemplate.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.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-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
