@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

package/src/lib/charts-bar-grouped/charts-bar-grouped.component.ts

@@ -0,0 +1,284 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component, Input, Output, EventEmitter,
+  OnChanges, computed, signal, ViewChild, ElementRef,
+  AfterViewInit, OnDestroy, NgZone
+} from '@angular/core';
+import { PopoverDirective } from '../directives/popover.directive';
+
+export type BarSeriesItem = { label: string; value: number; color?: string };
+export type BarGroup = { label: string; items: BarSeriesItem[] };
+
+type SeriesColorMap = Record<string, string>;
+
+type BarRect = {
+  groupLabel: string;
+  seriesLabel: string;
+  value: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: string;
+};
+
+type BarStripe = { x: number; width: number };
+
+@Component({
+  selector: 'ius-charts-bar-grouped',
+  standalone: true,
+  imports: [CommonModule, PopoverDirective],
+  templateUrl: './charts-bar-grouped.component.html',
+  styleUrls: ['./charts-bar-grouped.component.scss'],
+})
+export class IusChartsBarGroupedComponent implements OnChanges, AfterViewInit, OnDestroy {
+  @Input() data: BarGroup[] = [];
+  @Input() legendPosition: 'right' | 'bottom' = 'bottom';
+  @Input() seriesOrder?: string[];
+
+  // Escala Y (se pueden exponer como @Input si quieres)
+  yMax?: number;
+  ticks = 5;
+
+  // Fallbacks si no hay tamaño CSS externo
+  width = 640;
+  size = 320; // alto por defecto cuando el host no fija height
+
+  // Márgenes y layout X
+  margin = { top: 24, right: 16, bottom: 55, left: 40 };
+  barWidth = 11;
+  barGap = 2;
+  groupGap = 40;
+  outerGap = 18;
+
+  // Estilo barra
+  barRadius = 5;
+
+  @Input() maxLabelChars = 10;
+  @Output() barClick = new EventEmitter<{ group: string; series: string; value: number }>();
+
+  // Solo necesitamos medir ANCHO visible del plot
+  @ViewChild('plotCtn', { static: true }) plotCtn!: ElementRef<HTMLElement>;
+  private ro?: ResizeObserver;
+  private rafId: number | null = null;
+
+  // Estado
+  private _bars = signal<BarRect[]>([]);
+  private _groups = signal<string[]>([]);
+  private _series = signal<string[]>([]);
+  private _colors = signal<SeriesColorMap>({});
+  private _yMax = signal(0);
+
+  private _paneH = signal(0);     // alto real del host (o fallback size)
+  private _plotW = signal(0);     // ancho visible del contenedor scrolleable
+  private _plotWidth = signal(0); // ancho virtual del SVG derecho
+  private _groupCenters = signal<number[]>([]);
+  private _barStripes = signal<BarStripe[]>([]);
+
+  // Derivados
+  readonly bars = computed(() => this._bars());
+  readonly groups = computed(() => this._groups());
+  readonly series = computed(() => this._series());
+  readonly colors = computed(() => this._colors());
+  readonly yScaleMax = computed(() => this._yMax());
+
+  readonly chartHeight = computed(() => this._paneH() || this.size);
+  readonly plotWidth   = computed(() => this._plotWidth());
+  readonly groupCenters = computed(() => this._groupCenters());
+  readonly barStripes   = computed(() => this._barStripes());
+
+  readonly innerHeight = computed(() =>
+    Math.max(this.chartHeight() - this.margin.top - this.margin.bottom, 0)
+  );
+
+  readonly axisViewBox = computed(() => `0 0 ${this.margin.left} ${this.chartHeight()}`);
+  readonly plotViewBox = computed(() => `0 0 ${this.plotWidth()} ${this.chartHeight()}`);
+
+  readonly Math = Math;
+
+  constructor(private zone: NgZone, private hostEl: ElementRef<HTMLElement>) {}
+
+  ngAfterViewInit(): void {
+    // Medición inicial en el próximo frame para evitar ExpressionChanged y loops
+    this.raf(() => {
+      this.measureNow();
+      this.recalc();
+    });
+
+    // Observa alto del HOST y ancho visible del plot, throttled por rAF
+    this.ro = new ResizeObserver(() => {
+      this.raf(() => {
+        const changed = this.measureNow();
+        if (changed) this.recalc();
+      });
+    });
+    this.ro.observe(this.hostEl.nativeElement);
+    this.ro.observe(this.plotCtn.nativeElement);
+  }
+
+  ngOnDestroy(): void {
+    this.ro?.disconnect();
+    if (this.rafId !== null) cancelAnimationFrame(this.rafId);
+  }
+
+  ngOnChanges(): void {
+    // Cambios de @Input disparan recálculo
+    this.recalc();
+  }
+
+  // ========= Medición =========
+  /** Ejecuta una tarea en el próximo frame dentro de Angular */
+  private raf(fn: () => void) {
+    if (this.rafId !== null) cancelAnimationFrame(this.rafId);
+    this.rafId = requestAnimationFrame(() => this.zone.run(fn));
+  }
+
+  /** Mide alto del host y ancho visible del plot. Devuelve true si cambió algo. */
+  private measureNow(): boolean {
+    const hostH = Math.floor(this.hostEl.nativeElement.clientHeight || 0);
+    const paneH = hostH > 0 ? hostH : this.size;
+
+    const plotW = Math.floor(this.plotCtn?.nativeElement?.clientWidth || 0)
+               || (this.width - this.margin.left);
+
+    let changed = false;
+    if (paneH !== this._paneH()) { this._paneH.set(paneH); changed = true; }
+    if (plotW !== this._plotW()) { this._plotW.set(plotW); changed = true; }
+    return changed;
+  }
+
+  // ========= Layout & data =========
+  private recalc(): void {
+    const cleaned = (this.data ?? [])
+      .map(g => ({ label: g.label, items: (g.items ?? []).filter(i => Number(i?.value) >= 0) }))
+      .filter(x => x.items.length > 0);
+
+    const groups = cleaned.map(g => g.label);
+
+    // series + orden
+    const seriesSet = new Set<string>();
+    for (const g of cleaned) for (const it of g.items) seriesSet.add(it.label);
+    let series = Array.from(seriesSet);
+    if (this.seriesOrder?.length) {
+      const order = new Map(this.seriesOrder.map((k, idx) => [k, idx]));
+      series.sort((a, b) => (order.get(a) ?? 1e9) - (order.get(b) ?? 1e9));
+    }
+
+    // colores por serie
+    const palette = [
+      '#2167FF', // Info-500
+      '#0A2893', // Info-800
+      '#40CAE9', // Primary-400
+      '#5892FF', // Info-400
+      '#08A6DB', // Primary-500
+      '#C4DFFF', // Info-200
+    ];
+    const colorMap: SeriesColorMap = {};
+    series.forEach((s, i) => (colorMap[s] = palette[i % palette.length]));
+
+    // normalizar
+    const normalized = cleaned.map(g => {
+      const map = new Map(g.items.map(i => [i.label, i]));
+      const items = series.map(s => {
+        const i = map.get(s);
+        return { label: s, value: i?.value ?? 0, color: i?.color ?? colorMap[s] };
+      });
+      return { label: g.label, items };
+    });
+
+    // Y máx
+    const maxValue = Math.max(0, ...normalized.flatMap(g => g.items.map(i => i.value)));
+    const yMax = this.yMax && this.yMax > 0 ? this.yMax : this.niceMax(maxValue);
+    this._yMax.set(yMax);
+
+    // Dimensiones visibles del panel derecho
+    const visibleW = this._plotW() || (this.width - this.margin.left);
+
+    // ===== Layout X con outerGap =====
+    const G = normalized.length;
+    const S = series.length;
+    const groupInnerWidth = S * this.barWidth + Math.max(0, S - 1) * this.barGap;
+    const innerNaturalWidth =
+      Math.max(0, (this.outerGap * 2) + G * groupInnerWidth + Math.max(0, G - 1) * this.groupGap);
+
+    const innerVisibleWidth = Math.max(visibleW - this.margin.right, 0);
+    const innerVirtualWidth = Math.max(innerVisibleWidth, innerNaturalWidth);
+    const plotWidth = innerVirtualWidth + this.margin.right;
+    this._plotWidth.set(plotWidth);
+
+    // Construcción de barras + franjas
+    const ih = this.innerHeight();
+    const bars: BarRect[] = [];
+    const centers: number[] = [];
+    const stripes: BarStripe[] = [];
+
+    let cursor = this.outerGap;
+    normalized.forEach(g => {
+      const startX = cursor;
+      const center = startX + groupInnerWidth / 2;
+      centers.push(center);
+
+      g.items.forEach((it, si) => {
+        const x = startX + si * (this.barWidth + this.barGap);
+
+        stripes.push({ x, width: this.barWidth }); // franja por barra
+
+        const h = it.value <= 0 ? 0 : (it.value / yMax) * ih;
+        const y = this.margin.top + ih - h;
+        bars.push({
+          groupLabel: g.label,
+          seriesLabel: it.label,
+          value: it.value,
+          x, y, width: this.barWidth, height: h,
+          color: it.color ?? colorMap[it.label]
+        });
+      });
+
+      cursor += groupInnerWidth + this.groupGap;
+    });
+
+    this._bars.set(bars);
+    this._groups.set(groups);
+    this._series.set(series);
+    this._colors.set(colorMap);
+    this._groupCenters.set(centers);
+    this._barStripes.set(stripes);
+  }
+
+  // ========= Helpers =========
+  private niceMax(maxVal: number): number {
+    if (maxVal <= 0) return 1;
+    const exp = Math.floor(Math.log10(maxVal));
+    const base = Math.pow(10, exp);
+    const n = Math.ceil(maxVal / base);
+    const nice = n <= 2 ? 2 : n <= 5 ? 5 : 10;
+    return nice * base;
+  }
+
+  getY(value: number): number {
+    const ih = this.innerHeight();
+    const max = this.yScaleMax();
+    return this.margin.top + ih - (value / max) * ih;
+  }
+
+  get yTicksArr(): number[] {
+    const max = this.yScaleMax();
+    const n = Math.max(2, this.ticks | 0);
+    const step = max / n;
+    const arr: number[] = [];
+    for (let i = 0; i <= n; i++) arr.push(+((i * step)).toFixed(2));
+    return arr;
+  }
+
+  shortLabel(lbl: string): string {
+    return lbl.length > this.maxLabelChars ? (lbl.slice(0, this.maxLabelChars - 1) + '…') : lbl;
+  }
+
+  formatTooltip(b: BarRect): string {
+    return `${b.seriesLabel}: ${b.value}`;
+  }
+
+  onBarClick(b: BarRect) {
+    this.barClick.emit({ group: b.groupLabel, series: b.seriesLabel, value: b.value });
+  }
+}

package/src/lib/charts-bar-grouped/index.ts

@@ -0,0 +1,2 @@
+export * from './charts-bar-grouped.component';
+

package/src/lib/charts-donut/charts-donut.component.html

@@ -0,0 +1,57 @@
+<div class="donut-wrapper" [class.bottom]="legendPosition === 'bottom'">
+    <svg
+        class="donut"
+        role="img"
+        [attr.aria-label]="ariaLabel"
+        [attr.width]="size"
+        [attr.height]="size"
+        [attr.viewBox]="viewBox()">
+        <!-- pista -->
+        <circle
+        class="track"
+        [attr.cx]="size/2"
+        [attr.cy]="size/2"
+        [attr.r]="radius()"
+        [attr.stroke-width]="thickness"
+        ></circle>
+
+        <!-- slices como PATH (cada uno es su arco real) -->
+        @for (s of slices(); track s.label) {
+        <path
+            class="slice"
+            [attr.d]="s.pathD"
+            fill="none"
+            [attr.stroke]="s.color"
+            [attr.stroke-width]="thickness"
+            stroke-linecap="butt"
+            [iusPopoverContent]="getPopoverText(s)"
+            (click)="onSliceClick(s)"
+            tabindex="0"
+        >
+        </path>
+        }
+
+        <!-- centro -->
+        <g>
+            <text
+                [attr.x]="size/2"
+                [attr.y]="size/2"
+                text-anchor="middle"
+                alignment-baseline="middle"
+                class="center-text">
+                {{ centerLabel }}
+            </text>
+        </g>
+    </svg>
+
+    @if (showLegend && slices().length) {
+    <div class="legend scrollable-small" [class.bottom]="legendPosition === 'bottom'">
+      @for (s of slices(); track s.label) {
+        <div class="legend-item">
+          <span class="dot" [style.background]="s.color"></span>
+          <span class="label caption-sm" [iusPopoverContent]="s.value.toString() + ' - ' + s.label">{{s.value}} - {{s.label}}</span>
+        </div>
+      }
+    </div>
+    }
+</div>

package/src/lib/charts-donut/charts-donut.component.scss

@@ -0,0 +1,125 @@
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+@use "@litigiovirtual/ius-design-styles/lib/typography" as typography;
+@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
+@use "@litigiovirtual/ius-design-styles/lib/semantic-colors" as semantic-colors;
+
+:host {
+    display: block;
+    max-width: 100%;
+    height: 100%;
+}
+
+.donut-wrapper {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: 16px;
+    height: 100%;
+    align-items: stretch;
+
+    &.bottom {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+        row-gap: 12px;
+        align-items: stretch;
+    }
+}
+
+.donut {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    align-self: center;
+}
+
+.track {
+    fill: none;
+    stroke: #eef2f6;
+}
+
+.slice {
+    pointer-events: stroke;
+    cursor: pointer;
+    transition: opacity .15s ease, transform .15s ease;
+
+    &:focus {
+        outline: none;
+        filter: drop-shadow(0 0 2px rgba(0, 0, 0, .2));
+    }
+
+    &:hover {
+        opacity: .9;
+    }
+}
+
+.center-text {
+    fill: semantic-colors.$color-text-secundary-on-light;
+    font-family: typography.$font-secondary;
+    font-size: typography.$font-size-h3;
+    font-weight: 600;
+}
+
+.legend {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 8px;
+    padding-right: 4px;
+    min-width: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    align-self: stretch;
+    max-height: 100%;
+    min-height: 0;
+
+    &.bottom {
+        flex-direction: row;
+        flex-wrap: wrap;
+        overflow-y: auto;
+    }
+
+    .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+        white-space: nowrap;
+    }
+
+    .dot {
+        width: variables.$icon-size-xxs;
+        height: variables.$icon-size-xxs;
+        border-radius: variables.$radius-md;
+        flex: 0 0 variables.$icon-size-xxs;
+    }
+
+    .label {
+        color: semantic-colors.$color-text-secundary-on-light;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+
+.scrollable-small::-webkit-scrollbar {
+    -webkit-appearance: none;
+}
+
+.scrollable-small::-webkit-scrollbar:vertical {
+    width: variables.$spacing-xxs;
+    height: variables.$spacing-xl;
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.scrollable-small::-webkit-scrollbar:horizontal {
+    height: 5px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.scrollable-small::-webkit-scrollbar-thumb {
+    background-color: colors.$primary-500;
+    border-radius: variables.$radius-sm;
+}

package/src/lib/charts-donut/charts-donut.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartsDonutComponent } from './charts-donut.component';
+
+describe('ChartsDonutComponent', () => {
+  let component: ChartsDonutComponent;
+  let fixture: ComponentFixture<ChartsDonutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChartsDonutComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ChartsDonutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/charts-donut/charts-donut.component.ts

@@ -0,0 +1,148 @@
+import { Component, computed, EventEmitter, Input, Output, signal, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PopoverDirective } from '../directives/popover.directive';
+
+export type DonutData = { label: string; value: number; color?: string };
+
+type SliceComputed = DonutData & {
+  percentage: number;
+  pathD: string;   // path del arco
+  midX: number;    // punto medio del arco (por si se quiere anclar ahí)
+  midY: number;
+};
+
+@Component({
+  selector: 'ius-charts-donut',
+  standalone: true,
+  imports: [CommonModule, PopoverDirective],
+  templateUrl: './charts-donut.component.html',
+  styleUrls: ['./charts-donut.component.scss']
+})
+export class ChartsDonutComponent implements OnChanges {
+  @Input() data: DonutData[] = [];
+  @Input() size = 180;                 // width/height del SVG
+  @Input() thickness = 18;             // grosor del anillo
+  @Input() gapDegrees = 0;             // separación entre segmentos (grados)
+  @Input() showLegend = true;
+  @Input() legendPosition: 'right' | 'bottom' = 'right';
+  @Input() centerText?: string | number; // sobrescribe el texto central
+  @Input() sort = false;               // ordena segmentos por valor (desc)
+
+  @Output() sliceClick = new EventEmitter<DonutData>();
+
+  // señales para recalcular
+  private _slices = signal<SliceComputed[]>([]);
+  private _total = signal(0);
+  private _circ = signal(0);
+  private _radius = signal(0);
+
+  readonly slices = computed(() => this._slices());
+  readonly total = computed(() => this._total());
+  readonly radius = computed(() => this._radius());
+  readonly circumference = computed(() => this._circ());
+  readonly viewBox = computed(() => `0 0 ${this.size} ${this.size}`);
+
+  ngOnChanges(): void {
+    const cleaned = (this.data ?? []).filter(d => Number(d?.value) > 0);
+    const total = cleaned.reduce((a, b) => a + b.value, 0);
+
+    const radius = this.size / 2 - this.thickness / 2;
+    const circumference = 2 * Math.PI * radius;
+    this._radius.set(radius);
+    this._circ.set(circumference);
+
+    // sin datos válidos
+    if (total <= 0) {
+      this._slices.set([]);
+      this._total.set(0);
+      return;
+    }
+
+    // paleta (rota si no alcanza)
+    const palette = [
+      '#2167FF', // Info-500
+      '#0A2893', // Info-800
+      '#40CAE9', // Primary-400
+      '#5892FF', // Info-400
+      '#08A6DB', // Primary-500
+      '#C4DFFF', // Info-200
+    ];
+    let pIndex = 0;
+    const base = cleaned.map(d => ({
+      ...d,
+      color: d.color ?? palette[pIndex++ % palette.length]
+    }));
+
+    // orden opcional
+    const dataOrdered = this.sort ? [...base].sort((a, b) => b.value - a.value) : base;
+
+    // geometría angular
+    const cx = this.size / 2;
+    const cy = this.size / 2;
+    const n = dataOrdered.length;
+    const gap = Math.max(this.gapDegrees, 0);
+    const usefulDeg = Math.max(360 - n * gap, 0); // evita negativos
+
+    let current = -90; // arranca a las 12 en punto
+    const slices: SliceComputed[] = dataOrdered.map(d => {
+      const fraction = d.value / total;
+      const sweep = usefulDeg * fraction;
+
+      // dejamos medio gap antes y después del arco
+      const startDeg = current + gap / 2;
+      const endDeg = startDeg + sweep;
+
+      const pathD = this.arcPath(cx, cy, radius, startDeg, endDeg);
+      const midDeg = startDeg + sweep / 2;
+      const mid = this.polarToCartesian(cx, cy, radius, midDeg);
+
+      // avanza el cursor angular para el siguiente slice
+      current = endDeg + gap / 2;
+
+      return {
+        ...d,
+        percentage: +(fraction * 100).toFixed(2),
+        pathD,
+        midX: mid.x,
+        midY: mid.y
+      };
+    });
+
+    this._slices.set(slices);
+    this._total.set(total);
+  }
+
+  // === helpers de geometría ===
+  private polarToCartesian(cx: number, cy: number, r: number, deg: number) {
+    const rad = (deg * Math.PI) / 180;
+    return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+  }
+
+  private arcPath(cx: number, cy: number, r: number, startDeg: number, endDeg: number): string {
+    const start = this.polarToCartesian(cx, cy, r, startDeg);
+    const end = this.polarToCartesian(cx, cy, r, endDeg);
+    const sweep = endDeg - startDeg;
+    const largeArcFlag = sweep > 180 ? 1 : 0;
+    // arco horario (sweep-flag=1)
+    return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;
+  }
+
+  // eventos / utilidades
+  onSliceClick(s: SliceComputed) {
+    this.sliceClick.emit({ label: s.label, value: s.value, color: s.color });
+  }
+
+  get centerLabel(): string {
+    return `${this.centerText ?? this.total()}`;
+  }
+
+  getPopoverText(s: { label: string; value: number; percentage: number }): string {
+    return `${s.label}: ${s.value} (${s.percentage}%)`;
+  }
+
+  // accesibilidad: describe la dona
+  get ariaLabel(): string {
+    const parts = this.slices().map(s => `${s.label}: ${s.value} (${s.percentage}%)`);
+    return `Gráfica de dona. Total ${this.total()}. ${parts.join('. ')}`;
+  }
+}

package/src/lib/charts-donut/index.ts

@@ -0,0 +1,2 @@
+export * from './charts-donut.component';
+

package/src/lib/checkbox/checkbox.component.html

@@ -0,0 +1,9 @@
+<div class="container-general" (click)="onChecked()">
+  <div class="container-interno" [class.checked]="checked" [class.disabled]="disabled">
+    @if (checked) {
+    <ius-icon-md iconName="icon-check" class="icon"></ius-icon-md>
+    }@else{
+      <div class="icon-false"></div>
+    }
+  </div>
+</div>