修改样式

src/.prettierrc.js

@@ -4,5 +4,5 @@ module.exports = {
   singleQuote: true,
   printWidth: 80,
   tabWidth: 2,
-  endOfLine: 'auto',
+  endOfLine: 'auto'
 }

src/commitlint.config.js

@@ -24,7 +24,7 @@ const scopes = [
   'dev',
   'build',
   'deploy',
-  'other',
+  'other'
 ]
 
 module.exports = {
@@ -42,7 +42,7 @@ module.exports = {
     'type-enum': [
       2,
       'always',
-      ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'improvement'],
-    ],
-  },
+      ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'improvement']
+    ]
+  }
 }

src/components/charts/panel.scss

@@ -1,6 +1,6 @@
 .cn-panel {
   display: grid;
-  grid-template-columns: repeat(30, 1fr);
+  grid-template-columns: repeat(30, 2.90%);
   grid-auto-flow: row;
   grid-auto-rows: var(--chart-height-unit);
   grid-gap: 10px;
@@ -57,6 +57,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    grid-template-columns:(5,200px);
 
     .single-value-icon__box{
       height: 70px;
@@ -96,19 +97,13 @@
         font-weight: bold;
       }
       .content__title {
+        width: 206px;
+        overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        overflow: hidden;
-        word-break: break-all;
-        width: 80px;
         font-size: 16px;
         color: #666666;
       }
-      .content__title:hover{
-        overflow: visible;
-        white-space: inherit;
-        min-width:100%;
-      }
     }
   }
   &>.cn-chart__single-value.cn-chart__single-value--icon-right {

src/i18n/index.js

@@ -6,7 +6,7 @@ import cn from './cn'
 import en from './en'
 
 const i18n = createI18n({
-  locale: localStorage.getItem(storageKey.language) || 'en',
+  locale: localStorage.getItem(storageKey.language) || 'en'
   /* messages: {
     cn: cn,
     en: en

src/jest.config.js

@@ -3,9 +3,9 @@ module.exports = {
     // work around: https://github.com/kulshekhar/ts-jest/issues/748#issuecomment-423528659
     'ts-jest': {
       diagnostics: {
-        ignoreCodes: [151001],
-      },
-    },
+        ignoreCodes: [151001]
+      }
+    }
   },
   testEnvironment: 'jsdom',
   transform: {
@@ -17,21 +17,21 @@ module.exports = {
             '@babel/preset-env',
             {
               targets: {
-                node: true,
-              },
-            },
+                node: true
+              }
+            }
           ],
-          '@babel/preset-typescript',
+          '@babel/preset-typescript'
         ],
         plugins: [
           '@vue/babel-plugin-jsx',
-          '@babel/plugin-proposal-class-properties',
-        ],
-      },
-    ],
+          '@babel/plugin-proposal-class-properties'
+        ]
+      }
+    ]
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
   // u can change this option to a more specific folder for test single component or util when dev
   // for example, ['<rootDir>/packages/input']
-  roots: ['<rootDir>'],
+  roots: ['<rootDir>']
 }

src/utils/date-util.js

@@ -134,7 +134,7 @@ export function debounce (fn, delay) {
   }
 }
 export function getNowTime (interval) {
-  const endTime = window.$dayJs.tz().valueOf();
+  const endTime = window.$dayJs.tz().valueOf()
   const startTime = endTime - interval * 60 * 1000
   return {
     startTime,

src/views/charts/Chart.vue

@@ -9,6 +9,7 @@
       v-else-if="isTabs"
       class="cn-chart cn-chart__tabs"
       :tabs="chartInfo"
+      style="grid-area: 1 / 1 / 2 / 7;"
   ></chart-tabs>
   <!-- 地图 -->
   <chart-map
@@ -50,7 +51,7 @@
       :type="chartInfo.type"
       :style="computePosition"
   >
-    <template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
+    <template #title><span title="TCP Connection Establish Time">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span></template>
     <template #data>{{singleValue}}</template>
   </single-value>
   <!-- 表格 -->