@grafana/ui/dist/cjs/components/uPlot/geometries/EventsCanvas.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var reactUse = require('react-use');
var Marker = require('./Marker.cjs');
var XYCanvas = require('./XYCanvas.cjs');

"use strict";
function EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords, config }) {
  const plotInstance = React.useRef(void 0);
  const [renderToken, setRenderToken] = React.useState(0);
  const isMounted = reactUse.useMountedState();
  React.useLayoutEffect(() => {
    config.addHook("init", (u) => {
      plotInstance.current = u;
    });
    config.addHook("draw", () => {
      if (!isMounted()) {
        return;
      }
      setRenderToken((s) => s + 1);
    });
  }, [config, setRenderToken]);
  const eventMarkers = React.useMemo(() => {
    const markers = [];
    if (!plotInstance.current || events.length === 0) {
      return markers;
    }
    for (let i = 0; i < events.length; i++) {
      const frame = events[i];
      for (let j = 0; j < frame.length; j++) {
        const coords = mapEventToXYCoords(frame, j);
        if (!coords) {
          continue;
        }
        markers.push(
          /* @__PURE__ */ React.createElement(Marker.Marker, { ...coords, key: `${id}-marker-${i}-${j}` }, renderEventMarker(frame, j))
        );
      }
    }
    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: markers });
  }, [events, renderEventMarker, renderToken]);
  if (!plotInstance.current) {
    return null;
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    XYCanvas.XYCanvas,
    {
      left: plotInstance.current.bbox.left / window.devicePixelRatio,
      top: plotInstance.current.bbox.top / window.devicePixelRatio,
      children: eventMarkers
    }
  );
}

exports.EventsCanvas = EventsCanvas;
//# sourceMappingURL=EventsCanvas.cjs.map