From 5321973ebed56b8cdb4cb290cf79f4b4076c7f95 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Wed, 1 Jul 2026 20:45:53 +0800
Subject: [PATCH] perf(charts): import chart components from
 @gpustack/core-ui/charts

Switch all echarts-based chart imports to the dedicated core-ui charts
entry so echarts stays out of the synchronous entry bundle and loads
only on chart routes. Requires @gpustack/core-ui with the ./charts export.
---
 src/pages/_components/bar-chart/index.tsx                 | 2 +-
 src/pages/_components/pie-chart/index.tsx                 | 2 +-
 .../cluster-management/components/cluster-metrics.tsx     | 3 ++-
 src/pages/cluster-management/components/trend-chart.tsx   | 2 +-
 src/pages/dashboard/components/resource-utilization.tsx   | 2 +-
 src/pages/dashboard/components/system-load.tsx            | 8 ++------
 .../components/usage-charts/top-token-usage-by-user.tsx   | 2 +-
 .../dashboard/components/usage-charts/usage-by-model.tsx  | 2 +-
 .../components/usage-inner/request-token-inner.tsx        | 3 ++-
 src/pages/dashboard/components/usage-inner/top-user.tsx   | 3 ++-
 src/pages/playground/embedding/page.tsx                   | 2 +-
 11 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/pages/_components/bar-chart/index.tsx b/src/pages/_components/bar-chart/index.tsx
index 24432bb8..88d7b8aa 100644
--- a/src/pages/_components/bar-chart/index.tsx
+++ b/src/pages/_components/bar-chart/index.tsx
@@ -1,5 +1,5 @@
 import useCoolColors from '@/hooks/use-cool-colors';
-import { Chart } from '@gpustack/core-ui';
+import { Chart } from '@gpustack/core-ui/charts';
 import { formatLargeNumber } from '@gpustack/core-ui/utils';
 import { Empty, Spin, theme } from 'antd';
 import _ from 'lodash';
diff --git a/src/pages/_components/pie-chart/index.tsx b/src/pages/_components/pie-chart/index.tsx
index ab09210d..ca3cd9de 100644
--- a/src/pages/_components/pie-chart/index.tsx
+++ b/src/pages/_components/pie-chart/index.tsx
@@ -1,5 +1,5 @@
 import useCoolColors from '@/hooks/use-cool-colors';
-import { Chart } from '@gpustack/core-ui';
+import { Chart } from '@gpustack/core-ui/charts';
 import { formatLargeNumber } from '@gpustack/core-ui/utils';
 import { Empty, Spin, theme } from 'antd';
 import React, {
diff --git a/src/pages/cluster-management/components/cluster-metrics.tsx b/src/pages/cluster-management/components/cluster-metrics.tsx
index ad967b49..69a7e851 100644
--- a/src/pages/cluster-management/components/cluster-metrics.tsx
+++ b/src/pages/cluster-management/components/cluster-metrics.tsx
@@ -1,4 +1,5 @@
-import { GaugeChart, TemplateCard } from '@gpustack/core-ui';
+import { TemplateCard } from '@gpustack/core-ui';
+import { GaugeChart } from '@gpustack/core-ui/charts';
 import { useSearchParams } from '@umijs/max';
 import { Col, Row } from 'antd';
 import _ from 'lodash';
diff --git a/src/pages/cluster-management/components/trend-chart.tsx b/src/pages/cluster-management/components/trend-chart.tsx
index 79903605..e520776c 100644
--- a/src/pages/cluster-management/components/trend-chart.tsx
+++ b/src/pages/cluster-management/components/trend-chart.tsx
@@ -1,4 +1,4 @@
-import { LineChart } from '@gpustack/core-ui';
+import { LineChart } from '@gpustack/core-ui/charts';
 import { useIntl } from '@umijs/max';
 import dayjs from 'dayjs';
 import _ from 'lodash';
diff --git a/src/pages/dashboard/components/resource-utilization.tsx b/src/pages/dashboard/components/resource-utilization.tsx
index 4347d6a3..1d14bd70 100644
--- a/src/pages/dashboard/components/resource-utilization.tsx
+++ b/src/pages/dashboard/components/resource-utilization.tsx
@@ -1,4 +1,4 @@
-import { LineChart } from '@gpustack/core-ui';
+import { LineChart } from '@gpustack/core-ui/charts';
 import { useIntl } from '@umijs/max';
 import dayjs from 'dayjs';
 import _ from 'lodash';
diff --git a/src/pages/dashboard/components/system-load.tsx b/src/pages/dashboard/components/system-load.tsx
index c26a70dc..53c14460 100644
--- a/src/pages/dashboard/components/system-load.tsx
+++ b/src/pages/dashboard/components/system-load.tsx
@@ -1,10 +1,6 @@
 import { queryClusterList } from '@/pages/cluster-management/apis';
-import {
-  BaseSelect,
-  CardWrapper,
-  GaugeChart,
-  PageTools
-} from '@gpustack/core-ui';
+import { BaseSelect, CardWrapper, PageTools } from '@gpustack/core-ui';
+import { GaugeChart } from '@gpustack/core-ui/charts';
 import { useIntl } from '@umijs/max';
 import { Col, Row } from 'antd';
 import _ from 'lodash';
diff --git a/src/pages/dashboard/components/usage-charts/top-token-usage-by-user.tsx b/src/pages/dashboard/components/usage-charts/top-token-usage-by-user.tsx
index 446ee443..f446fb2e 100644
--- a/src/pages/dashboard/components/usage-charts/top-token-usage-by-user.tsx
+++ b/src/pages/dashboard/components/usage-charts/top-token-usage-by-user.tsx
@@ -1,4 +1,4 @@
-import { HBarChart } from '@gpustack/core-ui';
+import { HBarChart } from '@gpustack/core-ui/charts';
 import { useIntl } from '@umijs/max';
 import { usageChartHeight, usageRankMaxItems } from '../../config';
 import type useTopTokenUsageByUser from '../../hooks/use-top-token-usage-by-user';
diff --git a/src/pages/dashboard/components/usage-charts/usage-by-model.tsx b/src/pages/dashboard/components/usage-charts/usage-by-model.tsx
index 578ee2ca..62b28fb1 100644
--- a/src/pages/dashboard/components/usage-charts/usage-by-model.tsx
+++ b/src/pages/dashboard/components/usage-charts/usage-by-model.tsx
@@ -1,6 +1,6 @@
 import useCoolColors from '@/hooks/use-cool-colors';
 import useQueryTimeSeriesData from '@/pages/usage/services/use-query-timeseries-data';
-import { Chart } from '@gpustack/core-ui';
+import { Chart } from '@gpustack/core-ui/charts';
 import { formatLargeNumber } from '@gpustack/core-ui/utils';
 import { useIntl } from '@umijs/max';
 import type { GlobalToken } from 'antd';
diff --git a/src/pages/dashboard/components/usage-inner/request-token-inner.tsx b/src/pages/dashboard/components/usage-inner/request-token-inner.tsx
index 216b7022..80fb4f0b 100644
--- a/src/pages/dashboard/components/usage-inner/request-token-inner.tsx
+++ b/src/pages/dashboard/components/usage-inner/request-token-inner.tsx
@@ -1,5 +1,6 @@
 import { formatLargeNumber } from '@/utils';
-import { CardWrapper, MixLineBarChart, SimpleCard } from '@gpustack/core-ui';
+import { CardWrapper, SimpleCard } from '@gpustack/core-ui';
+import { MixLineBarChart } from '@gpustack/core-ui/charts';
 import { Button } from 'antd';
 import dayjs from 'dayjs';
 import React, { useMemo } from 'react';
diff --git a/src/pages/dashboard/components/usage-inner/top-user.tsx b/src/pages/dashboard/components/usage-inner/top-user.tsx
index c7b3c209..eb6ee7c7 100644
--- a/src/pages/dashboard/components/usage-inner/top-user.tsx
+++ b/src/pages/dashboard/components/usage-inner/top-user.tsx
@@ -1,4 +1,5 @@
-import { CardWrapper, HBarChart } from '@gpustack/core-ui';
+import { CardWrapper } from '@gpustack/core-ui';
+import { HBarChart } from '@gpustack/core-ui/charts';
 import React from 'react';
 
 interface TopUserProps {
diff --git a/src/pages/playground/embedding/page.tsx b/src/pages/playground/embedding/page.tsx
index 40c67f70..f94b434a 100644
--- a/src/pages/playground/embedding/page.tsx
+++ b/src/pages/playground/embedding/page.tsx
@@ -11,9 +11,9 @@ import {
   HighlightCode,
   IconFont,
   ResizePanel,
-  ScatterChart,
   useOverlayScroller
 } from '@gpustack/core-ui';
+import { ScatterChart } from '@gpustack/core-ui/charts';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Button, Checkbox, Form, Segmented, Spin, Tabs, Tooltip } from 'antd';