EMPIEZA AQUÍ
Primeros pasos
ARQUITECTURA
Visión general de la arquitectura
Componentes write-once
Superficie declarativa
Arquitectura de paquetes
Componentes
Estilos
Localización
Analytics y GTM
WRITE-ONCE
Almacenamiento
Formularios
Markdown
Mermaid
Renderizado de email
COMPILACIÓN
Resolución de tipos externos
RUNTIME
Runtime (TypeScript)
Rendimiento
SERVIDOR
Assets
BunPackage
Seguridad
ECOSISTEMA
Image
Gráficos
Lottie
DESARROLLO
Roadmap
DocsEcosistema
GráficosEdit this page
5 min readUn gráfico en eQuantic.UI es UN componente escrito en C#. El mismo BarChart se renderiza en la web (en el servidor y en el navegador) y en Photon (escritorio y móvil), desde el mismo código, en los colores que el tema reserva para los datos. La biblioteca es eQuantic.UI.Charts, y el SDK la pone al alcance en todos los proyectos igual que hace con eQuantic.UI.Components: no hay nada que instalar ni ningún using que escribir.
Desde 0.2.0-preview.50
El gráfico de barras
1
2
3
4
5
6
7
8
9
10
11
BarChart(
title: "Revenue by quarter",
subtitle: "Three regions, side by side",
series:
[
ChartSeries("Europe", [120_000, 138_500, 149_200, 171_000]),
ChartSeries("Americas", [98_400, 104_900, 99_700, 132_300]),
ChartSeries("Asia", [61_200, 72_800, 88_100, 95_500]),
],
categories: CategoryAxis(["Q1", "Q2", "Q3", "Q4"]),
values: ValueAxis(format: "C0", title: "Revenue"))
Las factories son la superficie declarativa: cada una se llama como su tipo y refleja su constructor parámetro por parámetro (BarChart, ChartSeries, CategoryAxis, ValueAxis), así que un dashboard se lee sin un solo new.
Tres disposiciones, un componente:
quieres
escribes
grupos uno al lado del otro (lo de por defecto)
layout: BarLayout.Grouped
una serie encima de otra
layout: BarLayout.Stacked
barras que corren de izquierda a derecha, para nombres de categoría largos
orientation: ChartOrientation.Horizontal
plotHeight fija el alto del área de trazado sola; el ancho es el que se le dé al gráfico, y las barras lo llenan.
Lo que cada gráfico trae sin que se le pida:
•
Una leyenda cuando hay más de una serie. Pulsar una entrada aísla esa serie; pulsarla otra vez trae de vuelta las demás. Una sola serie no muestra leyenda, porque el título ya la nombra.
•
Un tooltip que sigue al puntero y nombra la categoría, la serie y el valor.
•
Una vista en tabla. El Ver como tabla del pie cambia el trazado por un DataTable con los mismos números, y Ver como gráfico lo devuelve: los mismos datos para un lector de pantalla, un teclado, o quien quiera las cifras.
•
Rótulos de eje a partir de tus datos: las categorías debajo (o al lado) del trazado, los valores en ticks limpios. ValueAxis(format: "C0") formatea cada rótulo de valor y cada celda de la tabla con una format string de .NET en la cultura actual: el mismo "C0" imprime €120,000 en una petición y R$ 120.000 en la siguiente. min, max y ticks fijan el eje cuando prefieres que no siga a los datos.
•
Un nombre accesible: el canvas lleva el título del gráfico, así que el trazado se anuncia como lo que es.
El color viene del tema
Un gráfico nunca declara un color. IAppTheme.Data es una DataPalette con ocho slots de serie, rampas secuencial y divergente, y cuatro pasos de estado, auditada para el contraste y para las deficiencias de visión del color: la paleta por defecto sale auditada, y la tuya se puede comprobar igual con PaletteAudit. Las reglas se sostienen por construcción y no por consejo:
•
La primera serie viste el slot 0, la segunda el slot 1, y así; ChartSeries("Forecast", values, slot: 3) fija una serie a un slot para que conserve su color entre gráficos.
•
Una novena serie lanza en el build. Ocho colores distinguibles es donde la auditoría se detiene; un gráfico con más series es una tabla.
•
Los colores de estado están reservados para el estado. Una serie que SIGNIFICA bueno o malo viste estado; "la serie 4" nunca.
•
El texto nunca viste un color de datos: los rótulos, las entradas de leyenda y los tooltips se leen en los tokens de texto del tema, y la muestra que está a su lado lleva el color.
Cambiar la marca de los colores de datos es proveer tu propio Data en tu tema, exactamente como provees Primary.
Cómo se renderiza
El chrome del gráfico (título, subtítulo, leyenda, rótulos de eje, la tabla, el pie) son nodos corrientes (Text, Row, Column, DataTable), así que se maqueta, envuelve, tematiza y habla con la tecnología de apoyo como el resto de tu pantalla. Las marcas son un Canvas pintado con las formas propias del motor: rectángulos redondeados en el SVG de la web, los mismos rectángulos en la GPU de Photon.
En la web el chrome se renderiza en el servidor como el resto de tu página, y las marcas se dibujan en el momento en que el trazado ha sido medido: un canvas que llena su caja no tiene tamaño hasta que el CSS lo ha maquetado, así que el servidor emite el marco y el navegador pinta dentro.
La geometría se resuelve una vez, en BarChartLayout: C# en el servidor y en Photon, su gemelo transpilado en el navegador. Un fixture fijado, resuelto por las dos compilaciones, se compara línea por línea en las suites de pruebas, así que una barra que las dos colocarían a una décima de dp de distancia falla el build. Los valores de los ticks se ajustan a 1, 2, 5 y 10 por multiplicación en lugar de por logaritmos por la misma razón: los dos runtimes tienen que coincidir en cada tick.
Lo que viene
El gráfico de barras es la primera porción de un plan que alcanza los tipos de gráfico que cubrían los wrappers de abajo: línea, área y sparklines con un eje de tiempo; tarta, dona, indicador, mapa de calor y dispersión; radar y velas, anotaciones, animación y exportación a través de una capacidad. El plan vive en el repositorio como docs/CHARTS-PLAN.md, con lo que entrega cada porción y lo que está vallado a propósito (los ejes duales, el 3D y los embudos entre ellos).
Wrappers, para la transición
Dos wrappers solo de web alrededor de bibliotecas de JavaScript preceden a la biblioteca nativa y siguen disponibles hasta que ella cubra sus tipos de gráfico, momento en el que se retiran:
•
eQuantic.UI.Charts.ChartJs, Chart.js en canvas HTML5: bar, line, pie, doughnut, radar.
•
eQuantic.UI.Charts.ApexCharts, ApexCharts en SVG: area, bar, line, heatmap, candlestick.
Son paquetes opt-in, solo de web (no renderizan nada en Photon), y toman la configuración propia de la biblioteca como clases de C# que reflejan su API de JavaScript:
1
dotnet add package eQuantic.UI.Charts.ApexCharts
1
2
3
4
5
builder.Services.AddUI(options =>
{
options.UseApexCharts() // o UseChartJs(); cada uno sirve los scripts de su biblioteca
.ScanAssembly(typeof(Program).Assembly);
});
1
2
3
4
5
new ApexChart<MyData>
{
Options = new ApexOptions { Chart = new ChartConfig { Type = "bar" } },
Series = [new ApexSeries<MyData> { Name = "Sales", Data = dataList }],
}
Sus scripts se declaran a través del sistema de assets y se inyectan donde una página los usa; nada se añade a mano. Una página que solo necesita un gráfico de barras debería usar el BarChart de arriba: se renderiza en todos los destinos, y es el que se queda.