Gráficos y tablas de datos
El caso especial del ecosistema: cochid vive de mostrar datos. Esta página fija cómo se dibuja un gráfico y cómo se compone una tabla de datos para que las veinte superficies de datos se vean como una sola casa.
El componente de gráficos: cis-chart
cochid-graphs (graphs.cochid.cl · API :8194 · web :8294)
es el servicio de la casa para series. El elemento
<cis-chart> viene de
graphs.min.js (v0.1) y consume el esquema JSON
{"series":[{"data":[{"x":..,"y":..}]}]}. Un sitio no
dibuja con su propia librería: le pide la serie a graphs y la incrusta.
<script src="https://style.innovacionsantiago.cl/v6/graphs.min.js"></script> <cis-chart src="https://graphs.cochid.cl/api/serie/ipc-2026"></cis-chart>
Contrato: core-style (cis-graphs) → dashboards y portales · schema v1.0 Estado: v0.1, parcial. El permalink va en el hash de la URL.
Reglas de un gráfico de la casa
1 · Un eje. Nunca dos escalas en el mismo gráfico: dos medidas de
escala distinta son dos gráficos o una base común.
2 · El color sigue a la entidad, no al rango. Si un filtro cambia cuántas series hay, las que quedan no se repintan.
3 · Identidad nunca solo por color: con dos o más series hay leyenda, y hasta cuatro llevan etiqueta directa.
4 · Toda cifra medida declara cuándo y con qué se midió (sello de frescura, regla de la casa).
5 · Texto en tokens de texto: los valores y las leyendas van en tinta, no en el color de la serie.
2 · El color sigue a la entidad, no al rango. Si un filtro cambia cuántas series hay, las que quedan no se repintan.
3 · Identidad nunca solo por color: con dos o más series hay leyenda, y hasta cuatro llevan etiqueta directa.
4 · Toda cifra medida declara cuándo y con qué se midió (sello de frescura, regla de la casa).
5 · Texto en tokens de texto: los valores y las leyendas van en tinta, no en el color de la serie.
Barras de proporción en HTML puro
Para un reparto simple no hace falta librería: dos tintes del kit y etiqueta directa. Es el patrón del manual de operación.
DISCO / · 464 GB
usado 86 % · libre 14 %
<div class=barra> <i style="width:86%;background:var(--ink)"></i> <i style="width:14%;background:var(--line)"></i> </div>
Tablas de datos cochid
La tabla de datos es EL componente de cochid. Tres reglas la distinguen de una tabla cualquiera:
| Región | Ejecución 2024 | Δ anual | Fuente |
|---|---|---|---|
| Metropolitana | 1.215.716 | +4,2 % | DIPRES |
| Valparaíso | 184.528 | −1,1 % | DIPRES |
| Biobío | 121.033 | +0,8 % | DIPRES |
1 · números a la derecha y en mono (class=num) 2 · la fuente es una columna, no una nota al pie 3 · miles con punto y decimales con coma (es-CL), sin excepciones
Dónde está cada pieza
| Pieza | Dónde | Estado |
|---|---|---|
| cochid-graphs · API de series | graphs.cochid.cl · :8194 | en línea |
| cochid-graphs · web | :8294 | en línea |
| graphs.min.js · cis-chart | style.innovacionsantiago.cl/v6/graphs.min.js | v0.1 · aún en v6, migrar a v9 |
| El lago que alimenta todo | cochid-datos · :8191 | en línea |
Fuentes: cis/CONTRACTS.md (fila cis-graphs) · el mapa de operación, capítulo de topología · la guía de visualización de la casa (identidad por tinte y etiqueta, un eje, color por entidad).