/** * 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', 'collection/VProfileList', 'utils/Utils', 'utils/Messages', 'utils/Globals', 'moment', 'models/VEntity', 'nvd3' ], function(require, Backbone, ProfileColumnLayoutViewTmpl, VProfileList, Utils, Messages, Globals, moment, VEntity) { '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("2s") }, fetchEntity: function(argument) { var that = this; this.entityModel.getEntity(this.entityDetail.table.guid, { skipDefaultError: true, 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.renderGraph(); this.fetchEntity(); if (this.typeObject && this.typeObject.type === "date") { this.$('svg').addClass('dateType'); } }, renderGraph: function(argument) { if (!this.typeObject) { return; } var that = this, profileData = this.profileData.attributes; this.data = [{ key: this.typeObject.label, values: this.typeObject.actualObj || [] }]; nv.addGraph(function() { that.chart = nv.models.multiBarChart() .x(function(d) { return d.value || d.year }) //Specify the data accessors. .y(function(d) { return d.count }) .height(220) .stacked(false) .showControls(false) .reduceXTicks(false) .staggerLabels(true) .duration(1000) .groupSpacing(0.6) .wrapLabels(true) .showLegend(false); if (that.typeObject.type !== "date") { that.chart.rotateLabels(-45); } that.chart.color(["#38BB9B"]); that.chart.yAxis.tickFormat(function(d) { return that.formatValue(d).replace('G', 'B'); }); that.chart.xAxis .axisLabel(that.typeObject.xAxisLabel) .axisLabelDistance(-185); that.chart.yAxis .axisLabel(that.typeObject.yAxisLabel) .axisLabelDistance(-5); that.chart.margin({ right: 30, left: 80, top: 20, bottom: 60 }); if (that.typeObject.type === "date") { that.chart.multibar.dispatch.elementClick = function(e) { if (!that.monthsData) { that.createMonthData(e.data.monthlyCounts) } } } that.svg = d3.select(that.$('svg')[0]).datum(that.data) that.svg.transition().duration(0).call(that.chart); nv.utils.windowResize(that.chart.update); return that.chart; }); }, 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[0].values.push({ value: monthsKey[i], count: data[i] || 0 }); i++; } this.ui.backToYear.show(); this.$('.profileGraphDetail').hide(); this.updateGraph(this.monthsData); }, updateGraph: function(data) { this.svg.datum(data).transition().duration(0).call(this.chart); }, }); return ProfileColumnLayoutView; });