@rsdoctor/components 1.5.18 → 1.6.1

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import core from "echarts-for-react/esm/core";
 import * as __rspack_external_echarts_core_d2845954 from "echarts/core";
 import { CustomChart } from "echarts/charts";
@@ -7,92 +7,95 @@ import { DataZoomComponent, GridComponent, TooltipComponent } from "echarts/comp
 import { CanvasRenderer } from "echarts/renderers";
 import dayjs from "dayjs";
 import { groupBy } from "es-toolkit/compat";
-import { ChartTypes, PALETTE_COLORS } from "../constants.mjs";
-const LINE_HEIGHT = 60;
+import { ChartTypes, TIMELINE_PALETTE_COLORS } from "../constants.mjs";
+import { useThemeToken } from "../../../utils/index.mjs";
+const LINE_HEIGHT = 46;
+__rspack_external_echarts_core_d2845954.use([
+    CustomChart,
+    TooltipComponent,
+    GridComponent,
+    DataZoomComponent,
+    CanvasRenderer
+]);
 const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn, chartType = ChartTypes.Normal, exts = null })=>{
-    const data = [];
-    let categories = [];
     const [optionsData, setOptionsData] = useState({});
-    __rspack_external_echarts_core_d2845954.use([
-        CustomChart,
-        TooltipComponent,
-        GridComponent,
-        DataZoomComponent,
-        CanvasRenderer
-    ]);
-    useEffect(()=>{
-        if (!loaderData) return;
-        const _categories = [];
-        loaderData.forEach((_l)=>{
-            _categories.unshift(_l.n + ' total');
-            _categories.unshift(_l.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
-                ],
-                itemStyle: {
-                    normal: {
-                        color: PALETTE_COLORS[Math.floor(27 * Math.random())],
-                        opacity: 0.25
-                    }
-                }
+    const themeToken = useThemeToken();
+    const { data, categories } = useMemo(()=>{
+        const chartData = [];
+        const categoryLabels = [];
+        if (loaderData) {
+            loaderData.forEach((loader)=>{
+                categoryLabels.unshift(loader.n + ' total');
+                categoryLabels.unshift(loader.n);
             });
-            if (!_loaderData?.c) return;
-            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
-                ],
-                itemStyle: {
-                    normal: {
-                        color: PALETTE_COLORS[Math.floor(27 * Math.random())],
-                        opacity: 0.25
-                    }
-                },
-                ext: _loaderData.c[l].ext
-            });
-        });
-        categories = _categories.map((val, i)=>{
-            if (i % 2 !== 0) return val.replace(' total', '');
-            return '';
-        });
-    }, [
-        loaderData
-    ]);
-    useEffect(()=>{
-        if (!pluginsData) return;
-        const _pluginsData = groupBy(pluginsData, (e)=>e.pid);
-        Object.keys(_pluginsData).reverse().forEach(function(key, i) {
-            _pluginsData[key].forEach((_plugin, _i)=>{
-                data.push({
-                    name: String(_plugin.pid),
+            loaderData.forEach((loader, loaderIndex)=>{
+                const totalColor = TIMELINE_PALETTE_COLORS[loaderIndex % TIMELINE_PALETTE_COLORS.length];
+                chartData.push({
+                    name: loader.n + ' total',
                     value: [
-                        i,
-                        _plugin.args.s,
-                        _plugin.args.e,
-                        _plugin.args.e - _plugin.args.s
+                        categoryLabels.indexOf(loader.n + ' total'),
+                        loader.s,
+                        loader.e,
+                        loader.e - loader.s
                     ],
                     itemStyle: {
                         normal: {
-                            color: PALETTE_COLORS[Math.floor(27 * Math.random())],
-                            opacity: 0.25
+                            color: totalColor,
+                            opacity: 0.34
                         }
-                    },
-                    ext: _plugin
+                    }
+                });
+                loader.c?.forEach((child, childIndex)=>{
+                    chartData.push({
+                        name: loader.n,
+                        value: [
+                            categoryLabels.indexOf(loader.n),
+                            child.s,
+                            child.e,
+                            child.e - child.s
+                        ],
+                        itemStyle: {
+                            normal: {
+                                color: TIMELINE_PALETTE_COLORS[(loaderIndex + childIndex) % TIMELINE_PALETTE_COLORS.length],
+                                opacity: 0.78
+                            }
+                        },
+                        ext: child.ext
+                    });
+                });
+            });
+            for(let index = 0; index < categoryLabels.length; index++)categoryLabels[index] = index % 2 !== 0 ? categoryLabels[index].replace(' total', '') : '';
+        }
+        if (pluginsData) {
+            const groupedPlugins = groupBy(pluginsData, (event)=>event.pid);
+            Object.keys(groupedPlugins).reverse().forEach((key, groupIndex)=>{
+                groupedPlugins[key].forEach((plugin, pluginIndex)=>{
+                    chartData.push({
+                        name: String(plugin.pid),
+                        value: [
+                            groupIndex,
+                            plugin.args.s,
+                            plugin.args.e,
+                            plugin.args.e - plugin.args.s
+                        ],
+                        itemStyle: {
+                            normal: {
+                                color: TIMELINE_PALETTE_COLORS[(groupIndex + pluginIndex) % TIMELINE_PALETTE_COLORS.length],
+                                opacity: 0.78
+                            }
+                        },
+                        ext: plugin
+                    });
                 });
+                categoryLabels.push(String(key.charAt(0).toUpperCase() + key.slice(1)));
             });
-            categories.push(String(key.charAt(0).toUpperCase() + key.slice(1)));
-        });
+        }
+        return {
+            data: chartData,
+            categories: categoryLabels
+        };
     }, [
+        loaderData,
         pluginsData
     ]);
     useEffect(()=>{
@@ -106,7 +109,7 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                 api.value(2),
                 categoryIndex
             ]);
-            const height = 0.3 * api.size([
+            const height = 0.36 * api.size([
                 0,
                 1
             ])[1];
@@ -145,7 +148,15 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                     type: 'slider',
                     filterMode: 'weakFilter',
                     showDataShadow: false,
-                    top: -10
+                    top: -8,
+                    height: 14,
+                    borderColor: themeToken.colorBorderSecondary,
+                    backgroundColor: themeToken.colorFillQuaternary,
+                    fillerColor: themeToken.colorPrimaryBg,
+                    handleStyle: {
+                        color: themeToken.colorTextSecondary,
+                        borderColor: themeToken.colorBorder
+                    }
                 },
                 {
                     type: 'inside',
@@ -153,10 +164,10 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                 }
             ],
             grid: {
-                top: 10,
-                left: 0,
-                bottom: 10,
-                right: 0,
+                top: 18,
+                left: 12,
+                bottom: 12,
+                right: 16,
                 height: categories.length > (chartType === ChartTypes.Loader ? 6 : 3) ? 'auto' : categories.length * LINE_HEIGHT,
                 containLabel: true
             },
@@ -164,13 +175,20 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                 interval: exts?.endTimestamp && exts?.startTimestamp ? Math.floor((exts.endTimestamp - exts.startTimestamp) / 8) : null,
                 position: 'top',
                 splitLine: {
-                    show: true
+                    show: true,
+                    lineStyle: {
+                        color: themeToken.colorBorderSecondary,
+                        width: 1
+                    }
                 },
                 scale: true,
                 axisLine: {
                     show: false
                 },
                 axisLabel: {
+                    color: themeToken.colorTextSecondary,
+                    fontSize: 11,
+                    margin: 10,
                     formatter (val) {
                         return dayjs(val).format('HH:mm:ss:SSS');
                     }
@@ -182,12 +200,14 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                     show: false
                 },
                 axisLabel: {
-                    inside: true,
+                    inside: false,
                     lineHeight: 20,
-                    width: 100,
+                    width: chartType === ChartTypes.Loader ? 220 : 140,
+                    overflow: 'truncate',
+                    margin: 16,
                     fontSize: 12,
-                    color: '#000',
-                    verticalAlign: 'bottom'
+                    color: themeToken.colorTextSecondary,
+                    verticalAlign: 'middle'
                 },
                 axisLine: {
                     show: false
@@ -202,7 +222,7 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                     type: 'custom',
                     renderItem,
                     itemStyle: {
-                        opacity: 0.8
+                        opacity: 1
                     },
                     encode: {
                         x: [
@@ -217,18 +237,22 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
         };
         setOptionsData(option);
     }, [
-        loaderData,
-        pluginsData,
-        exts
+        categories,
+        chartType,
+        data,
+        exts,
+        formatterFn,
+        themeToken
     ]);
+    const categoryCount = loaderData ? 2 * loaderData.length : new Set(pluginsData?.map((item)=>item.pid)).size;
+    const chartHeight = chartType === ChartTypes.Minify ? 100 : chartType === ChartTypes.Loader ? Math.min(Math.max(categoryCount * LINE_HEIGHT + 80, 300), 1000) : Math.min(Math.max(categoryCount * LINE_HEIGHT + 70, 200), 1000);
     return /*#__PURE__*/ jsx(core, {
         option: optionsData,
         echarts: __rspack_external_echarts_core_d2845954,
         style: {
             width: '100%',
-            minHeight: chartType === ChartTypes.Loader ? '500px' : chartType === ChartTypes.Minify ? '100px' : '200px',
-            maxHeight: chartType === ChartTypes.Minify ? '100px' : '1000px',
-            border: '1px solid #eee',
+            height: `${chartHeight}px`,
+            border: '1px solid var(--color-border)',
             borderRadius: '10px'
         }
     });

package/dist/components/Charts/TimelineCharts/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Charts/TimelineCharts/index.mjs","sources":["../../../../src/components/Charts/TimelineCharts/index.tsx"],"sourcesContent":["import React, { useState, useEffect, memo } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/esm/core';\nimport * as echarts from 'echarts/core';\nimport { CustomChart } from 'echarts/charts';\nimport {\n  TooltipComponent,\n  GridComponent,\n  DataZoomComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\n\nimport dayjs from 'dayjs';\nimport { ChartProps, DurationMetric, ITraceEventData } from '../types';\nimport { groupBy } from 'es-toolkit/compat';\nimport { ChartTypes, PALETTE_COLORS } from '../constants';\n\ninterface CoordSysType {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\ntype LoaderType = {\n  name: string;\n  value: number[];\n  itemStyle: { normal: { color: string; opacity?: number } };\n  ext?: Record<string, any>;\n};\n\nconst LINE_HEIGHT = 60;\n\nexport const TimelineCom: React.FC<{\n  loaderData?: DurationMetric[];\n  pluginsData?: ITraceEventData[];\n  formatterFn: Function;\n  chartType?: ChartTypes;\n  exts?: { endTimestamp: number; startTimestamp: number };\n}> = memo(\n  ({\n    loaderData,\n    pluginsData,\n    formatterFn,\n    chartType = ChartTypes.Normal,\n    exts = null,\n  }) => {\n    const data: LoaderType[] = [];\n    let categories: string[] = [];\n    const [optionsData, setOptionsData] = useState({});\n\n    // Register the required components\n    echarts.use([\n      CustomChart,\n      TooltipComponent,\n      GridComponent,\n      DataZoomComponent,\n      CanvasRenderer,\n    ]);\n\n    useEffect(() => {\n      if (!loaderData) return;\n      const _categories: string[] = [];\n      loaderData.forEach((_l) => {\n        _categories.unshift(_l.n + ' total');\n        _categories.unshift(_l.n);\n      });\n\n      // Generate mock data\n      loaderData.forEach(function (_loaderData, _i) {\n        data.push({\n          name: _loaderData.n + ' total',\n          value: [\n            _categories.indexOf(_loaderData.n + ' total'),\n            _loaderData.s,\n            _loaderData.e,\n            _loaderData.e - _loaderData.s,\n          ],\n          itemStyle: {\n            normal: {\n              color: PALETTE_COLORS[Math.floor(Math.random() * 27)],\n              opacity: 0.25,\n            },\n          },\n        });\n\n        if (!_loaderData?.c) return;\n        for (let l = 0; l < _loaderData?.c?.length; l++) {\n          data.push({\n            name: _loaderData.n,\n            value: [\n              _categories.indexOf(_loaderData.n),\n              _loaderData.c[l].s,\n              _loaderData.c[l].e,\n              _loaderData.c[l].e - _loaderData.c[l].s,\n            ],\n            itemStyle: {\n              normal: {\n                color: PALETTE_COLORS[Math.floor(Math.random() * 27)],\n                opacity: 0.25,\n              },\n            },\n            ext: _loaderData.c[l].ext as ChartProps['loaders'][0],\n          });\n        }\n      });\n\n      categories = _categories.map((val, i) => {\n        if (i % 2 !== 0) {\n          return val.replace(' total', '');\n        } else {\n          return '';\n        }\n      });\n    }, [loaderData]);\n\n    useEffect(() => {\n      if (!pluginsData) return;\n\n      const _pluginsData = groupBy(pluginsData, (e: ITraceEventData) => e.pid);\n\n      Object.keys(_pluginsData)\n        .reverse()\n        .forEach(function (key, i) {\n          _pluginsData[key].forEach((_plugin, _i) => {\n            data.push({\n              name: String(_plugin.pid),\n              value: [\n                i,\n                _plugin.args.s,\n                _plugin.args.e,\n                _plugin.args.e - _plugin.args.s,\n              ],\n              itemStyle: {\n                normal: {\n                  color: PALETTE_COLORS[Math.floor(Math.random() * 27)],\n                  opacity: 0.25,\n                },\n              },\n              ext: _plugin,\n            });\n          });\n          categories.push(String(key.charAt(0).toUpperCase() + key.slice(1)));\n        });\n    }, [pluginsData]);\n\n    useEffect(() => {\n      function renderItem(\n        params: { coordSys: CoordSysType },\n        api: {\n          value: (arg0: number) => number;\n          coord: (arg0: number[]) => any;\n          size: (arg0: number[]) => number[];\n          style: () => string;\n        },\n      ) {\n        const categoryIndex = api.value(0);\n        const start = api.coord([api.value(1), categoryIndex]);\n        const end = api.coord([api.value(2), categoryIndex]);\n        const height = api.size([0, 1])[1] * 0.3;\n\n        const rectShape = echarts.graphic.clipRectByRect(\n          {\n            x: start[0],\n            y:\n              chartType === ChartTypes.Loader\n                ? start[1] - (categoryIndex % 2 !== 0 ? 0 : height * 2)\n                : start[1],\n            width: end[0] - start[0] || 5,\n            height: height,\n          },\n          {\n            x: params.coordSys.x,\n            y: params.coordSys.y,\n            width: params.coordSys.width,\n            height: params.coordSys.height,\n          },\n        );\n        return (\n          rectShape && {\n            type: 'rect',\n            transition: ['shape'],\n            shape: rectShape,\n            style: api.style(),\n            enterFrom: {\n              style: { opacity: 0 },\n              x: 0,\n            },\n          }\n        );\n      }\n\n      const option = {\n        tooltip: {\n          formatter: (raw: any) => {\n            return formatterFn(raw);\n          },\n        },\n        dataZoom: [\n          {\n            type: 'slider',\n            filterMode: 'weakFilter',\n            showDataShadow: false,\n            top: -10,\n          },\n          {\n            type: 'inside',\n            filterMode: 'weakFilter',\n          },\n        ],\n        grid: {\n          top: 10,\n          left: 0,\n          bottom: 10,\n          right: 0,\n          height:\n            categories.length > (chartType === ChartTypes.Loader ? 6 : 3)\n              ? 'auto'\n              : categories.length * LINE_HEIGHT,\n          containLabel: true,\n        },\n        xAxis: {\n          interval:\n            exts?.endTimestamp && exts?.startTimestamp\n              ? Math.floor((exts.endTimestamp - exts.startTimestamp) / 8)\n              : null,\n          position: 'top',\n          splitLine: {\n            show: true,\n          },\n          scale: true,\n          axisLine: {\n            show: false,\n          },\n          axisLabel: {\n            formatter(val: number) {\n              return dayjs(val as number).format('HH:mm:ss:SSS');\n            },\n          },\n        },\n        yAxis: {\n          type: 'category',\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            inside: true,\n            lineHeight: 20,\n            width: 100,\n            fontSize: 12,\n            color: '#000',\n            verticalAlign: 'bottom',\n          },\n          axisLine: {\n            show: false,\n          },\n          axisTick: {\n            show: false,\n          },\n          data: categories,\n        },\n        series: [\n          {\n            type: 'custom',\n            renderItem,\n            itemStyle: {\n              opacity: 0.8,\n            },\n            encode: {\n              x: [1, 2],\n              y: 0,\n            },\n            data,\n          },\n        ],\n      };\n      setOptionsData(option);\n    }, [loaderData, pluginsData, exts]);\n\n    return (\n      <ReactEChartsCore\n        option={optionsData}\n        echarts={echarts}\n        style={{\n          width: '100%',\n          minHeight:\n            chartType === ChartTypes.Loader\n              ? '500px'\n              : chartType === ChartTypes.Minify\n                ? '100px'\n                : '200px',\n          maxHeight: chartType === ChartTypes.Minify ? '100px' : '1000px',\n          border: '1px solid #eee',\n          borderRadius: '10px',\n        }}\n      />\n    );\n  },\n);\n"],"names":["LINE_HEIGHT","TimelineCom","memo","loaderData","pluginsData","formatterFn","chartType","ChartTypes","exts","data","categories","optionsData","setOptionsData","useState","echarts","CustomChart","TooltipComponent","GridComponent","DataZoomComponent","CanvasRenderer","useEffect","_categories","_l","_loaderData","_i","PALETTE_COLORS","Math","l","val","i","_pluginsData","groupBy","e","Object","key","_plugin","String","renderItem","params","api","categoryIndex","start","end","height","rectShape","option","raw","dayjs","ReactEChartsCore"],"mappings":"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"}
+{"version":3,"file":"components/Charts/TimelineCharts/index.mjs","sources":["../../../../src/components/Charts/TimelineCharts/index.tsx"],"sourcesContent":["import React, { useState, useEffect, memo, useMemo } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/esm/core';\nimport * as echarts from 'echarts/core';\nimport { CustomChart } from 'echarts/charts';\nimport {\n  TooltipComponent,\n  GridComponent,\n  DataZoomComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\n\nimport dayjs from 'dayjs';\nimport { ChartProps, DurationMetric, ITraceEventData } from '../types';\nimport { groupBy } from 'es-toolkit/compat';\nimport { ChartTypes, TIMELINE_PALETTE_COLORS } from '../constants';\nimport { useThemeToken } from 'src/utils';\n\ninterface CoordSysType {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\ntype LoaderType = {\n  name: string;\n  value: number[];\n  itemStyle: { normal: { color: string; opacity?: number } };\n  ext?: Record<string, any>;\n};\n\nconst LINE_HEIGHT = 46;\n\necharts.use([\n  CustomChart,\n  TooltipComponent,\n  GridComponent,\n  DataZoomComponent,\n  CanvasRenderer,\n]);\n\nexport const TimelineCom: React.FC<{\n  loaderData?: DurationMetric[];\n  pluginsData?: ITraceEventData[];\n  // rslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n  formatterFn: Function;\n  chartType?: ChartTypes;\n  exts?: { endTimestamp: number; startTimestamp: number };\n}> = memo(\n  ({\n    loaderData,\n    pluginsData,\n    formatterFn,\n    chartType = ChartTypes.Normal,\n    exts = null,\n  }) => {\n    const [optionsData, setOptionsData] = useState({});\n    const themeToken = useThemeToken();\n\n    const { data, categories } = useMemo(() => {\n      const chartData: LoaderType[] = [];\n      const categoryLabels: string[] = [];\n\n      if (loaderData) {\n        loaderData.forEach((loader) => {\n          categoryLabels.unshift(loader.n + ' total');\n          categoryLabels.unshift(loader.n);\n        });\n\n        loaderData.forEach((loader, loaderIndex) => {\n          const totalColor =\n            TIMELINE_PALETTE_COLORS[\n              loaderIndex % TIMELINE_PALETTE_COLORS.length\n            ];\n          chartData.push({\n            name: loader.n + ' total',\n            value: [\n              categoryLabels.indexOf(loader.n + ' total'),\n              loader.s,\n              loader.e,\n              loader.e - loader.s,\n            ],\n            itemStyle: {\n              normal: {\n                color: totalColor,\n                opacity: 0.34,\n              },\n            },\n          });\n\n          loader.c?.forEach((child, childIndex) => {\n            chartData.push({\n              name: loader.n,\n              value: [\n                categoryLabels.indexOf(loader.n),\n                child.s,\n                child.e,\n                child.e - child.s,\n              ],\n              itemStyle: {\n                normal: {\n                  color:\n                    TIMELINE_PALETTE_COLORS[\n                      (loaderIndex + childIndex) %\n                        TIMELINE_PALETTE_COLORS.length\n                    ],\n                  opacity: 0.78,\n                },\n              },\n              ext: child.ext as ChartProps['loaders'][0],\n            });\n          });\n        });\n\n        for (let index = 0; index < categoryLabels.length; index++) {\n          categoryLabels[index] =\n            index % 2 !== 0 ? categoryLabels[index].replace(' total', '') : '';\n        }\n      }\n\n      if (pluginsData) {\n        const groupedPlugins = groupBy(\n          pluginsData,\n          (event: ITraceEventData) => event.pid,\n        );\n\n        Object.keys(groupedPlugins)\n          .reverse()\n          .forEach((key, groupIndex) => {\n            groupedPlugins[key].forEach((plugin, pluginIndex) => {\n              chartData.push({\n                name: String(plugin.pid),\n                value: [\n                  groupIndex,\n                  plugin.args.s,\n                  plugin.args.e,\n                  plugin.args.e - plugin.args.s,\n                ],\n                itemStyle: {\n                  normal: {\n                    color:\n                      TIMELINE_PALETTE_COLORS[\n                        (groupIndex + pluginIndex) %\n                          TIMELINE_PALETTE_COLORS.length\n                      ],\n                    opacity: 0.78,\n                  },\n                },\n                ext: plugin,\n              });\n            });\n            categoryLabels.push(\n              String(key.charAt(0).toUpperCase() + key.slice(1)),\n            );\n          });\n      }\n\n      return {\n        data: chartData,\n        categories: categoryLabels,\n      };\n    }, [loaderData, pluginsData]);\n    useEffect(() => {\n      function renderItem(\n        params: { coordSys: CoordSysType },\n        api: {\n          value: (arg0: number) => number;\n          coord: (arg0: number[]) => any;\n          size: (arg0: number[]) => number[];\n          style: () => string;\n        },\n      ) {\n        const categoryIndex = api.value(0);\n        const start = api.coord([api.value(1), categoryIndex]);\n        const end = api.coord([api.value(2), categoryIndex]);\n        const height = api.size([0, 1])[1] * 0.36;\n\n        const rectShape = echarts.graphic.clipRectByRect(\n          {\n            x: start[0],\n            y:\n              chartType === ChartTypes.Loader\n                ? start[1] - (categoryIndex % 2 !== 0 ? 0 : height * 2)\n                : start[1],\n            width: end[0] - start[0] || 5,\n            height: height,\n          },\n          {\n            x: params.coordSys.x,\n            y: params.coordSys.y,\n            width: params.coordSys.width,\n            height: params.coordSys.height,\n          },\n        );\n        return (\n          rectShape && {\n            type: 'rect',\n            transition: ['shape'],\n            shape: rectShape,\n            style: api.style(),\n            enterFrom: {\n              style: { opacity: 0 },\n              x: 0,\n            },\n          }\n        );\n      }\n\n      const option = {\n        tooltip: {\n          formatter: (raw: any) => {\n            return formatterFn(raw);\n          },\n        },\n        dataZoom: [\n          {\n            type: 'slider',\n            filterMode: 'weakFilter',\n            showDataShadow: false,\n            top: -8,\n            height: 14,\n            borderColor: themeToken.colorBorderSecondary,\n            backgroundColor: themeToken.colorFillQuaternary,\n            fillerColor: themeToken.colorPrimaryBg,\n            handleStyle: {\n              color: themeToken.colorTextSecondary,\n              borderColor: themeToken.colorBorder,\n            },\n          },\n          {\n            type: 'inside',\n            filterMode: 'weakFilter',\n          },\n        ],\n        grid: {\n          top: 18,\n          left: 12,\n          bottom: 12,\n          right: 16,\n          height:\n            categories.length > (chartType === ChartTypes.Loader ? 6 : 3)\n              ? 'auto'\n              : categories.length * LINE_HEIGHT,\n          containLabel: true,\n        },\n        xAxis: {\n          interval:\n            exts?.endTimestamp && exts?.startTimestamp\n              ? Math.floor((exts.endTimestamp - exts.startTimestamp) / 8)\n              : null,\n          position: 'top',\n          splitLine: {\n            show: true,\n            lineStyle: {\n              color: themeToken.colorBorderSecondary,\n              width: 1,\n            },\n          },\n          scale: true,\n          axisLine: {\n            show: false,\n          },\n          axisLabel: {\n            color: themeToken.colorTextSecondary,\n            fontSize: 11,\n            margin: 10,\n            formatter(val: number) {\n              return dayjs(val as number).format('HH:mm:ss:SSS');\n            },\n          },\n        },\n        yAxis: {\n          type: 'category',\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            inside: false,\n            lineHeight: 20,\n            width: chartType === ChartTypes.Loader ? 220 : 140,\n            overflow: 'truncate',\n            margin: 16,\n            fontSize: 12,\n            color: themeToken.colorTextSecondary,\n            verticalAlign: 'middle',\n          },\n          axisLine: {\n            show: false,\n          },\n          axisTick: {\n            show: false,\n          },\n          data: categories,\n        },\n        series: [\n          {\n            type: 'custom',\n            renderItem,\n            itemStyle: {\n              opacity: 1,\n            },\n            encode: {\n              x: [1, 2],\n              y: 0,\n            },\n            data,\n          },\n        ],\n      };\n      setOptionsData(option);\n    }, [categories, chartType, data, exts, formatterFn, themeToken]);\n\n    const categoryCount = loaderData\n      ? loaderData.length * 2\n      : new Set(pluginsData?.map((item) => item.pid)).size;\n    const chartHeight =\n      chartType === ChartTypes.Minify\n        ? 100\n        : chartType === ChartTypes.Loader\n          ? Math.min(Math.max(categoryCount * LINE_HEIGHT + 80, 300), 1000)\n          : Math.min(Math.max(categoryCount * LINE_HEIGHT + 70, 200), 1000);\n\n    return (\n      <ReactEChartsCore\n        option={optionsData}\n        echarts={echarts}\n        style={{\n          width: '100%',\n          height: `${chartHeight}px`,\n          border: '1px solid var(--color-border)',\n          borderRadius: '10px',\n        }}\n      />\n    );\n  },\n);\n"],"names":["LINE_HEIGHT","echarts","CustomChart","TooltipComponent","GridComponent","DataZoomComponent","CanvasRenderer","TimelineCom","memo","loaderData","pluginsData","formatterFn","chartType","ChartTypes","exts","optionsData","setOptionsData","useState","themeToken","useThemeToken","data","categories","useMemo","chartData","categoryLabels","loader","loaderIndex","totalColor","TIMELINE_PALETTE_COLORS","child","childIndex","index","groupedPlugins","groupBy","event","Object","key","groupIndex","plugin","pluginIndex","String","useEffect","renderItem","params","api","categoryIndex","start","end","height","rectShape","option","raw","Math","val","dayjs","categoryCount","Set","item","chartHeight","ReactEChartsCore"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { ECElementEvent } from 'echarts/types/dist/shared';
+import { type TreeMapSizeType } from './treeMapSize.js';
 export type TreeNode = {
     name: string;
     value?: number;
@@ -10,7 +11,7 @@ export type TreeNode = {
     gzipSize?: number;
     id?: string | number;
 };
-export type SizeType = 'stat' | 'parsed' | 'gzip' | 'value';
+export type SizeType = TreeMapSizeType;
 interface TreeMapProps {
     treeData: TreeNode[];
     sizeType: SizeType;