* Show dtable data in preview.

module/metric/control.php

@@ -58,8 +58,15 @@ class metric extends control
         $this->metric->processScopeList();
 
         $metrics = $this->metric->getList($scope);
+        $current = current($metrics);
+
+        $metric = $this->metric->getByID($current->id);
+        $result = $this->metric->getResultByCode($metric->code);
+        $this->view->resultHeader = $this->metricZen->getViewTableHeader($result);
+        $this->view->resultData   = $this->metricZen->getViewTableData($metric, $result);
+
         $this->view->metrics    = $metrics;
-        $this->view->current    = current($metrics);
+        $this->view->current    = $current;
         $this->view->metricList = $this->lang->metric->metricList;
         $this->view->scope      = $scope;
         $this->view->title      = $this->lang->metric->preview;

module/metric/css/preview.ui.css

@@ -1,6 +1,6 @@
 #mainContent {display: flex;}
-#mainContent .side {flex: 1 0 25%; overflow-x: hidden; padding-right: 2px;}
-#mainContent .main {flex: 1 0 75%; overflow-x: hidden;}
+#mainContent .side {flex: 0 0 25%; overflow-x: hidden; padding-right: 2px;}
+#mainContent .main {flex: 0 0 75%; overflow-x: hidden;}
 
 #featureBar .nav-feature li:last-child {padding-left: 4px; position: relative;}
 #featureBar .nav-feature li:last-child:before {content: ""; position: absolute; left: 2px; top: 5px; right: 0; bottom: 5px; width: 1px; background-color: var(--color-slate-300);}
@@ -11,13 +11,18 @@
 .side .metric-item {padding-bottom: 12px;}
 .side .metric-current {color: var(--nav-active-color);}
 
-.main .metric-name {height: 48px; padding-left: 16px; border-bottom: 1px solid var(--color-slate-300);}
+.main .metric-name {height: 48px; padding-left: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--color-slate-300);}
 .main .flex-between {justify-content: space-between;}
 .main .flex-start {justify-content: flex-start;}
 .main .metric-name-weight {font-weight: 600; font-size: 0.9rem;}
 .main .details {position: relative; margin-right: 4px;}
 .main .details:after {content: ""; position: absolute; top: 5px; right: -2px; bottom: 5px; width: 1px; background-color: var(--color-slate-300);}
 .main .chart-line-margin {margin-right: 16px;}
+.main .table-and-chart {height: calc(100vh - 180px); display: flex;}
+
+.table-and-chart .table-cell {flex: 0 0 40%; overflow-x: hidden; padding-left: 16px; padding-top: 8px; padding-bottom: 16px; padding-right: 2px;}
+.table-and-chart .chart-cell {flex: 0 0 60%;}
+.table-and-chart .chart-center {display:flex; justify-content: center; align-items: center;}
 
 .icon-18 {font-size: 18px;}
 .primary-hover-500 {color: var(--color-slate-800)}

module/metric/ui/preview.html.php

@@ -27,6 +27,36 @@ else
     foreach($metrics as $key => $metric) $metricCheckList[] = array('text' => $metric->name, 'value' => $key, 'checked' => in_array($key, $checkedList));
 }
 
+$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),
+        );
+};
+
 featureBar
 (
     set::current($scope),
@@ -126,6 +156,20 @@ div
                 )
             ),
         ),
+        div
+        (
+            setClass('table-and-chart'),
+            div
+            (
+                setClass('table-cell'),
+                $fnGenerateDataDisplay($resultData, $resultHeader, $lang, $current),
+            ),
+            div
+            (
+                setClass('chart-cell chart-center'),
+                'chart'
+            ),
+        ),
     ),
 );
 render();