Sparkline
The Sparkline is a compact and simple data visualization that displays a trend
or pattern of data in a small, condensed format. It typically consists of a
single line or area graph, without axes or labels, that represents the variation
of data points over time.
Import
import { Sparkline } from '@dynatrace/strato-components-preview/charts';
Use cases
The Sparkline component requires you to pass data of type Timeseries or
Timeseries[] to the data prop. A Timeseries object has a name, an array of
TimeseriesDatapoint and an optional unit. Each data point must have a
numeric value, a start, and optional center and end dates. If you
provide more than one series, only the first one is used.
[
{
name: ['Query consumption'],
unit: 'byte',
datapoints: [
{
start: new Date('Wed, 22 Mar 2022 12:00:00 UTC'),
end: new Date('Wed, 22 Mar 2022 12:01:00 UTC'),
value: 13434958,
},
{
start: new Date('Thu, 22 Mar 2022 12:01:00 UTC'),
end: new Date('Wed, 22 Mar 2022 12:02:00 UTC'),
value: 129555269,
},
{
start: new Date('Thu, 22 Mar 2022 12:02:00 UTC'),
end: new Date('Wed, 22 Mar 2022 12:03:00 UTC'),
value: 74177850,
},
],
},
];
Learn more about the data format here.
You can further customise the Sparkline by setting its color prop to any of
the Design System ColorPalette.
The Sparkline is able to show the default loading indicator setting the
loading prop to true.
Lastly, x-axis ticks can be visualized on the Sparkline by using the
showTicks prop. By default, these ticks are hidden.
Variants
The Sparkline has three variants and can be displayed as a line (default),
area, or bar. It is important to note that not all features and props apply
to all variants equally, for example curve has no effect in bar variant, and
scale has effect only in bar variant
Loading
Empty State
By using the <EmptyState /> subcomponent it is possible to define a custom
message that will be displayed if no data was provided to the Sparkline
component.
Error State
The <ErrorState /> subcomponent can be used to customise the error message
that will be displayed when an error occurs in the Sparkline component.
Scales
The Sparkline component supports the Y-axis scale configuration. To configure
a scale, the Sparkline.YAxis subcomponent should be used. The
Sparkline.YAxis component requires a scale prop to be passed with the two
possible options: linear (default) or log.
Gap policy
Gaps in data refer to missing or unrepresented values between existing data points. In a dataset exclusively with timestamps, no continuity can be determined and therefore there are always “gaps” between data points regardless of the resolution of the dataset. In a timeframe dataset however, gaps are considered when the end timestamp of the previous data point is earlier than the start timestamp of the next data point, meaning there is a timespan between the end of a previous data point and the next one with no given value.
The Sparkline provides the gapPolicy prop to configure how gaps are visualized
in a chart. There are two gapPolicy options available: gap, and connect.
- The
gapoption displays gaps on the chart as is (e.g. breaks along a line). This option helps to see the absence of data during a period of time. - The
connectoption connects consecutive data points irrespective of the gap using linear interpolation.
Context values
The Sparkline provides the showContextValues prop which allows to display
indicators with labels showing the maximum and/or minimum values of the provided
data. If a dataset contains only positive values, only the maximum value will be
displayed. If the data contains only negative values, the minimum value will be
shown. If a dataset contains both positive and negative values, the indicators
will highlight both the maximum and minimum value of the dataset.
Should the user provide a custom YAxis, the context values will only be
visible if they are within the user-defined Axis minimum and maximum value.
Thresholds
Thresholds are used to mark meaningful ranges or values on a Sparkline and
they add contextual information to a numerical axis. There are two variants of
thresholds:
- a specific point represented by a line across.
- a range - or filled area - represented by a band across.
X-axis
To configure the x-axis of the Sparkline, the Sparkline.XAxis subcomponent
can be added. The axis boundaries can be set using the min and max props,
which support timestamps of type number and Date, as well as auto and
data-min for the min property and data-max for the max property.
By default, the auto value is used for both min and max properties, which
automatically determines the minimum and maximum values of the x-axis scale
based on the data provided in the chart (similar to data-min and data-max).
Point and Range
Both point and range can be represented by static or dynamic data sources. A static data source has a single value representing a point or a single key-value pair representing a fixed range. A dynamic data source has a data array containing more than one value or various key-value pairs.
There are three different types of threshold markers:
-
Range filled, where the value range is defined in order to display the threshold band. The upper and lower lines are not drawn.
-
Range stroke-only variant, where a value range is defined in order to display the threshold band represented by upper and lower dashed lines.
-
Point, where only one value is required to display the threshold. It's represented by a dashed line.
Dynamic Point and Dynamic Range
Dynamic Range Stroke Only and Static Ranges
Point and Range with Area Variant and Ticks
Series Range
The Sparkline component supports curve prop only in the line and area
variant. By default, this value is set to linear showing sharp corners in the
joins of the lines. It can also be set to smooth providing a continuous curve.