SpreadJS 시나리오 매니저는 통합 문서의 시나리오를 조회하고 관리하는 API를 제공합니다.
이 데모에서는 사이드 패널에서 ScenarioManager API를 직접 호출합니다.
시나리오 조회
all()을 사용해 각 시나리오를 가져와 목록에 표시합니다.
적용 및 복원
예측 값을 비교하려면 시나리오 하나를 적용하고, 적용된 스택에서 해당 시나리오를 복원할 수 있습니다.
활성 시나리오 설정
선택 상자에서 활성 시나리오를 고른 다음 그 이름을 setActiveScenario에 전달합니다.
시나리오 제거
이름으로 시나리오 하나를 삭제하거나 모든 시나리오를 삭제합니다.
var spread;
var activeScenarioName = '';
var scenarioDescriptions = {
'Break-even': '재무 목표: 선풍기 제품군의 고정 운영 비용을 충당하는 데 필요한 매출입니다.',
Pessimistic: '표준 단가에서 수요 감소를 반영한 매출 하향 예측입니다.',
Optimistic: '수요 증가와 선택적 가격 인상을 반영한 매출 상향 예측입니다.'
};
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(workbook) {
workbook.fromJSON(json);
bindControls();
refreshPanel();
}
function bindControls() {
document.getElementById('toggleActive').onclick = toggleActiveScenario;
document.getElementById('restoreAll').onclick = function () {
spread.scenarioManager.restore();
showResult('scenarioManager.restore()로 적용된 모든 시나리오를 복원했습니다.', 'success');
refreshPanel();
};
document.getElementById('removeAll').onclick = function () {
spread.scenarioManager.remove();
activeScenarioName = '';
showResult('scenarioManager.remove()로 모든 시나리오를 삭제했습니다.', 'success');
refreshPanel();
};
}
function refreshPanel() {
var manager = spread.scenarioManager;
var scenarios = manager.all().map(getScenarioSummary);
var list = document.getElementById('scenarioList');
list.innerHTML = '';
scenarios.forEach(function (scenario) {
var card = document.createElement('div');
card.className = 'scenario-card';
card.innerHTML = '<div class="scenario-name">' + scenario.name + '</div><div class="scenario-detail">' + scenario.description + '</div>';
card.appendChild(createButton('적용', function () { applyScenario(scenario.name); }));
card.appendChild(createButton('복원', function () { restoreScenario(scenario.name); }));
card.appendChild(createButton('삭제', function () { deleteScenario(scenario.name); }));
list.appendChild(card);
});
document.getElementById('activeScenario').textContent = activeScenarioName || '없음';
document.getElementById('appliedScenarios').textContent = manager.getAppliedScenarios().join(', ') || '없음';
document.getElementById('toggleActive').value = activeScenarioName ? '비활성화' : '활성화';
}
function createButton(value, handler) {
var button = document.createElement('input');
button.type = 'button';
button.value = value;
button.onclick = handler;
return button;
}
function applyScenario(name) {
spread.scenarioManager.apply(name);
showResult('scenarioManager.apply("' + name + '")로 이 시나리오를 적용했습니다.', 'success');
refreshPanel();
}
function restoreScenario(name) {
spread.scenarioManager.restore(name);
showResult('scenarioManager.restore("' + name + '")로 적용 스택에서 이 시나리오를 제거했습니다.', 'success');
refreshPanel();
}
function deleteScenario(name) {
spread.scenarioManager.remove(name);
if (activeScenarioName === name) {
activeScenarioName = '';
}
showResult('scenarioManager.remove("' + name + '")로 이 시나리오를 삭제했습니다.', 'success');
refreshPanel();
}
function toggleActiveScenario() {
var manager = spread.scenarioManager;
if (activeScenarioName) {
manager.setActiveScenario(null);
showResult('scenarioManager.setActiveScenario(null)로 시나리오 캡처를 비활성화했습니다.', 'success');
activeScenarioName = '';
} else {
var selectedName = document.getElementById('activeScenarioSelect').value;
if (!manager.get(selectedName)) {
showResult('시나리오 "' + selectedName + '"을(를) 찾을 수 없습니다.', 'error');
refreshPanel();
return;
}
manager.setActiveScenario(selectedName);
activeScenarioName = selectedName;
showResult('scenarioManager.setActiveScenario("' + selectedName + '")로 시나리오 캡처를 활성화했습니다.', 'success');
}
refreshPanel();
}
function getScenarioSummary(scenario) {
return {
name: scenario.name,
description: getScenarioDescription(scenario)
};
}
function getScenarioDescription(scenario) {
var comment = '';
(scenario.overrides || []).forEach(function (override) {
comment = comment || override.comment || '';
});
return comment || scenarioDescriptions[scenario.name] || '';
}
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="spreadjs culture" content="ko-kr" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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">시나리오 API</div>
<div id="result" class="result-container success">작업 설명</div>
<div class="option-group toolbar">
<input type="button" value="모두 복원" id="restoreAll" />
<input type="button" value="모두 제거" id="removeAll" />
</div>
<div class="option-group active-editor">
<select id="activeScenarioSelect">
<option value="Optimistic">Optimistic</option>
<option value="Pessimistic">Pessimistic</option>
<option value="Break-even">Break-even</option>
</select>
<input type="button" value="활성화" id="toggleActive" />
</div>
<div class="option-group summary">
<div><span>활성:</span><strong id="activeScenario">없음</strong></div>
<div><span>적용됨:</span><strong id="appliedScenarios">없음</strong></div>
</div>
<div class="option-group">
<div id="scenarioList" class="scenario-list"></div>
</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": {
"연간 매출 예측": {
"name": "연간 매출 예측",
"isSelected": true,
"rowCount": 19,
"columnCount": 7,
"activeRow": 11,
"activeCol": 4,
"visible": 1,
"theme": "Office",
"data": {
"dataTable": {
"0": {
"0": {
"value": "선풍기 연간 매출 예측",
"style": {
"autoFormatter": {},
"font": "bold 16px Arial",
"fontWeight": "bold",
"fontSize": "16px",
"fontFamily": "Arial"
}
}
},
"1": {
"0": {
"value": "4월까지의 실제 매출과 나머지 기간의 예측 입력입니다."
}
},
"2": {
"0": {
"value": "월",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"1": {
"value": "수량",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"2": {
"value": "단가",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"3": {
"value": "매출",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"4": {
"value": "비용",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"5": {
"value": "이익",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
}
},
"3": {
"0": {
"value": "1월",
"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": "2월",
"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": "3월",
"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": "4월",
"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": "5월",
"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": "6월",
"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": "7월",
"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": "8월",
"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": "9월",
"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": "10월",
"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": "11월",
"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": "12월",
"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": "시나리오 재정의 셀",
"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": "연간 매출 예측",
"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": "연간 매출 예측",
"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": "연간 매출 예측",
"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": {
"연간 매출 예측": {}
}
},
"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: 12px;
box-sizing: border-box;
background: #fbfbfb;
border-left: 1px solid #ddd;
overflow: auto;
}
.panel-title {
color: #243447;
font-weight: bold;
font-size: 16px;
margin-bottom: 6px;
}
.option-group {
margin-bottom: 14px;
}
.option-group label {
display: block;
margin-bottom: 6px;
font-weight: bold;
font-size: 12px;
}
input[type=button] {
padding: 7px 10px;
margin: 0 4px 6px 0;
background: #007acc;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
font-weight: bold;
}
input[type=button]:hover {
background: #005a9e;
}
.toolbar input[type=button] {
width: calc(50% - 6px);
}
.active-editor {
display: flex;
gap: 8px;
}
.active-editor select {
flex: 1;
height: 31px;
padding: 6px 8px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 12px;
}
.active-editor input[type=button] {
width: 110px;
margin-right: 0;
}
.result-container,
.summary,
.scenario-card {
border: 1px solid #ddd;
border-radius: 3px;
background: #fff;
}
.result-container {
min-height: 28px;
padding: 8px;
margin-bottom: 14px;
font-size: 12px;
}
.success {
color: #155724;
background: #d4edda;
border-color: #c3e6cb;
}
.error {
color: #721c24;
background: #f8d7da;
border-color: #f5c6cb;
}
.summary {
padding: 8px;
font-size: 12px;
}
.summary div {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.summary div:last-child {
margin-bottom: 0;
}
.scenario-card {
padding: 10px;
margin-bottom: 8px;
}
.scenario-name {
font-weight: bold;
margin-bottom: 4px;
}
.scenario-detail {
color: #555;
font-size: 12px;
margin-bottom: 8px;
line-height: 1.35;
}
.scenario-card input[type=button] {
width: calc(33.33% - 5px);
}
.scenario-card input[type=button]:nth-of-type(2) {
background: #6f5a2c;
}
.scenario-card input[type=button]:nth-of-type(2):hover {
background: #584621;
}
.scenario-card input[type=button]:nth-of-type(3) {
background: #b3261e;
}
.scenario-card input[type=button]:nth-of-type(3):hover {
background: #8c1d18;
}
