SpreadJS Scenario Manager lets a workbook keep multiple named versions of selected input cells. Applying a scenario replaces those cells while formulas recalculate from the new values.
This overview uses an annual electric fan sales forecast. January through April are current actual data, and May through December are forecast cells.
Use the side panel to apply the finance break-even target, pessimistic forecast, or optimistic forecast.
var spread;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(workbook) {
workbook.suspendPaint();
workbook.fromJSON(json);
workbook.resumePaint();
bindControls();
refreshSummary('Baseline forecast');
}
function bindControls() {
document.getElementById('applyBreakEven').addEventListener('click', function () {
applyForecast('Break-even', 'Break-even forecast applied.');
});
document.getElementById('applyPessimistic').addEventListener('click', function () {
applyForecast('Pessimistic', 'Pessimistic forecast applied.');
});
document.getElementById('applyOptimistic').addEventListener('click', function () {
applyForecast('Optimistic', 'Optimistic forecast applied.');
});
document.getElementById('restoreForecast').addEventListener('click', function () {
spread.scenarioManager.restore();
refreshSummary('Baseline forecast');
showResult('Forecast restored to the baseline values.', 'success');
});
}
function applyForecast(name, message) {
spread.scenarioManager.restore();
if (spread.scenarioManager.apply(name)) {
refreshSummary(name);
showResult(message, 'success');
} else {
showResult('Scenario "' + name + '" was not found.', 'error');
}
}
function refreshSummary(activeName) {
var sheet = spread.getSheet(0);
var scenarioList = document.getElementById('scenarioList');
scenarioList.innerHTML = '';
spread.scenarioManager.all().map(getScenarioSummary).forEach(function (scenario) {
var item = document.createElement('li');
item.innerHTML = '<strong>' + scenario.name + '</strong><em>' + scenario.owner + '</em><span>' + scenario.description + '</span>';
scenarioList.appendChild(item);
});
document.getElementById('activeScenario').textContent = activeName;
document.getElementById('totalUnits').textContent = formatNumber(sheet.getValue(15, 1));
document.getElementById('totalRevenue').textContent = formatCurrency(sheet.getValue(15, 3));
document.getElementById('totalProfit').textContent = formatCurrency(sheet.getValue(15, 5));
}
function formatNumber(value) {
return Math.round(value || 0).toLocaleString();
}
function formatCurrency(value) {
return '$' + Math.round(value || 0).toLocaleString();
}
function getScenarioSummary(scenario) {
var cellCount = 0;
scenario.overrides.forEach(function (override) {
cellCount += (override.cells || []).length;
});
return {
name: scenario.name,
owner: getScenarioOwner(scenario.userId),
description: getScenarioDescription(scenario.name),
cellCount: cellCount
};
}
function getScenarioOwner(userId) {
var users = json.users || [];
for (var i = 0; i < users.length; i++) {
if (users[i].id === userId) {
return users[i].name;
}
}
return 'Unknown owner';
}
function getScenarioDescription(name) {
var descriptions = {
'Break-even': 'Finance target: sales required to cover fixed operating costs for the electric fan line.',
'Pessimistic': 'Sales view: softer demand with standard pricing through year end.',
'Optimistic': 'Sales view: stronger demand with selective price lift through year end.'
};
return descriptions[name] || 'Scenario overrides May through December forecast cells.';
}
function showResult(message, resultClass) {
var result = document.getElementById('result');
result.className = 'result-container ' + resultClass;
result.textContent = message;
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="panel-title">Scenario Overview</div>
<div class="option-group action-group">
<input type="button" value="Apply Break-even Forecast" id="applyBreakEven" />
<input type="button" value="Apply Pessimistic Forecast" id="applyPessimistic" />
<input type="button" value="Apply Optimistic Forecast" id="applyOptimistic" />
<input type="button" value="Restore" id="restoreForecast" />
</div>
<div id="result" class="result-container success">Operate Description</div>
<div class="option-group forecast-summary">
<div><span>View</span><strong id="activeScenario">Baseline forecast</strong></div>
<div><span>Year units</span><strong id="totalUnits">0</strong></div>
<div><span>Revenue</span><strong id="totalRevenue">$0</strong></div>
<div><span>Profit</span><strong id="totalProfit">$0</strong></div>
</div>
<div class="option-group">
<label>Prepared scenarios</label>
<ul id="scenarioList" class="scenario-list"></ul>
</div>
</div>
</div>
</body>
</html>
var json = {
"version": "18.0.0",
"name": "",
"docProps": {
"docPropsApp": {},
"docPropsCore": {}
},
"sheetCount": 1,
"users": [
{
"id": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}",
"name": "Ethan(VP of Sales)",
"color": "#26A69A"
},
{
"id": "{483FF98B-BB90-4EB4-8329-761CD56778AE}",
"name": "Emma(Finance Director)",
"color": "#A6A634"
}
],
"customList": [],
"defaultSheetTabStyles": {},
"builtInFileIcons": {},
"sheets": {
"Annual Sales Forecast": {
"name": "Annual Sales Forecast",
"isSelected": true,
"rowCount": 19,
"columnCount": 7,
"activeRow": 11,
"activeCol": 4,
"visible": 1,
"theme": "Office",
"data": {
"dataTable": {
"0": {
"0": {
"value": "Annual Sales Forecast of Electric Fans",
"style": {
"autoFormatter": {},
"font": "bold 16px Arial",
"fontWeight": "bold",
"fontSize": "16px",
"fontFamily": "Arial"
}
}
},
"1": {
"0": {
"value": "Actual sales through April and forecast inputs for the rest of the year."
}
},
"2": {
"0": {
"value": "Month",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"1": {
"value": "Units",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"2": {
"value": "Unit Price",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"3": {
"value": "Revenue",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"4": {
"value": "Cost",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"5": {
"value": "Profit",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
}
},
"3": {
"0": {
"value": "January",
"style": {
"backColor": "#eef8f1"
}
},
"1": {
"value": 622,
"style": {
"backColor": "#eef8f1",
"formatter": "#,##0"
}
},
"2": {
"value": 48,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
}
},
"3": {
"value": 29856,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 17416,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 12440,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"4": {
"0": {
"value": "February",
"style": {
"backColor": "#eef8f1"
}
},
"1": {
"value": 631,
"style": {
"backColor": "#eef8f1",
"formatter": "#,##0"
}
},
"2": {
"value": 48,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
}
},
"3": {
"value": 30288,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 17668,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 12620,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"5": {
"0": {
"value": "March",
"style": {
"backColor": "#eef8f1"
}
},
"1": {
"value": 713,
"style": {
"backColor": "#eef8f1",
"formatter": "#,##0"
}
},
"2": {
"value": 48,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
}
},
"3": {
"value": 34224,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 19964,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 14260,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"6": {
"0": {
"value": "April",
"style": {
"backColor": "#eef8f1"
}
},
"1": {
"value": 854,
"style": {
"backColor": "#eef8f1",
"formatter": "#,##0"
}
},
"2": {
"value": 48,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
}
},
"3": {
"value": 40992,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 23912,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 17080,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"7": {
"0": {
"value": "May",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"formatter": "#,##0"
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"8": {
"0": {
"value": "June",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"formatter": "#,##0"
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"9": {
"0": {
"value": "July",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "#,##0",
"imeMode": 1
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"10": {
"0": {
"value": "August",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "#,##0",
"imeMode": 1
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"11": {
"0": {
"value": "September",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "#,##0",
"imeMode": 1
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"12": {
"0": {
"value": "October",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "#,##0",
"imeMode": 1
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"13": {
"0": {
"value": "November",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "#,##0",
"imeMode": 1
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"14": {
"0": {
"value": "December",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "#,##0",
"imeMode": 1
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"15": {
"0": {
"value": "Year Total",
"style": {
"backColor": "#dff3e3",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"1": {
"value": 2820,
"style": {
"backColor": "#dff3e3",
"font": "bold 12px Arial",
"formatter": "#,##0",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
},
"formula": {
"si": 3
}
},
"2": {
"style": {
"backColor": "#dff3e3",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"3": {
"value": 135360,
"style": {
"backColor": "#dff3e3",
"font": "bold 12px Arial",
"formatter": "$#,##0.00",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
},
"formula": {
"si": 3
}
},
"4": {
"value": 78960,
"style": {
"backColor": "#dff3e3",
"font": "bold 12px Arial",
"formatter": "$#,##0.00",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
},
"formula": {
"si": 3
}
},
"5": {
"value": 56400,
"style": {
"backColor": "#dff3e3",
"font": "bold 12px Arial",
"formatter": "$#,##0.00",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
},
"formula": {
"si": 3
}
}
},
"17": {
"0": {
"value": "Scenario override cells",
"style": {
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"1": {
"value": "B8:C15",
"style": {
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
}
}
},
"defaultDataNode": {
"style": {
"themeFont": "Body"
}
}
},
"rowHeaderData": {
"defaultDataNode": {
"style": {
"themeFont": "Body"
}
}
},
"colHeaderData": {
"defaultDataNode": {
"style": {
"themeFont": "Body"
}
}
},
"columns": [
{
"size": 143
},
{
"size": 88
},
{
"size": 92
},
{
"size": 116
},
{
"size": 108
},
{
"size": 116
}
],
"defaultData": {
"7": {},
"8": {},
"9": {},
"10": {},
"11": {},
"12": {},
"13": {},
"14": {}
},
"leftCellIndex": 0,
"topCellIndex": 0,
"selections": {
"0": {
"row": 11,
"col": 4,
"rowCount": 1,
"colCount": 1
},
"length": 1
},
"rowOutlines": {
"items": []
},
"columnOutlines": {
"items": []
},
"cellStates": {},
"states": {},
"outlineColumnOptions": {},
"autoMergeRangeInfos": [],
"sharedFormulas": {
"0": {
"formula": "B4*C4",
"baseRow": 3,
"baseColumn": 3,
"lastRow": 14,
"lastColumn": 3
},
"1": {
"formula": "B4*28",
"baseRow": 3,
"baseColumn": 4,
"lastRow": 14,
"lastColumn": 4
},
"2": {
"formula": "D4-E4",
"baseRow": 3,
"baseColumn": 5,
"lastRow": 14,
"lastColumn": 5
},
"3": {
"formula": "SUM(B4:B15)",
"baseRow": 15,
"baseColumn": 1,
"lastRow": 15,
"lastColumn": 5
},
"nextIndex": 4
},
"printInfo": {
"paperSize": {
"width": 850,
"height": 1100,
"kind": 1
}
},
"gridline": {
"showVerticalGridline": false
},
"index": 0,
"order": 0
}
},
"sheetTabCount": 0,
"namedPatterns": {},
"scenarios": {
"Break-even": {
"name": "Break-even",
"userId": "{483FF98B-BB90-4EB4-8329-761CD56778AE}",
"overrides": [
{
"sheetName": "Annual Sales Forecast",
"dataTable": {
"7": {
"1": {
"value": 900
},
"2": {
"value": 48
}
},
"8": {
"1": {
"value": 1000
},
"2": {
"value": 48
}
},
"9": {
"1": {
"value": 1200
},
"2": {
"value": 48
}
},
"10": {
"1": {
"value": 1200
},
"2": {
"value": 48
}
},
"11": {
"1": {
"value": 1000
},
"2": {
"value": 48
}
},
"12": {
"1": {
"value": 800
},
"2": {
"value": 48
}
},
"13": {
"1": {
"value": 600
},
"2": {
"value": 48
}
},
"14": {
"1": {
"value": 600
},
"2": {
"value": 48
}
}
}
}
]
},
"Pessimistic": {
"name": "Pessimistic",
"userId": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}",
"overrides": [
{
"sheetName": "Annual Sales Forecast",
"dataTable": {
"7": {
"1": {
"value": 960
},
"2": {
"value": 48
}
},
"8": {
"1": {
"value": 1100
},
"2": {
"value": 48
}
},
"9": {
"1": {
"value": 1800
},
"2": {
"value": 48
}
},
"10": {
"1": {
"value": 1800
},
"2": {
"value": 48
}
},
"11": {
"1": {
"value": 1200
},
"2": {
"value": 48
}
},
"12": {
"1": {
"value": 800
},
"2": {
"value": 48
}
},
"13": {
"1": {
"value": 600
},
"2": {
"value": 48
}
},
"14": {
"1": {
"value": 600
},
"2": {
"value": 48
}
}
}
}
]
},
"Optimistic": {
"name": "Optimistic",
"userId": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}",
"overrides": [
{
"sheetName": "Annual Sales Forecast",
"dataTable": {
"7": {
"1": {
"value": 1000
},
"2": {
"value": 48
}
},
"8": {
"1": {
"value": 1400
},
"2": {
"value": 55
}
},
"9": {
"1": {
"value": 2300
},
"2": {
"value": 55
}
},
"10": {
"1": {
"value": 2300
},
"2": {
"value": 55
}
},
"11": {
"1": {
"value": 1400
},
"2": {
"value": 48
}
},
"12": {
"1": {
"value": 1000
},
"2": {
"value": 48
}
},
"13": {
"1": {
"value": 700
},
"2": {
"value": 48
}
},
"14": {
"1": {
"value": 700
},
"2": {
"value": 48
}
}
}
}
]
}
},
"scenarioAdditionalInfo": {
"appliedScenarios": {},
"baseValues": {
"Annual Sales Forecast": {}
}
},
"pivotCaches": {}
};
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
font-family: Arial, sans-serif;
}
.sample-spreadsheets {
width: calc(100% - 340px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 340px;
height: 100%;
padding: 16px;
box-sizing: border-box;
background: #fafafa;
border-left: 1px solid #ddd;
overflow: auto;
}
.panel-title {
color: #243447;
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.panel-copy {
color: #555;
font-size: 12px;
line-height: 1.5;
margin-bottom: 14px;
}
.option-group {
margin-bottom: 14px;
}
.option-group label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: bold;
font-size: 12px;
}
input[type=button] {
width: 100%;
padding: 9px 8px;
margin-bottom: 8px;
background: #1668a8;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
input[type=button]:hover {
background: #0f4f82;
}
.action-group input:nth-child(1) {
background: #6f5a2c;
}
.action-group input:nth-child(1):hover {
background: #584621;
}
.action-group input:nth-child(3) {
background: #287a3e;
}
.action-group input:nth-child(3):hover {
background: #1f6431;
}
.action-group input:nth-child(4) {
background: #6f5a2c;
}
.action-group input:nth-child(4):hover {
background: #584621;
}
.result-container,
.forecast-summary {
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
}
.result-container {
min-height: 34px;
padding: 9px;
margin-bottom: 14px;
box-sizing: border-box;
font-size: 12px;
line-height: 1.35;
}
.success {
color: #155724;
background: #d4edda;
border-color: #c3e6cb;
}
.error {
color: #721c24;
background: #f8d7da;
border-color: #f5c6cb;
}
.forecast-summary {
padding: 10px;
font-size: 12px;
}
.forecast-summary div {
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.forecast-summary div:last-child {
margin-bottom: 0;
}
.scenario-list {
margin: 0;
padding: 0;
list-style: none;
}
.scenario-list li {
padding: 10px;
margin-bottom: 8px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
}
.scenario-list strong,
.scenario-list em,
.scenario-list span {
display: block;
}
.scenario-list strong {
margin-bottom: 4px;
}
.scenario-list em {
color: #555;
font-size: 11px;
font-style: normal;
margin-bottom: 4px;
}
.scenario-list span {
color: #555;
font-size: 12px;
line-height: 1.35;
}
