@obliczeniowo/elementary
Version:
Library made in Angular version 20
106 lines (101 loc) • 7.72 kB
JavaScript
import * as i1 from '@obliczeniowo/elementary/pie-progress';
import { PieProgressModule } from '@obliczeniowo/elementary/pie-progress';
import * as i0 from '@angular/core';
import { input, effect, ViewChild, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DrawingSvgInterface, TextAlign } from '@obliczeniowo/elementary/drawing';
import { Point2D } from '@obliczeniowo/elementary/classes';
class CircleProgressStepperComponent {
renderer;
/**
* Steps state objects to display
*/
steps = input([]);
svg;
size = 22;
_ray;
_dAngle;
dc;
constructor(renderer) {
this.renderer = renderer;
effect(() => {
const steps = this.steps();
if (steps) {
this._ray = Math.max(steps.length && this.size / Math.sin(Math.PI / steps.length), 100);
this._dAngle = 360 / steps.length;
this.draw();
}
});
}
ngAfterViewInit() {
this.dc = new DrawingSvgInterface(this.svg.nativeElement, this.renderer);
this.draw();
}
draw() {
if (this.dc) {
this.dc.clear();
const dAngleRad = this.dAngle() * Math.PI / 180;
const angle = Math.asin((this._ray * Math.sin(dAngleRad / 2) - this.size * 0.75) / this._ray) * 2;
const offset = (dAngleRad - angle) / 2;
let sum = 0;
const steps = this.steps();
const first = steps.find(step => step.status === 'progress' || step.status === 'failure') ||
[...steps].reverse().find(step => step.status === 'done');
if (first) {
this.dc.setFontSize(20);
this.dc.setTextAlign(TextAlign.LEFT);
this.dc.drawText(`${first.name}: ${first.progress.toFixed()}%`, new Point2D(50, this._ray + this.size + 40), 'var(--default-text-color)');
}
steps.forEach((step, index) => {
this.dc.drawArch(new Point2D(this._ray + this.size, this._ray + this.size), this._ray, this._ray, Math.PI * 1.5 + offset + dAngleRad * index, angle + Math.PI * 1.5 + offset + dAngleRad * index, 8, 'var(--default-border-color)');
this.dc.drawArch(new Point2D(this._ray + this.size, this._ray + this.size), this._ray, this._ray, Math.PI * 1.5 + offset + dAngleRad * index, angle * step.progress / 100 + Math.PI * 1.5 + offset + dAngleRad * index, 6, step.status === 'failure' ? 'var(--obl-default-error-color)' : 'var(--obl-primary)');
sum += step.progress / steps.length;
});
this.dc.setFontSize(50);
this.dc.setTextAlign(TextAlign.RIGHT);
this.dc.drawText(`${sum.toFixed()}%`, new Point2D(this._ray * 2 + this.size - 30, this._ray + this.size), 'var(--default-text-color)');
}
}
ray() {
return this._ray;
}
dAngle() {
return this._dAngle;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CircleProgressStepperComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: CircleProgressStepperComponent, isStandalone: false, selector: "obl-circle-progress-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true }], ngImport: i0, template: "<div\n [style.width.px]=\"(ray() + size) * 2\"\n [style.height.px]=\"(ray() + size) * 2\"\n>\n <svg\n [attr.width]=\"(ray() + size) * 2\"\n [attr.height]=\"(ray() + size) * 2\"\n [attr.viewBox]=\"'0 0 ' + ((ray() + size) * 2) + ' ' + ((ray() + size) * 2)\"\n #svg\n ></svg>\n @for (step of steps(); track step.name) {\n <obl-pie-progress\n [display]=\"false\"\n [value]=\"step.progress\"\n [status]=\"step.status\"\n [size]=\"size\"\n [style.transform]=\"\n 'translate(-11px, -11px)' +\n 'rotate(' +\n ((dAngle() * $index) + 90) +\n 'deg)' +\n 'translateX(' +\n -ray() +\n 'px)' +\n 'rotate(' +\n ((-dAngle() * $index) - 90) +\n 'deg)'\n \"\n ></obl-pie-progress>\n }\n</div>\n", styles: [":host div{position:relative}:host div svg,:host div obl-pie-progress{position:absolute;left:50%;top:50%}:host div svg{transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "component", type: i1.PieProgressComponent, selector: "obl-pie-progress", inputs: ["status", "interactive", "size", "colorFn", "display", "value", "fontSize", "column", "write"], outputs: ["valueChange"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CircleProgressStepperComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-circle-progress-stepper', standalone: false, template: "<div\n [style.width.px]=\"(ray() + size) * 2\"\n [style.height.px]=\"(ray() + size) * 2\"\n>\n <svg\n [attr.width]=\"(ray() + size) * 2\"\n [attr.height]=\"(ray() + size) * 2\"\n [attr.viewBox]=\"'0 0 ' + ((ray() + size) * 2) + ' ' + ((ray() + size) * 2)\"\n #svg\n ></svg>\n @for (step of steps(); track step.name) {\n <obl-pie-progress\n [display]=\"false\"\n [value]=\"step.progress\"\n [status]=\"step.status\"\n [size]=\"size\"\n [style.transform]=\"\n 'translate(-11px, -11px)' +\n 'rotate(' +\n ((dAngle() * $index) + 90) +\n 'deg)' +\n 'translateX(' +\n -ray() +\n 'px)' +\n 'rotate(' +\n ((-dAngle() * $index) - 90) +\n 'deg)'\n \"\n ></obl-pie-progress>\n }\n</div>\n", styles: [":host div{position:relative}:host div svg,:host div obl-pie-progress{position:absolute;left:50%;top:50%}:host div svg{transform:translate(-50%,-50%)}\n"] }]
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { svg: [{
type: ViewChild,
args: ['svg']
}] } });
class CircleProgressStepperModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CircleProgressStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: CircleProgressStepperModule, declarations: [CircleProgressStepperComponent], imports: [CommonModule,
PieProgressModule], exports: [CircleProgressStepperComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CircleProgressStepperModule, imports: [CommonModule,
PieProgressModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CircleProgressStepperModule, decorators: [{
type: NgModule,
args: [{
declarations: [
CircleProgressStepperComponent
],
imports: [
CommonModule,
PieProgressModule
],
exports: [
CircleProgressStepperComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CircleProgressStepperComponent, CircleProgressStepperModule };
//# sourceMappingURL=obliczeniowo-elementary-circle-progress-stepper.mjs.map