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

TimeSeries: share cursor with old graph

Browse Source
This commit is contained in:
Zoltán Bedi 2021-10-28 13:01:06 +02:00
parent 209122347c
commit 1e7dd4f627
3 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx
View File

@ -10,7 +10,7 @@ import { PanelContext, PanelContextRoot } from '../PanelChrome/PanelContext';
const propsToDiff: string[] = ['legend']; const propsToDiff: string[] = ['legend'];
type TimeSeriesProps = Omit<GraphNGProps, 'prepConfig' | 'propsToDiff' | 'renderLegend'>; type TimeSeriesProps = Omit<GraphNGProps, 'prepConfig' | 'propsToDiff' | 'renderLegend'> & { panelId: number };
export class UnthemedTimeSeries extends React.Component<TimeSeriesProps> { export class UnthemedTimeSeries extends React.Component<TimeSeriesProps> {
static contextType = PanelContextRoot; static contextType = PanelContextRoot;
@ -18,7 +18,7 @@ export class UnthemedTimeSeries extends React.Component<TimeSeriesProps> {
prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => { prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {
const { eventBus, sync } = this.context; const { eventBus, sync } = this.context;
const { theme, timeZone, legend } = this.props; const { theme, timeZone, legend, panelId } = this.props;
return preparePlotConfigBuilder({ return preparePlotConfigBuilder({
frame: alignedFrame, frame: alignedFrame,
@ -29,6 +29,7 @@ export class UnthemedTimeSeries extends React.Component<TimeSeriesProps> {
sync, sync,
allFrames, allFrames,
legend, legend,
panelId,
}); });
}; };

26
packages/grafana-ui/src/components/TimeSeries/utils.ts
View File

@ -11,6 +11,8 @@ import {
getFieldColorModeForField, getFieldColorModeForField,
getFieldSeriesColor, getFieldSeriesColor,
getFieldDisplayName, getFieldDisplayName,
LegacyGraphHoverClearEvent,
LegacyGraphHoverEvent,
} from '@grafana/data'; } from '@grafana/data';
import { UPlotConfigBuilder, UPlotConfigPrepFn } from '../uPlot/config/UPlotConfigBuilder'; import { UPlotConfigBuilder, UPlotConfigPrepFn } from '../uPlot/config/UPlotConfigBuilder';
@ -36,16 +38,11 @@ const defaultConfig: GraphFieldConfig = {
axisPlacement: AxisPlacement.Auto, axisPlacement: AxisPlacement.Auto,
}; };
export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursorSync; legend?: VizLegendOptions }> = ({ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
frame, sync: DashboardCursorSync;
theme, panelId: number;
timeZone, legend?: VizLegendOptions;
getTimeRange, }> = ({ frame, theme, timeZone, getTimeRange, eventBus, sync, allFrames, legend, panelId }) => {
eventBus,
sync,
allFrames,
legend,
}) => {
const builder = new UPlotConfigBuilder(timeZone); const builder = new UPlotConfigBuilder(timeZone);
builder.setPrepData((prepData) => preparePlotData(prepData, undefined, legend)); builder.setPrepData((prepData) => preparePlotData(prepData, undefined, legend));
@ -349,11 +346,20 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
payload.point[xScaleUnit] = null; payload.point[xScaleUnit] = null;
payload.point[yScaleKey] = null; payload.point[yScaleKey] = null;
eventBus.publish(new DataHoverClearEvent()); eventBus.publish(new DataHoverClearEvent());
eventBus.publish(new LegacyGraphHoverClearEvent());
} else { } else {
// convert the points // convert the points
payload.point[xScaleUnit] = src.posToVal(x, xScaleKey); payload.point[xScaleUnit] = src.posToVal(x, xScaleKey);
payload.point[yScaleKey] = src.posToVal(y, yScaleKey); payload.point[yScaleKey] = src.posToVal(y, yScaleKey);
eventBus.publish(hoverEvent); eventBus.publish(hoverEvent);
eventBus.publish(
new LegacyGraphHoverEvent({
panel: { id: panelId },
data: frame,
point: payload.point,
pos: { x: payload.point[xScaleUnit], panelRelY: y / h },
})
);
hoverEvent.payload.down = undefined; hoverEvent.payload.down = undefined;
} }
return true; return true;

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

@ -24,6 +24,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
fieldConfig, fieldConfig,
onChangeTimeRange, onChangeTimeRange,
replaceVariables, replaceVariables,
id,
}) => { }) => {
const { sync, canAddAnnotations, onThresholdsChange, canEditThresholds, onSplitOpen } = usePanelContext(); const { sync, canAddAnnotations, onThresholdsChange, canEditThresholds, onSplitOpen } = usePanelContext();
@ -52,6 +53,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
width={width} width={width}
height={height} height={height}
legend={options.legend} legend={options.legend}
panelId={id}
> >
{(config, alignedDataFrame) => { {(config, alignedDataFrame) => {
return ( return (