@rsdoctor/components 1.1.4 → 1.1.6

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export type TreeNode = {
+    name: string;
+    value?: number;
+    children?: TreeNode[];
+    path?: string;
+    sourceSize?: number;
+    bundledSize?: number;
+};
+interface TreeMapProps {
+    treeData: TreeNode[];
+    valueKey?: 'sourceSize' | 'bundledSize';
+    style?: React.CSSProperties;
+    onChartClick?: (params: any) => void;
+}
+export declare const TreeMap: React.ForwardRefExoticComponent<TreeMapProps & React.RefAttributes<any>>;
+export declare const AssetTreemapWithFilter: React.FC<{
+    treeData: TreeNode[];
+    onChartClick?: (params: any) => void;
+}>;
+export {};

package/dist/components/Charts/TreeMap.js

@@ -0,0 +1,281 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState, memo, useMemo } from "react";
+import ReactEChartsCore from "echarts-for-react/lib/core";
+import * as echarts from "echarts/core";
+import { TreemapChart } from "echarts/charts";
+import { TooltipComponent } from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import { BUNDLE_ANALYZER_COLORS, COLOR_GROUPS } from "./constants";
+import { Checkbox, Card, Typography, Space } from "antd";
+import {
+  VerticalAlignBottomOutlined,
+  VerticalAlignTopOutlined
+} from "@ant-design/icons";
+import { formatSize, useI18n } from "../../utils";
+import { SearchModal } from "../../pages/BundleSize/components/search-modal";
+function hashString(str) {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) + hash + str.charCodeAt(i);
+  }
+  return hash >>> 0;
+}
+function getLevelOption() {
+  return [
+    {
+      itemStyle: {
+        color: "white",
+        borderColor: "#eee",
+        borderWidth: 5,
+        gapWidth: 5
+      },
+      emphasis: {
+        itemStyle: {
+          borderColor: "#a29f9f"
+        }
+      }
+    },
+    {
+      colorSaturation: [0.25, 0.5],
+      itemStyle: {
+        borderWidth: 5,
+        gapWidth: 5,
+        borderColorSaturation: 0.5,
+        borderColor: "#eee"
+      }
+    }
+  ];
+}
+const TreeMapInner = memo(
+  ({
+    treeData,
+    valueKey = "sourceSize",
+    style,
+    onChartClick,
+    forwardedRef
+  }) => {
+    const [option, setOption] = useState(null);
+    const chartRef = React.useRef(null);
+    useEffect(() => {
+      if (forwardedRef && chartRef.current) {
+        if (typeof forwardedRef === "function") {
+          forwardedRef(chartRef.current);
+        } else {
+          forwardedRef.current = chartRef.current;
+        }
+      }
+    }, [forwardedRef, chartRef.current]);
+    useEffect(() => {
+      echarts.use([TreemapChart, TooltipComponent, CanvasRenderer]);
+    }, []);
+    useEffect(() => {
+      if (!treeData)
+        return;
+      function convert(node, colorGroup, level = 0) {
+        const groupColors = BUNDLE_ANALYZER_COLORS[colorGroup];
+        const children = node.children?.map(
+          (c, _i) => convert(c, colorGroup, level + 1)
+        );
+        return {
+          id: node.path ? hashString(node.path) : void 0,
+          name: node.name,
+          value: node[valueKey] ?? node.value ?? 0,
+          path: node.path,
+          sourceSize: node.sourceSize ?? node.value,
+          bundledSize: node.bundledSize,
+          children: children && children.length > 0 ? children : void 0,
+          itemStyle: {
+            borderWidth: 2,
+            gapWidth: 2,
+            borderColorSaturation: 0.2,
+            colorSaturation: 0.2,
+            color: groupColors[level % groupColors.length],
+            borderColor: groupColors[level % groupColors.length]
+          },
+          level
+        };
+      }
+      const data = treeData.map((item, index) => {
+        const group = COLOR_GROUPS[index % COLOR_GROUPS.length];
+        return convert(item, group, 0);
+      });
+      setOption({
+        title: {
+          text: "Bundle Tree Map",
+          left: "center"
+        },
+        tooltip: {
+          position: "top",
+          formatter: function(info) {
+            var treePathInfo = info.treePathInfo;
+            var treePath = [];
+            for (var i = 1; i < treePathInfo.length; i++) {
+              treePath.push(treePathInfo[i].name);
+            }
+            var node = info.data || {};
+            var path = node.path || treePath.join("/");
+            var sourceSize = node.sourceSize;
+            var bundledSize = node.bundledSize;
+            return [
+              '<div class="tooltip-title">' + echarts.format.encodeHTML(path) + "</div>",
+              "<div><b>Source Size:</b> <b>" + (sourceSize !== void 0 ? formatSize(sourceSize) : "-") + "</b></div>",
+              "<div><b>Bundled Size:</b> <b>" + (bundledSize !== void 0 ? formatSize(bundledSize) : "-") + "</b></div>"
+            ].join("");
+          }
+        },
+        series: [
+          {
+            name: "Bundle Tree Map",
+            id: "bundle-treemap",
+            type: "treemap",
+            visibleMin: 300,
+            left: 10,
+            right: 10,
+            top: 10,
+            bottom: 10,
+            label: {
+              show: true,
+              formatter: "{b}",
+              color: "#000"
+            },
+            upperLabel: {
+              show: true,
+              height: 30
+            },
+            levels: getLevelOption(),
+            data
+          }
+        ]
+      });
+    }, [treeData, valueKey]);
+    return option ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      ReactEChartsCore,
+      {
+        ref: chartRef,
+        option,
+        echarts,
+        onEvents: onChartClick ? { click: onChartClick } : void 0,
+        style: {
+          width: "100%",
+          minHeight: "500px",
+          maxHeight: "1000px",
+          border: "5px solid white",
+          borderRadius: "10px",
+          ...style
+        }
+      }
+    ) }) : null;
+  }
+);
+const TreeMap = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(TreeMapInner, { ...props, forwardedRef: ref }));
+const AssetTreemapWithFilter = ({ treeData, onChartClick }) => {
+  const assetNames = useMemo(
+    () => treeData.map((item) => item.name),
+    [treeData]
+  );
+  const [checkedAssets, setCheckedAssets] = useState(assetNames);
+  const [collapsed, setCollapsed] = useState(false);
+  const [searchModalOpen, setSearchModalOpen] = useState(false);
+  const chartRef = React.useRef(null);
+  const { t } = useI18n();
+  const filteredTreeData = useMemo(
+    () => treeData.filter((item) => checkedAssets.includes(item.name)),
+    [treeData, checkedAssets]
+  );
+  const handleModuleClick = (module) => {
+    if (!module?.path)
+      return;
+    const nodeId = hashString(module.path);
+    if (chartRef.current) {
+      const echartsInstance = chartRef.current.getEchartsInstance();
+      echartsInstance.dispatchAction({
+        type: "treemapZoomToNode",
+        seriesId: "bundle-treemap",
+        targetNodeId: nodeId.toString()
+      });
+    }
+    setSearchModalOpen(false);
+  };
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(
+      Card,
+      {
+        title: /* @__PURE__ */ jsxs(Space, { children: [
+          /* @__PURE__ */ jsx(Typography.Text, { children: t("Output Assets List") }),
+          /* @__PURE__ */ jsx(
+            SearchModal,
+            {
+              onModuleClick: handleModuleClick,
+              open: searchModalOpen,
+              setOpen: setSearchModalOpen,
+              isIcon: true
+            }
+          )
+        ] }),
+        extra: /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: { cursor: "pointer", marginLeft: 8 },
+            onClick: () => setCollapsed((c) => !c),
+            "aria-label": collapsed ? t("Expand") : t("Collapse"),
+            children: collapsed ? /* @__PURE__ */ jsx(VerticalAlignBottomOutlined, {}) : /* @__PURE__ */ jsx(VerticalAlignTopOutlined, {})
+          }
+        ),
+        size: "small",
+        bodyStyle: {
+          overflow: "hidden",
+          height: collapsed ? 0 : void 0,
+          padding: collapsed ? 0 : void 0,
+          transition: "height 0.3s cubic-bezier(.4,0,.2,1), padding 0.3s"
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              opacity: collapsed ? 0 : 1,
+              transition: "opacity 0.3s",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  indeterminate: checkedAssets.length > 0 && checkedAssets.length < assetNames.length,
+                  checked: checkedAssets.length === assetNames.length,
+                  onChange: (e) => setCheckedAssets(e.target.checked ? assetNames : []),
+                  style: { marginBottom: 4 },
+                  children: "ALL / NONE"
+                },
+                "all-none-checkbox"
+              ),
+              /* @__PURE__ */ jsx(
+                Checkbox.Group,
+                {
+                  options: assetNames,
+                  value: checkedAssets,
+                  onChange: setCheckedAssets,
+                  style: { display: "flex", gap: 8, fontWeight: 500 }
+                },
+                "asset-checkbox-group"
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+      TreeMap,
+      {
+        ref: chartRef,
+        treeData: filteredTreeData,
+        onChartClick
+      }
+    ) })
+  ] }) });
+};
+export {
+  AssetTreemapWithFilter,
+  TreeMap
+};
+
+//# sourceMappingURL=TreeMap.js.map

package/dist/components/Charts/TreeMap.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../src/components/Charts/TreeMap.tsx"],"sourcesContent":["import React, { useEffect, useState, memo, useMemo } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { TreemapChart } from 'echarts/charts';\nimport { TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { BUNDLE_ANALYZER_COLORS, COLOR_GROUPS } from './constants';\nimport { Checkbox, Card, Typography, Space } from 'antd';\nimport {\n  VerticalAlignBottomOutlined,\n  VerticalAlignTopOutlined,\n} from '@ant-design/icons';\nimport { formatSize, useI18n } from '../../utils';\nimport { SearchModal } from '../../pages/BundleSize/components/search-modal';\n\n// TreeNode type should match the output of flattenTreemapData\nexport type TreeNode = {\n  name: string;\n  value?: number;\n  children?: TreeNode[];\n  path?: string;\n  sourceSize?: number;\n  bundledSize?: number;\n};\n\ninterface TreeMapProps {\n  treeData: TreeNode[];\n  valueKey?: 'sourceSize' | 'bundledSize'; // which value to show as area\n  style?: React.CSSProperties;\n  onChartClick?: (params: any) => void;\n}\n\n// Simple hash function for string (djb2)\nfunction hashString(str: string): number {\n  let hash = 5381;\n  for (let i = 0; i < str.length; i++) {\n    hash = (hash << 5) + hash + str.charCodeAt(i); /* hash * 33 + c */\n  }\n  return hash >>> 0; // Ensure unsigned\n}\n\nfunction getLevelOption() {\n  return [\n    {\n      itemStyle: {\n        color: 'white',\n        borderColor: '#eee',\n        borderWidth: 5,\n        gapWidth: 5,\n      },\n      emphasis: {\n        itemStyle: {\n          borderColor: '#a29f9f',\n        },\n      },\n    },\n    {\n      colorSaturation: [0.25, 0.5],\n      itemStyle: {\n        borderWidth: 5,\n        gapWidth: 5,\n        borderColorSaturation: 0.5,\n        borderColor: '#eee',\n      },\n    },\n  ];\n}\n\nconst TreeMapInner: React.FC<TreeMapProps & { forwardedRef?: React.Ref<any> }> =\n  memo(\n    ({\n      treeData,\n      valueKey = 'sourceSize',\n      style,\n      onChartClick,\n      forwardedRef,\n    }) => {\n      const [option, setOption] = useState<any>(null);\n      const chartRef = React.useRef<any>(null);\n\n      // Expose chartRef to parent if forwardedRef is provided\n      useEffect(() => {\n        if (forwardedRef && chartRef.current) {\n          if (typeof forwardedRef === 'function') {\n            forwardedRef(chartRef.current);\n          } else {\n            (forwardedRef as React.MutableRefObject<any>).current =\n              chartRef.current;\n          }\n        }\n      }, [forwardedRef, chartRef.current]);\n\n      // Register ECharts components\n      useEffect(() => {\n        echarts.use([TreemapChart, TooltipComponent, CanvasRenderer]);\n      }, []);\n\n      useEffect(() => {\n        if (!treeData) return;\n        // Helper to recursively add value field for ECharts\n        function convert(\n          node: TreeNode,\n          colorGroup: keyof typeof BUNDLE_ANALYZER_COLORS,\n          level = 0,\n        ): any {\n          const groupColors = BUNDLE_ANALYZER_COLORS[colorGroup];\n          const children = node.children?.map((c, _i) =>\n            convert(c, colorGroup, level + 1),\n          );\n\n          return {\n            id: node.path ? hashString(node.path) : undefined,\n            name: node.name,\n            value: node[valueKey] ?? node.value ?? 0,\n            path: node.path,\n            sourceSize: node.sourceSize ?? node.value,\n            bundledSize: node.bundledSize,\n            children: children && children.length > 0 ? children : undefined,\n            itemStyle: {\n              borderWidth: 2,\n              gapWidth: 2,\n              borderColorSaturation: 0.2,\n              colorSaturation: 0.2,\n              color: groupColors[level % groupColors.length],\n              borderColor: groupColors[level % groupColors.length],\n            },\n            level,\n          };\n        }\n        const data = treeData.map((item, index) => {\n          const group = COLOR_GROUPS[index % COLOR_GROUPS.length];\n          return convert(item, group, 0);\n        });\n\n        setOption({\n          title: {\n            text: 'Bundle Tree Map',\n            left: 'center',\n          },\n          tooltip: {\n            position: 'top',\n            formatter: function (info: any) {\n              var treePathInfo = info.treePathInfo;\n              var treePath = [];\n              for (var i = 1; i < treePathInfo.length; i++) {\n                treePath.push(treePathInfo[i].name);\n              }\n              // Get extra info from node data\n              var node = info.data || {};\n              var path = node.path || treePath.join('/');\n              var sourceSize = node.sourceSize;\n              var bundledSize = node.bundledSize;\n              return [\n                '<div class=\"tooltip-title\">' +\n                  echarts.format.encodeHTML(path) +\n                  '</div>',\n                '<div><b>Source Size:</b> <b>' +\n                  (sourceSize !== undefined ? formatSize(sourceSize) : '-') +\n                  '</b></div>',\n                '<div><b>Bundled Size:</b> <b>' +\n                  (bundledSize !== undefined ? formatSize(bundledSize) : '-') +\n                  '</b></div>',\n              ].join('');\n            },\n          },\n          series: [\n            {\n              name: 'Bundle Tree Map',\n              id: 'bundle-treemap',\n              type: 'treemap',\n              visibleMin: 300,\n              left: 10,\n              right: 10,\n              top: 10,\n              bottom: 10,\n              label: {\n                show: true,\n                formatter: '{b}',\n                color: '#000',\n              },\n              upperLabel: {\n                show: true,\n                height: 30,\n              },\n\n              levels: getLevelOption(),\n              data: data,\n            },\n          ],\n        });\n      }, [treeData, valueKey]);\n\n      return option ? (\n        <div>\n          <ReactEChartsCore\n            ref={chartRef}\n            option={option}\n            echarts={echarts}\n            onEvents={onChartClick ? { click: onChartClick } : undefined}\n            style={{\n              width: '100%',\n              minHeight: '500px',\n              maxHeight: '1000px',\n              border: '5px solid white',\n              borderRadius: '10px',\n              ...style,\n            }}\n          />\n        </div>\n      ) : null;\n    },\n  );\n\nexport const TreeMap = React.forwardRef<any, TreeMapProps>((props, ref) => (\n  <TreeMapInner {...props} forwardedRef={ref} />\n));\n\nexport const AssetTreemapWithFilter: React.FC<{\n  treeData: TreeNode[];\n  onChartClick?: (params: any) => void;\n}> = ({ treeData, onChartClick }) => {\n  const assetNames = useMemo(\n    () => treeData.map((item) => item.name),\n    [treeData],\n  );\n  const [checkedAssets, setCheckedAssets] = useState<string[]>(assetNames);\n  const [collapsed, setCollapsed] = useState(false);\n  const [searchModalOpen, setSearchModalOpen] = useState(false);\n  const chartRef = React.useRef<any>(null);\n  const { t } = useI18n();\n\n  const filteredTreeData = useMemo(\n    () => treeData.filter((item) => checkedAssets.includes(item.name)),\n    [treeData, checkedAssets],\n  );\n\n  // Handler for search modal click\n  const handleModuleClick = (module: any) => {\n    if (!module?.path) return;\n    const nodeId = hashString(module.path);\n    if (chartRef.current) {\n      const echartsInstance = chartRef.current.getEchartsInstance();\n      echartsInstance.dispatchAction({\n        type: 'treemapZoomToNode',\n        seriesId: 'bundle-treemap',\n        targetNodeId: nodeId.toString(),\n      });\n    }\n    setSearchModalOpen(false);\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n      <Space direction=\"vertical\" style={{ width: '100%' }}>\n        <Card\n          title={\n            <Space>\n              <Typography.Text>{t('Output Assets List')}</Typography.Text>\n              <SearchModal\n                onModuleClick={handleModuleClick}\n                open={searchModalOpen}\n                setOpen={setSearchModalOpen}\n                isIcon={true}\n              />\n            </Space>\n          }\n          extra={\n            <span\n              style={{ cursor: 'pointer', marginLeft: 8 }}\n              onClick={() => setCollapsed((c) => !c)}\n              aria-label={collapsed ? t('Expand') : t('Collapse')}\n            >\n              {collapsed ? (\n                <VerticalAlignBottomOutlined />\n              ) : (\n                <VerticalAlignTopOutlined />\n              )}\n            </span>\n          }\n          size=\"small\"\n          bodyStyle={{\n            overflow: 'hidden',\n            height: collapsed ? 0 : undefined,\n            padding: collapsed ? 0 : undefined,\n            transition: 'height 0.3s cubic-bezier(.4,0,.2,1), padding 0.3s',\n          }}\n        >\n          <div\n            style={{\n              opacity: collapsed ? 0 : 1,\n              transition: 'opacity 0.3s',\n              gap: 8,\n            }}\n          >\n            <Checkbox\n              key=\"all-none-checkbox\"\n              indeterminate={\n                checkedAssets.length > 0 &&\n                checkedAssets.length < assetNames.length\n              }\n              checked={checkedAssets.length === assetNames.length}\n              onChange={(e) =>\n                setCheckedAssets(e.target.checked ? assetNames : [])\n              }\n              style={{ marginBottom: 4 }}\n            >\n              {'ALL / NONE'}\n            </Checkbox>\n            <Checkbox.Group\n              key=\"asset-checkbox-group\"\n              options={assetNames}\n              value={checkedAssets}\n              onChange={setCheckedAssets}\n              style={{ display: 'flex', gap: 8, fontWeight: 500 }}\n            />\n          </div>\n        </Card>\n        <div style={{ flex: 1 }}>\n          <TreeMap\n            ref={chartRef}\n            treeData={filteredTreeData}\n            onChartClick={onChartClick}\n          />\n        </div>\n      </Space>\n    </div>\n  );\n};\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

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

@@ -7,3 +7,13 @@ export declare enum ChartTypes {
     Loader = 4,
     Normal = 5
 }
+export declare const BUNDLE_ANALYZER_COLORS: {
+    readonly green: readonly [string, string, string, string, string, string, string];
+    readonly blue: readonly [string, string, string, string, string, string, string];
+    readonly purple: readonly [string, string, string, string, string, string, string];
+    readonly yellow: readonly [string, string, string, string, string, string, string];
+    readonly grey: readonly [string, string, string, string, string, string, string];
+};
+type ColorGroup = keyof typeof BUNDLE_ANALYZER_COLORS;
+export declare const COLOR_GROUPS: ColorGroup[];
+export {};

package/dist/components/Charts/constants.js

@@ -36,7 +36,69 @@ var ChartTypes = /* @__PURE__ */ ((ChartTypes2) => {
   ChartTypes2[ChartTypes2["Normal"] = 5] = "Normal";
   return ChartTypes2;
 })(ChartTypes || {});
+const BUNDLE_ANALYZER_COLORS = {
+  green: [
+    hexToRgba("#32b26a", 0.6),
+    hexToRgba("#5fcf92", 0.6),
+    hexToRgba("#8ee2b6", 0.8),
+    hexToRgba("#b7e1cd", 1),
+    hexToRgba("#cdeee0", 1),
+    hexToRgba("#e0f7ef", 1),
+    hexToRgba("#c8e6d6", 1)
+  ],
+  blue: [
+    hexToRgba("#3498f7", 0.6),
+    hexToRgba("#5eb3fa", 0.6),
+    hexToRgba("#8ccafc", 0.8),
+    hexToRgba("#b3d8f8", 1),
+    hexToRgba("#cde6fa", 1),
+    hexToRgba("#e0f2fd", 1),
+    hexToRgba("#c8e0ef", 1)
+  ],
+  purple: [
+    hexToRgba("#a04ddb", 0.6),
+    hexToRgba("#b26ef0", 0.6),
+    hexToRgba("#c49ff5", 0.8),
+    hexToRgba("#d1b3e6", 1),
+    hexToRgba("#e0c8f2", 1),
+    hexToRgba("#f0e6fa", 1),
+    hexToRgba("#d6c8e6", 1)
+  ],
+  yellow: [
+    hexToRgba("#ffe066", 0.6),
+    hexToRgba("#ffec80", 0.6),
+    hexToRgba("#fff599", 0.8),
+    hexToRgba("#fff9c4", 1),
+    hexToRgba("#fffbe0", 1),
+    hexToRgba("#fffde7", 1),
+    hexToRgba("#f5f2c8", 1)
+  ],
+  grey: [
+    hexToRgba("#7a7a7a", 0.7),
+    hexToRgba("#969696", 0.7),
+    hexToRgba("#b0b0b0", 0.8),
+    hexToRgba("#c8c8c8", 1),
+    hexToRgba("#dcdcdc", 1),
+    hexToRgba("#ededed", 1),
+    hexToRgba("#f7f7f7", 1)
+  ]
+};
+function hexToRgba(hex, alpha = 1) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+const COLOR_GROUPS = [
+  "blue",
+  "purple",
+  "yellow",
+  "grey",
+  "green"
+];
 export {
+  BUNDLE_ANALYZER_COLORS,
+  COLOR_GROUPS,
   ChartTypes,
   PALETTE_COLORS
 };

package/dist/components/Charts/constants.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAO,MAAM,iBAAiB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAK,aAAL,kBAAKA,gBAAL;AACL,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AANU,SAAAA;AAAA","names":["ChartTypes"],"ignoreList":[],"sources":["../../../src/components/Charts/constants.ts"],"sourcesContent":["export const PALETTE_COLORS = [\n  '#F2793D',\n  '#F28B24',\n  '#F2A200',\n  '#F5CC00',\n  '#F5E000',\n  '#A3D900',\n  '#66CC00',\n  '#0AC419',\n  '#0AC496',\n  '#0AC7D1',\n  '#00A8E0',\n  '#1471F5',\n  '#4060FF',\n  '#7559FF',\n  '#884DFF',\n  '#A526FF',\n  '#BA39E5',\n  '#C700D9',\n  '#D900B5',\n  '#E50099',\n  '#E52E6B',\n  '#F24957',\n  '#30B2F2',\n  '#00BF70',\n  '#5959FF',\n  '#9F40FF',\n  '#528BFF',\n];\n\nexport enum ChartTypes {\n  Bootstrap,\n  Compile,\n  Done,\n  Minify,\n  Loader,\n  Normal,\n}\n"]}
+{"version":3,"mappings":"AAAO,MAAM,iBAAiB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAK,aAAL,kBAAKA,gBAAL;AACL,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AANU,SAAAA;AAAA;AASL,MAAM,yBAAyB;AAAA,EACpC,OAAO;AAAA,IACL,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,EACxB;AAAA,EACA,MAAM;AAAA,IACJ,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,EACxB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,EACxB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,EACxB;AAAA,EACA,MAAM;AAAA,IACJ,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,GAAG;AAAA,IACxB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,IACtB,UAAU,WAAW,CAAC;AAAA,EACxB;AACF;AAEA,SAAS,UAAU,KAAa,QAAQ,GAAG;AACzC,QAAM,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;AACtC,QAAM,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;AACtC,QAAM,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;AACtC,SAAO,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK;AACxC;AAGO,MAAM,eAA6B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF","names":["ChartTypes"],"ignoreList":[],"sources":["../../../src/components/Charts/constants.ts"],"sourcesContent":["export const PALETTE_COLORS = [\n  '#F2793D',\n  '#F28B24',\n  '#F2A200',\n  '#F5CC00',\n  '#F5E000',\n  '#A3D900',\n  '#66CC00',\n  '#0AC419',\n  '#0AC496',\n  '#0AC7D1',\n  '#00A8E0',\n  '#1471F5',\n  '#4060FF',\n  '#7559FF',\n  '#884DFF',\n  '#A526FF',\n  '#BA39E5',\n  '#C700D9',\n  '#D900B5',\n  '#E50099',\n  '#E52E6B',\n  '#F24957',\n  '#30B2F2',\n  '#00BF70',\n  '#5959FF',\n  '#9F40FF',\n  '#528BFF',\n];\n\nexport enum ChartTypes {\n  Bootstrap,\n  Compile,\n  Done,\n  Minify,\n  Loader,\n  Normal,\n}\n\nexport const BUNDLE_ANALYZER_COLORS = {\n  green: [\n    hexToRgba('#32b26a', 0.6),\n    hexToRgba('#5fcf92', 0.6),\n    hexToRgba('#8ee2b6', 0.8),\n    hexToRgba('#b7e1cd', 1),\n    hexToRgba('#cdeee0', 1),\n    hexToRgba('#e0f7ef', 1),\n    hexToRgba('#c8e6d6', 1),\n  ],\n  blue: [\n    hexToRgba('#3498f7', 0.6),\n    hexToRgba('#5eb3fa', 0.6),\n    hexToRgba('#8ccafc', 0.8),\n    hexToRgba('#b3d8f8', 1),\n    hexToRgba('#cde6fa', 1),\n    hexToRgba('#e0f2fd', 1),\n    hexToRgba('#c8e0ef', 1),\n  ],\n  purple: [\n    hexToRgba('#a04ddb', 0.6),\n    hexToRgba('#b26ef0', 0.6),\n    hexToRgba('#c49ff5', 0.8),\n    hexToRgba('#d1b3e6', 1),\n    hexToRgba('#e0c8f2', 1),\n    hexToRgba('#f0e6fa', 1),\n    hexToRgba('#d6c8e6', 1),\n  ],\n  yellow: [\n    hexToRgba('#ffe066', 0.6),\n    hexToRgba('#ffec80', 0.6),\n    hexToRgba('#fff599', 0.8),\n    hexToRgba('#fff9c4', 1),\n    hexToRgba('#fffbe0', 1),\n    hexToRgba('#fffde7', 1),\n    hexToRgba('#f5f2c8', 1),\n  ],\n  grey: [\n    hexToRgba('#7a7a7a', 0.7),\n    hexToRgba('#969696', 0.7),\n    hexToRgba('#b0b0b0', 0.8),\n    hexToRgba('#c8c8c8', 1),\n    hexToRgba('#dcdcdc', 1),\n    hexToRgba('#ededed', 1),\n    hexToRgba('#f7f7f7', 1),\n  ],\n} as const;\n\nfunction hexToRgba(hex: string, alpha = 1) {\n  const r = parseInt(hex.slice(1, 3), 16);\n  const g = parseInt(hex.slice(3, 5), 16);\n  const b = parseInt(hex.slice(5, 7), 16);\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\ntype ColorGroup = keyof typeof BUNDLE_ANALYZER_COLORS;\nexport const COLOR_GROUPS: ColorGroup[] = [\n  'blue',\n  'purple',\n  'yellow',\n  'grey',\n  'green',\n];\n"]}

package/dist/components/Overall/help-center.js

@@ -76,7 +76,8 @@ const HelpCenter = () => {
           },
           onClick: () => window.open(link, "_blank"),
           children: t(title)
-        }
+        },
+        idx
       );
     }) })
   ] }) });

package/dist/components/Overall/help-center.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AA0DU,cACA,YADA;AA1DV,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,YAAY;AACrB,SAAS,eAAe;AAExB,OAAO,YAAY;AAEnB,MAAM,OAAO;AAAA,EACX;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,EAAE,IAAI,QAAQ;AAEtB,SACE,oBAAC,QAAK,OAAO,EAAE,OAAO,QAAQ,cAAc,OAAO,GACjD,+BAAC,SACC;AAAA,yBAAC,SAAI,WAAW,OAAO,OACrB;AAAA,0BAAC,UAAM,YAAE,aAAa,GAAE;AAAA,MACxB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,SAAS,EAAE;AAAA,UAC3D,MAAK;AAAA,UACL,SAAS,MAAM;AACb,mBAAO,KAAK,6BAA6B,QAAQ;AAAA,UACnD;AAAA,UAEA;AAAA,gCAAC,UAAK,OAAO,EAAE,aAAa,MAAM,GAAG,kBAAI;AAAA,YACzC,oBAAC,iBAAc,OAAO,EAAE,UAAU,OAAO,GAAG;AAAA;AAAA;AAAA,MAC9C;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,WAAW,OAAO,WACpB,eAAK,IAAI,CAAC,EAAE,OAAO,KAAK,GAAG,QAAQ;AAClC,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,UAClB,OAAO;AAAA,YACL,cAAc,MAAM,KAAK,SAAS,IAAI,SAAS;AAAA,UACjD;AAAA,UACA,SAAS,MAAM,OAAO,KAAK,MAAM,QAAQ;AAAA,UAExC,YAAE,KAAK;AAAA;AAAA,MACV;AAAA,IAEJ,CAAC,GACH;AAAA,KACF,GACF;AAEJ","names":[],"ignoreList":[],"sources":["../../../src/components/Overall/help-center.tsx"],"sourcesContent":["import { Button } from 'antd';\nimport { RightOutlined } from '@ant-design/icons';\n\nimport { Card } from '../Card';\nimport { useI18n } from '../../utils';\n\nimport styles from './help-center.module';\n\nconst data = [\n  {\n    title: 'FAQ',\n    link: 'https://rsdoctor.rs/guide/more/faq',\n  },\n  {\n    title: 'Introduction',\n    link: 'https://rsdoctor.rs/guide/start/intro',\n  },\n  {\n    title: 'Bundle Alerts',\n    link: 'https://rsdoctor.rs/guide/usage/bundle-alerts',\n  },\n  {\n    title: 'Bundle Overall',\n    link: 'https://rsdoctor.rs/guide/usage/bundle-overall',\n  },\n  {\n    title: 'Bundle Analysis',\n    link: 'https://rsdoctor.rs/guide/usage/bundle-size',\n  },\n  {\n    title: 'Compilation Alerts',\n    link: 'https://rsdoctor.rs/guide/usage/compile-alerts',\n  },\n  {\n    title: 'Compile Overall',\n    link: 'https://rsdoctor.rs/guide/usage/compile-overall',\n  },\n  {\n    title: 'Loaders Analysis',\n    link: 'https://rsdoctor.rs/guide/usage/loaders-analysis',\n  },\n  {\n    title: 'Loaders Timeline',\n    link: 'https://rsdoctor.rs/guide/usage/loaders-timeline',\n  },\n  {\n    title: 'Plugin Analysis',\n    link: 'https://rsdoctor.rs/guide/usage/plugins-analysis',\n  },\n];\n\nexport const HelpCenter = () => {\n  const { t } = useI18n();\n\n  return (\n    <Card style={{ width: '100%', borderRadius: '12px' }}>\n      <div>\n        <div className={styles.title}>\n          <span>{t('Help Center')}</span>\n          <Button\n            style={{ display: 'flex', alignItems: 'center', padding: 0 }}\n            type=\"link\"\n            onClick={() => {\n              window.open('https://rsdoctor.rs/index', '_blank');\n            }}\n          >\n            <span style={{ marginRight: '3px' }}>More</span>\n            <RightOutlined style={{ fontSize: '10px' }} />\n          </Button>\n        </div>\n        <div className={styles.container}>\n          {data.map(({ title, link }, idx) => {\n            return (\n              <div\n                className={styles.content}\n                style={{\n                  marginBottom: idx < data.length - 2 ? '16px' : 0,\n                }}\n                onClick={() => window.open(link, '_blank')}\n              >\n                {t(title)}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </Card>\n  );\n};\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
+{"version":3,"mappings":"AA0DU,cACA,YADA;AA1DV,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,YAAY;AACrB,SAAS,eAAe;AAExB,OAAO,YAAY;AAEnB,MAAM,OAAO;AAAA,EACX;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,EAAE,IAAI,QAAQ;AAEtB,SACE,oBAAC,QAAK,OAAO,EAAE,OAAO,QAAQ,cAAc,OAAO,GACjD,+BAAC,SACC;AAAA,yBAAC,SAAI,WAAW,OAAO,OACrB;AAAA,0BAAC,UAAM,YAAE,aAAa,GAAE;AAAA,MACxB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,SAAS,EAAE;AAAA,UAC3D,MAAK;AAAA,UACL,SAAS,MAAM;AACb,mBAAO,KAAK,6BAA6B,QAAQ;AAAA,UACnD;AAAA,UAEA;AAAA,gCAAC,UAAK,OAAO,EAAE,aAAa,MAAM,GAAG,kBAAI;AAAA,YACzC,oBAAC,iBAAc,OAAO,EAAE,UAAU,OAAO,GAAG;AAAA;AAAA;AAAA,MAC9C;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,WAAW,OAAO,WACpB,eAAK,IAAI,CAAC,EAAE,OAAO,KAAK,GAAG,QAAQ;AAClC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW,OAAO;AAAA,UAClB,OAAO;AAAA,YACL,cAAc,MAAM,KAAK,SAAS,IAAI,SAAS;AAAA,UACjD;AAAA,UACA,SAAS,MAAM,OAAO,KAAK,MAAM,QAAQ;AAAA,UAExC,YAAE,KAAK;AAAA;AAAA,QAPH;AAAA,MAQP;AAAA,IAEJ,CAAC,GACH;AAAA,KACF,GACF;AAEJ","names":[],"ignoreList":[],"sources":["../../../src/components/Overall/help-center.tsx"],"sourcesContent":["import { Button } from 'antd';\nimport { RightOutlined } from '@ant-design/icons';\n\nimport { Card } from '../Card';\nimport { useI18n } from '../../utils';\n\nimport styles from './help-center.module';\n\nconst data = [\n  {\n    title: 'FAQ',\n    link: 'https://rsdoctor.rs/guide/more/faq',\n  },\n  {\n    title: 'Introduction',\n    link: 'https://rsdoctor.rs/guide/start/intro',\n  },\n  {\n    title: 'Bundle Alerts',\n    link: 'https://rsdoctor.rs/guide/usage/bundle-alerts',\n  },\n  {\n    title: 'Bundle Overall',\n    link: 'https://rsdoctor.rs/guide/usage/bundle-overall',\n  },\n  {\n    title: 'Bundle Analysis',\n    link: 'https://rsdoctor.rs/guide/usage/bundle-size',\n  },\n  {\n    title: 'Compilation Alerts',\n    link: 'https://rsdoctor.rs/guide/usage/compile-alerts',\n  },\n  {\n    title: 'Compile Overall',\n    link: 'https://rsdoctor.rs/guide/usage/compile-overall',\n  },\n  {\n    title: 'Loaders Analysis',\n    link: 'https://rsdoctor.rs/guide/usage/loaders-analysis',\n  },\n  {\n    title: 'Loaders Timeline',\n    link: 'https://rsdoctor.rs/guide/usage/loaders-timeline',\n  },\n  {\n    title: 'Plugin Analysis',\n    link: 'https://rsdoctor.rs/guide/usage/plugins-analysis',\n  },\n];\n\nexport const HelpCenter = () => {\n  const { t } = useI18n();\n\n  return (\n    <Card style={{ width: '100%', borderRadius: '12px' }}>\n      <div>\n        <div className={styles.title}>\n          <span>{t('Help Center')}</span>\n          <Button\n            style={{ display: 'flex', alignItems: 'center', padding: 0 }}\n            type=\"link\"\n            onClick={() => {\n              window.open('https://rsdoctor.rs/index', '_blank');\n            }}\n          >\n            <span style={{ marginRight: '3px' }}>More</span>\n            <RightOutlined style={{ fontSize: '10px' }} />\n          </Button>\n        </div>\n        <div className={styles.container}>\n          {data.map(({ title, link }, idx) => {\n            return (\n              <div\n                key={idx}\n                className={styles.content}\n                style={{\n                  marginBottom: idx < data.length - 2 ? '16px' : 0,\n                }}\n                onClick={() => window.open(link, '_blank')}\n              >\n                {t(title)}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </Card>\n  );\n};\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}