Investment Portfolio Tracker
This demo showcases a professional, Excel-like spreadsheet layout designed for tracking and analysing stock performance. It includes key financial metrics such as purchase price, market value, and return analysis — ideal for developers building investment dashboards or financial planning tools.
<html>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/validations/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('NmMwMDQxM2JkMWQxN2Y3NjFmMDdlNDJhMzE3ODI5NWZlOGM0MzU0ZTAxZjYyY2MwNmRhZTRiN2U3OGE1YmYyMzE2YmU4NDU3YzU2NjI1MzlkOWI1ODQ3NmFlMGMzOGJhMjNjMjRlNGNkZjI0NjViNjc5Yzk1YWJhNDZmYzI4MTQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd056azROelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts, validations });
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
style: [
"font-size: 15px;font-family: Open sans;color: #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;border-bottom: 1px solid #000000;",
"font-size: 15px;font-family: Open sans;color: #000000;border-right: 1px solid #000000;border-bottom: 1px solid #000000;",
"font-size: 15px;font-family: Open sans;color: #000000;",
"font-size: 15px;font-weight: bold;font-family: Open sans;color: #000000;",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"border-right:1px solid black;border-left:1px solid black",
"border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#000000;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black;font-weight:bold",
"",
"font-weight:bold;font-size:large",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#000000;text-align:center",
"font-weight:bold;font-size:large;text-align:center",
"text-align:center",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#000000;border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-left:1px solid black",
"border-left:1px solid black",
"border-bottom:1px solid black;border-left:1px solid black",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:center",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF",
"background-color:#9e9e9e;font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;text-align:center",
"font-size:large;font-family: Open sans;color:#000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#9e9e9e;font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"font-size:x-large;font-family: Open sans;color:#000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#f4fffe;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;text-align:center;background-color:#9e9e9e",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#fdffff;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;background-color:#9e9e9e",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#fdffff;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;background-color:#9e9e9e"
],
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
toolbar: true,
worksheets: [
{
data: [
["Ticker","Company Name","Quantity","Purchase Price","Previous Close Price","Total Cost","Total Value (Prev. Close)","Unrealized Gain/Loss","Var. (%)",""],
["AAPL","=VLOOKUP(A2,HELPER!A:B,2,0)",4300,189,"=VLOOKUP(A2,HELPER!A:C,3,0)","=C2*D2","=E2*C2","=G2-F2","=E2/D2-1",""],
["MSFT","=VLOOKUP(A3,HELPER!A:B,2,0)",35000,400,"=VLOOKUP(A3,HELPER!A:C,3,0)","=C3*D3","=E3*C3","=G3-F3","=E3/D3-1",""],
["AMZN","=VLOOKUP(A4,HELPER!A:B,2,0)",3400,224,"=VLOOKUP(A4,HELPER!A:C,3,0)","=C4*D4","=E4*C4","=G4-F4","=E4/D4-1",""],
["GOOGL","=VLOOKUP(A5,HELPER!A:B,2,0)",4900,164,"=VLOOKUP(A5,HELPER!A:C,3,0)","=C5*D5","=E5*C5","=G5-F5","=E5/D5-1",""],
["META","=VLOOKUP(A6,HELPER!A:B,2,0)",2000,712,"=VLOOKUP(A6,HELPER!A:C,3,0)","=C6*D6","=E6*C6","=G6-F6","=E6/D6-1",""],
["NVDA","=VLOOKUP(A7,HELPER!A:B,2,0)",3000,151,"=VLOOKUP(A7,HELPER!A:C,3,0)","=C7*D7","=E7*C7","=G7-F7","=E7/D7-1",""],
["TSLA","=VLOOKUP(A8,HELPER!A:B,2,0)",2000,391,"=VLOOKUP(A8,HELPER!A:C,3,0)","=C8*D8","=E8*C8","=G8-F8","=E8/D8-1",""],
["BRK.B","=VLOOKUP(A9,HELPER!A:B,2,0)",1500,458,"=VLOOKUP(A9,HELPER!A:C,3,0)","=C9*D9","=E9*C9","=G9-F9","=E9/D9-1",""],
["", "", "", "", "", "", "", "", "", ""],
["","Top 3 Performers","","Total Cost","","Average Return","","","",""],
["", "", "", "=SUM(F2:F9)", "", "=D15/D12-1", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
["","Bottom 3 Performers","","Total Value (Prev. Close)","","Total Profit/Loss","","","",""],
["", "", "", "=SUM(G2:G9)", "", "=SUM(H2:H9)", "", "", "", ""],
],
columns: [
{ "width": 65, "type": "text", "align": "left" },
{ "width": 223, "type": "text", "align": "left" },
{ "width": 77, "type": "text", "align": "left" },
{"width": 169,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 147,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 143,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 167,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 150,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 75,"type": "numeric","align": "left","mask": "0.00%"},
{ "width": 60, "type": "text", "align": "left" }
],
rows: [
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 29 },
{ "height": 34 },
{ "height": 162 },
{ "height": 29 },
{ "height": 34 },
{ "height": 163 },
{ "height": 29 }
],
cells: {
"D12": { "format": "$#,##0.00" },
"F12": { "format": "0.00%" },
"D15": { "format": "$#,##0.00" },
"F15": { "format": "$#,##0.00" }
},
style: {
"A1": 25,
"B1:I1": 26,
"A2": 0,
"B2:I2": 1,
"A3": 0,
"B3:I3": 1,
"A4": 0,
"B4:I4": 1,
"A5": 0,
"B5:I5": 1,
"A6": 0,
"B6:I6": 1,
"A7": 0,
"B7:I7": 1,
"A8": 0,
"B8:I8": 1,
"A9": 0,
"B9:I9": 1,
"A11": 11,
"B11": 12,
"C11": 18,
"D11": 20,
"E11": 11,
"F11": 24,
"G11:J11": 13,
"A12": 9,
"C12": 2,
"D12": 21,
"E12": 2,
"F12": 23,
"A13": 9,
"C13:E13": 2,
"A14": 9,
"B14": 10,
"C14": 2,
"D14": 22,
"E14": 2,
"F14": 25,
"A15": 9,
"C15": 2,
"D15": 21,
"E15": 2,
"F15": 21,
"A16": 3,
"C16:D16": 19,
"E16:F16": 3,
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Sheet",
defaultColWidth: 66,
tableOverflow: true,
minDimensions: [10, 16],
worksheetId: "3e6c9903-5a3a-49de-a576-0d1149617487",
media: [
{
"type": "chart",
"width": 222,
"height": 161,
"options": {
"type": "line",
"range": "'Helper'!E2:F4",
"orientation": 1,
"labels": 0,
"series": [
{
"color": "#006100",
"borderColor": "#006100",
"border": { "width": 2 }
}
]
},
"id": "f7d943fb-6435-46b1-bed6-c6e94eec1742",
"top": 1,
"left": 1,
"cellAnchor": "B12",
"zIndex": 1,
"rotate": 0
},
{
"type": "chart",
"width": 222,
"height": 162,
"options": {
"type": "line",
"range": "'Helper'!E7:F9",
"orientation": 1,
"labels": 0,
"series": [
{
"color": "#DA2E08",
"borderColor": "#DA2E08",
"border": { "width": 2 }
}
]
},
"id": "6a1d2da7-207a-4ccd-8bfc-c12fb9c7eefc",
"top": 1,
"left": 1,
"cellAnchor": "B15",
"zIndex": 2,
"rotate": 0
}
]
},
{
data: [
["Ticker","Company Name","Previous Close Price",null,"Top 3 Performers"],
["AAPL","Apple Inc.",202.92,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,-1),1)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,-1),1)"],
["MSFT","Microsoft Corporation",527.75,null,"=INDEX(SORTBY('Sheet'!A3:A10,'Sheet'!I3:I10,-1),2)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,-1),2)"],
["AMZN","Amazon.com Inc.",213.75,null,"=INDEX(SORTBY('Sheet'!A4:A11,'Sheet'!I4:I11,-1),3)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,-1),3)"],
["GOOGL", "Alphabet Inc. (Class A)", 194.67],
["META", "Meta Platforms Inc.", 763.46002, null, "Bottom 3 Performers"],
["NVDA","NVIDIA Corporation",178.25999,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,1),1)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,1),1)"],
["TSLA","Tesla Inc.",308.72,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,1),2)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,1),2)"],
["BRK.B","Berkshire Hathaway Inc. (Class B)",464.19,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,1),3)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,1),3)"],
[null, null, ""]
],
columns: [
{ "type": "text", "width": 66, "align": "left" },
{ "width": 223, "type": "text", "align": "left" },
{ "width": 142, "type": "text", "align": "left" },
{ "type": "text", "width": 66, "align": "left" },
{ "type": "text", "width": 157, "align": "left" },
{ "type": "text", "width": 65, "align": "left", "format": "0.00%" },
],
style: {
"A1:B1": 14,
"C1": 7,
"E1": 8,
"A2": 15,
"B2:C2": 4,
"E2:F2": 4,
"A3": 16,
"B3:C3": 5,
"E3:F3": 5,
"A4": 16,
"B4:C4": 5,
"E4:F4": 6,
"A5": 16,
"B5:C5": 5,
"A6": 16,
"B6:C6": 5,
"E6": 7,
"A7": 16,
"B7:C7": 5,
"E7:F7": 4,
"A8": 16,
"B8:C8": 5,
"E8:F8": 5,
"A9": 17,
"B9:C9": 6,
"E9:F9": 6
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Helper",
defaultColWidth: 66,
defaultRowHeight: 30,
tableOverflow: true,
minDimensions: [7, 10],
worksheetId: "4e04d16a-e5ce-4c0e-b106-2abbfd252adc",
mergeCells: { "E1": [2, 1], "E6": [2, 1] },
}
],
validations: [
{
"range": "SHEET!I2:I9",
"action": "format",
"criteria": "<",
"type": "number",
"value": [0],
"format": { "color": "#ff0000" }
},
{
"range": "SHEET!I2:I9",
"action": "format",
"criteria": ">",
"type": "number",
"value": [0],
"format": { "color": "#006100" }
},
{
"range": "SHEET!F12",
"action": "format",
"criteria": "<",
"type": "number",
"value": [0, ""],
"format": { "color": "#ff0000" }
},
{
"range": "SHEET!F12",
"action": "format",
"criteria": ">",
"type": "number",
"value": [0],
"format": { "color": "#006100" }
},
{
"range": "SHEET!F15",
"action": "format",
"criteria": "<",
"type": "number",
"value": [0],
"format": { "color": "#ff0000" }
},
{
"range": "SHEET!F15",
"action": "format",
"criteria": ">",
"type": "number",
"value": [0],
"format": { "color": "#006100" }
},
null
],
}
);
fetch("https://jspreadsheet.com/jspreadsheet/demos/financial")
.then((response) => response.json())
.then((result) => {
const closes = Object.values(result).map((item) => item.close);
closes.unshift("Previous Close Price");
jspreadsheet
.getWorksheetInstanceByName("Helper")
.setColumnData(2, closes, true);
})
.catch((error, response) => {
console.error("Error:", error);
});
</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 validations from "@jspreadsheet/validations";
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('NmMwMDQxM2JkMWQxN2Y3NjFmMDdlNDJhMzE3ODI5NWZlOGM0MzU0ZTAxZjYyY2MwNmRhZTRiN2U3OGE1YmYyMzE2YmU4NDU3YzU2NjI1MzlkOWI1ODQ3NmFlMGMzOGJhMjNjMjRlNGNkZjI0NjViNjc5Yzk1YWJhNDZmYzI4MTQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd056azROelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts, validations });
const instance = jspreadsheet(spreadsheetRef.current, {
style: [
"font-size: 15px;font-family: Open sans;color: #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;border-bottom: 1px solid #000000;",
"font-size: 15px;font-family: Open sans;color: #000000;border-right: 1px solid #000000;border-bottom: 1px solid #000000;",
"font-size: 15px;font-family: Open sans;color: #000000;",
"font-size: 15px;font-weight: bold;font-family: Open sans;color: #000000;",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"border-right:1px solid black;border-left:1px solid black",
"border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#000000;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black;font-weight:bold",
"",
"font-weight:bold;font-size:large",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#000000;text-align:center",
"font-weight:bold;font-size:large;text-align:center",
"text-align:center",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#000000;border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-left:1px solid black",
"border-left:1px solid black",
"border-bottom:1px solid black;border-left:1px solid black",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:center",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF",
"background-color:#9e9e9e;font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;text-align:center",
"font-size:large;font-family: Open sans;color:#000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#9e9e9e;font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"font-size:x-large;font-family: Open sans;color:#000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#f4fffe;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;text-align:center;background-color:#9e9e9e",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#fdffff;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;background-color:#9e9e9e",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#fdffff;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;background-color:#9e9e9e"
],
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
toolbar: true,
worksheets: [
{
data: [
["Ticker","Company Name","Quantity","Purchase Price","Previous Close Price","Total Cost","Total Value (Prev. Close)","Unrealized Gain/Loss","Var. (%)",""],
["AAPL","=VLOOKUP(A2,HELPER!A:B,2,0)",4300,189,"=VLOOKUP(A2,HELPER!A:C,3,0)","=C2*D2","=E2*C2","=G2-F2","=E2/D2-1",""],
["MSFT","=VLOOKUP(A3,HELPER!A:B,2,0)",35000,400,"=VLOOKUP(A3,HELPER!A:C,3,0)","=C3*D3","=E3*C3","=G3-F3","=E3/D3-1",""],
["AMZN","=VLOOKUP(A4,HELPER!A:B,2,0)",3400,224,"=VLOOKUP(A4,HELPER!A:C,3,0)","=C4*D4","=E4*C4","=G4-F4","=E4/D4-1",""],
["GOOGL","=VLOOKUP(A5,HELPER!A:B,2,0)",4900,164,"=VLOOKUP(A5,HELPER!A:C,3,0)","=C5*D5","=E5*C5","=G5-F5","=E5/D5-1",""],
["META","=VLOOKUP(A6,HELPER!A:B,2,0)",2000,712,"=VLOOKUP(A6,HELPER!A:C,3,0)","=C6*D6","=E6*C6","=G6-F6","=E6/D6-1",""],
["NVDA","=VLOOKUP(A7,HELPER!A:B,2,0)",3000,151,"=VLOOKUP(A7,HELPER!A:C,3,0)","=C7*D7","=E7*C7","=G7-F7","=E7/D7-1",""],
["TSLA","=VLOOKUP(A8,HELPER!A:B,2,0)",2000,391,"=VLOOKUP(A8,HELPER!A:C,3,0)","=C8*D8","=E8*C8","=G8-F8","=E8/D8-1",""],
["BRK.B","=VLOOKUP(A9,HELPER!A:B,2,0)",1500,458,"=VLOOKUP(A9,HELPER!A:C,3,0)","=C9*D9","=E9*C9","=G9-F9","=E9/D9-1",""],
["", "", "", "", "", "", "", "", "", ""],
["","Top 3 Performers","","Total Cost","","Average Return","","","",""],
["", "", "", "=SUM(F2:F9)", "", "=D15/D12-1", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
["","Bottom 3 Performers","","Total Value (Prev. Close)","","Total Profit/Loss","","","",""],
["", "", "", "=SUM(G2:G9)", "", "=SUM(H2:H9)", "", "", "", ""],
],
columns: [
{ "width": 65, "type": "text", "align": "left" },
{ "width": 223, "type": "text", "align": "left" },
{ "width": 77, "type": "text", "align": "left" },
{"width": 169,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 147,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 143,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 167,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 150,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 75,"type": "numeric","align": "left","mask": "0.00%"},
{ "width": 60, "type": "text", "align": "left" }
],
rows: [
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 29 },
{ "height": 34 },
{ "height": 162 },
{ "height": 29 },
{ "height": 34 },
{ "height": 163 },
{ "height": 29 }
],
cells: {
"D12": { "format": "$#,##0.00" },
"F12": { "format": "0.00%" },
"D15": { "format": "$#,##0.00" },
"F15": { "format": "$#,##0.00" }
},
style: {
"A1": 25,
"B1:I1": 26,
"A2": 0,
"B2:I2": 1,
"A3": 0,
"B3:I3": 1,
"A4": 0,
"B4:I4": 1,
"A5": 0,
"B5:I5": 1,
"A6": 0,
"B6:I6": 1,
"A7": 0,
"B7:I7": 1,
"A8": 0,
"B8:I8": 1,
"A9": 0,
"B9:I9": 1,
"A11": 11,
"B11": 12,
"C11": 18,
"D11": 20,
"E11": 11,
"F11": 24,
"G11:J11": 13,
"A12": 9,
"C12": 2,
"D12": 21,
"E12": 2,
"F12": 23,
"A13": 9,
"C13:E13": 2,
"A14": 9,
"B14": 10,
"C14": 2,
"D14": 22,
"E14": 2,
"F14": 25,
"A15": 9,
"C15": 2,
"D15": 21,
"E15": 2,
"F15": 21,
"A16": 3,
"C16:D16": 19,
"E16:F16": 3,
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Sheet",
defaultColWidth: 66,
tableOverflow: true,
minDimensions: [10, 16],
worksheetId: "3e6c9903-5a3a-49de-a576-0d1149617487",
media: [
{
"type": "chart",
"width": 222,
"height": 161,
"options": {
"type": "line",
"range": "'Helper'!E2:F4",
"orientation": 1,
"labels": 0,
"series": [
{
"color": "#006100",
"borderColor": "#006100",
"border": { "width": 2 }
}
]
},
"id": "f7d943fb-6435-46b1-bed6-c6e94eec1742",
"top": 1,
"left": 1,
"cellAnchor": "B12",
"zIndex": 1,
"rotate": 0
},
{
"type": "chart",
"width": 222,
"height": 162,
"options": {
"type": "line",
"range": "'Helper'!E7:F9",
"orientation": 1,
"labels": 0,
"series": [
{
"color": "#DA2E08",
"borderColor": "#DA2E08",
"border": { "width": 2 }
}
]
},
"id": "6a1d2da7-207a-4ccd-8bfc-c12fb9c7eefc",
"top": 1,
"left": 1,
"cellAnchor": "B15",
"zIndex": 2,
"rotate": 0
}
]
},
{
data: [
["Ticker","Company Name","Previous Close Price",null,"Top 3 Performers"],
["AAPL","Apple Inc.",202.92,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,-1),1)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,-1),1)"],
["MSFT","Microsoft Corporation",527.75,null,"=INDEX(SORTBY('Sheet'!A3:A10,'Sheet'!I3:I10,-1),2)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,-1),2)"],
["AMZN","Amazon.com Inc.",213.75,null,"=INDEX(SORTBY('Sheet'!A4:A11,'Sheet'!I4:I11,-1),3)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,-1),3)"],
["GOOGL", "Alphabet Inc. (Class A)", 194.67],
["META", "Meta Platforms Inc.", 763.46002, null, "Bottom 3 Performers"],
["NVDA","NVIDIA Corporation",178.25999,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,1),1)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,1),1)"],
["TSLA","Tesla Inc.",308.72,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,1),2)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,1),2)"],
["BRK.B","Berkshire Hathaway Inc. (Class B)",464.19,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,1),3)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,1),3)"],
[null, null, ""]
],
columns: [
{ "type": "text", "width": 66, "align": "left" },
{ "width": 223, "type": "text", "align": "left" },
{ "width": 142, "type": "text", "align": "left" },
{ "type": "text", "width": 66, "align": "left" },
{ "type": "text", "width": 157, "align": "left" },
{ "type": "text", "width": 65, "align": "left", "format": "0.00%" },
],
style: {
"A1:B1": 14,
"C1": 7,
"E1": 8,
"A2": 15,
"B2:C2": 4,
"E2:F2": 4,
"A3": 16,
"B3:C3": 5,
"E3:F3": 5,
"A4": 16,
"B4:C4": 5,
"E4:F4": 6,
"A5": 16,
"B5:C5": 5,
"A6": 16,
"B6:C6": 5,
"E6": 7,
"A7": 16,
"B7:C7": 5,
"E7:F7": 4,
"A8": 16,
"B8:C8": 5,
"E8:F8": 5,
"A9": 17,
"B9:C9": 6,
"E9:F9": 6
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Helper",
defaultColWidth: 66,
defaultRowHeight: 30,
tableOverflow: true,
minDimensions: [7, 10],
worksheetId: "4e04d16a-e5ce-4c0e-b106-2abbfd252adc",
mergeCells: { "E1": [2, 1], "E6": [2, 1] },
}
],
validations: [
{
"range": "SHEET!I2:I9",
"action": "format",
"criteria": "<",
"type": "number",
"value": [0],
"format": { "color": "#ff0000" }
},
{
"range": "SHEET!I2:I9",
"action": "format",
"criteria": ">",
"type": "number",
"value": [0],
"format": { "color": "#006100" }
},
{
"range": "SHEET!F12",
"action": "format",
"criteria": "<",
"type": "number",
"value": [0, ""],
"format": { "color": "#ff0000" }
},
{
"range": "SHEET!F12",
"action": "format",
"criteria": ">",
"type": "number",
"value": [0],
"format": { "color": "#006100" }
},
{
"range": "SHEET!F15",
"action": "format",
"criteria": "<",
"type": "number",
"value": [0],
"format": { "color": "#ff0000" }
},
{
"range": "SHEET!F15",
"action": "format",
"criteria": ">",
"type": "number",
"value": [0],
"format": { "color": "#006100" }
},
null
],
}
);
fetch("https://jspreadsheet.com/jspreadsheet/demos/financial")
.then((response) => response.json())
.then((result) => {
const closes = Object.values(result).map((item) => item.close);
closes.unshift("Previous Close Price");
const helperSheet = spreadsheet.value.current[1];
helperSheet.setColumnData(2, closes, true);
})
.catch((error) => {
console.error("Error:", error);
});
return () => {
instance?.destroy?.();
};
}, []);
return <div ref={spreadsheetRef}></div>;
}
<template>
<Spreadsheet
ref="spreadsheet"
:license="license"
:tableOverflow="true"
tableWidth="1360"
tableHeight="620"
:resizable="true"
:validations="validations"
:worksheets="worksheets"
:styles="globalStyle"
toolbar="true"
/>
</template>
<script>
import { ref, onMounted } from 'vue';
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';
import charts from '@jspreadsheet/charts';
import validations from "@jspreadsheet/validations";
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('NmMwMDQxM2JkMWQxN2Y3NjFmMDdlNDJhMzE3ODI5NWZlOGM0MzU0ZTAxZjYyY2MwNmRhZTRiN2U3OGE1YmYyMzE2YmU4NDU3YzU2NjI1MzlkOWI1ODQ3NmFlMGMzOGJhMjNjMjRlNGNkZjI0NjViNjc5Yzk1YWJhNDZmYzI4MTQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd056azROelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts, validations });
export default {
components: { Spreadsheet, Worksheet },
setup() {
const spreadsheet = ref(null)
// Set your JSS license key (The following key only works for one day)
const license = 'NmMwMDQxM2JkMWQxN2Y3NjFmMDdlNDJhMzE3ODI5NWZlOGM0MzU0ZTAxZjYyY2MwNmRhZTRiN2U3OGE1YmYyMzE2YmU4NDU3YzU2NjI1MzlkOWI1ODQ3NmFlMGMzOGJhMjNjMjRlNGNkZjI0NjViNjc5Yzk1YWJhNDZmYzI4MTQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd056azROelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9';
const globalStyle = [
"font-size: 15px;font-family: Open sans;color: #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;border-bottom: 1px solid #000000;",
"font-size: 15px;font-family: Open sans;color: #000000;border-right: 1px solid #000000;border-bottom: 1px solid #000000;",
"font-size: 15px;font-family: Open sans;color: #000000;",
"font-size: 15px;font-weight: bold;font-family: Open sans;color: #000000;",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"border-right:1px solid black;border-left:1px solid black",
"border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#000000;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black;font-weight:bold",
"",
"font-weight:bold;font-size:large",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#000000;text-align:center",
"font-weight:bold;font-size:large;text-align:center",
"text-align:center",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#000000;border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-left:1px solid black",
"border-left:1px solid black",
"border-bottom:1px solid black;border-left:1px solid black",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:center",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF",
"background-color:#9e9e9e;font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;text-align:center",
"font-size:large;font-family: Open sans;color:#000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#9e9e9e;font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"font-size:x-large;font-family: Open sans;color:#000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#f4fffe;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;text-align:center;background-color:#9e9e9e",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#fdffff;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;background-color:#9e9e9e",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#fdffff;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;background-color:#9e9e9e"
];
const worksheets = [
{
"data": [
["Ticker","Company Name","Quantity","Purchase Price","Previous Close Price","Total Cost","Total Value (Prev. Close)","Unrealized Gain/Loss","Var. (%)",""],
["AAPL","=VLOOKUP(A2,HELPER!A:B,2,0)",4300,189,"=VLOOKUP(A2,HELPER!A:C,3,0)","=C2*D2","=E2*C2","=G2-F2","=E2/D2-1",""],
["MSFT","=VLOOKUP(A3,HELPER!A:B,2,0)",35000,400,"=VLOOKUP(A3,HELPER!A:C,3,0)","=C3*D3","=E3*C3","=G3-F3","=E3/D3-1",""],
["AMZN","=VLOOKUP(A4,HELPER!A:B,2,0)",3400,224,"=VLOOKUP(A4,HELPER!A:C,3,0)","=C4*D4","=E4*C4","=G4-F4","=E4/D4-1",""],
["GOOGL","=VLOOKUP(A5,HELPER!A:B,2,0)",4900,164,"=VLOOKUP(A5,HELPER!A:C,3,0)","=C5*D5","=E5*C5","=G5-F5","=E5/D5-1",""],
["META","=VLOOKUP(A6,HELPER!A:B,2,0)",2000,712,"=VLOOKUP(A6,HELPER!A:C,3,0)","=C6*D6","=E6*C6","=G6-F6","=E6/D6-1",""],
["NVDA","=VLOOKUP(A7,HELPER!A:B,2,0)",3000,151,"=VLOOKUP(A7,HELPER!A:C,3,0)","=C7*D7","=E7*C7","=G7-F7","=E7/D7-1",""],
["TSLA","=VLOOKUP(A8,HELPER!A:B,2,0)",2000,391,"=VLOOKUP(A8,HELPER!A:C,3,0)","=C8*D8","=E8*C8","=G8-F8","=E8/D8-1",""],
["BRK.B","=VLOOKUP(A9,HELPER!A:B,2,0)",1500,458,"=VLOOKUP(A9,HELPER!A:C,3,0)","=C9*D9","=E9*C9","=G9-F9","=E9/D9-1",""],
["", "", "", "", "", "", "", "", "", ""],
["","Top 3 Performers","","Total Cost","","Average Return","","","",""],
["", "", "", "=SUM(F2:F9)", "", "=D15/D12-1", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
["","Bottom 3 Performers","","Total Value (Prev. Close)","","Total Profit/Loss","","","",""],
["", "", "", "=SUM(G2:G9)", "", "=SUM(H2:H9)", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
],
"columns": [
{ "width": 65, "type": "text", "align": "left" },
{ "width": 223, "type": "text", "align": "left" },
{ "width": 77, "type": "text", "align": "left" },
{
"width": 169,
"type": "numeric",
"align": "left",
"mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "
},
{
"width": 147,
"type": "numeric",
"align": "left",
"mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "
},
{
"width": 143,
"type": "numeric",
"align": "left",
"mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "
},
{
"width": 167,
"type": "numeric",
"align": "left",
"mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "
},
{
"width": 150,
"type": "numeric",
"align": "left",
"mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "
},
{
"width": 75,
"type": "numeric",
"align": "left",
"mask": "0.00%"
},
{ "width": 60, "type": "text", "align": "left" }
],
"rows": [
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 29 },
{ "height": 34 },
{ "height": 162 },
{ "height": 29 },
{ "height": 34 },
{ "height": 163 },
{ "height": 29 }
],
"cells": {
"D12": { "format": "$#,##0.00" },
"F12": { "format": "0.00%" },
"D15": { "format": "$#,##0.00" },
"F15": { "format": "$#,##0.00" }
},
"style": {
"A1": 25,
"B1:I1": 26,
"A2": 0,
"B2:I2": 1,
"A3": 0,
"B3:I3": 1,
"A4": 0,
"B4:I4": 1,
"A5": 0,
"B5:I5": 1,
"A6": 0,
"B6:I6": 1,
"A7": 0,
"B7:I7": 1,
"A8": 0,
"B8:I8": 1,
"A9": 0,
"B9:I9": 1,
"A11": 11,
"B11": 12,
"C11": 18,
"D11": 20,
"E11": 11,
"F11": 24,
"G11:J11": 13,
"A12": 9,
"C12": 2,
"D12": 21,
"E12": 2,
"F12": 23,
"A13": 9,
"C13:E13": 2,
"A14": 9,
"B14": 10,
"C14": 2,
"D14": 22,
"E14": 2,
"F14": 25,
"A15": 9,
"C15": 2,
"D15": 21,
"E15": 2,
"F15": 21,
"A16": 3,
"C16:D16": 19,
"E16:F16": 3,
},
"textOverflow": true,
"stripHTML": false,
"defaultColAlign": "left",
"worksheetName": "Sheet",
"defaultColWidth": 66,
"tableOverflow": true,
"minDimensions": [10, 16],
"worksheetId": "3e6c9903-5a3a-49de-a576-0d1149617487",
"media": [
{
"type": "chart",
"width": 222,
"height": 161,
"options": {
"type": "line",
"range": "'Helper'!E2:F4",
"orientation": 1,
"labels": 0,
"series": [
{
"color": "#006100",
"borderColor": "#006100",
"border": { "width": 2 }
}
]
},
"id": "f7d943fb-6435-46b1-bed6-c6e94eec1742",
"top": 1,
"left": 1,
"cellAnchor": "B12",
"zIndex": 1,
"rotate": 0
},
{
"type": "chart",
"width": 222,
"height": 162,
"options": {
"type": "line",
"range": "'Helper'!E7:F9",
"orientation": 1,
"labels": 0,
"series": [
{
"color": "#DA2E08",
"borderColor": "#DA2E08",
"border": { "width": 2 }
}
]
},
"id": "6a1d2da7-207a-4ccd-8bfc-c12fb9c7eefc",
"top": 1,
"left": 1,
"cellAnchor": "B15",
"zIndex": 2,
"rotate": 0
}
]
},
{
"data": [
["Ticker","Company Name","Previous Close Price",null,"Top 3 Performers"],
["AAPL","Apple Inc.",202.92,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,-1),1)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,-1),1)"],
["MSFT","Microsoft Corporation",527.75,null,"=INDEX(SORTBY('Sheet'!A3:A10,'Sheet'!I3:I10,-1),2)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,-1),2)"],
["AMZN","Amazon.com Inc.",213.75,null,"=INDEX(SORTBY('Sheet'!A4:A11,'Sheet'!I4:I11,-1),3)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,-1),3)"],
["GOOGL", "Alphabet Inc. (Class A)", 194.67],
["META", "Meta Platforms Inc.", 763.46002, null, "Bottom 3 Performers"],
["NVDA","NVIDIA Corporation",178.25999,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,1),1)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,1),1)"],
["TSLA","Tesla Inc.",308.72,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,1),2)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,1),2)"],
["BRK.B","Berkshire Hathaway Inc. (Class B)",464.19,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,1),3)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,1),3)"],
[null, null, ""]
],
"columns": [
{ "type": "text", "width": 66, "align": "left" },
{ "width": 223, "type": "text", "align": "left" },
{ "width": 142, "type": "text", "align": "left" },
{ "type": "text", "width": 66, "align": "left" },
{ "type": "text", "width": 157, "align": "left" },
{ "type": "text", "width": 65, "align": "left", "format": "0.00%" },
],
"style": {
"A1:B1": 14,
"C1": 7,
"E1": 8,
"A2": 15,
"B2:C2": 4,
"E2:F2": 4,
"A3": 16,
"B3:C3": 5,
"E3:F3": 5,
"A4": 16,
"B4:C4": 5,
"E4:F4": 6,
"A5": 16,
"B5:C5": 5,
"A6": 16,
"B6:C6": 5,
"E6": 7,
"A7": 16,
"B7:C7": 5,
"E7:F7": 4,
"A8": 16,
"B8:C8": 5,
"E8:F8": 5,
"A9": 17,
"B9:C9": 6,
"E9:F9": 6
},
"textOverflow": true,
"stripHTML": false,
"defaultColAlign": "left",
"worksheetName": "Helper",
"defaultColWidth": 66,
"defaultRowHeight": 30,
"tableOverflow": true,
"minDimensions": [7, 10],
"worksheetId": "4e04d16a-e5ce-4c0e-b106-2abbfd252adc",
"mergeCells": { "E1": [2, 1], "E6": [2, 1] },
}
];
const validations = [
{
"range": "SHEET!I2:I9",
"action": "format",
"criteria": "<",
"type": "number",
"value": [0],
"format": { "color": "#ff0000" }
},
{
"range": "SHEET!I2:I9",
"action": "format",
"criteria": ">",
"type": "number",
"value": [0],
"format": { "color": "#006100" }
},
{
"range": "SHEET!F12",
"action": "format",
"criteria": "<",
"type": "number",
"value": [0, ""],
"format": { "color": "#ff0000" }
},
{
"range": "SHEET!F12",
"action": "format",
"criteria": ">",
"type": "number",
"value": [0],
"format": { "color": "#006100" }
},
{
"range": "SHEET!F15",
"action": "format",
"criteria": "<",
"type": "number",
"value": [0],
"format": { "color": "#ff0000" }
},
{
"range": "SHEET!F15",
"action": "format",
"criteria": ">",
"type": "number",
"value": [0],
"format": { "color": "#006100" }
},
null
];
onMounted(() => {
fetch("https://jspreadsheet.com/jspreadsheet/demos/financial")
.then((response) => response.json())
.then((result) => {
const closes = Object.values(result).map((item) => item.close);
closes.unshift("Previous Close Price");
const helperSheet = spreadsheet.value.current[1];
helperSheet.setColumnData(2, closes, true);
})
.catch((error) => {
console.error("Error:", error);
});
});
return {
spreadsheet,
license,
globalStyle,
worksheets,
validations
};
}
};
</script>
import { Component, ElementRef, ViewChild } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';
import charts from '@jspreadsheet/charts';
import validations from '@jspreadsheet/validations';
import '@jspreadsheet/formula-charts';
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NmMwMDQxM2JkMWQxN2Y3NjFmMDdlNDJhMzE3ODI5NWZlOGM0MzU0ZTAxZjYyY2MwNmRhZTRiN2U3OGE1YmYyMzE2YmU4NDU3YzU2NjI1MzlkOWI1ODQ3NmFlMGMzOGJhMjNjMjRlNGNkZjI0NjViNjc5Yzk1YWJhNDZmYzI4MTQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd056azROelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts, validations });
@Component({
standalone: true,
selector: 'app-root',
template: `<div #spreadsheet></div>`,
})
export class AppComponent {
@ViewChild('spreadsheet', { static: true }) spreadsheet!: ElementRef;
ngAfterViewInit() {
const instance = jspreadsheet(this.spreadsheet.nativeElement, {
style: [
"font-size: 15px;font-family: Open sans;color: #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;border-bottom: 1px solid #000000;",
"font-size: 15px;font-family: Open sans;color: #000000;border-right: 1px solid #000000;border-bottom: 1px solid #000000;",
"font-size: 15px;font-family: Open sans;color: #000000;",
"font-size: 15px;font-weight: bold;font-family: Open sans;color: #000000;",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"border-right:1px solid black;border-left:1px solid black",
"border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#000000;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black;font-weight:bold",
"",
"font-weight:bold;font-size:large",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#000000;text-align:center",
"font-weight:bold;font-size:large;text-align:center",
"text-align:center",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#000000;border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-left:1px solid black",
"border-left:1px solid black",
"border-bottom:1px solid black;border-left:1px solid black",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF;text-align:center",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF",
"background-color:#9e9e9e;font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;text-align:center",
"font-size:large;font-family: Open sans;color:#000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000",
"background-color:#9e9e9e;font-size:15px;font-weight:bold;font-family: Open sans;color:#FFFFFF;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000",
"font-size:x-large;font-family: Open sans;color:#000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#f4fffe;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;text-align:center;background-color:#9e9e9e",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#fdffff;border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;background-color:#9e9e9e",
"font-size:15px;font-weight:bold;font-family: Open sans;color:#fdffff;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;background-color:#9e9e9e"
],
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
toolbar: true,
worksheets: [
{
data: [
["Ticker","Company Name","Quantity","Purchase Price","Previous Close Price","Total Cost","Total Value (Prev. Close)","Unrealized Gain/Loss","Var. (%)",""],
["AAPL","=VLOOKUP(A2,HELPER!A:B,2,0)",4300,189,"=VLOOKUP(A2,HELPER!A:C,3,0)","=C2*D2","=E2*C2","=G2-F2","=E2/D2-1",""],
["MSFT","=VLOOKUP(A3,HELPER!A:B,2,0)",35000,400,"=VLOOKUP(A3,HELPER!A:C,3,0)","=C3*D3","=E3*C3","=G3-F3","=E3/D3-1",""],
["AMZN","=VLOOKUP(A4,HELPER!A:B,2,0)",3400,224,"=VLOOKUP(A4,HELPER!A:C,3,0)","=C4*D4","=E4*C4","=G4-F4","=E4/D4-1",""],
["GOOGL","=VLOOKUP(A5,HELPER!A:B,2,0)",4900,164,"=VLOOKUP(A5,HELPER!A:C,3,0)","=C5*D5","=E5*C5","=G5-F5","=E5/D5-1",""],
["META","=VLOOKUP(A6,HELPER!A:B,2,0)",2000,712,"=VLOOKUP(A6,HELPER!A:C,3,0)","=C6*D6","=E6*C6","=G6-F6","=E6/D6-1",""],
["NVDA","=VLOOKUP(A7,HELPER!A:B,2,0)",3000,151,"=VLOOKUP(A7,HELPER!A:C,3,0)","=C7*D7","=E7*C7","=G7-F7","=E7/D7-1",""],
["TSLA","=VLOOKUP(A8,HELPER!A:B,2,0)",2000,391,"=VLOOKUP(A8,HELPER!A:C,3,0)","=C8*D8","=E8*C8","=G8-F8","=E8/D8-1",""],
["BRK.B","=VLOOKUP(A9,HELPER!A:B,2,0)",1500,458,"=VLOOKUP(A9,HELPER!A:C,3,0)","=C9*D9","=E9*C9","=G9-F9","=E9/D9-1",""],
["", "", "", "", "", "", "", "", "", ""],
["","Top 3 Performers","","Total Cost","","Average Return","","","",""],
["", "", "", "=SUM(F2:F9)", "", "=D15/D12-1", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
["","Bottom 3 Performers","","Total Value (Prev. Close)","","Total Profit/Loss","","","",""],
["", "", "", "=SUM(G2:G9)", "", "=SUM(H2:H9)", "", "", "", ""],
],
columns: [
{ "width": 65, "type": "text", "align": "left" },
{ "width": 223, "type": "text", "align": "left" },
{ "width": 77, "type": "text", "align": "left" },
{"width": 169,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 147,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 143,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 167,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 150,"type": "numeric","align": "left","mask": "_-[$$-409]* #,##0.00_ ;_-[$$-409]* ;_-[$$-409]* -??_ ;_-@_ "},
{"width": 75,"type": "numeric","align": "left","mask": "0.00%"},
{ "width": 60, "type": "text", "align": "left" }
],
rows: [
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 29 },
{ "height": 34 },
{ "height": 162 },
{ "height": 29 },
{ "height": 34 },
{ "height": 163 },
{ "height": 29 }
],
cells: {
"D12": { "format": "$#,##0.00" },
"F12": { "format": "0.00%" },
"D15": { "format": "$#,##0.00" },
"F15": { "format": "$#,##0.00" }
},
style: {
"A1": 25,
"B1:I1": 26,
"A2": 0,
"B2:I2": 1,
"A3": 0,
"B3:I3": 1,
"A4": 0,
"B4:I4": 1,
"A5": 0,
"B5:I5": 1,
"A6": 0,
"B6:I6": 1,
"A7": 0,
"B7:I7": 1,
"A8": 0,
"B8:I8": 1,
"A9": 0,
"B9:I9": 1,
"A11": 11,
"B11": 12,
"C11": 18,
"D11": 20,
"E11": 11,
"F11": 24,
"G11:J11": 13,
"A12": 9,
"C12": 2,
"D12": 21,
"E12": 2,
"F12": 23,
"A13": 9,
"C13:E13": 2,
"A14": 9,
"B14": 10,
"C14": 2,
"D14": 22,
"E14": 2,
"F14": 25,
"A15": 9,
"C15": 2,
"D15": 21,
"E15": 2,
"F15": 21,
"A16": 3,
"C16:D16": 19,
"E16:F16": 3,
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Sheet",
defaultColWidth: 66,
tableOverflow: true,
minDimensions: [10, 16],
worksheetId: "3e6c9903-5a3a-49de-a576-0d1149617487",
media: [
{
"type": "chart",
"width": 222,
"height": 161,
"options": {
"type": "line",
"range": "'Helper'!E2:F4",
"orientation": 1,
"labels": 0,
"series": [
{
"color": "#006100",
"borderColor": "#006100",
"border": { "width": 2 }
}
]
},
"id": "f7d943fb-6435-46b1-bed6-c6e94eec1742",
"top": 1,
"left": 1,
"cellAnchor": "B12",
"zIndex": 1,
"rotate": 0
},
{
"type": "chart",
"width": 222,
"height": 162,
"options": {
"type": "line",
"range": "'Helper'!E7:F9",
"orientation": 1,
"labels": 0,
"series": [
{
"color": "#DA2E08",
"borderColor": "#DA2E08",
"border": { "width": 2 }
}
]
},
"id": "6a1d2da7-207a-4ccd-8bfc-c12fb9c7eefc",
"top": 1,
"left": 1,
"cellAnchor": "B15",
"zIndex": 2,
"rotate": 0
}
]
},
{
data: [
["Ticker","Company Name","Previous Close Price",null,"Top 3 Performers"],
["AAPL","Apple Inc.",202.92,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,-1),1)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,-1),1)"],
["MSFT","Microsoft Corporation",527.75,null,"=INDEX(SORTBY('Sheet'!A3:A10,'Sheet'!I3:I10,-1),2)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,-1),2)"],
["AMZN","Amazon.com Inc.",213.75,null,"=INDEX(SORTBY('Sheet'!A4:A11,'Sheet'!I4:I11,-1),3)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,-1),3)"],
["GOOGL", "Alphabet Inc. (Class A)", 194.67],
["META", "Meta Platforms Inc.", 763.46002, null, "Bottom 3 Performers"],
["NVDA","NVIDIA Corporation",178.25999,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,1),1)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,1),1)"],
["TSLA","Tesla Inc.",308.72,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,1),2)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,1),2)"],
["BRK.B","Berkshire Hathaway Inc. (Class B)",464.19,null,"=INDEX(SORTBY('Sheet'!A2:A9,'Sheet'!I2:I9,1),3)","=INDEX(SORTBY('Sheet'!I2:I9,'Sheet'!I2:I9,1),3)"],
[null, null, ""]
],
columns: [
{ "type": "text", "width": 66, "align": "left" },
{ "width": 223, "type": "text", "align": "left" },
{ "width": 142, "type": "text", "align": "left" },
{ "type": "text", "width": 66, "align": "left" },
{ "type": "text", "width": 157, "align": "left" },
{ "type": "text", "width": 65, "align": "left", "format": "0.00%" },
],
style: {
"A1:B1": 14,
"C1": 7,
"E1": 8,
"A2": 15,
"B2:C2": 4,
"E2:F2": 4,
"A3": 16,
"B3:C3": 5,
"E3:F3": 5,
"A4": 16,
"B4:C4": 5,
"E4:F4": 6,
"A5": 16,
"B5:C5": 5,
"A6": 16,
"B6:C6": 5,
"E6": 7,
"A7": 16,
"B7:C7": 5,
"E7:F7": 4,
"A8": 16,
"B8:C8": 5,
"E8:F8": 5,
"A9": 17,
"B9:C9": 6,
"E9:F9": 6
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "Helper",
defaultColWidth: 66,
defaultRowHeight: 30,
tableOverflow: true,
minDimensions: [7, 10],
worksheetId: "4e04d16a-e5ce-4c0e-b106-2abbfd252adc",
mergeCells: { "E1": [2, 1], "E6": [2, 1] },
}
],
validations: [
{
"range": "SHEET!I2:I9",
"action": "format",
"criteria": "<",
"type": "number",
"value": [0],
"format": { "color": "#ff0000" }
},
{
"range": "SHEET!I2:I9",
"action": "format",
"criteria": ">",
"type": "number",
"value": [0],
"format": { "color": "#006100" }
},
{
"range": "SHEET!F12",
"action": "format",
"criteria": "<",
"type": "number",
"value": [0, ""],
"format": { "color": "#ff0000" }
},
{
"range": "SHEET!F12",
"action": "format",
"criteria": ">",
"type": "number",
"value": [0],
"format": { "color": "#006100" }
},
{
"range": "SHEET!F15",
"action": "format",
"criteria": "<",
"type": "number",
"value": [0],
"format": { "color": "#ff0000" }
},
{
"range": "SHEET!F15",
"action": "format",
"criteria": ">",
"type": "number",
"value": [0],
"format": { "color": "#006100" }
},
null
],
})
}
}