Project Management
A project management interface on a JavaScript spreadsheet. This example demonstrates task tracking, progress indicators, and dynamic charts, illustrating how spreadsheet-based grids can facilitate agile workflows and support visual reporting within custom project tools.
<html>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-charts@4.0.0/dist/index.min.js"></script>
<div id="spreadsheet"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ODNiNzJlN2NlZDJkMjczNzE5ZDFjMDYzMmY4MGE4MTlhMmM4MjY0N2E2NzY4MTk3OGY0YzUwMTRmMzJjN2QyYWRhM2IzOWIwOWZjMGNiZjljYzMwYWM4YzA0ZTBmZGNmMzlhYjBkMzdjNmRmYWJmZGZkYWVmNTRhNjU0NGQxNWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd056azROelkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts });
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
style: [
"background-color: #FFFFFF;font-size: 27px;font-weight: bold;font-family: Open sans;color: #808080;vertical-align: middle;",
"background-color: #FFFFFF;font-size: 13px;font-family: Open sans;color: #000000;white-space: break-spaces;",
"background-color: #FFFFFF;font-size: 13px;font-family: Open sans;color: #000000;text-align: center;white-space: break-spaces;",
"font-size: 13px;font-family: Open sans;color: #000000;white-space: break-spaces;",
"font-size: 13px;font-family: Open sans;color: #000000;text-align: left;padding-left: 19px;vertical-align: middle;",
"background-color:#9e9e9e;font-size:13px;font-weight:bold;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#9e9e9e;font-size:13px;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#fdfffe;font-size:13px;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle",
"background-color:#fdffff;font-size:13px;font-family: Open sans;color:#000000;white-space:break-spaces",
"background-color:#bdbdbd;font-size:13px;font-weight:bold;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#bdbdbd;font-size:13px;font-weight:bold;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;background-color:#9e9e9e;border-right:1px solid #b0bec5;border-bottom:1px solid #b0bec5;border-left:1px solid #b0bec5;border-top:1px solid #b0bec5",
"background-color:#FFFFFF;font-size:27px;font-weight:bold;font-family: Open sans;color:#424242;vertical-align:middle",
"background-color:#FFFFFF;font-size:27px;font-weight:bold;font-family: Open sans;color:#424242;vertical-align:middle",
"background-color:#FFFFFF;font-size:27px;font-family: Open sans;color:#424242;text-align:right;white-space:break-spaces;border-right:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#FFFFFF;font-size:19px;font-family: Open sans;color:#424242;text-align:right;white-space:break-spaces;border-bottom:1px solid #000000",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#FFFFFF;font-size:medium;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-left:1px solid black",
"background-color:#FFFFFF;font-size:13px;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"background-color:#FFFFFF;font-size:medium;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"background-color:#FFFFFF;font-size:13px;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid #b0bec5;border-right:1px solid #b0bec5;border-left:1px solid #b0bec5",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-left:1px solid black",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black"
],
worksheets: [
{
data: [
["", "PROJECT MANAGEMENT DASHBOARD", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "PROJECT NAME", "Jspreadsheet", "", "Priorities", "", "", ""],
["","REPORT DATE",45790,"","High","=COUNTIF(D26:D36,\"★★★\")","",""],
["","PROJECT STATUS","On track","","Medium","=COUNTIF(D26:D36,\"★★\")","",""],
["", "COMPLETED", 0.27, "", "Lower", "=COUNTIF(D26:D36,\"★\")", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "TASKS", "ASSIGNED TO", "PRIORITY", "STATUS", "", "", ""],
["", "Set Kick-Off Meeting", "Alex B.", "★★★", "=NOTES!E2", "", "", ""],
["", "Agree on Objectives", "Frank C.", "★★★", "=NOTES!E3", "", "", ""],
["", "Detailed Requests", "Jacob S.", "★", "=NOTES!E4", "", "", ""],
["", "Hardware Requests", "Jacob S.", "★", "=NOTES!E5", "", "", ""],
["", "Final Resource Plan", "Jacob S.", "★★", "=NOTES!E6", "", "", ""],
["", "Staffing", "Alex B.", "★★", "=NOTES!E7", "", "", ""],
["", "Technical Requests", "Frank C.", "★", "=NOTES!E8", "", "", ""],
["", "Testing", "Kennedy K.", "★", "=NOTES!E9", "", "", ""],
["", "Dev. Complete", "Jacob S.", "★★★", "=NOTES!E10", "", "", ""],
["","Hardware Configuration","Alex B.","★","=NOTES!E11","","",""],
["", "System Testing", "Kennedy K.", "★", "=NOTES!E12", "", "", ""],
["", "Launch", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""]
],
columns: [
{ "width": 24, "type": "text", "align": "left", "s": 21 },
{ "width": 167, "type": "text", "align": "left", "s": 21 },
{ "width": 205, "type": "text", "align": "left", "s": 21 },
{ "width": 81, "type": "text", "align": "left", "s": 21 },
{ "width": 134, "type": "text", "align": "left", "s": 21 },
{ "width": 102, "type": "text", "align": "left", "s": 21 },
{ "width": 61, "type": "text", "align": "left", "s": 21 },
{ "width": 105, "type": "text", "align": "left", "s": 21 }
],
rows: [
{ "height": 60 },
{ "height": 29 },
{ "height": 43 },
{ "height": 33 },
{ "height": 33 },
{ "height": 33 },
{ "height": 29 },
{ "height": 47 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 39 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 36 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 43 },
{ "height": 43 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 43 },
{ "height": 43 },
{ "height": 29 },
{ "height": 29 }
],
cells: {
"G3": { "format": "0.00%" },
"C4": { "format": "m/d/yy" },
"C6": { "format": "0%" },
"E6": { "format": "0.00%" },
"D26": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E26": { "format": "0%" },
"D27": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E27": { "format": "0%" },
"D28": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E28": { "format": "0%" },
"D29": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E29": { "format": "0%" },
"D30": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E30": { "format": "0%" },
"D31": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E31": { "format": "0%" },
"D32": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E32": { "format": "0%" },
"D33": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E33": { "format": "0%" },
"D34": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E34": { "format": "0%" },
"D35": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E35": { "format": "0%" },
"D36": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E36": { "format": "0%" }
},
style: {
"A1": 3,
"B1": 12,
"C1:F1": 13,
"G1:H1": 0,
"A2": 3,
"B2:H2": 0,
"A3": 1,
"B3": 16,
"C3": 14,
"D3": 1,
"E3:G3": 18,
"H3": 1,
"A4": 1,
"B4": 17,
"C4": 15,
"D4": 1,
"E4": 19,
"F4:G4": 20,
"H4": 1,
"A5": 1,
"B5": 17,
"C5": 15,
"D5": 1,
"E5": 19,
"F5:G5": 20,
"H5": 1,
"A6": 1,
"B6": 17,
"C6": 15,
"D6": 1,
"E6": 21,
"F6:G6": 22,
"H6": 1,
"A7:H7": 1,
"A8:H8": 1,
"A9:H9": 1,
"A10:H10": 1,
"A11:H11": 1,
"A12:H12": 1,
"A13:H13": 1,
"A14:H14": 1,
"A15:H15": 1,
"A16:H16": 1,
"A17:H17": 1,
"A18:H18": 1,
"A19:H19": 1,
"A20:H20": 1,
"A21:H21": 1,
"A22:H22": 1,
"A23": 1,
"B23": 2,
"C23:H23": 1,
"A24": 1,
"B24": 2,
"C24:H24": 1,
"A25": 1,
"B25": 18,
"C25:E25": 23,
"F25:H25": 1,
"A26": 1,
"B26": 24,
"C26": 25,
"D26": 26,
"E26": 25,
"F26:H26": 1,
"A27": 1,
"B27": 24,
"C27": 25,
"D27": 26,
"E27": 25,
"F27:H27": 1,
"A28": 1,
"B28": 24,
"C28": 25,
"D28": 26,
"E28": 25,
"F28:H28": 1,
"A29": 1,
"B29": 24,
"C29": 25,
"D29": 26,
"E29": 25,
"F29:H29": 1,
"A30": 1,
"B30": 24,
"C30": 25,
"D30": 26,
"E30": 25,
"F30:H30": 1,
"A31": 1,
"B31": 24,
"C31": 25,
"D31": 26,
"E31": 25,
"F31:H31": 1,
"A32": 1,
"B32": 24,
"C32": 25,
"D32": 26,
"E32": 25,
"F32:H32": 1,
"A33": 1,
"B33": 24,
"C33": 25,
"D33": 26,
"E33": 25,
"F33": 8,
"G33:H33": 1,
"A34": 1,
"B34": 24,
"C34": 25,
"D34": 26,
"E34": 25,
"F34:H34": 1,
"A35": 1,
"B35": 24,
"C35": 25,
"D35": 26,
"E35": 25,
"F35:H35": 1,
"A36": 1,
"B36": 24,
"C36": 25,
"D36": 26,
"E36": 25,
"F36:H36": 1,
"A37": 1,
"B37": 9,
"C37:E37": 10,
"F37:H37": 1,
"A38:H38": 1
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Project Management Dashboard",
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resize: "both",
minDimensions: [8, 38],
media: [
{
"id": "bed231e4-5a3b-4fa1-ad86-72c4a6e4dc2e",
"type": "chart",
"options": {
"orientation": 1,
"range": "Notes!A16:B20",
"headers": true,
"title": { "text": "Overall Task", "font": { "color": "#000000" } },
"labels": 0,
"datasets": null,
"series": [
{
"color": ["#E69F00", "#56B4E9", "#009E73", "#F0E442"],
"borderColor": [
"transparent",
"transparent",
"transparent",
"transparent"
],
"border": { "width": 2 }
}
],
"type": "doughnut",
"legend": {
"display": true,
"position": "right",
"labels": { "font": { "color": "#000000", "size": 13 } }
}
},
"cellAnchor": "D7",
"left": 17,
"top": 16,
"width": 360,
"height": 266,
"zIndex": 3,
"rotate": 0
},
{
"id": "b83e79f9-e076-4f61-8e54-e68a07188036",
"type": "chart",
"options": {
"orientation": 0,
"range": "Notes!A24:B25",
"headers": true,
"title": {
"text": "Budget",
"font": { "color": "#000000" },
"position": "bottom"
},
"labels": 0,
"datasets": [2, 1],
"series": [
{ "color": "#E69F00" },
{ "color": "#56B4E9" },
{ "color": "#009E73" },
{ "color": "#F0E442" },
{ "color": "#0072B2" }
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "width": 1, "length": 8 },
"labels": { "color": "#000000", "size": 13 },
"reverse": true
},
"side": {
"grid": { "width": 1 },
"ticks": { "width": 1, "length": 8 },
"labels": { "color": "#000000", "size": 13 },
"min": 20000,
"max": 90000,
"forceTheLimits": true,
"spacingBetweenTicks": { "type": "value", "value": 10000 }
}
},
"type": "bar",
"legend": { "display": true, "position": "top" }
},
"cellAnchor": "B16",
"left": 2,
"top": 11,
"width": 748,
"height": 209,
"zIndex": 3,
"rotate": 0
},
{
"id": "a9013968-8bce-4ec4-8e4b-494d06b63dcb",
"type": "chart",
"options": {
"orientation": 0,
"range": "Notes!A29:B31",
"headers": true,
"title": {
"text": "Pending Items",
"font": { "color": "#000000" }
},
"labels": 0,
"datasets": null,
"series": [
{ "color": "#E69F00" },
{ "color": "#56B4E9" },
{ "color": "#009E73" },
{ "color": "#F0E442" },
{ "color": "#0072B2" }
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "width": 1, "length": 8 },
"labels": { "color": "#000000", "size": 13 }
},
"side": {
"grid": { "width": 1 },
"ticks": { "width": 1, "length": 8 },
"labels": { "color": "#000000", "size": 13 }
}
},
"type": "column",
"legend": { "display": true, "position": "bottom" }
},
"cellAnchor": "B7",
"left": 2,
"top": 16,
"width": 376,
"height": 266,
"zIndex": 3,
"rotate": 0
}
],
freezeRowControl: true,
freezeColumnControl: true,
freezeRows: [0],
worksheetId: "18c0eea5-76b9-4774-93eb-c10413b683e8",
mergeCells: {
"B1": [5, 1],
"E3": [3, 1],
"F4": [2, 1],
"F5": [2, 1],
"F6": [2, 1]
}
},
{
data: [
["Tasks", "Assigned To", "Start", "End", "Status"],
["Set kick-off meeting","Alex B.","2022-09-02 00:00:00","2022-09-03 00:00:00","COMPLETE"],
["Agree on objectives","Frank C.","2022-09-03 00:00:00","2022-09-07 00:00:00","COMPLETE"],
["Detailed Reqs.","Jacob S.","2022-09-07 00:00:00","2022-09-12 00:00:00","COMPLETE"],
["Hardward Reqs.","Jacob S.","2022-09-09 00:00:00","2022-09-11 00:00:00","OVERDUE"],
["Final Resource Plan","Jacob S.","2022-09-11 00:00:00","2022-09-15 00:00:00","IN PROGRESS"],
["Staffing","Alex B.","2022-09-16 00:00:00","2022-09-17 00:00:00","IN PROGRESS"],
["Techincal Reqs.","Frank C.","2022-09-17 00:00:00","2022-09-21 00:00:00","COMPLETE"],
["Testing","Kennedy K.","2022-09-24 00:00:00","2022-10-02 00:00:00","OVERDUE"],
["Dev. Complete","Jacob S.","2022-10-02 00:00:00","2022-10-05 00:00:00","OVERDUE"],
["Hardware Config.","Alex B.","2022-10-05 00:00:00","2022-10-07 00:00:00","COMPLETE"],
["System Testing","Kennedy K.","2022-10-06 00:00:00","2022-10-09 00:00:00","NOT STARTED"],
["Launch", "", "", "", ""],
["", "", "", "", ""],
["", "", "", "", ""],
["Percentage of Tasks Complete", "", "", "", ""],
["Complete","=COUNTIF(E2:E12,\"COMPLETE\")/COUNTA(E2:E12)","","",""],
["Overdue", "=COUNTIF(E2:E12,\"OVERDUE\")/COUNTA(E2:E12)", "", "", ""],
["In progress","=COUNTIF(E2:E12,\"IN PROGRESS\")/COUNTA(E2:E12)","","",""],
["Not Started","=COUNTIF(E2:E12,\"NOT STARTED\")/COUNTA(E2:E12)","","",""],
["", "", "", "", ""],
["", "", "", "", ""],
["Budget", "", "", "", ""],
["Planned", 80000, "", "", ""],
["Actual", 50000, "", "", ""],
["", "", "", "", ""],
["", "", "", "", ""],
["Pending Items", "", "", "", ""],
["Decisions", 5, "", "", ""],
["Actions", 2, "", "", ""],
["Change Requests ", 4, "", "", ""]
],
columns: [
{ "width": 277, "type": "text", "align": "left", "s": 38 },
{ "width": 125, "type": "text", "align": "left", "s": 38 },
{ "width": 122, "type": "text", "align": "left", "s": 38 },
{ "width": 120, "type": "text", "align": "left", "s": 38 },
{
"width": 163,
"type": "dropdown",
"source": [
{ "id": "COMPLETE", "name": "COMPLETE" },
{ "id": "OVERDUE", "name": "OVERDUE" },
{ "id": "IN PROGRESS", "name": "IN PROGRESS" },
{ "id": "NOT STARTED", "name": "NOT STARTED" }
],
"align": "left",
"s": 38
}
],
cells: {
"C2": { "type": "calendar", "format": "DD/MM/YYYY" },
"D2": { "type": "calendar", "format": "DD/MM/YYYY" },
"C3": { "type": "calendar", "format": "DD/MM/YYYY" },
"D3": { "type": "calendar", "format": "DD/MM/YYYY" },
"C4": { "type": "calendar", "format": "DD/MM/YYYY" },
"D4": { "type": "calendar", "format": "DD/MM/YYYY" },
"C5": { "type": "calendar", "format": "DD/MM/YYYY" },
"D5": { "type": "calendar", "format": "DD/MM/YYYY" },
"C6": { "type": "calendar", "format": "DD/MM/YYYY" },
"D6": { "type": "calendar", "format": "DD/MM/YYYY" },
"C7": { "type": "calendar", "format": "DD/MM/YYYY" },
"D7": { "type": "calendar", "format": "DD/MM/YYYY" },
"C8": { "type": "calendar", "format": "DD/MM/YYYY" },
"D8": { "type": "calendar", "format": "DD/MM/YYYY" },
"C9": { "type": "calendar", "format": "DD/MM/YYYY" },
"D9": { "type": "calendar", "format": "DD/MM/YYYY" },
"C10": { "type": "calendar", "format": "DD/MM/YYYY" },
"D10": { "type": "calendar", "format": "DD/MM/YYYY" },
"C11": { "type": "calendar", "format": "DD/MM/YYYY" },
"D11": { "type": "calendar", "format": "DD/MM/YYYY" },
"C12": { "type": "calendar", "format": "DD/MM/YYYY" },
"D12": { "type": "calendar", "format": "DD/MM/YYYY" },
"C13": { "type": "calendar", "format": "DD/MM/YYYY" },
"D13": { "type": "calendar", "format": "DD/MM/YYYY" },
"E13": { "type": "text" },
"E14": { "type": "text" },
"E15": { "type": "text" },
"E16": { "type": "text" },
"B17": { "format": "0.00%" },
"E17": { "type": "text" },
"B18": { "format": "0.00%" },
"E18": { "type": "text" },
"B19": { "format": "0.00%" },
"E19": { "type": "text" },
"B20": { "format": "0.00%" },
"E20": { "type": "text" },
"E21": { "type": "text" },
"E22": { "type": "text" },
"E23": { "type": "text" },
"B24": { "format": "#,##0" },
"E24": { "type": "text" },
"B25": { "format": "#,##0" },
"E25": { "type": "text" },
"E26": { "type": "text" },
"E27": { "type": "text" },
"E28": { "type": "text" },
"E29": { "type": "text" },
"E30": { "type": "text" },
"E31": { "type": "text" }
},
style: {
"A1": 27,
"B1:E1": 28,
"F1": 4,
"A2": 29,
"B2:D2": 30,
"E2": 31,
"F2": 4,
"A3": 29,
"B3:D3": 30,
"E3": 31,
"F3": 4,
"A4": 29,
"B4:D4": 30,
"E4": 31,
"F4": 4,
"A5": 29,
"B5:D5": 30,
"E5": 31,
"F5": 4,
"A6": 29,
"B6:D6": 30,
"E6": 31,
"F6": 4,
"A7": 29,
"B7:D7": 30,
"E7": 31,
"F7": 4,
"A8": 29,
"B8:D8": 30,
"E8": 31,
"F8": 4,
"A9": 29,
"B9:D9": 30,
"E9": 31,
"F9": 4,
"A10": 29,
"B10:D10": 30,
"E10": 31,
"F10": 4,
"A11": 29,
"B11:D11": 30,
"E11": 31,
"F11": 4,
"A12": 29,
"B12:D12": 30,
"E12": 31,
"F12": 4,
"A13": 5,
"B13:D13": 6,
"E13": 11,
"F13": 4,
"A14:F14": 4,
"A15:F15": 4,
"A16": 27,
"B16": 28,
"C16": 4,
"D16:E16": 7,
"F16": 4,
"A17": 32,
"B17": 33,
"C17:F17": 4,
"A18": 32,
"B18": 33,
"C18:F18": 4,
"A19": 32,
"B19": 33,
"C19:F19": 4,
"A20": 32,
"B20": 33,
"C20:F20": 4,
"A21:F21": 4,
"A22:F22": 4,
"A23": 27,
"B23": 28,
"C23:F23": 4,
"A24": 34,
"B24": 35,
"C24:F24": 4,
"A25": 32,
"B25": 33,
"C25:F25": 4,
"A26:F26": 4,
"A27:F27": 4,
"A28": 27,
"B28": 28,
"C28:F28": 4,
"A29": 36,
"B29": 37,
"C29:F29": 4,
"A30": 36,
"B30": 37,
"C30:F30": 4,
"A31": 38,
"B31": 39,
"C31:F31": 4
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resize: "both",
worksheetName: "Notes",
defaultColWidth: 79,
gridline: false,
minDimensions: [5, 31],
worksheetId: "d537423b-d382-4ff9-aafc-dbfa12a9dcd8",
mergeCells: { "A16": [2, 1], "A23": [2, 1], "A28": [2, 1] }
}
],
tableWidth: '1000',
tableHeight: '620',
resizable: true,
toolbar: true
}
);
</script>
</html>
import React, { useEffect, useRef } from 'react';
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';
import charts from '@jspreadsheet/charts';
import studio from '@lemonadejs/studio';
import chartjs from '@jspreadsheet/formula-charts';
import '@lemonadejs/studio';
import '@lemonadejs/studio/dist/style.css';
import 'jsuites/dist/jsuites.css';
import 'jspreadsheet/dist/jspreadsheet.css';
import '@jspreadsheet/formula-charts';
import '@jspreadsheet/charts/dist/style.css';
import './App.css';
export default function App() {
const spreadsheetRef = useRef(null);
useEffect(() => {
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ODNiNzJlN2NlZDJkMjczNzE5ZDFjMDYzMmY4MGE4MTlhMmM4MjY0N2E2NzY4MTk3OGY0YzUwMTRmMzJjN2QyYWRhM2IzOWIwOWZjMGNiZjljYzMwYWM4YzA0ZTBmZGNmMzlhYjBkMzdjNmRmYWJmZGZkYWVmNTRhNjU0NGQxNWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd056azROelkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts });
const instance = jspreadsheet(spreadsheetRef.current,{
style: [
"background-color: #FFFFFF;font-size: 27px;font-weight: bold;font-family: Open sans;color: #808080;vertical-align: middle;",
"background-color: #FFFFFF;font-size: 13px;font-family: Open sans;color: #000000;white-space: break-spaces;",
"background-color: #FFFFFF;font-size: 13px;font-family: Open sans;color: #000000;text-align: center;white-space: break-spaces;",
"font-size: 13px;font-family: Open sans;color: #000000;white-space: break-spaces;",
"font-size: 13px;font-family: Open sans;color: #000000;text-align: left;padding-left: 19px;vertical-align: middle;",
"background-color:#9e9e9e;font-size:13px;font-weight:bold;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#9e9e9e;font-size:13px;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#fdfffe;font-size:13px;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle",
"background-color:#fdffff;font-size:13px;font-family: Open sans;color:#000000;white-space:break-spaces",
"background-color:#bdbdbd;font-size:13px;font-weight:bold;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#bdbdbd;font-size:13px;font-weight:bold;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;background-color:#9e9e9e;border-right:1px solid #b0bec5;border-bottom:1px solid #b0bec5;border-left:1px solid #b0bec5;border-top:1px solid #b0bec5",
"background-color:#FFFFFF;font-size:27px;font-weight:bold;font-family: Open sans;color:#424242;vertical-align:middle",
"background-color:#FFFFFF;font-size:27px;font-weight:bold;font-family: Open sans;color:#424242;vertical-align:middle",
"background-color:#FFFFFF;font-size:27px;font-family: Open sans;color:#424242;text-align:right;white-space:break-spaces;border-right:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#FFFFFF;font-size:19px;font-family: Open sans;color:#424242;text-align:right;white-space:break-spaces;border-bottom:1px solid #000000",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#FFFFFF;font-size:medium;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-left:1px solid black",
"background-color:#FFFFFF;font-size:13px;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"background-color:#FFFFFF;font-size:medium;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"background-color:#FFFFFF;font-size:13px;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid #b0bec5;border-right:1px solid #b0bec5;border-left:1px solid #b0bec5",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-left:1px solid black",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black"
],
worksheets: [
{
data: [
["", "PROJECT MANAGEMENT DASHBOARD", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "PROJECT NAME", "Jspreadsheet", "", "Priorities", "", "", ""],
["","REPORT DATE",45790,"","High","=COUNTIF(D26:D36,\"★★★\")","",""],
["","PROJECT STATUS","On track","","Medium","=COUNTIF(D26:D36,\"★★\")","",""],
["", "COMPLETED", 0.27, "", "Lower", "=COUNTIF(D26:D36,\"★\")", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "TASKS", "ASSIGNED TO", "PRIORITY", "STATUS", "", "", ""],
["", "Set Kick-Off Meeting", "Alex B.", "★★★", "=NOTES!E2", "", "", ""],
["", "Agree on Objectives", "Frank C.", "★★★", "=NOTES!E3", "", "", ""],
["", "Detailed Requests", "Jacob S.", "★", "=NOTES!E4", "", "", ""],
["", "Hardware Requests", "Jacob S.", "★", "=NOTES!E5", "", "", ""],
["", "Final Resource Plan", "Jacob S.", "★★", "=NOTES!E6", "", "", ""],
["", "Staffing", "Alex B.", "★★", "=NOTES!E7", "", "", ""],
["", "Technical Requests", "Frank C.", "★", "=NOTES!E8", "", "", ""],
["", "Testing", "Kennedy K.", "★", "=NOTES!E9", "", "", ""],
["", "Dev. Complete", "Jacob S.", "★★★", "=NOTES!E10", "", "", ""],
["","Hardware Configuration","Alex B.","★","=NOTES!E11","","",""],
["", "System Testing", "Kennedy K.", "★", "=NOTES!E12", "", "", ""],
["", "Launch", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""]
],
columns: [
{ "width": 24, "type": "text", "align": "left", "s": 21 },
{ "width": 167, "type": "text", "align": "left", "s": 21 },
{ "width": 205, "type": "text", "align": "left", "s": 21 },
{ "width": 81, "type": "text", "align": "left", "s": 21 },
{ "width": 134, "type": "text", "align": "left", "s": 21 },
{ "width": 102, "type": "text", "align": "left", "s": 21 },
{ "width": 61, "type": "text", "align": "left", "s": 21 },
{ "width": 105, "type": "text", "align": "left", "s": 21 }
],
rows: [
{ "height": 60 },
{ "height": 29 },
{ "height": 43 },
{ "height": 33 },
{ "height": 33 },
{ "height": 33 },
{ "height": 29 },
{ "height": 47 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 39 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 36 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 43 },
{ "height": 43 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 43 },
{ "height": 43 },
{ "height": 29 },
{ "height": 29 }
],
cells: {
"G3": { "format": "0.00%" },
"C4": { "format": "m/d/yy" },
"C6": { "format": "0%" },
"E6": { "format": "0.00%" },
"D26": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E26": { "format": "0%" },
"D27": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E27": { "format": "0%" },
"D28": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E28": { "format": "0%" },
"D29": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E29": { "format": "0%" },
"D30": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E30": { "format": "0%" },
"D31": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E31": { "format": "0%" },
"D32": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E32": { "format": "0%" },
"D33": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E33": { "format": "0%" },
"D34": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E34": { "format": "0%" },
"D35": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E35": { "format": "0%" },
"D36": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E36": { "format": "0%" }
},
style: {
"A1": 3,
"B1": 12,
"C1:F1": 13,
"G1:H1": 0,
"A2": 3,
"B2:H2": 0,
"A3": 1,
"B3": 16,
"C3": 14,
"D3": 1,
"E3:G3": 18,
"H3": 1,
"A4": 1,
"B4": 17,
"C4": 15,
"D4": 1,
"E4": 19,
"F4:G4": 20,
"H4": 1,
"A5": 1,
"B5": 17,
"C5": 15,
"D5": 1,
"E5": 19,
"F5:G5": 20,
"H5": 1,
"A6": 1,
"B6": 17,
"C6": 15,
"D6": 1,
"E6": 21,
"F6:G6": 22,
"H6": 1,
"A7:H7": 1,
"A8:H8": 1,
"A9:H9": 1,
"A10:H10": 1,
"A11:H11": 1,
"A12:H12": 1,
"A13:H13": 1,
"A14:H14": 1,
"A15:H15": 1,
"A16:H16": 1,
"A17:H17": 1,
"A18:H18": 1,
"A19:H19": 1,
"A20:H20": 1,
"A21:H21": 1,
"A22:H22": 1,
"A23": 1,
"B23": 2,
"C23:H23": 1,
"A24": 1,
"B24": 2,
"C24:H24": 1,
"A25": 1,
"B25": 18,
"C25:E25": 23,
"F25:H25": 1,
"A26": 1,
"B26": 24,
"C26": 25,
"D26": 26,
"E26": 25,
"F26:H26": 1,
"A27": 1,
"B27": 24,
"C27": 25,
"D27": 26,
"E27": 25,
"F27:H27": 1,
"A28": 1,
"B28": 24,
"C28": 25,
"D28": 26,
"E28": 25,
"F28:H28": 1,
"A29": 1,
"B29": 24,
"C29": 25,
"D29": 26,
"E29": 25,
"F29:H29": 1,
"A30": 1,
"B30": 24,
"C30": 25,
"D30": 26,
"E30": 25,
"F30:H30": 1,
"A31": 1,
"B31": 24,
"C31": 25,
"D31": 26,
"E31": 25,
"F31:H31": 1,
"A32": 1,
"B32": 24,
"C32": 25,
"D32": 26,
"E32": 25,
"F32:H32": 1,
"A33": 1,
"B33": 24,
"C33": 25,
"D33": 26,
"E33": 25,
"F33": 8,
"G33:H33": 1,
"A34": 1,
"B34": 24,
"C34": 25,
"D34": 26,
"E34": 25,
"F34:H34": 1,
"A35": 1,
"B35": 24,
"C35": 25,
"D35": 26,
"E35": 25,
"F35:H35": 1,
"A36": 1,
"B36": 24,
"C36": 25,
"D36": 26,
"E36": 25,
"F36:H36": 1,
"A37": 1,
"B37": 9,
"C37:E37": 10,
"F37:H37": 1,
"A38:H38": 1
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Project Management Dashboard",
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resize: "both",
minDimensions: [8, 38],
media: [
{
"id": "bed231e4-5a3b-4fa1-ad86-72c4a6e4dc2e",
"type": "chart",
"options": {
"orientation": 1,
"range": "Notes!A16:B20",
"headers": true,
"title": { "text": "Overall Task", "font": { "color": "#000000" } },
"labels": 0,
"datasets": null,
"series": [
{
"color": ["#E69F00", "#56B4E9", "#009E73", "#F0E442"],
"borderColor": [
"transparent",
"transparent",
"transparent",
"transparent"
],
"border": { "width": 2 }
}
],
"type": "doughnut",
"legend": {
"display": true,
"position": "right",
"labels": { "font": { "color": "#000000", "size": 13 } }
}
},
"cellAnchor": "D7",
"left": 17,
"top": 16,
"width": 360,
"height": 266,
"zIndex": 3,
"rotate": 0
},
{
"id": "b83e79f9-e076-4f61-8e54-e68a07188036",
"type": "chart",
"options": {
"orientation": 0,
"range": "Notes!A24:B25",
"headers": true,
"title": {
"text": "Budget",
"font": { "color": "#000000" },
"position": "bottom"
},
"labels": 0,
"datasets": [2, 1],
"series": [
{ "color": "#E69F00" },
{ "color": "#56B4E9" },
{ "color": "#009E73" },
{ "color": "#F0E442" },
{ "color": "#0072B2" }
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "width": 1, "length": 8 },
"labels": { "color": "#000000", "size": 13 },
"reverse": true
},
"side": {
"grid": { "width": 1 },
"ticks": { "width": 1, "length": 8 },
"labels": { "color": "#000000", "size": 13 },
"min": 20000,
"max": 90000,
"forceTheLimits": true,
"spacingBetweenTicks": { "type": "value", "value": 10000 }
}
},
"type": "bar",
"legend": { "display": true, "position": "top" }
},
"cellAnchor": "B16",
"left": 2,
"top": 11,
"width": 748,
"height": 209,
"zIndex": 3,
"rotate": 0
},
{
"id": "a9013968-8bce-4ec4-8e4b-494d06b63dcb",
"type": "chart",
"options": {
"orientation": 0,
"range": "Notes!A29:B31",
"headers": true,
"title": {
"text": "Pending Items",
"font": { "color": "#000000" }
},
"labels": 0,
"datasets": null,
"series": [
{ "color": "#E69F00" },
{ "color": "#56B4E9" },
{ "color": "#009E73" },
{ "color": "#F0E442" },
{ "color": "#0072B2" }
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "width": 1, "length": 8 },
"labels": { "color": "#000000", "size": 13 }
},
"side": {
"grid": { "width": 1 },
"ticks": { "width": 1, "length": 8 },
"labels": { "color": "#000000", "size": 13 }
}
},
"type": "column",
"legend": { "display": true, "position": "bottom" }
},
"cellAnchor": "B7",
"left": 2,
"top": 16,
"width": 376,
"height": 266,
"zIndex": 3,
"rotate": 0
}
],
freezeRowControl: true,
freezeColumnControl: true,
freezeRows: [0],
worksheetId: "18c0eea5-76b9-4774-93eb-c10413b683e8",
mergeCells: {
"B1": [5, 1],
"E3": [3, 1],
"F4": [2, 1],
"F5": [2, 1],
"F6": [2, 1]
}
},
{
data: [
["Tasks", "Assigned To", "Start", "End", "Status"],
["Set kick-off meeting","Alex B.","2022-09-02 00:00:00","2022-09-03 00:00:00","COMPLETE"],
["Agree on objectives","Frank C.","2022-09-03 00:00:00","2022-09-07 00:00:00","COMPLETE"],
["Detailed Reqs.","Jacob S.","2022-09-07 00:00:00","2022-09-12 00:00:00","COMPLETE"],
["Hardward Reqs.","Jacob S.","2022-09-09 00:00:00","2022-09-11 00:00:00","OVERDUE"],
["Final Resource Plan","Jacob S.","2022-09-11 00:00:00","2022-09-15 00:00:00","IN PROGRESS"],
["Staffing","Alex B.","2022-09-16 00:00:00","2022-09-17 00:00:00","IN PROGRESS"],
["Techincal Reqs.","Frank C.","2022-09-17 00:00:00","2022-09-21 00:00:00","COMPLETE"],
["Testing","Kennedy K.","2022-09-24 00:00:00","2022-10-02 00:00:00","OVERDUE"],
["Dev. Complete","Jacob S.","2022-10-02 00:00:00","2022-10-05 00:00:00","OVERDUE"],
["Hardware Config.","Alex B.","2022-10-05 00:00:00","2022-10-07 00:00:00","COMPLETE"],
["System Testing","Kennedy K.","2022-10-06 00:00:00","2022-10-09 00:00:00","NOT STARTED"],
["Launch", "", "", "", ""],
["", "", "", "", ""],
["", "", "", "", ""],
["Percentage of Tasks Complete", "", "", "", ""],
["Complete","=COUNTIF(E2:E12,\"COMPLETE\")/COUNTA(E2:E12)","","",""],
["Overdue", "=COUNTIF(E2:E12,\"OVERDUE\")/COUNTA(E2:E12)", "", "", ""],
["In progress","=COUNTIF(E2:E12,\"IN PROGRESS\")/COUNTA(E2:E12)","","",""],
["Not Started","=COUNTIF(E2:E12,\"NOT STARTED\")/COUNTA(E2:E12)","","",""],
["", "", "", "", ""],
["", "", "", "", ""],
["Budget", "", "", "", ""],
["Planned", 80000, "", "", ""],
["Actual", 50000, "", "", ""],
["", "", "", "", ""],
["", "", "", "", ""],
["Pending Items", "", "", "", ""],
["Decisions", 5, "", "", ""],
["Actions", 2, "", "", ""],
["Change Requests ", 4, "", "", ""]
],
columns: [
{ "width": 277, "type": "text", "align": "left", "s": 38 },
{ "width": 125, "type": "text", "align": "left", "s": 38 },
{ "width": 122, "type": "text", "align": "left", "s": 38 },
{ "width": 120, "type": "text", "align": "left", "s": 38 },
{
"width": 163,
"type": "dropdown",
"source": [
{ "id": "COMPLETE", "name": "COMPLETE" },
{ "id": "OVERDUE", "name": "OVERDUE" },
{ "id": "IN PROGRESS", "name": "IN PROGRESS" },
{ "id": "NOT STARTED", "name": "NOT STARTED" }
],
"align": "left",
"s": 38
}
],
cells: {
"C2": { "type": "calendar", "format": "DD/MM/YYYY" },
"D2": { "type": "calendar", "format": "DD/MM/YYYY" },
"C3": { "type": "calendar", "format": "DD/MM/YYYY" },
"D3": { "type": "calendar", "format": "DD/MM/YYYY" },
"C4": { "type": "calendar", "format": "DD/MM/YYYY" },
"D4": { "type": "calendar", "format": "DD/MM/YYYY" },
"C5": { "type": "calendar", "format": "DD/MM/YYYY" },
"D5": { "type": "calendar", "format": "DD/MM/YYYY" },
"C6": { "type": "calendar", "format": "DD/MM/YYYY" },
"D6": { "type": "calendar", "format": "DD/MM/YYYY" },
"C7": { "type": "calendar", "format": "DD/MM/YYYY" },
"D7": { "type": "calendar", "format": "DD/MM/YYYY" },
"C8": { "type": "calendar", "format": "DD/MM/YYYY" },
"D8": { "type": "calendar", "format": "DD/MM/YYYY" },
"C9": { "type": "calendar", "format": "DD/MM/YYYY" },
"D9": { "type": "calendar", "format": "DD/MM/YYYY" },
"C10": { "type": "calendar", "format": "DD/MM/YYYY" },
"D10": { "type": "calendar", "format": "DD/MM/YYYY" },
"C11": { "type": "calendar", "format": "DD/MM/YYYY" },
"D11": { "type": "calendar", "format": "DD/MM/YYYY" },
"C12": { "type": "calendar", "format": "DD/MM/YYYY" },
"D12": { "type": "calendar", "format": "DD/MM/YYYY" },
"C13": { "type": "calendar", "format": "DD/MM/YYYY" },
"D13": { "type": "calendar", "format": "DD/MM/YYYY" },
"E13": { "type": "text" },
"E14": { "type": "text" },
"E15": { "type": "text" },
"E16": { "type": "text" },
"B17": { "format": "0.00%" },
"E17": { "type": "text" },
"B18": { "format": "0.00%" },
"E18": { "type": "text" },
"B19": { "format": "0.00%" },
"E19": { "type": "text" },
"B20": { "format": "0.00%" },
"E20": { "type": "text" },
"E21": { "type": "text" },
"E22": { "type": "text" },
"E23": { "type": "text" },
"B24": { "format": "#,##0" },
"E24": { "type": "text" },
"B25": { "format": "#,##0" },
"E25": { "type": "text" },
"E26": { "type": "text" },
"E27": { "type": "text" },
"E28": { "type": "text" },
"E29": { "type": "text" },
"E30": { "type": "text" },
"E31": { "type": "text" }
},
style: {
"A1": 27,
"B1:E1": 28,
"F1": 4,
"A2": 29,
"B2:D2": 30,
"E2": 31,
"F2": 4,
"A3": 29,
"B3:D3": 30,
"E3": 31,
"F3": 4,
"A4": 29,
"B4:D4": 30,
"E4": 31,
"F4": 4,
"A5": 29,
"B5:D5": 30,
"E5": 31,
"F5": 4,
"A6": 29,
"B6:D6": 30,
"E6": 31,
"F6": 4,
"A7": 29,
"B7:D7": 30,
"E7": 31,
"F7": 4,
"A8": 29,
"B8:D8": 30,
"E8": 31,
"F8": 4,
"A9": 29,
"B9:D9": 30,
"E9": 31,
"F9": 4,
"A10": 29,
"B10:D10": 30,
"E10": 31,
"F10": 4,
"A11": 29,
"B11:D11": 30,
"E11": 31,
"F11": 4,
"A12": 29,
"B12:D12": 30,
"E12": 31,
"F12": 4,
"A13": 5,
"B13:D13": 6,
"E13": 11,
"F13": 4,
"A14:F14": 4,
"A15:F15": 4,
"A16": 27,
"B16": 28,
"C16": 4,
"D16:E16": 7,
"F16": 4,
"A17": 32,
"B17": 33,
"C17:F17": 4,
"A18": 32,
"B18": 33,
"C18:F18": 4,
"A19": 32,
"B19": 33,
"C19:F19": 4,
"A20": 32,
"B20": 33,
"C20:F20": 4,
"A21:F21": 4,
"A22:F22": 4,
"A23": 27,
"B23": 28,
"C23:F23": 4,
"A24": 34,
"B24": 35,
"C24:F24": 4,
"A25": 32,
"B25": 33,
"C25:F25": 4,
"A26:F26": 4,
"A27:F27": 4,
"A28": 27,
"B28": 28,
"C28:F28": 4,
"A29": 36,
"B29": 37,
"C29:F29": 4,
"A30": 36,
"B30": 37,
"C30:F30": 4,
"A31": 38,
"B31": 39,
"C31:F31": 4
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resize: "both",
worksheetName: "Notes",
defaultColWidth: 79,
gridline: false,
minDimensions: [5, 31],
worksheetId: "d537423b-d382-4ff9-aafc-dbfa12a9dcd8",
mergeCells: { "A16": [2, 1], "A23": [2, 1], "A28": [2, 1] }
}
],
tableWidth: '1000',
tableHeight: '620',
resizable: true,
toolbar: true
}
);
return () => {
instance?.destroy?.();
};
}, []);
return <div ref={spreadsheetRef}></div>;
}
<template>
<Spreadsheet
ref="spreadsheet"
:license="license"
:toolbar="toolbar"
:tableOverflow="true"
:tableWidth="tableWidth"
:tableHeight="tableHeight"
:resizable="resizable"
:worksheets="worksheets"
:styles="globalStyle"
/>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';
import charts from '@jspreadsheet/charts';
import studio from '@lemonadejs/studio';
import chartjs from '@jspreadsheet/formula-charts';
import '@lemonadejs/studio';
import '@lemonadejs/studio/dist/style.css';
import 'jsuites/dist/jsuites.css';
import 'jspreadsheet/dist/jspreadsheet.css';
import '@jspreadsheet/formula-charts';
import '@jspreadsheet/charts/dist/style.css';
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ODNiNzJlN2NlZDJkMjczNzE5ZDFjMDYzMmY4MGE4MTlhMmM4MjY0N2E2NzY4MTk3OGY0YzUwMTRmMzJjN2QyYWRhM2IzOWIwOWZjMGNiZjljYzMwYWM4YzA0ZTBmZGNmMzlhYjBkMzdjNmRmYWJmZGZkYWVmNTRhNjU0NGQxNWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd056azROelkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts });
export default {
components: { Spreadsheet, Worksheet },
data() {
return {
toolbar: true,
tableWidth: '1000',
tableHeight: '620',
resizable: true,
globalStyle: [
"background-color: #FFFFFF;font-size: 27px;font-weight: bold;font-family: Open sans;color: #808080;vertical-align: middle;",
"background-color: #FFFFFF;font-size: 13px;font-family: Open sans;color: #000000;white-space: break-spaces;",
"background-color: #FFFFFF;font-size: 13px;font-family: Open sans;color: #000000;text-align: center;white-space: break-spaces;",
"font-size: 13px;font-family: Open sans;color: #000000;white-space: break-spaces;",
"font-size: 13px;font-family: Open sans;color: #000000;text-align: left;padding-left: 19px;vertical-align: middle;",
"background-color:#9e9e9e;font-size:13px;font-weight:bold;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#9e9e9e;font-size:13px;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#fdfffe;font-size:13px;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle",
"background-color:#fdffff;font-size:13px;font-family: Open sans;color:#000000;white-space:break-spaces",
"background-color:#bdbdbd;font-size:13px;font-weight:bold;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#bdbdbd;font-size:13px;font-weight:bold;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;background-color:#9e9e9e;border-right:1px solid #b0bec5;border-bottom:1px solid #b0bec5;border-left:1px solid #b0bec5;border-top:1px solid #b0bec5",
"background-color:#FFFFFF;font-size:27px;font-weight:bold;font-family: Open sans;color:#424242;vertical-align:middle",
"background-color:#FFFFFF;font-size:27px;font-weight:bold;font-family: Open sans;color:#424242;vertical-align:middle",
"background-color:#FFFFFF;font-size:27px;font-family: Open sans;color:#424242;text-align:right;white-space:break-spaces;border-right:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#FFFFFF;font-size:19px;font-family: Open sans;color:#424242;text-align:right;white-space:break-spaces;border-bottom:1px solid #000000",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#FFFFFF;font-size:medium;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-left:1px solid black",
"background-color:#FFFFFF;font-size:13px;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"background-color:#FFFFFF;font-size:medium;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"background-color:#FFFFFF;font-size:13px;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid #b0bec5;border-right:1px solid #b0bec5;border-left:1px solid #b0bec5",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-left:1px solid black",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black"
],
worksheets: [
{
data: [
["", "PROJECT MANAGEMENT DASHBOARD", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "PROJECT NAME", "Jspreadsheet", "", "Priorities", "", "", ""],
["","REPORT DATE",45790,"","High","=COUNTIF(D26:D36,\"★★★\")","",""],
["","PROJECT STATUS","On track","","Medium","=COUNTIF(D26:D36,\"★★\")","",""],
["", "COMPLETED", 0.27, "", "Lower", "=COUNTIF(D26:D36,\"★\")", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "TASKS", "ASSIGNED TO", "PRIORITY", "STATUS", "", "", ""],
["", "Set Kick-Off Meeting", "Alex B.", "★★★", "=NOTES!E2", "", "", ""],
["", "Agree on Objectives", "Frank C.", "★★★", "=NOTES!E3", "", "", ""],
["", "Detailed Requests", "Jacob S.", "★", "=NOTES!E4", "", "", ""],
["", "Hardware Requests", "Jacob S.", "★", "=NOTES!E5", "", "", ""],
["", "Final Resource Plan", "Jacob S.", "★★", "=NOTES!E6", "", "", ""],
["", "Staffing", "Alex B.", "★★", "=NOTES!E7", "", "", ""],
["", "Technical Requests", "Frank C.", "★", "=NOTES!E8", "", "", ""],
["", "Testing", "Kennedy K.", "★", "=NOTES!E9", "", "", ""],
["", "Dev. Complete", "Jacob S.", "★★★", "=NOTES!E10", "", "", ""],
["","Hardware Configuration","Alex B.","★","=NOTES!E11","","",""],
["", "System Testing", "Kennedy K.", "★", "=NOTES!E12", "", "", ""],
["", "Launch", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""]
],
columns: [
{ "width": 24, "type": "text", "align": "left", "s": 21 },
{ "width": 167, "type": "text", "align": "left", "s": 21 },
{ "width": 205, "type": "text", "align": "left", "s": 21 },
{ "width": 81, "type": "text", "align": "left", "s": 21 },
{ "width": 134, "type": "text", "align": "left", "s": 21 },
{ "width": 102, "type": "text", "align": "left", "s": 21 },
{ "width": 61, "type": "text", "align": "left", "s": 21 },
{ "width": 105, "type": "text", "align": "left", "s": 21 }
],
rows: [
{ "height": 60 },
{ "height": 29 },
{ "height": 43 },
{ "height": 33 },
{ "height": 33 },
{ "height": 33 },
{ "height": 29 },
{ "height": 47 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 39 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 36 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 43 },
{ "height": 43 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 43 },
{ "height": 43 },
{ "height": 29 },
{ "height": 29 }
],
cells: {
"G3": { "format": "0.00%" },
"C4": { "format": "m/d/yy" },
"C6": { "format": "0%" },
"E6": { "format": "0.00%" },
"D26": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E26": { "format": "0%" },
"D27": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E27": { "format": "0%" },
"D28": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E28": { "format": "0%" },
"D29": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E29": { "format": "0%" },
"D30": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E30": { "format": "0%" },
"D31": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E31": { "format": "0%" },
"D32": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E32": { "format": "0%" },
"D33": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E33": { "format": "0%" },
"D34": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E34": { "format": "0%" },
"D35": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E35": { "format": "0%" },
"D36": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E36": { "format": "0%" }
},
style: {
"A1": 3,
"B1": 12,
"C1:F1": 13,
"G1:H1": 0,
"A2": 3,
"B2:H2": 0,
"A3": 1,
"B3": 16,
"C3": 14,
"D3": 1,
"E3:G3": 18,
"H3": 1,
"A4": 1,
"B4": 17,
"C4": 15,
"D4": 1,
"E4": 19,
"F4:G4": 20,
"H4": 1,
"A5": 1,
"B5": 17,
"C5": 15,
"D5": 1,
"E5": 19,
"F5:G5": 20,
"H5": 1,
"A6": 1,
"B6": 17,
"C6": 15,
"D6": 1,
"E6": 21,
"F6:G6": 22,
"H6": 1,
"A7:H7": 1,
"A8:H8": 1,
"A9:H9": 1,
"A10:H10": 1,
"A11:H11": 1,
"A12:H12": 1,
"A13:H13": 1,
"A14:H14": 1,
"A15:H15": 1,
"A16:H16": 1,
"A17:H17": 1,
"A18:H18": 1,
"A19:H19": 1,
"A20:H20": 1,
"A21:H21": 1,
"A22:H22": 1,
"A23": 1,
"B23": 2,
"C23:H23": 1,
"A24": 1,
"B24": 2,
"C24:H24": 1,
"A25": 1,
"B25": 18,
"C25:E25": 23,
"F25:H25": 1,
"A26": 1,
"B26": 24,
"C26": 25,
"D26": 26,
"E26": 25,
"F26:H26": 1,
"A27": 1,
"B27": 24,
"C27": 25,
"D27": 26,
"E27": 25,
"F27:H27": 1,
"A28": 1,
"B28": 24,
"C28": 25,
"D28": 26,
"E28": 25,
"F28:H28": 1,
"A29": 1,
"B29": 24,
"C29": 25,
"D29": 26,
"E29": 25,
"F29:H29": 1,
"A30": 1,
"B30": 24,
"C30": 25,
"D30": 26,
"E30": 25,
"F30:H30": 1,
"A31": 1,
"B31": 24,
"C31": 25,
"D31": 26,
"E31": 25,
"F31:H31": 1,
"A32": 1,
"B32": 24,
"C32": 25,
"D32": 26,
"E32": 25,
"F32:H32": 1,
"A33": 1,
"B33": 24,
"C33": 25,
"D33": 26,
"E33": 25,
"F33": 8,
"G33:H33": 1,
"A34": 1,
"B34": 24,
"C34": 25,
"D34": 26,
"E34": 25,
"F34:H34": 1,
"A35": 1,
"B35": 24,
"C35": 25,
"D35": 26,
"E35": 25,
"F35:H35": 1,
"A36": 1,
"B36": 24,
"C36": 25,
"D36": 26,
"E36": 25,
"F36:H36": 1,
"A37": 1,
"B37": 9,
"C37:E37": 10,
"F37:H37": 1,
"A38:H38": 1
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Project Management Dashboard",
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resize: "both",
minDimensions: [8, 38],
media: [
{
"id": "bed231e4-5a3b-4fa1-ad86-72c4a6e4dc2e",
"type": "chart",
"options": {
"orientation": 1,
"range": "Notes!A16:B20",
"headers": true,
"title": { "text": "Overall Task", "font": { "color": "#000000" } },
"labels": 0,
"datasets": null,
"series": [
{
"color": ["#E69F00", "#56B4E9", "#009E73", "#F0E442"],
"borderColor": [
"transparent",
"transparent",
"transparent",
"transparent"
],
"border": { "width": 2 }
}
],
"type": "doughnut",
"legend": {
"display": true,
"position": "right",
"labels": { "font": { "color": "#000000", "size": 13 } }
}
},
"cellAnchor": "D7",
"left": 17,
"top": 16,
"width": 360,
"height": 266,
"zIndex": 3,
"rotate": 0
},
{
"id": "b83e79f9-e076-4f61-8e54-e68a07188036",
"type": "chart",
"options": {
"orientation": 0,
"range": "Notes!A24:B25",
"headers": true,
"title": {
"text": "Budget",
"font": { "color": "#000000" },
"position": "bottom"
},
"labels": 0,
"datasets": [2, 1],
"series": [
{ "color": "#E69F00" },
{ "color": "#56B4E9" },
{ "color": "#009E73" },
{ "color": "#F0E442" },
{ "color": "#0072B2" }
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "width": 1, "length": 8 },
"labels": { "color": "#000000", "size": 13 },
"reverse": true
},
"side": {
"grid": { "width": 1 },
"ticks": { "width": 1, "length": 8 },
"labels": { "color": "#000000", "size": 13 },
"min": 20000,
"max": 90000,
"forceTheLimits": true,
"spacingBetweenTicks": { "type": "value", "value": 10000 }
}
},
"type": "bar",
"legend": { "display": true, "position": "top" }
},
"cellAnchor": "B16",
"left": 2,
"top": 11,
"width": 748,
"height": 209,
"zIndex": 3,
"rotate": 0
},
{
"id": "a9013968-8bce-4ec4-8e4b-494d06b63dcb",
"type": "chart",
"options": {
"orientation": 0,
"range": "Notes!A29:B31",
"headers": true,
"title": {
"text": "Pending Items",
"font": { "color": "#000000" }
},
"labels": 0,
"datasets": null,
"series": [
{ "color": "#E69F00" },
{ "color": "#56B4E9" },
{ "color": "#009E73" },
{ "color": "#F0E442" },
{ "color": "#0072B2" }
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "width": 1, "length": 8 },
"labels": { "color": "#000000", "size": 13 }
},
"side": {
"grid": { "width": 1 },
"ticks": { "width": 1, "length": 8 },
"labels": { "color": "#000000", "size": 13 }
}
},
"type": "column",
"legend": { "display": true, "position": "bottom" }
},
"cellAnchor": "B7",
"left": 2,
"top": 16,
"width": 376,
"height": 266,
"zIndex": 3,
"rotate": 0
}
],
freezeRowControl: true,
freezeColumnControl: true,
freezeRows: [0],
worksheetId: "18c0eea5-76b9-4774-93eb-c10413b683e8",
mergeCells: {
"B1": [5, 1],
"E3": [3, 1],
"F4": [2, 1],
"F5": [2, 1],
"F6": [2, 1]
}
},
{
data: [
["Tasks", "Assigned To", "Start", "End", "Status"],
["Set kick-off meeting","Alex B.","2022-09-02 00:00:00","2022-09-03 00:00:00","COMPLETE"],
["Agree on objectives","Frank C.","2022-09-03 00:00:00","2022-09-07 00:00:00","COMPLETE"],
["Detailed Reqs.","Jacob S.","2022-09-07 00:00:00","2022-09-12 00:00:00","COMPLETE"],
["Hardward Reqs.","Jacob S.","2022-09-09 00:00:00","2022-09-11 00:00:00","OVERDUE"],
["Final Resource Plan","Jacob S.","2022-09-11 00:00:00","2022-09-15 00:00:00","IN PROGRESS"],
["Staffing","Alex B.","2022-09-16 00:00:00","2022-09-17 00:00:00","IN PROGRESS"],
["Techincal Reqs.","Frank C.","2022-09-17 00:00:00","2022-09-21 00:00:00","COMPLETE"],
["Testing","Kennedy K.","2022-09-24 00:00:00","2022-10-02 00:00:00","OVERDUE"],
["Dev. Complete","Jacob S.","2022-10-02 00:00:00","2022-10-05 00:00:00","OVERDUE"],
["Hardware Config.","Alex B.","2022-10-05 00:00:00","2022-10-07 00:00:00","COMPLETE"],
["System Testing","Kennedy K.","2022-10-06 00:00:00","2022-10-09 00:00:00","NOT STARTED"],
["Launch", "", "", "", ""],
["", "", "", "", ""],
["", "", "", "", ""],
["Percentage of Tasks Complete", "", "", "", ""],
["Complete","=COUNTIF(E2:E12,\"COMPLETE\")/COUNTA(E2:E12)","","",""],
["Overdue", "=COUNTIF(E2:E12,\"OVERDUE\")/COUNTA(E2:E12)", "", "", ""],
["In progress","=COUNTIF(E2:E12,\"IN PROGRESS\")/COUNTA(E2:E12)","","",""],
["Not Started","=COUNTIF(E2:E12,\"NOT STARTED\")/COUNTA(E2:E12)","","",""],
["", "", "", "", ""],
["", "", "", "", ""],
["Budget", "", "", "", ""],
["Planned", 80000, "", "", ""],
["Actual", 50000, "", "", ""],
["", "", "", "", ""],
["", "", "", "", ""],
["Pending Items", "", "", "", ""],
["Decisions", 5, "", "", ""],
["Actions", 2, "", "", ""],
["Change Requests ", 4, "", "", ""]
],
columns: [
{ "width": 277, "type": "text", "align": "left", "s": 38 },
{ "width": 125, "type": "text", "align": "left", "s": 38 },
{ "width": 122, "type": "text", "align": "left", "s": 38 },
{ "width": 120, "type": "text", "align": "left", "s": 38 },
{
"width": 163,
"type": "dropdown",
"source": [
{ "id": "COMPLETE", "name": "COMPLETE" },
{ "id": "OVERDUE", "name": "OVERDUE" },
{ "id": "IN PROGRESS", "name": "IN PROGRESS" },
{ "id": "NOT STARTED", "name": "NOT STARTED" }
],
"align": "left",
"s": 38
}
],
cells: {
"C2": { "type": "calendar", "format": "DD/MM/YYYY" },
"D2": { "type": "calendar", "format": "DD/MM/YYYY" },
"C3": { "type": "calendar", "format": "DD/MM/YYYY" },
"D3": { "type": "calendar", "format": "DD/MM/YYYY" },
"C4": { "type": "calendar", "format": "DD/MM/YYYY" },
"D4": { "type": "calendar", "format": "DD/MM/YYYY" },
"C5": { "type": "calendar", "format": "DD/MM/YYYY" },
"D5": { "type": "calendar", "format": "DD/MM/YYYY" },
"C6": { "type": "calendar", "format": "DD/MM/YYYY" },
"D6": { "type": "calendar", "format": "DD/MM/YYYY" },
"C7": { "type": "calendar", "format": "DD/MM/YYYY" },
"D7": { "type": "calendar", "format": "DD/MM/YYYY" },
"C8": { "type": "calendar", "format": "DD/MM/YYYY" },
"D8": { "type": "calendar", "format": "DD/MM/YYYY" },
"C9": { "type": "calendar", "format": "DD/MM/YYYY" },
"D9": { "type": "calendar", "format": "DD/MM/YYYY" },
"C10": { "type": "calendar", "format": "DD/MM/YYYY" },
"D10": { "type": "calendar", "format": "DD/MM/YYYY" },
"C11": { "type": "calendar", "format": "DD/MM/YYYY" },
"D11": { "type": "calendar", "format": "DD/MM/YYYY" },
"C12": { "type": "calendar", "format": "DD/MM/YYYY" },
"D12": { "type": "calendar", "format": "DD/MM/YYYY" },
"C13": { "type": "calendar", "format": "DD/MM/YYYY" },
"D13": { "type": "calendar", "format": "DD/MM/YYYY" },
"E13": { "type": "text" },
"E14": { "type": "text" },
"E15": { "type": "text" },
"E16": { "type": "text" },
"B17": { "format": "0.00%" },
"E17": { "type": "text" },
"B18": { "format": "0.00%" },
"E18": { "type": "text" },
"B19": { "format": "0.00%" },
"E19": { "type": "text" },
"B20": { "format": "0.00%" },
"E20": { "type": "text" },
"E21": { "type": "text" },
"E22": { "type": "text" },
"E23": { "type": "text" },
"B24": { "format": "#,##0" },
"E24": { "type": "text" },
"B25": { "format": "#,##0" },
"E25": { "type": "text" },
"E26": { "type": "text" },
"E27": { "type": "text" },
"E28": { "type": "text" },
"E29": { "type": "text" },
"E30": { "type": "text" },
"E31": { "type": "text" }
},
style: {
"A1": 27,
"B1:E1": 28,
"F1": 4,
"A2": 29,
"B2:D2": 30,
"E2": 31,
"F2": 4,
"A3": 29,
"B3:D3": 30,
"E3": 31,
"F3": 4,
"A4": 29,
"B4:D4": 30,
"E4": 31,
"F4": 4,
"A5": 29,
"B5:D5": 30,
"E5": 31,
"F5": 4,
"A6": 29,
"B6:D6": 30,
"E6": 31,
"F6": 4,
"A7": 29,
"B7:D7": 30,
"E7": 31,
"F7": 4,
"A8": 29,
"B8:D8": 30,
"E8": 31,
"F8": 4,
"A9": 29,
"B9:D9": 30,
"E9": 31,
"F9": 4,
"A10": 29,
"B10:D10": 30,
"E10": 31,
"F10": 4,
"A11": 29,
"B11:D11": 30,
"E11": 31,
"F11": 4,
"A12": 29,
"B12:D12": 30,
"E12": 31,
"F12": 4,
"A13": 5,
"B13:D13": 6,
"E13": 11,
"F13": 4,
"A14:F14": 4,
"A15:F15": 4,
"A16": 27,
"B16": 28,
"C16": 4,
"D16:E16": 7,
"F16": 4,
"A17": 32,
"B17": 33,
"C17:F17": 4,
"A18": 32,
"B18": 33,
"C18:F18": 4,
"A19": 32,
"B19": 33,
"C19:F19": 4,
"A20": 32,
"B20": 33,
"C20:F20": 4,
"A21:F21": 4,
"A22:F22": 4,
"A23": 27,
"B23": 28,
"C23:F23": 4,
"A24": 34,
"B24": 35,
"C24:F24": 4,
"A25": 32,
"B25": 33,
"C25:F25": 4,
"A26:F26": 4,
"A27:F27": 4,
"A28": 27,
"B28": 28,
"C28:F28": 4,
"A29": 36,
"B29": 37,
"C29:F29": 4,
"A30": 36,
"B30": 37,
"C30:F30": 4,
"A31": 38,
"B31": 39,
"C31:F31": 4
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resize: "both",
worksheetName: "Notes",
defaultColWidth: 79,
gridline: false,
minDimensions: [5, 31],
worksheetId: "d537423b-d382-4ff9-aafc-dbfa12a9dcd8",
mergeCells: { "A16": [2, 1], "A23": [2, 1], "A28": [2, 1] }
}
],
};
},
};
</script>
import { Component, ElementRef, ViewChild } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';
import charts from '@jspreadsheet/charts';
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ODNiNzJlN2NlZDJkMjczNzE5ZDFjMDYzMmY4MGE4MTlhMmM4MjY0N2E2NzY4MTk3OGY0YzUwMTRmMzJjN2QyYWRhM2IzOWIwOWZjMGNiZjljYzMwYWM4YzA0ZTBmZGNmMzlhYjBkMzdjNmRmYWJmZGZkYWVmNTRhNjU0NGQxNWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd056azROelkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts });
@Component({
standalone: true,
selector: 'app-root',
template: `<div #spreadsheet></div>`,
})
export class AppComponent {
@ViewChild('spreadsheet', { static: true }) spreadsheet!: ElementRef;
ngAfterViewInit() {
jspreadsheet(this.spreadsheet.nativeElement, {
style: [
"background-color: #FFFFFF;font-size: 27px;font-weight: bold;font-family: Open sans;color: #808080;vertical-align: middle;",
"background-color: #FFFFFF;font-size: 13px;font-family: Open sans;color: #000000;white-space: break-spaces;",
"background-color: #FFFFFF;font-size: 13px;font-family: Open sans;color: #000000;text-align: center;white-space: break-spaces;",
"font-size: 13px;font-family: Open sans;color: #000000;white-space: break-spaces;",
"font-size: 13px;font-family: Open sans;color: #000000;text-align: left;padding-left: 19px;vertical-align: middle;",
"background-color:#9e9e9e;font-size:13px;font-weight:bold;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#9e9e9e;font-size:13px;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#fdfffe;font-size:13px;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle",
"background-color:#fdffff;font-size:13px;font-family: Open sans;color:#000000;white-space:break-spaces",
"background-color:#bdbdbd;font-size:13px;font-weight:bold;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#bdbdbd;font-size:13px;font-weight:bold;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#000000;text-align:left;padding-left:19px;vertical-align:middle;background-color:#9e9e9e;border-right:1px solid #b0bec5;border-bottom:1px solid #b0bec5;border-left:1px solid #b0bec5;border-top:1px solid #b0bec5",
"background-color:#FFFFFF;font-size:27px;font-weight:bold;font-family: Open sans;color:#424242;vertical-align:middle",
"background-color:#FFFFFF;font-size:27px;font-weight:bold;font-family: Open sans;color:#424242;vertical-align:middle",
"background-color:#FFFFFF;font-size:27px;font-family: Open sans;color:#424242;text-align:right;white-space:break-spaces;border-right:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#FFFFFF;font-size:19px;font-family: Open sans;color:#424242;text-align:right;white-space:break-spaces;border-bottom:1px solid #000000",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#FFFFFF;font-size:medium;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-left:1px solid black",
"background-color:#FFFFFF;font-size:13px;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"background-color:#FFFFFF;font-size:medium;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"background-color:#FFFFFF;font-size:13px;font-family: Open sans;color:#424242;white-space:break-spaces;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"background-color:#424242;font-size:13px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"background-color:#424242;font-size:13px;font-family: Open sans;color:#FFFFFF;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #BFBFBF;border-top:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #BFBFBF;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid #b0bec5;border-right:1px solid #b0bec5;border-left:1px solid #b0bec5",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-left:1px solid black",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"font-size:13px;font-family: Open sans;color:#424242;text-align:left;padding-left:19px;vertical-align:middle;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black"
],
worksheets: [
{
data: [
["", "PROJECT MANAGEMENT DASHBOARD", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "PROJECT NAME", "Jspreadsheet", "", "Priorities", "", "", ""],
["","REPORT DATE",45790,"","High","=COUNTIF(D26:D36,\"★★★\")","",""],
["","PROJECT STATUS","On track","","Medium","=COUNTIF(D26:D36,\"★★\")","",""],
["", "COMPLETED", 0.27, "", "Lower", "=COUNTIF(D26:D36,\"★\")", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "TASKS", "ASSIGNED TO", "PRIORITY", "STATUS", "", "", ""],
["", "Set Kick-Off Meeting", "Alex B.", "★★★", "=NOTES!E2", "", "", ""],
["", "Agree on Objectives", "Frank C.", "★★★", "=NOTES!E3", "", "", ""],
["", "Detailed Requests", "Jacob S.", "★", "=NOTES!E4", "", "", ""],
["", "Hardware Requests", "Jacob S.", "★", "=NOTES!E5", "", "", ""],
["", "Final Resource Plan", "Jacob S.", "★★", "=NOTES!E6", "", "", ""],
["", "Staffing", "Alex B.", "★★", "=NOTES!E7", "", "", ""],
["", "Technical Requests", "Frank C.", "★", "=NOTES!E8", "", "", ""],
["", "Testing", "Kennedy K.", "★", "=NOTES!E9", "", "", ""],
["", "Dev. Complete", "Jacob S.", "★★★", "=NOTES!E10", "", "", ""],
["","Hardware Configuration","Alex B.","★","=NOTES!E11","","",""],
["", "System Testing", "Kennedy K.", "★", "=NOTES!E12", "", "", ""],
["", "Launch", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""]
],
columns: [
{ "width": 24, "type": "text", "align": "left", "s": 21 },
{ "width": 167, "type": "text", "align": "left", "s": 21 },
{ "width": 205, "type": "text", "align": "left", "s": 21 },
{ "width": 81, "type": "text", "align": "left", "s": 21 },
{ "width": 134, "type": "text", "align": "left", "s": 21 },
{ "width": 102, "type": "text", "align": "left", "s": 21 },
{ "width": 61, "type": "text", "align": "left", "s": 21 },
{ "width": 105, "type": "text", "align": "left", "s": 21 }
],
rows: [
{ "height": 60 },
{ "height": 29 },
{ "height": 43 },
{ "height": 33 },
{ "height": 33 },
{ "height": 33 },
{ "height": 29 },
{ "height": 47 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 39 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 36 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 43 },
{ "height": 43 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 43 },
{ "height": 43 },
{ "height": 29 },
{ "height": 29 }
],
cells: {
"G3": { "format": "0.00%" },
"C4": { "format": "m/d/yy" },
"C6": { "format": "0%" },
"E6": { "format": "0.00%" },
"D26": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E26": { "format": "0%" },
"D27": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E27": { "format": "0%" },
"D28": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E28": { "format": "0%" },
"D29": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E29": { "format": "0%" },
"D30": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E30": { "format": "0%" },
"D31": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E31": { "format": "0%" },
"D32": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E32": { "format": "0%" },
"D33": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E33": { "format": "0%" },
"D34": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E34": { "format": "0%" },
"D35": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E35": { "format": "0%" },
"D36": {
"type": "dropdown",
"source": [
{ "id": "★", "name": "★" },
{ "id": "★★", "name": "★★" },
{ "id": "★★★", "name": "★★★" }
]
},
"E36": { "format": "0%" }
},
style: {
"A1": 3,
"B1": 12,
"C1:F1": 13,
"G1:H1": 0,
"A2": 3,
"B2:H2": 0,
"A3": 1,
"B3": 16,
"C3": 14,
"D3": 1,
"E3:G3": 18,
"H3": 1,
"A4": 1,
"B4": 17,
"C4": 15,
"D4": 1,
"E4": 19,
"F4:G4": 20,
"H4": 1,
"A5": 1,
"B5": 17,
"C5": 15,
"D5": 1,
"E5": 19,
"F5:G5": 20,
"H5": 1,
"A6": 1,
"B6": 17,
"C6": 15,
"D6": 1,
"E6": 21,
"F6:G6": 22,
"H6": 1,
"A7:H7": 1,
"A8:H8": 1,
"A9:H9": 1,
"A10:H10": 1,
"A11:H11": 1,
"A12:H12": 1,
"A13:H13": 1,
"A14:H14": 1,
"A15:H15": 1,
"A16:H16": 1,
"A17:H17": 1,
"A18:H18": 1,
"A19:H19": 1,
"A20:H20": 1,
"A21:H21": 1,
"A22:H22": 1,
"A23": 1,
"B23": 2,
"C23:H23": 1,
"A24": 1,
"B24": 2,
"C24:H24": 1,
"A25": 1,
"B25": 18,
"C25:E25": 23,
"F25:H25": 1,
"A26": 1,
"B26": 24,
"C26": 25,
"D26": 26,
"E26": 25,
"F26:H26": 1,
"A27": 1,
"B27": 24,
"C27": 25,
"D27": 26,
"E27": 25,
"F27:H27": 1,
"A28": 1,
"B28": 24,
"C28": 25,
"D28": 26,
"E28": 25,
"F28:H28": 1,
"A29": 1,
"B29": 24,
"C29": 25,
"D29": 26,
"E29": 25,
"F29:H29": 1,
"A30": 1,
"B30": 24,
"C30": 25,
"D30": 26,
"E30": 25,
"F30:H30": 1,
"A31": 1,
"B31": 24,
"C31": 25,
"D31": 26,
"E31": 25,
"F31:H31": 1,
"A32": 1,
"B32": 24,
"C32": 25,
"D32": 26,
"E32": 25,
"F32:H32": 1,
"A33": 1,
"B33": 24,
"C33": 25,
"D33": 26,
"E33": 25,
"F33": 8,
"G33:H33": 1,
"A34": 1,
"B34": 24,
"C34": 25,
"D34": 26,
"E34": 25,
"F34:H34": 1,
"A35": 1,
"B35": 24,
"C35": 25,
"D35": 26,
"E35": 25,
"F35:H35": 1,
"A36": 1,
"B36": 24,
"C36": 25,
"D36": 26,
"E36": 25,
"F36:H36": 1,
"A37": 1,
"B37": 9,
"C37:E37": 10,
"F37:H37": 1,
"A38:H38": 1
},
textOverflow: true,
defaultColAlign: "left",
worksheetName: "Project Management Dashboard",
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resize: "both",
minDimensions: [8, 38],
media: [
{
"id": "bed231e4-5a3b-4fa1-ad86-72c4a6e4dc2e",
"type": "chart",
"options": {
"orientation": 1,
"range": "Notes!A16:B20",
"headers": true,
"title": { "text": "Overall Task" },
"labels": 0,
"series": [
{
"color": "#E69F00",
}
],
"type": "doughnut",
"legend": {
"display": true,
"position": "right",
}
},
"cellAnchor": "D7",
"left": 17,
"top": 16,
"width": 360,
"height": 266,
"zIndex": 3,
},
{
"id": "b83e79f9-e076-4f61-8e54-e68a07188036",
"type": "chart",
"options": {
"orientation": 0,
"range": "Notes!A24:B25",
"headers": true,
"title": {
"text": "Budget",
},
"labels": 0,
"datasets": [2, 1],
"series": [
{ "color": "#E69F00" },
{ "color": "#56B4E9" },
{ "color": "#009E73" },
{ "color": "#F0E442" },
{ "color": "#0072B2" }
],
"type": "bar",
"legend": { "display": true, "position": "top" }
},
"cellAnchor": "B16",
"left": 2,
"top": 11,
"width": 748,
"height": 209,
"zIndex": 3,
},
{
"id": "a9013968-8bce-4ec4-8e4b-494d06b63dcb",
"type": "chart",
"options": {
"orientation": 0,
"range": "Notes!A29:B31",
"headers": true,
"title": {
"text": "Pending Items",
},
"labels": 0,
"series": [
{ "color": "#E69F00" },
{ "color": "#56B4E9" },
{ "color": "#009E73" },
{ "color": "#F0E442" },
{ "color": "#0072B2" }
],
"type": "column",
"legend": { "display": true, "position": "bottom" }
},
"cellAnchor": "B7",
"left": 2,
"top": 16,
"width": 376,
"height": 266,
"zIndex": 3,
}
],
freezeRowControl: true,
freezeColumnControl: true,
freezeRows: [0],
worksheetId: "18c0eea5-76b9-4774-93eb-c10413b683e8",
mergeCells: {
"B1": [5, 1],
"E3": [3, 1],
"F4": [2, 1],
"F5": [2, 1],
"F6": [2, 1]
}
},
{
data: [
["Tasks", "Assigned To", "Start", "End", "Status"],
["Set kick-off meeting","Alex B.","2022-09-02 00:00:00","2022-09-03 00:00:00","COMPLETE"],
["Agree on objectives","Frank C.","2022-09-03 00:00:00","2022-09-07 00:00:00","COMPLETE"],
["Detailed Reqs.","Jacob S.","2022-09-07 00:00:00","2022-09-12 00:00:00","COMPLETE"],
["Hardward Reqs.","Jacob S.","2022-09-09 00:00:00","2022-09-11 00:00:00","OVERDUE"],
["Final Resource Plan","Jacob S.","2022-09-11 00:00:00","2022-09-15 00:00:00","IN PROGRESS"],
["Staffing","Alex B.","2022-09-16 00:00:00","2022-09-17 00:00:00","IN PROGRESS"],
["Techincal Reqs.","Frank C.","2022-09-17 00:00:00","2022-09-21 00:00:00","COMPLETE"],
["Testing","Kennedy K.","2022-09-24 00:00:00","2022-10-02 00:00:00","OVERDUE"],
["Dev. Complete","Jacob S.","2022-10-02 00:00:00","2022-10-05 00:00:00","OVERDUE"],
["Hardware Config.","Alex B.","2022-10-05 00:00:00","2022-10-07 00:00:00","COMPLETE"],
["System Testing","Kennedy K.","2022-10-06 00:00:00","2022-10-09 00:00:00","NOT STARTED"],
["Launch", "", "", "", ""],
["", "", "", "", ""],
["", "", "", "", ""],
["Percentage of Tasks Complete", "", "", "", ""],
["Complete","=COUNTIF(E2:E12,\"COMPLETE\")/COUNTA(E2:E12)","","",""],
["Overdue", "=COUNTIF(E2:E12,\"OVERDUE\")/COUNTA(E2:E12)", "", "", ""],
["In progress","=COUNTIF(E2:E12,\"IN PROGRESS\")/COUNTA(E2:E12)","","",""],
["Not Started","=COUNTIF(E2:E12,\"NOT STARTED\")/COUNTA(E2:E12)","","",""],
["", "", "", "", ""],
["", "", "", "", ""],
["Budget", "", "", "", ""],
["Planned", 80000, "", "", ""],
["Actual", 50000, "", "", ""],
["", "", "", "", ""],
["", "", "", "", ""],
["Pending Items", "", "", "", ""],
["Decisions", 5, "", "", ""],
["Actions", 2, "", "", ""],
["Change Requests ", 4, "", "", ""]
],
columns: [
{ "width": 277, "type": "text", "align": "left", "s": 38 },
{ "width": 125, "type": "text", "align": "left", "s": 38 },
{ "width": 122, "type": "text", "align": "left", "s": 38 },
{ "width": 120, "type": "text", "align": "left", "s": 38 },
{
"width": 163,
"type": "dropdown",
"source": [
{ "id": "COMPLETE", "name": "COMPLETE" },
{ "id": "OVERDUE", "name": "OVERDUE" },
{ "id": "IN PROGRESS", "name": "IN PROGRESS" },
{ "id": "NOT STARTED", "name": "NOT STARTED" }
],
"align": "left",
"s": 38
}
],
cells: {
"C2": { "type": "calendar", "format": "DD/MM/YYYY" },
"D2": { "type": "calendar", "format": "DD/MM/YYYY" },
"C3": { "type": "calendar", "format": "DD/MM/YYYY" },
"D3": { "type": "calendar", "format": "DD/MM/YYYY" },
"C4": { "type": "calendar", "format": "DD/MM/YYYY" },
"D4": { "type": "calendar", "format": "DD/MM/YYYY" },
"C5": { "type": "calendar", "format": "DD/MM/YYYY" },
"D5": { "type": "calendar", "format": "DD/MM/YYYY" },
"C6": { "type": "calendar", "format": "DD/MM/YYYY" },
"D6": { "type": "calendar", "format": "DD/MM/YYYY" },
"C7": { "type": "calendar", "format": "DD/MM/YYYY" },
"D7": { "type": "calendar", "format": "DD/MM/YYYY" },
"C8": { "type": "calendar", "format": "DD/MM/YYYY" },
"D8": { "type": "calendar", "format": "DD/MM/YYYY" },
"C9": { "type": "calendar", "format": "DD/MM/YYYY" },
"D9": { "type": "calendar", "format": "DD/MM/YYYY" },
"C10": { "type": "calendar", "format": "DD/MM/YYYY" },
"D10": { "type": "calendar", "format": "DD/MM/YYYY" },
"C11": { "type": "calendar", "format": "DD/MM/YYYY" },
"D11": { "type": "calendar", "format": "DD/MM/YYYY" },
"C12": { "type": "calendar", "format": "DD/MM/YYYY" },
"D12": { "type": "calendar", "format": "DD/MM/YYYY" },
"C13": { "type": "calendar", "format": "DD/MM/YYYY" },
"D13": { "type": "calendar", "format": "DD/MM/YYYY" },
"E13": { "type": "text" },
"E14": { "type": "text" },
"E15": { "type": "text" },
"E16": { "type": "text" },
"B17": { "format": "0.00%" },
"E17": { "type": "text" },
"B18": { "format": "0.00%" },
"E18": { "type": "text" },
"B19": { "format": "0.00%" },
"E19": { "type": "text" },
"B20": { "format": "0.00%" },
"E20": { "type": "text" },
"E21": { "type": "text" },
"E22": { "type": "text" },
"E23": { "type": "text" },
"B24": { "format": "#,##0" },
"E24": { "type": "text" },
"B25": { "format": "#,##0" },
"E25": { "type": "text" },
"E26": { "type": "text" },
"E27": { "type": "text" },
"E28": { "type": "text" },
"E29": { "type": "text" },
"E30": { "type": "text" },
"E31": { "type": "text" }
},
style: {
"A1": 27,
"B1:E1": 28,
"F1": 4,
"A2": 29,
"B2:D2": 30,
"E2": 31,
"F2": 4,
"A3": 29,
"B3:D3": 30,
"E3": 31,
"F3": 4,
"A4": 29,
"B4:D4": 30,
"E4": 31,
"F4": 4,
"A5": 29,
"B5:D5": 30,
"E5": 31,
"F5": 4,
"A6": 29,
"B6:D6": 30,
"E6": 31,
"F6": 4,
"A7": 29,
"B7:D7": 30,
"E7": 31,
"F7": 4,
"A8": 29,
"B8:D8": 30,
"E8": 31,
"F8": 4,
"A9": 29,
"B9:D9": 30,
"E9": 31,
"F9": 4,
"A10": 29,
"B10:D10": 30,
"E10": 31,
"F10": 4,
"A11": 29,
"B11:D11": 30,
"E11": 31,
"F11": 4,
"A12": 29,
"B12:D12": 30,
"E12": 31,
"F12": 4,
"A13": 5,
"B13:D13": 6,
"E13": 11,
"F13": 4,
"A14:F14": 4,
"A15:F15": 4,
"A16": 27,
"B16": 28,
"C16": 4,
"D16:E16": 7,
"F16": 4,
"A17": 32,
"B17": 33,
"C17:F17": 4,
"A18": 32,
"B18": 33,
"C18:F18": 4,
"A19": 32,
"B19": 33,
"C19:F19": 4,
"A20": 32,
"B20": 33,
"C20:F20": 4,
"A21:F21": 4,
"A22:F22": 4,
"A23": 27,
"B23": 28,
"C23:F23": 4,
"A24": 34,
"B24": 35,
"C24:F24": 4,
"A25": 32,
"B25": 33,
"C25:F25": 4,
"A26:F26": 4,
"A27:F27": 4,
"A28": 27,
"B28": 28,
"C28:F28": 4,
"A29": 36,
"B29": 37,
"C29:F29": 4,
"A30": 36,
"B30": 37,
"C30:F30": 4,
"A31": 38,
"B31": 39,
"C31:F31": 4
},
textOverflow: true,
defaultColAlign: "left",
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resize: "both",
worksheetName: "Notes",
defaultColWidth: 79,
gridline: false,
minDimensions: [5, 31],
worksheetId: "d537423b-d382-4ff9-aafc-dbfa12a9dcd8",
mergeCells: { "A16": [2, 1], "A23": [2, 1], "A28": [2, 1] }
}
],
toolbar: true
});
}
}