@rsdoctor/components 0.1.1 → 0.1.3

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

@@ -1,21 +1,21 @@
 import React from 'react';
 export declare enum BadgeType {
-  Default = "default",
-  Success = "success",
-  Warn = "warn",
-  Error = "error",
+    Default = "default",
+    Success = "success",
+    Warn = "warn",
+    Error = "error"
 }
 export declare const BadgeColorMap: {
-  default: string;
-  success: string;
-  warn: string;
-  error: string;
+    default: string;
+    success: string;
+    warn: string;
+    error: string;
 };
 interface BadgeProps {
-  label: string | number | React.ReactNode;
-  value: string | number | React.ReactNode;
-  type?: BadgeType | `${BadgeType}`;
-  tooltip?: true | string | React.ReactNode;
+    label: string | number | React.ReactNode;
+    value: string | number | React.ReactNode;
+    type?: BadgeType | `${BadgeType}`;
+    tooltip?: true | string | React.ReactNode;
 }
 export declare const Badge: React.FC<BadgeProps>;
-export {};
+export {};

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

@@ -1,23 +1,23 @@
 import { Client } from '@rsdoctor/types';
 import React from 'react';
 export interface DiffCardProps extends Pick<DiffCardContentProps, 'formatter'> {
-  titles: Array<string> | [string | React.ReactNode];
-  datas: Array<DiffCardContentProps['data']>;
-  showPercentInTitle?: boolean;
+    titles: Array<string> | [string | React.ReactNode];
+    datas: Array<DiffCardContentProps['data']>;
+    showPercentInTitle?: boolean;
 }
 export interface DiffCardContentProps {
-  data: Client.RsdoctorClientAssetsDiffItem;
-  formatter?(v: number, target: 'baseline' | 'current'): number | string | React.ReactNode;
+    data: Client.RsdoctorClientAssetsDiffItem;
+    formatter?(v: number, target: 'baseline' | 'current'): number | string | React.ReactNode;
 }
 export interface PercentProps {
-  percent: number;
-  state: Client.RsdoctorClientDiffState;
-  fontSize?: React.CSSProperties['fontSize'];
+    percent: number;
+    state: Client.RsdoctorClientDiffState;
+    fontSize?: React.CSSProperties['fontSize'];
 }
 export declare const SizePercent: React.FC<{
-  baseline: number;
-  current: number;
+    baseline: number;
+    current: number;
 } & Omit<PercentProps, 'percent' | 'state'>>;
 export declare const Percent: React.FC<PercentProps>;
 export declare const DiffCardContent: React.FC<DiffCardContentProps>;
-export declare const DiffCard: React.FC<DiffCardProps>;
+export declare const DiffCard: React.FC<DiffCardProps>;

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

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

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

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

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

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

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

@@ -1,8 +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;
-}>;
+    loaderData?: DurationMetric[];
+    pluginsData?: ITraceEventData[];
+    formatterFn: Function;
+    chartType?: string;
+}>;

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

@@ -4,7 +4,7 @@ import ReactECharts from "echarts-for-react";
 import * as echarts from "echarts/core";
 import dayjs from "dayjs";
 import { groupBy } from "lodash-es";
-import randomColor from "randomcolor";
+import { LITTLE_PALETTE_COLORS, PALETTE_COLORS } from "../constants";
 const LINE_HEIGHT = 60;
 const TimelineCom = memo(({ loaderData, pluginsData, formatterFn, chartType = "normal" }) => {
   const data = [];
@@ -21,10 +21,15 @@ const TimelineCom = memo(({ loaderData, pluginsData, formatterFn, chartType = "n
     loaderData.forEach(function(_loaderData, _i) {
       data.push({
         name: _loaderData.n + " total",
-        value: [_categories.indexOf(_loaderData.n + " total"), _loaderData.s, _loaderData.e, _loaderData.e - _loaderData.s],
+        value: [
+          _categories.indexOf(_loaderData.n + " total"),
+          _loaderData.s,
+          _loaderData.e,
+          _loaderData.e - _loaderData.s
+        ],
         itemStyle: {
           normal: {
-            color: randomColor()
+            color: LITTLE_PALETTE_COLORS[_i % 8]
           }
         }
       });
@@ -33,10 +38,15 @@ const TimelineCom = memo(({ loaderData, pluginsData, formatterFn, chartType = "n
       for (let l = 0; l < _loaderData?.c?.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],
+          value: [
+            _categories.indexOf(_loaderData.n),
+            _loaderData.c[l].s,
+            _loaderData.c[l].e,
+            _loaderData.c[l].e - _loaderData.c[l].s
+          ],
           itemStyle: {
             normal: {
-              color: randomColor()
+              color: PALETTE_COLORS[(l + _i) % 30]
             }
           },
           ext: _loaderData.c[l].ext
@@ -56,13 +66,18 @@ const TimelineCom = memo(({ loaderData, pluginsData, formatterFn, chartType = "n
       return;
     const _pluginsData = groupBy(pluginsData, (e) => e.pid);
     Object.keys(_pluginsData).reverse().forEach(function(key, i) {
-      _pluginsData[key].forEach((_plugin) => {
+      _pluginsData[key].forEach((_plugin, _i) => {
         data.push({
           name: String(_plugin.pid),
-          value: [i, _plugin.args.s, _plugin.args.e, _plugin.args.e - _plugin.args.s],
+          value: [
+            i,
+            _plugin.args.s,
+            _plugin.args.e,
+            _plugin.args.e - _plugin.args.s
+          ],
           itemStyle: {
             normal: {
-              color: randomColor()
+              color: PALETTE_COLORS[(_i + i) % 30]
             }
           },
           ext: _plugin
@@ -183,7 +198,14 @@ const TimelineCom = memo(({ loaderData, pluginsData, formatterFn, chartType = "n
     };
     setOptinsData(option);
   }, [loaderData, pluginsData]);
-  return /* @__PURE__ */ jsx(ReactECharts, { option: optionsData, echarts, style: { width: "100%", minHeight: "400px" } });
+  return /* @__PURE__ */ jsx(
+    ReactECharts,
+    {
+      option: optionsData,
+      echarts,
+      style: { width: "100%", minHeight: "400px" }
+    }
+  );
 });
 export {
   TimelineCom

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

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

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

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

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

@@ -0,0 +1,2 @@
+export declare const LITTLE_PALETTE_COLORS: string[];
+export declare const PALETTE_COLORS: string[];

package/dist/components/Charts/constants.js

@@ -0,0 +1,46 @@
+const LITTLE_PALETTE_COLORS = [
+  "#a8071a",
+  "#ad6800",
+  "#237804",
+  "#006d75",
+  "#ad8b00",
+  "#ad4e00",
+  "#5b8c00",
+  "#003eb3"
+];
+const PALETTE_COLORS = [
+  "#4096ff",
+  "#69b1ff",
+  "#9e1068",
+  "#722ed1",
+  "#bae0ff",
+  "#d3adf7",
+  "#597ef7",
+  "#ffadd2",
+  "#c41d7f",
+  "#391085",
+  "#ffa940",
+  "#5c060b",
+  "#a81414",
+  "#ff7875",
+  "#ffd591",
+  "#ffe58f",
+  "#d3f261",
+  "#d4b106",
+  "#7cb305",
+  "#f4ffb8",
+  "#fa8c16",
+  "#0958d9",
+  "#fff3f0",
+  "#82090d",
+  "#ffbfb3",
+  "#f44336",
+  "#ff998a",
+  "#ff7161",
+  "#ffe2db",
+  "#cf2923"
+];
+export {
+  LITTLE_PALETTE_COLORS,
+  PALETTE_COLORS
+};

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

@@ -2,4 +2,4 @@ import React from 'react';
 import { CommonChartProps } from './common';
 import './loader.scss';
 import './tooltips.scss';
-export declare const DoneChartContainer: React.FC<CommonChartProps>;
+export declare const DoneChartContainer: React.FC<CommonChartProps>;

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { SDK } from '@rsdoctor/types';
 export declare const LoaderChartBase: React.FC<{
-  project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
+    project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
 }>;
 export declare const LoaderChart: React.FC<Omit<{
-  project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
+    project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
 }, "project"> & Partial<{
-  body?: any;
-}>>;
+    body?: any;
+}>>;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import './loader.scss';
 import { ChartProps } from './types';
-export declare const LoaderExecutionsChart: React.FC<ChartProps>;
+export declare const LoaderExecutionsChart: React.FC<ChartProps>;

package/dist/components/Charts/loader.js

@@ -1,5 +1,11 @@
 import { Fragment, jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useEffect, useState } from "react";
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useEffect,
+  useState
+} from "react";
 import { groupBy } from "lodash-es";
 import { Empty } from "antd";
 import "./loader.css";
@@ -7,12 +13,23 @@ import { useTheme } from "../../utils/manifest";
 import { findLoaderTotalTiming } from "../../utils/loader";
 import { beautifyPath } from "../../utils/file";
 import { TimelineCom } from "./TimelineCharts";
-import { renderTotalLoadersTooltip, getTooltipHtmlForLoader } from "./utils";
-const LoaderExecutionsChart = ({ loaders, cwd }) => {
+import {
+  renderTotalLoadersTooltip,
+  getTooltipHtmlForLoader,
+  useDebounceHook
+} from "./utils";
+const LoaderExecutionsChart = ({
+  loaders,
+  cwd
+}) => {
   const { isDark } = useTheme();
   const ref = useRef(null);
   const [data, setData] = useState([]);
-  const groupByLoader = useMemo(() => groupBy(loaders, (e) => e.loader), [loaders]);
+  const durationMetricData = useDebounceHook(data, 200);
+  const groupByLoader = useMemo(
+    () => groupBy(loaders, (e) => e.loader),
+    [loaders]
+  );
   const formatterForLoader = useCallback((raw) => {
     const { name, data: data2 } = raw;
     const loaderName = name.replace(" total", "");
@@ -22,35 +39,47 @@ const LoaderExecutionsChart = ({ loaders, cwd }) => {
     return renderTotalLoadersTooltip(loaderName, loaders, cwd);
   }, []);
   useEffect(() => {
-    const _data = Object.keys(groupByLoader).map((loaderName) => {
-      const list = groupByLoader[loaderName] || [];
-      const { start, end } = findLoaderTotalTiming(list);
-      return {
-        p: loaderName,
-        n: loaderName,
-        s: start,
-        e: end,
-        c: list.map((e) => {
-          return {
-            p: loaderName,
-            // n: loaderName,
-            n: beautifyPath(e.resource, cwd),
-            s: e.startAt,
-            e: e.endAt,
-            ext: e
-          };
-        })
-      };
-    });
+    const _data = Object.keys(groupByLoader).map(
+      (loaderName) => {
+        const list = groupByLoader[loaderName] || [];
+        const { start, end } = findLoaderTotalTiming(list);
+        return {
+          p: loaderName,
+          n: loaderName,
+          s: start,
+          e: end,
+          c: list.map((e) => {
+            return {
+              p: loaderName,
+              // n: loaderName,
+              n: beautifyPath(e.resource, cwd),
+              s: e.startAt,
+              e: e.endAt,
+              ext: e
+            };
+          })
+        };
+      }
+    );
     setData(_data);
   }, [groupByLoader]);
   return /* @__PURE__ */ jsx(Fragment, { children: data?.length ? /* @__PURE__ */ jsx(
     "div",
     {
-      className: ["loader-chart-container", isDark ? "loader-chart-container_dark" : ""].join(" ").trim(),
+      className: [
+        "loader-chart-container",
+        isDark ? "loader-chart-container_dark" : ""
+      ].join(" ").trim(),
       ref,
       style: { width: "100%", height: "600px" },
-      children: /* @__PURE__ */ jsx(TimelineCom, { loaderData: data, formatterFn: formatterForLoader, chartType: "loader" })
+      children: /* @__PURE__ */ jsx(
+        TimelineCom,
+        {
+          loaderData: durationMetricData,
+          formatterFn: formatterForLoader,
+          chartType: "loader"
+        }
+      )
     }
   ) : /* @__PURE__ */ jsx(Empty, {}) });
 };

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

@@ -2,4 +2,4 @@ import React from 'react';
 import { CommonChartProps } from './common';
 import './loader.scss';
 import './tooltips.scss';
-export declare const MinifyChartContainer: React.FC<CommonChartProps>;
+export declare const MinifyChartContainer: React.FC<CommonChartProps>;

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

@@ -1,61 +1,61 @@
 import { SDK } from "@rsdoctor/types";
 export interface ChartProps {
-  loaders: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetLoaderChartData>;
-  cwd: string;
+    loaders: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetLoaderChartData>;
+    cwd: string;
 }
 export interface CommonMetricPart<T extends string = string> {
-  _n?: boolean;
-  _c?: string;
-  p: string;
-  n: T;
-  ext?: unknown;
+    _n?: boolean;
+    _c?: string;
+    p: string;
+    n: T;
+    ext?: unknown;
 }
 export declare type Metric = DurationMetric;
 export interface DurationMetric extends CommonMetricPart {
-  _r?: [start: string, end: string];
-  s: number;
-  e: number;
-  c?: DurationMetric[];
+    _r?: [start: string, end: string];
+    s: number;
+    e: number;
+    c?: DurationMetric[];
 }
 export declare enum ETraceEventPhase {
-  BEGIN = "B",
-  END = "E",
-  COMPLETE = "X",
-  INSTANT = "I",
-  MARK = "R",
+    BEGIN = "B",
+    END = "E",
+    COMPLETE = "X",
+    INSTANT = "I",
+    MARK = "R"
 }
 type MicroSeconds = number;
 type ProcessID = number | string;
 type ArgsType = {
-  p: string;
-  n: string;
-  s: number;
-  e: number;
+    p: string;
+    n: string;
+    s: number;
+    e: number;
 };
 export interface ITraceEventData {
-  /**
-   *Any arguments provided for the event. Some of the event types have required argument fields, otherwise, you can put any information you wish in here. The arguments are displayed in Trace Viewer when you view an event in the analysis section.
-   */
-  args: ArgsType;
-  /**
-   * The name of the event, as displayed in Chart.
-   */
-  name: string;
-  /**
-   * The event type. This is a single character which changes depending on the type of event being output.
-   */
-  ph: ETraceEventPhase;
-  /**
-   *  The process ID for the process that output this event.
-   */
-  pid: ProcessID;
-  /**
-   *  The tracing clock timestamp of the event. The timestamps are provided at microsecond granularity.
-   */
-  ts: MicroSeconds;
-  /**
-   *  specify the tracing clock duration of complete events in microseconds.
-   */
-  dur?: MicroSeconds;
+    /**
+     *Any arguments provided for the event. Some of the event types have required argument fields, otherwise, you can put any information you wish in here. The arguments are displayed in Trace Viewer when you view an event in the analysis section.
+     */
+    args: ArgsType;
+    /**
+     * The name of the event, as displayed in Chart.
+     */
+    name: string;
+    /**
+     * The event type. This is a single character which changes depending on the type of event being output.
+     */
+    ph: ETraceEventPhase;
+    /**
+     *  The process ID for the process that output this event.
+     */
+    pid: ProcessID;
+    /**
+     *  The tracing clock timestamp of the event. The timestamps are provided at microsecond granularity.
+     */
+    ts: MicroSeconds;
+    /**
+     *  specify the tracing clock duration of complete events in microseconds.
+     */
+    dur?: MicroSeconds;
 }
-export {};
+export {};

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

@@ -6,7 +6,8 @@ export declare function renderTotalLoadersTooltip(loaderName: string, loaders: S
 export declare function transformDurationMetric(rawData: DurationMetric[]): ITraceEventData[];
 export declare function processTrans(rawData: DurationMetric[]): ITraceEventData[];
 export declare function formatterForPlugins(raw: {
-  data: {
-    ext: ITraceEventData;
-  };
-}): string;
+    data: {
+        ext: ITraceEventData;
+    };
+}): string;
+export declare function useDebounceHook(value: DurationMetric[], delay: number): DurationMetric[] | undefined;