@rsdoctor/components 0.0.2-beta.0

package/dist/components/Card/diff.js

@@ -0,0 +1,131 @@
+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;
+};
+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;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Client } from "@rsdoctor/types";
+import { Segmented, Space, Tooltip, Typography } from "antd";
+import { Graph } from "@rsdoctor/utils/common";
+import { useState } from "react";
+import { formatSize } from "../../utils";
+import { Color } from "../../constants";
+import { StatisticCard } from "./statistic";
+const SizePercent = (_a) => {
+  var _b = _a, { baseline, current } = _b, rest = __objRest(_b, ["baseline", "current"]);
+  const diff = Graph.diffSize(baseline, current);
+  return /* @__PURE__ */ jsx(Percent, __spreadValues(__spreadValues({}, rest), diff));
+};
+const Percent = ({ percent, state, fontSize = 14 }) => {
+  const _percent = +percent.toFixed(2);
+  if (_percent > 0) {
+    const percentText = `${_percent}`;
+    if (state === Client.DoctorClientDiffState.Up) {
+      return /* @__PURE__ */ jsxs(Typography.Text, { strong: true, style: { fontSize, color: Color.Red }, children: [
+        "+",
+        percentText,
+        "%"
+      ] });
+    }
+    if (state === Client.DoctorClientDiffState.Down) {
+      return /* @__PURE__ */ jsxs(Typography.Text, { strong: true, style: { fontSize, color: Color.Green }, children: [
+        "-",
+        percentText,
+        "%"
+      ] });
+    }
+  }
+  return null;
+};
+const DiffCardContent = ({ data, formatter }) => {
+  const { percent, state, size } = data;
+  const { baseline, current } = size;
+  const bSize = formatter ? formatter(baseline, "baseline") : formatSize(baseline);
+  const cSize = formatter ? formatter(current, "current") : formatSize(current);
+  return /* @__PURE__ */ jsx(Space, { align: "start", children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { textAlign: "left" }, children: [
+    /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 10, color: "inherit" }, keyboard: true, children: "Current" }),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: typeof cSize === "number" || typeof cSize === "string" ? `Value of Current is ${cSize}` : void 0,
+          children: /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 16, color: "inherit" }, strong: true, children: cSize })
+        }
+      ),
+      /* @__PURE__ */ jsx(Percent, { percent, state })
+    ] }),
+    /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 10, color: "inherit" }, keyboard: true, children: "Baseline" }),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: typeof bSize === "number" || typeof bSize === "string" ? `Value of Baseline is ${bSize}` : void 0,
+          children: /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 14 }, type: "secondary", children: bSize })
+        }
+      )
+    ] })
+  ] }) });
+};
+const DiffCard = ({ titles, datas, formatter, showPercentInTitle }) => {
+  const [idx, setIdx] = useState(0);
+  return /* @__PURE__ */ jsx(
+    StatisticCard,
+    {
+      title: titles.length > 1 ? /* @__PURE__ */ jsx(
+        Segmented,
+        {
+          defaultValue: titles[idx],
+          options: showPercentInTitle ? titles.map((e, i) => {
+            const data = datas[i];
+            return {
+              label: /* @__PURE__ */ jsxs(Space, { children: [
+                /* @__PURE__ */ jsx(Typography.Text, { children: e }),
+                /* @__PURE__ */ jsx(Percent, { percent: data.percent, state: data.state })
+              ] }),
+              value: e
+            };
+          }) : titles,
+          onChange: (e) => {
+            setIdx(titles.indexOf(e));
+          },
+          size: "small",
+          style: { transition: "transform 0.3s ease" },
+          value: titles[idx] || titles[0]
+        }
+      ) : titles[idx],
+      value: /* @__PURE__ */ jsx(DiffCardContent, { data: datas[idx], formatter }),
+      statisticProps: {
+        style: { textAlign: "left" }
+      }
+    }
+  );
+};
+export {
+  DiffCard,
+  DiffCardContent,
+  Percent,
+  SizePercent
+};

package/dist/components/Card/index.d.ts

@@ -0,0 +1,7 @@
+import { CardProps as CProps } from 'antd';
+import React, { CSSProperties } from 'react';
+export interface CardProps extends CProps {
+  collapsable?: boolean;
+  dividerStyle?: CSSProperties;
+}
+export declare const Card: React.FC<CardProps>;

package/dist/components/Card/index.js

@@ -0,0 +1,62 @@
+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;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ColumnHeightOutlined, VerticalAlignMiddleOutlined } from "@ant-design/icons";
+import { Card as C, Space, Button, Divider } from "antd";
+import { useState } from "react";
+const Card = (_a) => {
+  var _b = _a, { collapsable = false, children, title, dividerStyle } = _b, rest = __objRest(_b, ["collapsable", "children", "title", "dividerStyle"]);
+  const [collapsed, setCollapsed] = useState(false);
+  if (title && collapsable) {
+    return /* @__PURE__ */ jsx(
+      C,
+      __spreadProps(__spreadValues({}, rest), {
+        title: /* @__PURE__ */ jsxs(Space, { style: { fontSize: "inherit" }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: collapsed ? /* @__PURE__ */ jsx(ColumnHeightOutlined, {}) : /* @__PURE__ */ jsx(VerticalAlignMiddleOutlined, {}),
+              onClick: () => setCollapsed(!collapsed),
+              size: "small"
+            }
+          ),
+          title
+        ] }),
+        children: collapsed ? /* @__PURE__ */ jsx(Divider, { orientation: "center", style: dividerStyle, plain: true, children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(ColumnHeightOutlined, {}), type: "text", onClick: () => setCollapsed(!collapsed), children: "show more" }) }) : children
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx(C, __spreadProps(__spreadValues({ title }, rest), { children }));
+};
+export {
+  Card
+};

package/dist/components/Card/size.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface SizeCardProps {
+  files: {
+    path: string;
+    size: number;
+  }[];
+  /**
+   * total size for origin files
+   */
+  total: number;
+  /**
+   * @default false
+   */
+  showProgress?: boolean;
+}
+export declare const SizeCard: React.FC<SizeCardProps>;

package/dist/components/Card/size.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExceptionOutlined } from "@ant-design/icons";
+import { Progress, Space, Tag, Tooltip, Typography } from "antd";
+import { sumBy } from "lodash-es";
+import { useMemo } from "react";
+import { createFileStructures, formatSize } from "../../utils";
+import { FileTree } from "../FileTree";
+import { TextDrawer } from "../TextDrawer";
+const height = 100;
+const SizeCard = ({ files, total, showProgress = false }) => {
+  const sum = useMemo(() => {
+    return sumBy(files, (e) => e.size);
+  }, [files]);
+  const fileStructures = useMemo(() => {
+    return createFileStructures({
+      files: files.map((e) => e.path),
+      fileTitle(file, basename) {
+        const { size } = files.find((e) => e.path === file);
+        return /* @__PURE__ */ jsxs(Space, { children: [
+          /* @__PURE__ */ jsx(Typography.Text, { children: basename }),
+          /* @__PURE__ */ jsx(Tag, { color: "success", children: formatSize(size) })
+        ] });
+      }
+    });
+  }, [files]);
+  if (fileStructures.length === 0) {
+    return /* @__PURE__ */ jsx(Space, { style: { height, fontSize: 24 }, align: "center", children: "0" });
+  }
+  return /* @__PURE__ */ jsxs(Space, { style: { height }, align: "center", children: [
+    showProgress ? /* @__PURE__ */ jsx(
+      Progress,
+      {
+        type: "dashboard",
+        percent: +(sum / total * 100).toFixed(2),
+        strokeColor: { "0%": "#108ee9", "100%": "#87d068" },
+        width: 80
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      TextDrawer,
+      {
+        text: /* @__PURE__ */ jsx(Tooltip, { title: "Click to show the total files", children: /* @__PURE__ */ jsxs(Space, { style: { textAlign: showProgress ? "left" : "center" }, align: "end", children: [
+          /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+            /* @__PURE__ */ jsxs(Typography.Text, { style: { fontSize: 14 }, children: [
+              "Count:",
+              /* @__PURE__ */ jsxs(Typography.Text, { strong: true, children: [
+                " ",
+                files.length
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 20 }, children: formatSize(sum) })
+          ] }),
+          /* @__PURE__ */ jsx(ExceptionOutlined, { style: { transform: "translateY(-3.5px)" } })
+        ] }) }),
+        buttonStyle: { height: "100%" },
+        buttonProps: { type: "text" },
+        children: /* @__PURE__ */ jsx(
+          FileTree,
+          {
+            treeData: fileStructures,
+            defaultExpandAll: true,
+            titleRender: (v) => /* @__PURE__ */ jsx(Typography.Text, { children: v.title })
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  SizeCard
+};

package/dist/components/Card/statistic.css

@@ -0,0 +1,16 @@
+.statistic-card {
+  border-radius: 8px;
+  text-align: center;
+  padding: 24px;
+}
+.statistic-card-title {
+  font-size: 14px;
+  font-weight: 500;
+}
+.statistic-card-light {
+  background: #fff;
+  border: 1px solid #eee;
+}
+.statistic-card-dark {
+  background: rgb(20, 20, 20);
+}

package/dist/components/Card/statistic.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StatisticProps } from 'antd';
+import './statistic.sass';
+export interface StatisticCardProps {
+  title: string | React.ReactNode;
+  value: string | React.ReactNode;
+  statisticProps?: StatisticProps;
+}
+export declare const StatisticCard: React.FC<StatisticCardProps>;

package/dist/components/Card/statistic.js

@@ -0,0 +1,34 @@
+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;
+};
+import { jsx } from "react/jsx-runtime";
+import { Statistic } from "antd";
+import "./statistic.css";
+import { useTheme } from "../../utils";
+const StatisticCard = ({ title, value, statisticProps }) => {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx("div", { className: ["statistic-card", `statistic-card-${theme}`].join(" "), children: /* @__PURE__ */ jsx(
+    Statistic,
+    __spreadValues({
+      title: /* @__PURE__ */ jsx("div", { className: "statistic-card-title", children: title }),
+      valueRender: () => value,
+      valueStyle: { fontSize: 24 }
+    }, statisticProps)
+  ) });
+};
+export {
+  StatisticCard
+};

package/dist/components/Charts/TimelineCharts/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DurationMetric, ITraceEventData } from '../types';
+export declare const TimelineCom: React.FC<{
+  loaderData?: DurationMetric[];
+  pluginsData?: ITraceEventData[];
+  formatterFn: Function;
+  chartType?: string;
+}>;

package/dist/components/Charts/TimelineCharts/index.js

@@ -0,0 +1,197 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactECharts from "echarts-for-react";
+import * as echarts from "echarts/core";
+import dayjs from "dayjs";
+import { groupBy } from "lodash-es";
+const ColorMap = [
+  { color: "#DC2626" },
+  { color: "#FFE382" },
+  { color: "#7B66FF" },
+  { color: "#96EFFF" },
+  { color: "#E25E3E" },
+  { color: "#D0F288" },
+  { color: "#8ADAB2" },
+  { color: "#FFC5C5" },
+  { color: "#3876BF" }
+];
+const TimelineCom = ({ loaderData, pluginsData, formatterFn, chartType = "normal" }) => {
+  const data = [];
+  let categories = [];
+  useMemo(() => {
+    if (!loaderData)
+      return;
+    const _categories = [];
+    loaderData.forEach((_l) => {
+      _categories.unshift(_l.n + " total");
+      _categories.unshift(_l.n);
+    });
+    loaderData.forEach(function(_loaderData, _i) {
+      var _a;
+      const typeItem = ColorMap[_i % 9];
+      data.push({
+        name: _loaderData.n + " total",
+        value: [_categories.indexOf(_loaderData.n + " total"), _loaderData.s, _loaderData.e, _loaderData.e - _loaderData.s],
+        itemStyle: {
+          normal: {
+            color: typeItem.color
+          }
+        }
+      });
+      if (!(_loaderData == null ? void 0 : _loaderData.c))
+        return;
+      for (let l = 0; l < ((_a = _loaderData == null ? void 0 : _loaderData.c) == null ? void 0 : _a.length); l++) {
+        data.push({
+          name: _loaderData.n,
+          value: [_categories.indexOf(_loaderData.n), _loaderData.c[l].s, _loaderData.c[l].e, _loaderData.c[l].e - _loaderData.c[l].s],
+          itemStyle: {
+            normal: {
+              color: ColorMap[Math.round(Math.random() * (ColorMap.length - 1))].color
+            }
+          },
+          ext: _loaderData.c[l].ext
+        });
+      }
+    });
+    categories = _categories.map((val, i) => {
+      if (i % 2 !== 0) {
+        return val.replace(" total", "");
+      } else {
+        return "";
+      }
+    });
+  }, [loaderData]);
+  useMemo(() => {
+    if (!pluginsData)
+      return;
+    const _pluginsData = groupBy(pluginsData, (e) => e.pid);
+    Object.keys(_pluginsData).reverse().forEach(function(key, i) {
+      _pluginsData[key].forEach((_plugin) => {
+        data.push({
+          name: String(_plugin.pid),
+          value: [i, _plugin.args.s, _plugin.args.e, _plugin.args.e - _plugin.args.s],
+          itemStyle: {
+            normal: {
+              color: ColorMap[Math.round(Math.random() * (ColorMap.length - 1))].color
+            }
+          },
+          ext: _plugin
+        });
+      });
+      categories.push(String(key.charAt(0).toUpperCase() + key.slice(1)));
+    });
+  }, [pluginsData]);
+  function renderItem(params, api) {
+    const categoryIndex = api.value(0);
+    const start = api.coord([api.value(1), categoryIndex]);
+    const end = api.coord([api.value(2), categoryIndex]);
+    const height = api.size([0, 1])[1] * 0.4;
+    const rectShape = echarts.graphic.clipRectByRect(
+      {
+        x: start[0],
+        y: chartType === "loader" ? start[1] - (categoryIndex % 2 !== 0 ? 0 : height) : start[1],
+        width: end[0] - start[0] || 5,
+        height
+      },
+      {
+        x: params.coordSys.x,
+        y: params.coordSys.y,
+        width: params.coordSys.width,
+        height: params.coordSys.height
+      }
+    );
+    return rectShape && {
+      type: "rect",
+      transition: ["shape"],
+      shape: rectShape,
+      style: api.style(),
+      enterFrom: {
+        style: { opacity: 0 },
+        x: 0
+      }
+    };
+  }
+  const option = {
+    tooltip: {
+      formatter: (raw) => {
+        return formatterFn(raw);
+      }
+    },
+    dataZoom: [
+      {
+        type: "slider",
+        filterMode: "weakFilter",
+        showDataShadow: false,
+        top: -10,
+        labelFormatter: ""
+      },
+      {
+        type: "inside",
+        filterMode: "weakFilter"
+      }
+    ],
+    grid: {
+      top: 10,
+      left: 0,
+      bottom: 10,
+      right: 0,
+      height: categories.length > 2 ? "auto" : chartType === "loader" ? categories.length * 150 : categories.length * 100,
+      containLabel: true
+    },
+    xAxis: {
+      position: "top",
+      splitLine: {
+        show: false
+      },
+      scale: true,
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        formatter(val) {
+          return dayjs(val).format("HH:mm:ss");
+        }
+      }
+    },
+    yAxis: {
+      type: "category",
+      splitLine: {
+        interval: chartType === "loader" ? 1 : 0,
+        show: true
+      },
+      axisLabel: {
+        inside: true,
+        lineHeight: 20,
+        width: 100,
+        fontSize: 12,
+        color: "#000",
+        verticalAlign: "bottom"
+      },
+      axisLine: {
+        show: true
+      },
+      axisTick: {
+        show: false
+      },
+      data: categories
+    },
+    series: [
+      {
+        type: "custom",
+        renderItem,
+        itemStyle: {
+          opacity: 0.8
+        },
+        encode: {
+          x: [1, 2],
+          y: 0
+        },
+        data
+      }
+    ]
+  };
+  return /* @__PURE__ */ jsx(ReactECharts, { option, echarts, style: { width: "100%", minHeight: "400px" } });
+};
+export {
+  TimelineCom
+};

package/dist/components/Charts/bootstrap.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './loader.scss';
+import './tooltips.scss';
+import { CommonChartProps } from './common';
+export declare const BootstrapChartContainer: React.FC<CommonChartProps>;

package/dist/components/Charts/bootstrap.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Space } from "antd";
+import { BarChartOutlined } from "@ant-design/icons";
+import { SDK } from "@rsdoctor/types";
+import { TextDrawer } from "../TextDrawer";
+import "./loader.css";
+import "./tooltips.css";
+import { CommonExecutionEmptyTips, CommonExecutionsChart } from "./common";
+import { ServerAPIProvider } from "../Manifest";
+import { Summary } from "@rsdoctor/utils/common";
+const BootstrapChartContainer = ({ summary }) => {
+  const { costs = [] } = summary || {};
+  const target = costs.find((e) => e.name === Summary.SummaryCostsDataName.Bootstrap);
+  const hooks = [
+    "environment",
+    "afterEnvironment",
+    "entryOption",
+    "afterPlugins",
+    "afterResolvers",
+    "initialize",
+    "beforeRun",
+    "run",
+    "watchRun",
+    "normalModuleFactory",
+    "contextModuleFactory",
+    "beforeCompile"
+  ];
+  if (!target)
+    return null;
+  return /* @__PURE__ */ jsx(
+    TextDrawer,
+    {
+      drawerProps: { title: 'Chart of the "Bootstrap -> BeforeCompile" stage' },
+      text: /* @__PURE__ */ jsxs(Space, { children: [
+        "detail",
+        /* @__PURE__ */ jsx(BarChartOutlined, {})
+      ] }),
+      children: /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetPluginData, body: { hooks }, children: (res) => res && res.length ? /* @__PURE__ */ jsx(CommonExecutionsChart, { plugins: res }) : /* @__PURE__ */ jsx(CommonExecutionEmptyTips, {}) })
+    }
+  );
+};
+export {
+  BootstrapChartContainer
+};

package/dist/components/Charts/common.d.ts

@@ -0,0 +1,13 @@
+import { SDK } from '@rsdoctor/types';
+import React from 'react';
+import './loader.scss';
+import './tooltips.scss';
+import { Metric } from './types';
+export interface CommonChartProps {
+  summary: SDK.SummaryData;
+}
+export declare const CommonExecutionsChart: React.FC<{
+  plugins: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetPluginData>;
+  defaultDatas?: Metric[];
+}>;
+export declare const CommonExecutionEmptyTips: React.FC;

package/dist/components/Charts/common.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Typography } from "antd";
+import { useEffect, useRef, useState } from "react";
+import { useTheme } from "../../utils";
+import { TimelineCom } from "./TimelineCharts";
+import "./loader.css";
+import "./tooltips.css";
+import { formatterForPlugins, processTrans } from "./utils";
+const CommonExecutionsChart = ({ plugins, defaultDatas = [] }) => {
+  const { isDark } = useTheme();
+  const ref = useRef(null);
+  const [data, setData] = useState([]);
+  useEffect(() => {
+    const arr = [];
+    plugins.forEach((item) => {
+      item.data.forEach((el) => {
+        arr.push({
+          p: item.hook,
+          n: `${item.tapName}`,
+          s: el.startAt,
+          e: el.endAt
+        });
+      });
+    });
+    setData([
+      ...processTrans(defaultDatas),
+      ...processTrans(arr)
+    ]);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["loader-chart-container", isDark ? "loader-chart-container_dark" : ""].join(" ").trim(),
+      ref,
+      style: { width: "100%", height: "600px" },
+      children: /* @__PURE__ */ jsx(TimelineCom, { pluginsData: data, formatterFn: formatterForPlugins })
+    }
+  );
+};
+const CommonExecutionEmptyTips = () => {
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      message: /* @__PURE__ */ jsxs(Typography.Text, { children: [
+        /* @__PURE__ */ jsx(Typography.Text, { children: "make sure that you have turn on " }),
+        /* @__PURE__ */ jsx(Typography.Text, { children: " in configuration for the Web Doctor plugin." })
+      ] }),
+      type: "info",
+      showIcon: true
+    }
+  );
+};
+export {
+  CommonExecutionEmptyTips,
+  CommonExecutionsChart
+};