@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
74 lines • 3.62 kB
JavaScript
"use strict";
var core_1 = require('/core');
var d3_1 = require('../d3');
var color_utils_1 = require('../utils/color-utils');
var TreeMapCellComponent = (function () {
function TreeMapCellComponent(element) {
this.select = new core_1.EventEmitter();
this.initialized = false;
this.element = element.nativeElement;
}
TreeMapCellComponent.prototype.ngOnChanges = function (changes) {
this.update();
};
TreeMapCellComponent.prototype.update = function () {
if (this.initialized) {
this.animateToCurrentForm();
}
else {
this.loadAnimation();
this.initialized = true;
}
};
TreeMapCellComponent.prototype.loadAnimation = function () {
var node = d3_1.default.select(this.element).select('.cell');
node
.attr('opacity', 0)
.attr('x', this.x)
.attr('y', this.y);
this.animateToCurrentForm();
};
TreeMapCellComponent.prototype.getTextColor = function () {
return color_utils_1.invertColor(this.fill);
};
TreeMapCellComponent.prototype.animateToCurrentForm = function () {
var node = d3_1.default.select(this.element).select('.cell');
node.transition().duration(750)
.attr('opacity', 1)
.attr('x', this.x)
.attr('y', this.y)
.attr('width', this.width)
.attr('height', this.height);
};
TreeMapCellComponent.prototype.onClick = function () {
this.select.emit({
name: this.label,
value: this.value
});
};
TreeMapCellComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'g[ngx-charts-tree-map-cell]',
template: "\n <svg:g>\n <svg:rect\n [attr.fill]=\"fill\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\n [style.cursor]=\"'pointer'\"\n class=\"cell\"\n (click)=\"onClick()\"\n />\n <svg:foreignObject\n *ngIf=\"width >= 70 && height >= 35\"\n [attr.x]=\"x\"\n [attr.y]=\"y\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\n class=\"label\"\n [style.pointer-events]=\"'none'\">\n <xhtml:p\n [style.color]=\"getTextColor()\"\n [style.height]=\"height + 'px'\"\n [style.width]=\"width + 'px'\">\n <xhtml:span class=\"treemap-label\">\n {{label}}\n </xhtml:span>\n <xhtml:br />\n <xhtml:span \n class=\"treemap-val\" \n ngx-charts-count-up \n [countTo]=\"value\">\n </xhtml:span>\n </xhtml:p>\n </svg:foreignObject>\n </svg:g>\n ",
changeDetection: core_1.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
TreeMapCellComponent.ctorParameters = function () { return [
{ type: core_1.ElementRef, },
]; };
TreeMapCellComponent.propDecorators = {
'fill': [{ type: core_1.Input },],
'x': [{ type: core_1.Input },],
'y': [{ type: core_1.Input },],
'width': [{ type: core_1.Input },],
'height': [{ type: core_1.Input },],
'label': [{ type: core_1.Input },],
'value': [{ type: core_1.Input },],
'valueType': [{ type: core_1.Input },],
'select': [{ type: core_1.Output },],
};
return TreeMapCellComponent;
}());
exports.TreeMapCellComponent = TreeMapCellComponent;
//# sourceMappingURL=tree-map-cell.component.js.map