Fiscal Year
This demo showcases a fiscal year budget planner using JavaScript spreadsheet UI. With editable monthly fields, categorised expenses, and real-time totals, it provides a solid template for HR or finance applications requiring interactive budget tracking in the browser.
<html>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-charts@4.0.0/dist/index.min.js"></script>
<div id="spreadsheet"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YmNlNWNhMzBlMDhiODhmZDg5N2NiYWJlMTNmYzZmYzg2NzIyOWM4ZTAyMzE4MmYzYWZhMWQxMDYyNGU3Y2NlYWRhNGUwZjBlNjVlN2IxNTkxYTc1MGNmMmIzYWVhNDdmZTI2ODk4NTM3ZjIzNTdkOGExODJjNGY3ODhhOTVkMmUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNVGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts });
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
bar: true,
toolbar: true,
style: [
"font-size: 15px;font-weight: bold;font-family: Open sans;color: #000000;text-align: center;vertical-align: top;",
"font-size: 15px;font-family: Open sans;color: #000000;",
"background-color:#f17918;font-size:15px;font-weight:bold;font-family:Open sans;color:#fafdff;text-align:center;vertical-align:top",
"background-color:#f0a731;font-size:15px;font-weight:bold;font-family:Open sans;color:#fdfffe;text-align:center;vertical-align:top;border-bottom:1px solid #000000",
"background-color:#f0a731;font-size:15px;font-family:Open sans;color:#fdfffe;border-bottom:1px solid #000000",
"background-color:#f0a731;font-size:15px;font-weight:bold;font-family:Open sans;color:#f4fdff;text-align:center;vertical-align:top",
"background-color:#f0a731;font-size:15px;font-family:Open sans;color:#f4fdff",
"background-color:#77c1a7;font-size:15px;font-weight:bold;font-family:Open sans;color:#000000;text-align:center;vertical-align:top;border-top:1px solid #000000",
"background-color:#77c1a7;font-size:15px;font-family:Open sans;color:#000000;border-top:1px solid #000000",
"background-color:#fbebb7;font-size:15px;font-weight:bold;font-family:Open sans;color:#000000;text-align:center;vertical-align:top;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#fbebb7;font-size:15px;font-family:Open sans;color:#000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#77c1a7;font-size:15px;font-weight:bold;font-family:Open sans;color:#000000;text-align:center;vertical-align:top;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#77c1a7;font-size:15px;font-family:Open sans;color:#000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#f0a731;font-size:15px;font-weight:bold;font-family:Open sans;color:#fdfffe;text-align:center;vertical-align:top;border-bottom:1px solid #020018",
"background-color:#f0a731;font-size:15px;font-family:Open sans;color:#fdfffe;border-bottom:1px solid #020018"
],
worksheets: [
{
data: [
["","January","February","March","April","May","June","July","August","September","October","November","December"],
["Revenue - Product",459301,421849,454942,485108,481892,477166,447446,447714,447719,416951,482545,479651],
["Revenue - Services",804212,810103,761531,798971,847777,849565,769154,776036,816283,798603,779462,792224],
["Revenue - Other",429849,351896,422604,432253,391601,441223,427618,419093,444278,428409,380026,361942],
["Gross Sales","=SUM(B2:B4)","=SUM(C2:C4)","=SUM(D2:D4)","=SUM(E2:E4)","=SUM(F2:F4)","=SUM(G2:G4)","=SUM(H2:H4)","=SUM(I2:I4)","=SUM(J2:J4)","=SUM(K2:K4)","=SUM(L2:L4)","=SUM(M2:M4)"],
["Cost of Goods Sold",101443,116772,102418,101755,106734,114183,117243,105868,110807,110781,116224,103729],
["Other Direct Charges",46213,49227,49568,48373,48350,46444,42509,44390,43281,49472,42179,41532],
["Cost of Sales","=SUM(B6:B7)","=SUM(C6:C7)","=SUM(D6:D7)","=SUM(E6:E7)","=SUM(F6:F7)","=SUM(G6:G7)","=SUM(H6:H7)","=SUM(I6:I7)","=SUM(J6:J7)","=SUM(K6:K7)","=SUM(L6:L7)","=SUM(M6:M7)"],
["Gross Margin",1545706,1417849,1487091,1566204,1566186,1607327,1484466,1492585,1554192,1483710,1483630,1488556],
["Payroll",255222,270347,257795,275535,263382,255333,269035,279715,259117,260534,263517,275924],
["General and Administrative",25812,29369,32788,29175,29906,29375,25824,33117,29412,28372,28560,28001],
["Travel",24346,21636,22327,24345,23383,23840,24941,22601,23889,22471,23944,21829],
["Marketing",10041,10039,13024,11738,10270,14058,11243,10032,11598,12913,10295,13882],
["Outsourcing",10891,8521,11256,8159,8506,11654,11647,9357,11714,11179,9643,9564],
["Utilities",9416,8945,9000,9273,9686,9438,9242,8165,9789,8065,9089,9591],
["Operating Expenses","=SUM(B10:B15)","=SUM(C10:C15)","=SUM(D10:D15)","=SUM(E10:E15)","=SUM(F10:F15)","=SUM(G10:G15)","=SUM(H10:H15)","=SUM(I10:I15)","=SUM(J10:J15)","=SUM(K10:K15)","=SUM(L10:L15)","=SUM(M10:M15)"],
["EBITDA","=B9-B16","=C9-C16","=D9-D16","=E9-E16","=F9-F16","=G9-G16","=H9-H16","=I9-I16","=J9-J16","=K9-K16","=L9-L16","=M9-M16"],
["Interest Expense",1281,948,1443,992,1400,999,821,977,1324,1317,1004,1007],
["Interest Income",1026,1477,1004,1317,1189,1120,1214,1480,1404,1319,1164,1253],
["Depreciation and Amortization",659,543,734,718,543,663,536,641,685,552,793,509],
["Earnings Before Tax","=B17-SUM(B18:B20)","=C17-SUM(C18:C20)","=D17-SUM(D18:D20)","=E17-SUM(E18:E20)","=F17-SUM(F18:F20)","=G17-SUM(G18:G20)","=H17-SUM(H18:H20)","=I17-SUM(I18:I20)","=J17-SUM(J18:J20)","=K17-SUM(K18:K20)","=L17-SUM(L18:L20)","=M17-SUM(M18:M20)"],
["Taxes",205540,181726,193753,205289,207450,214724,192506,192008,205371,193736,193451,192015],
["Net Income",1003524,887252,945975,1002297,1012849,1048363,939885,937452,1002697,945890,944498,937487]
],
columns: [
{ type: 'text', width: 120 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 }
],
style: {
"A1:M1": 2,
"A2": 0,
"B2:M2": 1,
"A3": 0,
"B3:M3": 1,
"A4": 0,
"B4:M4": 1,
"A5": 5,
"B5:M5": 5,
"A6": 0,
"B6:M6": 1,
"A7": 0,
"B7:M7": 1,
"A8": 7,
"B8:M8": 8,
"A9": 9,
"B9:M9": 10,
"A10": 0,
"B10:M10": 1,
"A11": 0,
"B11:M11": 1,
"A12": 0,
"B12:M12": 1,
"A13": 0,
"B13:M13": 1,
"A14": 0,
"B14:M14": 1,
"A15": 0,
"B15:M15": 1,
"A16": 13,
"B16:M16": 14,
"A17": 3,
"B17:M17": 4,
"A18": 0,
"B18:M18": 1,
"A19": 0,
"B19:M19": 1,
"A20": 0,
"B20:M20": 1,
"A21": 9,
"B21:M21": 10,
"A22": 0,
"B22:M22": 1,
"A23": 11,
"B23:M23": 12,
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Sheet1",
defaultRowHeight: 30,
defaultColWidth: 113,
tableOverflow: true,
minDimensions: [16, 25],
media: [
{
"id": "33ff7359-81bd-4b71-a99e-1491674ca74f",
"type": "chart",
"options": {
"orientation": false,
"range": "Sheet1!B1:M5",
"headers": false,
"title": {
"text": "Gross Sales",
"font": { "size": 19, "color": "#595959" }
},
"labels": 0,
"datasets": [4],
"series": [{ "color": "#f07818" }],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
},
"side": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
}
},
"type": "column",
"legend": { "display": false }
},
"cellAnchor": "A25",
"left": 4,
"top": 2,
"width": 488,
"height": 372,
"zIndex": 3
},
{
"id": "228b778f-ef36-432c-b79d-96897eca5870",
"type": "chart",
"options": {
"orientation": false,
"range": "Sheet1!B1:M23",
"headers": false,
"title": {
"text": "Net Income by Month",
"font": { "size": 19, "color": "#595959" }
},
"labels": 0,
"datasets": [22],
"series": [
{
"drawNullValues": false,
"borderColor": "#78c0a8",
"line": { "width": 1 },
"color": "#78c0a8",
"point": { "style": false }
}
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
},
"side": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
}
},
"type": "line",
"legend": { "display": false }
},
"cellAnchor": "D25",
"left": 76,
"top": 4,
"width": 488,
"height": 372,
"zIndex": 3,
"rotate": 0
},
{
"id": "c535c6b7-90fe-4c19-a006-c3fc0c22a282",
"type": "chart",
"options": {
"orientation": false,
"range": "Sheet1!A1:M15",
"headers": true,
"title": {
"text": "Operating Expenses Breakdown by Month",
"font": { "size": 19, "color": "#595959" }
},
"labels": 0,
"datasets": [9, 10, 11, 12, 13, 14],
"series": [
{ "color": "#f0a830" },
{ "color": "#f07818" },
{ "color": "#78c0a8" },
{ "color": "#fcebb6" },
{ "color": "#5e412f" },
{ "color": "#276A7C" }
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
},
"side": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" },
"min": 200000,
"forceTheLimits": true
}
},
"type": "stacked-column",
"legend": {
"display": true,
"position": "right",
"labels": { "font": { "size": 12, "color": "#595959" } }
}
},
"cellAnchor": "I25",
"left": 11,
"top": 2,
"width": 556,
"height": 372,
"zIndex": 3
}
],
}
],
}
);
</script>
</html>
import React, { useEffect, useRef } from 'react';
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';
import charts from '@jspreadsheet/charts';
import studio from '@lemonadejs/studio';
import chartjs from '@jspreadsheet/formula-charts';
import '@lemonadejs/studio';
import '@lemonadejs/studio/dist/style.css';
import 'jsuites/dist/jsuites.css';
import 'jspreadsheet/dist/jspreadsheet.css';
import '@jspreadsheet/formula-charts';
import '@jspreadsheet/charts/dist/style.css';
import './App.css';
export default function App() {
const spreadsheetRef = useRef(null);
useEffect(() => {
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YmNlNWNhMzBlMDhiODhmZDg5N2NiYWJlMTNmYzZmYzg2NzIyOWM4ZTAyMzE4MmYzYWZhMWQxMDYyNGU3Y2NlYWRhNGUwZjBlNjVlN2IxNTkxYTc1MGNmMmIzYWVhNDdmZTI2ODk4NTM3ZjIzNTdkOGExODJjNGY3ODhhOTVkMmUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNVGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts });
const instance = jspreadsheet(spreadsheetRef.current, {
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
bar: true,
toolbar: true,
style: [
"font-size: 15px;font-weight: bold;font-family: Open sans;color: #000000;text-align: center;vertical-align: top;",
"font-size: 15px;font-family: Open sans;color: #000000;",
"background-color:#f17918;font-size:15px;font-weight:bold;font-family:Open sans;color:#fafdff;text-align:center;vertical-align:top",
"background-color:#f0a731;font-size:15px;font-weight:bold;font-family:Open sans;color:#fdfffe;text-align:center;vertical-align:top;border-bottom:1px solid #000000",
"background-color:#f0a731;font-size:15px;font-family:Open sans;color:#fdfffe;border-bottom:1px solid #000000",
"background-color:#f0a731;font-size:15px;font-weight:bold;font-family:Open sans;color:#f4fdff;text-align:center;vertical-align:top",
"background-color:#f0a731;font-size:15px;font-family:Open sans;color:#f4fdff",
"background-color:#77c1a7;font-size:15px;font-weight:bold;font-family:Open sans;color:#000000;text-align:center;vertical-align:top;border-top:1px solid #000000",
"background-color:#77c1a7;font-size:15px;font-family:Open sans;color:#000000;border-top:1px solid #000000",
"background-color:#fbebb7;font-size:15px;font-weight:bold;font-family:Open sans;color:#000000;text-align:center;vertical-align:top;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#fbebb7;font-size:15px;font-family:Open sans;color:#000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#77c1a7;font-size:15px;font-weight:bold;font-family:Open sans;color:#000000;text-align:center;vertical-align:top;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#77c1a7;font-size:15px;font-family:Open sans;color:#000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#f0a731;font-size:15px;font-weight:bold;font-family:Open sans;color:#fdfffe;text-align:center;vertical-align:top;border-bottom:1px solid #020018",
"background-color:#f0a731;font-size:15px;font-family:Open sans;color:#fdfffe;border-bottom:1px solid #020018"
],
worksheets: [
{
data: [
["","January","February","March","April","May","June","July","August","September","October","November","December"],
["Revenue - Product",459301,421849,454942,485108,481892,477166,447446,447714,447719,416951,482545,479651],
["Revenue - Services",804212,810103,761531,798971,847777,849565,769154,776036,816283,798603,779462,792224],
["Revenue - Other",429849,351896,422604,432253,391601,441223,427618,419093,444278,428409,380026,361942],
["Gross Sales","=SUM(B2:B4)","=SUM(C2:C4)","=SUM(D2:D4)","=SUM(E2:E4)","=SUM(F2:F4)","=SUM(G2:G4)","=SUM(H2:H4)","=SUM(I2:I4)","=SUM(J2:J4)","=SUM(K2:K4)","=SUM(L2:L4)","=SUM(M2:M4)"],
["Cost of Goods Sold",101443,116772,102418,101755,106734,114183,117243,105868,110807,110781,116224,103729],
["Other Direct Charges",46213,49227,49568,48373,48350,46444,42509,44390,43281,49472,42179,41532],
["Cost of Sales","=SUM(B6:B7)","=SUM(C6:C7)","=SUM(D6:D7)","=SUM(E6:E7)","=SUM(F6:F7)","=SUM(G6:G7)","=SUM(H6:H7)","=SUM(I6:I7)","=SUM(J6:J7)","=SUM(K6:K7)","=SUM(L6:L7)","=SUM(M6:M7)"],
["Gross Margin",1545706,1417849,1487091,1566204,1566186,1607327,1484466,1492585,1554192,1483710,1483630,1488556],
["Payroll",255222,270347,257795,275535,263382,255333,269035,279715,259117,260534,263517,275924],
["General and Administrative",25812,29369,32788,29175,29906,29375,25824,33117,29412,28372,28560,28001],
["Travel",24346,21636,22327,24345,23383,23840,24941,22601,23889,22471,23944,21829],
["Marketing",10041,10039,13024,11738,10270,14058,11243,10032,11598,12913,10295,13882],
["Outsourcing",10891,8521,11256,8159,8506,11654,11647,9357,11714,11179,9643,9564],
["Utilities",9416,8945,9000,9273,9686,9438,9242,8165,9789,8065,9089,9591],
["Operating Expenses","=SUM(B10:B15)","=SUM(C10:C15)","=SUM(D10:D15)","=SUM(E10:E15)","=SUM(F10:F15)","=SUM(G10:G15)","=SUM(H10:H15)","=SUM(I10:I15)","=SUM(J10:J15)","=SUM(K10:K15)","=SUM(L10:L15)","=SUM(M10:M15)"],
["EBITDA","=B9-B16","=C9-C16","=D9-D16","=E9-E16","=F9-F16","=G9-G16","=H9-H16","=I9-I16","=J9-J16","=K9-K16","=L9-L16","=M9-M16"],
["Interest Expense",1281,948,1443,992,1400,999,821,977,1324,1317,1004,1007],
["Interest Income",1026,1477,1004,1317,1189,1120,1214,1480,1404,1319,1164,1253],
["Depreciation and Amortization",659,543,734,718,543,663,536,641,685,552,793,509],
["Earnings Before Tax","=B17-SUM(B18:B20)","=C17-SUM(C18:C20)","=D17-SUM(D18:D20)","=E17-SUM(E18:E20)","=F17-SUM(F18:F20)","=G17-SUM(G18:G20)","=H17-SUM(H18:H20)","=I17-SUM(I18:I20)","=J17-SUM(J18:J20)","=K17-SUM(K18:K20)","=L17-SUM(L18:L20)","=M17-SUM(M18:M20)"],
["Taxes",205540,181726,193753,205289,207450,214724,192506,192008,205371,193736,193451,192015],
["Net Income",1003524,887252,945975,1002297,1012849,1048363,939885,937452,1002697,945890,944498,937487]
],
columns: [
{ type: 'text', width: 120 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 }
],
style: {
"A1:M1": 2,
"A2": 0,
"B2:M2": 1,
"A3": 0,
"B3:M3": 1,
"A4": 0,
"B4:M4": 1,
"A5": 5,
"B5:M5": 5,
"A6": 0,
"B6:M6": 1,
"A7": 0,
"B7:M7": 1,
"A8": 7,
"B8:M8": 8,
"A9": 9,
"B9:M9": 10,
"A10": 0,
"B10:M10": 1,
"A11": 0,
"B11:M11": 1,
"A12": 0,
"B12:M12": 1,
"A13": 0,
"B13:M13": 1,
"A14": 0,
"B14:M14": 1,
"A15": 0,
"B15:M15": 1,
"A16": 13,
"B16:M16": 14,
"A17": 3,
"B17:M17": 4,
"A18": 0,
"B18:M18": 1,
"A19": 0,
"B19:M19": 1,
"A20": 0,
"B20:M20": 1,
"A21": 9,
"B21:M21": 10,
"A22": 0,
"B22:M22": 1,
"A23": 11,
"B23:M23": 12,
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Sheet1",
defaultRowHeight: 30,
defaultColWidth: 113,
tableOverflow: true,
minDimensions: [16, 25],
media: [
{
"id": "33ff7359-81bd-4b71-a99e-1491674ca74f",
"type": "chart",
"options": {
"orientation": false,
"range": "Sheet1!B1:M5",
"headers": false,
"title": {
"text": "Gross Sales",
"font": { "size": 19, "color": "#595959" }
},
"labels": 0,
"datasets": [4],
"series": [{ "color": "#f07818" }],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
},
"side": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
}
},
"type": "column",
"legend": { "display": false }
},
"cellAnchor": "A25",
"left": 4,
"top": 2,
"width": 488,
"height": 372,
"zIndex": 3
},
{
"id": "228b778f-ef36-432c-b79d-96897eca5870",
"type": "chart",
"options": {
"orientation": false,
"range": "Sheet1!B1:M23",
"headers": false,
"title": {
"text": "Net Income by Month",
"font": { "size": 19, "color": "#595959" }
},
"labels": 0,
"datasets": [22],
"series": [
{
"drawNullValues": false,
"borderColor": "#78c0a8",
"line": { "width": 1 },
"color": "#78c0a8",
"point": { "style": false }
}
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
},
"side": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
}
},
"type": "line",
"legend": { "display": false }
},
"cellAnchor": "D25",
"left": 76,
"top": 4,
"width": 488,
"height": 372,
"zIndex": 3,
"rotate": 0
},
{
"id": "c535c6b7-90fe-4c19-a006-c3fc0c22a282",
"type": "chart",
"options": {
"orientation": false,
"range": "Sheet1!A1:M15",
"headers": true,
"title": {
"text": "Operating Expenses Breakdown by Month",
"font": { "size": 19, "color": "#595959" }
},
"labels": 0,
"datasets": [9, 10, 11, 12, 13, 14],
"series": [
{ "color": "#f0a830" },
{ "color": "#f07818" },
{ "color": "#78c0a8" },
{ "color": "#fcebb6" },
{ "color": "#5e412f" },
{ "color": "#276A7C" }
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
},
"side": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" },
"min": 200000,
"forceTheLimits": true
}
},
"type": "stacked-column",
"legend": {
"display": true,
"position": "right",
"labels": { "font": { "size": 12, "color": "#595959" } }
}
},
"cellAnchor": "I25",
"left": 11,
"top": 2,
"width": 556,
"height": 372,
"zIndex": 3
}
],
}
],
}
);
return () => {
instance?.destroy?.();
};
}, []);
return <div ref={spreadsheetRef}></div>;
}
<template>
<Spreadsheet
ref="spreadsheet"
:license="license"
:tableOverflow="true"
tableWidth="1360"
tableHeight="620"
:resizable="true"
: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';
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YmNlNWNhMzBlMDhiODhmZDg5N2NiYWJlMTNmYzZmYzg2NzIyOWM4ZTAyMzE4MmYzYWZhMWQxMDYyNGU3Y2NlYWRhNGUwZjBlNjVlN2IxNTkxYTc1MGNmMmIzYWVhNDdmZTI2ODk4NTM3ZjIzNTdkOGExODJjNGY3ODhhOTVkMmUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNVGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts });
export default {
components: { Spreadsheet, Worksheet },
data() {
return {
// Set your JSS license key (The following key only works for one day)
license: 'YmNlNWNhMzBlMDhiODhmZDg5N2NiYWJlMTNmYzZmYzg2NzIyOWM4ZTAyMzE4MmYzYWZhMWQxMDYyNGU3Y2NlYWRhNGUwZjBlNjVlN2IxNTkxYTc1MGNmMmIzYWVhNDdmZTI2ODk4NTM3ZjIzNTdkOGExODJjNGY3ODhhOTVkMmUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNVGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9',
globalStyle: [
"font-size: 15px;font-weight: bold;font-family: Open sans;color: #000000;text-align: center;vertical-align: top;",
"font-size: 15px;font-family: Open sans;color: #000000;",
"background-color:#f17918;font-size:15px;font-weight:bold;font-family:Open sans;color:#fafdff;text-align:center;vertical-align:top",
"background-color:#f0a731;font-size:15px;font-weight:bold;font-family:Open sans;color:#fdfffe;text-align:center;vertical-align:top;border-bottom:1px solid #000000",
"background-color:#f0a731;font-size:15px;font-family:Open sans;color:#fdfffe;border-bottom:1px solid #000000",
"background-color:#f0a731;font-size:15px;font-weight:bold;font-family:Open sans;color:#f4fdff;text-align:center;vertical-align:top",
"background-color:#f0a731;font-size:15px;font-family:Open sans;color:#f4fdff",
"background-color:#77c1a7;font-size:15px;font-weight:bold;font-family:Open sans;color:#000000;text-align:center;vertical-align:top;border-top:1px solid #000000",
"background-color:#77c1a7;font-size:15px;font-family:Open sans;color:#000000;border-top:1px solid #000000",
"background-color:#fbebb7;font-size:15px;font-weight:bold;font-family:Open sans;color:#000000;text-align:center;vertical-align:top;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#fbebb7;font-size:15px;font-family:Open sans;color:#000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#77c1a7;font-size:15px;font-weight:bold;font-family:Open sans;color:#000000;text-align:center;vertical-align:top;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#77c1a7;font-size:15px;font-family:Open sans;color:#000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#f0a731;font-size:15px;font-weight:bold;font-family:Open sans;color:#fdfffe;text-align:center;vertical-align:top;border-bottom:1px solid #020018",
"background-color:#f0a731;font-size:15px;font-family:Open sans;color:#fdfffe;border-bottom:1px solid #020018"
],
worksheets: [
{
data: [
["","January","February","March","April","May","June","July","August","September","October","November","December"],
["Revenue - Product",459301,421849,454942,485108,481892,477166,447446,447714,447719,416951,482545,479651],
["Revenue - Services",804212,810103,761531,798971,847777,849565,769154,776036,816283,798603,779462,792224],
["Revenue - Other",429849,351896,422604,432253,391601,441223,427618,419093,444278,428409,380026,361942],
["Gross Sales","=SUM(B2:B4)","=SUM(C2:C4)","=SUM(D2:D4)","=SUM(E2:E4)","=SUM(F2:F4)","=SUM(G2:G4)","=SUM(H2:H4)","=SUM(I2:I4)","=SUM(J2:J4)","=SUM(K2:K4)","=SUM(L2:L4)","=SUM(M2:M4)"],
["Cost of Goods Sold",101443,116772,102418,101755,106734,114183,117243,105868,110807,110781,116224,103729],
["Other Direct Charges",46213,49227,49568,48373,48350,46444,42509,44390,43281,49472,42179,41532],
["Cost of Sales","=SUM(B6:B7)","=SUM(C6:C7)","=SUM(D6:D7)","=SUM(E6:E7)","=SUM(F6:F7)","=SUM(G6:G7)","=SUM(H6:H7)","=SUM(I6:I7)","=SUM(J6:J7)","=SUM(K6:K7)","=SUM(L6:L7)","=SUM(M6:M7)"],
["Gross Margin",1545706,1417849,1487091,1566204,1566186,1607327,1484466,1492585,1554192,1483710,1483630,1488556],
["Payroll",255222,270347,257795,275535,263382,255333,269035,279715,259117,260534,263517,275924],
["General and Administrative",25812,29369,32788,29175,29906,29375,25824,33117,29412,28372,28560,28001],
["Travel",24346,21636,22327,24345,23383,23840,24941,22601,23889,22471,23944,21829],
["Marketing",10041,10039,13024,11738,10270,14058,11243,10032,11598,12913,10295,13882],
["Outsourcing",10891,8521,11256,8159,8506,11654,11647,9357,11714,11179,9643,9564],
["Utilities",9416,8945,9000,9273,9686,9438,9242,8165,9789,8065,9089,9591],
["Operating Expenses","=SUM(B10:B15)","=SUM(C10:C15)","=SUM(D10:D15)","=SUM(E10:E15)","=SUM(F10:F15)","=SUM(G10:G15)","=SUM(H10:H15)","=SUM(I10:I15)","=SUM(J10:J15)","=SUM(K10:K15)","=SUM(L10:L15)","=SUM(M10:M15)"],
["EBITDA","=B9-B16","=C9-C16","=D9-D16","=E9-E16","=F9-F16","=G9-G16","=H9-H16","=I9-I16","=J9-J16","=K9-K16","=L9-L16","=M9-M16"],
["Interest Expense",1281,948,1443,992,1400,999,821,977,1324,1317,1004,1007],
["Interest Income",1026,1477,1004,1317,1189,1120,1214,1480,1404,1319,1164,1253],
["Depreciation and Amortization",659,543,734,718,543,663,536,641,685,552,793,509],
["Earnings Before Tax","=B17-SUM(B18:B20)","=C17-SUM(C18:C20)","=D17-SUM(D18:D20)","=E17-SUM(E18:E20)","=F17-SUM(F18:F20)","=G17-SUM(G18:G20)","=H17-SUM(H18:H20)","=I17-SUM(I18:I20)","=J17-SUM(J18:J20)","=K17-SUM(K18:K20)","=L17-SUM(L18:L20)","=M17-SUM(M18:M20)"],
["Taxes",205540,181726,193753,205289,207450,214724,192506,192008,205371,193736,193451,192015],
["Net Income",1003524,887252,945975,1002297,1012849,1048363,939885,937452,1002697,945890,944498,937487]
],
columns: [
{ type: 'text', width: 120 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 }
],
style: {
"A1:M1": 2,
"A2": 0,
"B2:M2": 1,
"A3": 0,
"B3:M3": 1,
"A4": 0,
"B4:M4": 1,
"A5": 5,
"B5:M5": 5,
"A6": 0,
"B6:M6": 1,
"A7": 0,
"B7:M7": 1,
"A8": 7,
"B8:M8": 8,
"A9": 9,
"B9:M9": 10,
"A10": 0,
"B10:M10": 1,
"A11": 0,
"B11:M11": 1,
"A12": 0,
"B12:M12": 1,
"A13": 0,
"B13:M13": 1,
"A14": 0,
"B14:M14": 1,
"A15": 0,
"B15:M15": 1,
"A16": 13,
"B16:M16": 14,
"A17": 3,
"B17:M17": 4,
"A18": 0,
"B18:M18": 1,
"A19": 0,
"B19:M19": 1,
"A20": 0,
"B20:M20": 1,
"A21": 9,
"B21:M21": 10,
"A22": 0,
"B22:M22": 1,
"A23": 11,
"B23:M23": 12,
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Sheet1",
defaultRowHeight: 30,
defaultColWidth: 113,
tableOverflow: true,
minDimensions: [13, 25],
media: [
{
"id": "33ff7359-81bd-4b71-a99e-1491674ca74f",
"type": "chart",
"options": {
"orientation": false,
"range": "Sheet1!B1:M5",
"headers": false,
"title": {
"text": "Gross Sales",
"font": { "size": 19, "color": "#595959" }
},
"labels": 0,
"datasets": [4],
"series": [{ "color": "#f07818" }],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
},
"side": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
}
},
"type": "column",
"legend": { "display": false }
},
"cellAnchor": "A25",
"left": 4,
"top": 2,
"width": 488,
"height": 372,
"zIndex": 3
},
{
"id": "228b778f-ef36-432c-b79d-96897eca5870",
"type": "chart",
"options": {
"orientation": false,
"range": "Sheet1!B1:M23",
"headers": false,
"title": {
"text": "Net Income by Month",
"font": { "size": 19, "color": "#595959" }
},
"labels": 0,
"datasets": [22],
"series": [
{
"drawNullValues": false,
"borderColor": "#78c0a8",
"line": { "width": 1 },
"color": "#78c0a8",
"point": { "style": false }
}
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
},
"side": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
}
},
"type": "line",
"legend": { "display": false }
},
"cellAnchor": "D25",
"left": 76,
"top": 4,
"width": 488,
"height": 372,
"zIndex": 3,
"rotate": 0
},
{
"id": "c535c6b7-90fe-4c19-a006-c3fc0c22a282",
"type": "chart",
"options": {
"orientation": false,
"range": "Sheet1!A1:M15",
"headers": true,
"title": {
"text": "Operating Expenses Breakdown by Month",
"font": { "size": 19, "color": "#595959" }
},
"labels": 0,
"datasets": [9, 10, 11, 12, 13, 14],
"series": [
{ "color": "#f0a830" },
{ "color": "#f07818" },
{ "color": "#78c0a8" },
{ "color": "#fcebb6" },
{ "color": "#5e412f" },
{ "color": "#276A7C" }
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
},
"side": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" },
"min": 200000,
"forceTheLimits": true
}
},
"type": "stacked-column",
"legend": {
"display": true,
"position": "right",
"labels": { "font": { "size": 12, "color": "#595959" } }
}
},
"cellAnchor": "I25",
"left": 11,
"top": 2,
"width": 556,
"height": 372,
"zIndex": 3
}
],
}
],
bar: true,
toolbar: true,
};
},
};
</script>
import { Component, ElementRef, ViewChild } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
import charts from '@jspreadsheet/charts';
import formula from '@jspreadsheet/formula-pro';
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YmNlNWNhMzBlMDhiODhmZDg5N2NiYWJlMTNmYzZmYzg2NzIyOWM4ZTAyMzE4MmYzYWZhMWQxMDYyNGU3Y2NlYWRhNGUwZjBlNjVlN2IxNTkxYTc1MGNmMmIzYWVhNDdmZTI2ODk4NTM3ZjIzNTdkOGExODJjNGY3ODhhOTVkMmUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNVGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
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, {
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
bar: true,
toolbar: true,
style: [
"font-size: 15px;font-weight: bold;font-family: Open sans;color: #000000;text-align: center;vertical-align: top;",
"font-size: 15px;font-family: Open sans;color: #000000;",
"background-color:#f17918;font-size:15px;font-weight:bold;font-family:Open sans;color:#fafdff;text-align:center;vertical-align:top",
"background-color:#f0a731;font-size:15px;font-weight:bold;font-family:Open sans;color:#fdfffe;text-align:center;vertical-align:top;border-bottom:1px solid #000000",
"background-color:#f0a731;font-size:15px;font-family:Open sans;color:#fdfffe;border-bottom:1px solid #000000",
"background-color:#f0a731;font-size:15px;font-weight:bold;font-family:Open sans;color:#f4fdff;text-align:center;vertical-align:top",
"background-color:#f0a731;font-size:15px;font-family:Open sans;color:#f4fdff",
"background-color:#77c1a7;font-size:15px;font-weight:bold;font-family:Open sans;color:#000000;text-align:center;vertical-align:top;border-top:1px solid #000000",
"background-color:#77c1a7;font-size:15px;font-family:Open sans;color:#000000;border-top:1px solid #000000",
"background-color:#fbebb7;font-size:15px;font-weight:bold;font-family:Open sans;color:#000000;text-align:center;vertical-align:top;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#fbebb7;font-size:15px;font-family:Open sans;color:#000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#77c1a7;font-size:15px;font-weight:bold;font-family:Open sans;color:#000000;text-align:center;vertical-align:top;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#77c1a7;font-size:15px;font-family:Open sans;color:#000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#f0a731;font-size:15px;font-weight:bold;font-family:Open sans;color:#fdfffe;text-align:center;vertical-align:top;border-bottom:1px solid #020018",
"background-color:#f0a731;font-size:15px;font-family:Open sans;color:#fdfffe;border-bottom:1px solid #020018"
],
worksheets: [
{
data: [
["","January","February","March","April","May","June","July","August","September","October","November","December"],
["Revenue - Product",459301,421849,454942,485108,481892,477166,447446,447714,447719,416951,482545,479651],
["Revenue - Services",804212,810103,761531,798971,847777,849565,769154,776036,816283,798603,779462,792224],
["Revenue - Other",429849,351896,422604,432253,391601,441223,427618,419093,444278,428409,380026,361942],
["Gross Sales","=SUM(B2:B4)","=SUM(C2:C4)","=SUM(D2:D4)","=SUM(E2:E4)","=SUM(F2:F4)","=SUM(G2:G4)","=SUM(H2:H4)","=SUM(I2:I4)","=SUM(J2:J4)","=SUM(K2:K4)","=SUM(L2:L4)","=SUM(M2:M4)"],
["Cost of Goods Sold",101443,116772,102418,101755,106734,114183,117243,105868,110807,110781,116224,103729],
["Other Direct Charges",46213,49227,49568,48373,48350,46444,42509,44390,43281,49472,42179,41532],
["Cost of Sales","=SUM(B6:B7)","=SUM(C6:C7)","=SUM(D6:D7)","=SUM(E6:E7)","=SUM(F6:F7)","=SUM(G6:G7)","=SUM(H6:H7)","=SUM(I6:I7)","=SUM(J6:J7)","=SUM(K6:K7)","=SUM(L6:L7)","=SUM(M6:M7)"],
["Gross Margin",1545706,1417849,1487091,1566204,1566186,1607327,1484466,1492585,1554192,1483710,1483630,1488556],
["Payroll",255222,270347,257795,275535,263382,255333,269035,279715,259117,260534,263517,275924],
["General and Administrative",25812,29369,32788,29175,29906,29375,25824,33117,29412,28372,28560,28001],
["Travel",24346,21636,22327,24345,23383,23840,24941,22601,23889,22471,23944,21829],
["Marketing",10041,10039,13024,11738,10270,14058,11243,10032,11598,12913,10295,13882],
["Outsourcing",10891,8521,11256,8159,8506,11654,11647,9357,11714,11179,9643,9564],
["Utilities",9416,8945,9000,9273,9686,9438,9242,8165,9789,8065,9089,9591],
["Operating Expenses","=SUM(B10:B15)","=SUM(C10:C15)","=SUM(D10:D15)","=SUM(E10:E15)","=SUM(F10:F15)","=SUM(G10:G15)","=SUM(H10:H15)","=SUM(I10:I15)","=SUM(J10:J15)","=SUM(K10:K15)","=SUM(L10:L15)","=SUM(M10:M15)"],
["EBITDA","=B9-B16","=C9-C16","=D9-D16","=E9-E16","=F9-F16","=G9-G16","=H9-H16","=I9-I16","=J9-J16","=K9-K16","=L9-L16","=M9-M16"],
["Interest Expense",1281,948,1443,992,1400,999,821,977,1324,1317,1004,1007],
["Interest Income",1026,1477,1004,1317,1189,1120,1214,1480,1404,1319,1164,1253],
["Depreciation and Amortization",659,543,734,718,543,663,536,641,685,552,793,509],
["Earnings Before Tax","=B17-SUM(B18:B20)","=C17-SUM(C18:C20)","=D17-SUM(D18:D20)","=E17-SUM(E18:E20)","=F17-SUM(F18:F20)","=G17-SUM(G18:G20)","=H17-SUM(H18:H20)","=I17-SUM(I18:I20)","=J17-SUM(J18:J20)","=K17-SUM(K18:K20)","=L17-SUM(L18:L20)","=M17-SUM(M18:M20)"],
["Taxes",205540,181726,193753,205289,207450,214724,192506,192008,205371,193736,193451,192015],
["Net Income",1003524,887252,945975,1002297,1012849,1048363,939885,937452,1002697,945890,944498,937487]
],
columns: [
{ type: 'text', width: 120 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 },
{ type: 'numeric', mask: '_-[$$-409]* #,##0.00_ ;_-[$$-409]* -#,##0.00 ;_-[$$-409]* -??_ ;_-@_ ', width: 100 }
],
style: {
"A1:M1": 2,
"A2": 0,
"B2:M2": 1,
"A3": 0,
"B3:M3": 1,
"A4": 0,
"B4:M4": 1,
"A5": 5,
"B5:M5": 5,
"A6": 0,
"B6:M6": 1,
"A7": 0,
"B7:M7": 1,
"A8": 7,
"B8:M8": 8,
"A9": 9,
"B9:M9": 10,
"A10": 0,
"B10:M10": 1,
"A11": 0,
"B11:M11": 1,
"A12": 0,
"B12:M12": 1,
"A13": 0,
"B13:M13": 1,
"A14": 0,
"B14:M14": 1,
"A15": 0,
"B15:M15": 1,
"A16": 13,
"B16:M16": 14,
"A17": 3,
"B17:M17": 4,
"A18": 0,
"B18:M18": 1,
"A19": 0,
"B19:M19": 1,
"A20": 0,
"B20:M20": 1,
"A21": 9,
"B21:M21": 10,
"A22": 0,
"B22:M22": 1,
"A23": 11,
"B23:M23": 12,
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Sheet1",
defaultRowHeight: 30,
defaultColWidth: 113,
tableOverflow: true,
minDimensions: [16, 25],
media: [
{
"id": "33ff7359-81bd-4b71-a99e-1491674ca74f",
"type": "chart",
"options": {
"orientation": false,
"range": "Sheet1!B1:M5",
"headers": false,
"title": {
"text": "Gross Sales",
"font": { "size": 19, "color": "#595959" }
},
"labels": 0,
"datasets": [4],
"series": [{ "color": "#f07818" }],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
},
"side": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
}
},
"type": "column",
"legend": { "display": false }
},
"cellAnchor": "A25",
"left": 4,
"top": 2,
"width": 488,
"height": 372,
"zIndex": 3
},
{
"id": "228b778f-ef36-432c-b79d-96897eca5870",
"type": "chart",
"options": {
"orientation": false,
"range": "Sheet1!B1:M23",
"headers": false,
"title": {
"text": "Net Income by Month",
"font": { "size": 19, "color": "#595959" }
},
"labels": 0,
"datasets": [22],
"series": [
{
"drawNullValues": false,
"borderColor": "#78c0a8",
"line": { "width": 1 },
"color": "#78c0a8",
"point": { "style": false }
}
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
},
"side": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
}
},
"type": "line",
"legend": { "display": false }
},
"cellAnchor": "D25",
"left": 76,
"top": 4,
"width": 488,
"height": 372,
"zIndex": 3,
"rotate": 0
},
{
"id": "c535c6b7-90fe-4c19-a006-c3fc0c22a282",
"type": "chart",
"options": {
"orientation": false,
"range": "Sheet1!A1:M15",
"headers": true,
"title": {
"text": "Operating Expenses Breakdown by Month",
"font": { "size": 19, "color": "#595959" }
},
"labels": 0,
"datasets": [9, 10, 11, 12, 13, 14],
"series": [
{ "color": "#f0a830" },
{ "color": "#f07818" },
{ "color": "#78c0a8" },
{ "color": "#fcebb6" },
{ "color": "#5e412f" },
{ "color": "#276A7C" }
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" }
},
"side": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "display": false },
"labels": { "size": 12, "color": "#595959" },
"min": 200000,
"forceTheLimits": true
}
},
"type": "stacked-column",
"legend": {
"display": true,
"position": "right",
"labels": { "font": { "size": 12, "color": "#595959" } }
}
},
"cellAnchor": "I25",
"left": 11,
"top": 2,
"width": 556,
"height": 372,
"zIndex": 3
}
],
}
],
});
}
}