RectSeries
A RectSeries is a type of shape that provides a two-dimensional representation
of data in which various values are represented by colors. This shape excels at
allowing the user to compare values and observe patterns. One of the most
popular uses this shape can be used for are HeatMaps.
Import
import { XYChart } from '@dynatrace/strato-components-preview/charts';
Use cases
A RectSeries is a type of chart that provides a two-dimensional representation
of data in which various values are represented by colors. RectSeries excel in
detecting trends, recurring patterns, and deviations within intricate data sets.
To display a RectSeries, add the XYChart.RectSeries subcomponent within the
XYChart component.
This series requires five essential properties that will function as data accessors:
x0Accessor: indicates what data should be used as the start point for the x-axis baseline.x1Accessor: indicates what data should be used as the end point for the x-axis baseline. Not required for categorical-type axes.y0Accessor: indicates what data should be used as the start point for the y-axis baseline.y1Accessor: indicates what data should be used as the end point for the y-axis baseline. Not required for categorical-type axes.valueAccessor: indicates what data should be used as the tile value, which represents the intensity of the tile color.
These accessors will extract the specified data from the provided object array
via the data property. It’s crucial to note that the accessors are used to
construct each cell’s dimensions; incorrect specification of any accessor will
result in an inability to generate the correct rect series.
Additionally, a XYChart.RectSeries will need to be assigned to at least one
x-axis and one y-axis via valid xAxisId and yAxisId properties. For a more
detailed explanation of the axis configuration, please refer to the
XYChart docs.
The XYChart.RectSeries subcomponent includes some other optional properties:
data, colorPalette, valueUnit, valueFormatter, valueMin, valueMax
and actions.
The data and colorPalette properties can be used to overwrite the XYChart
component for a specific series.
Data
The data provided to the RectSeries component via the data property will be
used in combination with the accessors of each series.
Coloring
By using the colorPalette property in the RectSeries you can overwrite the
coloring from the XYChart component. For more information about how to use
coloring in the chart you can refer to the XYChart docs.
Overlapping tiles
The sides of the tiles can be defined freely, in case of overlapping amongst two or more tiles, these will transparent through one another and show a mixed color.
Min and max values
By setting the valueMin and valueMax properties, you can establish
boundaries for all values. Values outside these boundaries will display a
default color. Note that string values are not affected by these boundaries and
will display their original color.
Unit and formatter
You can apply a unit and formatter to the data extracted by the valueAccessor
via valueUnit and valueFormatter as long as it is of type number. If the
data is of type string then these properties will be disregarded.
Series actions
A series action is a creator-defined interaction with a given data point in the
chart. Basic interactions include copying a series name and inspecting the
underlying data of a data point. In order to enable chart interactions, the
ChartSeriesAction subcomponent needs to be included within the XYChart.
More subcomponents can be added within this component, for instance
ChartSeriesAction.Item, where you can provide a custom action that will appear
in the tooltip menu. That action can execute any custom logic in its onSelect
callback or get disabled via a disabled prop.