@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular
197 lines • 7.78 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Component, Input, Output, EventEmitter, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
import { brushX } from 'd3-brush';
import { scaleLinear, scaleTime, scalePoint } from 'd3-scale';
import { select, event as d3event } from 'd3-selection';
import { id } from '../../utils';
var Timeline = /** @class */ (function () {
function Timeline(element, cd) {
this.cd = cd;
this.height = 50;
this.select = new EventEmitter();
this.onDomainChange = new EventEmitter();
this.initialized = false;
this.element = element.nativeElement;
}
Timeline.prototype.ngOnChanges = function (changes) {
this.update();
if (!this.initialized) {
this.addBrush();
this.initialized = true;
}
};
Timeline.prototype.update = function () {
this.dims = this.getDims();
this.height = this.dims.height;
var offsetY = this.view[1] - this.height;
this.xDomain = this.getXDomain();
this.xScale = this.getXScale();
if (this.brush) {
this.updateBrush();
}
this.transform = "translate(0 , " + offsetY + ")";
this.filterId = 'filter' + id().toString();
this.filter = "url(#" + this.filterId + ")";
this.cd.markForCheck();
};
Timeline.prototype.getXDomain = function () {
var values = [];
for (var _i = 0, _a = this.results; _i < _a.length; _i++) {
var results = _a[_i];
for (var _b = 0, _c = results.series; _b < _c.length; _b++) {
var d = _c[_b];
if (!values.includes(d.name)) {
values.push(d.name);
}
}
}
var domain = [];
if (this.scaleType === 'time') {
var min = Math.min.apply(Math, values);
var max = Math.max.apply(Math, values);
domain = [min, max];
}
else if (this.scaleType === 'linear') {
values = values.map(function (v) { return Number(v); });
var min = Math.min.apply(Math, values);
var max = Math.max.apply(Math, values);
domain = [min, max];
}
else {
domain = values;
}
return domain;
};
Timeline.prototype.getXScale = function () {
var scale;
if (this.scaleType === 'time') {
scale = scaleTime()
.range([0, this.dims.width])
.domain(this.xDomain);
}
else if (this.scaleType === 'linear') {
scale = scaleLinear()
.range([0, this.dims.width])
.domain(this.xDomain);
}
else if (this.scaleType === 'ordinal') {
scale = scalePoint()
.range([0, this.dims.width])
.padding(0.1)
.domain(this.xDomain);
}
return scale;
};
Timeline.prototype.addBrush = function () {
var _this = this;
if (this.brush)
return;
var height = this.height;
var width = this.view[0];
this.brush = brushX()
.extent([[0, 0], [width, height]])
.on('brush end', function () {
var selection = d3event.selection || _this.xScale.range();
var newDomain = selection.map(_this.xScale.invert);
_this.onDomainChange.emit(newDomain);
_this.cd.markForCheck();
});
select(this.element)
.select('.brush')
.call(this.brush);
};
Timeline.prototype.updateBrush = function () {
if (!this.brush)
return;
var height = this.height;
var width = this.view[0];
this.brush.extent([[0, 0], [width, height]]);
select(this.element)
.select('.brush')
.call(this.brush);
// clear hardcoded properties so they can be defined by CSS
select(this.element).select('.selection')
.attr('fill', undefined)
.attr('stroke', undefined)
.attr('fill-opacity', undefined);
this.cd.markForCheck();
};
Timeline.prototype.getDims = function () {
var width = this.view[0];
var dims = {
width: width,
height: this.height
};
return dims;
};
__decorate([
Input(),
__metadata("design:type", Object)
], Timeline.prototype, "view", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], Timeline.prototype, "state", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], Timeline.prototype, "results", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], Timeline.prototype, "scheme", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], Timeline.prototype, "customColors", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], Timeline.prototype, "legend", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], Timeline.prototype, "miniChart", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], Timeline.prototype, "autoScale", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], Timeline.prototype, "scaleType", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], Timeline.prototype, "height", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], Timeline.prototype, "select", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], Timeline.prototype, "onDomainChange", void 0);
Timeline = __decorate([
Component({
selector: 'g[ngx-charts-timeline]',
template: "\n <svg:g\n class=\"timeline\"\n [attr.transform]=\"transform\">\n <svg:filter [attr.id]=\"filterId\">\n <svg:feColorMatrix in=\"SourceGraphic\"\n type=\"matrix\"\n values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\" />\n </svg:filter>\n <svg:g class=\"embedded-chart\">\n <ng-content></ng-content>\n </svg:g>\n <svg:rect x=\"0\"\n [attr.width]=\"view[0]\"\n y=\"0\"\n [attr.height]=\"height\"\n class=\"brush-background\"\n />\n <svg:g class=\"brush\"></svg:g>\n </svg:g>\n ",
styleUrls: ['./timeline.component.css'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
}),
__metadata("design:paramtypes", [ElementRef,
ChangeDetectorRef])
], Timeline);
return Timeline;
}());
export { Timeline };
//# sourceMappingURL=timeline.component.js.map