@cloudtower/eagle 0.32.40 → 0.32.41

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

@@ -1,13 +1,13 @@
 import useParrotTranslation from '../../hooks/useParrotTranslation.js';
 import { ConfigProvider as ConfigProvider$2 } from 'antd';
-import { ConfigProvider as ConfigProvider$1 } from 'antd5';
-import React__default, { useEffect } from 'react';
 import enUS from 'antd/lib/locale/en_US';
 import zhCN from 'antd/lib/locale/zh_CN';
+import { ConfigProvider as ConfigProvider$1 } from 'antd5';
 import antd5enUS from 'antd5/lib/locale/en_US';
 import antd5zhCN from 'antd5/lib/locale/zh_CN';
-import moment from 'moment';
 import dayjs from 'dayjs';
+import moment from 'moment';
+import React__default, { useEffect } from 'react';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;

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_a9y3flr";
+const actionStyleLabel = "E_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,91 @@
+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);
+  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.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.createElement(LineChartColorBlock, { background: legend.color }),
+              /* @__PURE__ */ React__default.createElement("span", null, legend.name)
+            );
+          }))
+        },
+        /* @__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.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.createElement(LineChartColorBlock, { background: legend.color }),
+          /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(Truncate, { text: legend.name, len: 50, backLen: 20 }))
+        );
+      })
+    }
+  );
+};
+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 };

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

@@ -0,0 +1,296 @@
+import { useKitDispatch } from '../KitStoreProvider/index.js';
+import LineChartLegend from './LineChartLegend.js';
+import { MetricLegendTabStyle } from './styled.js';
+import { ILineChartGraphType } from './type.js';
+import { Empty } from 'antd';
+import { convertLineChartDataStruct, getYAxisDomain, getLineChartXAxisDomain, lineChartXaxisCal, lineChartYaxisTickFormatter, lineChartTickFormatter } from './utils.js';
+import TooltipFormatter from './TooltipFormatter.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 LineChartToolBar from './LineChartToolBar.js';
+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",
+    dropdownProps,
+    onLabelsChange,
+    metric,
+    yAxisProps,
+    xAxisProps,
+    actionsProps,
+    tooltipProps,
+    width,
+    dateRange = [dayjs(), dayjs()],
+    emptyText,
+    emptyIcon
+  } = props;
+  const { t } = useParrotTranslation();
+  const dispatch = useKitDispatch();
+  const [deselected, setDeselected] = useState([]);
+  const [hovering, setHovering] = useState([]);
+  const [hoveringSelf, setHoveringSelf] = useState([]);
+  const [tempDeselected, setTempDeselected] = 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(
+    () => convertLineChartDataStruct(streams.map((stream) => stream.points)),
+    [streams]
+  );
+  const yDomain = getYAxisDomain(areaChartData, type, metric.unit);
+  const xDomain = getLineChartXAxisDomain(dateRange, dateRange[1].valueOf());
+  const xTicks = lineChartXaxisCal(xDomain[1], dateRange, width);
+  const onLegendClick = useCallback(
+    (id) => {
+      setDeselected((prev) => {
+        var _a;
+        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(
+            (stream) => !currentDeselected.includes(stream.legend.id)
+          )) == null ? void 0 : _a.legend.id;
+          if (id === highlightedId) {
+            return [];
+          } else {
+            return currentDeselected.filter(
+              (deselectedId) => deselectedId !== id
+            );
+          }
+        }
+        const isHighlighted = !currentDeselected.includes(id);
+        if (isHighlighted) {
+          return [...currentDeselected, id];
+        } else {
+          return currentDeselected.filter(
+            (deselectedId) => deselectedId !== id
+          );
+        }
+      });
+      if (tempDeselected.length) {
+        setTempDeselected([]);
+      }
+    },
+    [streams, tempDeselected]
+  );
+  const onLegendHover = useCallback(
+    (method, id) => {
+      if (method === "enter") {
+        if (deselected.length) {
+          setTempDeselected(deselected);
+          if (deselected.includes(id)) {
+            setDeselected(
+              streams.map((stream) => stream.legend.id).filter(
+                (legendId) => legendId !== id && deselected.includes(legendId)
+              )
+            );
+            setHovering(
+              streams.map((stream) => stream.legend.id).filter((legendId) => legendId === id)
+            );
+            setHoveringSelf(
+              streams.map((stream) => stream.legend.id).filter((legendId) => legendId === id)
+            );
+          } else {
+            setDeselected([]);
+            setHovering(
+              streams.map((stream) => stream.legend.id).filter((legendId) => legendId !== id)
+            );
+          }
+        } else {
+          setHovering(
+            streams.map((stream) => stream.legend.id).filter((legendId) => legendId !== id)
+          );
+        }
+      } else {
+        if (tempDeselected.length) {
+          setDeselected(tempDeselected);
+          setTempDeselected([]);
+        }
+        setHovering([]);
+        setHoveringSelf([]);
+      }
+    },
+    [deselected, streams, tempDeselected]
+  );
+  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(
+      LineChartLegend,
+      {
+        streams,
+        metricName,
+        deselected,
+        hovering,
+        hovereringSelf: hoveringSelf,
+        onClick: onLegendClick,
+        onHover: onLegendHover,
+        legends
+      }
+    )), /* @__PURE__ */ React__default.createElement("div", { className: cs("content", mode === "single" && "single-content") }, /* @__PURE__ */ React__default.createElement(
+      Empty,
+      {
+        description: emptyText || t("metric.empty"),
+        image: emptyIcon ? emptyIcon : null,
+        imageStyle: emptyIcon ? {} : { display: "none" }
+      }
+    )));
+  }
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    LineChartToolBar,
+    {
+      showLegend,
+      streams,
+      metricName,
+      deselected,
+      hovering,
+      hoveringSelf,
+      onLegendClick,
+      legends,
+      actionsProps,
+      dropdownProps,
+      onLegendHover
+    }
+  ), /* @__PURE__ */ React__default.createElement(ResponsiveContainer, { height }, /* @__PURE__ */ React__default.createElement(
+    AreaChart,
+    {
+      style: { backgroundColor: "white" },
+      margin: showLegend ? { top: 10, left: -20, right: 10, bottom: 0 } : { top: 20, left: -20, 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",
+        ticks: xTicks,
+        domain: xDomain,
+        tickFormatter: (tick) => lineChartTickFormatter(tick, dateRange)
+      }, xAxisProps)
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      YAxis,
+      __spreadValues({
+        width: 200,
+        mirror: true,
+        axisLine: false,
+        tickLine: false,
+        allowDecimals: false,
+        domain: yDomain,
+        orientation: yAxisAlign,
+        tick: {
+          dx: 20,
+          dy: 16
+        },
+        ticks: [yDomain[1] / 2, yDomain[1]],
+        tickFormatter: (tick) => lineChartYaxisTickFormatter(tick, metric.unit)
+      }, 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 === ILineChartGraphType.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"
+          },
+          opacity: hovering.includes(item.legend.id) ? 0.3 : 1
+        }
+      );
+    })
+  )));
+};
+var RenderChart$1 = RenderChart;
+
+export { RenderChart$1 as default };

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

@@ -0,0 +1,63 @@
+import { styled } from '@linaria/react';
+import { LineChartColorBlock } from './LineChartLegend.js';
+import { TooltipWrapper, TooltipColumn } from './styled.js';
+import React__default from 'react';
+import { Typo } from '../Typo/index.js';
+import dayjs from 'dayjs';
+
+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_t1616y1o",
+  propsAsIs: false
+});
+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, /* @__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, 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(LineChartColorBlock, {
+      background: item.legend.color,
+      borderd: true
+    }), 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/LineChart/index.js

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

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

@@ -0,0 +1,25 @@
+import { styled } from '@linaria/react';
+
+const MetricLegendTabStyle = "E_mn7joto";
+const LegendStyle = "E_l1bifhon";
+const LegendItemsStyle = "E_ltthzck";
+const LegendItemsStyleDropdown = "E_l1mumj7o";
+const ExtraResource = "E_e45tc5l";
+const LineChartWrapper = /*#__PURE__*/styled('div')({
+  name: "LineChartWrapper",
+  class: "E_lqeaosa",
+  propsAsIs: false
+});
+const TooltipWrapper = /*#__PURE__*/styled('div')({
+  name: "TooltipWrapper",
+  class: "E_t2pr38p",
+  propsAsIs: false
+});
+const TooltipColumn = /*#__PURE__*/styled('div')({
+  name: "TooltipColumn",
+  class: "E_tecdsj7",
+  propsAsIs: false
+});
+const LineChartColorBlockStyle = "E_ljhvvia";
+
+export { ExtraResource, LegendItemsStyle, LegendItemsStyleDropdown, LegendStyle, LineChartColorBlockStyle, LineChartWrapper, MetricLegendTabStyle, TooltipColumn, TooltipWrapper };