Optimize style of gauge chart

assets/swirl/js/swirl.js

@@ -1304,12 +1304,21 @@ var Swirl;
                         {
                             type: 'gauge',
                             radius: '100%',
-                            center: ["50%", "58%"],
+                            center: ["50%", "50%"],
                             max: d.value,
+                            axisLine: {
+                                show: false,
+                                lineStyle: { width: 0, opacity: 0, shadowBlur: 0 },
+                            },
                             axisLabel: { show: false },
+                            axisTick: { show: false },
+                            splitLine: { show: false },
                             pointer: { show: false },
                             detail: {
+                                formatter: this.formatValue.bind(this),
                                 offsetCenter: [0, 0],
+                                fontSize: 64,
+                                fontWeight: 'bold',
                             },
                             data: [{ value: d.value }]
                         }

assets/swirl/ts/core/chart.ts

@@ -216,12 +216,21 @@ namespace Swirl.Core {
                         // name: d.name,
                         type: 'gauge',
                         radius: '100%',
-                        center: ["50%", "58%"], // 仪表位置
+                        center: ["50%", "50%"], // 仪表位置
                         max: d.value,
+                        axisLine: {
+                            show: false,
+                            lineStyle: {width: 0, opacity: 0, shadowBlur: 0},
+                        },
                         axisLabel: {show: false},
+                        axisTick: {show: false},
+                        splitLine: {show: false},
                         pointer: {show: false},
                         detail: {
+                            formatter: this.formatValue.bind(this),
                             offsetCenter: [0, 0],
+                            fontSize: 64,
+                            fontWeight: 'bold',
                         },
                         data: [{value: d.value}]
                     }

views/service/detail.jet

@@ -42,9 +42,6 @@
 <section class="section">
   <div class="container">
     <div class="buttons">
-      <button id="btn-delete" class="button is-danger">
-        <span class="icon"><i class="far fa-trash-alt"></i></span><span>{{ i18n("button.delete") }}</span>
-      </button>
       {{ if .Service.Spec.Mode.Replicated }}
       <button id="btn-scale" class="button is-dark">
         <span class="icon"><i class="fas fa-adjust"></i></span><span>{{ i18n("button.scale") }}</span>
@@ -56,6 +53,9 @@
       <button id="btn-rollback" class="button is-dark">
         <span class="icon"><i class="fas fa-reply"></i></span><span>{{ i18n("button.rollback") }}</span>
       </button>
+      <button id="btn-delete" class="button is-danger">
+        <span class="icon"><i class="far fa-trash-alt"></i></span><span>{{ i18n("button.delete") }}</span>
+      </button>
     </div>
     <div class="message is-primary">
       <div class="message-body">