Tooltip

Definition

TODO

Default behavior

The tooltip follows some default behavior depending on the chart type.

Cartesian charts

A max of 5 series is generated by the chart configuration and available at the current cursor position in the projection area.

It shows a formatted HEADER that follows the X-axis formatting configuration.

The body of the tooltip is defined as a list of labels and values.

The LABEL that represent the series name. Its default value depends, in cascade, from these configured props:

1. id
2. name as string
3. one of the previous dash-concatenated with the values retrieved by each splitSeriesAccessors
4. one of the previous dash-concatenated with the values retrieved by each yAccessors
5. name as function

<BarSeries id="overall name fallback" name="name" splitSeriesAccessors={["first","second"]} yAccessors={["y1", "y2"]} />

The VALUE represents the value on the Y axis of each series. Is formatted using, in cascade, one of the following:

1. tickFormat in an <Axis> component

<Axis tickFormat={(d) => `prefix ${d} postfix`} .../>

2. the tickFormat in the <Series> component

<BarSeries tickFormat={(d) => `prefix ${d} postfix`} .../>

3. the labelFormat in the <Series> component

<BarSeries labelFormat={(d) => `prefix ${d} postfix`} .../>

Partition charts

Shows the entire hierarchy from the root element to the element right below the cursor position.

It shows each hierarchy element name, formatted via the nodeLabel defined in

<Partition layers={[{ nodeLabel: (d) => `${d}` }]} />

The ABSOLUTE VALUE is retrieved via the valueAccessor and formatted with the valueFormatter:

<Partition valueAccessor={(d: Datum) => d.value} valueFormatter={(v: number) => `${d/1000}K`}} />

The ABSOLUTE % VALUE is visible if a formatter is configured in the percentFormatter prop:

<Partition percentFormatter={(v: number) => `${d.toFixed(1)}%`}} />

By default, if present, the ABSOLUTE % VALUE is presented within parenthesis right after the ABSOLUTE VALUE: ABSOLUTE VALUE (ABSOLUTE % VALUE).

Linear partition charts

Charts like flamegraph and icicle charts are called Linear Partition charts. For those charts, we follow the same default pattern described in the partition charts with the exception that we just show only the last element of the hierarchy. This behavior is dictated by the fact that such charts can represent a very deep hierarchy and the tooltip will become useless in such a context.

In the example above, the absolute value is hidden (by returning an empty string in the valueFormatter function).

Goal/Gauge/Bullet graph

The VALUE is formatted via:

<Goal tooltipValueFormatter={(d) => `${d} KB`} .../>

The LABEL instead is currently hardcoded to Actual. This is subject to change in #1845

Heatmap

The tooltip shows the 3 dimensions used to represent the data: two DIMENSION VALUES and the cell VALUE.

The VALUE is retrieved via the valueAccessor prop and formatted via the valueFormatter prop.

<Heatmap valueAccessor={d => d.value} valueFormatter={d => `${d.toFixed(0)} K`} ... />

The VALUE LABEL is retried by name or from the id if name is not available.

<Heatmap id="spec_id" name="heatmap value name" ... />

The DIM. LABELS are configured through the following props:

<Heatmap xAxisLabelName="X" yAxisLabelName="Y" ... />

The DIM. VALUES are formatted through the following props:

<Heatmap xAxisLabelFormatter={(d) => `${d}`} yAxisLabelFormatter={(d) => `${d}`}}

Metric

no tooltip available

Worldcloud

No tooltip available

Available configurations

The default behaviour of the tooltip can be configured by changing a set of available parameters in its main configuration component:

<Tooltip type={} />

TODO

Visibility and placement

TODO

External cursor events

TODO