The ScenarioChanging event occurs before a scenario is added, updated, removed, applied, restored, activated, or deactivated. You can set args.cancel = true to prevent the change:
The ScenarioChanged event occurs after a scenario operation has completed. The event args include the action, scenario, and when available, originScenario:
This demo logs semantic event details in the lower panel while the scenario panel above modifies the workbook. The Break-even scenario represents a protected finance scenario; update, active-mode, and remove operations for that scenario are cancelled in ScenarioChanging.
var PROTECTED_SCENARIO_NAME = 'Break-even';
var spread;
var scenarioPanel;
var eventIndex = 0;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(workbook) {
bindEventLogControls();
workbook.suspendPaint();
workbook.fromJSON(json);
workbook.resumePaint();
bindScenarioEvents(workbook);
scenarioPanel = new GC.Spread.Sheets.Scenarios.ScenarioPanel('scenarioPanelHost');
scenarioPanel.attach(workbook);
}
function bindScenarioEvents(workbook) {
var events = GC.Spread.Sheets.Events;
workbook.bind(events.ScenarioChanging, function (sender, args) {
var blocked = isProtectedScenarioChange(args);
if (blocked) {
args.cancel = true;
}
appendLog(formatScenarioEvent('ScenarioChanging', args, blocked));
});
workbook.bind(events.ScenarioChanged, function (sender, args) {
appendLog(formatScenarioEvent('ScenarioChanged', args, false));
});
}
function isProtectedScenarioChange(args) {
var scenario = args && args.scenario;
var originScenario = args && args.originScenario;
return !!scenario && (scenario.name === PROTECTED_SCENARIO_NAME || (originScenario && originScenario.name === PROTECTED_SCENARIO_NAME)) && (args.action === 'update' || args.action === 'activated' || args.action === 'remove');
}
function formatScenarioEvent(eventName, args, blocked) {
var scenario = args.scenario || {};
var originScenario = args.originScenario;
var parts = [
++eventIndex + '. ' + eventName,
'action=' + toActionText(args.action),
'scenario=' + (scenario.name || '(none)'),
'owner=' + getScenarioOwner(scenario.userId),
'overrides=' + countOverrideCells(scenario)
];
if (originScenario) {
parts.push('from=' + originScenario.name);
}
if (blocked) {
parts.push('cancel=true, Break-even is protected from update, activation, and deletion');
}
return parts.join(' | ');
}
function toActionText(action) {
var actions = {
add: 'add scenario',
update: 'update scenario',
remove: 'remove scenario',
apply: 'apply scenario',
restore: 'restore scenario',
activated: 'activate scenario capture',
deactivated: 'deactivate scenario capture'
};
return actions[action] || action;
}
function countOverrideCells(scenario) {
var count = 0;
(scenario.overrides || []).forEach(function (override) {
if (override.cells) {
count += override.cells.length;
return;
}
var dataTable = override.dataTable || {};
Object.keys(dataTable).forEach(function (row) {
count += Object.keys(dataTable[row] || {}).length;
});
});
return count + ' cells';
}
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 userId || 'Unknown owner';
}
function bindEventLogControls() {
document.getElementById('clearEventLog').addEventListener('click', clearEventLog);
}
function clearEventLog() {
eventIndex = 0;
document.getElementById('scenarioEventLog').value = '';
}
function appendLog(message) {
var eventLog = document.getElementById('scenarioEventLog');
eventLog.value = eventLog.value ? eventLog.value + '\n' + message : message;
eventLog.scrollTop = eventLog.scrollHeight;
}
<!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 id="scenarioPanelHost" class="scenario-panel-host"></div>
<div class="event-log-section">
<div class="event-log-header">
<label for="scenarioEventLog">Scenario event log</label>
<button type="button" id="clearEventLog">Clear</button>
</div>
<textarea id="scenarioEventLog" readonly></textarea>
</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": 21,
"columnCount": 7,
"activeRow": 9,
"activeCol": 3,
"visible": 1,
"theme": "Office",
"data": {
"dataTable": {
"0": {
"0": {
"value": "Use the panel above to add, apply, edit, activate, restore, or remove scenarios.",
"style": {
"autoFormatter": {},
"vAlign": 0,
"font": "14.6667px Calibri",
"fontSize": "14.6667px",
"fontFamily": "Calibri"
}
}
},
"1": {
"0": {
"value": "Break-even is protected from update, activation, and deletion.",
"style": {
"autoFormatter": {},
"vAlign": 0,
"font": "14.6667px Calibri",
"fontSize": "14.6667px",
"fontFamily": "Calibri"
}
}
},
"2": {
"0": {
"value": "Annual Sales Forecast of Electric Fans",
"style": {
"autoFormatter": {},
"font": "bold 16px Arial",
"fontWeight": "bold",
"fontSize": "16px",
"fontFamily": "Arial"
}
}
},
"3": {
"0": {
"value": "Actual sales through April and forecast inputs for the rest of the year."
}
},
"4": {
"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"
}
}
},
"5": {
"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
}
}
},
"6": {
"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
}
}
},
"7": {
"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
}
}
},
"8": {
"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
}
}
},
"9": {
"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
}
}
},
"10": {
"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
}
}
},
"11": {
"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
}
}
},
"12": {
"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
}
}
},
"13": {
"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
}
}
},
"14": {
"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
}
}
},
"15": {
"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
}
}
},
"16": {
"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
}
}
},
"17": {
"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
}
}
},
"19": {
"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": {},
"leftCellIndex": 0,
"topCellIndex": 0,
"selections": {
"0": {
"row": 9,
"col": 3,
"rowCount": 1,
"colCount": 1
},
"length": 1
},
"rowOutlines": {
"items": []
},
"columnOutlines": {
"items": []
},
"cellStates": {},
"states": {},
"outlineColumnOptions": {},
"autoMergeRangeInfos": [],
"sharedFormulas": {
"0": {
"formula": "B6*C6",
"baseRow": 5,
"baseColumn": 3,
"lastRow": 16,
"lastColumn": 3
},
"1": {
"formula": "B6*28",
"baseRow": 5,
"baseColumn": 4,
"lastRow": 16,
"lastColumn": 4
},
"2": {
"formula": "D6-E6",
"baseRow": 5,
"baseColumn": 5,
"lastRow": 16,
"lastColumn": 5
},
"3": {
"formula": "SUM(B6:B17)",
"baseRow": 17,
"baseColumn": 1,
"lastRow": 17,
"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": {
"9": {
"1": {
"value": 900
},
"2": {
"value": 48
}
},
"10": {
"1": {
"value": 1000
},
"2": {
"value": 48
}
},
"11": {
"1": {
"value": 1200
},
"2": {
"value": 48
}
},
"12": {
"1": {
"value": 1200
},
"2": {
"value": 48
}
},
"13": {
"1": {
"value": 1000
},
"2": {
"value": 48
}
},
"14": {
"1": {
"value": 800
},
"2": {
"value": 48
}
},
"15": {
"1": {
"value": 600
},
"2": {
"value": 48
}
},
"16": {
"1": {
"value": 600
},
"2": {
"value": 48
}
}
}
}
]
},
"Pessimistic": {
"name": "Pessimistic",
"userId": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}",
"overrides": [
{
"sheetName": "Annual Sales Forecast",
"dataTable": {
"9": {
"1": {
"value": 960
},
"2": {
"value": 48
}
},
"10": {
"1": {
"value": 1100
},
"2": {
"value": 48
}
},
"11": {
"1": {
"value": 1800
},
"2": {
"value": 48
}
},
"12": {
"1": {
"value": 1800
},
"2": {
"value": 48
}
},
"13": {
"1": {
"value": 1200
},
"2": {
"value": 48
}
},
"14": {
"1": {
"value": 800
},
"2": {
"value": 48
}
},
"15": {
"1": {
"value": 600
},
"2": {
"value": 48
}
},
"16": {
"1": {
"value": 600
},
"2": {
"value": 48
}
}
}
}
]
},
"Optimistic": {
"name": "Optimistic",
"userId": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}",
"overrides": [
{
"sheetName": "Annual Sales Forecast",
"dataTable": {
"9": {
"1": {
"value": 1000
},
"2": {
"value": 48
}
},
"10": {
"1": {
"value": 1400
},
"2": {
"value": 55
}
},
"11": {
"1": {
"value": 2300
},
"2": {
"value": 55
}
},
"12": {
"1": {
"value": 2300
},
"2": {
"value": 55
}
},
"13": {
"1": {
"value": 1400
},
"2": {
"value": 48
}
},
"14": {
"1": {
"value": 1000
},
"2": {
"value": 48
}
},
"15": {
"1": {
"value": 700
},
"2": {
"value": 48
}
},
"16": {
"1": {
"value": 700
},
"2": {
"value": 48
}
}
}
}
]
}
},
"scenarioAdditionalInfo": {
"appliedScenarios": {},
"baseValues": {}
},
"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% - 380px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 380px;
height: 100%;
box-sizing: border-box;
background: #fafafa;
border-left: 1px solid #ddd;
overflow: hidden;
display: flex;
flex-direction: column;
}
.scenario-panel-host {
flex: 1 1 58%;
min-height: 0;
padding: 6px;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.event-log-section {
flex: 0 0 42%;
min-height: 150px;
padding: 12px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 8px;
}
.event-log-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.event-log-section label {
color: #333;
font-weight: bold;
font-size: 12px;
}
.event-log-header button {
padding: 4px 10px;
border: 1px solid #bbb;
border-radius: 4px;
background: #fff;
color: #333;
cursor: pointer;
font-size: 12px;
}
.event-log-header button:hover {
background: #f0f0f0;
}
.event-log-section textarea {
flex: 1 1 auto;
min-height: 0;
width: 100%;
box-sizing: border-box;
resize: none;
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px;
background: #fff;
color: #333;
font: 12px/1.4 Consolas, Monaco, monospace;
}
