-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathc2i_Budget.html
295 lines (270 loc) · 15.5 KB
/
c2i_Budget.html
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
<!DOCTYPE html>
<meta charset="utf-8">
<title>C2i:인포그래픽-예산/계획 차트</title>
<script src="assets/lib/d3.min.js" charset="utf-8"></script>
<script src="assets/lib/three.min.js"></script>
<script src="assets/js/c2i.v2.min.js"></script>
<script src="assets/i18n/c2i_kr.js"></script>
<!-- 다국어 사용시 아래 스크립트 필요합니다. (사용하지 않으면 제거) -->
<!--<script src="../assets/i18n/c2i_en.js"></script>-->
<!--<script src="../assets/i18n/c2i_jp.js"></script>-->
<!--<script src="../assets/i18n/c2i_ch.js"></script>-->
<!-- 정품 인증번호 발급 및 적용시 아래 스크립트 필요합니다. -->
<!--<script src="../assets/c2iLicenseKey.js"></script>-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/c2i.v2.min.css">
<link rel="stylesheet" href="assets/css/demo.css">
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<style>
body{
background-color: #474747;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="index.html#c2iDemo" style="color: white"><div class="btn btn-primary btn-sm">홈</div></a>
<div id="c2iGuide" class="btn btn-primary btn-sm">도움말</div>
<div id="save" class="btn btn-warning btn-sm">익스포트</div>
</div>
<div class="col-md-9">
<div id="bPlan" class="btn btn-info btn-sm" title="Shift+DblClk">예산실적 토글</div>
<div id="bSameSize" class="btn btn-info btn-sm" title="Alt+DblClk">동일조각 토글</div>
<div id="fullSize" class="btn btn-default btn-sm" title="Shift+Alt+DblClk">메인크기 토글</div>
<div id="sameRadius" class="btn btn-default btn-sm">위성크기 토글</div>
<div id="mainPieHalfCircle" class="btn btn-success btn-sm">메인 반원 토글</div>
<div id="planetPieHalfCircle" class="btn btn-success btn-sm">위성 반원 토글 </div>
</div>
</div>
<div id="c2iGuideInfo" class="row c2iHidden c2iGuideInfo">
<div class="container">
<button id="c2iGuideClose" class="btn btn-primary btn-sm float my-float">닫기</button>
<div class="page-header">
<h1 class="text-primary">씨투아이 예산/계획/목표대비 실적차트 컴포넌트</h1>
<p>예산/계획/목표대비 성격의 데이터를 비교하기 좋으며, 구성 하위계정에 대한 인사이트도 제공합니다.</p>
</div>
<!-- 데모 따라하기-->
<h3>데모 따라하기</h3>
<div class="row">
<div class="col-md-3">0.모든 곳에서 더블-클릭시 항목 값,계정명 정렬</div>
<div class="col-md-8">예: 예산금액 또는 계정명 기준으로 내림차순 -> 오름차순 -> 초기순서</div>
</div>
<div class="row">
<div class="col-md-3">1.위성 파이 차트의 예산, 실적별로 클릭</div>
<div class="col-md-8">유형 변경시 설정된 애니메이션 시간과 이징(easing) 함수 적용</div>
</div>
<!-- 데이터 구조-->
<h3>데이터 구조: csv, tsv , dsv 등의 화일타입 구분은 의미 없음</h3>
<div class="row">
<div class="col-md-1">0.csv</div>
<div class="col-md-11">
<pre><code>
ymd,accNm,budget,supplementary,performance
2017-10-01,사회복지,2605,400,1700
2017-10-01,일반공공행정,2200,300,3000
2017-10-01,수송및교통,2300,500,2050
2017-10-01,교육,2500,0,8500
2017-10-01,환경보호,1300,400,0
2017-10-01,국토및지역개발,6800,0,1130
2017-10-01,기타,0,0,380
예산(계획, 목표)구성 : 기초예산, 추경예산 등 복수개 가능
집행실적 구성.......: 집행 및 기타 항목의 복수개 추가 가능
c2i.infoG.budget('#c2iBudget', options).render();
</code></pre>
</div>
</div>
<div class="row">
<div class="col-md-1">1.json</div>
<div class="col-md-11">
<pre><code>
의미 없음
</code></pre>
</div>
</div>
<!-- 개발자 코딩 제공 부분 -->
<h3>개발자 코딩 제공 부분</h3>
<p>홈, 도움말, 예산실적 ~ 차트크기 변경은 <strong>개발자가 씨투아이 API등을 활용하여 임의로 코딩</strong>하여 제공한 UI 입니다.</p>
<p>또한 차트 영역에서 <strong>키보드 클릭과 함께 더블클릭시 단축 실행됩니다.</strong></p>
</div>
</div>
<div class="row">
<div class="col-md-offset-1 col-md-10 col-lg-10">
<div id="c2iBudget" class="c2iBudget c2iNoSelect"></div>
</div>
<!--<div class="col-sm-2 col-md-2 col-lg-2">-->
<!--<div id="c2iLegend" class="c2iLegend otherClass2" style="position:absolute; top: 130px; left: 10px; z-index:99"></div>-->
<!--</div>-->
</div>
</div>
<!-- 자동 툴팁 사용시 name, measure는 필수 존재 내역입니다.
Custom Tooltip은 별도 ID로 만들어 사용자가 임의로 프로그램 가능합니다. -->
<div id="tooltip" class="c2iTooltip c2iHidden">
<table style="width:200px">
<thead>
<tr>
<th colspan='4' class="tipHeader">
<div class="c2iCloseBtn" title="닫기">X</div>
<p><strong><span id="name">판매본부</span></strong></p>
<p id="measure" style="font-size: 14px; color:yellow">1,200</p>
<hr style="margin:2px 0px;"> <!-- ratio가 있거나 hr 태그가 존재해야 합니다 -->
<p id="ratio"></p>
<!--<p><span id="testId" style="font-size: 12px; color: orange;">사용자 임의 툴팁 적용시,<br> 제공 데이터로 재구성 가능.</span></p>-->
</th>
</tr>
</thead>
</table>
</div>
<script>
/*
대.소문자는 반드시 준수해야 합니다.
옵션이 없거나(미정의) '' 이면, 필수요소는 기본값 자동 적용되며 불필요한 옵션은 자동으로 적용되지 않습니다.
*** 공통 정보
-. isResponsive: true, false (기본값: false)
-. fullSize: 메인파이가 사용 가능한 영역의 전체 사용여부
-. exceptValue: 파이의 특성상 그리지 않아야 할 값 설정.(통상 0(zero))
-. stroke & strokeWidth: 파이 테두리 색상 및 두께
*** group: 특정 기준에 따라서 변화되는 정보를 제공하기 위한 목적의 기준정보입니다.
-. colNm: 통상 일자,년월,년도 또는 부서,지역등의 정보가 될 수 있음
-. caption: 명칭
-. format: 정수(,d), 실수(,f 또는 ,.2f), 백분율(% .2%)
-. fonts: 폰트 정보
*** account: 메인파이의 주 계정 정보
-.fonts: ['맑은 고딕','12px','#c4be09'] 3번째 색상은 명칭에 대한 강제 지정이며, 없으면 대조적인 색상으로 자동 반영됩니다.
-.labelInMainPie : 계정명등의 정보 표시 위치로서, true이면 메인파이, false이면 위성파이에 표시.
*** unitNm 또는 specialUnits(우선 적용) : 예산,실적 표출단위 명(v3)
-.unitNm : 단순 단위명.
-.specialUnits: 금액 단위별 별칭 지정.(decimals은 소수 이하자리 수)
*** mainPie(메인 파이)
-.bPlan : true => 예산/계획/목표 값, false => 실적/달성/성과 값
-.bSameSize : true => 파이조각 동일함 (이때 sub 파이는 동일 계정내의 점유율을 나타내게 됩니다.)
false => 값 기준으로 파이조각 크기 설정
-.inRadius : 0.5 ~ 0.9
-.color : 2D 색상 -> 10, 20, 20b, 20c,
YlGn,YlGnBu,GnBu,PuBuGn,PuBu, BuPu,RdPu,PuRd,OrRd,YlOrRd,YlOrBr,Purples,Blues,
Greens,Oranges,Reds, Greys,PuOr,PRGn,PiYG,RdBu,RdGy,RdYlBu,Spectral,RdYlGn
또는 임의 색상 배열(예: ["#c3c3c3", "#985455"...])
-.halfCircle: 반원형 차트 여부
-.radiusIncrease: 차트 그릴경우 반지름을 점진적으로 증가하며 그리기.
-.padding: 메이파이와 위성파이와의 간격 조정 설정.
-.showLabels: 명칭, 값, 분포율 표시 여부 (['name', 'value', 'ratio'])
-.dyLabel: 상위 명칭, 값, 분포율간의 간격
-.drawSequence: 파이 조각 그릴경우 애니메이션 방법.(true: 순차적으로 실행)
-.sub: 메인 파이 위에 적용될 서브계정 정보
.color: 항목 갯수에 맞게 적용하면 동일 계열은 같은 배경 색상을 표시합니다.(예: 기초, 추경을 위해 2개를 적용함)
.drawSequence: 메인파이 drawSequence와 다르게 설정하면 반대방향의 애니메이션 적용효과 발생
.draw: 표시 여부
*** planetPie(위성 파이)
-.exceptColor: exceptValue에 대한 색상
-.inheritedColor: exceptValue가 아니며 true인 경우 메인파이 영역 색상 상속하여 표시하며,
false인 경우 color[1]를 실적 조각에 반영한다.
-.format: [',f', '.1%'] 첫번째는 값, 두번째는 분포율 표시용도.
-.sameRadius: 모든 위성 파이 반지름을 동일하게 또는 예산,실적별(mainPie 의 bPlan의 설정에 따라) 데이터 값에 따른 크기로 설정 여부.
-.scale: radius 적용 기준 => linear(기본값), sqrt
-.dimNms: 배열의 첫번째에는 항상 계획/예산/목표등의 성격을 두번째에는 실적/달성/성과등의 성격을 설정해야 합니다.(이유: 분모 설정)
-.color: dimNms에 해당하는 색상
-.faultDimNms: ['예산 없음','실적 없음','초과'] 배열의 의미와 동일한 레이블명 필요합니다.
-.inRadius: 도너츠의 안쪽 반지름 비율.(0.0 ~ 0.9)
-.halfCircle: 반원형 차트 여부
-.draw: 표시 여부
*** measures : 계획,실적 등을 구성하는 여러개의 서브항목 설정이 가능합니다.
-.caption: 서브 계정명
-.colNm: 서브 계정 컬럼명
-.format: [',f', '.1%'] 첫번째는 값, 두번째는 분포율 표시용도.
-.groupByDim: 예산 또는 실적으로 분류용도로서 planetPie.dimNms의 명칭과 동일해야 합니다.
*/
var options = {
isResponsive: true, width:'100%', aspectRatio: '80%', theme:'#474747',
margin : {top: 20, left: 5, right: 5, bottom: 5},
duration:750, delay:100, easing:'linear',
title: {
caption:"예산대비 집행실적 종합 분석",fonts:['맑은 고딕','20px','white','black'],textDeco:"underline",
gap: 1, xPos:'middle', yPos:'top',
subCaption:"경기도 재정 기준", subFonts: ['맑은 고딕',',12px','#777','yellow'], opacity:1,
desc:"예산 및 목표, 계획대비 실적 분석에 적합한 컴포넌트"
},
fullSize: false, exceptValue: 0, stroke:'#c4be09', strokeWidth: 0,
group: {colNm:'ymd', caption:'집행일자', format:'', fonts:['맑은 고딕','12px', '#c4be09']},
account: {colNm:'accNm', caption:'계정명', fonts:['맑은 고딕','12px', '#f4ee09'], labelInMainPie: true},
unitNm: '억',
// specialUnits: [
// { unitNm: " 조", unit: 1000000000000, decimals: 2}, // trillion
// { unitNm: " 십억", unit: 1000000000, decimals: 1}, // billion
// { unitNm: " 억", unit: 100000000, decimals: 1},
// { unitNm: " 백만", unit: 1000000, decimals: 0} // million
// ],
mainPie: {
bPlan: true, bSameSize: false, inRadius: 0.55, color:'20b', halfCircle: false, radiusIncrease: false,
padding:3, showLabels:['name', 'value', 'ratio'], dyLabel: 15, drawSequence:false,
sub: {width: 40, color: ["#166097","#d53636"], dyLabel: 5, fonts: ['맑은 고딕', '11px'],
drawSequence:true, draw: true}
},
planetPie: {exceptColor:'red', inheritedColor:false, format:[',f', '.1%'], sameRadius: false, scale:'linear',
fonts: ['맑은 고딕', '12px'], stroke:'#c4be09', strokeWidth: 0, dyLabel: 5,
dimNms: ['예산','실적'], color: ["#a5a5a5","#985455"], faultDimNms: ['예산 없음','실적 없음','초과'],
inRadius: 0.50, halfCircle: false, draw: true},
measures:[
{caption:'기초', colNm:'budget', format:[',f', '.0%'], groupByDim:'예산'},
{caption:'추경', colNm:'supplementary', format:[',f', '.0%'], groupByDim:'예산'},
{caption:'실적', colNm:'performance', format:[',f', '.0%'], groupByDim:'실적'}
],
method:{click:getClickInfo, mouseenter:getMouseEnterInfo, mouseleave:getMouseLeaveInfo, mousemove: getTooltipInfo},
isDev:false
};
var c2iBudget01 = c2i.infoG.budget('#c2iBudget', options);
d3.csv("./assets/data/infoG/watchBudget.csv", function(error, data) {
if (error) throw error;
c2iBudget01.data(data).render();
});
///////////////////
function getClickInfo(fromSource, data){
console.log(fromSource.container + ',' + fromSource.selector + ' click ');
for(var attr in data){
console.log(attr + ' : ' + data[attr]);
}
}
function getMouseEnterInfo(fromSource, data){
console.log(fromSource.container + ',' + fromSource.selector + ' getMouseEnterInfo')
}
function getMouseLeaveInfo(fromSource, data){
console.log(fromSource.container + ',' + fromSource.selector + ' getMouseLeaveInfo')
}
function getTooltipInfo(fromSource, data){
console.log(fromSource.container + ',' + fromSource.selector + ' getTooltipInfo');
document.getElementById('name').innerHTML = '주어진 데이터를 기반으로';
document.getElementById('measure').innerHTML = '코딩 확장 구현 하세요..!';
}
</script>
<script>
d3.select('#c2iGuide').on('click', c2iGuide);
d3.select('#c2iGuideClose').on('click', c2iGuideClose);
d3.select('#fullSize').on('click', function(){
c2iBudget01.toggleFullSize();
});
d3.select('#bPlan').on('click', function(){
c2iBudget01.togglePlanResult();
});
d3.select('#bSameSize').on('click', function(){
c2iBudget01.toggleSameSize();
});
d3.select('#sameRadius').on('click', function(){
c2iBudget01.toggleSameRadius();
});
d3.select('#mainPieHalfCircle').on('click', function(){
c2iBudget01.toggleMainPieHalfCircle();
});
d3.select('#planetPieHalfCircle').on('click', function(){
c2iBudget01.togglePlanetPieHalfCircle();
});
d3.select('#save').on('click', exportImage);
function exportImage(){
c2i.util.exportImage(['#c2iBudget']);
c2iBudget01.exportData('text','all'); // 'text'(default),'xls' / ''(default),'all'
}
function c2iGuide() {
d3.select('#c2iGuideInfo').classed('c2iHidden', !d3.select('#c2iGuideInfo').classed('c2iHidden'));
}
function c2iGuideClose() {
d3.select('#c2iGuideInfo').classed('c2iHidden', true);
}
</script>