안녕하세요, 초보개발자입니다.
자바스크립트 여쭤볼것이 있는데요,
GitHub에 있는 cBoard란 BI대쉬보드 오픈소스를 받아서 공부하고 있습니다.
제가 지금까지 알고있었던 자바스크립트의 함수표현식은, 예를들면, 아래와 같은 형식이었습니다만,
var parseOption = function (data) {
return echartOption;
}아래 소스코드는 chartLineService.js란 파일의 첫줄인데요, 해석이 잘 안되서요. 도움을 요청합니다.
cBoard.service('chartLineService', function ($state, $window)위 소스코드 부분만 해석을 부탁드려도 될까요?
제가 이해한 것은
cBoard.service에 'chartLineService'를 주입한다.
chartLineService는 $state와 $window를 매개변수로 받는다.
정도입니다만, 사실 너무 헷갈립니다.
cBoard.service는 객체일까요? 함수일까요?
state와 window앞에 $표시는 무슨역할이죠? 제이쿼리는 아닌것같습니다만,
(본 소스코드 view(html)부분은 angular js가 사용되고 있습니다)
만약을 위해 전체 소스를 아래에 붙이겠습니다.
참고. chartLineService.js 전체 소스
cBoard.service('chartLineService', function ($state, $window) {
this.render = function (containerDom, option, scope, persist, drill, relations, chartConfig) {
var render = new CBoardEChartRender(containerDom, option);
render.addClick(chartConfig, relations, $state, $window);
return render.chart(null, persist);
};
this.parseOption = function (data) {
var chartConfig = data.chartConfig;
var casted_keys = data.keys;
var casted_values = data.series;
var aggregate_data = data.data;
var newValuesConfig = data.seriesConfig;
var series_data = new Array();
var string_keys = _.map(casted_keys, function (key) {
return key.join('-');
});
var tunningOpt = chartConfig.option;
var sum_data = [];
for (var j = 0; aggregate_data[0] && j < aggregate_data[0].length; j++) {
var sum = 0;
for (var i = 0; i < aggregate_data.length; i++) {
sum += aggregate_data[i][j] ? Number(aggregate_data[i][j]) : 0;
// change undefined to 0
aggregate_data[i][j] = aggregate_data[i][j] ? Number(aggregate_data[i][j]) : 0;
}
sum_data[j] = sum;
}
var line_type;
for (var i = 0; i < aggregate_data.length; i++) {
var joined_values = casted_values[i].join('-');
var s = angular.copy(newValuesConfig[joined_values]);
s.name = joined_values;
s.data = aggregate_data[i];
s.barMaxWidth = 40;
line_type = s.type;
if (s.type == 'stackbar') {
s.type = 'bar';
s.stack = s.valueAxisIndex.toString();
} else if (s.type == 'polarbar') {
s.type = 'bar';
s.stack = s.valueAxisIndex.toString();
s.coordinateSystem = 'polar';
} else if (s.type == 'percentbar') {
if (chartConfig.valueAxis == 'horizontal') {
s.data = _.map(aggregate_data[i], function (e, i) {
return (e / sum_data[i] * 100).toFixed(2);
})
} else {
s.data = _.map(aggregate_data[i], function (e, i) {
return [i, (e / sum_data[i] * 100).toFixed(2), e];
});
}
s.type = 'bar';
s.stack = s.valueAxisIndex.toString();
} else if (s.type == "arealine") {
s.type = "line";
s.areaStyle = {normal: {}};
} else if (s.type == "stackline") {
s.type = "line";
s.stack = s.valueAxisIndex.toString();
s.areaStyle = {normal: {}};
} else if (s.type == 'percentline') {
if (chartConfig.valueAxis == 'horizontal') {
s.data = _.map(aggregate_data[i], function (e, i) {
return (e / sum_data[i] * 100).toFixed(2);
})
} else {
s.data = _.map(aggregate_data[i], function (e, i) {
return [i, (e / sum_data[i] * 100).toFixed(2), e];
});
}
s.type = "line";
s.stack = s.valueAxisIndex.toString();
s.areaStyle = {normal: {}};
}
if (chartConfig.valueAxis == 'horizontal') {
s.xAxisIndex = s.valueAxisIndex;
} else {
s.yAxisIndex = s.valueAxisIndex;
}
series_data.push(s);
}
var valueAxis = angular.copy(chartConfig.values);
_.each(valueAxis, function (axis, index) {
axis.axisLabel = {
formatter: function (value) {
return numbro(value).format("0a.[0000]");
}
};
if (axis.series_type == "percentbar" || axis.series_type == "percentline") {
axis.min = 0;
axis.max = 100;
} else {
axis.min = axis.min ? axis.min : null;
axis.max = axis.max ? axis.max : null;
}
if (index > 0) {
axis.splitLine = false;
}
axis.scale = true;
});
if (tunningOpt) {
var labelInterval, labelRotate;
tunningOpt.ctgLabelInterval ? labelInterval = tunningOpt.ctgLabelInterval : 'auto';
tunningOpt.ctgLabelRotate ? labelRotate = tunningOpt.ctgLabelRotate : 0;
}
var categoryAxis = {
type: 'category',
data: string_keys,
axisLabel: {
interval: labelInterval,
rotate: labelRotate
},
boundaryGap: false
};
_.each(valueAxis, function (axis) {
var _stype = axis.series_type;
if (_stype.indexOf('bar') !== -1) {
categoryAxis.boundaryGap = true;
}
});
var echartOption = {
grid: angular.copy(echartsBasicOption.grid),
legend: {
data: _.map(casted_values, function (v) {
return v.join('-');
})
},
tooltip: {
formatter: function (params) {
var name = params[0].name;
var s = name + "</br>";
for (var i = 0; i < params.length; i++) {
s += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + '"></span>';
if (params[i].value instanceof Array) {
s += params[i].seriesName + " : " + params[i].value[1] + "% (" + params[i].value[2] + ")<br>";
} else {
s += params[i].seriesName + " : " + params[i].value + "<br>";
}
}
return s;
},
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
series: series_data
};
if (line_type == 'polarbar') {
echartOption.angleAxis = chartConfig.valueAxis == 'horizontal' ? valueAxis : categoryAxis;
echartOption.radiusAxis = chartConfig.valueAxis == 'horizontal' ? categoryAxis : valueAxis;
echartOption.polar = {};
} else {
echartOption.xAxis = chartConfig.valueAxis == 'horizontal' ? valueAxis : categoryAxis;
echartOption.yAxis = chartConfig.valueAxis == 'horizontal' ? categoryAxis : valueAxis;
}
if (chartConfig.valueAxis === 'horizontal') {
echartOption.grid.left = 'left';
echartOption.grid.containLabel = true;
echartOption.grid.bottom = '5%';
}
if (chartConfig.valueAxis === 'vertical' && chartConfig.values.length > 1) {
echartOption.grid.right = 40;
}
// Apply tunning options
updateEchartOptions(tunningOpt, echartOption);
return echartOption;
};
});
