@cloudtower/eagle 4100.0.18 → 4100.0.19

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

@@ -21,8 +21,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/esm/core/LineChart/RenderChart.js

@@ -1,19 +1,27 @@
 import { useKitDispatch } from '../KitStoreProvider/index.js';
 import LineChartLegend from './LineChartLegend.js';
-import { MetricLegendTabStyle } from './styled.js';
-import TooltipFormatter from './TooltipFormatter.js';
+import { MetricLegendTabStyle, ChartContentWrapper, ThresholdTooltipOverlay } from './styled.js';
+import TooltipFormatter, { LineChartTooltipContent } from './TooltipFormatter.js';
 import { ILineChartGraphType } from './type.js';
-import { convertLineChartDataStruct, getYAxisDomain, getLineChartXAxisDomain, lineChartXaxisCal, lineChartYaxisTickFormatter, lineChartTickFormatter } from './utils.js';
+import { convertLineChartDataStruct, getYAxisDomain, lineChartXaxisCal, getLineChartAreaHighlightRanges, lineChartYaxisTickFormatter, getLineChartThresholdIntersections, getLineChartMetricPayloadMatches, lineChartTickFormatter } from './utils.js';
+import { getLineChartAreaHighlightRuns } from './areaHighlightUtils.js';
+import { getLineChartDefaultYAxisTicks, getLineChartStreamStroke, getLineChartLegacyThresholdTooltipInfo } from './lineChartDisplayUtils.js';
 import useParrotTranslation from '../../hooks/useParrotTranslation.js';
 import { Empty } from 'antd';
 import cs from 'classnames';
 import dayjs from 'dayjs';
+import _ from 'lodash';
 import React__default, { useState, useMemo, useCallback } from 'react';
-import { ResponsiveContainer, AreaChart, XAxis, YAxis, Tooltip, Area } from 'recharts';
+import { ResponsiveContainer, AreaChart, XAxis, YAxis, ReferenceLine, Tooltip, Area, Customized } from 'recharts';
+import AreaHighlightLayer from './AreaHighlightLayer.js';
+import ForecastLineLayer from './ForecastLineLayer.js';
 import LineChartToolBar from './LineChartToolBar.js';
+import ThresholdIntersectionLayer, { isThresholdIntersectionLabelVisible } from './ThresholdIntersectionLayer.js';
 import { ChartActions } from '../../store/chart.js';
 
 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;
@@ -29,7 +37,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,
@@ -40,8 +52,11 @@ const RenderChart = (props) => {
     type,
     mode = "legend",
     dropdownProps,
-    onLabelsChange,
     metric,
+    areaHighlightRanges,
+    forecastStartTimestamp,
+    thresholdLineProps,
+    renderThresholdTooltip,
     yAxisProps,
     xAxisProps,
     actionsProps,
@@ -57,6 +72,7 @@ const RenderChart = (props) => {
   const [hovering, setHovering] = useState([]);
   const [hoveringSelf, setHoveringSelf] = useState([]);
   const [tempDeselected, setTempDeselected] = useState([]);
+  const [hoveredThresholdIntersection, setHoveredThresholdIntersection] = useState(null);
   const streams = useMemo(() => metric.sample_streams, [metric]);
   const legends = useMemo(() => {
     return metric.sample_streams.map((stream) => stream.legend);
@@ -65,21 +81,119 @@ const RenderChart = (props) => {
     () => convertLineChartDataStruct(streams.map((stream) => stream.points)),
     [streams]
   );
-  const yDomain = getYAxisDomain(areaChartData, type, metric.unit);
-  const xDomain = getLineChartXAxisDomain(dateRange, dateRange[1].valueOf());
+  const xDomainStart = dateRange[0].valueOf();
+  const xDomainEnd = dateRange[1].valueOf();
+  const xDomain = useMemo(
+    () => [xDomainStart, xDomainEnd],
+    [xDomainStart, xDomainEnd]
+  );
+  const thresholdValue = thresholdLineProps == null ? void 0 : thresholdLineProps.value;
+  const thresholdExtraValues = useMemo(() => {
+    if (_.isNumber(thresholdValue)) {
+      return [thresholdValue];
+    }
+    return [];
+  }, [thresholdValue]);
+  const yDomain = (_a = yAxisProps == null ? void 0 : yAxisProps.domain) != null ? _a : getYAxisDomain(areaChartData, type, metric.unit, thresholdExtraValues);
+  const yTicks = getLineChartDefaultYAxisTicks(yDomain);
   const xTicks = lineChartXaxisCal(xDomain[1], dateRange, width);
+  const normalizedAreaHighlightRanges = useMemo(() => {
+    return getLineChartAreaHighlightRanges(areaHighlightRanges, xDomain);
+  }, [areaHighlightRanges, xDomain]);
+  const thresholdIntersectionLabelProps = thresholdLineProps == null ? void 0 : thresholdLineProps.intersectionLabelProps;
+  const hasForecastStartTimestamp = Number.isFinite(forecastStartTimestamp);
+  const areaHighlightOverlays = useMemo(() => {
+    if (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 = 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: getLineChartStreamStroke(stream)
+          }
+        ];
+      });
+    });
+  }, [normalizedAreaHighlightRanges, streams, type]);
+  const formatIntersectionValue = useCallback(
+    (streamIndex, value, timestamp) => {
+      var _a2, _b, _c;
+      if (!tooltipProps.format) {
+        return 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 = useMemo(() => {
+    if (!_.isNumber(thresholdValue)) {
+      return [];
+    }
+    const formattedThresholdValue = lineChartYaxisTickFormatter(
+      thresholdValue,
+      metric.unit
+    );
+    return 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 = useMemo(() => {
+    return thresholdIntersections.filter((intersection) => {
+      return !deselected.includes(intersection.legend.id);
+    });
+  }, [deselected, thresholdIntersections]);
   const onLegendClick = 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 {
@@ -154,6 +268,7 @@ const RenderChart = (props) => {
     [deselected, streams, tempDeselected]
   );
   const hidePointer = useCallback(() => {
+    setHoveredThresholdIntersection(null);
     dispatch({
       type: ChartActions.SET_POINTER,
       payload: { visible: false, uuid: syncId }
@@ -161,10 +276,14 @@ const RenderChart = (props) => {
   }, [dispatch, syncId]);
   const handleMouseMove = 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 = getLineChartMetricPayloadMatches(
+          activePayload,
+          legends
+        )[0]) == null ? void 0 : _a2.payload;
+        if (!(activeMetricPayload == null ? void 0 : activeMetricPayload.payload)) {
           return;
         }
         dispatch({
@@ -173,19 +292,73 @@ const RenderChart = (props) => {
             uuid: syncId,
             visible: true,
             left: chartX,
-            text: dayjs(Number(activePayload[0].payload.t)).format(
+            text: dayjs(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 = useCallback(
+    (info, left, top) => {
+      setHoveredThresholdIntersection({
+        info,
+        left,
+        top
+      });
+    },
+    []
+  );
+  const thresholdTooltipContent = useMemo(() => {
+    if (!hoveredThresholdIntersection) {
+      return null;
+    }
+    const renderer = thresholdLineProps == null ? void 0 : thresholdLineProps.renderTooltip;
+    if (renderer) {
+      return renderer(hoveredThresholdIntersection.info);
+    }
+    if (renderThresholdTooltip) {
+      return renderThresholdTooltip(
+        getLineChartLegacyThresholdTooltipInfo(
+          hoveredThresholdIntersection.info
+        )
+      );
+    }
+    const showHoveredThresholdIntersectionLabel = isThresholdIntersectionLabelVisible(
+      thresholdIntersectionLabelProps,
+      hoveredThresholdIntersection.info
+    );
+    if (showHoveredThresholdIntersectionLabel) {
+      return null;
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      LineChartTooltipContent,
+      {
+        title: dayjs(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.createElement("div", { className: MetricLegendTabStyle }, /* @__PURE__ */ React__default.createElement("div", { className: "name-toolbar" }, /* @__PURE__ */ React__default.createElement(
       LineChartLegend,
@@ -223,11 +396,21 @@ const RenderChart = (props) => {
       dropdownProps,
       onLegendHover
     }
-  ), /* @__PURE__ */ React__default.createElement(ResponsiveContainer, { height }, /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React__default.createElement(ChartContentWrapper, { style: { height } }, /* @__PURE__ */ React__default.createElement(ResponsiveContainer, { height: "100%" }, /* @__PURE__ */ React__default.createElement(
     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,
@@ -261,10 +444,26 @@ const RenderChart = (props) => {
           dy: 16,
           fontSize: 12
         },
-        ticks: [yDomain[1] / 2, yDomain[1]],
+        ticks: yTicks,
         tickFormatter: (tick) => lineChartYaxisTickFormatter(tick, metric.unit)
       }, yAxisProps)
     ),
+    _.isNumber(thresholdValue) && /* @__PURE__ */ React__default.createElement(
+      ReferenceLine,
+      {
+        "data-testid": "line-chart-threshold-line",
+        className: cs(
+          "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.createElement(
       Tooltip,
       __spreadValues({
@@ -289,19 +488,73 @@ const RenderChart = (props) => {
           key: index,
           dataKey: `v${index}`,
           stackId: type === ILineChartGraphType.Stack ? "stack" : void 0,
-          stroke: item.legend.stroke ? `${item.legend.color}1A` : item.legend.color,
+          stroke: hasForecastStartTimestamp ? "none" : 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.createElement(
+        Customized,
+        {
+          key: overlay.key,
+          component: AreaHighlightLayer,
+          overlay,
+          hovering,
+          forecastStartTimestamp
+        }
+      );
+    }),
+    hasForecastStartTimestamp && /* @__PURE__ */ React__default.createElement(
+      Customized,
+      {
+        key: "line-chart-forecast-lines",
+        component: ForecastLineLayer,
+        forecastStartTimestamp,
+        stacked: type === ILineChartGraphType.Stack,
+        hovering,
+        streams,
+        deselected
+      }
+    ),
+    visibleThresholdIntersections.map((intersection, index) => /* @__PURE__ */ React__default.createElement(
+      Customized,
+      {
+        key: `${intersection.legend.id}-${intersection.timestamp}-${index}`,
+        component: ThresholdIntersectionLayer,
+        intersection,
+        index,
+        hovering,
+        intersectionLabelProps: thresholdIntersectionLabelProps,
+        thresholdStroke: thresholdLineProps == null ? void 0 : thresholdLineProps.stroke,
+        onMouseEnter: handleThresholdIntersectionEnter,
+        onMouseLeave: () => setHoveredThresholdIntersection(null)
+      }
+    ))
+  )), hoveredThresholdIntersection && thresholdTooltipContent && /* @__PURE__ */ React__default.createElement(
+    ThresholdTooltipOverlay,
+    {
+      "data-testid": "line-chart-threshold-tooltip",
+      role: "tooltip",
+      style: {
+        left: hoveredThresholdIntersection.left,
+        top: hoveredThresholdIntersection.top
+      }
+    },
+    thresholdTooltipContent
   )));
 };
 var RenderChart$1 = RenderChart;

package/dist/esm/core/LineChart/ThresholdIntersectionLayer.js

@@ -0,0 +1,134 @@
+import React__default from 'react';
+import _ from 'lodash';
+import { ReferenceDot } from 'recharts';
+
+const DEFAULT_THRESHOLD_LINE_STROKE = "#ff4d4f";
+const DEFAULT_THRESHOLD_INTERSECTION_LABEL_TEXT_COLOR = "#ffffff";
+const THRESHOLD_INTERSECTION_LABEL_HEIGHT = 28;
+const THRESHOLD_INTERSECTION_LABEL_RADIUS = 4;
+const THRESHOLD_INTERSECTION_LABEL_OFFSET = 8;
+const THRESHOLD_INTERSECTION_LABEL_PADDING_X = 12;
+const THRESHOLD_INTERSECTION_LABEL_MIN_WIDTH = 48;
+const THRESHOLD_INTERSECTION_LABEL_FONT_SIZE = 12;
+const THRESHOLD_INTERSECTION_CJK_REGEXP = /[\u3400-\u9fff\uf900-\ufaff]/;
+const isThresholdIntersectionLabelVisible = (labelProps, info) => {
+  if (!labelProps) {
+    return false;
+  }
+  const { visible = true } = labelProps;
+  if (_.isFunction(visible)) {
+    return visible(info);
+  }
+  return visible;
+};
+const getThresholdIntersectionLabelText = (labelProps, info) => {
+  const text = labelProps == null ? void 0 : labelProps.text;
+  if (_.isFunction(text)) {
+    return text(info) || info.formattedThresholdValue;
+  }
+  return text || info.formattedThresholdValue;
+};
+const getThresholdIntersectionLabelWidth = (label) => {
+  const contentWidth = Array.from(label).reduce((sum, char) => {
+    return sum + (THRESHOLD_INTERSECTION_CJK_REGEXP.test(char) ? THRESHOLD_INTERSECTION_LABEL_FONT_SIZE : THRESHOLD_INTERSECTION_LABEL_FONT_SIZE * 0.65);
+  }, 0);
+  return Math.max(
+    THRESHOLD_INTERSECTION_LABEL_MIN_WIDTH,
+    Math.ceil(contentWidth) + THRESHOLD_INTERSECTION_LABEL_PADDING_X * 2
+  );
+};
+const ThresholdIntersectionLayer = ({
+  intersection,
+  index,
+  hovering,
+  intersectionLabelProps,
+  thresholdStroke,
+  onMouseEnter,
+  onMouseLeave,
+  xAxisMap,
+  yAxisMap
+}) => {
+  const xAxis = xAxisMap == null ? void 0 : xAxisMap[0];
+  const yAxis = yAxisMap == null ? void 0 : yAxisMap[0];
+  if (typeof (xAxis == null ? void 0 : xAxis.scale) !== "function" || typeof (yAxis == null ? void 0 : yAxis.scale) !== "function") {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    ReferenceDot,
+    {
+      xAxis,
+      yAxis,
+      x: intersection.timestamp,
+      y: intersection.value,
+      isFront: true,
+      shape: (shapeProps) => {
+        const { cx = 0, cy = 0 } = shapeProps;
+        const intersectionOpacity = hovering.includes(intersection.legend.id) ? 0.3 : 1;
+        const showIntersectionLabel = isThresholdIntersectionLabelVisible(
+          intersectionLabelProps,
+          intersection
+        );
+        const intersectionLabelText = showIntersectionLabel ? getThresholdIntersectionLabelText(
+          intersectionLabelProps,
+          intersection
+        ) : "";
+        const intersectionLabelColor = (intersectionLabelProps == null ? void 0 : intersectionLabelProps.color) || thresholdStroke || DEFAULT_THRESHOLD_LINE_STROKE;
+        const intersectionLabelTextColor = (intersectionLabelProps == null ? void 0 : intersectionLabelProps.textColor) || DEFAULT_THRESHOLD_INTERSECTION_LABEL_TEXT_COLOR;
+        const intersectionLabelWidth = getThresholdIntersectionLabelWidth(
+          intersectionLabelText
+        );
+        const intersectionLabelX = cx - intersectionLabelWidth / 2;
+        const intersectionLabelY = cy - THRESHOLD_INTERSECTION_LABEL_HEIGHT - THRESHOLD_INTERSECTION_LABEL_OFFSET;
+        return /* @__PURE__ */ React__default.createElement(
+          "g",
+          {
+            "data-testid": "line-chart-threshold-intersection-dot",
+            "data-intersection-id": `${intersection.legend.id}-${index}`,
+            onMouseEnter: () => onMouseEnter(intersection, cx, cy),
+            onMouseLeave
+          },
+          /* @__PURE__ */ React__default.createElement(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 8,
+              fill: "transparent",
+              stroke: "transparent"
+            }
+          ),
+          showIntersectionLabel && /* @__PURE__ */ React__default.createElement("g", { "data-testid": "line-chart-threshold-intersection-label" }, /* @__PURE__ */ React__default.createElement(
+            "rect",
+            {
+              "data-testid": "line-chart-threshold-intersection-label-background",
+              x: intersectionLabelX,
+              y: intersectionLabelY,
+              width: intersectionLabelWidth,
+              height: THRESHOLD_INTERSECTION_LABEL_HEIGHT,
+              rx: THRESHOLD_INTERSECTION_LABEL_RADIUS,
+              ry: THRESHOLD_INTERSECTION_LABEL_RADIUS,
+              fill: intersectionLabelColor,
+              opacity: intersectionOpacity
+            }
+          ), /* @__PURE__ */ React__default.createElement(
+            "text",
+            {
+              x: cx,
+              y: intersectionLabelY + THRESHOLD_INTERSECTION_LABEL_HEIGHT / 2,
+              fill: intersectionLabelTextColor,
+              fontSize: THRESHOLD_INTERSECTION_LABEL_FONT_SIZE,
+              fontWeight: 500,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              opacity: intersectionOpacity
+            },
+            intersectionLabelText
+          ))
+        );
+      }
+    }
+  );
+};
+var ThresholdIntersectionLayer$1 = ThresholdIntersectionLayer;
+
+export { ThresholdIntersectionLayer$1 as default, isThresholdIntersectionLabelVisible };

package/dist/esm/core/LineChart/TooltipFormatter.js

@@ -1,36 +1,35 @@
 import { styled } from '@linaria/react';
 import { LineChartColorBlock } from './LineChartLegend.js';
 import { TooltipWrapper, TooltipColumn } from './styled.js';
+import { getLineChartMetricPayloadMatches } from './utils.js';
 import dayjs from 'dayjs';
 import React__default from 'react';
 import { Typo } from '../Typo/index.js';
 
-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;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
-  enumerable: true,
-  configurable: true,
-  writable: true,
-  value
-}) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
-    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
-  }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const TooltipTitle = /*#__PURE__*/styled('div')({
   name: "TooltipTitle",
-  class: "E_4100_0_18_t1616y1o",
+  class: "E_4100_0_19_t1616y1o",
   propsAsIs: false
 });
+const LineChartTooltipContent = ({
+  title,
+  items
+}) => {
+  return /* @__PURE__ */React__default.createElement(TooltipWrapper, null, /* @__PURE__ */React__default.createElement(TooltipTitle, {
+    className: Typo.Label.l4_bold_title
+  }, title), items.map(item => {
+    return /* @__PURE__ */React__default.createElement(TooltipColumn, {
+      key: item.id
+    }, /* @__PURE__ */React__default.createElement("div", null, /* @__PURE__ */React__default.createElement(LineChartColorBlock, {
+      background: item.color,
+      borderd: true
+    }), item.label), /* @__PURE__ */React__default.createElement("div", {
+      className: "column-value"
+    }, item.value));
+  }));
+};
 const TooltipFormatter = props => {
+  var _a, _b;
   const {
     active,
     payload,
@@ -41,24 +40,27 @@ const TooltipFormatter = props => {
   if (!active || !(payload == null ? void 0 : payload.length)) {
     return null;
   }
-  return /* @__PURE__ */React__default.createElement(TooltipWrapper, null, /* @__PURE__ */React__default.createElement(TooltipTitle, {
-    className: Typo.Label.l4_bold_title
-  }, dayjs(Number(payload[0].payload.t)).format("MM/DD HH:mm:ss")), payload.map(item => {
-    return __spreadProps(__spreadValues({}, item), {
-      legend: legends.find((_legend, index) => `v${index}` === item.name)
-    });
-  }).sort((a, b) => b.value - a.value).map(item => {
-    var _a, _b, _c, _d;
-    return deselected.includes(((_a = item.legend) == null ? void 0 : _a.id) || "") ? null : /* @__PURE__ */React__default.createElement(TooltipColumn, {
-      key: (_b = item.legend) == null ? void 0 : _b.id
-    }, /* @__PURE__ */React__default.createElement("div", null, /* @__PURE__ */React__default.createElement(LineChartColorBlock, {
-      background: (_c = item.legend) == null ? void 0 : _c.color,
-      borderd: true
-    }), (_d = item.legend) == null ? void 0 : _d.name), /* @__PURE__ */React__default.createElement("div", {
-      className: "column-value"
-    }, format(item)));
-  }));
+  const metricPayloads = getLineChartMetricPayloadMatches(payload, legends);
+  const titlePayload = (_b = (_a = metricPayloads[0]) == null ? void 0 : _a.payload) == null ? void 0 : _b.payload;
+  if (!titlePayload) {
+    return null;
+  }
+  const items = metricPayloads.sort((a, b) => b.payload.value - a.payload.value).flatMap(item => {
+    if (deselected.includes(item.legend.id)) {
+      return [];
+    }
+    return [{
+      id: item.legend.id,
+      color: item.legend.color,
+      label: item.legend.name,
+      value: format(item.payload)
+    }];
+  });
+  return /* @__PURE__ */React__default.createElement(LineChartTooltipContent, {
+    title: dayjs(Number(titlePayload.t)).format("MM/DD HH:mm:ss"),
+    items
+  });
 };
 var TooltipFormatter$1 = TooltipFormatter;
 
-export { TooltipFormatter$1 as default };
+export { LineChartTooltipContent, TooltipFormatter$1 as default };