mittwald Flow Logo

Components

CartesianChart

CartesianChart ist eine vielseitige Diagrammkomponente zur Darstellung von Metriken über Zeit. Sie kann entweder als Liniendiagramm (Line) oder Flächendiagramm (Area) konfiguriert werden.GitHub

Playground

Verwende <CartesianChart />, um ein CartesianChart darzustellen. Beachte dabei, dass zum Rendern entweder das übergeordnete Parent eine feste Höhe vorgeben muss oder das Chart selbst über die Property height eine eigene Höhe erhalten muss.

import {
  Area,
  CartesianChart,
  CartesianGrid,
  ChartTooltip,
  ChartLegend,
  XAxis,
  YAxis,
} from "@mittwald/flow-react-components";

<CartesianChart
  data={[
    {
      Zeit: "0 Uhr",
      Datenbanken: 40,
      Projekte: 24,
    },
    {
      Zeit: "1 Uhr",
      Datenbanken: 30,
      Projekte: 13,
    },
    {
      Zeit: "2 Uhr",
      Datenbanken: 20,
      Projekte: 78,
    },
    {
      Zeit: "3 Uhr",
      Datenbanken: 27,
      Projekte: 39,
    },
  ]}
  height="300px"
>
  <CartesianGrid />
  <Area dataKey="Datenbanken" />
  <Area dataKey="Projekte" color="palatinate-blue" />
  <XAxis dataKey="Zeit" />
  <YAxis domain={[0, 100]} unit=" %" />
  <ChartTooltip formatter={(v, k) => `${k}: ${v} %`} />
  <ChartLegend />
</CartesianChart>

Darstellungstypen

Im CartesianChart können unterschiedliche Darstellungstypen wie <Area />, <Line /> oder eine Kombination aus beiden verwendet werden.

import {
  Area,
  Line,
  CartesianChart,
  CartesianGrid,
  YAxis,
  XAxis,
} from "@mittwald/flow-react-components";

export default () => {
  const data = [
    {
      Zeit: "A",
      A: 40,
      B: 45,
    },
    {
      Zeit: "B",
      A: 32,
      B: 35,
    },
    {
      Zeit: "C",
      A: 20,
      B: 78,
    },
    {
      Zeit: "D",
      A: 27,
      B: 39,
    },
  ];
  return (
    <Row>
      <CartesianChart flexGrow data={data} height="300px">
        <CartesianGrid />
        <Area dataKey="A" />
        <Area dataKey="B" color="palatinate-blue" />
        <XAxis dataKey="Zeit" />
        <YAxis domain={[0, 100]} unit=" %" />
      </CartesianChart>
      <CartesianChart flexGrow data={data} height="300px">
        <CartesianGrid />
        <Line dataKey="A" />
        <Line dataKey="B" color="palatinate-blue" />
        <XAxis dataKey="Zeit" />
        <YAxis domain={[0, 100]} unit=" %" />
      </CartesianChart>
      <CartesianChart flexGrow data={data} height="300px">
        <CartesianGrid />
        <Area dataKey="A" />
        <Line dataKey="B" color="palatinate-blue" />
        <XAxis dataKey="Zeit" />
        <YAxis domain={[0, 100]} unit=" %" />
      </CartesianChart>
    </Row>
  );
}

Synchronisierte Charts

Zwei CartesianCharts können synchronisiert werden, um den gleichen Zeitraum darzustellen. Dadurch lassen sich verschiedene Metriken zeitlich exakt vergleichen.

CPU

RAM

import {
  Area,
  CartesianChart,
  CartesianGrid,
  ChartTooltip,
  ChartLegend,
  XAxis,
  YAxis,
  Section,
  Heading,
} from "@mittwald/flow-react-components";

<Section>
  <Heading>CPU</Heading>
  <CartesianChart
    data={[
      {
        Zeit: "0 Uhr",
        Datenbanken: 40,
        Projekte: 24,
      },
      {
        Zeit: "1 Uhr",
        Datenbanken: 30,
        Projekte: 13,
      },
      {
        Zeit: "2 Uhr",
        Datenbanken: 20,
        Projekte: 78,
      },
      {
        Zeit: "3 Uhr",
        Datenbanken: 27,
        Projekte: 39,
      },
    ]}
    height="200px"
    syncId="syncedCharts"
  >
    <CartesianGrid />
    <Area dataKey="Datenbanken" />
    <Area dataKey="Projekte" color="palatinate-blue" />
    <XAxis dataKey="Zeit" />
    <YAxis domain={[0, 100]} unit=" %" />
    <ChartTooltip formatter={(v, k) => `${k}: ${v} %`} />
  </CartesianChart>
  <Heading>RAM</Heading>
  <CartesianChart
    data={[
      {
        Zeit: "0 Uhr",
        Datenbanken: 39,
        Projekte: 27,
      },
      {
        Zeit: "1 Uhr",
        Datenbanken: 30,
        Projekte: 13,
      },
      {
        Zeit: "2 Uhr",
        Datenbanken: 63,
        Projekte: 10,
      },
      {
        Zeit: "3 Uhr",
        Datenbanken: 24,
        Projekte: 40,
      },
    ]}
    height="200px"
    syncId="syncedCharts"
  >
    <CartesianGrid />
    <Area dataKey="Datenbanken" />
    <Area dataKey="Projekte" color="palatinate-blue" />
    <XAxis dataKey="Zeit" />
    <YAxis domain={[0, 100]} unit=" %" />
    <ChartTooltip formatter={(v, k) => `${k}: ${v} %`} />
    <ChartLegend />
  </CartesianChart>
</Section>

Mit EmptyView

Der EmptyView wird angezeigt, sobald die Property data des Charts entweder ein leeres Array enthält oder undefined ist. Er dient dazu, leere Zustände visuell zu kennzeichnen und bietet Orientierung bei Ausnahmefällen wie Ladefehlern, fehlgeschlagenen Datenabfragen oder nicht vorhandenen Ergebnissen.

import {
  CartesianChart,
  type CartesianChartEmptyViewProps,
  Flex,
  Heading,
  IconDanger,
  IconMonitoring,
  IllustratedMessage,
  Link,
  XAxis,
  YAxis,
} from "@mittwald/flow-react-components";

export default () => {
  const EmptyView = (
    props: CartesianChartEmptyViewProps,
  ) => {
    if (props.data === undefined) {
      return (
        <IllustratedMessage color="danger">
          <IconDanger />
          <Heading>Laden der Daten fehlgeschlagen</Heading>
          <Link>Neu laden</Link>
        </IllustratedMessage>
      );
    }

    return (
      <IllustratedMessage>
        <IconMonitoring />
        <Heading>Keine Daten verfügbar</Heading>
      </IllustratedMessage>
    );
  };

  const Chart = (props: CartesianChartEmptyViewProps) => {
    return (
      <CartesianChart
        emptyView={EmptyView}
        height="300px"
        flexGrow
        {...props}
      >
        <XAxis />
        <YAxis />
      </CartesianChart>
    );
  };

  return (
    <Flex direction="row" grow>
      <Chart />
      <Chart data={[]} />
    </Flex>
  );
}

Overview