📊 Data & UI — Module 6

Charting Your Kills

Hands-on

TimeseriesChart

import { useDql } from "@dynatrace-sdk/react-hooks";
import { TimeseriesChart, convertToTimeseries } from "@dynatrace/strato-components/charts";

const { data } = useDql({
  query: `timeseries avg(dt.host.cpu.usage), by:{dt.entity.host}, from:-2h`
});

<TimeseriesChart data={convertToTimeseries(data)} />

💡 convertToTimeseries(data) transforms DQL timeseries results into the chart format. One line.

Chart Variants

// Line chart (default)
<TimeseriesChart data={convertToTimeseries(data)} />

// Area chart
<TimeseriesChart data={convertToTimeseries(data)} variant="area" />

// Bar chart
<TimeseriesChart data={convertToTimeseries(data)} variant="bar" />

Multiple Metrics

const { data } = useDql({
  query: `timeseries cpu=avg(dt.host.cpu.usage), mem=avg(dt.host.memory.usage),
    by:{dt.entity.host}, from:-2h`
});

⚠️ DQL timeseries requires an aggregation: avg(), sum(), min(), max(), count().

Sizing

Charts fill their container. Wrap in a fixed-height div:

<div style={{ height: 300 }}>
  <TimeseriesChart data={convertToTimeseries(data)} />
</div>

What's Next

Module 7 — Build a complete HUD: KPI cards + charts + data table.

← Strato ArsenalThe HUD (Heads-Up Display) →