* display card for single metric value.

module/metric/css/view.ui.css

@@ -0,0 +1,3 @@
+.card-data {display: inline-block; padding: 12px 36px; border: 1px solid #cbd5e1; border-radius: 4px;}
+.card-digit {font-size: 16px; color: #1e293b;}
+.card-title {font-size: 12px; color: #475569;}

module/metric/model.php

@@ -461,7 +461,7 @@ class metricModel extends model
         {
             if(!in_array($method, $methodNameList)) return false;
         }
- 
+
         return true;
     }
 }

module/metric/ui/view.html.php

@@ -61,12 +61,35 @@ detailHeader
     )
 );
 
-$dtable = empty($resultData) || empty($resultData) ? null : dtable
-(
-    set::height(400),
-    set::cols($resultHeader),
-    set::data($resultData)
-);
+$fnGenerateDataDisplay = function() use($resultData, $resultHeader, $lang, $metric)
+{
+    if(empty($resultData)) return null;
+    if(count($resultData) == 1) return div
+        (
+            set::className('card-data'),
+            center
+            (
+                p
+                (
+                    set::className('card-digit'),
+                    $resultData[0]->value
+                ),
+                p
+                (
+                    set::className('card-title'),
+                    $lang->metric->objectList[$metric->object]
+                ),
+            )
+
+        );
+
+    return dtable
+        (
+            set::height(400),
+            set::cols($resultHeader),
+            set::data($resultData),
+        );
+};
 
 detailBody
 (
@@ -87,7 +110,7 @@ detailBody
         section
         (
             set::title($lang->metric->metricData),
-            $dtable,
+            $fnGenerateDataDisplay($resultData, $resultHeader, $lang, $metric),
         )
     ),
     history