Tiles personalizados

Cuando los tipos de tile integrados no encajan con el visual que quiere, Saiku incluye renderizadores personalizados que llegan más lejos sin dejar de ser seguros. Todos son declarativos — describe el resultado con datos, no con código.

Cada renderizador aparece como su propia entrada en el menú + Añadir tile (bajo «Custom»). Al elegir uno se coloca un tile ya vinculado a ese renderizador; luego lo configura en el editor ⚙ del tile igual que cualquier otro — elija un cubo, construya una consulta y aporte la configuración del renderizador.

Nota

Los renderizadores personalizados se habilitan por despliegue. Si el menú «+ Añadir tile» muestra «No custom renderers installed», su Saiku no los tiene registrados — pregunte a su administrador.

Tile de lista rankeada

El renderizador Lista rankeada dibuja la tarjeta de «movers» que quiere casi todo dashboard de operaciones: una serie numerada de filas, cada una con una etiqueta y un valor, con el valor coloreado según suba o baje.

Vincúlelo a una consulta que devuelva una columna de etiqueta y una columna de valor, y luego configure:

Campo	Significado
Subtítulo	Una línea atenuada bajo el título del tile («Product department · MoM»)
Columna de etiqueta	En blanco = inferida (vea abajo)
Columna de valor	En blanco = inferida (vea abajo)
Formato de valor	Patrón de visualización opcional — $c1 → $27.4M. En blanco mantiene el formato del propio cubo
Filas	Cuántas mostrar (6 por defecto)
Orden	Mantener el orden de la consulta, mayor primero o menor primero
Color del valor	Por signo (arriba verde / abajo rojo) o plano
Mostrar números de rango	El 1, 2, 3… inicial

Dejadas en blanco, las columnas se infieren estructuralmente: el valor es la primera columna de medida del resultado y la etiqueta es lo que queda. Eso se sostiene incluso cuando las captions de una dimensión parecen números — un decil de prescriptores (10.0), un año, un número de tienda — que es justo donde adivinar por el texto lo entendería al revés.

Formato de valor toma el mismo vocabulario de patrones que el tile KPI y el eje de valores de ECharts: $cN moneda compacta, $N moneda simple, N% porcentaje, N dígitos decimales. Merece la pena en cualquier medida monetaria — una tarjeta top-N de filas en crudo $27,432,535.99 cuesta de leer.

La ordenación ocurre antes del límite de filas, así que «mayor primero, 3 filas» es de verdad el top tres de todo el resultado y no las tres primeras reordenadas. Colores y tipografía siguen el tema de la App — sin CSS.

Consejo

Esta tarjeta se construía antes dando estilo a un tile de Tabla con CSS personalizado. No lo haga — un tile de lista rankeada se re-tematiza con la App, no choca con otras tablas de la página y es editable por quien herede su App.

Tile de option de ECharts

El renderizador ECharts option le deja crear un gráfico escribiendo directamente un objeto option de ECharts. Es la salida de emergencia para formas que el tile de Gráfico integrado no expone — disposiciones de eje a medida, variantes rose, mapas visuales inusuales y demás.

Precaución

Mire antes El tile de Gráfico. Radar, dispersión, treemap, sunburst, heatmap y cascada son todos tipos de gráfico integrados, y ejes duales, series combo, líneas de tendencia, Top N, formato numérico y líneas de referencia son todos opciones integradas. Recurrir a una option escrita a mano para conseguir una de ésas le cuesta la herencia del tema, el formato condicional y — sobre todo — la capacidad de quien herede su App de cambiarlo sin editar JSON.

Como su option se entrega a una librería de gráficos viva, se valida contra un subconjunto seguro antes de renderizar siquiera. Las reglas, aplicadas a cualquier profundidad del objeto:

• Sin valores de función. ECharts llama cosas como formatter como funciones con datos y DOM vivos, así que cualquier función en cualquier parte de la option se rechaza. (El JSON puro no puede expresar una función; la comprobación protege de que un objeto vivo cuele una.)

• Sin URLs remotas. http(s): de otro origen, //host relativo al protocolo, destinos url(...) que apunten fuera del origen y URIs data: que no sean imágenes se rechazan todos — son vectores de exfiltración / SSRF. Queda lo del mismo origen y las referencias relativas, más imágenes data: solo en PNG, JPEG, GIF o WebP.

  Note que SVG no está en esa lista, ni siquiera como imagen data:. Un SVG puede llevar script, así que se excluye a propósito — use una exportación ráster si necesita un icono en línea.

• Solo claves de la allowlist. Se aceptan únicamente claves de primer nivel curadas (title, grid, xAxis, yAxis, series, legend, tooltip, color, backgroundColor, visualMap, radar, polar y un puñado más) y un conjunto curado de campos por series. Cualquier cosa fuera de la allowlist se rechaza en vez de descartarse en silencio — el validador falla cerrado.

Si su option viola alguna regla, el tile muestra un error de validación en lugar de renderizar, para que pueda arreglarlo. La consulta que vincula aporta los datos (categorías + series) que la option dibuja.

Primero el tema, después la option

Su option se superpone sobre la línea base tematizada de la App. Lo que ella afirme gana; lo que deje sin decir — color del título, color de las etiquetas de eje, líneas de rejilla, la paleta de series — se hereda del tema.

Escriba solo las partes que sean genuinamente a medida. Una option llena de hexadecimales fijos se ve idéntica el primer día y deja de casar con la App la primera vez que alguien cambia de preset.

Nota

Los componentes se decoran, nunca se introducen. En ECharts, mencionar un componente lo enciende — así que la línea base solo da estilo a una leyenda, un tooltip o un eje si su option ya declara uno. A un gráfico de tarta no le salen ejes porque el tema tenga opiniones sobre ellos.

Formatear el eje de valores

Como las funciones se rechazan, no puede formatear un eje a la manera habitual de ECharts — axisLabel.formatter tendría que ser una función. En su lugar, el editor tiene un campo Formato del eje de valores que toma el mismo patrón que usa el tile KPI:

Patrón	Renderiza
$c0	$149K — moneda compacta
$c1	$48.2K
$2	$99.50
1%	15.6%
0	1,234

Se aplica a cada eje type: "value" y se compila en tiempo de render, así que usted nunca aporta código y la regla de sin-funciones sigue siendo absoluta. Los ejes de categoría se dejan en paz — una plantilla de cadena como "W{value}" en su option sigue funcionando ahí, porque eso es declarativo.

Tile de grafo

El renderizador Grafo convierte los registros de una consulta en un grafo de nodos y aristas — un árbol de propiedad, un mapa de relaciones, un flujo entre entidades. En lugar de un objeto option, le da un mapeo de columnas: qué columnas de su resultado son los extremos, ids, etiquetas y pesos.

Campo	Obligatorio	Significado
sourceCol	sí	Columna con el extremo origen de cada fila
targetCol	sí	Columna con el extremo destino de cada fila
idCol	sí	Columna con el id canónico de un nodo (para que una etiqueta se enganche al nodo correcto). Para una lista de aristas simple, póngala igual que sourceCol
labelCol	no	Columna con un nombre legible para el nodo de idCol
valueCol	no	Columna numérica que se lleva a cada arista y se suma al peso del nodo
layout	no	force (por defecto) o circular

Cada fila se vuelve una arista dirigida origen → destino; los nodos se recogen de cada extremo y se deduplican por id. Las filas a las que les falta un extremo se saltan. Cuando fija valueCol, su valor pesa tanto la arista como sus nodos extremos — el tamaño del nodo se escala relativo a los pesos de ese grafo, así que el nodo más pesado siempre llega al tope de la banda de tamaños, sean cuales sean las unidades de la medida. Un peso cero o negativo es el nodo más ligero, no uno sin peso.

Configurar un tile personalizado

El flujo es el mismo para todos:

1. + Añadir tile → Ranked list (o ECharts option, o Graph).
2. Abra el editor ⚙ del tile.
3. Vincule una consulta — elija el cubo y construya la consulta cuyo resultado alimenta el tile.
4. Aporte la configuración — los campos de la lista rankeada, el objeto option de ECharts o el mapeo de columnas del grafo.
5. Guarde. Una configuración inválida sale como error en línea en vez de un render roto.

Relacionado

• Construir páginas y tiles — los tipos de tile integrados y cómo funciona la vinculación.
• El tile de Gráfico — mire aquí antes de escribir una option de ECharts a mano.
• Plugins — el tile avanzado, instalado por el administrador, con JS en sandbox para widgets totalmente a medida.