mirror of
https://github.com/grafana/grafana.git
synced 2025-08-06 20:59:35 +08:00
c2953f3a06
* feat(piechart): align styles between piechart and graph * feat(piechart): introduce tooltip options to panel and visualisation * feat(piechart): get tooltip options working * feat(piechart): add SeriesTable to visx TooltipInPortal * refactor(piechart): move getTooltipData out of PieSlice * docs(piechart): fix storybook story errors * feat(viztooltip): initial commit of common tooltip types and components * refactor(viztooltip): rename type as enum and update usage * refactor(viztooltip): move chart.tooltip into viztooltip and fix imports and typings * refactor(viztooltip): update import paths and names where used * docs(infotooltip): fix story import paths * docs(piechart): fix typings in story * docs(viztooltip): add public annotations to exported components and types
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { SeriesTable } from '../../VizTooltip';
|
|
import { GraphTooltipContentProps } from './types';
|
|
import { getMultiSeriesGraphHoverInfo } from '../utils';
|
|
import { FlotPosition } from '../types';
|
|
import { getValueFromDimension } from '@grafana/data';
|
|
|
|
export const MultiModeGraphTooltip: React.FC<
|
|
GraphTooltipContentProps & {
|
|
// We expect position to figure out correct values when not hovering over a datapoint
|
|
pos: FlotPosition;
|
|
}
|
|
> = ({ dimensions, activeDimensions, pos, timeZone }) => {
|
|
let activeSeriesIndex: number | null = null;
|
|
// when no x-axis provided, skip rendering
|
|
if (activeDimensions.xAxis === null) {
|
|
return null;
|
|
}
|
|
|
|
if (activeDimensions.yAxis) {
|
|
activeSeriesIndex = activeDimensions.yAxis[0];
|
|
}
|
|
|
|
// when not hovering over a point, time is undefined, and we use pos.x as time
|
|
const time = activeDimensions.xAxis[1]
|
|
? getValueFromDimension(dimensions.xAxis, activeDimensions.xAxis[0], activeDimensions.xAxis[1])
|
|
: pos.x;
|
|
|
|
const hoverInfo = getMultiSeriesGraphHoverInfo(dimensions.yAxis.columns, dimensions.xAxis.columns, time, timeZone);
|
|
const timestamp = hoverInfo.time;
|
|
|
|
const series = hoverInfo.results.map((s, i) => {
|
|
return {
|
|
color: s.color,
|
|
label: s.label,
|
|
value: s.value,
|
|
isActive: activeSeriesIndex === i,
|
|
};
|
|
});
|
|
|
|
return <SeriesTable series={series} timestamp={timestamp} />;
|
|
};
|
|
|
|
MultiModeGraphTooltip.displayName = 'MultiModeGraphTooltip';
|