Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1 @@
|
||||
<%= prefix %><%= value %><%= suffix %>
|
||||
@@ -0,0 +1,132 @@
|
||||
var _ = require('underscore');
|
||||
var d3 = require('d3');
|
||||
var CoreView = require('backbone/core-view');
|
||||
var formatter = require('../../formatter');
|
||||
var template = require('./template.tpl');
|
||||
var DropdownView = require('../dropdown/widget-dropdown-view');
|
||||
var animationTemplate = require('./animation-template.tpl');
|
||||
var AnimateValues = require('../animate-values.js');
|
||||
var layerColors = require('../../util/layer-colors');
|
||||
var Analyses = require('../../data/analyses');
|
||||
var escapeHTML = require('../../util/escape-html');
|
||||
var unescapeHTML = require('../../util/unescape-html');
|
||||
var TipsyTooltipView = require('../../../builder/components/tipsy-tooltip-view');
|
||||
|
||||
/**
|
||||
* Default widget content view:
|
||||
*/
|
||||
module.exports = CoreView.extend({
|
||||
className: 'CDB-Widget-body',
|
||||
|
||||
initialize: function () {
|
||||
this._dataviewModel = this.model.dataviewModel;
|
||||
this._layerModel = this.model.layerModel;
|
||||
|
||||
if (this.model.get('hasInitialState') === true) {
|
||||
this._initBinds();
|
||||
} else {
|
||||
this.listenToOnce(this.model, 'change:hasInitialState', this._onInitialState);
|
||||
}
|
||||
},
|
||||
|
||||
_onInitialState: function () {
|
||||
this._initBinds();
|
||||
this.render();
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.clearSubViews();
|
||||
var value = this._dataviewModel.get('data');
|
||||
|
||||
var format = function (value) {
|
||||
var formatter = d3.format('0,000');
|
||||
|
||||
if (_.isNumber(value)) {
|
||||
return formatter(value.toFixed(2));
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
var nulls = (!_.isUndefined(this._dataviewModel.get('nulls')) && formatter.formatNumber(this._dataviewModel.get('nulls'))) || '-';
|
||||
var isCollapsed = this.model.get('collapsed');
|
||||
|
||||
var prefix = this.model.get('prefix');
|
||||
var suffix = this.model.get('suffix');
|
||||
|
||||
var sourceId = this._dataviewModel.get('source').id;
|
||||
var letter = layerColors.letter(sourceId);
|
||||
var sourceColor = layerColors.getColorForLetter(letter);
|
||||
var sourceType = this._dataviewModel.getSourceType() || '';
|
||||
var isSourceType = this._dataviewModel.isSourceType();
|
||||
var layerName = isSourceType
|
||||
? this.model.get('table_name')
|
||||
: this._layerModel.get('layer_name');
|
||||
|
||||
this.$el.html(
|
||||
template({
|
||||
title: this.model.get('title'),
|
||||
sourceId: sourceId,
|
||||
sourceType: Analyses.title(sourceType),
|
||||
isSourceType: isSourceType,
|
||||
showStats: this.model.get('show_stats'),
|
||||
showSource: this.model.get('show_source') && letter !== '',
|
||||
operation: this._dataviewModel.get('operation'),
|
||||
value: value,
|
||||
formatedValue: format(value),
|
||||
description: this.model.get('description'),
|
||||
nulls: nulls,
|
||||
prefix: unescapeHTML(prefix),
|
||||
suffix: unescapeHTML(suffix),
|
||||
isCollapsed: isCollapsed,
|
||||
sourceColor: sourceColor,
|
||||
layerName: escapeHTML(layerName)
|
||||
})
|
||||
);
|
||||
|
||||
var animator = new AnimateValues({
|
||||
el: this.$el
|
||||
});
|
||||
|
||||
animator.animateValue(
|
||||
this._dataviewModel,
|
||||
'data',
|
||||
'.js-value',
|
||||
animationTemplate,
|
||||
{
|
||||
animationSpeed: 700,
|
||||
formatter: format,
|
||||
templateData: {
|
||||
prefix: unescapeHTML(prefix),
|
||||
suffix: unescapeHTML(suffix)
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
this.$el.toggleClass('is-collapsed', !!isCollapsed);
|
||||
|
||||
this._initViews();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_initBinds: function () {
|
||||
this.listenTo(this.model, 'change:title change:description change:collapsed change:prefix change:suffix', this.render);
|
||||
this.listenTo(this._dataviewModel, 'change:data', this.render);
|
||||
this.listenTo(this._layerModel, 'change:layer_name', this.render);
|
||||
},
|
||||
|
||||
_initViews: function () {
|
||||
var dropdown = new DropdownView({
|
||||
model: this.model,
|
||||
target: '.js-actions',
|
||||
container: this.$('.js-header')
|
||||
});
|
||||
this.addView(dropdown);
|
||||
|
||||
var actionsTooltip = new TipsyTooltipView({
|
||||
el: this.$el.find('.js-actions'),
|
||||
gravity: 'auto'
|
||||
});
|
||||
this.addView(actionsTooltip);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
<div class="CDB-Widget-listItem--fake"></div>
|
||||
@@ -0,0 +1,54 @@
|
||||
<div class="CDB-Widget-header js-header">
|
||||
<div class="CDB-Widget-title CDB-Widget-contentSpaced">
|
||||
<h3 class="CDB-Text CDB-Size-large u-ellipsis js-title <%- isCollapsed ? 'is-collapsed' : '' %>"><%- title %></h3>
|
||||
<div class="CDB-Widget-options">
|
||||
<button class="CDB-Shape CDB-Widget-actions js-actions" data-tooltip="More options">
|
||||
<div class="CDB-Shape-threePoints is-blue is-small">
|
||||
<div class="CDB-Shape-threePointsItem"></div>
|
||||
<div class="CDB-Shape-threePointsItem"></div>
|
||||
<div class="CDB-Shape-threePointsItem"></div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<% if (showSource) { %>
|
||||
<dl class="CDB-Widget-info u-tSpace">
|
||||
<div class="u-flex u-alignCenter u-ellipsis">
|
||||
<span class="CDB-Text CDB-Size-small is-semibold u-upperCase" style="color: <%- sourceColor %>;">
|
||||
<%- sourceId %>
|
||||
</span>
|
||||
|
||||
<% if (!isSourceType) { %>
|
||||
<span class="CDB-Text CDB-Size-small u-lSpace--s u-flex" style="color: <%- sourceColor %>;">
|
||||
<i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
|
||||
</span>
|
||||
<% } %>
|
||||
|
||||
<span class="CDB-Text CDB-Size-small u-mainTextColor u-lSpace">
|
||||
<%= sourceType %>
|
||||
</span>
|
||||
|
||||
<span class="CDB-Text CDB-Size-small u-altTextColor u-ellipsis u-lSpace" title="<%= layerName %>">
|
||||
<%= layerName %>
|
||||
</span>
|
||||
</div>
|
||||
</dl>
|
||||
<% } %>
|
||||
<% if (showStats) { %>
|
||||
<dl class="CDB-Widget-info CDB-Text CDB-Size-small u-secondaryTextColor u-upperCase u-tSpace">
|
||||
<dt class="CDB-Widget-infoCount"><%- nulls %></dt><dd class="CDB-Widget-infoDescription">null rows</dd>
|
||||
</dl>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="CDB-Widget-content CDB-Widget-content--formula">
|
||||
<% if (_.isNumber(value)) { %>
|
||||
<h4 class="CDB-Text CDB-Size-huge <%- !isCollapsed ? 'js-value' : '' %>" title="<%- value %>">
|
||||
<%= prefix %><%- value %><%= suffix %>
|
||||
</h4>
|
||||
<% if (description) { %>
|
||||
<p class="CDB-Text CDB-Size-small u-tSpace js-description"><%- description %></p>
|
||||
<% } %>
|
||||
<% } else { %>
|
||||
<div class="CDB-Widget-listItem--fake"></div>
|
||||
<% } %>
|
||||
</div>
|
||||
Reference in New Issue
Block a user