SnkPieChart

import { Component, signal } from '@angular/core'; import { SnkPieChart, SnkPieData } from 'snk-pie-chart'

@Component({ selector: 'app-pie-chart', standalone: true, imports: [SnkPieChart], template: `

  <h2>1. Gráfica de Pie Clásica (Corporate)</h2>
  <snk-pie-chart
    [data]="ventasData"
    orientation="pie"
    theme="corporate"
    [animated]="true"
    (barClick)="onSliceSelected($event)">
  </snk-pie-chart>

  <h2>2. Gráfica Donut (Dark Mode + Filtros en Vivo)</h2>
  <div style="margin-bottom: 1rem;">
    <button (click)="changeDataset('2025')">Ver 2025</button>
    <button (click)="changeDataset('2026')">Ver 2026</button>
  </div>
  
  <snk-pie-chart
    [data]="dynamicData()"
    orientation="donut"
    theme="dark"
    legendPosition="right"
    (barClick)="onSliceSelected($event)">
  </snk-pie-chart>

  <h2>3. Gráfica Triángulo (Drill Down)</h2>
  <snk-pie-chart
    [data]="drillDownData()"
    orientation="donut"
    theme="light"
    (barClick)="handleDrillDown($event)">
  </snk-pie-chart>
  
</div>

` }) export class PruebaPieChart {

// 1. Data Base ventasData: SnkPieData[] = [ { label: 'Enero', value: 120, metadata: { status: 'Cerrado' } }, { label: 'Febrero', value: 300, metadata: { status: 'Proyectado' } }, { label: 'Marzo', value: 220, metadata: { status: 'Auditado' } } ];

// 2. Data para Filtros en vivo (Signals) dynamicData = signal<SnkPieData[]>([ { label: 'Ventas Q1 2025', value: 450 }, { label: 'Ventas Q2 2025', value: 800 } ]);

changeDataset(year: string) { if (year === '2026') { this.dynamicData.set([ { label: 'Ventas Q1 2026', value: 600, color: '#10b981' }, { label: 'Ventas Q2 2026', value: 950, color: '#3b82f6' }, { label: 'Ventas Q3 2026', value: 400, color: '#f59e0b' } ]); } else { this.dynamicData.set([ { label: 'Ventas Q1 2025', value: 450 }, { label: 'Ventas Q2 2025', value: 800 } ]); } }

// 3. Drill Down Logic drillDownData = signal<SnkPieData[]>([ { label: 'Ingeniería', value: 1500, metadata: { isRoot: true } }, { label: 'Medicina', value: 900, metadata: { isRoot: true } } ]);

handleDrillDown(event: any) { console.log('Drill Down Object:', event);

// Si hace clic en Ingeniería, baja de nivel a Carreras
if (event.label === 'Ingeniería') {
  this.drillDownData.set([
    { label: 'Sistemas', value: 800 },
    { label: 'Civil', value: 400 },
    { label: 'Mecánica', value: 300 }
  ]);
}

}

onSliceSelected(event: any) { alert(Seleccionaste: ${event.label} - Valor: $${event.value}); } }