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

Chore: Refactor tooltip scrollable prop (#87671)

Browse Source
This commit is contained in:
Adela Almasan
2024-05-10 18:19:42 -06:00
committed by GitHub
parent ddde7f1056
commit f706c78ea1
12 changed files with 28 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/options/builder/tooltip.tsx
View File

@@ -76,6 +76,6 @@ export function addTooltipOptions<T extends OptionsWithTooltip>(
settings: {
integer: true,
},
showIf: (options: T) => options.tooltip?.mode !== TooltipDisplayMode.None,
showIf: (options: T) => options.tooltip?.mode === TooltipDisplayMode.Multi,
});
}

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

@@ -15,7 +15,6 @@ import {
import { TooltipHoverMode } from '@grafana/ui/src/components/uPlot/plugins/TooltipPlugin2';
import { TimeSeriesTooltip } from '../timeseries/TimeSeriesTooltip';
import { isTooltipScrollable } from '../timeseries/utils';
import { BarChartLegend, hasVisibleLegendSeries } from './BarChartLegend';
import { Options } from './panelcfg.gen';
@@ -171,7 +170,6 @@ export const BarChartPanel = (props: PanelProps<Options>) => {
mode={options.tooltip.mode}
sortOrder={options.tooltip.sort}
isPinned={isPinned}
scrollable={isTooltipScrollable(options.tooltip)}
maxHeight={options.tooltip.maxHeight}
/>
);

2
public/app/plugins/panel/candlestick/CandlestickPanel.tsx
View File

@@ -26,7 +26,6 @@ import { AnnotationsPlugin2 } from '../timeseries/plugins/AnnotationsPlugin2';
import { ExemplarsPlugin } from '../timeseries/plugins/ExemplarsPlugin';
import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin';
import { ThresholdControlsPlugin } from '../timeseries/plugins/ThresholdControlsPlugin';
import { isTooltipScrollable } from '../timeseries/utils';
import { prepareCandlestickFields } from './fields';
import { Options, defaultCandlestickColors, VizDisplayMode } from './types';
@@ -306,7 +305,6 @@ export const CandlestickPanel = ({
sortOrder={options.tooltip.sort}
isPinned={isPinned}
annotate={enableAnnotationCreation ? annotate : undefined}
scrollable={isTooltipScrollable(options.tooltip)}
maxHeight={options.tooltip.maxHeight}
/>
);

2
public/app/plugins/panel/heatmap/HeatmapPanel.tsx
View File

@@ -21,7 +21,6 @@ import { readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHe
import { AnnotationsPlugin2 } from '../timeseries/plugins/AnnotationsPlugin2';
import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin';
import { isTooltipScrollable } from '../timeseries/utils';
import { HeatmapTooltip } from './HeatmapTooltip';
import { prepareHeatmapData } from './fields';
@@ -208,7 +207,6 @@ export const HeatmapPanel = ({
showColorScale={options.tooltip.showColorScale}
panelData={data}
annotate={enableAnnotationCreation ? annotate : undefined}
scrollable={isTooltipScrollable(options.tooltip)}
maxHeight={options.tooltip.maxHeight}
/>
);

10
public/app/plugins/panel/heatmap/HeatmapTooltip.tsx
View File

@@ -23,6 +23,7 @@ import { DataHoverView } from 'app/features/visualization/data-hover/DataHoverVi
import { getDataLinks } from '../status-history/utils';
import { getStyles } from '../timeseries/TimeSeriesTooltip';
import { isTooltipScrollable } from '../timeseries/utils';
import { HeatmapData } from './fields';
import { renderHistogram } from './renderHistogram';
@@ -39,7 +40,6 @@ interface HeatmapTooltipProps {
dismiss: () => void;
panelData: PanelData;
annotate?: () => void;
scrollable?: boolean;
maxHeight?: number;
}
@@ -66,7 +66,6 @@ const HeatmapHoverCell = ({
showColorScale = false,
mode,
annotate,
scrollable,
maxHeight,
}: HeatmapTooltipProps) => {
const index = dataIdxs[1]!;
@@ -358,7 +357,12 @@ const HeatmapHoverCell = ({
return (
<div className={styles.wrapper}>
<VizTooltipHeader item={headerItem} isPinned={isPinned} />
<VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} maxHeight={maxHeight}>
<VizTooltipContent
items={contentItems}
isPinned={isPinned}
scrollable={isTooltipScrollable({ mode, maxHeight })}
maxHeight={maxHeight}
>
{customContent?.map((content, i) => (
<div key={i} style={{ padding: `${theme.spacing(1)} 0` }}>
{content}

2
public/app/plugins/panel/heatmap/module.tsx
View File

@@ -432,7 +432,7 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
settings: {
integer: true,
},
showIf: (options) => options.tooltip?.mode !== TooltipDisplayMode.None,
showIf: (options) => options.tooltip?.mode === TooltipDisplayMode.Multi,
});
category = ['Legend'];

3
public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
View File

@@ -13,7 +13,7 @@ import {
import { AnnotationsPlugin2 } from '../timeseries/plugins/AnnotationsPlugin2';
import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin';
import { getTimezones, isTooltipScrollable } from '../timeseries/utils';
import { getTimezones } from '../timeseries/utils';
import { StateTimelineTooltip2 } from './StateTimelineTooltip2';
import { Options } from './panelcfg.gen';
@@ -124,7 +124,6 @@ export const StateTimelinePanel = ({
timeRange={timeRange}
annotate={enableAnnotationCreation ? annotate : undefined}
withDuration={true}
scrollable={isTooltipScrollable(options.tooltip)}
maxHeight={options.tooltip.maxHeight}
/>
);

9
public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx
View File

@@ -12,6 +12,7 @@ import { findNextStateIndex, fmtDuration } from 'app/core/components/TimelineCha
import { getDataLinks } from '../status-history/utils';
import { TimeSeriesTooltipProps, getStyles } from '../timeseries/TimeSeriesTooltip';
import { isTooltipScrollable } from '../timeseries/utils';
interface StateTimelineTooltip2Props extends TimeSeriesTooltipProps {
timeRange: TimeRange;
@@ -24,7 +25,6 @@ export const StateTimelineTooltip2 = ({
seriesIdx,
mode = TooltipDisplayMode.Single,
sortOrder = SortOrder.None,
scrollable = false,
isPinned,
annotate,
timeRange,
@@ -83,7 +83,12 @@ export const StateTimelineTooltip2 = ({
return (
<div className={styles.wrapper}>
<VizTooltipHeader item={headerItem} isPinned={isPinned} />
<VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} maxHeight={maxHeight} />
<VizTooltipContent
items={contentItems}
isPinned={isPinned}
scrollable={isTooltipScrollable({ mode, maxHeight })}
maxHeight={maxHeight}
/>
{footer}
</div>
);

3
public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
View File

@@ -13,7 +13,7 @@ import {
import { StateTimelineTooltip2 } from '../state-timeline/StateTimelineTooltip2';
import { AnnotationsPlugin2 } from '../timeseries/plugins/AnnotationsPlugin2';
import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin';
import { getTimezones, isTooltipScrollable } from '../timeseries/utils';
import { getTimezones } from '../timeseries/utils';
import { Options } from './panelcfg.gen';
@@ -129,7 +129,6 @@ export const StatusHistoryPanel = ({
timeRange={timeRange}
annotate={enableAnnotationCreation ? annotate : undefined}
withDuration={false}
scrollable={isTooltipScrollable(options.tooltip)}
maxHeight={options.tooltip.maxHeight}
/>
);

3
public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
View File

@@ -15,7 +15,7 @@ import { ExemplarsPlugin, getVisibleLabels } from './plugins/ExemplarsPlugin';
import { OutsideRangePlugin } from './plugins/OutsideRangePlugin';
import { ThresholdControlsPlugin } from './plugins/ThresholdControlsPlugin';
import { getPrepareTimeseriesSuggestion } from './suggestions';
import { getTimezones, isTooltipScrollable, prepareGraphableFields } from './utils';
import { getTimezones, prepareGraphableFields } from './utils';
interface TimeSeriesPanelProps extends PanelProps<Options> {}
@@ -130,7 +130,6 @@ export const TimeSeriesPanel = ({
sortOrder={options.tooltip.sort}
isPinned={isPinned}
annotate={enableAnnotationCreation ? annotate : undefined}
scrollable={isTooltipScrollable(options.tooltip)}
maxHeight={options.tooltip.maxHeight}
/>
);

11
public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx
View File

@@ -13,6 +13,8 @@ import { getContentItems } from '@grafana/ui/src/components/VizTooltip/utils';
import { getDataLinks } from '../status-history/utils';
import { fmt } from '../xychart/utils';
import { isTooltipScrollable } from './utils';
// exemplar / annotation / time region hovering?
// add annotation UI / alert dismiss UI?
@@ -31,7 +33,6 @@ export interface TimeSeriesTooltipProps {
sortOrder?: SortOrder;
isPinned: boolean;
scrollable?: boolean;
annotate?: () => void;
maxHeight?: number;
@@ -44,7 +45,6 @@ export const TimeSeriesTooltip = ({
seriesIdx,
mode = TooltipDisplayMode.Single,
sortOrder = SortOrder.None,
scrollable = false,
isPinned,
annotate,
maxHeight,
@@ -94,7 +94,12 @@ export const TimeSeriesTooltip = ({
return (
<div className={styles.wrapper}>
{headerItem != null && <VizTooltipHeader item={headerItem} isPinned={isPinned} />}
<VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} maxHeight={maxHeight} />
<VizTooltipContent
items={contentItems}
isPinned={isPinned}
scrollable={isTooltipScrollable({ mode, maxHeight })}
maxHeight={maxHeight}
/>
{footer}
</div>
);

3
public/app/plugins/panel/trend/TrendPanel.tsx
View File

@@ -11,7 +11,7 @@ import { TimeSeries } from 'app/core/components/TimeSeries/TimeSeries';
import { findFieldIndex } from 'app/features/dimensions';
import { TimeSeriesTooltip } from '../timeseries/TimeSeriesTooltip';
import { isTooltipScrollable, prepareGraphableFields } from '../timeseries/utils';
import { prepareGraphableFields } from '../timeseries/utils';
import { Options } from './panelcfg.gen';
@@ -129,7 +129,6 @@ export const TrendPanel = ({
mode={options.tooltip.mode}
sortOrder={options.tooltip.sort}
isPinned={isPinned}
scrollable={isTooltipScrollable(options.tooltip)}
maxHeight={options.tooltip.maxHeight}
/>
);