Tabla dinámica
Una tabla dinámica convierte las filas de una consulta en una tabla cruzada: eliges los atributos que forman las filas y las columnas, y una agregación (un recuento, una suma, una media...) rellena cada celda. Debajo está la tabla dinámica real del cliente React de AWE, dibujada con react-pivottable. Los controles fijan cómo arranca; también puedes arrastrar los nombres de los atributos entre las filas y las columnas de la propia tabla, y elegir otra visualización o agregación desde sus menús.
<pivot-table id="demo"
rows="Region"
cols="Quarter"
renderer="Heatmap"
aggregator="Custom Sum"
aggregation-field="Revenue"
decimal-numbers="0"
initial-load="query"
target-action="Sales" />
- Atributos
- Eventos y acciones
- Referencia completa
Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD
| Atributo | Control | Valores |
|---|---|---|
rows | Filas | RegionProduct |
cols | Columnas | QuarterChannel |
renderer | Visualización | TableHeatmapRow HeatmapCol HeatmapTable Barchart |
aggregator | Agregación | CountCustom SumCustom AverageCustom MaximumSum as Fraction of Total |
aggregation-field | Campo a agregar | RevenueUnits |
| Acción (type) | Qué hace |
|---|---|
set-pivot-sorters | Fija el orden de los valores de un atributo (filas y columnas). |
set-pivot-group-rows | Cambia los atributos de las filas; set-pivot-group-cols lo hace con las columnas. |
filter | Recarga la tabla dinámica desde su consulta, con los criterios de la pantalla. |
En una pantalla, las filas vienen de una consulta (initial-load="query"). Aquí son 64 filas de ventas inventadas (región, producto,
canal, trimestre, unidades e ingresos). Los nombres de las visualizaciones y agregaciones son los de react-pivottable, en inglés.
Recetas
Mapa de calor de los ingresos
La visualización Heatmap pinta cada celda con un color que crece con su valor: las regiones y trimestres fuertes destacan de un vistazo.
<pivot-table id="revenue" rows="Region" cols="Quarter" renderer="Heatmap"
aggregator="Custom Sum" aggregation-field="Revenue"
decimal-numbers="0" initial-load="query" target-action="Sales" />
Reparto del total
Sum as Fraction of Total muestra cada celda como un porcentaje del total de la tabla. Las otras fracciones (de las filas, de las
columnas) están en el menú de agregaciones.
<pivot-table id="share" rows="Product" cols="Channel" renderer="Table"
aggregator="Sum as Fraction of Total" aggregation-field="Revenue"
decimal-numbers="0" initial-load="query" target-action="Sales" />
Barras dentro de la tabla
Table Barchart dibuja una barra detrás de cada número, a escala del mayor valor de su columna. Las agregaciones Custom * (Custom Sum,
Custom Average...) dan formato a sus números con decimal-numbers, thousand-separator y decimal-separator.
<pivot-table id="units" rows="Product" cols="Quarter" renderer="Table Barchart"
aggregator="Custom Sum" aggregation-field="Units"
decimal-numbers="0" initial-load="query" target-action="Sales" />
Eventos y acciones
La tabla dinámica no tiene eventos propios. Sus atributos (rows, cols, renderer, aggregator) son el punto de partida: lo que el lector
cambia en la tabla se conserva en el componente, y estas acciones lo cambian desde una pantalla.
set-pivot-sorters: fija el orden de los valores de un atributo.set-pivot-group-rows,set-pivot-group-cols: cambian los atributos que forman las filas y las columnas.filter: recarga la tabla desde su consulta. Es una acción de servidor: aquí no se simula.
Más
- Documentación completa de la tabla dinámica: cada atributo, las visualizaciones, las agregaciones y la parte de servidor.
- Referencia XSD del elemento
pivot-table.