-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
500 lines (461 loc) · 26.9 KB
/
index.html
File metadata and controls
500 lines (461 loc) · 26.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Git 저장소 마이그레이션 분석: Bitbucket to GitHub</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
/* Chosen Palette: Warm Neutrals & Professional Accents */
:root {
--bg-color: #fcfbf9;
--text-main: #2d3748;
--text-secondary: #718096;
--accent-blue: #3182ce;
--accent-orange: #dd6b20;
--accent-green: #38a169;
}
body {
font-family: 'Noto Sans KR', sans-serif;
background-color: var(--bg-color);
color: var(--text-main);
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.step-connector::after {
content: '';
position: absolute;
top: 50%;
left: 100%;
width: 100%;
height: 2px;
background-color: #e2e8f0;
z-index: -1;
transform: translateY(-50%);
}
.step-connector:last-child::after {
display: none;
}
</style>
<!-- Application Structure Plan:
1. Hero Section: Clear value proposition (ISMS compliance + Cost Reduction).
2. Context Dashboard: Why we are here (ISMS 2FA requirement).
3. Market Analysis: Interactive comparison of GitHub vs Bitbucket using Chart.js to show market dominance.
4. Cost Simulation: A dynamic calculator to show the massive financial difference mentioned in the report ($4.82 vs $0.1).
5. Migration Strategy: Explaining the "Push" method simply.
6. Strategic Comparison: Side-by-side feature interaction.
-->
<!-- Visualization & Content Choices:
- Market Share: Doughnut Chart (Chart.js) to visualize GitHub's 62% dominance.
- Cost Comparison: Bar Chart (Chart.js) to contrast the total monthly costs dynamically.
- Feature List: Interactive Filterable Cards to explore pros/cons.
- Migration: Step-by-step styled HTML lists to explain the technical "Push" concept.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
</head>
<body class="antialiased">
<!-- Navigation / Header -->
<nav class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<span class="text-2xl font-bold text-gray-800">🏗️ Migration Analysis</span>
</div>
<div class="flex items-center space-x-4">
<button onclick="scrollToSection('context')" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition">배경</button>
<button onclick="scrollToSection('market')" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition">시장 점유율</button>
<button onclick="scrollToSection('cost')" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition">비용 분석</button>
<button onclick="scrollToSection('migration')" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition">마이그레이션</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="bg-white border-b border-gray-200">
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block">Bitbucket에서 GitHub으로</span>
<span class="block text-blue-600">ISMS 인증 및 비용 최적화 제안</span>
</h1>
<p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
보안 인증(ISMS)을 위한 2차 인증(2FA) 도입이 필수적입니다. 현재 시스템의 비용 구조를 분석하고, 업계 표준인 GitHub로의 전환을 통해 보안 강화와 비용 절감을 동시에 달성하는 방안을 제시합니다.
</p>
<div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
<div class="rounded-md shadow">
<button onclick="scrollToSection('cost')" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 transition">
비용 절감 효과 보기 📉
</button>
</div>
</div>
</div>
</div>
<!-- Main Content Container -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-16">
<!-- Section 1: Context (The Problem) -->
<section id="context" class="scroll-mt-20">
<div class="text-center mb-10">
<h2 class="text-3xl font-extrabold text-gray-900">현황 및 이슈: ISMS 인증과 2FA</h2>
<p class="mt-4 text-lg text-gray-500">회사 보안 정책 강화에 따른 즉각적인 대응이 필요한 시점입니다.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl shadow-lg p-6 card-hover border-l-4 border-red-500">
<h3 class="text-xl font-bold text-gray-800 mb-3">🚨 현재 상황 (Problem)</h3>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<span class="mr-2 text-red-500">▪</span>
ISMS 인증 심사를 위해 Git 시스템의 2차 인증(2FA) 필수 요구.
</li>
<li class="flex items-start">
<span class="mr-2 text-red-500">▪</span>
현재 사용 중인 Bitbucket에서 2차 인증을 강제하려면 상위 요금제로 업그레이드 필요.
</li>
<li class="flex items-start">
<span class="mr-2 text-red-500">▪</span>
<span class="font-bold">전체 직원 80명</span>에 대해 인당 <span class="font-bold text-red-600">$4.82/월</span> 추가 비용 발생 예상.
</li>
</ul>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover border-l-4 border-green-500">
<h3 class="text-xl font-bold text-gray-800 mb-3">💡 제안 솔루션 (Solution)</h3>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<span class="mr-2 text-green-500">▪</span>
SRE팀 제안: 업계 표준인 <span class="font-bold">GitHub</span>로 마이그레이션.
</li>
<li class="flex items-start">
<span class="mr-2 text-green-500">▪</span>
GitHub는 2차 인증(2FA) 기능이 <span class="font-bold text-green-600">무료</span>로 제공됨.
</li>
<li class="flex items-start">
<span class="mr-2 text-green-500">▪</span>
개발자 30명에 대해서만 인당 약 <span class="font-bold text-blue-600">$0.1</span>의 미미한 추가 비용 발생.
</li>
<li class="flex items-start">
<span class="mr-2 text-green-500">▪</span>
대부분의 개발자가 선호하며 시장 점유율 1위 플랫폼 도입.
</li>
</ul>
</div>
</div>
</section>
<!-- Section 2: Market Analysis -->
<section id="market" class="scroll-mt-20">
<div class="bg-gray-50 rounded-2xl p-8 shadow-inner">
<div class="text-center mb-8">
<h2 class="text-3xl font-extrabold text-gray-900">시장 점유율 및 플랫폼 비교</h2>
<p class="mt-4 text-lg text-gray-500">왜 개발자들은 GitHub을 선호할까요? 데이터로 보는 업계 표준.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
<!-- Chart Column -->
<div class="flex flex-col items-center">
<h4 class="text-lg font-semibold text-gray-700 mb-4">전 세계 Git 호스팅 점유율</h4>
<div class="chart-container">
<canvas id="marketShareChart"></canvas>
</div>
<p class="text-sm text-gray-500 mt-4 text-center">GitHub는 약 62%의 점유율로 사실상 업계 표준입니다.</p>
</div>
<!-- Comparison Details -->
<div class="space-y-6">
<div class="bg-white p-5 rounded-lg shadow cursor-pointer transition hover:bg-blue-50" onclick="updateDetail('github')">
<div class="flex items-center justify-between">
<h3 class="text-xl font-bold text-gray-800">GitHub (깃허브)</h3>
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-semibold">점유율 1위</span>
</div>
<p class="text-gray-600 mt-2 text-sm">오픈소스와 개인 프로젝트, 기업 개발에서 모두 압도적. 거대한 커뮤니티와 광범위한 통합 기능을 제공합니다.</p>
</div>
<div class="bg-white p-5 rounded-lg shadow cursor-pointer transition hover:bg-orange-50" onclick="updateDetail('bitbucket')">
<div class="flex items-center justify-between">
<h3 class="text-xl font-bold text-gray-800">Bitbucket (비트버킷)</h3>
<span class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-xs font-semibold">기업형 특화</span>
</div>
<p class="text-gray-600 mt-2 text-sm">호주 아틀라시안(Atlassian) 소유. Jira, Confluence와의 강력한 연동이 장점이나 점유율은 낮습니다.</p>
</div>
<div id="detailBox" class="bg-gray-800 text-white p-4 rounded-lg mt-4 hidden">
<p class="text-sm">ℹ️ <span id="detailText">항목을 클릭하면 상세 내용이 표시됩니다.</span></p>
</div>
</div>
</div>
</div>
</section>
<!-- Section 3: Cost Analysis (Calculator) -->
<section id="cost" class="scroll-mt-20">
<div class="text-center mb-10">
<h2 class="text-3xl font-extrabold text-gray-900">비용 시뮬레이션</h2>
<p class="mt-4 text-lg text-gray-500">ISMS 인증을 위한 2FA 적용 시 발생하는 월간 비용 차이를 확인하세요.</p>
</div>
<div class="bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-200">
<div class="p-6 md:p-8 bg-gray-50 border-b border-gray-200">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Controls -->
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700">전체 직원 수 (Bitbucket 업그레이드 대상)</label>
<input type="range" id="totalStaff" min="10" max="200" value="80" class="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer mt-2">
<div class="flex justify-between text-xs text-gray-500">
<span>10명</span>
<span id="totalStaffVal" class="font-bold text-blue-600 text-lg">80명</span>
<span>200명</span>
</div>
<p class="text-xs text-gray-500 mt-1">Bitbucket은 2FA 강제를 위해 전체 인원 업그레이드 필요 ($4.82/인)</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">유료 개발자 수 (GitHub 과금 대상)</label>
<input type="range" id="devStaff" min="5" max="100" value="30" class="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer mt-2">
<div class="flex justify-between text-xs text-gray-500">
<span>5명</span>
<span id="devStaffVal" class="font-bold text-green-600 text-lg">30명</span>
<span>100명</span>
</div>
<p class="text-xs text-gray-500 mt-1">GitHub은 2FA 무료, 특정 기능 사용 개발자만 추가 비용 ($0.1/인)</p>
</div>
</div>
<!-- Result Display -->
<div class="flex flex-col justify-center items-center bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
<h4 class="text-lg font-bold text-gray-700 mb-4">월간 예상 추가 비용</h4>
<div class="chart-container" style="height: 200px;">
<canvas id="costChart"></canvas>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 p-6 text-white flex flex-col md:flex-row justify-between items-center">
<div>
<h4 class="text-lg font-bold">💰 월간 절감액 예상</h4>
<p class="text-gray-400 text-sm">GitHub 전환 시 절약되는 비용</p>
</div>
<div class="text-3xl font-bold text-green-400 mt-4 md:mt-0">
$<span id="savingsVal">0</span> <span class="text-sm font-normal text-white">/ 월</span>
</div>
</div>
</div>
</section>
<!-- Section 4: Migration Strategy -->
<section id="migration" class="scroll-mt-20">
<div class="text-center mb-10">
<h2 class="text-3xl font-extrabold text-gray-900">마이그레이션: "Push" 방식이란?</h2>
<p class="mt-4 text-lg text-gray-500">복잡한 절차 없이, 기존 Git 히스토리를 그대로 유지하며 이동합니다.</p>
</div>
<div class="relative">
<!-- Timeline/Process -->
<div class="hidden md:block absolute top-1/2 left-0 w-full h-1 bg-gray-200 transform -translate-y-1/2 z-0"></div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative z-10">
<!-- Step 1 -->
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center">
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">1</div>
<h3 class="font-bold text-lg mb-2">GitHub Repo 생성</h3>
<p class="text-sm text-gray-600">이관할 GitHub 조직(Organization)에 비어있는 저장소를 생성합니다.</p>
</div>
<!-- Step 2 -->
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center">
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">2</div>
<h3 class="font-bold text-lg mb-2">Mirror Clone</h3>
<p class="text-sm text-gray-600">기존 Bitbucket 저장소를 로컬에 'Mirror' 옵션으로 복제합니다.</p>
<code class="block mt-2 bg-gray-100 p-1 text-xs rounded text-left overflow-x-auto">git clone --mirror [url]</code>
</div>
<!-- Step 3 -->
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center ring-2 ring-blue-500">
<div class="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">3</div>
<h3 class="font-bold text-lg mb-2">Mirror Push</h3>
<p class="text-sm text-gray-600">GitHub의 새 주소로 모든 브랜치와 태그를 한 번에 'Push'합니다.</p>
<code class="block mt-2 bg-gray-800 text-green-400 p-1 text-xs rounded text-left overflow-x-auto">git push --mirror [new_url]</code>
</div>
<!-- Step 4 -->
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center">
<div class="w-12 h-12 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">✓</div>
<h3 class="font-bold text-lg mb-2">완료 및 권한 부여</h3>
<p class="text-sm text-gray-600">GitHub에서 2FA 설정을 확인하고 팀원들에게 권한을 부여합니다.</p>
</div>
</div>
<div class="mt-8 bg-blue-50 border border-blue-100 rounded-lg p-4">
<h4 class="font-bold text-blue-800 mb-2">ℹ️ "Push 지원"의 의미</h4>
<p class="text-sm text-blue-700">
SRE팀이 언급한 "마이그레이션도 푸시로 지원한다"는 것은, 복잡한 데이터베이스 이전 작업이나 별도의 마이그레이션 도구 구매 없이,
Git의 기본 명령어인 <span class="font-mono bg-white px-1 rounded">push</span> 명령어를 통해
<strong>소스코드, 커밋 히스토리, 브랜치, 태그</strong> 등 모든 데이터를 손쉽게 그대로 옮길 수 있음을 의미합니다.
</p>
</div>
</div>
</section>
<!-- Conclusion -->
<section class="bg-gray-900 rounded-2xl p-8 md:p-12 text-center text-white">
<h2 class="text-3xl font-bold mb-4">결론: GitHub로의 전환을 권장합니다</h2>
<p class="text-gray-300 max-w-2xl mx-auto mb-8">
ISMS 인증 요건 충족, 막대한 비용 절감, 그리고 개발자들의 만족도 향상까지.
GitHub로의 전환은 선택이 아닌 필수적인 전략입니다.
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
<div class="flex items-center justify-center space-x-2">
<span class="text-2xl">🛡️</span>
<span class="text-left">
<span class="block text-sm text-gray-400">보안</span>
<span class="font-bold">2FA 무료 적용</span>
</span>
</div>
<div class="flex items-center justify-center space-x-2">
<span class="text-2xl">💰</span>
<span class="text-left">
<span class="block text-sm text-gray-400">비용</span>
<span class="font-bold">월 90% 이상 절감</span>
</span>
</div>
<div class="flex items-center justify-center space-x-2">
<span class="text-2xl">🚀</span>
<span class="text-left">
<span class="block text-sm text-gray-400">생산성</span>
<span class="font-bold">업계 표준 도구</span>
</span>
</div>
</div>
</section>
</main>
<footer class="bg-white border-t border-gray-200 mt-12 py-8">
<div class="max-w-7xl mx-auto px-4 text-center text-gray-500 text-sm">
<p>© 2024 Migration Strategy Report. Based on internal SRE analysis.</p>
</div>
</footer>
<script>
// --- State Management ---
const state = {
bitbucket: {
users: 80,
costPerUser: 4.82
},
github: {
users: 30,
costPerUser: 0.1
},
charts: {}
};
// --- Navigation ---
function scrollToSection(id) {
const el = document.getElementById(id);
if (el) el.scrollIntoView({ behavior: 'smooth' });
}
// --- Interaction Logic: Details ---
function updateDetail(platform) {
const detailBox = document.getElementById('detailBox');
const detailText = document.getElementById('detailText');
detailBox.classList.remove('hidden');
if (platform === 'github') {
detailBox.className = "bg-blue-600 text-white p-4 rounded-lg mt-4 animate-fade-in-up";
detailText.innerHTML = "<strong>GitHub:</strong> 마이크로소프트 소유. 전 세계 오픈소스의 성지이며, 개발자들에게 가장 익숙한 UI/UX를 제공합니다. 2차 인증이 기본 무료입니다.";
} else {
detailBox.className = "bg-orange-600 text-white p-4 rounded-lg mt-4 animate-fade-in-up";
detailText.innerHTML = "<strong>Bitbucket:</strong> 아틀라시안 생태계(Jira 등)와의 강력한 통합이 장점이지만, 보안 기능을 위해 높은 비용의 플랜 업그레이드가 필요합니다.";
}
}
// --- Chart Initialization & Logic ---
document.addEventListener('DOMContentLoaded', () => {
initMarketChart();
initCostChart();
updateCostCalculation(); // Initial calc
// Input Listeners
document.getElementById('totalStaff').addEventListener('input', (e) => {
state.bitbucket.users = parseInt(e.target.value);
document.getElementById('totalStaffVal').innerText = state.bitbucket.users + "명";
updateCostCalculation();
});
document.getElementById('devStaff').addEventListener('input', (e) => {
state.github.users = parseInt(e.target.value);
document.getElementById('devStaffVal').innerText = state.github.users + "명";
updateCostCalculation();
});
});
function initMarketChart() {
const ctx = document.getElementById('marketShareChart').getContext('2d');
state.charts.market = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['GitHub', 'GitLab', 'Bitbucket', 'Others'],
datasets: [{
data: [62, 15, 10, 13], // Estimates based on generic "dominance" narrative in text
backgroundColor: ['#3182ce', '#fc8181', '#dd6b20', '#cbd5e0'],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom' },
tooltip: {
callbacks: {
label: function(context) {
return context.label + ': ' + context.raw + '%';
}
}
}
}
}
});
}
function initCostChart() {
const ctx = document.getElementById('costChart').getContext('2d');
state.charts.cost = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Bitbucket (유지 시)', 'GitHub (전환 시)'],
datasets: [{
label: '월간 추가 비용 ($)',
data: [0, 0], // Will be updated
backgroundColor: ['#f56565', '#48bb78'],
barThickness: 50,
borderRadius: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: { display: true, text: '비용 ($)' }
}
},
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: function(context) {
return '$' + context.raw.toFixed(2);
}
}
}
}
}
});
}
function updateCostCalculation() {
// Calculate Costs
const bitbucketCost = state.bitbucket.users * state.bitbucket.costPerUser;
const githubCost = state.github.users * state.github.costPerUser;
const savings = bitbucketCost - githubCost;
// Update DOM text
document.getElementById('savingsVal').innerText = savings.toFixed(2);
// Update Chart
state.charts.cost.data.datasets[0].data = [bitbucketCost, githubCost];
state.charts.cost.update();
}
</script>
</body>
</html>