Mettre vos données en graphique

La bibliothèque Blotch propose des graphiques prêts à l’emploi pour lire des chiffres d’un coup d’œil. Ils sont dessinés en noir et blanc et distinguent les séries par des tirets et des motifs de remplissage plutôt que par des couleurs, si bien qu’ils restent lisibles sur un écran à encre électronique (e-ink). Ils passent d’eux-mêmes en clair sur fond sombre lorsque le cadre utilise son thème sombre.

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

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

Chaque graphique s’importe depuis ~lib/charts/<name>.

Choisir un graphique

Graphique	Idéal pour
LineChart	Une évolution dans le temps, sous forme de ligne.
AreaChart	Une ligne dont la zone en dessous est remplie.
BarChart	Comparer des valeurs côte à côte, à la verticale ou à l’horizontale.
Sparkline	Une petite courbe de tendance sans axes, à placer à côté d’un nombre.
BarIndicator	Où en est un nombre par rapport à un autre, comme l’espace de stockage utilisé.
DonutGauge	Un nombre en proportion d’un autre, sous forme d’anneau, comme le niveau de batterie.
PieChart	Les parts d’un tout.
TreeMap	Les parts d’un tout, sous forme de rectangles imbriqués dont la taille suit la valeur.
CandlestickChart	Les cours d’ouverture, le plus haut, le plus bas et le cours de clôture.
ScatterPlot	Des points isolés, sans ligne pour les relier.
Heatmap	Une intensité sur une grille, comme l’activité par jour.
ContributionGrid	Une année d’activité, un carré par jour.
FunnelChart	Des étapes qui se resserrent, comme des inscriptions qui deviennent des clients.
RadarChart	Comparer plusieurs mesures à la fois.
SankeyChart	Des quantités qui circulent d’un endroit à un autre.
SurfaceChart	Une surface 3D de valeurs sur une grille.

La page de chaque graphique dans la référence liste ses props, avec des exemples.

Représenter des données récupérées

Les graphiques prennent de simples tableaux : transformez donc la réponse de l’API en tableau avec map. Comme useFetch attend les données avant le rendu de votre widget, il n’y a rien à vérifier au préalable :

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

Dimensions

width et height acceptent un nombre de pixels (200) ou n’importe quelle taille CSS ("100%", "12rem"). Pour qu’un graphique remplisse l’espace qui lui est donné, réglez les deux sur "100%" : il garde ainsi une bonne apparence quand le widget est redimensionné.

Un graphique réglé sur "100%" remplit aussi sa zone dans chaque aperçu de votre widget. Les lignes, les aires et les barres s’étirent jusqu’aux bords de la zone, tandis que le texte, les points et les motifs gardent la même taille. Les graphiques ronds, comme PieChart et DonutGauge, gardent plutôt leur forme et grandissent ou rétrécissent pour tenir dans la zone.