UNPKG

@grafana/ui

Version:
1 lines 4.3 kB
{"version":3,"file":"EventsCanvas.mjs","sources":["../../../../../src/components/uPlot/geometries/EventsCanvas.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport * as React from 'react';\nimport { useMountedState } from 'react-use';\nimport uPlot from 'uplot';\n\nimport { DataFrame, DataFrameFieldIndex } from '@grafana/data';\n\nimport { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';\n\nimport { Marker } from './Marker';\nimport { XYCanvas } from './XYCanvas';\n\ninterface EventsCanvasProps {\n id: string;\n config: UPlotConfigBuilder;\n events: DataFrame[];\n renderEventMarker: (dataFrame: DataFrame, dataFrameFieldIndex: DataFrameFieldIndex) => React.ReactNode;\n mapEventToXYCoords: (\n dataFrame: DataFrame,\n dataFrameFieldIndex: DataFrameFieldIndex\n ) => { x: number; y: number } | undefined;\n}\n\nexport function EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords, config }: EventsCanvasProps) {\n const plotInstance = useRef<uPlot>();\n // render token required to re-render annotation markers. Rendering lines happens in uPlot and the props do not change\n // so we need to force the re-render when the draw hook was performed by uPlot\n const [renderToken, setRenderToken] = useState(0);\n const isMounted = useMountedState();\n\n useLayoutEffect(() => {\n config.addHook('init', (u) => {\n plotInstance.current = u;\n });\n\n config.addHook('draw', () => {\n if (!isMounted()) {\n return;\n }\n setRenderToken((s) => s + 1);\n });\n }, [config, setRenderToken]);\n\n const eventMarkers = useMemo(() => {\n const markers: React.ReactNode[] = [];\n\n if (!plotInstance.current || events.length === 0) {\n return markers;\n }\n\n for (let i = 0; i < events.length; i++) {\n const frame = events[i];\n for (let j = 0; j < frame.length; j++) {\n const coords = mapEventToXYCoords(frame, { fieldIndex: j, frameIndex: i });\n if (!coords) {\n continue;\n }\n markers.push(\n <Marker {...coords} key={`${id}-marker-${i}-${j}`}>\n {renderEventMarker(frame, { fieldIndex: j, frameIndex: i })}\n </Marker>\n );\n }\n }\n\n return <>{markers}</>;\n }, [events, renderEventMarker, renderToken]);\n\n if (!plotInstance.current) {\n return null;\n }\n\n return (\n <XYCanvas\n left={plotInstance.current.bbox.left / window.devicePixelRatio}\n top={plotInstance.current.bbox.top / window.devicePixelRatio}\n >\n {eventMarkers}\n </XYCanvas>\n );\n}\n"],"names":[],"mappings":";;;;;;AAuBO,SAAS,aAAa,EAAE,EAAA,EAAI,QAAQ,iBAAmB,EAAA,kBAAA,EAAoB,QAA6B,EAAA;AAC7G,EAAA,MAAM,eAAe,MAAc,EAAA;AAGnC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA;AAChD,EAAA,MAAM,YAAY,eAAgB,EAAA;AAElC,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAO,MAAA,CAAA,OAAA,CAAQ,MAAQ,EAAA,CAAC,CAAM,KAAA;AAC5B,MAAA,YAAA,CAAa,OAAU,GAAA,CAAA;AAAA,KACxB,CAAA;AAED,IAAO,MAAA,CAAA,OAAA,CAAQ,QAAQ,MAAM;AAC3B,MAAI,IAAA,CAAC,WAAa,EAAA;AAChB,QAAA;AAAA;AAEF,MAAe,cAAA,CAAA,CAAC,CAAM,KAAA,CAAA,GAAI,CAAC,CAAA;AAAA,KAC5B,CAAA;AAAA,GACA,EAAA,CAAC,MAAQ,EAAA,cAAc,CAAC,CAAA;AAE3B,EAAM,MAAA,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,MAAM,UAA6B,EAAC;AAEpC,IAAA,IAAI,CAAC,YAAA,CAAa,OAAW,IAAA,MAAA,CAAO,WAAW,CAAG,EAAA;AAChD,MAAO,OAAA,OAAA;AAAA;AAGT,IAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,MAAA,CAAO,QAAQ,CAAK,EAAA,EAAA;AACtC,MAAM,MAAA,KAAA,GAAQ,OAAO,CAAC,CAAA;AACtB,MAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,KAAA,CAAM,QAAQ,CAAK,EAAA,EAAA;AACrC,QAAM,MAAA,MAAA,GAAS,mBAAmB,KAAO,EAAA,EAAE,YAAY,CAAG,EAAA,UAAA,EAAY,GAAG,CAAA;AACzE,QAAA,IAAI,CAAC,MAAQ,EAAA;AACX,UAAA;AAAA;AAEF,QAAQ,OAAA,CAAA,IAAA;AAAA,0BACN,aAAA,CAAC,UAAQ,GAAG,MAAA,EAAQ,KAAK,CAAG,EAAA,EAAE,WAAW,CAAC,CAAA,CAAA,EAAI,CAAC,CAC5C,CAAA,EAAA,EAAA,iBAAA,CAAkB,OAAO,EAAE,UAAA,EAAY,GAAG,UAAY,EAAA,CAAA,EAAG,CAC5D;AAAA,SACF;AAAA;AACF;AAGF,IAAA,uCAAU,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,GACjB,EAAA,CAAC,MAAQ,EAAA,iBAAA,EAAmB,WAAW,CAAC,CAAA;AAE3C,EAAI,IAAA,CAAC,aAAa,OAAS,EAAA;AACzB,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAM,EAAA,YAAA,CAAa,OAAQ,CAAA,IAAA,CAAK,OAAO,MAAO,CAAA,gBAAA;AAAA,MAC9C,GAAK,EAAA,YAAA,CAAa,OAAQ,CAAA,IAAA,CAAK,MAAM,MAAO,CAAA,gBAAA;AAAA,MAE3C,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}