Representar tus datos en gráficos

La biblioteca Blotch tiene gráficos listos para usar que muestran cifras de un vistazo. Se dibujan en blanco y negro y distinguen las series con trazos discontinuos y patrones de relleno en lugar de colores, así que se leen bien en tinta electrónica (e-ink). Cambian solos a claro sobre oscuro cuando el marco usa su tema oscuro.

import { LineChart } from "~lib/charts/line-chart";

export const Widget = () => <LineChart data={[12, 18, 15, 22, 30]} />;

Todos los gráficos se importan desde ~lib/charts/<name>.

Elegir un gráfico

Gráfico	Ideal para
LineChart	Tendencias a lo largo del tiempo, como una línea.
AreaChart	Una línea con el área de debajo rellena.
BarChart	Comparar valores uno junto a otro, en vertical o en horizontal.
Sparkline	Una pequeña línea de tendencia sin ejes, para ponerla junto a una cifra.
BarIndicator	Cuánto se acerca una cifra a otra, como el almacenamiento usado.
DonutGauge	Una cifra como parte de otra, en forma de anillo, como el nivel de batería.
PieChart	Las partes de un todo.
TreeMap	Las partes de un todo, como rectángulos anidados con un tamaño según su valor.
CandlestickChart	Precios de apertura, máximo, mínimo y cierre.
ScatterPlot	Puntos sueltos, sin una línea que los una.
Heatmap	La intensidad en una cuadrícula, como la actividad por día.
ContributionGrid	Un año de actividad, con un cuadrado por día.
FunnelChart	Etapas que se van estrechando, como registros que acaban siendo clientes.
RadarChart	Comparar varias medidas a la vez.
SankeyChart	Cantidades que fluyen de un sitio a otro.
SurfaceChart	Una superficie 3D de valores sobre una cuadrícula.

La página de cada uno en la referencia enumera sus props, con ejemplos.

Representar datos obtenidos

Los gráficos aceptan arrays sencillos, así que convierte la respuesta de la API en uno con map. Como useFetch espera a los datos antes de que se renderice tu widget, no hay nada que comprobar antes:

import { LineChart } from "~lib/charts/line-chart";
import { useFetch } from "~lib/use-fetch";

type Reading = {
  readonly time: string;
  readonly temperature: number;
};

export const Widget = () => {
  const { data } = useFetch<Reading[]>("https://api.example.com/readings");

  return (
    <LineChart
      data={data.map((reading): [Date, number] => [
        new Date(reading.time),
        reading.temperature,
      ])}
      axis={{ x: { visible: true }, y: { visible: true, name: "°C" } }}
      width="100%"
      height="100%"
    />
  );
};

Tamaño

width y height aceptan un número de píxeles (200) o cualquier tamaño de CSS ("100%", "12rem"). Para que un gráfico ocupe todo el espacio que se le da, pon los dos a "100%": así seguirá viéndose bien cuando cambie el tamaño del widget.

Un gráfico a "100%" también ocupa todo su recuadro en cada vista previa de tu widget. Las líneas, las áreas y las barras se estiran hasta llenar el recuadro, mientras que el texto, los puntos y los patrones mantienen su tamaño. Los gráficos redondos, como PieChart y DonutGauge, en cambio, conservan su forma y crecen o encogen para caber.