현재 버전

javascript 자바스트립트

자바스크립트 문법 질문


안녕하세요, 초보개발자입니다.

자바스크립트 여쭤볼것이 있는데요,

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;
    };
});

수정 이력

2018-07-20 21:51:28 에 아래 제목에서 변경 됨 #2

자바스크립트 질문

2018-07-20 21:47:10 에 아래 내용에서 변경 됨 #1

안녕하세요, 초보개발자입니다.

자바스크립트 여쭤볼것이 있는데요,

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;
    };
});