Mostrare i dati in un grafico

La libreria Blotch ha grafici pronti per mostrare i numeri a colpo d’occhio. Sono disegnati in bianco e nero e distinguono le serie con tratteggi e motivi di riempimento invece che con i colori, così restano leggibili sull’inchiostro elettronico (e-ink). Passano da soli al chiaro su scuro quando la cornice usa il tema scuro.

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

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

Ogni grafico si importa da ~lib/charts/<name>.

Scegliere un grafico

Grafico	Ideale per
LineChart	Andamenti nel tempo, come linea.
AreaChart	Una linea con l’area sottostante riempita.
BarChart	Confrontare valori fianco a fianco, in verticale o in orizzontale.
Sparkline	Una piccola linea di tendenza senza assi, da affiancare a un numero.
BarIndicator	Quanto un numero si avvicina a un altro, come lo spazio di archiviazione usato.
DonutGauge	Un numero come quota di un altro, in forma di anello, come il livello della batteria.
PieChart	Le parti di un intero.
TreeMap	Le parti di un intero, come rettangoli annidati proporzionati al valore.
CandlestickChart	Prezzi di apertura, massimo, minimo e chiusura.
ScatterPlot	Punti singoli, senza una linea che li unisca.
Heatmap	L’intensità su una griglia, come l’attività di ogni giorno.
ContributionGrid	Un anno di attività, un quadratino per ogni giorno.
FunnelChart	Fasi che si restringono, come le iscrizioni che diventano clienti.
RadarChart	Confrontare più misure insieme.
SankeyChart	Quantità che scorrono da un punto all’altro.
SurfaceChart	Una superficie 3D di valori su una griglia.

La pagina di ciascuno nel riferimento ne elenca le props, con degli esempi.

Rappresentare i dati recuperati

I grafici accettano semplici array, quindi trasforma la risposta dell’API in un array con map. Poiché useFetch attende i dati prima che il widget venga renderizzato, non c’è nulla da controllare prima:

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%"
    />
  );
};

Dimensioni

width e height accettano un numero di pixel (200) o qualsiasi dimensione CSS ("100%", "12rem"). Perché un grafico riempia lo spazio che gli viene dato, imposta entrambi a "100%": così resta corretto quando il widget viene ridimensionato.

Un grafico impostato a "100%" riempie il suo riquadro anche in ogni anteprima del widget. Linee, aree e barre si allungano fino ai bordi del riquadro, mentre testo, punti e motivi mantengono le stesse dimensioni. I grafici circolari, come PieChart e DonutGauge, mantengono invece la loro forma e si ingrandiscono o si rimpiccioliscono per starci.