angular-calendar-timeline
Version:
A timeline for angular that shows events on a timeline board in different modes: days, weeks, and months.
51 lines • 11.1 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TimelineScaleHeaderComponent {
constructor() {
this.groups = [];
}
get columns() {
return this.scale?.columns ?? [];
}
ngOnChanges(changes) {
this._generateGroups();
}
trackById(index, item) {
return item.id;
}
_groupColumnGroups() {
return this.scale.columns.reduce((groupsMap, column) => {
column.groups.forEach(group => {
groupsMap[group.id] = groupsMap[group.id] ?? [];
groupsMap[group.id].push(group);
});
return groupsMap;
}, {});
}
_generateGroups() {
const groupedGroups = this._groupColumnGroups();
this.groups = Object.keys(groupedGroups).map(groupId => ({
id: groupId,
name: this.formatter.formatGroup(groupedGroups[groupId][0], this.locale),
width: groupedGroups[groupId].reduce((acc, curr) => acc + this.zoom.columnWidth * curr.coverageInPercents / 100, 0)
}));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineScaleHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimelineScaleHeaderComponent, selector: "timeline-scale-header", inputs: { height: "height", scale: "scale", formatter: "formatter", locale: "locale", zoom: "zoom" }, usesOnChanges: true, ngImport: i0, template: "<div class='wrapper' [style.height.px]=\"height\">\r\n <div class='groups' *ngIf=\"groups.length\">\r\n <div *ngFor='let group of groups; trackBy: trackById; index as i'\r\n [style.width.px]='group.width' class='group'>\r\n <div>{{group.name}}</div>\r\n </div>\r\n </div>\r\n <div class='columns'>\r\n <div *ngFor='let column of columns; trackBy: trackById'>\r\n <div class='column' [style.width.px]='zoom.columnWidth'>\r\n {{formatter.formatColumn(column, zoom.columnWidth, locale)}}\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host{z-index:9;position:sticky;top:0;display:flex;flex-direction:row;background:#f8f8f8}.wrapper{display:flex;flex-direction:column}.groups{display:flex;flex-grow:3}.groups .group{height:100%;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #d0d0d0;position:relative;box-sizing:border-box;padding:0 4px}.groups .group:first-child:after{display:none}.groups .group:after{content:\"\";position:absolute;width:1px;height:100%;box-sizing:border-box;left:0;top:0;background:#d0d0d0}.columns{display:flex;flex-grow:2}.columns .column{height:100%;position:relative;display:flex;justify-content:center;align-items:center}.columns .column:after{content:\"\";width:1px;height:100%;left:100%;position:absolute;background:#d0d0d0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineScaleHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'timeline-scale-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class='wrapper' [style.height.px]=\"height\">\r\n <div class='groups' *ngIf=\"groups.length\">\r\n <div *ngFor='let group of groups; trackBy: trackById; index as i'\r\n [style.width.px]='group.width' class='group'>\r\n <div>{{group.name}}</div>\r\n </div>\r\n </div>\r\n <div class='columns'>\r\n <div *ngFor='let column of columns; trackBy: trackById'>\r\n <div class='column' [style.width.px]='zoom.columnWidth'>\r\n {{formatter.formatColumn(column, zoom.columnWidth, locale)}}\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host{z-index:9;position:sticky;top:0;display:flex;flex-direction:row;background:#f8f8f8}.wrapper{display:flex;flex-direction:column}.groups{display:flex;flex-grow:3}.groups .group{height:100%;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #d0d0d0;position:relative;box-sizing:border-box;padding:0 4px}.groups .group:first-child:after{display:none}.groups .group:after{content:\"\";position:absolute;width:1px;height:100%;box-sizing:border-box;left:0;top:0;background:#d0d0d0}.columns{display:flex;flex-grow:2}.columns .column{height:100%;position:relative;display:flex;justify-content:center;align-items:center}.columns .column:after{content:\"\";width:1px;height:100%;left:100%;position:absolute;background:#d0d0d0}\n"] }]
}], propDecorators: { height: [{
type: Input
}], scale: [{
type: Input
}], formatter: [{
type: Input
}], locale: [{
type: Input
}], zoom: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUtc2NhbGUtaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY2FsZW5kYXItdGltZWxpbmUvc3JjL2xpYi9jb21wb25lbnRzL3NjYWxlLWhlYWRlci90aW1lbGluZS1zY2FsZS1oZWFkZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1jYWxlbmRhci10aW1lbGluZS9zcmMvbGliL2NvbXBvbmVudHMvc2NhbGUtaGVhZGVyL3RpbWVsaW5lLXNjYWxlLWhlYWRlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBNEIsTUFBTSxlQUFlLENBQUM7OztBQWlCcEcsTUFBTSxPQUFPLDRCQUE0QjtJQU56QztRQWlCUyxXQUFNLEdBQXNCLEVBQUUsQ0FBQztLQWtDdkM7SUFoQ0MsSUFBSSxPQUFPO1FBQ1QsT0FBTyxJQUFJLENBQUMsS0FBSyxFQUFFLE9BQU8sSUFBSSxFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVELFNBQVMsQ0FBQyxLQUFhLEVBQUUsSUFBZTtRQUN0QyxPQUFPLElBQUksQ0FBQyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVPLGtCQUFrQjtRQUN4QixPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDLFNBQVMsRUFBRSxNQUFNLEVBQUUsRUFBRTtZQUNyRCxNQUFNLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRTtnQkFDNUIsU0FBUyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsR0FBRyxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztnQkFDaEQsU0FBUyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDbEMsQ0FBQyxDQUFDLENBQUM7WUFFSCxPQUFPLFNBQVMsQ0FBQztRQUNuQixDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUE7SUFDUixDQUFDO0lBRU8sZUFBZTtRQUNyQixNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztRQUVoRCxJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUN2RCxFQUFFLEVBQUUsT0FBTztZQUNYLElBQUksRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQztZQUN4RSxLQUFLLEVBQUUsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEdBQUcsRUFBRSxJQUFJLEVBQUUsRUFBRSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsa0JBQWtCLEdBQUcsR0FBRyxFQUFFLENBQUMsQ0FBQztTQUNwSCxDQUFDLENBQUMsQ0FBQztJQUNOLENBQUM7K0dBNUNVLDRCQUE0QjttR0FBNUIsNEJBQTRCLHdMQ2pCekMsdWtCQWdCQTs7NEZEQ2EsNEJBQTRCO2tCQU54QyxTQUFTOytCQUNFLHVCQUF1QixtQkFHaEIsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsTUFBTTtzQkFBZCxLQUFLO2dCQUVHLEtBQUs7c0JBQWIsS0FBSztnQkFFRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVHLE1BQU07c0JBQWQsS0FBSztnQkFFRyxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IElJZE9iamVjdCwgSVRpbWVsaW5lWm9vbSwgSVNjYWxlLCBJU2NhbGVDb2x1bW4sIElTY2FsZUZvcm1hdHRlciwgSVNjYWxlR3JvdXAgfSBmcm9tIFwiLi4vLi4vbW9kZWxzXCI7XHJcblxyXG5pbnRlcmZhY2UgSUdlbmVyYXRlZEdyb3VwIHtcclxuICBpZDogc3RyaW5nO1xyXG5cclxuICBuYW1lOiBzdHJpbmc7XHJcblxyXG4gIHdpZHRoOiBudW1iZXI7XHJcbn1cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAndGltZWxpbmUtc2NhbGUtaGVhZGVyJyxcclxuICB0ZW1wbGF0ZVVybDogJ3RpbWVsaW5lLXNjYWxlLWhlYWRlci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJ3RpbWVsaW5lLXNjYWxlLWhlYWRlci5jb21wb25lbnQuc2NzcyddLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgVGltZWxpbmVTY2FsZUhlYWRlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XHJcbiAgQElucHV0KCkgaGVpZ2h0OiBudW1iZXI7XHJcblxyXG4gIEBJbnB1dCgpIHNjYWxlOiBJU2NhbGU7XHJcblxyXG4gIEBJbnB1dCgpIGZvcm1hdHRlcjogSVNjYWxlRm9ybWF0dGVyO1xyXG5cclxuICBASW5wdXQoKSBsb2NhbGU6IHN0cmluZztcclxuXHJcbiAgQElucHV0KCkgem9vbTogSVRpbWVsaW5lWm9vbTxhbnk+O1xyXG5cclxuICBwdWJsaWMgZ3JvdXBzOiBJR2VuZXJhdGVkR3JvdXBbXSA9IFtdO1xyXG5cclxuICBnZXQgY29sdW1ucygpOiBJU2NhbGVDb2x1bW5bXSB7XHJcbiAgICByZXR1cm4gdGhpcy5zY2FsZT8uY29sdW1ucyA/PyBbXTtcclxuICB9XHJcblxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcclxuICAgIHRoaXMuX2dlbmVyYXRlR3JvdXBzKCk7XHJcbiAgfVxyXG5cclxuICB0cmFja0J5SWQoaW5kZXg6IG51bWJlciwgaXRlbTogSUlkT2JqZWN0KTogbnVtYmVyIHwgc3RyaW5nIHtcclxuICAgIHJldHVybiBpdGVtLmlkO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBfZ3JvdXBDb2x1bW5Hcm91cHMoKTogeyBbZ3JvdXBJZDogc3RyaW5nXTogSVNjYWxlR3JvdXBbXSB9IHtcclxuICAgIHJldHVybiB0aGlzLnNjYWxlLmNvbHVtbnMucmVkdWNlKChncm91cHNNYXAsIGNvbHVtbikgPT4ge1xyXG4gICAgICBjb2x1bW4uZ3JvdXBzLmZvckVhY2goZ3JvdXAgPT4ge1xyXG4gICAgICAgIGdyb3Vwc01hcFtncm91cC5pZF0gPSBncm91cHNNYXBbZ3JvdXAuaWRdID8/IFtdO1xyXG4gICAgICAgIGdyb3Vwc01hcFtncm91cC5pZF0ucHVzaChncm91cCk7XHJcbiAgICAgIH0pO1xyXG5cclxuICAgICAgcmV0dXJuIGdyb3Vwc01hcDtcclxuICAgIH0sIHt9KVxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBfZ2VuZXJhdGVHcm91cHMoKTogdm9pZCB7XHJcbiAgICBjb25zdCBncm91cGVkR3JvdXBzID0gdGhpcy5fZ3JvdXBDb2x1bW5Hcm91cHMoKTtcclxuXHJcbiAgICB0aGlzLmdyb3VwcyA9IE9iamVjdC5rZXlzKGdyb3VwZWRHcm91cHMpLm1hcChncm91cElkID0+ICh7XHJcbiAgICAgIGlkOiBncm91cElkLFxyXG4gICAgICBuYW1lOiB0aGlzLmZvcm1hdHRlci5mb3JtYXRHcm91cChncm91cGVkR3JvdXBzW2dyb3VwSWRdWzBdLCB0aGlzLmxvY2FsZSksXHJcbiAgICAgIHdpZHRoOiBncm91cGVkR3JvdXBzW2dyb3VwSWRdLnJlZHVjZSgoYWNjLCBjdXJyKSA9PiBhY2MgKyB0aGlzLnpvb20uY29sdW1uV2lkdGggKiBjdXJyLmNvdmVyYWdlSW5QZXJjZW50cyAvIDEwMCwgMClcclxuICAgIH0pKTtcclxuICB9XHJcbn1cclxuXHJcblxyXG4iLCI8ZGl2IGNsYXNzPSd3cmFwcGVyJyBbc3R5bGUuaGVpZ2h0LnB4XT1cImhlaWdodFwiPlxyXG4gIDxkaXYgY2xhc3M9J2dyb3VwcycgKm5nSWY9XCJncm91cHMubGVuZ3RoXCI+XHJcbiAgICA8ZGl2ICpuZ0Zvcj0nbGV0IGdyb3VwIG9mIGdyb3VwczsgdHJhY2tCeTogdHJhY2tCeUlkOyBpbmRleCBhcyBpJ1xyXG4gICAgICAgICBbc3R5bGUud2lkdGgucHhdPSdncm91cC53aWR0aCcgY2xhc3M9J2dyb3VwJz5cclxuICAgICAgPGRpdj57e2dyb3VwLm5hbWV9fTwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbiAgPGRpdiBjbGFzcz0nY29sdW1ucyc+XHJcbiAgICA8ZGl2ICpuZ0Zvcj0nbGV0IGNvbHVtbiBvZiBjb2x1bW5zOyB0cmFja0J5OiB0cmFja0J5SWQnPlxyXG4gICAgICA8ZGl2IGNsYXNzPSdjb2x1bW4nIFtzdHlsZS53aWR0aC5weF09J3pvb20uY29sdW1uV2lkdGgnPlxyXG4gICAgICAgIHt7Zm9ybWF0dGVyLmZvcm1hdENvbHVtbihjb2x1bW4sIHpvb20uY29sdW1uV2lkdGgsIGxvY2FsZSl9fVxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuXHJcbiJdfQ==