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.
1 lines • 12.3 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"ControlledRisingSkylineService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"rising-skyline","name":"RisingSkylineService","line":9,"character":37}]}],"randomSkylineHistory":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ControlledRisingSkylineComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"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"]}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":2}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":16,"character":2},"arguments":["style.--mainDiv-width"]}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":2}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":24,"character":2},"arguments":["style.--mainDiv-height"]}]}],"margin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":2}}]}],"buildingWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":2}}]}],"risingSkylineHistory$":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":2}}]}],"speed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":2}}]}],"startingColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":2}}]}],"endingColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":2}}]}],"displayVerticalTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":2}}]}],"buildingMinimumHeightVerticalTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":2}}]}],"font":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":2}}]}],"skylineBackgroundColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":93,"character":2},"arguments":["style.--skyline-background-color"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":2}}]}],"controlBackgroundColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":2}}]}],"sliderColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":2}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":2}}]}],"onClickBuilding":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":118,"character":2}}]}],"onEnterBuilding":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":123,"character":2}}]}],"onLeaveBuilding":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":128,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"rising-skyline","name":"RisingSkylineService","line":145,"character":36}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"mouseEnterBuilding":[{"__symbolic":"method"}],"mouseLeaveBuilding":[{"__symbolic":"method"}],"mouseClickBuilding":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ControlledRisingSkylineModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ControlledRisingSkylineComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":4},{"__symbolic":"reference","module":"rising-skyline","name":"RisingSkylineModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":12,"character":4}],"providers":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":14,"character":14}],"exports":[{"__symbolic":"reference","name":"ControlledRisingSkylineComponent"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"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"]}]}],"members":{"backgroundColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":16,"character":3},"arguments":["style.--control-background-color"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"sliderColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":22,"character":3},"arguments":["style.--slider-color"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"rising-skyline","name":"RisingSkylineService","line":35,"character":37},{"__symbolic":"reference","module":"rising-skyline","name":"ColorService","line":35,"character":80}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onSliderChange":[{"__symbolic":"method"}]}}},"origins":{"ControlledRisingSkylineService":"./lib/controlled-rising-skyline.service","ControlledRisingSkylineComponent":"./lib/controlled-rising-skyline.component","ControlledRisingSkylineModule":"./lib/controlled-rising-skyline.module","ɵa":"./lib/panel-control/panel-control.component"},"importAs":"controlled-rising-skyline"}