@netdata/charts
Version:
Netdata frontend SDK and chart utilities
162 lines • 7.84 kB
JavaScript
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
import React, { useRef, useCallback, memo } from "react";
import styled, { keyframes } from "styled-components";
import { Flex } from "@netdata/netdata-ui";
import { useHeadlessChart } from "../headlessChart";
import { usePlotArea } from "../provider";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var colorMap = {
WARNING: "#FFC300",
CRITICAL: "#FF4136",
CLEAR: "#00AB44"
};
var DEFAULT_HOVER_COLOR = "#808080";
var Container = styled(Flex).withConfig({
displayName: "alertTimeline__Container",
componentId: "sc-1bv52bo-0"
})(["position:relative;height:16px;cursor:crosshair;"]);
var Segment = styled.div.withConfig({
displayName: "alertTimeline__Segment",
componentId: "sc-1bv52bo-1"
})(["position:absolute;height:4px;top:50%;transform:translateY(-50%);"]);
var Dot = styled.div.withConfig({
displayName: "alertTimeline__Dot",
componentId: "sc-1bv52bo-2"
})(["position:absolute;width:10px;height:10px;border-radius:50%;top:50%;transform:translate(-50%,-50%);border:2px solid ", ";box-sizing:border-box;z-index:1;"], function (_ref) {
var theme = _ref.theme;
return theme.colors.mainBackground;
});
var pulse = keyframes(["0%{opacity:1;box-shadow:0 0 4px 1px var(--pulse-color);}50%{opacity:0.7;box-shadow:0 0 8px 3px var(--pulse-color);}100%{opacity:1;box-shadow:0 0 4px 1px var(--pulse-color);}"]);
var HoverIndicator = styled.div.withConfig({
displayName: "alertTimeline__HoverIndicator",
componentId: "sc-1bv52bo-3"
})(["position:absolute;width:2px;height:100%;background:var(--pulse-color);top:0;transform:translateX(-50%);pointer-events:none;z-index:2;border-radius:1px;animation:", " 1.2s ease-in-out infinite;"], pulse);
var parseTimestamp = function parseTimestamp(timestamp) {
if (typeof timestamp === "number") return timestamp * 1000;
return new Date(timestamp).getTime();
};
var AlertTimeline = function AlertTimeline() {
var _chart$getAttribute, _hover$;
var containerRef = useRef(null);
var _useHeadlessChart = useHeadlessChart(),
chart = _useHeadlessChart.chart,
hover = _useHeadlessChart.hover,
helpers = _useHeadlessChart.helpers,
attributes = _useHeadlessChart.attributes;
var _usePlotArea = usePlotArea(),
plotLeft = _usePlotArea.left,
plotWidth = _usePlotArea.width;
var _ref2 = ((_chart$getAttribute = chart.getAttribute("overlays")) === null || _chart$getAttribute === void 0 ? void 0 : _chart$getAttribute.alertTransitions) || {},
_ref2$transitions = _ref2.transitions,
transitions = _ref2$transitions === void 0 ? [] : _ref2$transitions,
_ref2$showCleared = _ref2.showCleared,
showCleared = _ref2$showCleared === void 0 ? true : _ref2$showCleared;
var after = attributes.after;
var before = attributes.before;
var now = Date.now();
var viewStart = after < 0 ? now + after * 1000 : after * 1000;
var viewEnd = before <= 0 ? now : before * 1000;
var viewDuration = viewEnd - viewStart;
var getPositionPercent = useCallback(function (timestampMs) {
if (viewDuration <= 0) return 0;
return (timestampMs - viewStart) / viewDuration * 100;
}, [viewStart, viewDuration]);
var sortedTransitions = _toConsumableArray(transitions).sort(function (a, b) {
return parseTimestamp(a.timestamp) - parseTimestamp(b.timestamp);
});
var segments = [];
var dots = [];
sortedTransitions.forEach(function (transition, index) {
var startMs = parseTimestamp(transition.timestamp);
var nextTransition = sortedTransitions[index + 1];
var endMs = nextTransition ? parseTimestamp(nextTransition.timestamp) : viewEnd;
if (endMs < viewStart || startMs > viewEnd) return;
var state = transition.to.toUpperCase();
var color = colorMap[state];
if (!color) return;
if (!showCleared && state === "CLEAR") return;
var clampedStart = Math.max(viewStart, startMs);
var clampedEnd = Math.min(viewEnd, endMs);
var leftPercent = getPositionPercent(clampedStart);
var rightPercent = getPositionPercent(clampedEnd);
var widthPercent = rightPercent - leftPercent;
segments.push({
key: "segment-".concat(index),
left: "".concat(leftPercent, "%"),
width: "".concat(widthPercent, "%"),
color: color
});
if (startMs >= viewStart && startMs <= viewEnd) {
dots.push({
key: "dot-".concat(index),
left: "".concat(getPositionPercent(startMs), "%"),
color: color
});
}
});
var hoverTimestamp = (_hover$ = hover === null || hover === void 0 ? void 0 : hover[0]) !== null && _hover$ !== void 0 ? _hover$ : null;
var hoverPercent = hoverTimestamp ? getPositionPercent(hoverTimestamp) : null;
var getColorAtTimestamp = function getColorAtTimestamp(timestamp) {
if (!timestamp) return DEFAULT_HOVER_COLOR;
for (var i = sortedTransitions.length - 1; i >= 0; i--) {
var transition = sortedTransitions[i];
var transitionMs = parseTimestamp(transition.timestamp);
if (timestamp >= transitionMs) {
var state = transition.to.toUpperCase();
if (!showCleared && state === "CLEAR") return DEFAULT_HOVER_COLOR;
return colorMap[state] || DEFAULT_HOVER_COLOR;
}
}
return DEFAULT_HOVER_COLOR;
};
var hoverColor = getColorAtTimestamp(hoverTimestamp);
var handleMouseMove = useCallback(function (event) {
if (!containerRef.current) return;
var rect = containerRef.current.getBoundingClientRect();
var x = event.clientX - rect.left;
var percent = x / rect.width;
var timestamp = viewStart + percent * viewDuration;
chart.sdk.trigger("highlightHover", chart, timestamp, null);
chart.trigger("highlightHover", timestamp, null);
}, [chart, viewStart, viewDuration]);
var handleMouseLeave = useCallback(function () {
chart.sdk.trigger("highlightBlur", chart);
chart.trigger("highlightBlur");
}, [chart]);
return /*#__PURE__*/_jsxs(Container, {
ref: containerRef,
onMouseMove: handleMouseMove,
onMouseLeave: handleMouseLeave,
style: {
marginLeft: plotLeft,
width: plotWidth
},
children: [segments.map(function (segment) {
return /*#__PURE__*/_jsx(Segment, {
style: {
left: segment.left,
width: segment.width,
backgroundColor: segment.color
}
}, segment.key);
}), dots.map(function (dot) {
return /*#__PURE__*/_jsx(Dot, {
style: {
left: dot.left,
backgroundColor: dot.color
}
}, dot.key);
}), hoverPercent !== null && hoverPercent >= 0 && hoverPercent <= 100 && /*#__PURE__*/_jsx(HoverIndicator, {
style: {
left: "".concat(hoverPercent, "%"),
"--pulse-color": hoverColor
}
})]
});
};
export default /*#__PURE__*/memo(AlertTimeline);