@cloudtower/eagle 4100.0.18 → 4100.0.19

package/dist/cjs/core/LineChart/ForecastLineLayer.js

@@ -0,0 +1,134 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lineChartDisplayUtils = require('./lineChartDisplayUtils.js');
+var lineSegments = require('./lineSegments.js');
+var _ = require('lodash');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var ___default = /*#__PURE__*/_interopDefault(_);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const DEFAULT_FORECAST_LINE_STROKE_DASHARRAY = "4 4";
+const ForecastLineLayer = ({
+  forecastStartTimestamp,
+  stacked = false,
+  hovering,
+  streams,
+  deselected,
+  offset,
+  xAxisMap,
+  yAxisMap
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const clipPathId = React__default.default.useMemo(() => {
+    return ___default.default.uniqueId("line-chart-forecast-");
+  }, []);
+  const xScale = (_a = Object.values(xAxisMap || {})[0]) == null ? void 0 : _a.scale;
+  const yScale = (_b = Object.values(yAxisMap || {})[0]) == null ? void 0 : _b.scale;
+  const offsetLeft = (_c = offset == null ? void 0 : offset.left) != null ? _c : 0;
+  const offsetTop = (_d = offset == null ? void 0 : offset.top) != null ? _d : 0;
+  const offsetWidth = (_e = offset == null ? void 0 : offset.width) != null ? _e : 0;
+  const offsetHeight = (_f = offset == null ? void 0 : offset.height) != null ? _f : 0;
+  const lines = React__default.default.useMemo(() => {
+    if (!Number.isFinite(forecastStartTimestamp) || typeof xScale !== "function" || typeof yScale !== "function" || !offsetWidth || !offsetHeight) {
+      return [];
+    }
+    const pointMaps = streams.map(
+      (stream) => new Map(stream.points.map((point) => [point.t, point]))
+    );
+    const timestamps = stacked ? Array.from(
+      new Set(
+        streams.flatMap(
+          (stream) => stream.points.map((point) => point.t).filter(lineChartDisplayUtils.isFiniteNumber)
+        )
+      )
+    ).sort((a, b) => a - b) : [];
+    return streams.flatMap((stream, streamIndex) => {
+      if (deselected.includes(stream.legend.id)) {
+        return [];
+      }
+      const points = stacked ? timestamps.map((timestamp) => {
+        const currentPoint = pointMaps[streamIndex].get(timestamp);
+        if (!lineChartDisplayUtils.isFiniteNumber(currentPoint == null ? void 0 : currentPoint.v)) {
+          return { t: timestamp, x: xScale(timestamp), y: void 0 };
+        }
+        const stackedValue = streams.reduce((sum, item, index) => {
+          var _a2;
+          if (index > streamIndex || deselected.includes(item.legend.id)) {
+            return sum;
+          }
+          const value = (_a2 = pointMaps[index].get(timestamp)) == null ? void 0 : _a2.v;
+          return sum + (lineChartDisplayUtils.isFiniteNumber(value) ? value : 0);
+        }, 0);
+        return {
+          t: timestamp,
+          x: xScale(timestamp),
+          y: yScale(stackedValue)
+        };
+      }) : stream.points.map((point) => ({
+        t: point.t,
+        x: lineChartDisplayUtils.isFiniteNumber(point.t) ? xScale(point.t) : void 0,
+        y: lineChartDisplayUtils.isFiniteNumber(point.v) ? yScale(point.v) : void 0
+      }));
+      const segments = lineSegments.getLineChartLineSegments(points, forecastStartTimestamp);
+      return segments.map((segment, segmentIndex) => ({
+        dashed: segment.dashed,
+        key: `${stream.legend.id}-${segmentIndex}-${segment.points[0].t}`,
+        legendId: stream.legend.id,
+        path: lineSegments.getLineChartLinePath(segment.points),
+        stroke: lineChartDisplayUtils.getLineChartStreamStroke(stream)
+      }));
+    });
+  }, [
+    forecastStartTimestamp,
+    offsetHeight,
+    offsetWidth,
+    deselected,
+    stacked,
+    streams,
+    xScale,
+    yScale
+  ]);
+  if (!lines.length || !offsetWidth || !offsetHeight) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.default.createElement(
+    "g",
+    {
+      className: "line-chart-forecast-lines",
+      "data-testid": "line-chart-forecast-lines",
+      style: { pointerEvents: "none" }
+    },
+    /* @__PURE__ */ React__default.default.createElement("defs", null, /* @__PURE__ */ React__default.default.createElement("clipPath", { id: clipPathId }, /* @__PURE__ */ React__default.default.createElement(
+      "rect",
+      {
+        x: offsetLeft,
+        y: offsetTop,
+        width: offsetWidth,
+        height: offsetHeight
+      }
+    ))),
+    /* @__PURE__ */ React__default.default.createElement("g", { clipPath: `url(#${clipPathId})` }, lines.map((line) => {
+      return /* @__PURE__ */ React__default.default.createElement(
+        "path",
+        {
+          key: line.key,
+          className: "line-chart-forecast-line",
+          d: line.path,
+          fill: "none",
+          opacity: hovering.includes(line.legendId) ? 0.3 : 1,
+          stroke: line.stroke,
+          strokeDasharray: line.dashed ? DEFAULT_FORECAST_LINE_STROKE_DASHARRAY : void 0
+        }
+      );
+    }))
+  );
+};
+var ForecastLineLayer$1 = ForecastLineLayer;
+
+exports.DEFAULT_FORECAST_LINE_STROKE_DASHARRAY = DEFAULT_FORECAST_LINE_STROKE_DASHARRAY;
+exports.default = ForecastLineLayer$1;

package/dist/cjs/core/LineChart/LineChartActions.js

@@ -27,8 +27,8 @@ var __spreadValues = (a, b) => {
   }
   return a;
 };
-const actionStyle = "E_4100_0_18_a9y3flr";
-const actionStyleLabel = "E_4100_0_18_a1njc627";
+const actionStyle = "E_4100_0_19_a9y3flr";
+const actionStyleLabel = "E_4100_0_19_a1njc627";
 const LineChartActions = props => {
   const {
     label,

package/dist/cjs/core/LineChart/RenderChart.js

@@ -6,22 +6,31 @@ var styled = require('./styled.js');
 var TooltipFormatter = require('./TooltipFormatter.js');
 var type = require('./type.js');
 var utils = require('./utils.js');
+var areaHighlightUtils = require('./areaHighlightUtils.js');
+var lineChartDisplayUtils = require('./lineChartDisplayUtils.js');
 var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
 var antd = require('antd');
 var cs = require('classnames');
 var dayjs = require('dayjs');
+var _ = require('lodash');
 var React = require('react');
 var recharts = require('recharts');
+var AreaHighlightLayer = require('./AreaHighlightLayer.js');
+var ForecastLineLayer = require('./ForecastLineLayer.js');
 var LineChartToolBar = require('./LineChartToolBar.js');
+var ThresholdIntersectionLayer = require('./ThresholdIntersectionLayer.js');
 var chart = require('../../store/chart.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var cs__default = /*#__PURE__*/_interopDefault(cs);
 var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+var ___default = /*#__PURE__*/_interopDefault(_);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -37,7 +46,11 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const DEFAULT_THRESHOLD_LINE_STROKE = "#ff4d4f";
+const DEFAULT_THRESHOLD_LINE_DASHARRAY = "4 4";
 const RenderChart = (props) => {
+  var _a;
   const {
     metricName,
     showLegend,
@@ -48,8 +61,11 @@ const RenderChart = (props) => {
     type: type$1,
     mode = "legend",
     dropdownProps,
-    onLabelsChange,
     metric,
+    areaHighlightRanges,
+    forecastStartTimestamp,
+    thresholdLineProps,
+    renderThresholdTooltip,
     yAxisProps,
     xAxisProps,
     actionsProps,
@@ -65,6 +81,7 @@ const RenderChart = (props) => {
   const [hovering, setHovering] = React.useState([]);
   const [hoveringSelf, setHoveringSelf] = React.useState([]);
   const [tempDeselected, setTempDeselected] = React.useState([]);
+  const [hoveredThresholdIntersection, setHoveredThresholdIntersection] = React.useState(null);
   const streams = React.useMemo(() => metric.sample_streams, [metric]);
   const legends = React.useMemo(() => {
     return metric.sample_streams.map((stream) => stream.legend);
@@ -73,21 +90,119 @@ const RenderChart = (props) => {
     () => utils.convertLineChartDataStruct(streams.map((stream) => stream.points)),
     [streams]
   );
-  const yDomain = utils.getYAxisDomain(areaChartData, type$1, metric.unit);
-  const xDomain = utils.getLineChartXAxisDomain(dateRange, dateRange[1].valueOf());
+  const xDomainStart = dateRange[0].valueOf();
+  const xDomainEnd = dateRange[1].valueOf();
+  const xDomain = React.useMemo(
+    () => [xDomainStart, xDomainEnd],
+    [xDomainStart, xDomainEnd]
+  );
+  const thresholdValue = thresholdLineProps == null ? void 0 : thresholdLineProps.value;
+  const thresholdExtraValues = React.useMemo(() => {
+    if (___default.default.isNumber(thresholdValue)) {
+      return [thresholdValue];
+    }
+    return [];
+  }, [thresholdValue]);
+  const yDomain = (_a = yAxisProps == null ? void 0 : yAxisProps.domain) != null ? _a : utils.getYAxisDomain(areaChartData, type$1, metric.unit, thresholdExtraValues);
+  const yTicks = lineChartDisplayUtils.getLineChartDefaultYAxisTicks(yDomain);
   const xTicks = utils.lineChartXaxisCal(xDomain[1], dateRange, width);
+  const normalizedAreaHighlightRanges = React.useMemo(() => {
+    return utils.getLineChartAreaHighlightRanges(areaHighlightRanges, xDomain);
+  }, [areaHighlightRanges, xDomain]);
+  const thresholdIntersectionLabelProps = thresholdLineProps == null ? void 0 : thresholdLineProps.intersectionLabelProps;
+  const hasForecastStartTimestamp = Number.isFinite(forecastStartTimestamp);
+  const areaHighlightOverlays = React.useMemo(() => {
+    if (type$1 !== type.ILineChartGraphType.Area) {
+      return [];
+    }
+    return normalizedAreaHighlightRanges.flatMap((range, rangeIndex) => {
+      return streams.flatMap((stream, streamIndex) => {
+        var _a2;
+        if (range.legendId && stream.legend.id !== range.legendId) {
+          return [];
+        }
+        const data = areaHighlightUtils.getLineChartAreaHighlightRuns(stream.points, range);
+        if (!data.length) {
+          return [];
+        }
+        return [
+          {
+            key: `${stream.legend.id}-${range.start}-${range.end}-${rangeIndex}-${streamIndex}`,
+            data,
+            fill: range.fill,
+            fillOpacity: (_a2 = range.fillOpacity) != null ? _a2 : 0.18,
+            legendId: stream.legend.id,
+            stroke: lineChartDisplayUtils.getLineChartStreamStroke(stream)
+          }
+        ];
+      });
+    });
+  }, [normalizedAreaHighlightRanges, streams, type$1]);
+  const formatIntersectionValue = React.useCallback(
+    (streamIndex, value, timestamp) => {
+      var _a2, _b, _c;
+      if (!tooltipProps.format) {
+        return utils.lineChartYaxisTickFormatter(value, metric.unit);
+      }
+      const payload = {
+        color: (_a2 = legends[streamIndex]) == null ? void 0 : _a2.color,
+        dataKey: `v${streamIndex}`,
+        fill: (_b = legends[streamIndex]) == null ? void 0 : _b.fill,
+        name: `v${streamIndex}`,
+        payload: {
+          [`v${streamIndex}`]: value,
+          t: timestamp,
+          v: value
+        },
+        stroke: (_c = legends[streamIndex]) == null ? void 0 : _c.color,
+        value
+      };
+      return tooltipProps.format(payload);
+    },
+    [legends, metric.unit, tooltipProps]
+  );
+  const thresholdIntersections = React.useMemo(() => {
+    if (!___default.default.isNumber(thresholdValue)) {
+      return [];
+    }
+    const formattedThresholdValue = utils.lineChartYaxisTickFormatter(
+      thresholdValue,
+      metric.unit
+    );
+    return utils.getLineChartThresholdIntersections(
+      streams,
+      thresholdValue,
+      xDomain
+    ).map((intersection) => {
+      return __spreadProps(__spreadValues({}, intersection), {
+        formattedThresholdValue,
+        formattedValue: formatIntersectionValue(
+          intersection.streamIndex,
+          intersection.value,
+          intersection.timestamp
+        ),
+        thresholdValue
+      });
+    });
+  }, [formatIntersectionValue, metric.unit, streams, thresholdValue, xDomain]);
+  const visibleThresholdIntersections = React.useMemo(() => {
+    return thresholdIntersections.filter((intersection) => {
+      return !deselected.includes(intersection.legend.id);
+    });
+  }, [deselected, thresholdIntersections]);
   const onLegendClick = React.useCallback(
     (id) => {
+      setHoveredThresholdIntersection(null);
       setDeselected((prev) => {
-        var _a;
+        var _a2;
         const currentDeselected = tempDeselected.length ? tempDeselected : prev;
         if (currentDeselected.length === 0) {
           return streams.map((stream) => stream.legend.id).filter((legendId) => legendId !== id);
         }
         if (currentDeselected.length === streams.length - 1) {
-          const highlightedId = (_a = streams.find(
+          const highlightedId = (_a2 = streams.find(
             (stream) => !currentDeselected.includes(stream.legend.id)
-          )) == null ? void 0 : _a.legend.id;
+          )) == null ? void 0 : _a2.legend.id;
           if (id === highlightedId) {
             return [];
           } else {
@@ -162,6 +277,7 @@ const RenderChart = (props) => {
     [deselected, streams, tempDeselected]
   );
   const hidePointer = React.useCallback(() => {
+    setHoveredThresholdIntersection(null);
     dispatch({
       type: chart.ChartActions.SET_POINTER,
       payload: { visible: false, uuid: syncId }
@@ -169,10 +285,14 @@ const RenderChart = (props) => {
   }, [dispatch, syncId]);
   const handleMouseMove = React.useCallback(
     (e) => {
-      var _a;
+      var _a2;
       if (e.isTooltipActive) {
         const { chartX, activePayload } = e;
-        if (!((_a = activePayload == null ? void 0 : activePayload[0]) == null ? void 0 : _a.payload)) {
+        const activeMetricPayload = (_a2 = utils.getLineChartMetricPayloadMatches(
+          activePayload,
+          legends
+        )[0]) == null ? void 0 : _a2.payload;
+        if (!(activeMetricPayload == null ? void 0 : activeMetricPayload.payload)) {
           return;
         }
         dispatch({
@@ -181,19 +301,73 @@ const RenderChart = (props) => {
             uuid: syncId,
             visible: true,
             left: chartX,
-            text: dayjs__default.default(Number(activePayload[0].payload.t)).format(
+            text: dayjs__default.default(Number(activeMetricPayload.payload.t)).format(
               "MM/DD HH:mm:ss"
             ),
-            value: activePayload[0].payload.v
+            value: activeMetricPayload.payload.v
           }
         });
       }
     },
-    [dispatch, syncId]
+    [dispatch, legends, syncId]
   );
+  const handleThresholdIntersectionEnter = React.useCallback(
+    (info, left, top) => {
+      setHoveredThresholdIntersection({
+        info,
+        left,
+        top
+      });
+    },
+    []
+  );
+  const thresholdTooltipContent = React.useMemo(() => {
+    if (!hoveredThresholdIntersection) {
+      return null;
+    }
+    const renderer = thresholdLineProps == null ? void 0 : thresholdLineProps.renderTooltip;
+    if (renderer) {
+      return renderer(hoveredThresholdIntersection.info);
+    }
+    if (renderThresholdTooltip) {
+      return renderThresholdTooltip(
+        lineChartDisplayUtils.getLineChartLegacyThresholdTooltipInfo(
+          hoveredThresholdIntersection.info
+        )
+      );
+    }
+    const showHoveredThresholdIntersectionLabel = ThresholdIntersectionLayer.isThresholdIntersectionLabelVisible(
+      thresholdIntersectionLabelProps,
+      hoveredThresholdIntersection.info
+    );
+    if (showHoveredThresholdIntersectionLabel) {
+      return null;
+    }
+    return /* @__PURE__ */ React__default.default.createElement(
+      TooltipFormatter.LineChartTooltipContent,
+      {
+        title: dayjs__default.default(hoveredThresholdIntersection.info.timestamp).format(
+          "MM/DD HH:mm:ss"
+        ),
+        items: [
+          {
+            id: hoveredThresholdIntersection.info.legend.id,
+            color: hoveredThresholdIntersection.info.legend.color,
+            label: hoveredThresholdIntersection.info.legend.name,
+            value: hoveredThresholdIntersection.info.formattedValue
+          }
+        ]
+      }
+    );
+  }, [
+    thresholdIntersectionLabelProps,
+    hoveredThresholdIntersection,
+    renderThresholdTooltip,
+    thresholdLineProps == null ? void 0 : thresholdLineProps.renderTooltip
+  ]);
   if (!(streams == null ? void 0 : streams.length) || streams.every((stream) => {
-    var _a;
-    return !((_a = stream.points) == null ? void 0 : _a.length);
+    var _a2;
+    return !((_a2 = stream.points) == null ? void 0 : _a2.length);
   })) {
     return /* @__PURE__ */ React__default.default.createElement("div", { className: styled.MetricLegendTabStyle }, /* @__PURE__ */ React__default.default.createElement("div", { className: "name-toolbar" }, /* @__PURE__ */ React__default.default.createElement(
       LineChartLegend.default,
@@ -231,11 +405,21 @@ const RenderChart = (props) => {
       dropdownProps,
       onLegendHover
     }
-  ), /* @__PURE__ */ React__default.default.createElement(recharts.ResponsiveContainer, { height }, /* @__PURE__ */ React__default.default.createElement(
+  ), /* @__PURE__ */ React__default.default.createElement(styled.ChartContentWrapper, { style: { height } }, /* @__PURE__ */ React__default.default.createElement(recharts.ResponsiveContainer, { height: "100%" }, /* @__PURE__ */ React__default.default.createElement(
     recharts.AreaChart,
     {
       style: { backgroundColor: "white" },
-      margin: showLegend ? { top: 10, left: -20, right: 0, bottom: 0 } : { top: 20, left: -20, right: 0, bottom: 5 },
+      margin: showLegend ? {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      } : {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 5
+      },
       data: areaChartData,
       syncId,
       onMouseLeave: hidePointer,
@@ -269,16 +453,32 @@ const RenderChart = (props) => {
           dy: 16,
           fontSize: 12
         },
-        ticks: [yDomain[1] / 2, yDomain[1]],
+        ticks: yTicks,
         tickFormatter: (tick) => utils.lineChartYaxisTickFormatter(tick, metric.unit)
       }, yAxisProps)
     ),
+    ___default.default.isNumber(thresholdValue) && /* @__PURE__ */ React__default.default.createElement(
+      recharts.ReferenceLine,
+      {
+        "data-testid": "line-chart-threshold-line",
+        className: cs__default.default(
+          "line-chart-threshold-line",
+          thresholdLineProps == null ? void 0 : thresholdLineProps.className
+        ),
+        style: thresholdLineProps == null ? void 0 : thresholdLineProps.style,
+        y: thresholdValue,
+        stroke: (thresholdLineProps == null ? void 0 : thresholdLineProps.stroke) || DEFAULT_THRESHOLD_LINE_STROKE,
+        strokeDasharray: (thresholdLineProps == null ? void 0 : thresholdLineProps.strokeDasharray) || DEFAULT_THRESHOLD_LINE_DASHARRAY,
+        ifOverflow: "discard",
+        isFront: true
+      }
+    ),
     /* @__PURE__ */ React__default.default.createElement(
       recharts.Tooltip,
       __spreadValues({
         wrapperStyle: { left: 20 },
         content: tooltipProps.format && /* @__PURE__ */ React__default.default.createElement(
-          TooltipFormatter,
+          TooltipFormatter.default,
           {
             deselected,
             legends,
@@ -297,19 +497,73 @@ const RenderChart = (props) => {
           key: index,
           dataKey: `v${index}`,
           stackId: type$1 === type.ILineChartGraphType.Stack ? "stack" : void 0,
-          stroke: item.legend.stroke ? `${item.legend.color}1A` : item.legend.color,
+          stroke: hasForecastStartTimestamp ? "none" : lineChartDisplayUtils.getLineChartStreamStroke(item),
           fill: item.legend.fill,
           isAnimationActive: false,
           activeDot: {
             stroke: item.legend.color,
             r: 4,
             strokeWidth: 2,
-            fill: "white"
+            fill: "white",
+            strokeOpacity: 1,
+            fillOpacity: 1
           },
           opacity: hovering.includes(item.legend.id) ? 0.3 : 1
         }
       );
-    })
+    }),
+    areaHighlightOverlays.map((overlay) => {
+      if (deselected.includes(overlay.legendId)) {
+        return null;
+      }
+      return /* @__PURE__ */ React__default.default.createElement(
+        recharts.Customized,
+        {
+          key: overlay.key,
+          component: AreaHighlightLayer,
+          overlay,
+          hovering,
+          forecastStartTimestamp
+        }
+      );
+    }),
+    hasForecastStartTimestamp && /* @__PURE__ */ React__default.default.createElement(
+      recharts.Customized,
+      {
+        key: "line-chart-forecast-lines",
+        component: ForecastLineLayer.default,
+        forecastStartTimestamp,
+        stacked: type$1 === type.ILineChartGraphType.Stack,
+        hovering,
+        streams,
+        deselected
+      }
+    ),
+    visibleThresholdIntersections.map((intersection, index) => /* @__PURE__ */ React__default.default.createElement(
+      recharts.Customized,
+      {
+        key: `${intersection.legend.id}-${intersection.timestamp}-${index}`,
+        component: ThresholdIntersectionLayer.default,
+        intersection,
+        index,
+        hovering,
+        intersectionLabelProps: thresholdIntersectionLabelProps,
+        thresholdStroke: thresholdLineProps == null ? void 0 : thresholdLineProps.stroke,
+        onMouseEnter: handleThresholdIntersectionEnter,
+        onMouseLeave: () => setHoveredThresholdIntersection(null)
+      }
+    ))
+  )), hoveredThresholdIntersection && thresholdTooltipContent && /* @__PURE__ */ React__default.default.createElement(
+    styled.ThresholdTooltipOverlay,
+    {
+      "data-testid": "line-chart-threshold-tooltip",
+      role: "tooltip",
+      style: {
+        left: hoveredThresholdIntersection.left,
+        top: hoveredThresholdIntersection.top
+      }
+    },
+    thresholdTooltipContent
   )));
 };
 var RenderChart$1 = RenderChart;