systelab-components/esm2022/lib/grid/custom-cells/stacked-bar/stacked-bar-cell-renderer.component.mjs

systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.

import { Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../../tooltip/tooltip.directive";
export class StackedBarCellRendererComponent {
    constructor() {
        this.stackedBars = [];
    }
    agInit(params) {
        this.params = params;
        if (params.data) {
            this.initModel();
            this.total = this.getTotal();
            this.width = this.getWidth();
            this.barClick = this.params.barClick;
        }
    }
    refresh(params) {
        return true;
    }
    doBarClick(event, stackedBar) {
        if (this.barClick) {
            event.stopPropagation();
            this.barClick(this.params.data, stackedBar.id);
        }
    }
    initModel() {
        this.stackedBars = this.params.value;
    }
    getMaxValue() {
        return this.params.colDef.getMaxValue();
    }
    getTotal() {
        return this.stackedBars
            .map(bar => bar.value)
            .reduce((total, curr) => total + curr, 0);
    }
    getWidth() {
        return this.total / this.getMaxValue();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: StackedBarCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.9", type: StackedBarCellRendererComponent, selector: "systelab-stacked-bar-cell", ngImport: i0, template: "<div class=\"h-100 d-flex align-items-center\">\n    <div class=\"slab-stacked-bar-cell d-flex align-items-center\" [style.width.%]=\"width*100\"\n         [style.min-width.px]=\"stackedBars.length*25\">\n        @for (bar of stackedBars; track bar.id; let index = $index) {\n            <div [ngClass]=\"{'rounded-left': index===0, 'rounded-right': index===stackedBars.length - 1, 'slab-stacked-bar-click': !!barClick}\"\n                 class=\"slab-stacked-bar d-inline-block stacked {{bar.colorClass}}\" [style.width.%]=\"bar.value/total*100\"\n                 [style.background-color]=\"bar.color\" systelabTooltip=\"{{bar.tooltipText}}\"\n                 (click)=\" doBarClick($event,bar)\">\n                <div class=\"h-100 d-flex align-items-center justify-content-center\">{{bar.value}}</div>\n            </div>\n        }\n    </div>\n    <div class=\"pl-2\">{{total}}</div>\n</div>\n", styles: [".slab-stacked-bar-cell{max-width:90%;height:80%}.slab-stacked-bar-cell .slab-stacked-bar{border-radius:0;height:100%;line-height:28px;min-width:25px;color:#fff}.slab-stacked-bar-cell .slab-stacked-bar-click:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[systelabTooltip],[systelabTooltipHtml]", inputs: ["systelabTooltip", "systelabTooltipHtml", "systelabTooltipPlacement", "systelabTooltipDelay", "systelabTooltipHideDelay", "systelabTooltipOnFocus"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: StackedBarCellRendererComponent, decorators: [{
            type: Component,
            args: [{ selector: 'systelab-stacked-bar-cell', template: "<div class=\"h-100 d-flex align-items-center\">\n    <div class=\"slab-stacked-bar-cell d-flex align-items-center\" [style.width.%]=\"width*100\"\n         [style.min-width.px]=\"stackedBars.length*25\">\n        @for (bar of stackedBars; track bar.id; let index = $index) {\n            <div [ngClass]=\"{'rounded-left': index===0, 'rounded-right': index===stackedBars.length - 1, 'slab-stacked-bar-click': !!barClick}\"\n                 class=\"slab-stacked-bar d-inline-block stacked {{bar.colorClass}}\" [style.width.%]=\"bar.value/total*100\"\n                 [style.background-color]=\"bar.color\" systelabTooltip=\"{{bar.tooltipText}}\"\n                 (click)=\" doBarClick($event,bar)\">\n                <div class=\"h-100 d-flex align-items-center justify-content-center\">{{bar.value}}</div>\n            </div>\n        }\n    </div>\n    <div class=\"pl-2\">{{total}}</div>\n</div>\n", styles: [".slab-stacked-bar-cell{max-width:90%;height:80%}.slab-stacked-bar-cell .slab-stacked-bar{border-radius:0;height:100%;line-height:28px;min-width:25px;color:#fff}.slab-stacked-bar-cell .slab-stacked-bar-click:hover{cursor:pointer}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhY2tlZC1iYXItY2VsbC1yZW5kZXJlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zeXN0ZWxhYi1jb21wb25lbnRzL3NyYy9saWIvZ3JpZC9jdXN0b20tY2VsbHMvc3RhY2tlZC1iYXIvc3RhY2tlZC1iYXItY2VsbC1yZW5kZXJlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zeXN0ZWxhYi1jb21wb25lbnRzL3NyYy9saWIvZ3JpZC9jdXN0b20tY2VsbHMvc3RhY2tlZC1iYXIvc3RhY2tlZC1iYXItY2VsbC1yZW5kZXJlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBZ0IxQyxNQUFNLE9BQU8sK0JBQStCO0lBTDVDO1FBVVEsZ0JBQVcsR0FBdUIsRUFBRSxDQUFDO0tBeUM1QztJQXZDTyxNQUFNLENBQUMsTUFBVztRQUN4QixJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztRQUNyQixJQUFJLE1BQU0sQ0FBQyxJQUFJLEVBQUU7WUFDaEIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQ2pCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQzdCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQzdCLElBQUksQ0FBQyxRQUFRLEdBQVMsSUFBSSxDQUFDLE1BQU8sQ0FBQyxRQUFRLENBQUM7U0FDNUM7SUFDRixDQUFDO0lBRU0sT0FBTyxDQUFDLE1BQVc7UUFDekIsT0FBTyxJQUFJLENBQUM7SUFDYixDQUFDO0lBRU0sVUFBVSxDQUFDLEtBQWlCLEVBQUUsVUFBdUI7UUFDM0QsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2xCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztZQUN4QixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLFVBQVUsQ0FBQyxFQUFFLENBQUMsQ0FBQztTQUMvQztJQUNGLENBQUM7SUFFTyxTQUFTO1FBQ2hCLElBQUksQ0FBQyxXQUFXLEdBQVMsSUFBSSxDQUFDLE1BQU8sQ0FBQyxLQUFLLENBQUM7SUFDN0MsQ0FBQztJQUVPLFdBQVc7UUFDbEIsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN6QyxDQUFDO0lBRU8sUUFBUTtRQUNmLE9BQU8sSUFBSSxDQUFDLFdBQVc7YUFDckIsR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQzthQUNyQixNQUFNLENBQUMsQ0FBQyxLQUFLLEVBQUUsSUFBSSxFQUFFLEVBQUUsQ0FBQyxLQUFLLEdBQUcsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzVDLENBQUM7SUFFTyxRQUFRO1FBQ2YsT0FBTyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN4QyxDQUFDOzhHQTVDVywrQkFBK0I7a0dBQS9CLCtCQUErQixpRUNoQjVDLHU0QkFjQTs7MkZERWEsK0JBQStCO2tCQUwzQyxTQUFTOytCQUNJLDJCQUEyQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWdSZW5kZXJlckNvbXBvbmVudCB9IGZyb20gJ2FnLWdyaWQtYW5ndWxhcic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVN0YWNrZWRCYXIge1xuXHRpZDogc3RyaW5nIHwgbnVtYmVyO1xuXHR2YWx1ZTogbnVtYmVyO1xuXHRjb2xvcj86IHN0cmluZztcblx0Y29sb3JDbGFzcz86IHN0cmluZztcblx0dG9vbHRpcFRleHQ/OiBzdHJpbmc7XG59XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogICAgJ3N5c3RlbGFiLXN0YWNrZWQtYmFyLWNlbGwnLFxuXHR0ZW1wbGF0ZVVybDogJ3N0YWNrZWQtYmFyLWNlbGwtcmVuZGVyZXIuY29tcG9uZW50Lmh0bWwnLFxuXHRzdHlsZVVybHM6ICAgWydzdGFja2VkLWJhci1jZWxsLXJlbmRlcmVyLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgU3RhY2tlZEJhckNlbGxSZW5kZXJlckNvbXBvbmVudCBpbXBsZW1lbnRzIEFnUmVuZGVyZXJDb21wb25lbnQge1xuXHRwdWJsaWMgcGFyYW1zOiBhbnk7XG5cdHB1YmxpYyBiYXJDbGljazogKHJvd0RhdGE6IGFueSwgaWQ6IHN0cmluZyB8IG51bWJlcikgPT4gdm9pZDtcblx0cHVibGljIHRvdGFsOiBudW1iZXI7XG5cdHB1YmxpYyB3aWR0aDogbnVtYmVyO1xuXHRwdWJsaWMgc3RhY2tlZEJhcnM6IEFycmF5PElTdGFja2VkQmFyPiA9IFtdO1xuXG5cdHB1YmxpYyBhZ0luaXQocGFyYW1zOiBhbnkpOiB2b2lkIHtcblx0XHR0aGlzLnBhcmFtcyA9IHBhcmFtcztcblx0XHRpZiAocGFyYW1zLmRhdGEpIHtcblx0XHRcdHRoaXMuaW5pdE1vZGVsKCk7XG5cdFx0XHR0aGlzLnRvdGFsID0gdGhpcy5nZXRUb3RhbCgpO1xuXHRcdFx0dGhpcy53aWR0aCA9IHRoaXMuZ2V0V2lkdGgoKTtcblx0XHRcdHRoaXMuYmFyQ2xpY2sgPSAoPGFueT50aGlzLnBhcmFtcykuYmFyQ2xpY2s7XG5cdFx0fVxuXHR9XG5cblx0cHVibGljIHJlZnJlc2gocGFyYW1zOiBhbnkpOiBib29sZWFuIHtcblx0XHRyZXR1cm4gdHJ1ZTtcblx0fVxuXG5cdHB1YmxpYyBkb0JhckNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50LCBzdGFja2VkQmFyOiBJU3RhY2tlZEJhcik6IHZvaWQge1xuXHRcdGlmICh0aGlzLmJhckNsaWNrKSB7XG5cdFx0XHRldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcblx0XHRcdHRoaXMuYmFyQ2xpY2sodGhpcy5wYXJhbXMuZGF0YSwgc3RhY2tlZEJhci5pZCk7XG5cdFx0fVxuXHR9XG5cblx0cHJpdmF0ZSBpbml0TW9kZWwoKTogdm9pZCB7XG5cdFx0dGhpcy5zdGFja2VkQmFycyA9ICg8YW55PnRoaXMucGFyYW1zKS52YWx1ZTtcblx0fVxuXG5cdHByaXZhdGUgZ2V0TWF4VmFsdWUoKTogbnVtYmVyIHtcblx0XHRyZXR1cm4gdGhpcy5wYXJhbXMuY29sRGVmLmdldE1heFZhbHVlKCk7XG5cdH1cblxuXHRwcml2YXRlIGdldFRvdGFsKCk6IG51bWJlciB7XG5cdFx0cmV0dXJuIHRoaXMuc3RhY2tlZEJhcnNcblx0XHRcdC5tYXAoYmFyID0+IGJhci52YWx1ZSlcblx0XHRcdC5yZWR1Y2UoKHRvdGFsLCBjdXJyKSA9PiB0b3RhbCArIGN1cnIsIDApO1xuXHR9XG5cblx0cHJpdmF0ZSBnZXRXaWR0aCgpOiBudW1iZXIge1xuXHRcdHJldHVybiB0aGlzLnRvdGFsIC8gdGhpcy5nZXRNYXhWYWx1ZSgpO1xuXHR9XG5cbn1cbiIsIjxkaXYgY2xhc3M9XCJoLTEwMCBkLWZsZXggYWxpZ24taXRlbXMtY2VudGVyXCI+XG4gICAgPGRpdiBjbGFzcz1cInNsYWItc3RhY2tlZC1iYXItY2VsbCBkLWZsZXggYWxpZ24taXRlbXMtY2VudGVyXCIgW3N0eWxlLndpZHRoLiVdPVwid2lkdGgqMTAwXCJcbiAgICAgICAgIFtzdHlsZS5taW4td2lkdGgucHhdPVwic3RhY2tlZEJhcnMubGVuZ3RoKjI1XCI+XG4gICAgICAgIEBmb3IgKGJhciBvZiBzdGFja2VkQmFyczsgdHJhY2sgYmFyLmlkOyBsZXQgaW5kZXggPSAkaW5kZXgpIHtcbiAgICAgICAgICAgIDxkaXYgW25nQ2xhc3NdPVwieydyb3VuZGVkLWxlZnQnOiBpbmRleD09PTAsICdyb3VuZGVkLXJpZ2h0JzogaW5kZXg9PT1zdGFja2VkQmFycy5sZW5ndGggLSAxLCAnc2xhYi1zdGFja2VkLWJhci1jbGljayc6ICEhYmFyQ2xpY2t9XCJcbiAgICAgICAgICAgICAgICAgY2xhc3M9XCJzbGFiLXN0YWNrZWQtYmFyIGQtaW5saW5lLWJsb2NrIHN0YWNrZWQge3tiYXIuY29sb3JDbGFzc319XCIgW3N0eWxlLndpZHRoLiVdPVwiYmFyLnZhbHVlL3RvdGFsKjEwMFwiXG4gICAgICAgICAgICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImJhci5jb2xvclwiIHN5c3RlbGFiVG9vbHRpcD1cInt7YmFyLnRvb2x0aXBUZXh0fX1cIlxuICAgICAgICAgICAgICAgICAoY2xpY2spPVwiIGRvQmFyQ2xpY2soJGV2ZW50LGJhcilcIj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaC0xMDAgZC1mbGV4IGFsaWduLWl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNvbnRlbnQtY2VudGVyXCI+e3tiYXIudmFsdWV9fTwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwicGwtMlwiPnt7dG90YWx9fTwvZGl2PlxuPC9kaXY+XG4iXX0=