@cloudtower/eagle 0.28.0-dry → 0.28.0

package/dist/esm/core/Metric/Pointer.js

@@ -0,0 +1,38 @@
+import { useKitSelector } from '../KitStoreProvider/index.js';
+import _ from 'lodash';
+import React__default from 'react';
+
+const Pointer = ({ uuid = "", metricWidth }) => {
+  const pointers = useKitSelector(
+    (state) => _.get(state, "chart.pointers")
+  );
+  if (!(pointers == null ? void 0 : pointers[uuid])) {
+    return null;
+  }
+  const { left = 0, text } = pointers[uuid];
+  let dis = -99999999;
+  const threshold = 50;
+  if (metricWidth) {
+    if (left <= threshold) {
+      dis = threshold;
+    } else if (left >= metricWidth - threshold) {
+      dis = metricWidth - threshold;
+    } else {
+      dis = left;
+    }
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      style: {
+        transform: `translate(${dis}px)`,
+        position: "absolute",
+        whiteSpace: "nowrap"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "pointer-wrapper" }, text)
+  );
+};
+var Pointer$1 = Pointer;
+
+export { Pointer$1 as default };

package/dist/esm/core/Metric/RenderChart.js

@@ -0,0 +1,195 @@
+import { useKitDispatch } from '../KitStoreProvider/index.js';
+import { convertDataStruct } from './metric.js';
+import MetricActions from './MetricActions.js';
+import MetricLegend from './MetricLegend.js';
+import { MetricLegendTabStyle } from './styled.js';
+import TooltipFormatter from './TooltipFormatter.js';
+import { GraphType } from './type.js';
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import cs from 'classnames';
+import dayjs from 'dayjs';
+import React__default, { useState, useMemo, useCallback } from 'react';
+import { ResponsiveContainer, AreaChart, XAxis, YAxis, Tooltip, Area } from 'recharts';
+import { ChartActions } from '../../store/chart.js';
+
+var __defProp = Object.defineProperty;
+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;
+};
+const RenderChart = (props) => {
+  const {
+    metricName,
+    showLegend,
+    syncId,
+    showXAxis,
+    yAxisAlign,
+    height,
+    type,
+    mode = "legend",
+    dropdown,
+    onLabelsChange,
+    metric,
+    yAxisProps,
+    xAxisProps,
+    actionsProps,
+    tooltipProps
+  } = props;
+  const { t } = useParrotTranslation();
+  const dispatch = useKitDispatch();
+  const [deselected, setDeselected] = useState([]);
+  const streams = useMemo(() => metric.sample_streams, [metric]);
+  const legends = useMemo(() => {
+    return metric.sample_streams.map((stream) => stream.legend);
+  }, [metric.sample_streams]);
+  const areaChartData = useMemo(
+    () => convertDataStruct(streams.map((stream) => stream.points)),
+    [streams]
+  );
+  const onLegendClick = useCallback(
+    (id) => {
+      setDeselected((prev) => {
+        const include = prev.includes(id);
+        const newDeselected = include ? prev.filter((r) => r !== id) : [...prev, id];
+        onLabelsChange == null ? void 0 : onLabelsChange(newDeselected);
+        return newDeselected.length >= streams.length ? prev : newDeselected;
+      });
+    },
+    [onLabelsChange, streams]
+  );
+  const hidePointer = useCallback(() => {
+    dispatch({
+      type: ChartActions.SET_POINTER,
+      payload: { visible: false, uuid: syncId }
+    });
+  }, [dispatch, syncId]);
+  const handleMouseMove = useCallback(
+    (e) => {
+      var _a;
+      if (e.isTooltipActive) {
+        const { chartX, activePayload } = e;
+        if (!((_a = activePayload == null ? void 0 : activePayload[0]) == null ? void 0 : _a.payload)) {
+          return;
+        }
+        dispatch({
+          type: ChartActions.SET_POINTER,
+          payload: {
+            uuid: syncId,
+            visible: true,
+            left: chartX,
+            text: dayjs(Number(activePayload[0].payload.t)).format(
+              "MM-DD HH:mm:ss"
+            ),
+            value: activePayload[0].payload.v
+          }
+        });
+      }
+    },
+    [dispatch, syncId]
+  );
+  if (!(streams == null ? void 0 : streams.length) || streams.every((stream) => {
+    var _a;
+    return !((_a = stream.points) == null ? void 0 : _a.length);
+  })) {
+    return /* @__PURE__ */ React__default.createElement("div", { className: MetricLegendTabStyle }, /* @__PURE__ */ React__default.createElement("div", { className: "name-toolbar" }, /* @__PURE__ */ React__default.createElement(
+      MetricLegend,
+      {
+        streams,
+        metricName,
+        deselected,
+        onClick: onLegendClick,
+        legends
+      }
+    )), /* @__PURE__ */ React__default.createElement("div", { className: cs("content", mode === "single" && "single-content") }, t("metric.empty")));
+  }
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "metric-toolbar" }, showLegend && /* @__PURE__ */ React__default.createElement(
+    MetricLegend,
+    {
+      streams,
+      metricName,
+      deselected,
+      onClick: onLegendClick,
+      legends
+    }
+  ), (actionsProps == null ? void 0 : actionsProps.show) && /* @__PURE__ */ React__default.createElement(MetricActions, __spreadValues({ dropdown }, actionsProps))), /* @__PURE__ */ React__default.createElement(ResponsiveContainer, { height }, /* @__PURE__ */ React__default.createElement(
+    AreaChart,
+    {
+      style: { backgroundColor: "white" },
+      margin: showLegend ? { top: 10, left: 10, right: 10, bottom: 0 } : { top: 20, left: 10, right: 10, bottom: 5 },
+      data: areaChartData,
+      syncId,
+      onMouseLeave: hidePointer,
+      onMouseMove: handleMouseMove
+    },
+    /* @__PURE__ */ React__default.createElement(
+      XAxis,
+      __spreadValues({
+        hide: !showXAxis,
+        dataKey: "t",
+        axisLine: false,
+        tickLine: false,
+        type: "number"
+      }, xAxisProps)
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      YAxis,
+      __spreadValues({
+        width: 200,
+        mirror: true,
+        allowDataOverflow: true,
+        axisLine: false,
+        tickLine: false,
+        orientation: yAxisAlign
+      }, yAxisProps)
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Tooltip,
+      __spreadValues({
+        content: tooltipProps.format && /* @__PURE__ */ React__default.createElement(
+          TooltipFormatter,
+          {
+            deselected,
+            legends,
+            format: tooltipProps.format
+          }
+        )
+      }, tooltipProps)
+    ),
+    streams.map((item, index) => {
+      if (deselected.includes(item.legend.id)) {
+        return null;
+      }
+      return /* @__PURE__ */ React__default.createElement(
+        Area,
+        {
+          key: index,
+          dataKey: `v${index}`,
+          stackId: type === GraphType.Stack ? "stack" : void 0,
+          stroke: item.legend.stroke ? `${item.legend.color}1A` : item.legend.color,
+          fill: item.legend.fill,
+          isAnimationActive: false,
+          activeDot: {
+            stroke: item.legend.color,
+            r: 4,
+            strokeWidth: 2,
+            fill: "white"
+          }
+        }
+      );
+    })
+  )));
+};
+var RenderChart$1 = RenderChart;
+
+export { RenderChart$1 as default };

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

@@ -0,0 +1,39 @@
+import { ColorBlock } from './MetricLegend.js';
+import { TooltipWrapper, TooltipColumn } from './styled.js';
+import React__default from '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;
+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 TooltipFormatter = (props) => {
+  const { active, payload, deselected, legends, format } = props;
+  if (!active || !(payload == null ? void 0 : payload.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.createElement(TooltipWrapper, null, payload.map((item, index) => {
+    return __spreadProps(__spreadValues({}, item), {
+      legend: legends[index]
+    });
+  }).sort((a, b) => b.value - a.value).map((item) => {
+    return deselected.includes(item.legend.id) ? null : /* @__PURE__ */ React__default.createElement(TooltipColumn, { key: item.legend.id }, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(ColorBlock, { background: item.legend.color }), item.legend.name), /* @__PURE__ */ React__default.createElement("div", { className: "column-value" }, format(item)));
+  }));
+};
+var TooltipFormatter$1 = TooltipFormatter;
+
+export { TooltipFormatter$1 as default };

package/dist/esm/core/Metric/index.js

@@ -0,0 +1,52 @@
+import { parrotI18n } from '@cloudtower/parrot';
+import ErrorBoundary from '../ErrorBoundary/index.js';
+import Pointer from './Pointer.js';
+import RenderChart from './RenderChart.js';
+import { MetricWrapper } from './styled.js';
+import cs from 'classnames';
+import React__default, { useState, useRef, useEffect } from 'react';
+
+var __defProp = Object.defineProperty;
+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;
+};
+const Metric = (props) => {
+  const {
+    height = 154,
+    showPointer = true,
+    showLegend = true,
+    showXaxis = false,
+    chartProps
+  } = props;
+  const [width, setWidth] = useState();
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    setWidth((_a = wrapperRef.current) == null ? void 0 : _a.offsetWidth);
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { i18n: parrotI18n }, /* @__PURE__ */ React__default.createElement(
+    MetricWrapper,
+    {
+      className: cs("metric-wrapper", !showXaxis && "hidden-xaxis"),
+      ref: wrapperRef,
+      style: { height: showLegend ? height + 30 : height }
+    },
+    /* @__PURE__ */ React__default.createElement(RenderChart, __spreadValues({}, chartProps)),
+    showPointer && /* @__PURE__ */ React__default.createElement(Pointer, { uuid: chartProps.syncId, metricWidth: width })
+  ));
+};
+var Metric$1 = Metric;
+
+export { Pointer, RenderChart, Metric$1 as default };

package/dist/esm/core/Metric/metric.js

@@ -0,0 +1,155 @@
+import { HOUR, DAY, SECOND, MINUTE } from '../../utils/tower.js';
+import dayjs from 'dayjs';
+import _ from 'lodash';
+
+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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function filterPointsByDateRange(points, dateRange) {
+  const [startDate, endDate] = dateRange;
+  return points == null ? void 0 : points.filter((point) => {
+    const pointDate = dayjs(point.t);
+    if (startDate && pointDate.isBefore(startDate)) {
+      return false;
+    }
+    if (endDate && pointDate.isAfter(endDate)) {
+      return false;
+    }
+    return true;
+  });
+}
+const parseRange = (range) => {
+  const span = parseInt(range.slice(0, range.length - 1));
+  const unit = range.slice(range.length - 1);
+  return { span, unit };
+};
+function getRangeTimestamp(dateRange) {
+  const [startDate, endDate] = dateRange;
+  return endDate.valueOf() - startDate.valueOf();
+}
+const xaxisCal = (lastTime, dateRange) => {
+  const tangeTime = getRangeTimestamp(dateRange);
+  const tick = tangeTime / 4;
+  const msPerMinute = MINUTE * 1e3;
+  const lastTimeMinute = dayjs(lastTime).minute();
+  const baseline = lastTimeMinute < 30 ? lastTime - lastTimeMinute * msPerMinute : lastTime - lastTimeMinute * msPerMinute + msPerMinute * 30;
+  return [baseline - tick * 3, baseline - tick * 2, baseline - tick, baseline];
+};
+const tickFormatter = (tick, dateRange) => {
+  const rangeTime = getRangeTimestamp(dateRange);
+  if (rangeTime <= 2 * HOUR * 1e3) {
+    return dayjs(tick).format("HH:mm:ss");
+  }
+  if (rangeTime <= 4 * DAY * 1e3) {
+    return dayjs(tick).format("MM/DD HH:mm:ss");
+  }
+  return dayjs(tick).format("MM/DD");
+};
+function getXAxisDomain(dateRange, xaxisLastTime) {
+  const [startDate, endDate] = dateRange;
+  return [startDate.valueOf(), xaxisLastTime != null ? xaxisLastTime : endDate.valueOf()];
+}
+const getMs = (dateRange) => {
+  const [startDate, endDate] = dateRange;
+  return endDate.valueOf() - startDate.valueOf();
+};
+const getStep = (dateRange) => {
+  const [startDate, endDate] = dateRange;
+  const range = endDate.valueOf() - startDate.valueOf();
+  if (range <= 2 * 60 * 60 * 1e3) {
+    return SECOND * 30 * 1e3;
+  }
+  if (range <= 24 * 60 * 60 * 1e3) {
+    return MINUTE * 5 * 1e3;
+  }
+  if (range <= 7 * 24 * 60 * 60 * 1e3) {
+    return MINUTE * 30 * 1e3;
+  }
+  if (range <= 30 * 24 * 60 * 60 * 1e3) {
+    return DAY * 1e3;
+  }
+  return DAY * 1e3;
+};
+const filterDataOverlapping = (data, startTimestamp, length, step, tolerance) => {
+  const points = [...new Array(Math.round(length))].map((_2, index) => {
+    return startTimestamp + index * step;
+  }).map((timestamp) => {
+    const closestPoint = _.minBy(
+      data.filter((value) => {
+        return Math.abs(value.t - timestamp) < tolerance;
+      }),
+      (value) => {
+        return Math.abs(value.t - timestamp);
+      }
+    );
+    if (closestPoint == null) {
+      return {
+        t: timestamp,
+        v: -Infinity
+      };
+    }
+    return closestPoint;
+  });
+  return points;
+};
+const convertDataStruct = (streams) => {
+  const points = streams.flatMap((points2, index) => {
+    return points2.map((point) => {
+      return __spreadProps(__spreadValues({}, point), { [`v${index}`]: point.v });
+    });
+  });
+  const groupedPoints = _.groupBy(points, (point) => {
+    return point.t;
+  });
+  const combinedPoints = Object.entries(groupedPoints).map(([key, values]) => {
+    return values.reduce((p, c) => {
+      const _a = __spreadValues(__spreadValues({}, p), c), values2 = __objRest(_a, ["v"]);
+      return values2;
+    }, {});
+  });
+  return combinedPoints;
+};
+const filterOverlappingMetric = (metric, dateRange) => {
+  const range = getMs(dateRange);
+  return __spreadProps(__spreadValues({}, metric), {
+    sample_streams: metric.sample_streams.map((stream) => __spreadProps(__spreadValues({}, stream), {
+      points: filterDataOverlapping(
+        stream.points,
+        dateRange[0].valueOf(),
+        range / stream.step,
+        stream.step,
+        stream.tolerance
+      )
+    }))
+  });
+};
+
+export { convertDataStruct, filterDataOverlapping, filterOverlappingMetric, filterPointsByDateRange, getMs, getStep, getXAxisDomain, parseRange, tickFormatter, xaxisCal };

package/dist/esm/core/Metric/styled.js

@@ -0,0 +1,24 @@
+import { styled } from '@linaria/react';
+
+const MetricLegendTabStyle = "E_mp64wfi";
+const LegendStyle = "E_l1oyigan";
+const LegendItemStyle = "E_l1noi4n1";
+const ColorBlockStyle = "E_cz19rz6";
+const ExtraResource = "E_e17r5r9c";
+const MetricWrapper = /*#__PURE__*/styled('div')({
+  name: "MetricWrapper",
+  class: "E_m1y1hhnr",
+  propsAsIs: false
+});
+const TooltipWrapper = /*#__PURE__*/styled('div')({
+  name: "TooltipWrapper",
+  class: "E_tnvijvs",
+  propsAsIs: false
+});
+const TooltipColumn = /*#__PURE__*/styled('div')({
+  name: "TooltipColumn",
+  class: "E_t1ub2aex",
+  propsAsIs: false
+});
+
+export { ColorBlockStyle, ExtraResource, LegendItemStyle, LegendStyle, MetricLegendTabStyle, MetricWrapper, TooltipColumn, TooltipWrapper };

package/dist/esm/core/Metric/type.js

@@ -0,0 +1,13 @@
+var TimeUnit = /* @__PURE__ */ ((TimeUnit2) => {
+  TimeUnit2["Day"] = "DAY";
+  TimeUnit2["Hour"] = "HOUR";
+  TimeUnit2["Month"] = "MONTH";
+  return TimeUnit2;
+})(TimeUnit || {});
+var GraphType = /* @__PURE__ */ ((GraphType2) => {
+  GraphType2["Area"] = "AREA";
+  GraphType2["Stack"] = "STACK";
+  return GraphType2;
+})(GraphType || {});
+
+export { GraphType, TimeUnit };