IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Tooltip mode works in BarChart panel (#52941)

Browse Source
This commit is contained in:
Victor Marin 2022-07-29 15:11:42 +03:00 committed by GitHub
parent b223c65a6c
commit e88e3482e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/plugins/panel/barchart/BarChartPanel.tsx
View File

@ -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 && (

22
public/app/plugins/panel/geomap/components/DataHoverView.tsx
View File

@ -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}>