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

Annotations: Use point marker for short time range annotations (#51520)

Browse Source 
* Use point annotation marker for short time range annotations

* Properly align small region marker
This commit is contained in:
Kyle Cunningham 2022-06-30 04:08:22 -05:00 committed by GitHub
parent 040cc5021c
commit d429cac27b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx
View File

@ -113,7 +113,7 @@ export const AnnotationsPlugin: React.FC<AnnotationsPluginProps> = ({ annotation
const renderMarker = useCallback( const renderMarker = useCallback(
(frame: DataFrame, dataFrameFieldIndex: DataFrameFieldIndex) => { (frame: DataFrame, dataFrameFieldIndex: DataFrameFieldIndex) => {
let markerStyle; let width = 0;
const view = new DataFrameView<AnnotationsDataFrameViewDTO>(frame); const view = new DataFrameView<AnnotationsDataFrameViewDTO>(frame);
const annotation = view.get(dataFrameFieldIndex.fieldIndex); const annotation = view.get(dataFrameFieldIndex.fieldIndex);
const isRegionAnnotation = Boolean(annotation.isRegion); const isRegionAnnotation = Boolean(annotation.isRegion);
@ -130,10 +130,10 @@ export const AnnotationsPlugin: React.FC<AnnotationsPluginProps> = ({ annotation
if (x1 > plotInstance.current.bbox.width / window.devicePixelRatio) { if (x1 > plotInstance.current.bbox.width / window.devicePixelRatio) {
x1 = plotInstance.current.bbox.width / window.devicePixelRatio; x1 = plotInstance.current.bbox.width / window.devicePixelRatio;
} }
markerStyle = { width: `${x1 - x0}px` }; width = x1 - x0;
} }
return <AnnotationMarker annotation={annotation} timeZone={timeZone} style={markerStyle} />; return <AnnotationMarker annotation={annotation} timeZone={timeZone} width={width} />;
}, },
[timeZone] [timeZone]
); );

18
public/app/plugins/panel/timeseries/plugins/annotations/AnnotationMarker.tsx
View File

@ -14,8 +14,11 @@ import { AnnotationTooltip } from './AnnotationTooltip';
interface Props extends HTMLAttributes<HTMLDivElement> { interface Props extends HTMLAttributes<HTMLDivElement> {
timeZone: TimeZone; timeZone: TimeZone;
annotation: AnnotationsDataFrameViewDTO; annotation: AnnotationsDataFrameViewDTO;
width: number;
} }
const MIN_REGION_ANNOTATION_WIDTH = 6;
const POPPER_CONFIG = { const POPPER_CONFIG = {
modifiers: [ modifiers: [
{ name: 'arrow', enabled: false }, { name: 'arrow', enabled: false },
@ -29,7 +32,7 @@ const POPPER_CONFIG = {
], ],
}; };
export function AnnotationMarker({ annotation, timeZone, style }: Props) { export function AnnotationMarker({ annotation, timeZone, width }: Props) {
const { canAddAnnotations, canEditAnnotations, canDeleteAnnotations, ...panelCtx } = usePanelContext(); const { canAddAnnotations, canEditAnnotations, canDeleteAnnotations, ...panelCtx } = usePanelContext();
const commonStyles = useStyles2(getCommonAnnotationStyles); const commonStyles = useStyles2(getCommonAnnotationStyles);
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
@ -98,15 +101,22 @@ export function AnnotationMarker({ annotation, timeZone, style }: Props) {
); );
}, [canEditAnnotations, canDeleteAnnotations, onAnnotationDelete, onAnnotationEdit, timeFormatter, annotation]); }, [canEditAnnotations, canDeleteAnnotations, onAnnotationDelete, onAnnotationEdit, timeFormatter, annotation]);
const isRegionAnnotation = Boolean(annotation.isRegion); const isRegionAnnotation = Boolean(annotation.isRegion) && width > MIN_REGION_ANNOTATION_WIDTH;
let left = `${width / 2}px`;
let marker = ( let marker = (
<div className={commonStyles(annotation).markerTriangle} style={{ transform: 'translate3d(-100%,-50%, 0)' }} /> <div
className={commonStyles(annotation).markerTriangle}
style={{ left, position: 'relative', transform: 'translate3d(-100%,-50%, 0)' }}
/>
); );
if (isRegionAnnotation) { if (isRegionAnnotation) {
marker = ( marker = (
<div className={commonStyles(annotation).markerBar} style={{ ...style, transform: 'translate3d(0,-50%, 0)' }} /> <div
className={commonStyles(annotation).markerBar}
style={{ width: `${width}px`, transform: 'translate3d(0,-50%, 0)' }}
/>
); );
} }
return ( return (