libey-ng-component-library 0.0.32 → 0.0.34

package/src/lib/cpm-indicator/libey-ng-cpm-indicator.component.ts

@@ -0,0 +1,203 @@
+import { Component, Input, OnInit, OnChanges, SimpleChanges, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
+import { CpmIndicatorMode,CpmItemType,CpmItem,CpmThresholds,CpmSummary,ZoneColor,SvgPoint,DEFAULT_THRESHOLDS,ZONE_COLORS, CpmColorState,} from '../../utils/CpmIndicator/cpm-indicator-types';
+
+@Component({
+  selector: 'lib-libey-ng-cpm-indicator',
+  templateUrl: './libey-ng-cpm-indicator.component.html',
+  styleUrls: ['./libey-ng-cpm-indicator.component.css']
+})
+export class LibeyNgCpmIndicatorComponent implements OnInit, OnChanges {
+
+  /** Tope máximo del contrato. */
+  @Input() limit: number = 250;
+
+  /**
+   * Ítems de gasto. El padre es responsable de:
+   * - Excluir ítems que no aplican al CPM
+   * - Marcar cada uno con CpmItemType.Base o CpmItemType.Projected
+   * - Actualizar el array al agregar o eliminar
+   */
+  @Input() items: CpmItem[] = [];
+
+  /** Símbolo de moneda. Por defecto 's/' (sol peruano). */
+  @Input() currency: string = 's/';
+
+  /** Umbrales de zonas como porcentaje del límite (0.0 → 1.0). Usa tercios si no se proporciona. */
+  @Input() thresholds?: CpmThresholds;
+
+  /** Modo de visualización: CPM (solo gauge) o Gauge (montos + leyenda). */
+  @Input() mode: CpmIndicatorMode = CpmIndicatorMode.Cpm;
+
+  /** Activa sliders de prueba. Solo para desarrollo, nunca en producción. */
+  @Input() devMode: boolean = false;
+
+  // ── Outputs ──
+  /** Emite el resumen de montos en cada recalculo. Usar para persistir en BD. */
+  @Output() cpmChange = new EventEmitter<CpmSummary>();
+
+  /** Emite true cuando la proyección supera el límite. */
+  @Output() limitExceeded = new EventEmitter<boolean>();
+
+  @ViewChild('cpmLegend') cpmLegend!: TemplateRef<any>;
+
+  @Output() colorChange = new EventEmitter<CpmColorState>();
+
+  @Input() scale: number = 1;
+
+  // ── Propiedades del template ──
+  baseAmount: number      = 0;
+  projectedAmount: number = 0;
+  totalAmount: number     = 0;
+  excess: number          = 0;
+  activeColors: ZoneColor = ZONE_COLORS['zone1'];
+
+  trackArcPath: string     = '';
+  baseArcPath: string      = '';
+  totalArcPath: string     = '';
+  dotBasePos: SvgPoint     = { x: 0, y: 0 };
+  dotTotalPos: SvgPoint    = { x: 0, y: 0 };
+  dotTotalVisible: boolean = false;
+  limitTextPos: SvgPoint   = { x: 0, y: 0 };
+
+  // ── devMode ──
+  sliderBase: number      = 0;
+  sliderProjected: number = 0;
+
+  get sliderMax(): number {
+    return this.limit * 1.5;
+  }
+
+  // Necesario para usar el enum en el template
+  readonly CpmIndicatorMode = CpmIndicatorMode;
+
+  // Geometría del SVG (coordenadas internas del viewBox 220x130)
+  private readonly CX          = 110;
+  private readonly CY          = 115;
+  private readonly R           = 90;
+  private readonly ANGLE_START = Math.PI;
+  private readonly ANGLE_END   = 0;
+
+  private readonly EXCESS_TOLERANCE = 0.005;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.recalculate();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['items'] || changes['limit'] || changes['thresholds']) {
+      this.recalculate();
+    }
+  }
+
+  onDevBaseChange(event: Event): void {
+    this.sliderBase = parseFloat((event.target as HTMLInputElement).value);
+    if (this.sliderBase > this.sliderProjected) {
+      this.sliderProjected = this.sliderBase;
+    }
+    this.recalculateFromSliders();
+  }
+
+  onDevProjectedChange(event: Event): void {
+    this.sliderProjected = parseFloat((event.target as HTMLInputElement).value);
+    if (this.sliderProjected < this.sliderBase) {
+      this.sliderProjected = this.sliderBase;
+    }
+    this.recalculateFromSliders();
+  }
+
+  // Flujo de producción: calcula a partir del array de items
+  private recalculate(): void {
+    this.baseAmount = this.items
+      .filter(i => i.type === CpmItemType.Base)
+      .reduce((acc, i) => acc + i.amount, 0);
+
+    this.projectedAmount = this.items
+      .filter(i => i.type === CpmItemType.Projected)
+      .reduce((acc, i) => acc + i.amount, 0);
+
+    this.totalAmount = this.baseAmount + this.projectedAmount;
+
+    // Sincroniza sliders por si se activa devMode
+    this.sliderBase      = this.baseAmount;
+    this.sliderProjected = this.totalAmount;
+
+    this.updateGauge();
+    this.emitSummary();
+  }
+
+  // Flujo de devMode: calcula a partir de los sliders
+  private recalculateFromSliders(): void {
+    this.baseAmount      = this.sliderBase;
+    this.projectedAmount = this.sliderProjected - this.sliderBase;
+    this.totalAmount     = this.sliderProjected;
+
+    this.updateGauge();
+    this.emitSummary();
+  }
+
+  private updateGauge(): void {
+    const thresholds  = this.thresholds ?? DEFAULT_THRESHOLDS;
+    this.activeColors = this.getZoneColors(this.totalAmount, thresholds);
+
+    this.trackArcPath = this.buildArcPath(this.ANGLE_START, this.ANGLE_END);
+    this.totalArcPath = this.buildArcPath(this.ANGLE_START, this.valueToAngle(this.totalAmount));
+    this.baseArcPath  = this.buildArcPath(this.ANGLE_START, this.valueToAngle(this.baseAmount));
+
+    this.dotBasePos  = this.polar(this.valueToAngle(this.baseAmount));
+    this.dotTotalPos = this.polar(this.valueToAngle(this.totalAmount));
+
+    // El punto de proyección solo aparece si va delante del real y no llegó al borde
+    this.dotTotalVisible = this.totalAmount > this.baseAmount && this.totalAmount < this.limit;
+
+    this.limitTextPos = this.polar(this.ANGLE_END, this.R + 20);
+
+    this.excess = Math.max(0, this.totalAmount - this.limit);
+    this.limitExceeded.emit(this.excess > this.EXCESS_TOLERANCE);
+
+    this.colorChange.emit({
+      darkColor:    this.activeColors.dark,
+      lightColor:   this.activeColors.light,
+      grayColor:    '#E8EAEF',
+      limitReached: this.totalAmount >= this.limit,
+    });
+  }
+
+  private emitSummary(): void {
+    this.cpmChange.emit({
+      baseAmount:      this.baseAmount,
+      projectedAmount: this.projectedAmount,
+      totalAmount:     this.totalAmount,
+      limit:           this.limit,
+    });
+  }
+
+  // Clampea el valor al límite para que el arco no desborde visualmente
+  private valueToAngle(value: number): number {
+    const clamped = Math.min(value, this.limit);
+    return Math.PI - (clamped / this.limit) * Math.PI;
+  }
+
+  private polar(angle: number, radius: number = this.R): SvgPoint {
+    return {
+      x: this.CX + radius * Math.cos(angle),
+      y: this.CY - radius * Math.sin(angle),
+    };
+  }
+
+  private buildArcPath(a1: number, a2: number): string {
+    const start = this.polar(a1);
+    const end   = this.polar(a2);
+    const large = (a1 - a2) > Math.PI ? 1 : 0;
+    return `M ${start.x} ${start.y} A ${this.R} ${this.R} 0 ${large} 1 ${end.x} ${end.y}`;
+  }
+
+  private getZoneColors(value: number, t: CpmThresholds): ZoneColor {
+    const pct = value / this.limit;
+    if (pct < t.zone1Max) return ZONE_COLORS['zone1'];
+    if (pct < t.zone2Max) return ZONE_COLORS['zone2'];
+    if (pct < t.zone3Max) return ZONE_COLORS['zone3'];
+    return ZONE_COLORS['zone4'];
+  }
+}

package/src/lib/cpm-indicator/libey-ng-cpm-indicator.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LibeyNgCpmIndicatorComponent } from './libey-ng-cpm-indicator.component';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+
+
+
+@NgModule({
+  declarations: [
+    LibeyNgCpmIndicatorComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    LibeyNgCpmIndicatorComponent
+  ]
+})
+export class LibeyNgCpmIndicatorModule { }

package/src/lib/icons/icons.component.css

@@ -0,0 +1,9 @@
+.d-inline-flex {
+  display: inline-flex;
+}
+
+button:disabled {
+  svg path {
+    fill: #ABBED1 !important;
+  }
+}

package/src/lib/icons/icons.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LibeyNgIconsComponent } from './libey-ng-icons/libey-ng-icons.component';
+
+@NgModule({
+  declarations: [
+    LibeyNgIconsComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    LibeyNgIconsComponent
+  ]
+})
+export class IconsModule { }