mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Tooltip mode works in BarChart panel (#52941)
This commit is contained in:
parent
b223c65a6c
commit
e88e3482e0
@ -18,6 +18,7 @@ import {
|
||||
measureText,
|
||||
PlotLegend,
|
||||
Portal,
|
||||
TooltipDisplayMode,
|
||||
UPlotConfigBuilder,
|
||||
UPLOT_AXIS_FONT_SIZE,
|
||||
usePanelContext,
|
||||
@ -175,6 +176,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
|
||||
rowIndex={datapointIdx}
|
||||
columnIndex={seriesIdx}
|
||||
sortOrder={options.tooltip.sort}
|
||||
mode={options.tooltip.mode}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
@ -284,6 +286,10 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
|
||||
});
|
||||
}
|
||||
|
||||
if (options.tooltip.mode === TooltipDisplayMode.None) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Portal>
|
||||
{hover && coords && (
|
||||
|
@ -10,7 +10,7 @@ import {
|
||||
GrafanaTheme2,
|
||||
LinkModel,
|
||||
} from '@grafana/data';
|
||||
import { SortOrder } from '@grafana/schema';
|
||||
import { SortOrder, TooltipDisplayMode } from '@grafana/schema';
|
||||
import { LinkButton, useStyles2, VerticalGroup } from '@grafana/ui';
|
||||
|
||||
export interface Props {
|
||||
@ -18,9 +18,10 @@ export interface Props {
|
||||
rowIndex?: number | null; // the hover row
|
||||
columnIndex?: number | null; // the hover column
|
||||
sortOrder?: SortOrder;
|
||||
mode?: TooltipDisplayMode | null;
|
||||
}
|
||||
|
||||
export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder }: Props) => {
|
||||
export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode }: Props) => {
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
if (!data || rowIndex == null) {
|
||||
@ -60,12 +61,19 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder }: Props)
|
||||
return (
|
||||
<table className={styles.infoWrap}>
|
||||
<tbody>
|
||||
{displayValues.map((v, i) => (
|
||||
<tr key={`${i}/${rowIndex}`} className={i === columnIndex ? styles.highlight : ''}>
|
||||
<th>{v[0]}:</th>
|
||||
<td>{v[2]}</td>
|
||||
{(mode === TooltipDisplayMode.Multi || mode === null) &&
|
||||
displayValues.map((v, i) => (
|
||||
<tr key={`${i}/${rowIndex}`} className={i === columnIndex ? styles.highlight : ''}>
|
||||
<th>{v[0]}:</th>
|
||||
<td>{v[2]}</td>
|
||||
</tr>
|
||||
))}
|
||||
{mode === TooltipDisplayMode.Single && columnIndex && (
|
||||
<tr key={`${columnIndex}/${rowIndex}`}>
|
||||
<th>{displayValues[columnIndex][0]}:</th>
|
||||
<td>{displayValues[columnIndex][2]}</td>
|
||||
</tr>
|
||||
))}
|
||||
)}
|
||||
{links.length > 0 && (
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
|
Loading…
Reference in New Issue
Block a user