PivotTable

Import

import { PivotTable } from '@pzeta/vue-components'

Esempio Base

Reportistica ferie/assenze: ore per reparto x (mese / tipo), con aggregazione commutabile e totali.

Props

Slots

Emits

PivotCellClickPayload

PivotMeasure

Elemento di measures. I campi opzionali ereditano le props di tabella corrispondenti.

Esempi

Drill-down al click sulla cella

L'evento cell-click restituisce i record sottostanti la cella aggregata, ideale per aprire un dettaglio o un drill-down.

Formattazione valori e dimensioni multiple su riga

valueFormatter permette di formattare i valori (es. come valuta) e rows/cols accettano piu' campi per creare gerarchie.

Misure multiple

Con measures più misure stanno affiancate nella stessa pivot: ogni tupla di colonna ha una colonna per misura, che diventa l'ultimo livello delle intestazioni. Ogni misura ha la sua aggregazione e il suo formato, e totali di riga, di colonna e generale sono calcolati per misura. Con cols: [] si ottiene semplicemente una colonna per misura.

• Le colonne di totale stanno sotto un gruppo "Totale" (l'etichetta di aggregateLabels se tutte le misure hanno la stessa aggregazione, altrimenti "Totali"); con cols: [] ogni colonna di totale indica misura e aggregazione, es. "Lead (Conteggio)"
• cell-click riporta in measure il campo della misura della colonna cliccata, e value è il valore di quella misura
• Il nome accessibile di ogni cella include la misura (es. "Web, T1, Valore: 16.500 €"); la caption predefinita elenca le misure con la loro aggregazione
• measure/aggregate restano validi per la misura singola: una pivot con un solo elemento in measures è identica a una con measure

Note Comportamento

• Le tuple di riga e colonna vengono ordinate con localeCompare (opzione numeric: true) secondo locale: i valori numerici espressi come stringa risultano ordinati in modo naturale
• L'indicizzazione dei record per (riga, colonna) avviene in un'unica passata su data ed e' reattiva: mutare la reference di data ricalcola il modello in modo efficiente
• Le intestazioni di colonna sono multi-livello: con piu' campi in cols ogni livello genera segmenti con colspan accorpati per prefisso comune
• I totali di riga, colonna e il totale generale sono calcolati sui record sottostanti (non come somma dei valori di cella), quindi restano coerenti anche con aggregate: 'avg'
• Con aggregate: 'count' il campo measure viene ignorato e si conta il numero di record per cella
• La prima colonna (dimensione-riga) e' sticky (position: sticky; left: 0); il contenitore va in overflow-x-auto su viewport stretti
• Lo stato "vuoto" viene mostrato quando data e' vuoto oppure non esistono tuple di colonna

TypeScript

import type {
  PivotTableProps,
  PivotAggregate,
  PivotMeasure,
  PivotCellClickPayload,
} from '@pzeta/vue-components'

const misure: PivotMeasure[] = [
  { field: 'ore', label: 'Ore', aggregate: 'sum' },
  { field: 'ore', label: 'Richieste', aggregate: 'count' },
]

interface RigaAssenza {
  reparto: string
  mese: string
  tipo: string
  ore: number
}

const aggregate: PivotAggregate = 'sum'

const onCellClick = (payload: PivotCellClickPayload) => {
  const righe = payload.records as RigaAssenza[]
  console.log('drill-down', payload.value, righe.length)
}

Quando usarlo

• Reportistica tabellare con aggregazione per due assi (es. reparto x mese, area x anno)
• Riepiloghi con totali di riga/colonna e totale generale
• Analisi rapida di dataset piatti senza ricorrere a una libreria BI esterna
• Drill-down dalle celle aggregate ai record sorgente

Per casi diversi:

• Mappa di densita' a calendario (valore per giorno) -> HeatmapCalendar
• Griglia risorsa x giorno con eventi -> WeekScheduler
• Tabella dati interattiva (ordinamento, paginazione, selezione) -> DataTable (categoria data)