@cloudtower/eagle 0.33.4 → 0.33.6

package/dist/__test__/mockLineChart.d.ts

@@ -0,0 +1,4 @@
+import { ILineChartMetric } from "../src/core/LineChart/type";
+declare const mockMetric2: ILineChartMetric;
+declare const mockMetric: ILineChartMetric;
+export { mockMetric, mockMetric2 };

package/dist/cjs/core/Button/index.js

@@ -37,7 +37,6 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const ButtonStyle = "E_b1wx3t3t";
-const NoPadding = "E_n7k2c6r";
 const isAntdButtonTypes = type => {
   return Boolean(type && ["default", "primary", "ghost", "dashed", "link", "text"].includes(type));
 };
@@ -62,7 +61,7 @@ const Button = React__default.default.forwardRef((props, ref) => {
   const onlyIcon = !children && (prefixIcon || suffixIcon);
   return /* @__PURE__ */React__default.default.createElement(antd.Button, __spreadValues({
     ref,
-    className: cs__default.default(className, ButtonStyle, type === "link" && NoPadding, size === "large" && index.Typo.Label.l1_regular_title, size === "middle" && index.Typo.Label.l2_regular_title, size === "small" && index.Typo.Label.l3_regular_title, type && `ant-btn-${type}`, onlyIcon && "ant-btn-icon-only"),
+    className: cs__default.default(className, ButtonStyle, size === "large" && index.Typo.Label.l1_regular_title, size === "middle" && index.Typo.Label.l2_regular_title, size === "small" && index.Typo.Label.l3_regular_title, type && `ant-btn-${type}`, onlyIcon && "ant-btn-icon-only"),
     type: isAntdButtonTypes(type) ? type : void 0,
     onMouseEnter: e => {
       onMouseEnter == null ? void 0 : onMouseEnter(e);

package/dist/cjs/core/ConfigProvider/index.js

@@ -2,24 +2,24 @@
 
 var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
 var antd = require('antd');
-var antd5 = require('antd5');
-var React = require('react');
 var enUS = require('antd/lib/locale/en_US');
 var zhCN = require('antd/lib/locale/zh_CN');
+var antd5 = require('antd5');
 var antd5enUS = require('antd5/lib/locale/en_US');
 var antd5zhCN = require('antd5/lib/locale/zh_CN');
-var moment = require('moment');
 var dayjs = require('dayjs');
+var moment = require('moment');
+var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
 var enUS__default = /*#__PURE__*/_interopDefault(enUS);
 var zhCN__default = /*#__PURE__*/_interopDefault(zhCN);
 var antd5enUS__default = /*#__PURE__*/_interopDefault(antd5enUS);
 var antd5zhCN__default = /*#__PURE__*/_interopDefault(antd5zhCN);
-var moment__default = /*#__PURE__*/_interopDefault(moment);
 var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+var moment__default = /*#__PURE__*/_interopDefault(moment);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -50,7 +50,7 @@ const ConfigProvider = ({
     };
     i18n.on("languageChanged", adjustDateLocale);
     adjustDateLocale(i18n.language);
-  }, []);
+  }, [i18n]);
   return /* @__PURE__ */ React__default.default.createElement(
     antd5.ConfigProvider,
     __spreadValues({

package/dist/cjs/core/Legend/index.js

@@ -0,0 +1,128 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var iconsReact = require('@cloudtower/icons-react');
+var react = require('@linaria/react');
+var index = require('../Icon/index.js');
+var index$1 = require('../Typo/index.js');
+var index$2 = require('../../coreX/OverflowTooltip/index.js');
+var cs = require('classnames');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var cs__default = /*#__PURE__*/_interopDefault(cs);
+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;
+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;
+};
+const LegendPresetColors = ["blue", "red", "yellow", "green", "gray", "purple"];
+const LegendStyle = "E_l1ucdodl";
+const StatusCodeCircle = /*#__PURE__*/react.styled('i')({
+  name: "StatusCodeCircle",
+  class: "E_s1qj66nc",
+  propsAsIs: false
+});
+const StatusCodeSquare = /*#__PURE__*/react.styled('i')({
+  name: "StatusCodeSquare",
+  class: "E_s5x1boq",
+  propsAsIs: false
+});
+const LegendIcon = ({
+  shape
+}) => {
+  switch (shape) {
+    case "loading":
+      return /* @__PURE__ */React__default.default.createElement(index, {
+        className: "ui-kit-status-legend-icon ui-kit-status-legend-icon-loading",
+        iconWidth: 8,
+        iconHeight: 8,
+        isRotate: true,
+        src: iconsReact.Loading8GradientBlueIcon
+      });
+    case "square":
+      return /* @__PURE__ */React__default.default.createElement(StatusCodeSquare, {
+        className: "ui-kit-status-legend-icon"
+      });
+    case "circle":
+      return /* @__PURE__ */React__default.default.createElement(StatusCodeCircle, {
+        className: "ui-kit-status-legend-icon"
+      });
+  }
+};
+const ColorMap = {
+  success: "green",
+  danger: "red",
+  warning: "yellow"
+};
+const Legend = _a => {
+  var _b = _a,
+    {
+      label,
+      color = "gray",
+      className,
+      hoverable = false,
+      children,
+      number,
+      shape = "circle",
+      onTintMode = false
+    } = _b,
+    props = __objRest(_b, ["label", "color", "className", "hoverable", "children", "number", "shape", "onTintMode"]);
+  const computedColor = ColorMap[color] || color;
+  const content = /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, label || children, !!number && /* @__PURE__ */React__default.default.createElement("span", {
+    className: cs__default.default("E_c1xm185", "ui-kit-status-legend-number", {
+      "on-tint": onTintMode
+    })
+  }, number));
+  return /* @__PURE__ */React__default.default.createElement("div", __spreadProps(__spreadValues({}, props), {
+    className: cs__default.default(className, LegendStyle, index$1.Typo.Label.l4_regular, "ui-kit-status-legend", {
+      [`eagle-legend-${computedColor}`]: shape !== "loading" && LegendPresetColors.includes(computedColor),
+      "tag-hover": hoverable,
+      "on-tint": onTintMode
+    }),
+    color: computedColor,
+    onClick: e => {
+      if (props.onClick) {
+        props.onClick(e, props.key);
+      }
+    }
+  }), /* @__PURE__ */React__default.default.createElement(LegendIcon, {
+    shape
+  }), /* @__PURE__ */React__default.default.createElement(index$2, {
+    content,
+    tooltip: content,
+    className: "E_c1x5l5qc"
+  }));
+};
+var Legend$1 = Legend;
+
+exports.LegendIcon = LegendIcon;
+exports.LegendPresetColors = LegendPresetColors;
+exports.default = Legend$1;

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

@@ -0,0 +1,52 @@
+'use strict';
+
+var iconsReact = require('@cloudtower/icons-react');
+var index = require('../Button/index.js');
+var React = require('react');
+var index$1 = require('../Icon/index.js');
+var Antd5Dropdown = require('../Antd5Dropdown/Antd5Dropdown.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(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 actionStyle = "E_a9y3flr";
+const actionStyleLabel = "E_a1njc627";
+const LineChartActions = props => {
+  const {
+    label,
+    dropdownProps
+  } = props;
+  return /* @__PURE__ */React__default.default.createElement("div", {
+    className: "metric-extra"
+  }, /* @__PURE__ */React__default.default.createElement("div", {
+    className: actionStyleLabel
+  }, label), dropdownProps && /* @__PURE__ */React__default.default.createElement(Antd5Dropdown.Antd5Dropdown, __spreadValues({}, dropdownProps), /* @__PURE__ */React__default.default.createElement(index, {
+    size: "small",
+    type: "tertiary",
+    className: actionStyle,
+    prefixIcon: /* @__PURE__ */React__default.default.createElement(index$1, {
+      src: iconsReact.MoreEllipsis316BoldSecondaryIcon
+    })
+  })));
+};
+var LineChartActions$1 = LineChartActions;
+
+module.exports = LineChartActions$1;

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

@@ -0,0 +1,101 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var iconsReact = require('@cloudtower/icons-react');
+var index$1 = require('../Icon/index.js');
+var styled = require('./styled.js');
+var index = require('../Overflow/index.js');
+var index$2 = require('../Truncate/index.js');
+var antd = require('antd');
+var cs = require('classnames');
+var React = require('react');
+var Antd5Dropdown = require('../Antd5Dropdown/Antd5Dropdown.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var cs__default = /*#__PURE__*/_interopDefault(cs);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const LineChartColorBlock = ({ background, borderd = false }) => /* @__PURE__ */ React__default.default.createElement(
+  "div",
+  {
+    className: cs__default.default(
+      styled.LineChartColorBlockStyle,
+      "color-block",
+      borderd && "borderd"
+    ),
+    style: { background }
+  }
+);
+const LineChartLegend = (props) => {
+  const { deselected, onClick, legends, onHover, hovering, hovereringSelf } = props;
+  const [isDropdownOpen, setIsDropdownOpen] = React__default.default.useState(false);
+  return /* @__PURE__ */ React__default.default.createElement(
+    index.ExtraOverflow,
+    {
+      className: styled.LegendStyle,
+      extraEl: (end) => /* @__PURE__ */ React__default.default.createElement(
+        Antd5Dropdown.Antd5Dropdown,
+        {
+          overlayClassName: styled.ExtraResource,
+          trigger: ["click"],
+          onVisibleChange: setIsDropdownOpen,
+          overlay: /* @__PURE__ */ React__default.default.createElement(antd.Menu, null, legends.slice(end).map((legend, idx) => {
+            return /* @__PURE__ */ React__default.default.createElement(
+              antd.Menu.Item,
+              {
+                className: cs__default.default(
+                  styled.LegendItemsStyleDropdown,
+                  deselected.includes(legend.id) && "deselected",
+                  hovering.includes(legend.id) && "hovering",
+                  hovereringSelf.includes(legend.id) && "hoverering-self"
+                ),
+                key: legend.id,
+                onClick: () => onClick(legend.id),
+                onMouseEnter: () => onHover("enter", legend.id),
+                onMouseLeave: () => onHover("leave", legend.id)
+              },
+              /* @__PURE__ */ React__default.default.createElement(LineChartColorBlock, { background: legend.color }),
+              /* @__PURE__ */ React__default.default.createElement("span", null, legend.name)
+            );
+          }))
+        },
+        /* @__PURE__ */ React__default.default.createElement(
+          index$1,
+          {
+            alt: "arrowChevronDownSmall16Secondary",
+            className: "dropdown-trigger",
+            src: iconsReact.ArrowChevronDown16SecondaryIcon,
+            hoverSrc: iconsReact.ArrowChevronDown16BlueIcon,
+            activeSrc: iconsReact.ArrowChevronUp16BlueIcon,
+            active: isDropdownOpen
+          }
+        )
+      ),
+      els: legends.map((legend) => {
+        return /* @__PURE__ */ React__default.default.createElement(
+          "div",
+          {
+            className: cs__default.default(
+              styled.LegendItemsStyle,
+              deselected.includes(legend.id) && "deselected",
+              hovering.includes(legend.id) && "hovering",
+              hovereringSelf.includes(legend.id) && "hoverering-self"
+            ),
+            key: legend.id,
+            onMouseEnter: () => onHover("enter", legend.id),
+            onMouseLeave: () => onHover("leave", legend.id),
+            onClick: () => onClick(legend.id)
+          },
+          /* @__PURE__ */ React__default.default.createElement(LineChartColorBlock, { background: legend.color }),
+          /* @__PURE__ */ React__default.default.createElement("span", null, /* @__PURE__ */ React__default.default.createElement(index$2, { text: legend.name, len: 50, backLen: 20 }))
+        );
+      })
+    }
+  );
+};
+var LineChartLegend$1 = LineChartLegend;
+
+exports.LineChartColorBlock = LineChartColorBlock;
+exports.default = LineChartLegend$1;

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

@@ -0,0 +1,56 @@
+'use strict';
+
+var LineChartActions = require('./LineChartActions.js');
+var LineChartLegend = require('./LineChartLegend.js');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(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.default.createElement("div", { className: "metric-toolbar" }, showLegend && /* @__PURE__ */ React__default.default.createElement(
+    LineChartLegend.default,
+    {
+      streams,
+      metricName,
+      deselected,
+      hovering,
+      onClick: onLegendClick,
+      legends,
+      onHover: onLegendHover,
+      hovereringSelf: hoveringSelf
+    }
+  ), (actionsProps == null ? void 0 : actionsProps.show) && /* @__PURE__ */ React__default.default.createElement(LineChartActions, __spreadValues({ dropdownProps }, actionsProps)));
+};
+var LineChartToolBar$1 = LineChartToolBar;
+
+module.exports = LineChartToolBar$1;

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

@@ -0,0 +1,45 @@
+'use strict';
+
+var index = require('../KitStoreProvider/index.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 Pointer = ({ uuid = "", metricWidth }) => {
+  const pointers = index.useKitSelector(
+    (state) => ___default.default.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.default.createElement(
+    "div",
+    {
+      style: {
+        transform: `translate(${dis}px)`,
+        position: "absolute",
+        whiteSpace: "nowrap"
+      }
+    },
+    /* @__PURE__ */ React__default.default.createElement("div", { className: "pointer-wrapper" }, text)
+  );
+};
+var Pointer$1 = Pointer;
+
+module.exports = Pointer$1;