lw-cdp-ui 1.3.62 → 1.3.64

package/dist/components/lwBiChart/charts/MetricCard.vue

@@ -4,36 +4,30 @@
     <div v-for="(item, index) in parsedData"
          :key="index"
          class="chart-title-card"
-         :style="{ height }">
-      <el-statistic :value="item.current">
-        <template #title>
-          <div class="title-container"
-               :style="{ textAlign: item.setting.title?.left || 'right' }">
-            <div class="left"
-                 v-if="item.setting.title?.show">
-              <span :style="{
+         :style="{ height,textAlign: item.setting?.title?.left || 'left' }">
+      <div class="title-top"
+           :style="{ ...titleLeftRight, padding: item.setting?.title?.padding?.map(num => num + 'px').join(' ') || 0 }"
+           v-if="item.setting.title?.show">
+        <span :style="{
                      color: item.setting.title?.textStyle?.color || item.color,
-                     padding: item.setting?.title?.padding?.map(num => num + 'px').join(' ') || 0,
                      fontWeight: item.setting.title?.textStyle?.fontWeight || 'normal',
                       fontSize: item.setting.title?.textStyle?.fontSize + 'px' || '17px' }">{{ item.title }}</span>
-              <el-tooltip v-if="item.tooltip"
-                          effect="dark"
-                          :content="item.tooltip"
-                          placement="top">
-                <el-icon class="icon-tooltip"><el-icon-warning /></el-icon>
-              </el-tooltip>
-            </div>
-
-            <strong v-if="item.setting.legend?.show"
-                    class="title"
-                    :style="{
+        <el-tooltip v-if="item.tooltip"
+                    effect="dark"
+                    :content="item.tooltip"
+                    placement="top">
+          <el-icon class="icon-tooltip"><el-icon-warning /></el-icon>
+        </el-tooltip>
+      </div>
+      <div class="statistic-current"
+           :style="{
+                      ...legendLeftRight,
                      color: item.setting.legend?.textStyle?.color || item.color,
                      padding: item.setting?.legend?.padding?.map(num => num + 'px').join(' ') || 0,
                      fontWeight: item.setting.legend?.textStyle?.fontWeight || 'bold',
-                      fontSize: item.setting.legend?.textStyle?.fontSize + 'px' || '17px'}">{{ item.index }}</strong>
-          </div>
-        </template>
-      </el-statistic>
+                      fontSize: item.setting.legend?.textStyle?.fontSize + 'px' || '17px'}">
+        {{ item.current?.toLocaleString('en-US') }}
+      </div>
 
       <div v-if="parsedData.length > 1"
            class="statistic-footer">
@@ -103,6 +97,45 @@ export default {
       return this.parsedData?.length < this.rawData.setting.columnCount
         ? this.parsedData?.length
         : this.rawData.setting.columnCount
+    },
+    titleLeftRight() {
+      let {left} = this.rawData.setting?.title || {}
+      let params = {}
+      if (left == 'left') {
+        params.left = 0
+      } else if (left == 'center') {
+        params.left = '50%'
+        params.transform = 'translateX(-50%)'
+      } else {
+        params.left = 'auto'
+        params.right = 0
+      }
+      return params
+    },
+    legendLeftRight() {
+      let {left, top} = this.rawData.setting?.legend || {}
+      let params = {}
+      if (left == 'left') {
+        params.left = 0
+        params.right = 'auto'
+      } else if (left == 'center') {
+        params.right = '50%'
+        params.transform = 'translateX(50%)'
+      } else {
+        params.left = 'auto'
+        params.right = 0
+      }
+
+      if (top == 'top') {
+        params.top = 0
+      } else if (top == 'bottom') {
+        params.bottom = 0
+      } else if (top == 'middle') {
+        params.top = '50%'
+        params.transform = 'translateY(-50%)'
+      }
+
+      return params
     }
   }
 }
@@ -116,7 +149,6 @@ export default {
   width: 100%;
   justify-content: center;
   .chart-title-card {
-    padding: 15px;
     flex: 1;
     border-radius: 5px;
     min-height: 110px;
@@ -130,24 +162,16 @@ export default {
     justify-content: space-between;
     background-color: var(--el-bg-color-overlay);
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.0509803922);
+    position: relative;
   }
   :deep(.el-statistic__number) {
     line-height: 50px;
     font-size: 40px;
   }
-  .title-container {
-    position: relative;
-    font-size: 14px;
-    min-height: 20px;
-    .left {
-      position: absolute;
-      left: 0;
-    }
-    .title {
-      font-size: 17px;
-      position: absolute;
-      right: 0;
-    }
+  .statistic-current {
+    font-size: 17px;
+    position: absolute;
+    right: 0;
   }
 
   .statistic-footer {