{"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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"}