Daten als Diagramm darstellen

Die Blotch-Bibliothek hat fertige Diagramme, mit denen Sie Zahlen auf einen Blick zeigen. Sie werden in Schwarz-Weiß gezeichnet und unterscheiden Datenreihen durch Strichelungen und Füllmuster statt durch Farben, damit sie auf E-Ink gut lesbar bleiben. Nutzt der Rahmen sein dunkles Design, wechseln sie von selbst zu hell auf dunkel.

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

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

Jedes Diagramm wird aus ~lib/charts/<name> importiert.

Ein Diagramm wählen

Diagramm	Geeignet für
LineChart	Verläufe über die Zeit, als Linie.
AreaChart	Eine Linie mit gefüllter Fläche darunter.
BarChart	Werte nebeneinander vergleichen, stehend oder liegend.
Sparkline	Eine winzige Trendlinie ohne Achsen, die neben einer Zahl steht.
BarIndicator	Wie weit eine Zahl an eine andere heranreicht, etwa der belegte Speicher.
DonutGauge	Eine Zahl als Anteil einer anderen, als Ring, etwa der Akkustand.
PieChart	Teile eines Ganzen.
TreeMap	Teile eines Ganzen, als verschachtelte Rechtecke, deren Größe dem Wert entspricht.
CandlestickChart	Eröffnungs-, Höchst-, Tiefst- und Schlusskurse.
ScatterPlot	Einzelne Punkte, ohne verbindende Linie.
Heatmap	Intensität über ein Raster, etwa die Aktivität pro Tag.
ContributionGrid	Ein Jahr Aktivität, ein Quadrat pro Tag.
FunnelChart	Stufen, die schmaler werden, etwa Registrierungen, aus denen Kunden werden.
RadarChart	Mehrere Messgrößen auf einmal vergleichen.
SankeyChart	Mengen, die von einer Stelle zu einer anderen fließen.
SurfaceChart	Eine 3D-Fläche aus Werten über einem Raster.

Auf der Seite jedes Diagramms in der Referenz finden Sie seine Props, mit Beispielen.

Abgerufene Daten als Diagramm

Diagramme nehmen einfache Arrays entgegen. Wandeln Sie die Antwort der API also mit map in ein Array um. Da useFetch auf die Daten wartet, bevor Ihr Widget gerendert wird, müssen Sie vorher nichts prüfen:

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

Größe

width und height nehmen eine Zahl in Pixeln (200) oder eine beliebige CSS-Größe ("100%", "12rem"). Damit ein Diagramm den Platz ausfüllt, den es bekommt, setzen Sie beide auf "100%". So sieht es auch dann richtig aus, wenn die Größe des Widgets geändert wird.

Ein Diagramm mit "100%" füllt auch in jeder Vorschau Ihres Widgets seinen Bereich aus. Linien, Flächen und Balken dehnen sich auf den Bereich, während Text, Punkte und Muster gleich groß bleiben. Runde Diagramme wie PieChart und DonutGauge behalten stattdessen ihre Form und wachsen oder schrumpfen, bis sie hineinpassen.