@obliczeniowo/elementary
Version:
Library made in Angular version 20
102 lines (97 loc) • 12.5 kB
JavaScript
import * as i0 from '@angular/core';
import { computed, input, EventEmitter, Output, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { ColorHSV } from '@obliczeniowo/elementary/classes';
import { ElementaryMath } from '@obliczeniowo/elementary/math';
import { keysValues, values } from '@obliczeniowo/elementary/objects';
import * as i2 from '@obliczeniowo/elementary/circle-menu';
import { CircleMenuModule } from '@obliczeniowo/elementary/circle-menu';
import * as i3 from '@obliczeniowo/elementary/text-pipes';
import { TextPipesModule } from '@obliczeniowo/elementary/text-pipes';
/* eslint-disable @typescript-eslint/no-unsafe-argument */
class PieGroupDiagramComponent {
width = 800;
height = 800;
config = computed(() => {
const configs = [];
const kvg = keysValues(this.data());
kvg.forEach((data, gi) => {
let previousEnd = 0;
const sum = ElementaryMath.sum(values(data[1]));
const kv = keysValues(data[1]);
const length = kv.length;
const config = {
sum,
name: data[0],
class: data[0].replace(/ /g, '-'),
keyConfig: kv
.map((value, i) => {
const prepare = {
start: previousEnd,
end: previousEnd + (value[1] / (sum || 1)) * 360,
background: ColorHSV.createColorHSV((360 * i) / length, 0.8, 255 - (155 / (kvg.length || 1)) * gi).toString(),
color: '#ffffff',
value: value[1],
key: value[0],
group: data[0],
};
previousEnd = prepare.end;
return {
[value[0]]: prepare,
};
})
.reduce((p, c) => ({ ...p, ...c }), {}),
};
configs.push(config);
});
return configs;
});
minRay = this.height / 4;
selected;
display = input('value');
translations = input({});
data = input({});
clicked = new EventEmitter();
get archThick() {
return (this.height / 2 - this.minRay) / (this.config().length || 1);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PieGroupDiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PieGroupDiagramComponent, isStandalone: false, selector: "obl-pie-group-diagram", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"svgContainer\">\n <svg [attr.viewBox]=\"'0 0 ' + width + ' ' + height\">\n @if (selected) {\n <text\n class=\"group-title\"\n [attr.x]=\"width / 2\"\n [attr.y]=\"height / 2 - 25\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ selected.group }}\n </text>\n\n <text\n [attr.x]=\"width / 2\"\n [attr.y]=\"height / 2 + 15\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ 'Key:' | oblTranslation : translations() }}\n {{ selected.key | oblTranslation : translations() }}\n </text>\n <text\n [attr.x]=\"width / 2\"\n [attr.y]=\"height / 2 + 45\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ 'Value:' | oblTranslation : translations() }} {{ selected.value }}\n </text>\n }\n\n @for (group of config(); track group.name; let index = $index) {\n <g [ngClass]=\"[group.class]\">\n @for (value of group.keyConfig | keyvalue; track value.key) {\n <g\n obl-menu-item\n [x]=\"width / 2\"\n [y]=\"height / 2\"\n [ray]=\"(index + 0.5) * archThick + minRay\"\n [width]=\"archThick\"\n [start]=\"value.value.start\"\n [end]=\"value.value.end\"\n [background]=\"value.value.background\"\n [text]=\"\n (display() !== 'none' &&\n (display() === 'key'\n ? value.key\n : value.value.value.toString())) ||\n ''\n \"\n [color]=\"value.value.color\"\n [shadow]=\"true\"\n (mouseover)=\"selected = value.value\"\n (click)=\"\n clicked.emit({\n group: group.name,\n key: value.key,\n value: value.value.value\n })\n \"\n ></g>\n }\n </g>\n }\n </svg>\n</div>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}text{font-size:20px;fill:var(--default-text-color)}.group-title{font-size:30px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MenuItemComponent, selector: "g[obl-menu-item]", inputs: ["start", "end", "ray", "x", "y", "width", "background", "color", "text", "angleScale", "shadow"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i3.TranslationPipe, name: "oblTranslation" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PieGroupDiagramComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-pie-group-diagram', standalone: false, template: "<div class=\"svgContainer\">\n <svg [attr.viewBox]=\"'0 0 ' + width + ' ' + height\">\n @if (selected) {\n <text\n class=\"group-title\"\n [attr.x]=\"width / 2\"\n [attr.y]=\"height / 2 - 25\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ selected.group }}\n </text>\n\n <text\n [attr.x]=\"width / 2\"\n [attr.y]=\"height / 2 + 15\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ 'Key:' | oblTranslation : translations() }}\n {{ selected.key | oblTranslation : translations() }}\n </text>\n <text\n [attr.x]=\"width / 2\"\n [attr.y]=\"height / 2 + 45\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ 'Value:' | oblTranslation : translations() }} {{ selected.value }}\n </text>\n }\n\n @for (group of config(); track group.name; let index = $index) {\n <g [ngClass]=\"[group.class]\">\n @for (value of group.keyConfig | keyvalue; track value.key) {\n <g\n obl-menu-item\n [x]=\"width / 2\"\n [y]=\"height / 2\"\n [ray]=\"(index + 0.5) * archThick + minRay\"\n [width]=\"archThick\"\n [start]=\"value.value.start\"\n [end]=\"value.value.end\"\n [background]=\"value.value.background\"\n [text]=\"\n (display() !== 'none' &&\n (display() === 'key'\n ? value.key\n : value.value.value.toString())) ||\n ''\n \"\n [color]=\"value.value.color\"\n [shadow]=\"true\"\n (mouseover)=\"selected = value.value\"\n (click)=\"\n clicked.emit({\n group: group.name,\n key: value.key,\n value: value.value.value\n })\n \"\n ></g>\n }\n </g>\n }\n </svg>\n</div>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}text{font-size:20px;fill:var(--default-text-color)}.group-title{font-size:30px}\n"] }]
}], propDecorators: { clicked: [{
type: Output
}] } });
class PieGroupDiagramModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PieGroupDiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: PieGroupDiagramModule, declarations: [PieGroupDiagramComponent], imports: [CommonModule,
CircleMenuModule,
TextPipesModule], exports: [PieGroupDiagramComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PieGroupDiagramModule, imports: [CommonModule,
CircleMenuModule,
TextPipesModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PieGroupDiagramModule, decorators: [{
type: NgModule,
args: [{
declarations: [
PieGroupDiagramComponent
],
imports: [
CommonModule,
CircleMenuModule,
TextPipesModule
],
exports: [
PieGroupDiagramComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PieGroupDiagramComponent, PieGroupDiagramModule };
//# sourceMappingURL=obliczeniowo-elementary-pie-group-diagram.mjs.map