* Set max-width 50% for metric preview and use flex-basis.

module/metric/control.php

@@ -67,7 +67,7 @@ class metric extends control
             $resultHeader = $this->metricZen->getViewTableHeader($metric);
             $resultData   = $this->metricZen->getViewTableData($metric, $result);
         }
-
+        
         $this->view->metrics       = $metrics;
         $this->view->groupMetrics  = $groupMetrics;
         $this->view->current       = $current;
@@ -80,6 +80,7 @@ class metric extends control
         $this->view->filtersBase64 = $filtersBase64;
         $this->view->resultHeader  = $resultHeader;
         $this->view->resultData    = $resultData;
+        $this->view->tableWidth    = $this->metricZen->getViewTableWidth($resultHeader);
         $this->view->chartTypeList = $this->metric->getChartTypeList($resultHeader);
         $this->view->echartOptions = $this->metric->getEchartsOptions($resultHeader, $resultData);
         $this->display();

module/metric/css/preview.ui.css

@@ -48,8 +48,8 @@
 i.star-empty {color: var(--color-slate-400);}
 i.star {color: var(--color-warning-300);}
 
-.table-and-chart .table-side {flex: 0 0 480px;}
-.table-and-chart .chart-side {flex: 0 0 calc(100% - 480px);}
+.table-and-chart .table-side {flex-shrink: 1; max-width: 50%;}
+.table-and-chart .chart-side {flex-grow: 1;}
 .table-and-chart .chart-center {display:flex; justify-content: center; align-items: center;}
 
 .icon-18 {font-size: 18px;}

module/metric/ui/previewsingle.html.php

@@ -350,6 +350,7 @@ div
             div
             (
                 setClass('table-side'),
+                setStyle(array('flex-basis' => $tableWidth . 'px')),
                 div
                 (
                     $resultData ? dtable

module/metric/zen.php

@@ -397,7 +397,7 @@ class metricZen extends metric
 
         if(!$result) return array
         (
-            array('name' => 'value', 'title' => $this->lang->metric->value),
+            array('name' => 'value', 'title' => $this->lang->metric->value, 'width' => 96),
             array('name' => 'calcTime', 'title' => $this->lang->metric->calcTime, 'width' => 150)
         );
 
@@ -415,6 +415,17 @@ class metricZen extends metric
         return $header;
     }
 
+    protected function getViewTableWidth($headers)
+    {
+        $width = 0;
+        foreach($headers as $header)
+        {
+            $width += isset($header['width']) ? $header['width'] : 160;
+        }
+    
+        return $width;
+    }
+
     /**
      * 获取度量数据表的数据。
      * Get data of result table.