in lib/@uncharted.software/stories-facets/src/components/facet/facetVertical.js [464:534]
FacetVertical.prototype._update = function() {
var spec = this._spec;
var selectedCount = spec.selected && spec.selected.count;
var selectionSegments = spec.selected && spec.selected.segments || [];
var isSelectionWithNoSegments = selectedCount >= 0 && selectionSegments.length === 0;
var facetCount = isSelectionWithNoSegments ? selectedCount : spec.count;
var barForegroundWidth = ((facetCount / spec.total) * 100) + '%';
var newLabelHTML = spec.displayValue || spec.label || spec.value;
var countLabel = (spec.selected && spec.selected.countLabel) || spec.countLabel || spec.count.toString();
/* icon */ // TODO: Only update if the current icon is not the same as the icon in the spec.
this._iconContainer.empty();
this._iconContainer.append($(facetVertical_icon(this._spec)));
this._icon = this._iconContainer.children('i');
this._iconColor = this._spec.icon && this._spec.icon.color ? this._spec.icon.color : null;
/* bar background */
this._barBackground.css('width', ((spec.count / spec.total) * 100) + '%');
/* bar foreground */
if (selectedCount >= 0) {
if (!this._barForeground.hasClass(SELECTED_CLASS)) {
this._barForeground.removeAttr('style');
if (selectionSegments.length === 0 && selectedCount > 0) {
this._barForeground.addClass(SELECTED_CLASS);
}
}
this._barForeground.css('width', barForegroundWidth);
} else {
if (this._iconColor && !spec.segments) {
this._barForeground.css('box-shadow', 'inset 0 0 0 1000px ' + this._iconColor);
}
this._barForeground.removeClass(SELECTED_CLASS);
this._barForeground.css('width', barForegroundWidth);
}
/* bar segments */
this._barForeground.children().each(function (index, child) {
var segment = selectionSegments[index] || spec.segments[index];
var segmentCount = isSelectionWithNoSegments ? 0 : segment.count;
$(child).toggleClass('zero-width', segmentCount === 0);
$(child).css({
'width': ((segmentCount / spec.count) * 100) + '%',
'box-shadow': 'inset 0 0 0 1000px ' + segment.color
});
});
/* label */
if (this._label.html() !== newLabelHTML) {
this._label.html(newLabelHTML);
}
/* count label */
if (this._labelCount.html() !== countLabel) {
this._labelCount.html(countLabel);
}
/* links */ // TODO: Only update if the current icon is not the same as the icon in the spec.
this._linksContainer.empty();
this._linksContainer.append(facetVertical_links(this._spec));
/* search */ // TODO: Only update if the current icon is not the same as the icon in the spec.
this._searchContainer.empty();
this._searchContainer.append(facetVertical_search(this._spec));
if (!this._searchContainer.children().length) {
this._searchContainer.empty();
}
/* sparkline */
this._updateSparkline();
};