HoneycombChart
The HoneycombChart is used to display data in a grid using various shapes for
data points.
A honeycomb chart organizes and presents data in a visually structured way, making it easier for viewers to analyze and interpret information.
Import
import { HoneycombChart } from '@dynatrace/strato-components-preview/charts';
Use cases
The HoneycombChart can compare the values of its nodes based on a string
(category) or a number. For a category-based hive, provide data as a string,
an array of strings, or objects that contain a value prop as a string.
[
{ value: 'Severe', name: 'dts-eu-zone1-server-1' },
{ value: 'Emergency', name: 'dts-eu-zone1-server-2' },
{ value: 'Notice', name: 'dts-eu-zone1-server-3' },
];
For numeric hives, the data prop expects either a number, an array of numbers,
or objects with a numeric value prop.
[
{ value: 10757, name: 'Severe' },
{ value: 4106, name: 'Emergency' },
{ value: 1652, name: 'Notice' },
];
Learn more about the data format here.
Additionally, for numeric hives, you can set the boundaries of the data shown
with the min and max props. These props support data-max in the max
property and data-min in the min property. These special values allow for
granular control over the boundaries. By default, the min prop uses the
data-min value, and the max prop uses the data-max value. These modes
automatically determine the hive's minimum and maximum values based on the
chart's data.
Labels
The nodes within a hive could show corresponding name and value just setting
the showLabels prop in the HoneycombChart. It always will try to fit both
the name and the value, but if the height of both is higher than the area
assigned for text, will try to fit one. If the height of the text area isn't
enough to fit neither the value, neither the name, then the node will appear
without labels. In case the name is wider than the text area, an ellipsis will
be applied to it.
Shapes
The nodes in the honeycomb can be set in 3 different shapes: 'circle',
'square' and 'hexagon'. ('hexagon' being the default one).
Chart Size
By default, the chart will use all the available container size up to a maximum
height of 300 pixels. The height of the chart can be changed by providing a
value to the height prop. If a number is passed to this prop without any unit
specified, it will be treated as px. The way how the text should be truncated
if it exceeds the available space can be specified with truncationMode prop.
Available values are start, end and middle, being middle the default
one.
Loading
The loading prop is a boolean value that can be passed to the HoneycombChart
component to control its loading state. When the loading prop is set to true,
the loading indicator appears in the middle of the chart plot to inform the user
that the component is currently fetching or processing data. When the loading
prop is set to false, the component should display its regular content.
Legend
The purpose of the legend is to provide additional identifying information for the chart, without the need to interact with it.
Position
By default, the position of the legend of the HoneycombChart is set
automatically. This option prioritizes the legend placement to the right of the
chart area. When the chart width is reduced, the legend is repositioned to the
area beneath the chart. It is also possible to explicitly set the chart's legend
position to right or bottom using legend's position prop.
Toolbar
Download data as CSV
The HoneycombChart component supports downloading data in CSV format using a
toolbar button. To enable this feature, a ChartToolbar subcomponent with
ChartToolbar.DownloadData inside of it must be provided to the
HoneycombChart component. On click of the download button, raw data will be
downloaded as a CSV file.
Placement
The placement prop can be used to set the initial placement of the toolbar
within the chart. Available options are: 'top-right', 'top-left',
'bottom-right', 'bottom-left'. Being 'top-right' the default value.
Intent options
The HoneycombChart supports intent options in the toolbar. The intents appear
in the toolbar's dropdown menu, allowing users to perform actions such as
sharing a chart or viewing data in another application.
To add intent options to a HoneycombChart, use the HoneycombChart.Intent
subcomponent:
Intent properties
payload: An object containing the data to be passed to the target app. The structure depends on the target application's requirements.options: Configuration options for the intent.keyProperties: Array of properties that should be included as keys in the intent.recommendedAppId: Suggested target application ID.recommendedIntentId: Suggested intent ID.responseProperties: Array of properties to be included in the response.icon: Optional custom icon to be displayed next to the intent option.onResponse: Optional callback function that is called when a response is received from the target app.
Examples
The following examples demonstrates different intent options in HoneycombChart:
Colors
The HoneycombChart provides a set of predefined color palettes that can be
used out of the box to provide more appealing visualisations. See
Charts Colors for more info.
Coloring a numerical dataset with predefined color scheme
The HoneycombChart is able to assign colors to the nodes based on the value
distribution of each node compared to the total. Domain will be divided in an
amount of 'groups' equal to the quantity of colors in the palette. Each node
will receive the color of the group that fits its value.
Coloring a numerical dataset using custom ranges
To define custom ranges and colors an array of objects of ColoredRange type
should be passed to the colorScheme prop.
Filter values in numeric dataset
The HoneycombChart can focus the applied color palette to a specified range
using min and max props. All the nodes within the data will be preserved,
but those that are out of the boundaries will have applied a default color.
Coloring a categorical dataset with predefined color scheme
If a categorical dataset is used, then the value of each node should be a string. A predefined color palette can be used to map the categories in the value of the node to the specific predefined color.
Coloring a categorical dataset using custom categories and color scheme
If none of the predefined color palettes fit your case, the HoneycombChart is
able to process a key-value object as colorScheme taking each key as the
category label and the value as its assigned color.
States
If the app experiences any issue like an error or an empty dataset, two mechanisms exist to deal with those situations in a graceful way.
Error state
Default
In case of an error thrown inside the chart, a predefined error message will be shown.
Custom
If you prefer to create your own error screen to preserve styles and information shown, you can create your own error state presenter.
Empty State
Default
When no data is provided to the chart, a predefined empty state message will be displayed.
Custom
An error message can be customized using HoneycombChart.ErrorState
subcomponent.
User actions
A user action is a creator-defined interaction with a given node in the hive.
Basic interactions include copying the node name and inspecting the underlying
data of it. In order to enable user actions, the ChartSeriesAction
subcomponent needs to be appended within the HoneycombChart. More
subcomponents can be added within this component, for instance the
ChartSeriesAction.Item, where custom logic can be applied. Intents could be
added as part of the series action as well with ChartSeriesAction.Intent.
Formatter and Unit
The HoneycombChart provides a way to format the values of the chart nodes. The
formatter prop at the root component can be used to format the values shown in
the tooltip on node hover and the legend ticks. The unit prop can be used to
add a unit to the values of the nodes. When both props are specified the
formatter will be applied with the provided unit (formatting options objects
are an exception). When no formatter is provided a default formatter with value
abbreviation will be used.
Note that the formatter and the unit props will be applied only to numeric
data.