ng-devui
Version:
DevUI components based on Angular
66 lines • 15.1 kB
JavaScript
import { Component, Input, TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../quadrant-label/quadrant-label.component";
export class QuadrantRegionComponent {
ngOnChanges(changes) {
const { axisConfigs, view } = changes;
if (axisConfigs || view) {
this.drawQuadrantRegion();
}
}
ngOnInit() {
this.drawQuadrantRegion();
}
drawQuadrantRegion() {
if (this.view && this.view.height) {
this.quadrantHeight = (this.view.height - this.axisConfigs.axisMargin - this.axisConfigs.originPosition.bottom) / 2;
}
if (this.view && this.view.width) {
this.quadrantWidth = (this.view.width - this.axisConfigs.axisMargin - this.axisConfigs.originPosition.left) / 2;
}
}
getQuadrantTopValue(index) {
let height = 0;
if (index + 1 === 3 || index + 1 === 4) {
height = this.quadrantHeight;
}
return this.axisConfigs.axisMargin + height;
}
getQuadrantLeftValue(index) {
let width = 0;
if (index + 1 === 1 || index + 1 === 4) {
width = this.quadrantWidth;
}
return this.axisConfigs.originPosition.left + width;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuadrantRegionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuadrantRegionComponent, selector: "d-quadrant-region", inputs: { quadrantConfigs: "quadrantConfigs", axisConfigs: "axisConfigs", view: "view", labelData: "labelData", normalLabelTemplate: "normalLabelTemplate", largeLabelTemplate: "largeLabelTemplate", smallLabelTemplate: "smallLabelTemplate", currentLabelSize: "currentLabelSize", showQuadrants: "showQuadrants", dropScope: "dropScope", diagramId: "diagramId" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"showQuadrants\">\n <div\n *ngFor=\"let item of quadrantConfigs; let i = index\"\n class=\"devui-quadrant-region devui-quadrant-region-{{ i + 1 }}\"\n [style.background-color]=\"item?.backgroundColor\"\n [style.height.px]=\"quadrantHeight\"\n [style.width.px]=\"quadrantWidth\"\n [style.top.px]=\"getQuadrantTopValue(i)\"\n [style.left.px]=\"getQuadrantLeftValue(i)\"\n >\n <div class=\"devui-quadrant-title\" [style.color]=\"item?.color\">\n <span>{{ item?.title }}</span>\n </div>\n </div>\n</ng-container>\n<d-quadrant-label\n [currentLabelSize]=\"currentLabelSize\"\n [labelData]=\"labelData\"\n [axisConfigs]=\"axisConfigs\"\n [view]=\"view\"\n [dropScope]=\"dropScope\"\n [diagramId]=\"diagramId\"\n></d-quadrant-label>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-quadrant-region{position:absolute}.devui-quadrant-title{font-size:var(--devui-font-size-data-overview, 24px);line-height:32px;margin:20px;-webkit-user-select:none;user-select:none}.devui-quadrant-title span{display:block}.devui-quadrant-region-1{background:#f66f6a0a;border-bottom:1px solid var(--devui-dividing-line, #f0f0f0);border-left:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-quadrant-region-1 .devui-quadrant-title{color:#f66f6a4d}.devui-quadrant-region-2{background:#fac20a0a;border-bottom:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-quadrant-region-2 .devui-quadrant-title{color:#fac20a4d}.devui-quadrant-region-3{background:#50d4ab0a}.devui-quadrant-region-3 .devui-quadrant-title{color:#50d4ab4d}.devui-quadrant-region-4{background:#5170ff0a;border-left:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-quadrant-region-4 .devui-quadrant-title{color:#5170ff4d}\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"] }, { kind: "component", type: i2.QuadrantLabelComponent, selector: "d-quadrant-label", inputs: ["currentLabelSize", "labelData", "axisConfigs", "view", "normalLabelTemplate", "largeLabelTemplate", "smallLabelTemplate", "dropScope", "diagramId"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuadrantRegionComponent, decorators: [{
type: Component,
args: [{ selector: 'd-quadrant-region', template: "<ng-container *ngIf=\"showQuadrants\">\n <div\n *ngFor=\"let item of quadrantConfigs; let i = index\"\n class=\"devui-quadrant-region devui-quadrant-region-{{ i + 1 }}\"\n [style.background-color]=\"item?.backgroundColor\"\n [style.height.px]=\"quadrantHeight\"\n [style.width.px]=\"quadrantWidth\"\n [style.top.px]=\"getQuadrantTopValue(i)\"\n [style.left.px]=\"getQuadrantLeftValue(i)\"\n >\n <div class=\"devui-quadrant-title\" [style.color]=\"item?.color\">\n <span>{{ item?.title }}</span>\n </div>\n </div>\n</ng-container>\n<d-quadrant-label\n [currentLabelSize]=\"currentLabelSize\"\n [labelData]=\"labelData\"\n [axisConfigs]=\"axisConfigs\"\n [view]=\"view\"\n [dropScope]=\"dropScope\"\n [diagramId]=\"diagramId\"\n></d-quadrant-label>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-quadrant-region{position:absolute}.devui-quadrant-title{font-size:var(--devui-font-size-data-overview, 24px);line-height:32px;margin:20px;-webkit-user-select:none;user-select:none}.devui-quadrant-title span{display:block}.devui-quadrant-region-1{background:#f66f6a0a;border-bottom:1px solid var(--devui-dividing-line, #f0f0f0);border-left:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-quadrant-region-1 .devui-quadrant-title{color:#f66f6a4d}.devui-quadrant-region-2{background:#fac20a0a;border-bottom:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-quadrant-region-2 .devui-quadrant-title{color:#fac20a4d}.devui-quadrant-region-3{background:#50d4ab0a}.devui-quadrant-region-3 .devui-quadrant-title{color:#50d4ab4d}.devui-quadrant-region-4{background:#5170ff0a;border-left:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-quadrant-region-4 .devui-quadrant-title{color:#5170ff4d}\n"] }]
}], propDecorators: { quadrantConfigs: [{
type: Input
}], axisConfigs: [{
type: Input
}], view: [{
type: Input
}], labelData: [{
type: Input
}], normalLabelTemplate: [{
type: Input
}], largeLabelTemplate: [{
type: Input
}], smallLabelTemplate: [{
type: Input
}], currentLabelSize: [{
type: Input
}], showQuadrants: [{
type: Input
}], dropScope: [{
type: Input
}], diagramId: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVhZHJhbnQtcmVnaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2RldnVpL3F1YWRyYW50LWRpYWdyYW0vcXVhZHJhbnQtcmVnaW9uL3F1YWRyYW50LXJlZ2lvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9kZXZ1aS9xdWFkcmFudC1kaWFncmFtL3F1YWRyYW50LXJlZ2lvbi9xdWFkcmFudC1yZWdpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQW9DLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVFoRyxNQUFNLE9BQU8sdUJBQXVCO0lBZWxDLFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxNQUFNLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxHQUFHLE9BQU8sQ0FBQztRQUN0QyxJQUFJLFdBQVcsSUFBSSxJQUFJLEVBQUUsQ0FBQztZQUN4QixJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztRQUM1QixDQUFDO0lBQ0gsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsa0JBQWtCO1FBQ2hCLElBQUksSUFBSSxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1lBQ2xDLElBQUksQ0FBQyxjQUFjLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLGNBQWMsQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDdEgsQ0FBQztRQUNELElBQUksSUFBSSxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ2pDLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDbEgsQ0FBQztJQUNILENBQUM7SUFFRCxtQkFBbUIsQ0FBQyxLQUFLO1FBQ3ZCLElBQUksTUFBTSxHQUFHLENBQUMsQ0FBQztRQUNmLElBQUksS0FBSyxHQUFHLENBQUMsS0FBSyxDQUFDLElBQUksS0FBSyxHQUFHLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQztZQUN2QyxNQUFNLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQztRQUMvQixDQUFDO1FBQ0QsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLFVBQVUsR0FBRyxNQUFNLENBQUM7SUFDOUMsQ0FBQztJQUVELG9CQUFvQixDQUFDLEtBQUs7UUFDeEIsSUFBSSxLQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ2QsSUFBSSxLQUFLLEdBQUcsQ0FBQyxLQUFLLENBQUMsSUFBSSxLQUFLLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ3ZDLEtBQUssR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBQzdCLENBQUM7UUFDRCxPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsY0FBYyxDQUFDLElBQUksR0FBRyxLQUFLLENBQUM7SUFDdEQsQ0FBQzsrR0FqRFUsdUJBQXVCO21HQUF2Qix1QkFBdUIsc2JDUnBDLHV4QkF1QkE7OzRGRGZhLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSxtQkFBbUI7OEJBS3BCLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxtQkFBbUI7c0JBQTNCLEtBQUs7Z0JBQ0csa0JBQWtCO3NCQUExQixLQUFLO2dCQUNHLGtCQUFrQjtzQkFBMUIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMsIE9uSW5pdCwgU2ltcGxlQ2hhbmdlcywgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgSUF4aXNDb25maWdzLCBJUXVhZHJhbnRDb25maWdzLCBJVmlld0NvbmZpZ3MgfSBmcm9tICcuLi9xdWFkcmFudC1kaWFncmFtLnR5cGUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdkLXF1YWRyYW50LXJlZ2lvbicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3F1YWRyYW50LXJlZ2lvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vcXVhZHJhbnQtcmVnaW9uLmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBRdWFkcmFudFJlZ2lvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcclxuICBASW5wdXQoKSBxdWFkcmFudENvbmZpZ3M6IEFycmF5PElRdWFkcmFudENvbmZpZ3M+O1xyXG4gIEBJbnB1dCgpIGF4aXNDb25maWdzOiBJQXhpc0NvbmZpZ3M7XHJcbiAgQElucHV0KCkgdmlldzogSVZpZXdDb25maWdzO1xyXG4gIEBJbnB1dCgpIGxhYmVsRGF0YTtcclxuICBASW5wdXQoKSBub3JtYWxMYWJlbFRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG4gIEBJbnB1dCgpIGxhcmdlTGFiZWxUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcclxuICBASW5wdXQoKSBzbWFsbExhYmVsVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgQElucHV0KCkgY3VycmVudExhYmVsU2l6ZTtcclxuICBASW5wdXQoKSBzaG93UXVhZHJhbnRzO1xyXG4gIEBJbnB1dCgpIGRyb3BTY29wZTtcclxuICBASW5wdXQoKSBkaWFncmFtSWQ7XHJcbiAgcXVhZHJhbnRIZWlnaHQ6IG51bWJlcjtcclxuICBxdWFkcmFudFdpZHRoOiBudW1iZXI7XHJcblxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcclxuICAgIGNvbnN0IHsgYXhpc0NvbmZpZ3MsIHZpZXcgfSA9IGNoYW5nZXM7XHJcbiAgICBpZiAoYXhpc0NvbmZpZ3MgfHwgdmlldykge1xyXG4gICAgICB0aGlzLmRyYXdRdWFkcmFudFJlZ2lvbigpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgICB0aGlzLmRyYXdRdWFkcmFudFJlZ2lvbigpO1xyXG4gIH1cclxuXHJcbiAgZHJhd1F1YWRyYW50UmVnaW9uKCkge1xyXG4gICAgaWYgKHRoaXMudmlldyAmJiB0aGlzLnZpZXcuaGVpZ2h0KSB7XHJcbiAgICAgIHRoaXMucXVhZHJhbnRIZWlnaHQgPSAodGhpcy52aWV3LmhlaWdodCAtIHRoaXMuYXhpc0NvbmZpZ3MuYXhpc01hcmdpbiAtIHRoaXMuYXhpc0NvbmZpZ3Mub3JpZ2luUG9zaXRpb24uYm90dG9tKSAvIDI7XHJcbiAgICB9XHJcbiAgICBpZiAodGhpcy52aWV3ICYmIHRoaXMudmlldy53aWR0aCkge1xyXG4gICAgICB0aGlzLnF1YWRyYW50V2lkdGggPSAodGhpcy52aWV3LndpZHRoIC0gdGhpcy5heGlzQ29uZmlncy5heGlzTWFyZ2luIC0gdGhpcy5heGlzQ29uZmlncy5vcmlnaW5Qb3NpdGlvbi5sZWZ0KSAvIDI7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBnZXRRdWFkcmFudFRvcFZhbHVlKGluZGV4KSB7XHJcbiAgICBsZXQgaGVpZ2h0ID0gMDtcclxuICAgIGlmIChpbmRleCArIDEgPT09IDMgfHwgaW5kZXggKyAxID09PSA0KSB7XHJcbiAgICAgIGhlaWdodCA9IHRoaXMucXVhZHJhbnRIZWlnaHQ7XHJcbiAgICB9XHJcbiAgICByZXR1cm4gdGhpcy5heGlzQ29uZmlncy5heGlzTWFyZ2luICsgaGVpZ2h0O1xyXG4gIH1cclxuXHJcbiAgZ2V0UXVhZHJhbnRMZWZ0VmFsdWUoaW5kZXgpIHtcclxuICAgIGxldCB3aWR0aCA9IDA7XHJcbiAgICBpZiAoaW5kZXggKyAxID09PSAxIHx8IGluZGV4ICsgMSA9PT0gNCkge1xyXG4gICAgICB3aWR0aCA9IHRoaXMucXVhZHJhbnRXaWR0aDtcclxuICAgIH1cclxuICAgIHJldHVybiB0aGlzLmF4aXNDb25maWdzLm9yaWdpblBvc2l0aW9uLmxlZnQgKyB3aWR0aDtcclxuICB9XHJcbn1cclxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cInNob3dRdWFkcmFudHNcIj5cbiAgPGRpdlxuICAgICpuZ0Zvcj1cImxldCBpdGVtIG9mIHF1YWRyYW50Q29uZmlnczsgbGV0IGkgPSBpbmRleFwiXG4gICAgY2xhc3M9XCJkZXZ1aS1xdWFkcmFudC1yZWdpb24gZGV2dWktcXVhZHJhbnQtcmVnaW9uLXt7IGkgKyAxIH19XCJcbiAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJpdGVtPy5iYWNrZ3JvdW5kQ29sb3JcIlxuICAgIFtzdHlsZS5oZWlnaHQucHhdPVwicXVhZHJhbnRIZWlnaHRcIlxuICAgIFtzdHlsZS53aWR0aC5weF09XCJxdWFkcmFudFdpZHRoXCJcbiAgICBbc3R5bGUudG9wLnB4XT1cImdldFF1YWRyYW50VG9wVmFsdWUoaSlcIlxuICAgIFtzdHlsZS5sZWZ0LnB4XT1cImdldFF1YWRyYW50TGVmdFZhbHVlKGkpXCJcbiAgPlxuICAgIDxkaXYgY2xhc3M9XCJkZXZ1aS1xdWFkcmFudC10aXRsZVwiIFtzdHlsZS5jb2xvcl09XCJpdGVtPy5jb2xvclwiPlxuICAgICAgPHNwYW4+e3sgaXRlbT8udGl0bGUgfX08L3NwYW4+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9uZy1jb250YWluZXI+XG48ZC1xdWFkcmFudC1sYWJlbFxuICBbY3VycmVudExhYmVsU2l6ZV09XCJjdXJyZW50TGFiZWxTaXplXCJcbiAgW2xhYmVsRGF0YV09XCJsYWJlbERhdGFcIlxuICBbYXhpc0NvbmZpZ3NdPVwiYXhpc0NvbmZpZ3NcIlxuICBbdmlld109XCJ2aWV3XCJcbiAgW2Ryb3BTY29wZV09XCJkcm9wU2NvcGVcIlxuICBbZGlhZ3JhbUlkXT1cImRpYWdyYW1JZFwiXG4+PC9kLXF1YWRyYW50LWxhYmVsPlxuIl19