KPI Dashboard
This example showcases a key performance indicator (KPI) dashboard built with a JavaScript spreadsheet UI. It includes embedded charts and progress bars for budget tracking and revenue insights, demonstrating how spreadsheet components can drive executive reporting tools.
<html>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/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/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/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/[email protected]/dist/chart.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/[email protected]/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('MzBmZTU2OTdjYWQyOGNlNTIyNWViMTA2MGZjODcwNmI5NDQ4NWJlZWRkYjBmZjk1NDBjY2U0OGE5Mzg1MDE2OTc1NWU3ZjgwMzNiYmJiMWZlZjU0M2VjZThlNzBmNTJmOTExMjE1OThhYjQ5MGQzZTBkY2RkNTlhZmFhZTg0MDMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOakF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
jspreadsheet.setExtensions({ formula, charts });
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
"style": [
"font-size: 29px;font-weight: bold;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"font-size: 16px;font-family: Arial;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;border-bottom: 2px dashed #70AD47;",
"font-size: 29px;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"background-color: #595959;font-size: 19px;font-family: Century Gothic;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: #595959;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #70AD47;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #009844;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #2E75B6;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #806000;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #595959;font-size: 16px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #92D050;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #79AE40;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #5B9BD5;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D6A000;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #E2F0D9;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D0E08D;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #DEEBF7;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FFF2CC;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #00B050;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #009844;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #385724;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #806000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #ED7D31;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #ED7D31;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #ED7D31;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 16px;font-family: Arial;color: #000000;text-align: center;",
"font-size: 16px;font-weight: bold;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;text-align: center;",
"",
"background-color:#d7ccc8",
"font-size:16px;font-family:Arial;color:#000000;background-color:#ff8a65",
"font-size:16px;font-family:Arial;color:#000000;background-color:#f57c00",
"font-size:16px;font-family:Arial;color:#000000;background-color:#ff9800",
"font-size:16px;font-family:Arial;color:#000000;background-color:#fb8c00",
"background-color:#70AD47;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid black;border-left:1px solid black",
"background-color:#2E75B6;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid black;border-left:1px solid black",
"background-color:#2E75B6;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid black;border-top:1px solid black;border-left:1px solid black",
"background-color:#92D050;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid black;border-left:1px solid black",
"background-color:#5B9BD5;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid black;border-left:1px solid black",
"background-color:#5B9BD5;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid black;border-top:1px solid black;border-left:1px solid black",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#00B050;text-align:center;vertical-align:middle;border-bottom:1px solid black;border-top:1px solid black;border-left:1px solid black",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#385724;text-align:center;vertical-align:middle;border-bottom:1px solid black;border-top:1px solid black;border-left:1px solid black",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#385724;text-align:center;vertical-align:middle;border-right:1px solid black;border-bottom:1px solid black;border-top:1px solid black;border-left:1px solid black",
"background-color:#70AD47;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#2E75B6;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#2E75B6;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#92D050;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#5B9BD5;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#5B9BD5;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#00B050;text-align:center;vertical-align:middle;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#385724;text-align:center;vertical-align:middle;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#385724;text-align:center;vertical-align:middle;border-right:1px solid #eeeeee;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee"
],
"worksheets": [
{
"data": [
["KPI DASHBOARD DATA", "", "", "", "", "", "", "", "", "", "", ""],
[
"Products",
"",
"Budget",
"",
"",
"Net Expenses",
"",
"Revenue",
"",
"",
"Profit Margins",
""
],
[
"N.º",
"NAME",
"TARGET",
"ACTUAL",
"REMAINING",
"EXTRA",
"TOTAL",
"TARGET",
"ACTUAL",
"REMAINING",
"GROSS",
"NET"
],
[
1,
"PRODUCT 1",
160344,
259757.28000000003,
"=(D4-C4)",
16007,
"=F4+E4",
500916,
1073357,
"=H4-I4",
"=(J4-E4)/J4",
"=(J4-H4)/J4"
],
[
2,
"PRODUCT 2",
200816,
311264.8,
"=(D5-C5)",
14816,
"=F5+E5",
215534,
878162,
"=H5-I5",
"=(J5-E5)/J5",
"=(J5-H5)/J5"
],
[
3,
"PRODUCT 3",
170989,
237674.71,
"=(D6-C6)",
17057,
"=F6+E6",
820719,
1193784,
"=H6-I6",
"=(J6-E6)/J6",
"=(J6-H6)/J6"
],
[
4,
"PRODUCT 4",
281053,
61831.66,
"=(D7-C7)",
17459,
"=F7+E7",
620242,
420345,
"=H7-I7",
"=(J7-E7)/J7",
"=(J7-H7)/J7"
],
[
5,
"PRODUCT 5",
262319,
459058.25,
"=(D8-C8)",
13985,
"=F8+E8",
821177,
1175811,
"=H8-I8",
"=(J8-E8)/J8",
"=(J8-H8)/J8"
],
[
6,
"PRODUCT 6",
206881,
157229.56,
"=(D9-C9)",
11183,
"=F9+E9",
901263,
1015766,
"=H9-I9",
"=(J9-E9)/J9",
"=(J9-H9)/J9"
],
[
7,
"PRODUCT 7",
130194,
213518.15999999997,
"=(D10-C10)",
17111,
"=F10+E10",
878528,
733751,
"=H10-I10",
"=(J10-E10)/J10",
"=(J10-H10)/J10"
],
[
8,
"PRODUCT 8",
208451,
214704.53,
"=(D11-C11)",
16494,
"=F11+E11",
838380,
955983,
"=H11-I11",
"=(J11-E11)/J11",
"=(J11-H11)/J11"
],
[
9,
"PRODUCT 9",
206422,
177522.91999999998,
"=(D12-C12)",
17311,
"=F12+E12",
1073157,
924095,
"=H12-I12",
"=(J12-E12)/J12",
"=(J12-H12)/J12"
],
[
10,
"PRODUCT 10",
251504,
2515.04,
"=(D13-C13)",
17315,
"=F13+E13",
941047,
1061074,
"=H13-I13",
"=(J13-E13)/J13",
"=(J13-H13)/J13"
],
[
"",
"",
"=SUM(C4:C13)",
"=SUM(D4:D13)",
"=SUM(E4:E13)",
"=SUM(F4:F13)",
"=SUM(G4:G13)",
"=SUM(H4:H13)",
"=SUM(I4:I13)",
"=SUM(J4:JK13)",
"=SUM(K4:K13)/10",
"=SUM(L4:L13)/10"
],
["", "", "", "", "", "", "", "", "", "", "", ""],
[
"",
"",
"",
"LIABILITIES / EQUITY RATIO",
"",
"",
"",
"Budget",
"",
"Revenue",
"",
""
],
[
"",
"",
"",
"CALENDAR",
"LIABILITIES",
"EQUITY",
"",
"TARGET",
"ACTUAL",
"TARGET",
"ACTUAL",
""
],
[
"",
"",
"",
2027,
3613439,
3293202,
"",
"=SUM(C4:C13)",
"=SUM(D4:D13)",
"=SUM(H4:H13)",
"=SUM(I4:I13)",
""
],
["", "", "", 2028, 3508776, 3441854, "", "", "", "", "", ""],
["", "", "", 2029, 3719457, 3531844, "", "", "", "", "", ""],
["", "", "", 2030, 3310212, 3354051, "", "", "", "", "", ""],
["", "", "", 2031, 3945202, 3476155, "", "", "", "", "", ""],
["", "", "", 2032, 3938152, 3538468, "", "", "", "", "", ""],
["", "", "", 2033, 3733706, 3727037, "", "", "", "", "", ""],
["", "", "", 2034, 3526698, 3425405, "", "", "", "", "", ""],
["", "", "", 2035, 3632971, 3734041, "", "", "", "", "", ""],
["", "", "", 2036, 3206487, 3677074, "", "", "", "", "", ""]
],
"columns": [
{ "width": 44, "type": "text", "align": "left" },
{ "width": 190, "type": "text", "align": "left" },
{ "width": 97, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" },
{ "width": 103, "type": "text", "align": "left" },
{ "width": 101, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" },
{ "width": 97, "type": "text", "align": "left" },
{ "width": 107, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" }
],
"rows": [
{ "height": 67 },
{ "height": 53 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 29 },
{ "height": 52 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 }
],
"cells": {
"C4": { "format": "$#,##0" },
"D4": { "format": "$#,##0" },
"E4": { "format": "$#,##0" },
"F4": { "format": "$#,##0" },
"G4": { "format": "$#,##0" },
"H4": { "format": "$#,##0" },
"I4": { "format": "$#,##0" },
"J4": { "format": "$#,##0" },
"K4": { "format": "0%" },
"L4": { "format": "0%" },
"C5": { "format": "$#,##0" },
"D5": { "format": "$#,##0" },
"E5": { "format": "$#,##0" },
"F5": { "format": "$#,##0" },
"G5": { "format": "$#,##0" },
"H5": { "format": "$#,##0" },
"I5": { "format": "$#,##0" },
"J5": { "format": "$#,##0" },
"K5": { "format": "0%" },
"L5": { "format": "0%" },
"C6": { "format": "$#,##0" },
"D6": { "format": "$#,##0" },
"E6": { "format": "$#,##0" },
"F6": { "format": "$#,##0" },
"G6": { "format": "$#,##0" },
"H6": { "format": "$#,##0" },
"I6": { "format": "$#,##0" },
"J6": { "format": "$#,##0" },
"K6": { "format": "0%" },
"L6": { "format": "0%" },
"C7": { "format": "$#,##0" },
"D7": { "format": "$#,##0" },
"E7": { "format": "$#,##0" },
"F7": { "format": "$#,##0" },
"G7": { "format": "$#,##0" },
"H7": { "format": "$#,##0" },
"I7": { "format": "$#,##0" },
"J7": { "format": "$#,##0" },
"K7": { "format": "0%" },
"L7": { "format": "0%" },
"C8": { "format": "$#,##0" },
"D8": { "format": "$#,##0" },
"E8": { "format": "$#,##0" },
"F8": { "format": "$#,##0" },
"G8": { "format": "$#,##0" },
"H8": { "format": "$#,##0" },
"I8": { "format": "$#,##0" },
"J8": { "format": "$#,##0" },
"K8": { "format": "0%" },
"L8": { "format": "0%" },
"C9": { "format": "$#,##0" },
"D9": { "format": "$#,##0" },
"E9": { "format": "$#,##0" },
"F9": { "format": "$#,##0" },
"G9": { "format": "$#,##0" },
"H9": { "format": "$#,##0" },
"I9": { "format": "$#,##0" },
"J9": { "format": "$#,##0" },
"K9": { "format": "0%" },
"L9": { "format": "0%" },
"C10": { "format": "$#,##0" },
"D10": { "format": "$#,##0" },
"E10": { "format": "$#,##0" },
"F10": { "format": "$#,##0" },
"G10": { "format": "$#,##0" },
"H10": { "format": "$#,##0" },
"I10": { "format": "$#,##0" },
"J10": { "format": "$#,##0" },
"K10": { "format": "0%" },
"L10": { "format": "0%" },
"C11": { "format": "$#,##0" },
"D11": { "format": "$#,##0" },
"E11": { "format": "$#,##0" },
"F11": { "format": "$#,##0" },
"G11": { "format": "$#,##0" },
"H11": { "format": "$#,##0" },
"I11": { "format": "$#,##0" },
"J11": { "format": "$#,##0" },
"K11": { "format": "0%" },
"L11": { "format": "0%" },
"C12": { "format": "$#,##0" },
"D12": { "format": "$#,##0" },
"E12": { "format": "$#,##0" },
"F12": { "format": "$#,##0" },
"G12": { "format": "$#,##0" },
"H12": { "format": "$#,##0" },
"I12": { "format": "$#,##0" },
"J12": { "format": "$#,##0" },
"K12": { "format": "0%" },
"L12": { "format": "0%" },
"C13": { "format": "$#,##0" },
"D13": { "format": "$#,##0" },
"E13": { "format": "$#,##0" },
"F13": { "format": "$#,##0" },
"G13": { "format": "$#,##0" },
"H13": { "format": "$#,##0" },
"I13": { "format": "$#,##0" },
"J13": { "format": "$#,##0" },
"K13": { "format": "0%" },
"L13": { "format": "0%" },
"C14": { "format": "$#,##0" },
"D14": { "format": "$#,##0" },
"E14": { "format": "$#,##0" },
"F14": { "format": "$#,##0" },
"G14": { "format": "$#,##0" },
"H14": { "format": "$#,##0" },
"I14": { "format": "$#,##0" },
"J14": { "format": "$#,##0" },
"K14": { "format": "0%" },
"L14": { "format": "0%" },
"D18": { "format": "0" },
"E18": { "format": "0" },
"F18": { "format": "$#,##0" },
"H18": { "format": "$#,##0" },
"I18": { "format": "$#,##0" },
"J18": { "format": "$#,##0" },
"K18": { "format": "$#,##0" },
"D19": { "format": "0" },
"E19": { "format": "0" },
"F19": { "format": "$#,##0" },
"D20": { "format": "0" },
"E20": { "format": "0" },
"F20": { "format": "$#,##0" },
"D21": { "format": "0" },
"E21": { "format": "0" },
"F21": { "format": "$#,##0" },
"D22": { "format": "0" },
"E22": { "format": "0" },
"F22": { "format": "$#,##0" },
"D23": { "format": "0" },
"E23": { "format": "0" },
"F23": { "format": "$#,##0" },
"D24": { "format": "0" },
"E24": { "format": "0" },
"F24": { "format": "$#,##0" },
"D25": { "format": "0" },
"E25": { "format": "0" },
"F25": { "format": "$#,##0" },
"D26": { "format": "0" },
"E26": { "format": "0" },
"F26": { "format": "$#,##0" },
"D27": { "format": "0" },
"E27": { "format": "0" },
"F27": { "format": "$#,##0" }
},
"style": {
"A1": 3,
"B1": 3,
"C1": 3,
"D1": 3,
"E1": 3,
"F1": 3,
"G1": 3,
"H1": 3,
"I1": 3,
"J1": 3,
"K1": 1,
"L1": 1,
"A2": 4,
"B2": 5,
"C2": 6,
"D2": 6,
"E2": 6,
"F2": 7,
"G2": 7,
"H2": 8,
"I2": 8,
"J2": 8,
"K2": 9,
"L2": 9,
"A3": 10,
"B3": 11,
"C3": 12,
"D3": 12,
"E3": 12,
"F3": 13,
"G3": 13,
"H3": 14,
"I3": 14,
"J3": 14,
"K3": 15,
"L3": 15,
"A4": 16,
"B4": 17,
"C4": 18,
"D4": 18,
"E4": 18,
"F4": 18,
"G4": 18,
"H4": 18,
"I4": 18,
"J4": 18,
"K4": 18,
"L4": 18,
"A5": 16,
"B5": 17,
"C5": 19,
"D5": 19,
"E5": 19,
"F5": 20,
"G5": 20,
"H5": 21,
"I5": 21,
"J5": 21,
"K5": 22,
"L5": 22,
"A6": 16,
"B6": 17,
"C6": 18,
"D6": 18,
"E6": 18,
"F6": 18,
"G6": 18,
"H6": 18,
"I6": 18,
"J6": 18,
"K6": 18,
"L6": 18,
"A7": 16,
"B7": 17,
"C7": 19,
"D7": 19,
"E7": 19,
"F7": 20,
"G7": 20,
"H7": 21,
"I7": 21,
"J7": 21,
"K7": 22,
"L7": 22,
"A8": 16,
"B8": 17,
"C8": 18,
"D8": 18,
"E8": 18,
"F8": 18,
"G8": 18,
"H8": 18,
"I8": 18,
"J8": 18,
"K8": 18,
"L8": 18,
"A9": 16,
"B9": 17,
"C9": 19,
"D9": 19,
"E9": 19,
"F9": 20,
"G9": 20,
"H9": 21,
"I9": 21,
"J9": 21,
"K9": 22,
"L9": 22,
"A10": 16,
"B10": 17,
"C10": 18,
"D10": 18,
"E10": 18,
"F10": 18,
"G10": 18,
"H10": 18,
"I10": 18,
"J10": 18,
"K10": 18,
"L10": 18,
"A11": 16,
"B11": 17,
"C11": 19,
"D11": 19,
"E11": 19,
"F11": 20,
"G11": 20,
"H11": 21,
"I11": 21,
"J11": 21,
"K11": 22,
"L11": 22,
"A12": 16,
"B12": 17,
"C12": 18,
"D12": 18,
"E12": 18,
"F12": 18,
"G12": 18,
"H12": 18,
"I12": 18,
"J12": 18,
"K12": 18,
"L12": 18,
"A13": 16,
"B13": 17,
"C13": 19,
"D13": 19,
"E13": 19,
"F13": 20,
"G13": 20,
"H13": 21,
"I13": 21,
"J13": 21,
"K13": 22,
"L13": 22,
"A14": 23,
"B14": 24,
"C14": 25,
"D14": 25,
"E14": 25,
"F14": 26,
"G14": 26,
"H14": 27,
"I14": 27,
"J14": 27,
"K14": 28,
"L14": 28,
"C15": 1,
"D15": 1,
"E15": 1,
"F15": 1,
"G15": 1,
"H15": 1,
"I15": 1,
"J15": 1,
"K15": 1,
"L15": 1,
"C16": 1,
"D16": 46,
"E16": 46,
"F16": 46,
"G16": 1,
"H16": 56,
"I16": 56,
"J16": 57,
"K16": 58,
"L16": 1,
"C17": 1,
"D17": 32,
"E17": 32,
"F17": 33,
"G17": 1,
"H17": 59,
"I17": 59,
"J17": 60,
"K17": 61,
"L17": 1,
"C18": 1,
"D18": 34,
"E18": 34,
"F18": 18,
"G18": 1,
"H18": 62,
"I18": 62,
"J18": 63,
"K18": 64,
"L18": 1,
"C19": 1,
"D19": 35,
"E19": 35,
"F19": 36,
"G19": 1,
"H19": 37,
"I19": 37,
"J19": 1,
"K19": 1,
"L19": 1,
"C20": 1,
"D20": 34,
"E20": 34,
"F20": 18,
"G20": 1,
"H20": 37,
"I20": 37,
"J20": 38,
"C21": 1,
"D21": 35,
"E21": 35,
"F21": 36,
"G21": 1,
"H21": 37,
"I21": 37,
"J21": 38,
"M21": 39,
"D22": 34,
"E22": 34,
"F22": 18,
"H22": 40,
"I22": 40,
"J22": 38,
"D23": 35,
"E23": 35,
"F23": 36,
"H23": 37,
"I23": 40,
"J23": 38,
"D24": 34,
"E24": 34,
"F24": 18,
"H24": 40,
"I24": 40,
"J24": 38,
"D25": 35,
"E25": 35,
"F25": 36,
"J25": 38,
"D26": 34,
"E26": 34,
"F26": 18,
"J26": 38,
"D27": 35,
"E27": 35,
"F27": 36,
"J27": 38
},
"textOverflow": true,
"stripHTML": false,
"defaultColAlign": "left",
"worksheetName": "KPI Data",
"defaultColWidth": 79,
"gridline": false,
"tableOverflow": true,
"tableWidth": 1300,
"tableHeight": 620,
"resize": "both",
"minDimensions": [12, 27],
"mergeCells": {
"A1": [10, 1],
"A2": [2, 1],
"C2": [3, 1],
"F2": [2, 1],
"H2": [3, 1],
"K2": [2, 1],
"D16": [3, 1]
},
"worksheetId": "50f4c91c-5e48-493b-8abe-08096772c049",
"meta": {},
"comments": {},
"cache": {},
"media": []
},
{
"data": [
[
"",
"KPI DASHBOARD",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
[null, "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
],
"columns": [
{ "width": 24, "type": "text", "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "type": "text", "width": 15, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 38, "align": "left" }
],
"rows": [
{ "height": 77 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 118, "id": null },
{ "height": 71, "id": null },
{ "height": 58, "id": null },
{ "height": 51, "id": null },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 36 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 29 },
{ "height": 190 },
{ "height": 147 },
{ "height": 127 },
{ "height": 118 },
{ "height": 30 }
],
"cells": {},
"style": {
"B1": 0,
"C1": 0,
"D1": 0,
"E1": 0,
"F1": 0,
"G1": 0,
"H1": 0,
"I1": 0,
"J1": 0,
"K1": 1,
"L1": 1,
"M1": 1,
"A31": 41,
"B31": 39,
"C31": 39,
"D31": 39,
"E31": 39,
"F31": 39,
"G31": 39,
"H31": 39,
"I31": 39,
"J31": 39,
"K31": 39,
"L31": 39,
"M31": 39,
"N31": 39,
"O31": 39,
"P31": 39,
"Q31": 39
},
"textOverflow": true,
"stripHTML": false,
"defaultColAlign": "left",
"worksheetName": "KPI Dashboard",
"defaultColWidth": 79,
"gridline": false,
"tableOverflow": true,
"tableWidth": 1300,
"tableHeight": 620,
"resize": "both",
"minDimensions": [17, 42],
"mergeCells": {
"B1": [9, 1],
"B17": [7, 4],
"J17": [7, 4],
"B38": [15, 4]
},
"media": [
{
"id": "19bb08c4-6a32-441b-90e5-9db66be86313",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!C3:E13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "BUDGET",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{ "color": "#92D050", "xAxis": "top" },
{ "color": "#00B050", "xAxis": "top" }
],
"axis": {
"base": {
"reverse": false,
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "display": false }
},
"side2": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 15, "color": "#000000" },
"max": 500000,
"forceTheLimits": true
}
}
},
"cellAnchor": "B2",
"left": 0,
"top": 0,
"width": 434,
"height": 408,
"zIndex": 3,
"rotate": 0
},
{
"id": "afed067c-148d-42e1-aff6-49c328d7a22c",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!H3:J13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "REVENUE",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{ "color": "#B4C7E7", "xAxis": "top" },
{ "color": "#2E75B6", "xAxis": "top" }
],
"axis": {
"base": {
"reverse": false,
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "display": false }
},
"side2": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 15, "color": "#000000" },
"min": 0,
"max": 1250000,
"forceTheLimits": true
}
}
},
"cellAnchor": "J2",
"left": 0,
"top": 0,
"width": 421,
"height": 408,
"zIndex": 3,
"rotate": 0
},
{
"type": "chart",
"width": 434,
"height": 300,
"options": {
"type": "bar",
"range": "'KPI DATA'!H17:I18",
"title": { "text": "TOTAL BUDGET", "position": "top" },
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#B4C7E7", "xAxis": "top" },
{ "color": "#2E75B6", "xAxis": "top" }
]
},
"id": "717cc7d8-abbe-4842-b394-b64ad59ed550",
"top": 0,
"left": 0,
"cellAnchor": "B17",
"zIndex": 4,
"rotate": 0
},
{
"type": "chart",
"width": 420,
"height": 300,
"options": {
"type": "bar",
"range": "'KPI DATA'!J17:K18",
"title": { "text": "TOTAL REVENUE", "position": "top" },
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#92D050", "xAxis": "top" },
{ "color": "#00B050", "xAxis": "top" }
]
},
"id": "fd82c8d4-0409-4eab-8033-e09f7bc9d8cd",
"top": 0,
"left": 0,
"cellAnchor": "J17",
"zIndex": 4,
"rotate": 0
},
{
"id": "df9ad462-1f05-46af-8b3f-d3d2a11e1212",
"type": "chart",
"options": {
"type": "line",
"range": "'KPI DATA'!K3:L13",
"labels": 0,
"title": {
"text": "PROFIT MARGINS",
"position": "top",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{
"drawNullValues": false,
"borderColor": "#4472C4",
"line": { "width": 1 },
"color": "#00B0F0",
"point": { "style": "circle", "radius": 7 }
},
{
"drawNullValues": false,
"borderColor": "#FFC000",
"line": { "width": 1 },
"color": "#ED7D31",
"point": { "style": "circle", "radius": 5.5 }
}
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "display": false }
},
"side": {
"grid": { "width": 1 },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 16, "color": "#000000" },
"forceTheLimits": true
}
}
},
"cellAnchor": "B22",
"left": 0,
"top": 0,
"width": 873,
"height": 444,
"zIndex": 3,
"rotate": 0
},
{
"type": "chart",
"width": 870,
"height": 584,
"options": {
"type": "column",
"range": "'KPI DATA'!D17:F27",
"labels": 0,
"datasets": [1, 2],
"title": {
"text": "LIABILITIES vs EQUITY per Year",
"position": "top"
},
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#ED7D31", "xAxis": "bottom" },
{ "color": "#00B050", "xAxis": "bottom" }
]
},
"id": "a1699cf7-e71c-45d5-91a2-4a47c195bb33",
"top": 0,
"left": 0,
"cellAnchor": "B38",
"zIndex": 4,
"rotate": 0
}
],
"freezeRowControl": true,
"freezeColumnControl": true,
"freezeRows": [0],
"worksheetId": "cb45f57c-907c-4070-8cc5-b7b0df77babe",
"meta": {},
"comments": {},
"cache": {}
}
],
"plugins": {},
"validations": [],
"definedNames": {},
"bar": true,
"toolbar": true,
onload: function(instance) {
instance.openWorksheet(1);
}
});
</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';
// Set your JSS license key (The following key only works for one day)
const license = 'MzBmZTU2OTdjYWQyOGNlNTIyNWViMTA2MGZjODcwNmI5NDQ4NWJlZWRkYjBmZjk1NDBjY2U0OGE5Mzg1MDE2OTc1NWU3ZjgwMzNiYmJiMWZlZjU0M2VjZThlNzBmNTJmOTExMjE1OThhYjQ5MGQzZTBkY2RkNTlhZmFhZTg0MDMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOakF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';
export default function App() {
const spreadsheetRef = useRef(null);
useEffect(() => {
jspreadsheet.setLicense(license);
jspreadsheet.setExtensions({ formula, charts });
const instance = jspreadsheet(spreadsheetRef.current, {
"style": [
"font-size: 29px;font-weight: bold;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"font-size: 16px;font-family: Arial;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;border-bottom: 2px dashed #70AD47;",
"font-size: 29px;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"background-color: #595959;font-size: 19px;font-family: Century Gothic;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: #595959;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #70AD47;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #009844;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #2E75B6;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #806000;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #595959;font-size: 16px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #92D050;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #79AE40;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #5B9BD5;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D6A000;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #E2F0D9;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D0E08D;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #DEEBF7;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FFF2CC;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #00B050;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #009844;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #385724;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #806000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #ED7D31;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #ED7D31;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #ED7D31;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 16px;font-family: Arial;color: #000000;text-align: center;",
"font-size: 16px;font-weight: bold;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;text-align: center;",
"",
"background-color:#d7ccc8",
"font-size:16px;font-family:Arial;color:#000000;background-color:#ff8a65",
"font-size:16px;font-family:Arial;color:#000000;background-color:#f57c00",
"font-size:16px;font-family:Arial;color:#000000;background-color:#ff9800",
"font-size:16px;font-family:Arial;color:#000000;background-color:#fb8c00"
],
"worksheets": [
{
"data": [
["KPI DASHBOARD DATA", "", "", "", "", "", "", "", "", "", "", ""],
[
"Products",
"",
"Budget",
"",
"",
"Net Expenses",
"",
"Revenue",
"",
"",
"Profit Margins",
""
],
[
"N.º",
"NAME",
"TARGET",
"ACTUAL",
"REMAINING",
"EXTRA",
"TOTAL",
"TARGET",
"ACTUAL",
"REMAINING",
"GROSS",
"NET"
],
[
1,
"PRODUCT 1",
160344,
259757.28000000003,
"=(D4-E4)",
16007,
"=G4+E4",
1100916,
1073357,
"=J4-I4",
"=(J4-E4)/J4",
"=(J4-H4)/J4"
],
[
2,
"PRODUCT 2",
200816,
311264.8,
"=(D5-E5)",
14816,
"=G5+E5",
215534,
878162,
"=J5-I5",
"=(J5-E5)/J5",
"=(J5-H5)/J5"
],
[
3,
"PRODUCT 3",
170989,
237674.71,
"=(D6-E6)",
17057,
"=G6+E6",
820719,
1193784,
"=J6-I6",
"=(J6-E6)/J6",
"=(J6-H6)/J6"
],
[
4,
"PRODUCT 4",
281053,
61831.66,
"=(D7-E7)",
17459,
"=G7+E7",
620242,
420345,
"=J7-I7",
"=(J7-E7)/J7",
"=(J7-H7)/J7"
],
[
5,
"PRODUCT 5",
262319,
459058.25,
"=(D8-E8)",
13985,
"=G8+E8",
821177,
1175811,
"=J8-I8",
"=(J8-E8)/J8",
"=(J8-H8)/J8"
],
[
6,
"PRODUCT 6",
206881,
157229.56,
"=(D9-E9)",
11183,
"=G9+E9",
901263,
1015766,
"=J9-I9",
"=(J9-E9)/J9",
"=(J9-H9)/J9"
],
[
7,
"PRODUCT 7",
130194,
213518.15999999997,
"=(D10-E10)",
17111,
"=G10+E10",
878528,
733751,
"=J10-I10",
"=(J10-E10)/J10",
"=(J10-H10)/J10"
],
[
8,
"PRODUCT 8",
208451,
214704.53,
"=(D11-E11)",
16494,
"=G11+E11",
838380,
955983,
"=J11-I11",
"=(J11-E11)/J11",
"=(J11-H11)/J11"
],
[
9,
"PRODUCT 9",
206422,
177522.91999999998,
"=(D12-E12)",
17311,
"=G12+E12",
1073157,
924095,
"=J12-I12",
"=(J12-E12)/J12",
"=(J12-H12)/J12"
],
[
10,
"PRODUCT 10",
251504,
2515.04,
"=(D13-E13)",
17315,
"=G13+E13",
1141047,
1061074,
"=J13-I13",
"=(J13-E13)/J13",
"=(J13-H13)/J13"
],
[
"",
"",
"=SUM(C4:C13)",
"=SUM(D4:D13)",
"=SUM(E4:E13)",
"=SUM(F4:F13)",
"=SUM(G4:G13)",
"=SUM(H4:H13)",
"=SUM(I4:I13)",
"=SUM(J4:JK13)",
"=SUM(K4:K13)/10",
"=SUM(L4:L13)/10"
],
["", "", "", "", "", "", "", "", "", "", "", ""],
[
"",
"",
"",
"LIABILITIES / EQUITY RATIO",
"",
"",
"",
"",
"",
"",
"",
""
],
[
"",
"",
"",
"CALENDAR",
"LIABILITIES",
"EQUITY",
"",
"",
"",
"",
"",
""
],
["", "", "", 2027, 3613439, 3293202, "", "", "", "", "", ""],
["", "", "", 2028, 3508776, 3441854, "", "", "", "", "", ""],
["", "", "", 2029, 3719457, 3531844, "", "", "", "", "", ""],
["", "", "", 2030, 3310212, 3354051, "", "", "", "", "", ""],
["", "", "", 2031, 3945202, 3476155, "", "", "", "", "", ""],
["", "", "", 2032, 3938152, 3538468, "", "", "", "", "", ""],
["", "", "", 2033, 3733706, 3727037, "", "", "", "", "", ""],
["", "", "", 2034, 3526698, 3425405, "", "", "", "", "", ""],
["", "", "", 2035, 3632971, 3734041, "", "", "", "", "", ""],
["", "", "", 2036, 3206487, 3677074, "", "", "", "", "", ""]
],
"columns": [
{ "width": 44, "type": "text", "align": "left" },
{ "width": 190, "type": "text", "align": "left" },
{ "width": 97, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" },
{ "width": 103, "type": "text", "align": "left" },
{ "width": 101, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" },
{ "width": 97, "type": "text", "align": "left" },
{ "width": 107, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" }
],
"rows": [
{ "height": 67 },
{ "height": 53 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 29 },
{ "height": 52 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 }
],
"cells": {
"C4": { "format": "$#,##0" },
"D4": { "format": "$#,##0" },
"E4": { "format": "$#,##0" },
"F4": { "format": "$#,##0" },
"G4": { "format": "$#,##0" },
"H4": { "format": "$#,##0" },
"I4": { "format": "$#,##0" },
"J4": { "format": "$#,##0" },
"K4": { "format": "0%" },
"L4": { "format": "0%" },
"C5": { "format": "$#,##0" },
"D5": { "format": "$#,##0" },
"E5": { "format": "$#,##0" },
"F5": { "format": "$#,##0" },
"G5": { "format": "$#,##0" },
"H5": { "format": "$#,##0" },
"I5": { "format": "$#,##0" },
"J5": { "format": "$#,##0" },
"K5": { "format": "0%" },
"L5": { "format": "0%" },
"C6": { "format": "$#,##0" },
"D6": { "format": "$#,##0" },
"E6": { "format": "$#,##0" },
"F6": { "format": "$#,##0" },
"G6": { "format": "$#,##0" },
"H6": { "format": "$#,##0" },
"I6": { "format": "$#,##0" },
"J6": { "format": "$#,##0" },
"K6": { "format": "0%" },
"L6": { "format": "0%" },
"C7": { "format": "$#,##0" },
"D7": { "format": "$#,##0" },
"E7": { "format": "$#,##0" },
"F7": { "format": "$#,##0" },
"G7": { "format": "$#,##0" },
"H7": { "format": "$#,##0" },
"I7": { "format": "$#,##0" },
"J7": { "format": "$#,##0" },
"K7": { "format": "0%" },
"L7": { "format": "0%" },
"C8": { "format": "$#,##0" },
"D8": { "format": "$#,##0" },
"E8": { "format": "$#,##0" },
"F8": { "format": "$#,##0" },
"G8": { "format": "$#,##0" },
"H8": { "format": "$#,##0" },
"I8": { "format": "$#,##0" },
"J8": { "format": "$#,##0" },
"K8": { "format": "0%" },
"L8": { "format": "0%" },
"C9": { "format": "$#,##0" },
"D9": { "format": "$#,##0" },
"E9": { "format": "$#,##0" },
"F9": { "format": "$#,##0" },
"G9": { "format": "$#,##0" },
"H9": { "format": "$#,##0" },
"I9": { "format": "$#,##0" },
"J9": { "format": "$#,##0" },
"K9": { "format": "0%" },
"L9": { "format": "0%" },
"C10": { "format": "$#,##0" },
"D10": { "format": "$#,##0" },
"E10": { "format": "$#,##0" },
"F10": { "format": "$#,##0" },
"G10": { "format": "$#,##0" },
"H10": { "format": "$#,##0" },
"I10": { "format": "$#,##0" },
"J10": { "format": "$#,##0" },
"K10": { "format": "0%" },
"L10": { "format": "0%" },
"C11": { "format": "$#,##0" },
"D11": { "format": "$#,##0" },
"E11": { "format": "$#,##0" },
"F11": { "format": "$#,##0" },
"G11": { "format": "$#,##0" },
"H11": { "format": "$#,##0" },
"I11": { "format": "$#,##0" },
"J11": { "format": "$#,##0" },
"K11": { "format": "0%" },
"L11": { "format": "0%" },
"C12": { "format": "$#,##0" },
"D12": { "format": "$#,##0" },
"E12": { "format": "$#,##0" },
"F12": { "format": "$#,##0" },
"G12": { "format": "$#,##0" },
"H12": { "format": "$#,##0" },
"I12": { "format": "$#,##0" },
"J12": { "format": "$#,##0" },
"K12": { "format": "0%" },
"L12": { "format": "0%" },
"C13": { "format": "$#,##0" },
"D13": { "format": "$#,##0" },
"E13": { "format": "$#,##0" },
"F13": { "format": "$#,##0" },
"G13": { "format": "$#,##0" },
"H13": { "format": "$#,##0" },
"I13": { "format": "$#,##0" },
"J13": { "format": "$#,##0" },
"K13": { "format": "0%" },
"L13": { "format": "0%" },
"C14": { "format": "$#,##0" },
"D14": { "format": "$#,##0" },
"E14": { "format": "$#,##0" },
"F14": { "format": "$#,##0" },
"G14": { "format": "$#,##0" },
"H14": { "format": "$#,##0" },
"I14": { "format": "$#,##0" },
"J14": { "format": "$#,##0" },
"K14": { "format": "0%" },
"L14": { "format": "0%" },
"D18": { "format": "0" },
"E18": { "format": "0" },
"F18": { "format": "$#,##0" },
"D19": { "format": "0" },
"E19": { "format": "0" },
"F19": { "format": "$#,##0" },
"D20": { "format": "0" },
"E20": { "format": "0" },
"F20": { "format": "$#,##0" },
"D21": { "format": "0" },
"E21": { "format": "0" },
"F21": { "format": "$#,##0" },
"D22": { "format": "0" },
"E22": { "format": "0" },
"F22": { "format": "$#,##0" },
"D23": { "format": "0" },
"E23": { "format": "0" },
"F23": { "format": "$#,##0" },
"D24": { "format": "0" },
"E24": { "format": "0" },
"F24": { "format": "$#,##0" },
"D25": { "format": "0" },
"E25": { "format": "0" },
"F25": { "format": "$#,##0" },
"D26": { "format": "0" },
"E26": { "format": "0" },
"F26": { "format": "$#,##0" },
"D27": { "format": "0" },
"E27": { "format": "0" },
"F27": { "format": "$#,##0" }
},
"style": {
"A1": 3,
"B1": 3,
"C1": 3,
"D1": 3,
"E1": 3,
"F1": 3,
"G1": 3,
"H1": 3,
"I1": 3,
"J1": 3,
"K1": 1,
"L1": 1,
"A2": 4,
"B2": 5,
"C2": 6,
"D2": 6,
"E2": 6,
"F2": 7,
"G2": 7,
"H2": 8,
"I2": 8,
"J2": 8,
"K2": 9,
"L2": 9,
"A3": 10,
"B3": 11,
"C3": 12,
"D3": 12,
"E3": 12,
"F3": 13,
"G3": 13,
"H3": 14,
"I3": 14,
"J3": 14,
"K3": 15,
"L3": 15,
"A4": 16,
"B4": 17,
"C4": 18,
"D4": 18,
"E4": 18,
"F4": 18,
"G4": 18,
"H4": 18,
"I4": 18,
"J4": 18,
"K4": 18,
"L4": 18,
"A5": 16,
"B5": 17,
"C5": 19,
"D5": 19,
"E5": 19,
"F5": 20,
"G5": 20,
"H5": 21,
"I5": 21,
"J5": 21,
"K5": 22,
"L5": 22,
"A6": 16,
"B6": 17,
"C6": 18,
"D6": 18,
"E6": 18,
"F6": 18,
"G6": 18,
"H6": 18,
"I6": 18,
"J6": 18,
"K6": 18,
"L6": 18,
"A7": 16,
"B7": 17,
"C7": 19,
"D7": 19,
"E7": 19,
"F7": 20,
"G7": 20,
"H7": 21,
"I7": 21,
"J7": 21,
"K7": 22,
"L7": 22,
"A8": 16,
"B8": 17,
"C8": 18,
"D8": 18,
"E8": 18,
"F8": 18,
"G8": 18,
"H8": 18,
"I8": 18,
"J8": 18,
"K8": 18,
"L8": 18,
"A9": 16,
"B9": 17,
"C9": 19,
"D9": 19,
"E9": 19,
"F9": 20,
"G9": 20,
"H9": 21,
"I9": 21,
"J9": 21,
"K9": 22,
"L9": 22,
"A10": 16,
"B10": 17,
"C10": 18,
"D10": 18,
"E10": 18,
"F10": 18,
"G10": 18,
"H10": 18,
"I10": 18,
"J10": 18,
"K10": 18,
"L10": 18,
"A11": 16,
"B11": 17,
"C11": 19,
"D11": 19,
"E11": 19,
"F11": 20,
"G11": 20,
"H11": 21,
"I11": 21,
"J11": 21,
"K11": 22,
"L11": 22,
"A12": 16,
"B12": 17,
"C12": 18,
"D12": 18,
"E12": 18,
"F12": 18,
"G12": 18,
"H12": 18,
"I12": 18,
"J12": 18,
"K12": 18,
"L12": 18,
"A13": 16,
"B13": 17,
"C13": 19,
"D13": 19,
"E13": 19,
"F13": 20,
"G13": 20,
"H13": 21,
"I13": 21,
"J13": 21,
"K13": 22,
"L13": 22,
"A14": 23,
"B14": 24,
"C14": 25,
"D14": 25,
"E14": 25,
"F14": 26,
"G14": 26,
"H14": 27,
"I14": 27,
"J14": 27,
"K14": 28,
"L14": 28,
"C15": 1,
"D15": 1,
"E15": 1,
"F15": 1,
"G15": 1,
"H15": 1,
"I15": 1,
"J15": 1,
"K15": 1,
"L15": 1,
"C16": 1,
"D16": 46,
"E16": 46,
"F16": 46,
"G16": 1,
"H16": 1,
"I16": 1,
"J16": 1,
"K16": 1,
"L16": 1,
"C17": 1,
"D17": 32,
"E17": 32,
"F17": 33,
"G17": 1,
"H17": 1,
"I17": 1,
"J17": 1,
"K17": 1,
"L17": 1,
"C18": 1,
"D18": 34,
"E18": 34,
"F18": 18,
"G18": 1,
"H18": 1,
"I18": 1,
"J18": 1,
"K18": 1,
"L18": 1,
"C19": 1,
"D19": 35,
"E19": 35,
"F19": 36,
"G19": 1,
"H19": 37,
"I19": 37,
"J19": 1,
"K19": 1,
"L19": 1,
"C20": 1,
"D20": 34,
"E20": 34,
"F20": 18,
"G20": 1,
"H20": 37,
"I20": 37,
"J20": 38,
"C21": 1,
"D21": 35,
"E21": 35,
"F21": 36,
"G21": 1,
"H21": 37,
"I21": 37,
"J21": 38,
"M21": 39,
"D22": 34,
"E22": 34,
"F22": 18,
"H22": 40,
"I22": 40,
"J22": 38,
"D23": 35,
"E23": 35,
"F23": 36,
"H23": 37,
"I23": 40,
"J23": 38,
"D24": 34,
"E24": 34,
"F24": 18,
"H24": 40,
"I24": 40,
"J24": 38,
"D25": 35,
"E25": 35,
"F25": 36,
"J25": 38,
"D26": 34,
"E26": 34,
"F26": 18,
"J26": 38,
"D27": 35,
"E27": 35,
"F27": 36,
"J27": 38
},
"textOverflow": true,
"stripHTML": false,
"defaultColAlign": "left",
"worksheetName": "KPI Data",
"defaultColWidth": 79,
"gridline": false,
"tableOverflow": true,
"tableWidth": 1300,
"tableHeight": 620,
"resize": "both",
"minDimensions": [12, 27],
"mergeCells": {
"A1": [10, 1],
"A2": [2, 1],
"C2": [3, 1],
"F2": [2, 1],
"H2": [3, 1],
"K2": [2, 1],
"D16": [3, 1],
"H16": [5, 6]
},
"worksheetId": "50f4c91c-5e48-493b-8abe-08096772c049",
"meta": {},
"comments": {},
"cache": {}
},
{
"data": [
[
"",
"KPI DASHBOARD",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
[
null,
"=CHART('bar',['Target','Actual'],[{'label':'TOTAL BUDGET','data':('KPI Data'!D14:E14),'backgroundColor':['#00b04f','#92d14f'],'disableJssSimplification':TRUE}],{'disableJssSimplification':TRUE,'indexAxis':'y','plugins':{'title':{'display':TRUE,'text':'TOTAL BUDGET','color':'#000','font':{'size':16,'weight':'bold'}},'legend':{'display':FALSE}},'scales':{'x':{'ticks':{'color':'#000'}},'y':{'ticks':{'color':'#000'}}}})",
"",
"",
"",
"",
"",
"",
"",
"=CHART('bar',[''],[{'label':'Actual','data':['KPI Data'!I14],'backgroundColor':'#b5c8e8','disableJssSimplification':TRUE},{'label':'Target','data':['KPI Data'!J14],'backgroundColor':'#2d73b5','disableJssSimplification':TRUE}],{'disableJssSimplification':TRUE,'indexAxis':'y','plugins':{'title':{'display':TRUE,'text':'TOTAL REVENUE','color':'#000','font':{'size':16,'weight':'bold'}},'legend':{'display':TRUE,'labels':{'color':'#000'}}},'scales':{'x':{'ticks':{'color':'#000'}},'y':{'ticks':{'color':'#000'}}}})",
"",
"",
"",
"",
"",
"",
""
],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
[
"",
"=CHART('bar',('KPI Data'!D18:D27),[{'label':'LIABILITIES','data':('KPI Data'!E18:E27),'backgroundColor':'#1a345c','disableJssSimplification':TRUE},{'label':'EQUITY','data':('KPI Data'!F18:F27),'backgroundColor':'#e64300','disableJssSimplification':TRUE}],{'disableJssSimplification':TRUE,'plugins':{'legend':{'display':TRUE,'labels':{'color':'#000'}},'title':{'display':TRUE,'text':'LIABILITIES vs EQUITY per Year','color':'#000','font':{'size':16,'weight':'bold'}}},'scales':{'x':{'stacked':FALSE,'ticks':{'color':'#000'}},'y':{'stacked':FALSE,'ticks':{'color':'#000'},'beginAtZero':TRUE}}})",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
],
"columns": [
{ "width": 24, "type": "text", "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "type": "text", "width": 15, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 38, "align": "left" }
],
"rows": [
{ "height": 77 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 118, "id": null },
{ "height": 71, "id": null },
{ "height": 58, "id": null },
{ "height": 51, "id": null },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 36 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 29 },
{ "height": 190 },
{ "height": 147 },
{ "height": 127 },
{ "height": 118 },
{ "height": 30 }
],
"cells": {},
"style": {
"B1": 0,
"C1": 0,
"D1": 0,
"E1": 0,
"F1": 0,
"G1": 0,
"H1": 0,
"I1": 0,
"J1": 0,
"K1": 1,
"L1": 1,
"M1": 1,
"A31": 41,
"B31": 39,
"C31": 39,
"D31": 39,
"E31": 39,
"F31": 39,
"G31": 39,
"H31": 39,
"I31": 39,
"J31": 39,
"K31": 39,
"L31": 39,
"M31": 39,
"N31": 39,
"O31": 39,
"P31": 39,
"Q31": 39
},
"textOverflow": true,
"stripHTML": false,
"defaultColAlign": "left",
"worksheetName": "KPI Dashboard",
"defaultColWidth": 79,
"gridline": false,
"tableOverflow": true,
"tableWidth": 1300,
"tableHeight": 620,
"resize": "both",
"minDimensions": [17, 42],
"mergeCells": {
"B1": [9, 1],
"B17": [7, 4],
"J17": [7, 4],
"B38": [15, 4]
},
"media": [
{
"id": "19bb08c4-6a32-441b-90e5-9db66be86313",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!C3:E13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "BUDGET",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{ "color": "#92D050", "xAxis": "top" },
{ "color": "#00B050", "xAxis": "top" }
],
"axis": {
"base": {
"reverse": false,
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "color": "#000000", "size": 13 }
},
"side2": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 15, "color": "#000000" },
"max": 300000,
"forceTheLimits": true
}
}
},
"cellAnchor": "B2",
"left": 0,
"top": 5,
"width": 434,
"height": 408,
"zIndex": 3,
"rotate": 0
},
{
"id": "afed067c-148d-42e1-aff6-49c328d7a22c",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!H3:J13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "REVENUE",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{ "color": "#B4C7E7", "xAxis": "top" },
{ "color": "#2E75B6", "xAxis": "top" }
],
"axis": {
"base": {
"reverse": false,
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "color": "#000000", "size": 13 }
},
"side2": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 15, "color": "#000000" },
"min": 0,
"max": 1250000,
"forceTheLimits": true
}
}
},
"cellAnchor": "J2",
"left": 1,
"top": 5,
"width": 421,
"height": 409,
"zIndex": 3,
"rotate": 0
},
{
"id": "df9ad462-1f05-46af-8b3f-d3d2a11e1212",
"type": "chart",
"options": {
"type": "line",
"range": "'KPI Data'!C3:L13",
"labels": 0,
"datasets": [9, 8],
"title": {
"text": "PROFIT MARGINS",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{
"drawNullValues": false,
"borderColor": "#4472C4",
"line": { "width": 1 },
"color": "#00B0F0",
"point": { "style": "circle", "radius": 11.5 }
},
{
"drawNullValues": false,
"borderColor": "#FFC000",
"line": { "width": 1 },
"color": "#ED7D31",
"point": { "style": "circle", "radius": 11.5 }
}
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "color": "#000000", "size": 13 }
},
"side": {
"grid": { "width": 1 },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 16, "color": "#000000" },
"forceTheLimits": true
}
}
},
"cellAnchor": "A1",
"left": 22,
"top": 862,
"width": 873,
"height": 444,
"zIndex": 3,
"rotate": 0
}
],
"freezeRowControl": true,
"freezeColumnControl": true,
"freezeRows": [0],
"worksheetId": "cb45f57c-907c-4070-8cc5-b7b0df77babe",
"meta": {},
"comments": {},
"cache": {}
}
],
"plugins": {},
"validations": [],
"definedNames": {},
"bar": true,
"toolbar": true
});
return () => {
instance?.destroy?.();
};
}, []);
return <div ref={spreadsheetRef}></div>;
}
<template>
<Spreadsheet
ref="spreadsheet"
:license="license"
:worksheets="worksheets"
:styles="globalStyle"
toolbar="true"
/>
</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';
jspreadsheet.setLicense('MzBmZTU2OTdjYWQyOGNlNTIyNWViMTA2MGZjODcwNmI5NDQ4NWJlZWRkYjBmZjk1NDBjY2U0OGE5Mzg1MDE2OTc1NWU3ZjgwMzNiYmJiMWZlZjU0M2VjZThlNzBmNTJmOTExMjE1OThhYjQ5MGQzZTBkY2RkNTlhZmFhZTg0MDMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOakF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
jspreadsheet.setExtensions({ formula });
export default {
components: { Spreadsheet, Worksheet },
data() {
return {
"globalStyle": [
"font-size: 29px;font-weight: bold;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"font-size: 16px;font-family: Arial;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;border-bottom: 2px dashed #70AD47;",
"font-size: 29px;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"background-color: #595959;font-size: 19px;font-family: Century Gothic;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: #595959;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #70AD47;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #009844;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #2E75B6;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #806000;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #595959;font-size: 16px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #92D050;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #79AE40;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #5B9BD5;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D6A000;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #E2F0D9;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D0E08D;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #DEEBF7;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FFF2CC;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #00B050;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #009844;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #385724;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #806000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #ED7D31;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #ED7D31;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #ED7D31;font-size: 19px;font-family: Century Gothic;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;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 16px;font-family: Arial;color: #000000;text-align: center;",
"font-size: 16px;font-weight: bold;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;text-align: center;",
"",
"background-color:#d7ccc8",
"font-size:16px;font-family:Arial;color:#000000;background-color:#ff8a65",
"font-size:16px;font-family:Arial;color:#000000;background-color:#f57c00",
"font-size:16px;font-family:Arial;color:#000000;background-color:#ff9800",
"font-size:16px;font-family:Arial;color:#000000;background-color:#fb8c00"
],
"worksheets": [
{
"data": [
["KPI DASHBOARD DATA", "", "", "", "", "", "", "", "", "", "", ""],
[
"Products",
"",
"Budget",
"",
"",
"Net Expenses",
"",
"Revenue",
"",
"",
"Profit Margins",
""
],
[
"N.º",
"NAME",
"TARGET",
"ACTUAL",
"REMAINING",
"EXTRA",
"TOTAL",
"TARGET",
"ACTUAL",
"REMAINING",
"GROSS",
"NET"
],
[
1,
"PRODUCT 1",
160344,
259757.28000000003,
"=(D4-E4)",
16007,
"=G4+E4",
1100916,
1073357,
"=J4-I4",
"=(J4-E4)/J4",
"=(J4-H4)/J4"
],
[
2,
"PRODUCT 2",
200816,
311264.8,
"=(D5-E5)",
14816,
"=G5+E5",
215534,
878162,
"=J5-I5",
"=(J5-E5)/J5",
"=(J5-H5)/J5"
],
[
3,
"PRODUCT 3",
170989,
237674.71,
"=(D6-E6)",
17057,
"=G6+E6",
820719,
1193784,
"=J6-I6",
"=(J6-E6)/J6",
"=(J6-H6)/J6"
],
[
4,
"PRODUCT 4",
281053,
61831.66,
"=(D7-E7)",
17459,
"=G7+E7",
620242,
420345,
"=J7-I7",
"=(J7-E7)/J7",
"=(J7-H7)/J7"
],
[
5,
"PRODUCT 5",
262319,
459058.25,
"=(D8-E8)",
13985,
"=G8+E8",
821177,
1175811,
"=J8-I8",
"=(J8-E8)/J8",
"=(J8-H8)/J8"
],
[
6,
"PRODUCT 6",
206881,
157229.56,
"=(D9-E9)",
11183,
"=G9+E9",
901263,
1015766,
"=J9-I9",
"=(J9-E9)/J9",
"=(J9-H9)/J9"
],
[
7,
"PRODUCT 7",
130194,
213518.15999999997,
"=(D10-E10)",
17111,
"=G10+E10",
878528,
733751,
"=J10-I10",
"=(J10-E10)/J10",
"=(J10-H10)/J10"
],
[
8,
"PRODUCT 8",
208451,
214704.53,
"=(D11-E11)",
16494,
"=G11+E11",
838380,
955983,
"=J11-I11",
"=(J11-E11)/J11",
"=(J11-H11)/J11"
],
[
9,
"PRODUCT 9",
206422,
177522.91999999998,
"=(D12-E12)",
17311,
"=G12+E12",
1073157,
924095,
"=J12-I12",
"=(J12-E12)/J12",
"=(J12-H12)/J12"
],
[
10,
"PRODUCT 10",
251504,
2515.04,
"=(D13-E13)",
17315,
"=G13+E13",
1141047,
1061074,
"=J13-I13",
"=(J13-E13)/J13",
"=(J13-H13)/J13"
],
[
"",
"",
"=SUM(C4:C13)",
"=SUM(D4:D13)",
"=SUM(E4:E13)",
"=SUM(F4:F13)",
"=SUM(G4:G13)",
"=SUM(H4:H13)",
"=SUM(I4:I13)",
"=SUM(J4:JK13)",
"=SUM(K4:K13)/10",
"=SUM(L4:L13)/10"
],
["", "", "", "", "", "", "", "", "", "", "", ""],
[
"",
"",
"",
"LIABILITIES / EQUITY RATIO",
"",
"",
"",
"",
"",
"",
"",
""
],
[
"",
"",
"",
"CALENDAR",
"LIABILITIES",
"EQUITY",
"",
"",
"",
"",
"",
""
],
["", "", "", 2027, 3613439, 3293202, "", "", "", "", "", ""],
["", "", "", 2028, 3508776, 3441854, "", "", "", "", "", ""],
["", "", "", 2029, 3719457, 3531844, "", "", "", "", "", ""],
["", "", "", 2030, 3310212, 3354051, "", "", "", "", "", ""],
["", "", "", 2031, 3945202, 3476155, "", "", "", "", "", ""],
["", "", "", 2032, 3938152, 3538468, "", "", "", "", "", ""],
["", "", "", 2033, 3733706, 3727037, "", "", "", "", "", ""],
["", "", "", 2034, 3526698, 3425405, "", "", "", "", "", ""],
["", "", "", 2035, 3632971, 3734041, "", "", "", "", "", ""],
["", "", "", 2036, 3206487, 3677074, "", "", "", "", "", ""]
],
"columns": [
{ "width": 44, "type": "text", "align": "left" },
{ "width": 190, "type": "text", "align": "left" },
{ "width": 97, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" },
{ "width": 103, "type": "text", "align": "left" },
{ "width": 101, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" },
{ "width": 97, "type": "text", "align": "left" },
{ "width": 107, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" },
{ "width": 86, "type": "text", "align": "left" }
],
"rows": [
{ "height": 67 },
{ "height": 53 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 29 },
{ "height": 52 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 },
{ "height": 43 }
],
"cells": {
"C4": { "format": "$#,##0" },
"D4": { "format": "$#,##0" },
"E4": { "format": "$#,##0" },
"F4": { "format": "$#,##0" },
"G4": { "format": "$#,##0" },
"H4": { "format": "$#,##0" },
"I4": { "format": "$#,##0" },
"J4": { "format": "$#,##0" },
"K4": { "format": "0%" },
"L4": { "format": "0%" },
"C5": { "format": "$#,##0" },
"D5": { "format": "$#,##0" },
"E5": { "format": "$#,##0" },
"F5": { "format": "$#,##0" },
"G5": { "format": "$#,##0" },
"H5": { "format": "$#,##0" },
"I5": { "format": "$#,##0" },
"J5": { "format": "$#,##0" },
"K5": { "format": "0%" },
"L5": { "format": "0%" },
"C6": { "format": "$#,##0" },
"D6": { "format": "$#,##0" },
"E6": { "format": "$#,##0" },
"F6": { "format": "$#,##0" },
"G6": { "format": "$#,##0" },
"H6": { "format": "$#,##0" },
"I6": { "format": "$#,##0" },
"J6": { "format": "$#,##0" },
"K6": { "format": "0%" },
"L6": { "format": "0%" },
"C7": { "format": "$#,##0" },
"D7": { "format": "$#,##0" },
"E7": { "format": "$#,##0" },
"F7": { "format": "$#,##0" },
"G7": { "format": "$#,##0" },
"H7": { "format": "$#,##0" },
"I7": { "format": "$#,##0" },
"J7": { "format": "$#,##0" },
"K7": { "format": "0%" },
"L7": { "format": "0%" },
"C8": { "format": "$#,##0" },
"D8": { "format": "$#,##0" },
"E8": { "format": "$#,##0" },
"F8": { "format": "$#,##0" },
"G8": { "format": "$#,##0" },
"H8": { "format": "$#,##0" },
"I8": { "format": "$#,##0" },
"J8": { "format": "$#,##0" },
"K8": { "format": "0%" },
"L8": { "format": "0%" },
"C9": { "format": "$#,##0" },
"D9": { "format": "$#,##0" },
"E9": { "format": "$#,##0" },
"F9": { "format": "$#,##0" },
"G9": { "format": "$#,##0" },
"H9": { "format": "$#,##0" },
"I9": { "format": "$#,##0" },
"J9": { "format": "$#,##0" },
"K9": { "format": "0%" },
"L9": { "format": "0%" },
"C10": { "format": "$#,##0" },
"D10": { "format": "$#,##0" },
"E10": { "format": "$#,##0" },
"F10": { "format": "$#,##0" },
"G10": { "format": "$#,##0" },
"H10": { "format": "$#,##0" },
"I10": { "format": "$#,##0" },
"J10": { "format": "$#,##0" },
"K10": { "format": "0%" },
"L10": { "format": "0%" },
"C11": { "format": "$#,##0" },
"D11": { "format": "$#,##0" },
"E11": { "format": "$#,##0" },
"F11": { "format": "$#,##0" },
"G11": { "format": "$#,##0" },
"H11": { "format": "$#,##0" },
"I11": { "format": "$#,##0" },
"J11": { "format": "$#,##0" },
"K11": { "format": "0%" },
"L11": { "format": "0%" },
"C12": { "format": "$#,##0" },
"D12": { "format": "$#,##0" },
"E12": { "format": "$#,##0" },
"F12": { "format": "$#,##0" },
"G12": { "format": "$#,##0" },
"H12": { "format": "$#,##0" },
"I12": { "format": "$#,##0" },
"J12": { "format": "$#,##0" },
"K12": { "format": "0%" },
"L12": { "format": "0%" },
"C13": { "format": "$#,##0" },
"D13": { "format": "$#,##0" },
"E13": { "format": "$#,##0" },
"F13": { "format": "$#,##0" },
"G13": { "format": "$#,##0" },
"H13": { "format": "$#,##0" },
"I13": { "format": "$#,##0" },
"J13": { "format": "$#,##0" },
"K13": { "format": "0%" },
"L13": { "format": "0%" },
"C14": { "format": "$#,##0" },
"D14": { "format": "$#,##0" },
"E14": { "format": "$#,##0" },
"F14": { "format": "$#,##0" },
"G14": { "format": "$#,##0" },
"H14": { "format": "$#,##0" },
"I14": { "format": "$#,##0" },
"J14": { "format": "$#,##0" },
"K14": { "format": "0%" },
"L14": { "format": "0%" },
"D18": { "format": "0" },
"E18": { "format": "0" },
"F18": { "format": "$#,##0" },
"D19": { "format": "0" },
"E19": { "format": "0" },
"F19": { "format": "$#,##0" },
"D20": { "format": "0" },
"E20": { "format": "0" },
"F20": { "format": "$#,##0" },
"D21": { "format": "0" },
"E21": { "format": "0" },
"F21": { "format": "$#,##0" },
"D22": { "format": "0" },
"E22": { "format": "0" },
"F22": { "format": "$#,##0" },
"D23": { "format": "0" },
"E23": { "format": "0" },
"F23": { "format": "$#,##0" },
"D24": { "format": "0" },
"E24": { "format": "0" },
"F24": { "format": "$#,##0" },
"D25": { "format": "0" },
"E25": { "format": "0" },
"F25": { "format": "$#,##0" },
"D26": { "format": "0" },
"E26": { "format": "0" },
"F26": { "format": "$#,##0" },
"D27": { "format": "0" },
"E27": { "format": "0" },
"F27": { "format": "$#,##0" }
},
"style": {
"A1": 3,
"B1": 3,
"C1": 3,
"D1": 3,
"E1": 3,
"F1": 3,
"G1": 3,
"H1": 3,
"I1": 3,
"J1": 3,
"K1": 1,
"L1": 1,
"A2": 4,
"B2": 5,
"C2": 6,
"D2": 6,
"E2": 6,
"F2": 7,
"G2": 7,
"H2": 8,
"I2": 8,
"J2": 8,
"K2": 9,
"L2": 9,
"A3": 10,
"B3": 11,
"C3": 12,
"D3": 12,
"E3": 12,
"F3": 13,
"G3": 13,
"H3": 14,
"I3": 14,
"J3": 14,
"K3": 15,
"L3": 15,
"A4": 16,
"B4": 17,
"C4": 18,
"D4": 18,
"E4": 18,
"F4": 18,
"G4": 18,
"H4": 18,
"I4": 18,
"J4": 18,
"K4": 18,
"L4": 18,
"A5": 16,
"B5": 17,
"C5": 19,
"D5": 19,
"E5": 19,
"F5": 20,
"G5": 20,
"H5": 21,
"I5": 21,
"J5": 21,
"K5": 22,
"L5": 22,
"A6": 16,
"B6": 17,
"C6": 18,
"D6": 18,
"E6": 18,
"F6": 18,
"G6": 18,
"H6": 18,
"I6": 18,
"J6": 18,
"K6": 18,
"L6": 18,
"A7": 16,
"B7": 17,
"C7": 19,
"D7": 19,
"E7": 19,
"F7": 20,
"G7": 20,
"H7": 21,
"I7": 21,
"J7": 21,
"K7": 22,
"L7": 22,
"A8": 16,
"B8": 17,
"C8": 18,
"D8": 18,
"E8": 18,
"F8": 18,
"G8": 18,
"H8": 18,
"I8": 18,
"J8": 18,
"K8": 18,
"L8": 18,
"A9": 16,
"B9": 17,
"C9": 19,
"D9": 19,
"E9": 19,
"F9": 20,
"G9": 20,
"H9": 21,
"I9": 21,
"J9": 21,
"K9": 22,
"L9": 22,
"A10": 16,
"B10": 17,
"C10": 18,
"D10": 18,
"E10": 18,
"F10": 18,
"G10": 18,
"H10": 18,
"I10": 18,
"J10": 18,
"K10": 18,
"L10": 18,
"A11": 16,
"B11": 17,
"C11": 19,
"D11": 19,
"E11": 19,
"F11": 20,
"G11": 20,
"H11": 21,
"I11": 21,
"J11": 21,
"K11": 22,
"L11": 22,
"A12": 16,
"B12": 17,
"C12": 18,
"D12": 18,
"E12": 18,
"F12": 18,
"G12": 18,
"H12": 18,
"I12": 18,
"J12": 18,
"K12": 18,
"L12": 18,
"A13": 16,
"B13": 17,
"C13": 19,
"D13": 19,
"E13": 19,
"F13": 20,
"G13": 20,
"H13": 21,
"I13": 21,
"J13": 21,
"K13": 22,
"L13": 22,
"A14": 23,
"B14": 24,
"C14": 25,
"D14": 25,
"E14": 25,
"F14": 26,
"G14": 26,
"H14": 27,
"I14": 27,
"J14": 27,
"K14": 28,
"L14": 28,
"C15": 1,
"D15": 1,
"E15": 1,
"F15": 1,
"G15": 1,
"H15": 1,
"I15": 1,
"J15": 1,
"K15": 1,
"L15": 1,
"C16": 1,
"D16": 46,
"E16": 46,
"F16": 46,
"G16": 1,
"H16": 1,
"I16": 1,
"J16": 1,
"K16": 1,
"L16": 1,
"C17": 1,
"D17": 32,
"E17": 32,
"F17": 33,
"G17": 1,
"H17": 1,
"I17": 1,
"J17": 1,
"K17": 1,
"L17": 1,
"C18": 1,
"D18": 34,
"E18": 34,
"F18": 18,
"G18": 1,
"H18": 1,
"I18": 1,
"J18": 1,
"K18": 1,
"L18": 1,
"C19": 1,
"D19": 35,
"E19": 35,
"F19": 36,
"G19": 1,
"H19": 37,
"I19": 37,
"J19": 1,
"K19": 1,
"L19": 1,
"C20": 1,
"D20": 34,
"E20": 34,
"F20": 18,
"G20": 1,
"H20": 37,
"I20": 37,
"J20": 38,
"C21": 1,
"D21": 35,
"E21": 35,
"F21": 36,
"G21": 1,
"H21": 37,
"I21": 37,
"J21": 38,
"M21": 39,
"D22": 34,
"E22": 34,
"F22": 18,
"H22": 40,
"I22": 40,
"J22": 38,
"D23": 35,
"E23": 35,
"F23": 36,
"H23": 37,
"I23": 40,
"J23": 38,
"D24": 34,
"E24": 34,
"F24": 18,
"H24": 40,
"I24": 40,
"J24": 38,
"D25": 35,
"E25": 35,
"F25": 36,
"J25": 38,
"D26": 34,
"E26": 34,
"F26": 18,
"J26": 38,
"D27": 35,
"E27": 35,
"F27": 36,
"J27": 38
},
"textOverflow": true,
"stripHTML": false,
"defaultColAlign": "left",
"worksheetName": "KPI Data",
"defaultColWidth": 79,
"gridline": false,
"tableOverflow": true,
"tableWidth": 1300,
"tableHeight": 620,
"resize": "both",
"minDimensions": [12, 27],
"mergeCells": {
"A1": [10, 1],
"A2": [2, 1],
"C2": [3, 1],
"F2": [2, 1],
"H2": [3, 1],
"K2": [2, 1],
"D16": [3, 1],
"H16": [5, 6]
},
"worksheetId": "50f4c91c-5e48-493b-8abe-08096772c049",
"meta": {},
"comments": {},
"cache": {}
},
{
"data": [
[
"",
"KPI DASHBOARD",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
[
null,
"=CHART('bar',['Target','Actual'],[{'label':'TOTAL BUDGET','data':('KPI Data'!D14:E14),'backgroundColor':['#00b04f','#92d14f'],'disableJssSimplification':TRUE}],{'disableJssSimplification':TRUE,'indexAxis':'y','plugins':{'title':{'display':TRUE,'text':'TOTAL BUDGET','color':'#000','font':{'size':16,'weight':'bold'}},'legend':{'display':FALSE}},'scales':{'x':{'ticks':{'color':'#000'}},'y':{'ticks':{'color':'#000'}}}})",
"",
"",
"",
"",
"",
"",
"",
"=CHART('bar',[''],[{'label':'Actual','data':['KPI Data'!I14],'backgroundColor':'#b5c8e8','disableJssSimplification':TRUE},{'label':'Target','data':['KPI Data'!J14],'backgroundColor':'#2d73b5','disableJssSimplification':TRUE}],{'disableJssSimplification':TRUE,'indexAxis':'y','plugins':{'title':{'display':TRUE,'text':'TOTAL REVENUE','color':'#000','font':{'size':16,'weight':'bold'}},'legend':{'display':TRUE,'labels':{'color':'#000'}}},'scales':{'x':{'ticks':{'color':'#000'}},'y':{'ticks':{'color':'#000'}}}})",
"",
"",
"",
"",
"",
"",
""
],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
[
"",
"=CHART('bar',('KPI Data'!D18:D27),[{'label':'LIABILITIES','data':('KPI Data'!E18:E27),'backgroundColor':'#1a345c','disableJssSimplification':TRUE},{'label':'EQUITY','data':('KPI Data'!F18:F27),'backgroundColor':'#e64300','disableJssSimplification':TRUE}],{'disableJssSimplification':TRUE,'plugins':{'legend':{'display':TRUE,'labels':{'color':'#000'}},'title':{'display':TRUE,'text':'LIABILITIES vs EQUITY per Year','color':'#000','font':{'size':16,'weight':'bold'}}},'scales':{'x':{'stacked':FALSE,'ticks':{'color':'#000'}},'y':{'stacked':FALSE,'ticks':{'color':'#000'},'beginAtZero':TRUE}}})",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
],
"columns": [
{ "width": 24, "type": "text", "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "type": "text", "width": 15, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 38, "align": "left" }
],
"rows": [
{ "height": 77 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 118, "id": null },
{ "height": 71, "id": null },
{ "height": 58, "id": null },
{ "height": 51, "id": null },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 36 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 29 },
{ "height": 190 },
{ "height": 147 },
{ "height": 127 },
{ "height": 118 },
{ "height": 30 }
],
"cells": {},
"style": {
"B1": 0,
"C1": 0,
"D1": 0,
"E1": 0,
"F1": 0,
"G1": 0,
"H1": 0,
"I1": 0,
"J1": 0,
"K1": 1,
"L1": 1,
"M1": 1,
"A31": 41,
"B31": 39,
"C31": 39,
"D31": 39,
"E31": 39,
"F31": 39,
"G31": 39,
"H31": 39,
"I31": 39,
"J31": 39,
"K31": 39,
"L31": 39,
"M31": 39,
"N31": 39,
"O31": 39,
"P31": 39,
"Q31": 39
},
"textOverflow": true,
"stripHTML": false,
"defaultColAlign": "left",
"worksheetName": "KPI Dashboard",
"defaultColWidth": 79,
"gridline": false,
"tableOverflow": true,
"tableWidth": 1300,
"tableHeight": 620,
"resize": "both",
"minDimensions": [17, 42],
"mergeCells": {
"B1": [9, 1],
"B17": [7, 4],
"J17": [7, 4],
"B38": [15, 4]
},
"media": [
{
"id": "19bb08c4-6a32-441b-90e5-9db66be86313",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!C3:E13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "BUDGET",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{ "color": "#92D050", "xAxis": "top" },
{ "color": "#00B050", "xAxis": "top" }
],
"axis": {
"base": {
"reverse": false,
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "color": "#000000", "size": 13 }
},
"side2": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 15, "color": "#000000" },
"max": 300000,
"forceTheLimits": true
}
}
},
"cellAnchor": "B2",
"left": 0,
"top": 5,
"width": 434,
"height": 408,
"zIndex": 3,
"rotate": 0
},
{
"id": "afed067c-148d-42e1-aff6-49c328d7a22c",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!H3:J13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "REVENUE",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{ "color": "#B4C7E7", "xAxis": "top" },
{ "color": "#2E75B6", "xAxis": "top" }
],
"axis": {
"base": {
"reverse": false,
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "color": "#000000", "size": 13 }
},
"side2": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 15, "color": "#000000" },
"min": 0,
"max": 1250000,
"forceTheLimits": true
}
}
},
"cellAnchor": "J2",
"left": 1,
"top": 5,
"width": 421,
"height": 409,
"zIndex": 3,
"rotate": 0
},
{
"id": "df9ad462-1f05-46af-8b3f-d3d2a11e1212",
"type": "chart",
"options": {
"type": "line",
"range": "'KPI Data'!C3:L13",
"labels": 0,
"datasets": [9, 8],
"title": {
"text": "PROFIT MARGINS",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{
"drawNullValues": false,
"borderColor": "#4472C4",
"line": { "width": 1 },
"color": "#00B0F0",
"point": { "style": "circle", "radius": 11.5 }
},
{
"drawNullValues": false,
"borderColor": "#FFC000",
"line": { "width": 1 },
"color": "#ED7D31",
"point": { "style": "circle", "radius": 11.5 }
}
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "color": "#000000", "size": 13 }
},
"side": {
"grid": { "width": 1 },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 16, "color": "#000000" },
"forceTheLimits": true
}
}
},
"cellAnchor": "A1",
"left": 22,
"top": 862,
"width": 873,
"height": 444,
"zIndex": 3,
"rotate": 0
}
],
"freezeRowControl": true,
"freezeColumnControl": true,
"freezeRows": [0],
"worksheetId": "cb45f57c-907c-4070-8cc5-b7b0df77babe",
"meta": {},
"comments": {},
"cache": {}
}
],
"plugins": {},
"validations": [],
"definedNames": {},
"bar": true,
"toolbar": true
};
}
}
</script>
import { Component, ElementRef, ViewChild } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';
import charts from '@jspreadsheet/charts';
import '@jspreadsheet/formula-charts';
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZmEwYWIwY2Q2ZjJkNGIyOTM4MjkxNzAzYTlhMGY1Yzk3NGJmZjdjYjk4MDAxNWE1NTc2MjJhZmI1ZWM2MWYxNGIyNWI1Zjg4ZTkzNTQwN2E3MTc4NTYzZmIyM2QwOWFlYTJkYjljOWE4Zjk0ZTVjODAzMjgzMGRkYTAzZjUzMmUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVeU56RXhOemczTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
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: [
'font-size: 29px;font-weight: bold;font-family: Century Gothic;color: #595959;vertical-align: middle;',
'font-size: 16px;font-family: Arial;color: #000000;',
'font-size: 16px;font-family: Calibri;color: #000000;border-bottom: 2px dashed #70AD47;',
'font-size: 29px;font-family: Century Gothic;color: #595959;vertical-align: middle;',
'background-color: #595959;font-size: 19px;font-family: Century Gothic;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: #595959;font-size: 19px;font-family: Century Gothic;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;',
'background-color: #70AD47;font-size: 19px;font-family: Century Gothic;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;',
'background-color: #009844;font-size: 19px;font-family: Century Gothic;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;',
'background-color: #2E75B6;font-size: 19px;font-family: Century Gothic;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;',
'background-color: #806000;font-size: 19px;font-family: Century Gothic;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;',
'background-color: #595959;font-size: 16px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #595959;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #92D050;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #79AE40;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #5B9BD5;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #D6A000;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #E2F0D9;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #D0E08D;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #DEEBF7;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #FFF2CC;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #00B050;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #009844;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #385724;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #806000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #ED7D31;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #ED7D31;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #ED7D31;font-size: 19px;font-family: Century Gothic;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;',
'background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;',
'font-size: 16px;font-family: Arial;color: #000000;text-align: center;',
'font-size: 16px;font-weight: bold;font-family: Calibri;color: #000000;',
'font-size: 16px;font-family: Calibri;color: #000000;',
'font-size: 16px;font-family: Calibri;color: #000000;text-align: center;',
'',
'background-color:#d7ccc8',
'font-size:16px;font-family:Arial;color:#000000;background-color:#ff8a65',
'font-size:16px;font-family:Arial;color:#000000;background-color:#f57c00',
'font-size:16px;font-family:Arial;color:#000000;background-color:#ff9800',
'font-size:16px;font-family:Arial;color:#000000;background-color:#fb8c00',
],
worksheets: [
{
data: [
['KPI DASHBOARD DATA', '', '', '', '', '', '', '', '', '', '', ''],
[
'Products',
'',
'Budget',
'',
'',
'Net Expenses',
'',
'Revenue',
'',
'',
'Profit Margins',
'',
],
[
'N.º',
'NAME',
'TARGET',
'ACTUAL',
'REMAINING',
'EXTRA',
'TOTAL',
'TARGET',
'ACTUAL',
'REMAINING',
'GROSS',
'NET',
],
[
1,
'PRODUCT 1',
160344,
259757.28000000003,
'=(D4-E4)',
16007,
'=G4+E4',
1100916,
1073357,
'=J4-I4',
'=(J4-E4)/J4',
'=(J4-H4)/J4',
],
[
2,
'PRODUCT 2',
200816,
311264.8,
'=(D5-E5)',
14816,
'=G5+E5',
215534,
878162,
'=J5-I5',
'=(J5-E5)/J5',
'=(J5-H5)/J5',
],
[
3,
'PRODUCT 3',
170989,
237674.71,
'=(D6-E6)',
17057,
'=G6+E6',
820719,
1193784,
'=J6-I6',
'=(J6-E6)/J6',
'=(J6-H6)/J6',
],
[
4,
'PRODUCT 4',
281053,
61831.66,
'=(D7-E7)',
17459,
'=G7+E7',
620242,
420345,
'=J7-I7',
'=(J7-E7)/J7',
'=(J7-H7)/J7',
],
[
5,
'PRODUCT 5',
262319,
459058.25,
'=(D8-E8)',
13985,
'=G8+E8',
821177,
1175811,
'=J8-I8',
'=(J8-E8)/J8',
'=(J8-H8)/J8',
],
[
6,
'PRODUCT 6',
206881,
157229.56,
'=(D9-E9)',
11183,
'=G9+E9',
901263,
1015766,
'=J9-I9',
'=(J9-E9)/J9',
'=(J9-H9)/J9',
],
[
7,
'PRODUCT 7',
130194,
213518.15999999997,
'=(D10-E10)',
17111,
'=G10+E10',
878528,
733751,
'=J10-I10',
'=(J10-E10)/J10',
'=(J10-H10)/J10',
],
[
8,
'PRODUCT 8',
208451,
214704.53,
'=(D11-E11)',
16494,
'=G11+E11',
838380,
955983,
'=J11-I11',
'=(J11-E11)/J11',
'=(J11-H11)/J11',
],
[
9,
'PRODUCT 9',
206422,
177522.91999999998,
'=(D12-E12)',
17311,
'=G12+E12',
1073157,
924095,
'=J12-I12',
'=(J12-E12)/J12',
'=(J12-H12)/J12',
],
[
10,
'PRODUCT 10',
251504,
2515.04,
'=(D13-E13)',
17315,
'=G13+E13',
1141047,
1061074,
'=J13-I13',
'=(J13-E13)/J13',
'=(J13-H13)/J13',
],
[
'',
'',
'=SUM(C4:C13)',
'=SUM(D4:D13)',
'=SUM(E4:E13)',
'=SUM(F4:F13)',
'=SUM(G4:G13)',
'=SUM(H4:H13)',
'=SUM(I4:I13)',
'=SUM(J4:JK13)',
'=SUM(K4:K13)/10',
'=SUM(L4:L13)/10',
],
['', '', '', '', '', '', '', '', '', '', '', ''],
[
'',
'',
'',
'LIABILITIES / EQUITY RATIO',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'CALENDAR',
'LIABILITIES',
'EQUITY',
'',
'',
'',
'',
'',
'',
],
['', '', '', 2027, 3613439, 3293202, '', '', '', '', '', ''],
['', '', '', 2028, 3508776, 3441854, '', '', '', '', '', ''],
['', '', '', 2029, 3719457, 3531844, '', '', '', '', '', ''],
['', '', '', 2030, 3310212, 3354051, '', '', '', '', '', ''],
['', '', '', 2031, 3945202, 3476155, '', '', '', '', '', ''],
['', '', '', 2032, 3938152, 3538468, '', '', '', '', '', ''],
['', '', '', 2033, 3733706, 3727037, '', '', '', '', '', ''],
['', '', '', 2034, 3526698, 3425405, '', '', '', '', '', ''],
['', '', '', 2035, 3632971, 3734041, '', '', '', '', '', ''],
['', '', '', 2036, 3206487, 3677074, '', '', '', '', '', ''],
],
columns: [
{ width: 44, type: 'text', align: 'left' },
{ width: 190, type: 'text', align: 'left' },
{ width: 97, type: 'text', align: 'left' },
{ width: 86, type: 'text', align: 'left' },
{ width: 103, type: 'text', align: 'left' },
{ width: 101, type: 'text', align: 'left' },
{ width: 86, type: 'text', align: 'left' },
{ width: 86, type: 'text', align: 'left' },
{ width: 97, type: 'text', align: 'left' },
{ width: 107, type: 'text', align: 'left' },
{ width: 86, type: 'text', align: 'left' },
{ width: 86, type: 'text', align: 'left' },
],
rows: [
{ height: 67 },
{ height: 53 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 29 },
{ height: 52 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
{ height: 43 },
],
cells: {
C4: { format: '$#,##0' },
D4: { format: '$#,##0' },
E4: { format: '$#,##0' },
F4: { format: '$#,##0' },
G4: { format: '$#,##0' },
H4: { format: '$#,##0' },
I4: { format: '$#,##0' },
J4: { format: '$#,##0' },
K4: { format: '0%' },
L4: { format: '0%' },
C5: { format: '$#,##0' },
D5: { format: '$#,##0' },
E5: { format: '$#,##0' },
F5: { format: '$#,##0' },
G5: { format: '$#,##0' },
H5: { format: '$#,##0' },
I5: { format: '$#,##0' },
J5: { format: '$#,##0' },
K5: { format: '0%' },
L5: { format: '0%' },
C6: { format: '$#,##0' },
D6: { format: '$#,##0' },
E6: { format: '$#,##0' },
F6: { format: '$#,##0' },
G6: { format: '$#,##0' },
H6: { format: '$#,##0' },
I6: { format: '$#,##0' },
J6: { format: '$#,##0' },
K6: { format: '0%' },
L6: { format: '0%' },
C7: { format: '$#,##0' },
D7: { format: '$#,##0' },
E7: { format: '$#,##0' },
F7: { format: '$#,##0' },
G7: { format: '$#,##0' },
H7: { format: '$#,##0' },
I7: { format: '$#,##0' },
J7: { format: '$#,##0' },
K7: { format: '0%' },
L7: { format: '0%' },
C8: { format: '$#,##0' },
D8: { format: '$#,##0' },
E8: { format: '$#,##0' },
F8: { format: '$#,##0' },
G8: { format: '$#,##0' },
H8: { format: '$#,##0' },
I8: { format: '$#,##0' },
J8: { format: '$#,##0' },
K8: { format: '0%' },
L8: { format: '0%' },
C9: { format: '$#,##0' },
D9: { format: '$#,##0' },
E9: { format: '$#,##0' },
F9: { format: '$#,##0' },
G9: { format: '$#,##0' },
H9: { format: '$#,##0' },
I9: { format: '$#,##0' },
J9: { format: '$#,##0' },
K9: { format: '0%' },
L9: { format: '0%' },
C10: { format: '$#,##0' },
D10: { format: '$#,##0' },
E10: { format: '$#,##0' },
F10: { format: '$#,##0' },
G10: { format: '$#,##0' },
H10: { format: '$#,##0' },
I10: { format: '$#,##0' },
J10: { format: '$#,##0' },
K10: { format: '0%' },
L10: { format: '0%' },
C11: { format: '$#,##0' },
D11: { format: '$#,##0' },
E11: { format: '$#,##0' },
F11: { format: '$#,##0' },
G11: { format: '$#,##0' },
H11: { format: '$#,##0' },
I11: { format: '$#,##0' },
J11: { format: '$#,##0' },
K11: { format: '0%' },
L11: { format: '0%' },
C12: { format: '$#,##0' },
D12: { format: '$#,##0' },
E12: { format: '$#,##0' },
F12: { format: '$#,##0' },
G12: { format: '$#,##0' },
H12: { format: '$#,##0' },
I12: { format: '$#,##0' },
J12: { format: '$#,##0' },
K12: { format: '0%' },
L12: { format: '0%' },
C13: { format: '$#,##0' },
D13: { format: '$#,##0' },
E13: { format: '$#,##0' },
F13: { format: '$#,##0' },
G13: { format: '$#,##0' },
H13: { format: '$#,##0' },
I13: { format: '$#,##0' },
J13: { format: '$#,##0' },
K13: { format: '0%' },
L13: { format: '0%' },
C14: { format: '$#,##0' },
D14: { format: '$#,##0' },
E14: { format: '$#,##0' },
F14: { format: '$#,##0' },
G14: { format: '$#,##0' },
H14: { format: '$#,##0' },
I14: { format: '$#,##0' },
J14: { format: '$#,##0' },
K14: { format: '0%' },
L14: { format: '0%' },
D18: { format: '0' },
E18: { format: '0' },
F18: { format: '$#,##0' },
D19: { format: '0' },
E19: { format: '0' },
F19: { format: '$#,##0' },
D20: { format: '0' },
E20: { format: '0' },
F20: { format: '$#,##0' },
D21: { format: '0' },
E21: { format: '0' },
F21: { format: '$#,##0' },
D22: { format: '0' },
E22: { format: '0' },
F22: { format: '$#,##0' },
D23: { format: '0' },
E23: { format: '0' },
F23: { format: '$#,##0' },
D24: { format: '0' },
E24: { format: '0' },
F24: { format: '$#,##0' },
D25: { format: '0' },
E25: { format: '0' },
F25: { format: '$#,##0' },
D26: { format: '0' },
E26: { format: '0' },
F26: { format: '$#,##0' },
D27: { format: '0' },
E27: { format: '0' },
F27: { format: '$#,##0' },
},
style: {
A1: 3,
B1: 3,
C1: 3,
D1: 3,
E1: 3,
F1: 3,
G1: 3,
H1: 3,
I1: 3,
J1: 3,
K1: 1,
L1: 1,
A2: 4,
B2: 5,
C2: 6,
D2: 6,
E2: 6,
F2: 7,
G2: 7,
H2: 8,
I2: 8,
J2: 8,
K2: 9,
L2: 9,
A3: 10,
B3: 11,
C3: 12,
D3: 12,
E3: 12,
F3: 13,
G3: 13,
H3: 14,
I3: 14,
J3: 14,
K3: 15,
L3: 15,
A4: 16,
B4: 17,
C4: 18,
D4: 18,
E4: 18,
F4: 18,
G4: 18,
H4: 18,
I4: 18,
J4: 18,
K4: 18,
L4: 18,
A5: 16,
B5: 17,
C5: 19,
D5: 19,
E5: 19,
F5: 20,
G5: 20,
H5: 21,
I5: 21,
J5: 21,
K5: 22,
L5: 22,
A6: 16,
B6: 17,
C6: 18,
D6: 18,
E6: 18,
F6: 18,
G6: 18,
H6: 18,
I6: 18,
J6: 18,
K6: 18,
L6: 18,
A7: 16,
B7: 17,
C7: 19,
D7: 19,
E7: 19,
F7: 20,
G7: 20,
H7: 21,
I7: 21,
J7: 21,
K7: 22,
L7: 22,
A8: 16,
B8: 17,
C8: 18,
D8: 18,
E8: 18,
F8: 18,
G8: 18,
H8: 18,
I8: 18,
J8: 18,
K8: 18,
L8: 18,
A9: 16,
B9: 17,
C9: 19,
D9: 19,
E9: 19,
F9: 20,
G9: 20,
H9: 21,
I9: 21,
J9: 21,
K9: 22,
L9: 22,
A10: 16,
B10: 17,
C10: 18,
D10: 18,
E10: 18,
F10: 18,
G10: 18,
H10: 18,
I10: 18,
J10: 18,
K10: 18,
L10: 18,
A11: 16,
B11: 17,
C11: 19,
D11: 19,
E11: 19,
F11: 20,
G11: 20,
H11: 21,
I11: 21,
J11: 21,
K11: 22,
L11: 22,
A12: 16,
B12: 17,
C12: 18,
D12: 18,
E12: 18,
F12: 18,
G12: 18,
H12: 18,
I12: 18,
J12: 18,
K12: 18,
L12: 18,
A13: 16,
B13: 17,
C13: 19,
D13: 19,
E13: 19,
F13: 20,
G13: 20,
H13: 21,
I13: 21,
J13: 21,
K13: 22,
L13: 22,
A14: 23,
B14: 24,
C14: 25,
D14: 25,
E14: 25,
F14: 26,
G14: 26,
H14: 27,
I14: 27,
J14: 27,
K14: 28,
L14: 28,
C15: 1,
D15: 1,
E15: 1,
F15: 1,
G15: 1,
H15: 1,
I15: 1,
J15: 1,
K15: 1,
L15: 1,
C16: 1,
D16: 46,
E16: 46,
F16: 46,
G16: 1,
H16: 1,
I16: 1,
J16: 1,
K16: 1,
L16: 1,
C17: 1,
D17: 32,
E17: 32,
F17: 33,
G17: 1,
H17: 1,
I17: 1,
J17: 1,
K17: 1,
L17: 1,
C18: 1,
D18: 34,
E18: 34,
F18: 18,
G18: 1,
H18: 1,
I18: 1,
J18: 1,
K18: 1,
L18: 1,
C19: 1,
D19: 35,
E19: 35,
F19: 36,
G19: 1,
H19: 37,
I19: 37,
J19: 1,
K19: 1,
L19: 1,
C20: 1,
D20: 34,
E20: 34,
F20: 18,
G20: 1,
H20: 37,
I20: 37,
J20: 38,
C21: 1,
D21: 35,
E21: 35,
F21: 36,
G21: 1,
H21: 37,
I21: 37,
J21: 38,
M21: 39,
D22: 34,
E22: 34,
F22: 18,
H22: 40,
I22: 40,
J22: 38,
D23: 35,
E23: 35,
F23: 36,
H23: 37,
I23: 40,
J23: 38,
D24: 34,
E24: 34,
F24: 18,
H24: 40,
I24: 40,
J24: 38,
D25: 35,
E25: 35,
F25: 36,
J25: 38,
D26: 34,
E26: 34,
F26: 18,
J26: 38,
D27: 35,
E27: 35,
F27: 36,
J27: 38,
},
textOverflow: true,
defaultColAlign: 'left',
worksheetName: 'KPI Data',
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
tableWidth: 1300,
tableHeight: 620,
resize: 'both',
minDimensions: [12, 27],
mergeCells: {
A1: [10, 1],
A2: [2, 1],
C2: [3, 1],
F2: [2, 1],
H2: [3, 1],
K2: [2, 1],
D16: [3, 1],
H16: [5, 6],
},
worksheetId: '50f4c91c-5e48-493b-8abe-08096772c049',
meta: {},
comments: {},
cache: {},
},
{
data: [
[
'',
'KPI DASHBOARD',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
null,
"=CHART('bar',['Target','Actual'],[{'label':'TOTAL BUDGET','data':('KPI Data'!D14:E14),'backgroundColor':['#00b04f','#92d14f'],'disableJssSimplification':TRUE}],{'disableJssSimplification':TRUE,'indexAxis':'y','plugins':{'title':{'display':TRUE,'text':'TOTAL BUDGET','color':'#000','font':{'size':16,'weight':'bold'}},'legend':{'display':FALSE}},'scales':{'x':{'ticks':{'color':'#000'}},'y':{'ticks':{'color':'#000'}}}})",
'',
'',
'',
'',
'',
'',
'',
"=CHART('bar',[''],[{'label':'Actual','data':['KPI Data'!I14],'backgroundColor':'#b5c8e8','disableJssSimplification':TRUE},{'label':'Target','data':['KPI Data'!J14],'backgroundColor':'#2d73b5','disableJssSimplification':TRUE}],{'disableJssSimplification':TRUE,'indexAxis':'y','plugins':{'title':{'display':TRUE,'text':'TOTAL REVENUE','color':'#000','font':{'size':16,'weight':'bold'}},'legend':{'display':TRUE,'labels':{'color':'#000'}}},'scales':{'x':{'ticks':{'color':'#000'}},'y':{'ticks':{'color':'#000'}}}})",
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
"=CHART('bar',('KPI Data'!D18:D27),[{'label':'LIABILITIES','data':('KPI Data'!E18:E27),'backgroundColor':'#1a345c','disableJssSimplification':TRUE},{'label':'EQUITY','data':('KPI Data'!F18:F27),'backgroundColor':'#e64300','disableJssSimplification':TRUE}],{'disableJssSimplification':TRUE,'plugins':{'legend':{'display':TRUE,'labels':{'color':'#000'}},'title':{'display':TRUE,'text':'LIABILITIES vs EQUITY per Year','color':'#000','font':{'size':16,'weight':'bold'}}},'scales':{'x':{'stacked':FALSE,'ticks':{'color':'#000'}},'y':{'stacked':FALSE,'ticks':{'color':'#000'},'beginAtZero':TRUE}}})",
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
],
columns: [
{ width: 24, type: 'text', align: 'left' },
{ type: 'text', width: 62, align: 'left' },
{ type: 'text', width: 62, align: 'left' },
{ width: 62, type: 'text', align: 'left' },
{ width: 62, type: 'text', align: 'left' },
{ width: 62, type: 'text', align: 'left' },
{ width: 62, type: 'text', align: 'left' },
{ width: 62, type: 'text', align: 'left' },
{ type: 'text', width: 15, align: 'left' },
{ type: 'text', width: 60, align: 'left' },
{ width: 60, type: 'text', align: 'left' },
{ width: 60, type: 'text', align: 'left' },
{ type: 'text', width: 60, align: 'left' },
{ type: 'text', width: 60, align: 'left' },
{ type: 'text', width: 60, align: 'left' },
{ type: 'text', width: 60, align: 'left' },
{ type: 'text', width: 38, align: 'left' },
],
rows: [
{ height: 77 },
{ height: 29 },
{ height: 29 },
{ height: 29 },
{ height: 29 },
{ height: 29 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 118 },
{ height: 71 },
{ height: 58 },
{ height: 51 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 36 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 30 },
{ height: 29 },
{ height: 190 },
{ height: 147 },
{ height: 127 },
{ height: 118 },
{ height: 30 },
],
cells: {},
style: {
B1: 0,
C1: 0,
D1: 0,
E1: 0,
F1: 0,
G1: 0,
H1: 0,
I1: 0,
J1: 0,
K1: 1,
L1: 1,
M1: 1,
A31: 41,
B31: 39,
C31: 39,
D31: 39,
E31: 39,
F31: 39,
G31: 39,
H31: 39,
I31: 39,
J31: 39,
K31: 39,
L31: 39,
M31: 39,
N31: 39,
O31: 39,
P31: 39,
Q31: 39,
},
textOverflow: true,
defaultColAlign: 'left',
worksheetName: 'KPI Dashboard',
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
tableWidth: 1300,
tableHeight: 620,
resize: 'both',
minDimensions: [17, 42],
mergeCells: {
B1: [9, 1],
B17: [7, 4],
J17: [7, 4],
B38: [15, 4],
},
media: [
{
id: '19bb08c4-6a32-441b-90e5-9db66be86313',
type: 'chart',
options: {
type: 'bar',
range: "'KPI Data'!C3:E13",
labels: 0,
datasets: [1, 0],
title: {
text: 'BUDGET',
font: { size: 40 },
},
legend: {
position: 'bottom',
display: true,
},
series: [{ color: '#92D050' }, { color: '#00B050' }],
},
cellAnchor: 'B2',
left: 0,
top: 5,
width: 434,
height: 408,
zIndex: 3,
},
{
id: 'afed067c-148d-42e1-aff6-49c328d7a22c',
type: 'chart',
options: {
type: 'bar',
range: "'KPI Data'!H3:J13",
labels: 0,
datasets: [1, 0],
title: {
text: 'REVENUE',
font: { size: 40 },
},
legend: {
position: 'bottom',
display: true,
},
series: [{ color: '#B4C7E7' }, { color: '#2E75B6' }],
},
cellAnchor: 'J2',
left: 1,
top: 5,
width: 421,
height: 409,
zIndex: 3,
},
{
id: 'df9ad462-1f05-46af-8b3f-d3d2a11e1212',
type: 'chart',
options: {
type: 'line',
range: "'KPI Data'!C3:L13",
labels: 0,
datasets: [9, 8],
title: {
text: 'PROFIT MARGINS',
font: { size: 40 },
},
legend: {
position: 'bottom',
display: true,
},
series: [
{
borderColor: '#4472C4',
color: '#00B0F0',
},
{
borderColor: '#FFC000',
color: '#ED7D31',
},
],
},
cellAnchor: 'A1',
left: 22,
top: 862,
width: 873,
height: 444,
zIndex: 3,
},
],
freezeRowControl: true,
freezeColumnControl: true,
freezeRows: [0],
worksheetId: 'cb45f57c-907c-4070-8cc5-b7b0df77babe',
meta: {},
comments: {},
cache: {},
},
],
plugins: {},
validations: [],
definedNames: {},
bar: true,
toolbar: true,
});
}
}