controlled-rising-skyline
Version:
This library provides a rising skyline chart with an horizontal control panel control. This widget is linked to a dynamic history of buildings. An animation displays the rising of the skyline.
358 lines (346 loc) • 20.1 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rising-skyline'), require('rxjs'), require('@angular/common'), require('@angular/material/slider')) :
typeof define === 'function' && define.amd ? define('controlled-rising-skyline', ['exports', '@angular/core', 'rising-skyline', 'rxjs', '@angular/common', '@angular/material/slider'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["controlled-rising-skyline"] = {}, global.ng.core, global["rising-skyline"], global.rxjs, global.ng.common, global.ng.material.slider));
})(this, (function (exports, i0, i1, rxjs, common, slider) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var ControlledRisingSkylineService = /** @class */ (function () {
function ControlledRisingSkylineService(skylineService) {
this.skylineService = skylineService;
}
/**
* Generate a random Skyline history with 100 buildings for testing purpose.
* @param skyline$ the observable whch will emit the array of buildings
*/
ControlledRisingSkylineService.prototype.randomSkylineHistory = function (skyline$) {
var upperYear = 2020;
var upperWeek = 45;
function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function addDays(theDate, days) {
return new Date(theDate.getTime() + days * 24 * 60 * 60 * 1000);
}
var buildings = [];
for (var id = 0; id < 100; id++) {
// The building starts to rise on this date
var startDate = new Date(randomInteger(2017, 2018), randomInteger(1, 12), randomInteger(1, 27));
// The building ends its rising on this date
var endDate = new Date(randomInteger(2019, 2020), randomInteger(1, 12), randomInteger(1, 27));
for (var d = startDate.clone(), stepHeight = 1; d <= endDate; d.addDays(7), stepHeight++) {
buildings.push(new i1.Building(id, this.skylineService.toYearWeek(d).year, this.skylineService.toYearWeek(d).week, 40, stepHeight * 2, randomInteger(0, 100), 'Building ' + id));
}
}
skyline$.next(buildings);
};
return ControlledRisingSkylineService;
}());
ControlledRisingSkylineService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ControlledRisingSkylineService_Factory() { return new ControlledRisingSkylineService(i0__namespace.ɵɵinject(i1__namespace.RisingSkylineService)); }, token: ControlledRisingSkylineService, providedIn: "root" });
ControlledRisingSkylineService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
ControlledRisingSkylineService.ctorParameters = function () { return [
{ type: i1.RisingSkylineService }
]; };
var ControlledRisingSkylineComponent = /** @class */ (function () {
function ControlledRisingSkylineComponent(skylineService) {
this.skylineService = skylineService;
/**
* The width of the container, with its units of mesure (px, %, em...).
* Defaut value is __'600px'__;
*/
this.width = '600px';
/**
* The height of the container, with its units of mesure (px, %, em...).
* Defaut value is _'400px'_;
*/
this.height = '400px';
/**
* The margin around the container.
* Defaut value is _'10px'_;
*/
this.margin = '10px';
/**
/**
* The width of each building on the skyline without the unit of measure.
* Defaut value is __40__;
*/
this.buildingWidth = 40;
/**
* This behaviorSubject emits the complete story of the rising skyline.
*
* This reveived array will be passed to the __SkylineService__.
*/
this.risingSkylineHistory$ = new rxjs.BehaviorSubject([]);
/**
* Starting speed of the animation in ms.
* Default value is _30_
*/
this.speed = 30;
/**
* __Starting__ color of the color gradation.
* Default value is _ping_
*/
this.startingColor = 'red';
/**
* __Ending__ color of the color gradation.
* Default value is _blue_
*/
this.endingColor = 'green';
/**
* Always display the vertical title on top of each building.
*
* Default value is **false**.
*/
this.displayVerticalTitle = false;
/**
* Display the vertical title when the building height reaches this value.
*
* Default value is **10**.
*/
this.buildingMinimumHeightVerticalTitle = 10;
/**
* Color of the skyline container
*/
this.skylineBackgroundColor = 'transparent';
/**
* Color of the skyline control panel
*/
this.controlBackgroundColor = 'lightGrey';
/**
* __Slider__ color.
* Default value is _violet_
*/
this.sliderColor = 'violet';
/**
* (_Internal_) debug mode.
* Default value is **false**
*/
this.debug = false;
/**
* This messenger wil inform the parent container that the user has clicked a building.
*/
this.onClickBuilding = new i0.EventEmitter();
/**
* This messenger will inform the parent container that the user is entering on a building.
*/
this.onEnterBuilding = new i0.EventEmitter();
/**
* This messenger wil inform the parent container that the user is entering on a building.
*/
this.onLeaveBuilding = new i0.EventEmitter();
/**
* The current position of floor _(or episode)_ being drawn.
*/
this.positionOfFloor = 0;
}
ControlledRisingSkylineComponent.prototype.ngOnInit = function () {
var _this = this;
if (this.debug) {
console.log('Skyline w ' + this.width + ', h ' + this.height);
}
this.subscriptionSkyline = this.skylineService.episode$
.subscribe({
next: function (floors) { return _this.positionOfFloor++; }
});
};
/**
* After view initialization : Here, we set the width of the container.
*/
ControlledRisingSkylineComponent.prototype.ngAfterViewInit = function () {
var mainDiv = document.getElementById('mainDiv');
if (mainDiv) {
mainDiv.setAttribute('style', 'width:' + this.width + 'px;height:' + this.height + 'px');
if (this.debug) {
console.log(mainDiv.getAttribute('style'));
}
}
else {
console.error('INTERNAL ERROR : Did not retrieve the main div');
}
};
/**
* Mouse is entering the building.
*/
ControlledRisingSkylineComponent.prototype.mouseEnterBuilding = function ($event) {
this.onEnterBuilding.emit($event);
};
/**
* Mouse is leaving the building.
*/
ControlledRisingSkylineComponent.prototype.mouseLeaveBuilding = function ($event) {
this.onLeaveBuilding.emit($event);
};
/**
* Mouse is clicking the building.
*/
ControlledRisingSkylineComponent.prototype.mouseClickBuilding = function ($event) {
this.onClickBuilding.emit($event);
};
ControlledRisingSkylineComponent.prototype.ngOnDestroy = function () {
this.subscriptionSkyline.unsubscribe();
};
return ControlledRisingSkylineComponent;
}());
ControlledRisingSkylineComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'controlled-rising-skyline',
template: "<div id=\"mainDiv\" >\n\n\t<rising-skyline\n\t\t[width] = width\n\t\t[height] = height\n\t\t[margin] = margin\n\t\t[risingSkylineHistory$] = risingSkylineHistory$\n\t\t[speed] = speed\n\t\t[displayVerticalTitle] = displayVerticalTitle\n\t\t[buildingMinimumHeightVerticalTitle]=buildingMinimumHeightVerticalTitle\n\t\t[startingColor] = startingColor\n\t\t[endingColor] = endingColor\n\t\t[font] = font\n\t\t(onClickBuilding)=\"mouseClickBuilding($event)\"\n\t\t(onEnterBuilding)=\"mouseEnterBuilding($event)\"\n\t\t(onLeaveBuilding)=\"mouseLeaveBuilding($event)\">\t\t\n\t</rising-skyline>\n\n\t<app-panel-control \n\t\t[backgroundColor] = controlBackgroundColor\n\t\t[sliderColor] = sliderColor\n\t\t[debug] = debug>\n\t</app-panel-control>\n</div>",
styles: ["#mainDiv{background-color:var(--skyline-background-color);width:var(--mainDiv-width);height:var(--mainDiv-height)}\n"]
},] }
];
ControlledRisingSkylineComponent.ctorParameters = function () { return [
{ type: i1.RisingSkylineService }
]; };
ControlledRisingSkylineComponent.propDecorators = {
width: [{ type: i0.Input }, { type: i0.HostBinding, args: ['style.--mainDiv-width',] }],
height: [{ type: i0.Input }, { type: i0.HostBinding, args: ['style.--mainDiv-height',] }],
margin: [{ type: i0.Input }],
buildingWidth: [{ type: i0.Input }],
risingSkylineHistory$: [{ type: i0.Input }],
speed: [{ type: i0.Input }],
startingColor: [{ type: i0.Input }],
endingColor: [{ type: i0.Input }],
displayVerticalTitle: [{ type: i0.Input }],
buildingMinimumHeightVerticalTitle: [{ type: i0.Input }],
font: [{ type: i0.Input }],
skylineBackgroundColor: [{ type: i0.HostBinding, args: ['style.--skyline-background-color',] }, { type: i0.Input }],
controlBackgroundColor: [{ type: i0.Input }],
sliderColor: [{ type: i0.Input }],
debug: [{ type: i0.Input }],
onClickBuilding: [{ type: i0.Output }],
onEnterBuilding: [{ type: i0.Output }],
onLeaveBuilding: [{ type: i0.Output }]
};
var PanelControlComponent = /** @class */ (function () {
function PanelControlComponent(skylineService, colorService) {
var _this = this;
this.skylineService = skylineService;
this.colorService = colorService;
/**
* Slider color of the panel control
*/
this.sliderColor = 'violet';
/**
* __Debug__ mode default value is **False**.
*/
this.debug = false;
/**
* The Skyline subscription.
*/
this.skylineSubscription = null;
this.formatYearWeek = function (value) {
return _this.skylineService.currentYear + '/'
+ ((_this.skylineService.currentWeek < 10) ? '0' + _this.skylineService.currentWeek : _this.skylineService.currentWeek);
};
}
PanelControlComponent.prototype.ngOnInit = function () {
};
PanelControlComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.skylineService.episode$
.subscribe(function (floors) {
if (floors.length > 0) {
var allIndex = floors
.filter(function (floor) { return floor.height > 0; })
.map(function (floor) { return floor.index; })
.reduce(function (theSum, index) { return theSum + index; }, 0);
var meanIndex = Math.floor(allIndex / floors.filter(function (floor) { return floor.height > 0; }).length);
if (_this.debug) {
console.log('Index of color used for the thumb coin', meanIndex);
}
var htmlThumbLabelCoin = document.getElementsByClassName('mat-slider-thumb-label').item(0);
if (htmlThumbLabelCoin) {
var color = _this.colorService.color(meanIndex);
if (_this.debug) {
console.log('Index of color used for the thumb coin %d is processing the color %s', meanIndex, color);
}
htmlThumbLabelCoin.setAttribute('style', 'background-color:' + color);
}
}
});
};
PanelControlComponent.prototype.ngOnDestroy = function () {
if (this.skylineSubscription) {
this.skylineSubscription.unsubscribe();
}
};
PanelControlComponent.prototype.onSliderChange = function ($event) {
var yw = this.skylineService.yearWeeks[Math.max(0, $event.value - 2)];
this.skylineService.currentYear = yw.year;
this.skylineService.currentWeek = yw.week;
this.skylineService.currentEpisode = $event.value - 2;
if (this.debug) {
console.log('Position %d points to (%d; %d)', $event.value, yw.year, yw.week);
}
var episode = this.skylineService.extractSkylineEpisode(yw.year, yw.week);
this.skylineService.drawEpisode(episode);
};
return PanelControlComponent;
}());
PanelControlComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'app-panel-control',
template: "<div id=\"controlPanel\" class=\"container-fluid\" *ngIf=\"(skylineService.episode$|async).length > 0\">\n\n <div class=\"row\">\n\n <div class=\"col-1\"></div>\n\n <div id=\"firstDate\" class=\"col-1 my-auto\">\n {{skylineService.toYearWeek(skylineService.firstDate).year}}/{{skylineService.toYearWeek(skylineService.firstDate).week | number : '2.0-0'}}\n </div>\n\n <div id=\"slider\" class=\"col-6 my-auto\">\n <mat-slider class=\"cdk-focused\" \n aria-label=\"Episodes timeline\" role=\"slider\"\n min=\"1\" max=\"{{this.skylineService.countEpisodes}}\" [value]=\"this.skylineService.currentEpisode\"\n thumbLabel [displayWith]=\"formatYearWeek\"\n (change)=\"onSliderChange($event)\" >\n </mat-slider>\n </div>\n\n <div id=\"lastDate\" class=\"col-4 my-auto\">\n <span>\n {{skylineService.toYearWeek(skylineService.lastDate).year}}/{{skylineService.toYearWeek(skylineService.lastDate).week | number : '2.0-0'}}\n </span>\n <button *ngIf=\"!skylineService.pause\" \n class=\"btn btn-outline-primary btn-circle control-button\" \n (click)=\"skylineService.pauseRising()\"\n aria-label=\"Pause the animation\">\n <em class=\"fas fa-pause\"></em>\n </button>\n \n <button \n *ngIf=\"skylineService.pause\" \n class=\"btn btn-outline-primary btn-circle control-button\" \n (click)=\"skylineService.playRising()\"\n aria-label=\"Start or restart the animation\">\n <i class=\"fas fa-play\"></i>\n </button>\n\n <button \n class=\"btn btn-outline-primary btn-circle control-button\" \n (click)=\"skylineService.rotateVariation()\"\n aria-label=\"Increase or decrease the speed of the animation\">\n <span class=\"speed number\" innerHTML = \"{{skylineService.variation.title}}\"></span><span class=\"speed x\">x</span>\n </button>\n </div>\n\n </div>\n\n</div>",
styles: ["#controlPanel{height:60px;width:100%;display:block;background-color:var(--control-background-color);padding-top:5px}.mat-slider{width:100%;padding-right:0;padding-left:0}:host ::ng-deep .mat-slider-horizontal .mat-slider-thumb-label{width:42px;height:42px;transform:translateY(20px) scale(1) rotate(45deg);color:#fff}:host ::ng-deep .mat-slider-thumb-label-text{opacity:1;font-size:10px;color:#fff}:host ::ng-deep .mat-slider:not(.mat-slider-disabled).cdk-focused .mat-slider-thumb-label{width:42px;height:42px;margin-top:20px;right:-20px;background-color:#006400;color:#fff}:host ::ng-deep .mat-slider.mat-slider-horizontal .mat-slider-track-background,.mat-slider.mat-slider-horizontal .mat-slider-track-fill{height:100%}:host ::ng-deep .mat-slider:not(.mat-slider-disabled).cdk-focused .mat-slider-thumb-label-text{opacity:1;font-size:10px}:host ::ng-deep .mat-slider:not(.mat-slider-disabled).cdk-focused .mat-slider-thumb-label{border-radius:50%;color:#fff}:host ::ng-deep .mat-slider.mat-slider-horizontal .mat-slider-track-fill{background-color:var(--slider-color)}button.pause{height:30px;width:30px}#slider{padding-left:15px;padding-right:13px}#firstDate{padding-right:0;text-align:right;height:100%}#lastDate{padding-left:0;padding-right:0;text-align:left}button.control-button{color:var(--slider-color);border-color:gray;border-radius:50%;margin-left:4px;padding-bottom:7px;padding-left:12px}button.control-button:hover{color:#fff;background-color:var(--slider-color)}span.speed{font-size:13px}span.x{position:relative;bottom:1px}\n"]
},] }
];
PanelControlComponent.ctorParameters = function () { return [
{ type: i1.RisingSkylineService },
{ type: i1.ColorService }
]; };
PanelControlComponent.propDecorators = {
backgroundColor: [{ type: i0.HostBinding, args: ['style.--control-background-color',] }, { type: i0.Input }],
sliderColor: [{ type: i0.HostBinding, args: ['style.--slider-color',] }, { type: i0.Input }],
debug: [{ type: i0.Input }]
};
var ControlledRisingSkylineModule = /** @class */ (function () {
function ControlledRisingSkylineModule() {
}
return ControlledRisingSkylineModule;
}());
ControlledRisingSkylineModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [ControlledRisingSkylineComponent, PanelControlComponent],
imports: [
common.CommonModule,
i1.RisingSkylineModule,
slider.MatSliderModule
],
providers: [common.DatePipe],
exports: [ControlledRisingSkylineComponent]
},] }
];
/*
* Public API Surface of controlled-rising-skyline
*/
/**
* Generated bundle index. Do not edit.
*/
exports.ControlledRisingSkylineComponent = ControlledRisingSkylineComponent;
exports.ControlledRisingSkylineModule = ControlledRisingSkylineModule;
exports.ControlledRisingSkylineService = ControlledRisingSkylineService;
exports["ɵa"] = PanelControlComponent;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=controlled-rising-skyline.umd.js.map