@rsdoctor/components 1.1.3 → 1.1.5

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,284 @@
+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()
+      });
+      echartsInstance.dispatchAction({
+        type: "highlight",
+        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"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Checkbox.Group,
+                {
+                  options: assetNames,
+                  value: checkedAssets,
+                  onChange: setCheckedAssets,
+                  style: { display: "flex", gap: 8, fontWeight: 500 }
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__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      echartsInstance.dispatchAction({\n        type: 'highlight',\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              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              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/pages/BundleSize/components/asset.js

@@ -2,7 +2,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   CodepenCircleOutlined,
   ColumnHeightOutlined,
-  DeploymentUnitOutlined,
   InfoCircleOutlined
 } from "@ant-design/icons";
 import { SDK } from "@rsdoctor/types";
@@ -281,6 +280,63 @@ const ModulesStatistics = ({ modules, chunks, filteredModules }) => {
     )
   ] });
 };
+const ConcatenatedTag = ({ moduleCount }) => {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+        "This is a concatenated container module that includes ",
+        moduleCount,
+        " ",
+        "modules"
+      ] }) }),
+      children: /* @__PURE__ */ jsx(Tag, { color: "blue", style: tagStyle, children: "concatenated container" })
+    }
+  );
+};
+const TotalBundledSizeTag = ({ size }) => {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit" }, children: "The total output size of all the files in this folder. If you enabled minification, this value shows the minified size." }) }),
+      children: /* @__PURE__ */ jsx(Tag, { style: tagStyle, color: "geekblue", children: `bundled size: ${formatSize(size)}` })
+    }
+  );
+};
+const BundledSizeTag = ({ size }) => {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit" }, children: "The final output size of this file. If you enabled minification, this value shows the minified size." }) }),
+      children: /* @__PURE__ */ jsx(Tag, { color: "geekblue", children: `bundled size: ${formatSize(size)}` })
+    }
+  );
+};
+const TotalSourceSizeTag = ({ size }) => {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit" }, children: "The total original size of all the files in this folder, before any transformations and minification." }) }),
+      children: /* @__PURE__ */ jsx(
+        Tag,
+        {
+          style: tagStyle,
+          color: "cyan",
+          children: `source size: ${formatSize(size)}`
+        }
+      )
+    }
+  );
+};
+const SourceSizeTag = ({ size }) => {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit" }, children: "The original size of this file, before any transformations and minification." }) }),
+      children: /* @__PURE__ */ jsx(Tag, { color: "cyan", children: `source size: ${formatSize(size)}` })
+    }
+  );
+};
 const AssetDetail = ({
   asset,
   chunks: includeChunks,
@@ -318,42 +374,48 @@ const AssetDetail = ({
           (e) => e !== mod && e.modules && e.modules.indexOf(mod.id) > -1
         );
         return /* @__PURE__ */ jsxs("div", { className: styles["bundle-tree"], children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.box, children: [
-            /* @__PURE__ */ jsx("div", { className: styles.keywords, children: /* @__PURE__ */ jsx(Keyword, { ellipsis: true, text: basename, keyword: "" }) }),
-            /* @__PURE__ */ jsx("div", { className: styles.dividerDiv, children: /* @__PURE__ */ jsx(Divider, { className: styles.divider, dashed: true }) })
-          ] }),
+          /* @__PURE__ */ jsx(
+            Popover,
+            {
+              content: `Open the ${basename}’s module reasons tree.`,
+              placement: "bottom",
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles.box,
+                  onClick: () => {
+                    setModuleJumpList([mod.id]);
+                    setShow(true);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: styles.keywords, children: /* @__PURE__ */ jsx(Keyword, { ellipsis: true, text: basename, keyword: "" }) }),
+                    /* @__PURE__ */ jsx("div", { className: styles.dividerDiv, children: /* @__PURE__ */ jsx(Divider, { className: styles.divider, dashed: true }) })
+                  ]
+                }
+              )
+            }
+          ),
           /* @__PURE__ */ jsxs(Space, { children: [
             parsedSize !== 0 ? /* @__PURE__ */ jsx(
               Tooltip,
               {
                 title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
-                  /* @__PURE__ */ jsx(Tag, { color: "orange", children: `Bundled Size: ${formatSize(parsedSize)}` }),
-                  /* @__PURE__ */ jsx(Tag, { color: "volcano", children: `Source Size: ${formatSize(sourceSize)}` })
+                  /* @__PURE__ */ jsx(BundledSizeTag, { size: parsedSize }),
+                  /* @__PURE__ */ jsx(SourceSizeTag, { size: sourceSize })
                 ] }),
                 color: "white",
-                children: /* @__PURE__ */ jsx(Tag, { color: "purple", style: tagStyle, children: `Bundled Size: ${formatSize(parsedSize)}` })
+                children: /* @__PURE__ */ jsx(BundledSizeTag, { size: parsedSize })
               }
             ) : sourceSize !== 0 ? (
               // fallback to display tag for source size
-              /* @__PURE__ */ jsx(Tag, { color: "geekblue", children: `Source Size: ${formatSize(sourceSize)}` })
-            ) : null,
-            isConcatenation ? /* @__PURE__ */ jsx(
-              Tooltip,
-              {
-                title: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
-                  "this is a concatenated module, it contains",
-                  " ",
-                  mod.modules?.length,
-                  " modules"
-                ] }) }),
-                children: /* @__PURE__ */ jsx(Tag, { color: "green", style: tagStyle, children: "concatenated" })
-              }
+              /* @__PURE__ */ jsx(SourceSizeTag, { size: sourceSize })
             ) : null,
+            isConcatenation ? /* @__PURE__ */ jsx(ConcatenatedTag, { moduleCount: mod.modules?.length || 0 }) : null,
             containedOtherModules && containedOtherModules.length ? /* @__PURE__ */ jsx(
               Tooltip,
               {
                 title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
-                  /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit" }, children: "this is a concatenated module, it is be contained in these modules below:" }),
+                  /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit" }, children: "This module is concatenated into another container module:" }),
                   containedOtherModules.map(({ id, path }) => {
                     if (isJsDataUrl(path)) {
                       return /* @__PURE__ */ jsx(
@@ -393,15 +455,6 @@ const AssetDetail = ({
                 children: /* @__PURE__ */ jsx(Tag, { color: "green", children: "concatenated" })
               }
             ) : null,
-            /* @__PURE__ */ jsx(Popover, { content: "Open the Module Graph Box", children: /* @__PURE__ */ jsx(
-              DeploymentUnitOutlined,
-              {
-                onClick: () => {
-                  setModuleJumpList([mod.id]);
-                  setShow(true);
-                }
-              }
-            ) }),
             /* @__PURE__ */ jsx(ModuleCodeViewer, { data: mod })
           ] })
         ] });
@@ -421,9 +474,9 @@ const AssetDetail = ({
               /* @__PURE__ */ jsx("div", { className: styles.dividerDiv, children: /* @__PURE__ */ jsx(Divider, { className: styles.divider, dashed: true }) })
             ] }),
             /* @__PURE__ */ jsx(Space, { children: parsedSize > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Tag, { style: tagStyle, color: "orange", children: `Bundled: ${formatSize(parsedSize)}` }),
-              /* @__PURE__ */ jsx(Tag, { style: tagStyle, color: "lime", children: `Source: ${formatSize(sourceSize)}` })
-            ] }) : /* @__PURE__ */ jsx(Tag, { style: tagStyle, color: "lime", children: `Source: ${formatSize(sourceSize)}` }) })
+              /* @__PURE__ */ jsx(TotalBundledSizeTag, { size: parsedSize }),
+              /* @__PURE__ */ jsx(TotalSourceSizeTag, { size: sourceSize })
+            ] }) : /* @__PURE__ */ jsx(TotalSourceSizeTag, { size: sourceSize }) })
           ] });
         }
         return defaultTitle;