dashboardv3/public/js/views/profile/ProfileColumnLayoutView.js

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

define([
    "require",
    "backbone",
    "hbs!tmpl/profile/ProfileColumnLayoutView_tmpl",
    "views/graph/ProfileBarChart",
    "collection/VProfileList",
    "utils/Utils",
    "utils/Messages",
    "utils/Globals",
    "moment",
    "models/VEntity",
    "d3"
], function(require, Backbone, ProfileColumnLayoutViewTmpl, ProfileBarChart, VProfileList, Utils, Messages, Globals, moment, VEntity, d3) {
    "use strict";

    var ProfileColumnLayoutView = Backbone.Marionette.LayoutView.extend(
        /** @lends ProfileColumnLayoutView */
        {
            _viewName: "ProfileColumnLayoutView",

            template: ProfileColumnLayoutViewTmpl,

            /** Layout sub regions */
            regions: {},
            templateHelpers: function() {
                return {
                    profileData: this.profileData.attributes ? this.profileData.attributes : this.profileData,
                    entityDetail: this.entityDetail,
                    typeObject: this.typeObject
                };
            },
            /** ui selector cache */
            ui: {
                backToYear: '[data-id="backToYear"]'
            },
            /** ui events hash */
            events: function() {
                var events = {};
                events["click " + this.ui.backToYear] = "backToYear";
                return events;
            },
            /**
             * intialize a new ProfileColumnLayoutView Layout
             * @constructs
             */
            initialize: function(options) {
                _.extend(this, _.pick(options, "profileData", "guid", "entityDetail"));
                this.typeObject = Utils.getProfileTabType(this.profileData.attributes);
                this.entityModel = new VEntity();
                this.formatValue = d3.format(".0s");
            },
            fetchEntity: function(argument) {
                var that = this;
                this.entityModel.getEntity(this.entityDetail.table.guid, {
                    success: function(data) {
                        var entity = data.entity,
                            profileData =
                            entity && entity.attributes && entity.attributes.profileData ? entity.attributes.profileData.attributes : null;
                        if (profileData && profileData.rowCount) {
                            that.$(".rowValue").show();
                            that.$(".rowValue .graphval").html("<b>" + that.formatValue(profileData.rowCount).replace("G", "B") + "</b>");
                        }
                        if (entity.attributes) {
                            if (entity.guid) {
                                that.$(".table_name .graphval").html(
                                    '<b><a href="#!/detailPage/' + entity.guid + "?profile=true" + '">' + Utils.getName(entity) + "</a></b>"
                                );
                            }
                            that.$(".table_created .graphval").html("<b>" + moment(entity.attributes.createTime).format("LL") + "</b>");
                        }
                    }
                });
            },
            bindEvents: function() {},
            onRender: function() {
                this.fetchEntity();
                if (this.typeObject && this.typeObject.type === "date") {
                    this.$("svg").addClass("dateType");
                }
            },
            onShow: function() {
                this.renderGraph();
            },
            renderGraph: function(argument) {
                if (!this.typeObject) {
                    return;
                }
                var that = this,
                    profileData = this.profileData.attributes;
                this.data = {
                    key: this.typeObject.label,
                    values: this.typeObject.actualObj || []
                };
                this.updateGraph(this.data);
            },
            backToYear: function() {
                this.ui.backToYear.hide();
                this.$(".profileGraphDetail").show();
                this.monthsData = null;
                this.updateGraph(this.data);
            },
            createMonthData: function(data) {
                var monthsKey = {
                        1: "Jan",
                        2: "Feb",
                        3: "Mar",
                        4: "Apr",
                        5: "May",
                        6: "Jun",
                        7: "Jul",
                        8: "Aug",
                        9: "Sep",
                        10: "Oct",
                        11: "Nov",
                        12: "Dec"
                    },
                    i = 1;

                this.monthsData = {
                    key: this.typeObject.label,
                    values: []
                };

                while (i <= 12) {
                    this.monthsData.values.push({
                        value: monthsKey[i],
                        count: data[i] || 0
                    });
                    i++;
                }
                this.ui.backToYear.show();
                this.$(".profileGraphDetail").hide();
                this.updateGraph(this.monthsData);
            },
            updateGraph: function(data) {
                var that = this;
                this.$("svg").empty();
                ProfileBarChart.render({
                    el: this.$("svg")[0],
                    data: data,
                    xAxisLabel: this.typeObject.xAxisLabel,
                    yAxisLabel: this.typeObject.yAxisLabel,
                    formatValue: this.formatValue,
                    rotateXticks: this.typeObject.type !== "date",
                    onBarClick: function(e) {
                        if (that.typeObject.type === "date") {
                            if (!that.monthsData) {
                                that.createMonthData(e.monthlyCounts);
                            }
                        }
                    }
                });
            }
        }
    );
    return ProfileColumnLayoutView;
});