@cloudtower/eagle 0.0.0-no-uikit-1 → 0.0.0-theme-rc-1

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

@@ -0,0 +1,115 @@
+import _ from 'lodash';
+import React__default, { useMemo } from 'react';
+
+const getAreaHighlightLinePath = (points) => {
+  if (!points.length) {
+    return "";
+  }
+  return points.map((point, index) => {
+    return `${index === 0 ? "M" : "L"}${point.x},${point.y}`;
+  }).join(" ");
+};
+const getAreaHighlightFillPath = (points, baseLineY) => {
+  if (!points.length) {
+    return "";
+  }
+  const linePath = getAreaHighlightLinePath(points);
+  const firstPoint = points[0];
+  const lastPoint = points[points.length - 1];
+  return `${linePath} L${lastPoint.x},${baseLineY} L${firstPoint.x},${baseLineY} Z`;
+};
+const AreaHighlightLayer = ({
+  forecastStartTimestamp,
+  overlay,
+  hovering,
+  offset,
+  xAxisMap,
+  yAxisMap
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const clipPathId = useMemo(() => {
+    return _.uniqueId("line-chart-area-highlight-");
+  }, []);
+  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;
+  if (typeof xScale !== "function" || typeof yScale !== "function" || !offsetWidth || !offsetHeight) {
+    return null;
+  }
+  const projectedRuns = overlay.data.flatMap((run) => {
+    const runs = [];
+    let projectedPoints = [];
+    const flushProjectedPoints = () => {
+      if (projectedPoints.length >= 2) {
+        runs.push(projectedPoints);
+      }
+      projectedPoints = [];
+    };
+    run.forEach((point) => {
+      const projectedPoint = {
+        t: point.t,
+        x: xScale(point.t),
+        y: yScale(point.value)
+      };
+      if (Number.isFinite(projectedPoint.x) && Number.isFinite(projectedPoint.y)) {
+        projectedPoints.push(projectedPoint);
+      } else {
+        flushProjectedPoints();
+      }
+    });
+    flushProjectedPoints();
+    return runs;
+  });
+  if (!projectedRuns.length) {
+    return null;
+  }
+  const fallbackBaseLineY = offsetTop + offsetHeight;
+  const scaleBaseLineY = yScale(0);
+  const baseLineY = Number.isFinite(scaleBaseLineY) ? scaleBaseLineY : fallbackBaseLineY;
+  return /* @__PURE__ */ React__default.createElement(
+    "g",
+    {
+      className: "line-chart-area-highlight",
+      "data-testid": "line-chart-area-highlight",
+      style: { pointerEvents: "none" },
+      opacity: hovering.includes(overlay.legendId) ? 0.3 : 1
+    },
+    /* @__PURE__ */ React__default.createElement("defs", null, /* @__PURE__ */ React__default.createElement("clipPath", { id: clipPathId }, /* @__PURE__ */ React__default.createElement(
+      "rect",
+      {
+        x: offsetLeft,
+        y: offsetTop,
+        width: offsetWidth,
+        height: offsetHeight
+      }
+    ))),
+    /* @__PURE__ */ React__default.createElement("g", { clipPath: `url(#${clipPathId})` }, projectedRuns.map((projectedPoints, index) => {
+      const fillPath = getAreaHighlightFillPath(projectedPoints, baseLineY);
+      const linePath = getAreaHighlightLinePath(projectedPoints);
+      return /* @__PURE__ */ React__default.createElement("g", { key: `${overlay.key}-${index}` }, /* @__PURE__ */ React__default.createElement(
+        "path",
+        {
+          className: "line-chart-area-highlight-fill",
+          d: fillPath,
+          fill: overlay.fill,
+          fillOpacity: overlay.fillOpacity
+        }
+      ), !Number.isFinite(forecastStartTimestamp) && /* @__PURE__ */ React__default.createElement(
+        "path",
+        {
+          className: "line-chart-area-highlight-curve",
+          d: linePath,
+          fill: "none",
+          stroke: overlay.stroke,
+          strokeWidth: 1
+        }
+      ));
+    }))
+  );
+};
+var AreaHighlightLayer$1 = AreaHighlightLayer;
+
+export { AreaHighlightLayer$1 as default };

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

@@ -0,0 +1,124 @@
+import { isFiniteNumber, getLineChartStreamStroke } from './lineChartDisplayUtils.js';
+import { getLineChartLineSegments, getLineChartLinePath } from './lineSegments.js';
+import _ from 'lodash';
+import React__default from '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.useMemo(() => {
+    return _.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.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(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 (!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 + (isFiniteNumber(value) ? value : 0);
+        }, 0);
+        return {
+          t: timestamp,
+          x: xScale(timestamp),
+          y: yScale(stackedValue)
+        };
+      }) : stream.points.map((point) => ({
+        t: point.t,
+        x: isFiniteNumber(point.t) ? xScale(point.t) : void 0,
+        y: isFiniteNumber(point.v) ? yScale(point.v) : void 0
+      }));
+      const segments = 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: getLineChartLinePath(segment.points),
+        stroke: getLineChartStreamStroke(stream)
+      }));
+    });
+  }, [
+    forecastStartTimestamp,
+    offsetHeight,
+    offsetWidth,
+    deselected,
+    stacked,
+    streams,
+    xScale,
+    yScale
+  ]);
+  if (!lines.length || !offsetWidth || !offsetHeight) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    "g",
+    {
+      className: "line-chart-forecast-lines",
+      "data-testid": "line-chart-forecast-lines",
+      style: { pointerEvents: "none" }
+    },
+    /* @__PURE__ */ React__default.createElement("defs", null, /* @__PURE__ */ React__default.createElement("clipPath", { id: clipPathId }, /* @__PURE__ */ React__default.createElement(
+      "rect",
+      {
+        x: offsetLeft,
+        y: offsetTop,
+        width: offsetWidth,
+        height: offsetHeight
+      }
+    ))),
+    /* @__PURE__ */ React__default.createElement("g", { clipPath: `url(#${clipPathId})` }, lines.map((line) => {
+      return /* @__PURE__ */ React__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;
+
+export { DEFAULT_FORECAST_LINE_STROKE_DASHARRAY, ForecastLineLayer$1 as default };

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

@@ -0,0 +1,46 @@
+import { MoreEllipsis316BoldSecondaryIcon } from '@cloudtower/icons-react';
+import Button from '../Button/index.js';
+import React__default from 'react';
+import Icon from '../Icon/index.js';
+import { Antd5Dropdown } from '../Antd5Dropdown/Antd5Dropdown.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 actionStyle = "E_0_0_0_theme_rc_1_a9y3flr";
+const actionStyleLabel = "E_0_0_0_theme_rc_1_a1njc627";
+const LineChartActions = props => {
+  const {
+    label,
+    dropdownProps
+  } = props;
+  return /* @__PURE__ */React__default.createElement("div", {
+    className: "metric-extra"
+  }, /* @__PURE__ */React__default.createElement("div", {
+    className: actionStyleLabel
+  }, label), dropdownProps && /* @__PURE__ */React__default.createElement(Antd5Dropdown, __spreadValues({}, dropdownProps), /* @__PURE__ */React__default.createElement(Button, {
+    size: "small",
+    type: "tertiary",
+    className: actionStyle,
+    prefixIcon: /* @__PURE__ */React__default.createElement(Icon, {
+      src: MoreEllipsis316BoldSecondaryIcon
+    })
+  })));
+};
+var LineChartActions$1 = LineChartActions;
+
+export { LineChartActions$1 as default };

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

@@ -0,0 +1,110 @@
+import { ArrowChevronDown16SecondaryIcon, ArrowChevronDown16BlueIcon, ArrowChevronUp16BlueIcon } from '@cloudtower/icons-react';
+import Icon from '../Icon/index.js';
+import { LineChartColorBlockStyle, LegendStyle, ExtraResource, LegendItemsStyleDropdown, LegendItemsStyle } from './styled.js';
+import { ExtraOverflow } from '../Overflow/index.js';
+import Truncate from '../Truncate/index.js';
+import { Menu } from 'antd';
+import cs from 'classnames';
+import React__default from 'react';
+import { Antd5Dropdown } from '../Antd5Dropdown/Antd5Dropdown.js';
+
+const LineChartColorBlock = ({ background, borderd = false }) => /* @__PURE__ */ React__default.createElement(
+  "div",
+  {
+    className: cs(
+      LineChartColorBlockStyle,
+      "color-block",
+      borderd && "borderd"
+    ),
+    style: { background }
+  }
+);
+const LineChartLegend = (props) => {
+  const { deselected, onClick, legends, onHover, hovering, hovereringSelf } = props;
+  const [isDropdownOpen, setIsDropdownOpen] = React__default.useState(false);
+  const shouldSkipHover = (e) => {
+    const target = e.target;
+    const relatedTarget = e.relatedTarget;
+    const isFromIconSuffix = (target == null ? void 0 : target.closest(".icon-suffix-wrapper")) !== null;
+    const isToIconSuffix = (relatedTarget == null ? void 0 : relatedTarget.closest(".icon-suffix-wrapper")) !== null;
+    return isFromIconSuffix || isToIconSuffix;
+  };
+  const handleMouseEnter = (legendId) => (e) => {
+    if (!shouldSkipHover(e)) {
+      onHover("enter", legendId);
+    }
+  };
+  const handleMouseLeave = (legendId) => (e) => {
+    if (!shouldSkipHover(e)) {
+      onHover("leave", legendId);
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    ExtraOverflow,
+    {
+      className: LegendStyle,
+      extraEl: (end) => /* @__PURE__ */ React__default.createElement(
+        Antd5Dropdown,
+        {
+          overlayClassName: ExtraResource,
+          trigger: ["click"],
+          onVisibleChange: setIsDropdownOpen,
+          overlay: /* @__PURE__ */ React__default.createElement(Menu, null, legends.slice(end).map((legend, idx) => {
+            return /* @__PURE__ */ React__default.createElement(
+              Menu.Item,
+              {
+                className: cs(
+                  LegendItemsStyleDropdown,
+                  deselected.includes(legend.id) && "deselected",
+                  (hovering == null ? void 0 : hovering.includes(legend.id)) && "hovering",
+                  hovereringSelf.includes(legend.id) && "hoverering-self"
+                ),
+                key: legend.id,
+                onClick: () => onClick(legend.id),
+                onMouseEnter: () => handleMouseEnter(legend.id),
+                onMouseLeave: () => handleMouseLeave(legend.id)
+              },
+              /* @__PURE__ */ React__default.createElement(LineChartColorBlock, { background: legend.color }),
+              /* @__PURE__ */ React__default.createElement("span", { className: "legend-name" }, /* @__PURE__ */ React__default.createElement(Truncate, { text: legend.name, len: 50, backLen: 20 })),
+              /* @__PURE__ */ React__default.createElement("div", { className: "icon-suffix-wrapper" }, legend.iconSuffix)
+            );
+          }))
+        },
+        /* @__PURE__ */ React__default.createElement(
+          Icon,
+          {
+            alt: "arrowChevronDownSmall16Secondary",
+            className: "dropdown-trigger",
+            src: ArrowChevronDown16SecondaryIcon,
+            hoverSrc: ArrowChevronDown16BlueIcon,
+            activeSrc: ArrowChevronUp16BlueIcon,
+            active: isDropdownOpen
+          }
+        )
+      ),
+      els: legends.map((legend) => {
+        return /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            className: cs(
+              LegendItemsStyle,
+              deselected.includes(legend.id) && "deselected",
+              (hovering == null ? void 0 : hovering.includes(legend.id)) && "hovering",
+              hovereringSelf.includes(legend.id) && "hoverering-self"
+            ),
+            key: legend.id,
+            onMouseEnter: handleMouseEnter(legend.id),
+            onMouseLeave: handleMouseLeave(legend.id),
+            onClick: () => onClick(legend.id)
+          },
+          /* @__PURE__ */ React__default.createElement(LineChartColorBlock, { background: legend.color }),
+          /* @__PURE__ */ React__default.createElement("span", { className: "legend-name" }, /* @__PURE__ */ React__default.createElement(Truncate, { text: legend.name, len: 50, backLen: 20 })),
+          /* @__PURE__ */ React__default.createElement("div", { className: "icon-suffix-wrapper" }, legend.iconSuffix)
+        );
+      })
+    }
+  );
+};
+var LineChartLegend$1 = LineChartLegend;
+
+export { LineChartColorBlock, LineChartLegend$1 as default };

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

@@ -0,0 +1,50 @@
+import LineChartActions from './LineChartActions.js';
+import LineChartLegend from './LineChartLegend.js';
+import React__default 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 LineChartToolBar = ({
+  showLegend,
+  streams,
+  metricName,
+  deselected,
+  hovering,
+  onLegendClick,
+  onLegendHover,
+  legends,
+  actionsProps,
+  dropdownProps,
+  hoveringSelf
+}) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "metric-toolbar" }, showLegend && /* @__PURE__ */ React__default.createElement(
+    LineChartLegend,
+    {
+      streams,
+      metricName,
+      deselected,
+      hovering,
+      onClick: onLegendClick,
+      legends,
+      onHover: onLegendHover,
+      hovereringSelf: hoveringSelf
+    }
+  ), (actionsProps == null ? void 0 : actionsProps.show) && /* @__PURE__ */ React__default.createElement(LineChartActions, __spreadValues({ dropdownProps }, actionsProps)));
+};
+var LineChartToolBar$1 = LineChartToolBar;
+
+export { LineChartToolBar$1 as default };

package/dist/esm/core/LineChart/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 };