IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-27 00:37:04 -06:00
Code Issues Packages Projects Releases Wiki Activity

VizTooltips: Remove default width/height values (#81832)

Browse Source
This commit is contained in:
Adela Almasan 2024-02-06 14:00:19 -06:00 committed by GitHub
parent 6373557c78
commit 315eb5acc3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
View File

@ -11,8 +11,8 @@ import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
import { CloseButton } from './CloseButton';
export const DEFAULT_TOOLTIP_WIDTH = 300;
export const DEFAULT_TOOLTIP_HEIGHT = 600;
export const DEFAULT_TOOLTIP_WIDTH = undefined;
export const DEFAULT_TOOLTIP_HEIGHT = undefined;
export const TOOLTIP_OFFSET = 10;
// todo: barchart? histogram?
@ -45,7 +45,7 @@ interface TooltipPlugin2Props {
viaSync: boolean
) => React.ReactNode;
maxWidth?: number | string;
maxWidth?: number;
maxHeight?: number;
}
@ -115,7 +115,7 @@ export const TooltipPlugin2 = ({
const sizeRef = useRef<TooltipContainerSize>();
maxWidth = isPinned ? 'none' : maxWidth ?? DEFAULT_TOOLTIP_WIDTH;
maxWidth = isPinned ? DEFAULT_TOOLTIP_WIDTH : maxWidth ?? DEFAULT_TOOLTIP_WIDTH;
maxHeight ??= DEFAULT_TOOLTIP_HEIGHT;
const styles = useStyles2(getStyles, maxWidth, maxHeight);
@ -529,7 +529,7 @@ export const TooltipPlugin2 = ({
return null;
};
const getStyles = (theme: GrafanaTheme2, maxWidth: number | string, maxHeight: number) => ({
const getStyles = (theme: GrafanaTheme2, maxWidth?: number, maxHeight?: number) => ({
tooltipWrapper: css({
top: 0,
left: 0,
@ -541,8 +541,8 @@ const getStyles = (theme: GrafanaTheme2, maxWidth: number | string, maxHeight: n
border: `1px solid ${theme.colors.border.weak}`,
boxShadow: theme.shadows.z2,
userSelect: 'text',
maxWidth: maxWidth,
maxHeight: maxHeight,
maxWidth: maxWidth ?? 'none',
maxHeight: maxHeight ?? 'none',
overflowY: 'auto',
}),
pinned: css({

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

@ -50,7 +50,6 @@ export function addTooltipOptions<T extends OptionsWithTooltip>(
category,
settings: {
integer: true,
placeholder: '300',
},
})
.addNumberInput({
@ -59,7 +58,6 @@ export function addTooltipOptions<T extends OptionsWithTooltip>(
category,
settings: {
integer: true,
placeholder: '600',
},
});
}

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

@ -22,6 +22,7 @@ import { ContextMenuPlugin } from '../timeseries/plugins/ContextMenuPlugin';
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';
@ -298,6 +299,7 @@ export const CandlestickPanel = ({
mode={options.tooltip.mode}
isPinned={isPinned}
annotate={enableAnnotationCreation ? annotate : undefined}
scrollable={isTooltipScrollable(options.tooltip)}
/>
);
}}

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

@ -428,7 +428,6 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
category,
settings: {
integer: true,
placeholder: '300',
},
});
@ -438,7 +437,6 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
category,
settings: {
integer: true,
placeholder: '600',
},
});

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

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

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

@ -37,6 +37,7 @@ interface TimeSeriesTooltipProps {
sortOrder?: SortOrder;
isPinned: boolean;
scrollable?: boolean;
annotate?: () => void;
}
@ -48,6 +49,7 @@ export const TimeSeriesTooltip = ({
seriesIdx,
mode = TooltipDisplayMode.Single,
sortOrder = SortOrder.None,
scrollable = false,
isPinned,
annotate,
}: TimeSeriesTooltipProps) => {
@ -156,11 +158,7 @@ export const TimeSeriesTooltip = ({
<div>
<div className={styles.wrapper}>
<VizTooltipHeader headerLabel={getHeaderLabel()} isPinned={isPinned} />
<VizTooltipContent
contentLabelValue={getContentLabelValue()}
isPinned={isPinned}
scrollable={mode === TooltipDisplayMode.Multi}
/>
<VizTooltipContent contentLabelValue={getContentLabelValue()} isPinned={isPinned} scrollable={scrollable} />
{isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />}
</div>
</div>

6
public/app/plugins/panel/timeseries/utils.ts
View File

@ -14,7 +14,7 @@ import {
import { convertFieldType } from '@grafana/data/src/transformations/transformers/convertFieldType';
import { applyNullInsertThreshold } from '@grafana/data/src/transformations/transformers/nulls/nullInsertThreshold';
import { nullToValue } from '@grafana/data/src/transformations/transformers/nulls/nullToValue';
import { GraphFieldConfig, LineInterpolation } from '@grafana/schema';
import { GraphFieldConfig, LineInterpolation, TooltipDisplayMode, VizTooltipOptions } from '@grafana/schema';
import { buildScaleKey } from '@grafana/ui/src/components/uPlot/internal';
type ScaleKey = string;
@ -310,3 +310,7 @@ export function regenerateLinksSupplier(
return alignedDataFrame;
}
export const isTooltipScrollable = (tooltipOptions: VizTooltipOptions) => {
return tooltipOptions.mode === TooltipDisplayMode.Multi && tooltipOptions.maxHeight != null;
};

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 { prepareGraphableFields, regenerateLinksSupplier } from '../timeseries/utils';
import { isTooltipScrollable, prepareGraphableFields, regenerateLinksSupplier } from '../timeseries/utils';
import { Options } from './panelcfg.gen';
@ -142,6 +142,7 @@ export const TrendPanel = ({
mode={options.tooltip.mode}
sortOrder={options.tooltip.sort}
isPinned={isPinned}
scrollable={isTooltipScrollable(options.tooltip)}
/>
);
}}