diff --git a/frontend/src/components/v-charts/components/Line.vue b/frontend/src/components/v-charts/components/Line.vue index 9099f0d5015b..3e4372631e9c 100644 --- a/frontend/src/components/v-charts/components/Line.vue +++ b/frontend/src/components/v-charts/components/Line.vue @@ -9,7 +9,9 @@ import { computeSizeFromKBs, computeSizeFromKB, computeSizeFromMB } from '@/util import i18n from '@/lang'; const { themeConfig } = useGlobalStore(); const isDarkTheme = ref(false); +const LineChartRef = ref(); let mediaQuery: MediaQueryList; +let resizeObserver: ResizeObserver | undefined; const props = defineProps({ id: { type: String, @@ -99,16 +101,20 @@ const seriesStyle = [ ]; function initChart() { + const chartDom = LineChartRef.value; + if (!chartDom) { + return; + } if (themeConfig.value.theme === 'auto') { isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches; } else { isDarkTheme.value = themeConfig.value.theme === 'dark'; } - let itemChart = echarts?.getInstanceByDom(document.getElementById(props.id) as HTMLElement); + let itemChart = echarts?.getInstanceByDom(chartDom); const optionItem = itemChart?.getOption(); const itemSelect = optionItem?.legend; if (itemChart == null) { - itemChart = echarts.init(document.getElementById(props.id) as HTMLElement); + itemChart = echarts.init(chartDom); } const series = []; @@ -243,7 +249,11 @@ function initChart() { } function changeChartSize() { - echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement)?.resize(); + const chartDom = LineChartRef.value; + if (!chartDom) { + return; + } + echarts.getInstanceByDom(chartDom)?.resize(); } watch( @@ -267,13 +277,20 @@ onMounted(() => { mediaQuery.addEventListener('change', handleThemeChange); initChart(); window.addEventListener('resize', changeChartSize); + if (LineChartRef.value) { + resizeObserver = new ResizeObserver(changeChartSize); + resizeObserver.observe(LineChartRef.value); + } }); }); onBeforeUnmount(() => { - echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement).dispose(); + if (LineChartRef.value) { + echarts.getInstanceByDom(LineChartRef.value)?.dispose(); + } window.removeEventListener('resize', changeChartSize); - mediaQuery.removeEventListener('change', handleThemeChange); + mediaQuery?.removeEventListener('change', handleThemeChange); + resizeObserver?.disconnect(); }); diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts index 7c0e7fbecb2e..da8d2ddf7334 100644 --- a/frontend/src/lang/modules/en.ts +++ b/frontend/src/lang/modules/en.ts @@ -994,10 +994,14 @@ const message = { requestModelPlaceholder: 'e.g. qwen2.5-coder', upstreamModelPlaceholder: 'e.g. Qwen/Qwen2.5-Coder-32B-Instruct', addMapping: 'Add Mapping', + overview: 'Overview', + distribution: 'Distribution', usageTrend: 'Usage Trend', providerDistribution: 'Provider Distribution', unmatched: 'Unmatched', modelDistribution: 'Model Distribution', + accountDistribution: 'Model Account Distribution', + modelAccount: 'Model Account', serviceProvider: 'Provider', tokenUsage: 'Token Usage', percent: 'Percent', diff --git a/frontend/src/lang/modules/es-es.ts b/frontend/src/lang/modules/es-es.ts index bdf022357497..e6d4052b8109 100644 --- a/frontend/src/lang/modules/es-es.ts +++ b/frontend/src/lang/modules/es-es.ts @@ -1008,10 +1008,14 @@ const message = { requestModelPlaceholder: 'p. ej. qwen2.5-coder', upstreamModelPlaceholder: 'p. ej. Qwen/Qwen2.5-Coder-32B-Instruct', addMapping: 'Agregar mapeo', + overview: 'Resumen', + distribution: 'Distribución', usageTrend: 'Tendencia de uso', providerDistribution: 'Distribución por proveedor', unmatched: 'Sin coincidencia', modelDistribution: 'Distribución por modelo', + accountDistribution: 'Distribución por cuenta de modelo', + modelAccount: 'Cuenta de modelo', serviceProvider: 'Proveedor', tokenUsage: 'Uso de tokens', percent: 'Porcentaje', diff --git a/frontend/src/lang/modules/ja.ts b/frontend/src/lang/modules/ja.ts index 04a8617ee6b0..e12536675aa9 100644 --- a/frontend/src/lang/modules/ja.ts +++ b/frontend/src/lang/modules/ja.ts @@ -998,10 +998,14 @@ const message = { requestModelPlaceholder: '例: qwen2.5-coder', upstreamModelPlaceholder: '例: Qwen/Qwen2.5-Coder-32B-Instruct', addMapping: 'マッピングを追加', + overview: '概要', + distribution: '分布', usageTrend: '使用傾向', providerDistribution: 'プロバイダー別分布', unmatched: '未一致', modelDistribution: 'モデル別分布', + accountDistribution: 'モデルアカウント別分布', + modelAccount: 'モデルアカウント', serviceProvider: 'プロバイダー', tokenUsage: 'Token 使用量', percent: '割合', diff --git a/frontend/src/lang/modules/ko.ts b/frontend/src/lang/modules/ko.ts index 2b75b4192809..1718a6e43175 100644 --- a/frontend/src/lang/modules/ko.ts +++ b/frontend/src/lang/modules/ko.ts @@ -982,10 +982,14 @@ const message = { requestModelPlaceholder: '예: qwen2.5-coder', upstreamModelPlaceholder: '예: Qwen/Qwen2.5-Coder-32B-Instruct', addMapping: '매핑 추가', + overview: '개요', + distribution: '분포', usageTrend: '사용 추세', providerDistribution: '제공자별 분포', unmatched: '미일치', modelDistribution: '모델별 분포', + accountDistribution: '모델 계정별 분포', + modelAccount: '모델 계정', serviceProvider: '제공자', tokenUsage: 'Token 사용량', percent: '비율', diff --git a/frontend/src/lang/modules/ms.ts b/frontend/src/lang/modules/ms.ts index 74d40b419914..789bd11e58b3 100644 --- a/frontend/src/lang/modules/ms.ts +++ b/frontend/src/lang/modules/ms.ts @@ -1007,10 +1007,14 @@ const message = { requestModelPlaceholder: 'cth. qwen2.5-coder', upstreamModelPlaceholder: 'cth. Qwen/Qwen2.5-Coder-32B-Instruct', addMapping: 'Tambah pemetaan', + overview: 'Gambaran keseluruhan', + distribution: 'Taburan', usageTrend: 'Trend penggunaan', providerDistribution: 'Taburan mengikut penyedia', unmatched: 'Tidak sepadan', modelDistribution: 'Taburan mengikut model', + accountDistribution: 'Taburan mengikut akaun model', + modelAccount: 'Akaun model', serviceProvider: 'Penyedia', tokenUsage: 'Penggunaan Token', percent: 'Peratus', diff --git a/frontend/src/lang/modules/pt-br.ts b/frontend/src/lang/modules/pt-br.ts index 75f6dcf29e5b..3e7ad8e1bf8c 100644 --- a/frontend/src/lang/modules/pt-br.ts +++ b/frontend/src/lang/modules/pt-br.ts @@ -1003,10 +1003,14 @@ const message = { requestModelPlaceholder: 'ex.: qwen2.5-coder', upstreamModelPlaceholder: 'ex.: Qwen/Qwen2.5-Coder-32B-Instruct', addMapping: 'Adicionar mapeamento', + overview: 'Visão geral', + distribution: 'Distribuição', usageTrend: 'Tendência de uso', providerDistribution: 'Distribuição por provedor', unmatched: 'Sem correspondência', modelDistribution: 'Distribuição por modelo', + accountDistribution: 'Distribuição por conta de modelo', + modelAccount: 'Conta de modelo', serviceProvider: 'Provedor', tokenUsage: 'Uso de Token', percent: 'Percentual', diff --git a/frontend/src/lang/modules/ru.ts b/frontend/src/lang/modules/ru.ts index a370ad72e2bc..9036182e4a0c 100644 --- a/frontend/src/lang/modules/ru.ts +++ b/frontend/src/lang/modules/ru.ts @@ -997,10 +997,14 @@ const message = { requestModelPlaceholder: 'например: qwen2.5-coder', upstreamModelPlaceholder: 'например: Qwen/Qwen2.5-Coder-32B-Instruct', addMapping: 'Добавить сопоставление', + overview: 'Обзор', + distribution: 'Распределение', usageTrend: 'Тренд использования', providerDistribution: 'Распределение по провайдерам', unmatched: 'Не сопоставлено', modelDistribution: 'Распределение по моделям', + accountDistribution: 'Распределение по аккаунтам моделей', + modelAccount: 'Аккаунт модели', serviceProvider: 'Провайдер', tokenUsage: 'Использование Token', percent: 'Доля', diff --git a/frontend/src/lang/modules/tr.ts b/frontend/src/lang/modules/tr.ts index e97fa53478de..c7b65fb3b74d 100644 --- a/frontend/src/lang/modules/tr.ts +++ b/frontend/src/lang/modules/tr.ts @@ -1005,10 +1005,14 @@ const message = { requestModelPlaceholder: 'örn. qwen2.5-coder', upstreamModelPlaceholder: 'örn. Qwen/Qwen2.5-Coder-32B-Instruct', addMapping: 'Eşleme ekle', + overview: 'Genel bakış', + distribution: 'Dağılım', usageTrend: 'Kullanım eğilimi', providerDistribution: 'Sağlayıcı dağılımı', unmatched: 'Eşleşmedi', modelDistribution: 'Model dağılımı', + accountDistribution: 'Model hesabı dağılımı', + modelAccount: 'Model hesabı', serviceProvider: 'Sağlayıcı', tokenUsage: 'Token kullanımı', percent: 'Yüzde', diff --git a/frontend/src/lang/modules/zh-Hant.ts b/frontend/src/lang/modules/zh-Hant.ts index 70b44f8ea68e..2a7de85b0dfe 100644 --- a/frontend/src/lang/modules/zh-Hant.ts +++ b/frontend/src/lang/modules/zh-Hant.ts @@ -944,10 +944,14 @@ const message = { requestModelPlaceholder: '如 qwen2.5-coder', upstreamModelPlaceholder: '如 Qwen/Qwen2.5-Coder-32B-Instruct', addMapping: '新增映射', + overview: '概覽', + distribution: '分佈', usageTrend: '使用趨勢', providerDistribution: '按服務商分佈', unmatched: '未匹配', modelDistribution: '按模型分佈', + accountDistribution: '按模型帳號分佈', + modelAccount: '模型帳號', serviceProvider: '服務商', tokenUsage: 'Token 用量', percent: '佔比', diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts index 5c25a3668e21..9d39f974f8d5 100644 --- a/frontend/src/lang/modules/zh.ts +++ b/frontend/src/lang/modules/zh.ts @@ -936,10 +936,14 @@ const message = { requestModelPlaceholder: '如 qwen2.5-coder', upstreamModelPlaceholder: '如 Qwen/Qwen2.5-Coder-32B-Instruct', addMapping: '添加映射', + overview: '概览', + distribution: '分布', usageTrend: '使用趋势', providerDistribution: '按服务商分布', unmatched: '未匹配', modelDistribution: '按模型分布', + accountDistribution: '按模型账号分布', + modelAccount: '模型账号', serviceProvider: '服务商', tokenUsage: 'Token 用量', percent: '占比',