* Reconfiguration code.

This commit is contained in:
songchenxuan
2023-10-07 14:59:27 +08:00
parent 99de53a85e
commit ed2c69ac7d
7 changed files with 232 additions and 83 deletions
+1
View File
@@ -76,6 +76,7 @@ class metric extends control
$this->view->filtersBase64 = $filtersBase64;
$this->view->resultHeader = $resultHeader;
$this->view->resultData = $resultData;
$this->view->echartOptions = $this->metric->getEchartsOptions($resultHeader, $resultData);
$this->display();
}
+1 -1
View File
@@ -46,7 +46,7 @@
i.star-empty {color: var(--color-slate-400);}
i.star {color: var(--color-warning-300);}
.table-and-chart .table-side {flex: 0 0 480px; overflow-x: hidden;}
.table-and-chart .table-side {flex: 0 0 480px;}
.table-and-chart .chart-side {flex: 0 0 calc(100% - 480px);}
.table-and-chart .chart-center {display:flex; justify-content: center; align-items: center;}
+31
View File
@@ -13,3 +13,34 @@ window.addUnit = function(e)
$("[name^='customUnit']").prop('checked', false);
}
}
window.renderDTableCell = function(result, {row, col})
{
var commonWidth = {
scope: 160,
date: 96,
value: 96,
calcTime: 128,
};
var width = 480;
var cols = Object.keys(row.data);
var cellWidth = {};
cols.forEach(function(col) {
if(commonWidth[col]) {
cellWidth[col] = commonWidth[col];
}
});
colsWidth = Object.values(cellWidth).reduce((a, b) => a + b, 0);
Object.keys(cellWidth).forEach(function(col) {
cellWidth[col] = Math.floor(cellWidth[col] / colsWidth * width);
});
var html = `<span class="cell-ellipsis" style="width: ${cellWidth[col.name] - 24}px;" title="${row.data[col.name]}">${row.data[col.name]}</span>`;
result[0] = {html: html};
return result;
}
+6 -4
View File
@@ -8,10 +8,12 @@ window.afterPageUpdate = function($target, info, options)
chartList.push({value: key, text: chartTypeList[key]});
}
window.filterChecked = {};
window.renderDTable(current.id, resultHeader, resultData);
window.renderChart(current.id, resultHeader, resultData);
if(viewType == 'multiple') window.renderCheckedLabel();
$(window).on('resize', window.renderCheckedLabel);
if(viewType == 'multiple')
{
window.renderCheckedLabel();
$(window).on('resize', window.renderCheckedLabel);
}
window.initFilterPanel();
}
+86
View File
@@ -1196,4 +1196,90 @@ class metricModel extends model
if(empty($type)) $type[] = 'system';
return implode('-', $type);
}
/**
* 获取一个echarts的配置项。
* Get options of echarts by head and data.
*
* @param array $head 表头
* @param array $datas 数据
* @param string $chartType 图表类型 barX|barY|line|pie
* @access public
* @return array|false
*/
public function getEchartsOptions(array $head, array $datas, string $chartType = 'line'): array|false
{
if(!$head || !$datas) return false;
$headLength = count($head);
if($headLength == 2)
{
$x = $head[1]['name'];
$y = $head[0]['name'];
}
elseif($headLength == 3)
{
$x = $head[0]['name'];
$y = $head[1]['name'];
}
elseif($headLength == 4)
{
$x = $head[1]['name'];
$y = $head[2]['name'];
}
if(!$x || !$y) return false;
$type = in_array($chartType, array('barX', 'barY')) ? 'bar' : $chartType;
$xAxis = array('type' => 'category', 'data' => array_unique(array_column($datas, $x)));
sort($xAxis['data']);
$yAxis = array('type' => 'value');
$series = array();
if($headLength <= 3)
{
$series = array('type' => $type, 'data' => array_column($datas, $y));
}
elseif($headLength == 4)
{
$groupedData = array();
foreach($datas as $data)
{
$scope = $data->scope;
$date = $data->date;
$value = $data->value;
if(!isset($groupedData[$scope])) $groupedData[$scope] = array();
$groupedData[$scope][] = array('value' => $value, 'date' => $date);
}
foreach($groupedData as $scope => $groups)
{
$seriesData = array();
foreach($xAxis['data'] as $date)
{
$value = 0;
foreach($groups as $group)
{
if($group['date'] == $date)
{
$value = $group['value'];
break;
}
}
$seriesData[] = $value;
}
$series[] = array('type' => $type, 'name' => $scope, 'data' => $seriesData);
}
}
$options = array();
$options['xAxis'] = $xAxis;
$options['yAxis'] = $yAxis;
$options['series'] = $series;
return $options;
}
}
+92 -76
View File
@@ -270,6 +270,97 @@ div
),
);
$metricBoxs = div
(
set::id('metricBox' . $current->id),
set('metric-id', $current->id),
setClass('metricBox'),
div
(
setClass('metric-name flex flex-between items-center'),
div
(
span
(
setClass('metric-name-weight'),
isset($current) ? $current->name : null,
),
),
div
(
setClass('flex-start'),
toolbar
(
haspriv('metric', 'details') ? item(set(array
(
'text' => $this->lang->metric->details,
'class' => 'ghost details',
'url' => helper::createLink('metric', 'details', "metricID=$current->id"),
'data-toggle' => 'modal'
))) : null,
item(set(array
(
'text' => $this->lang->metric->remove,
'class' => 'ghost metric-remove hidden',
'onclick' => "window.handleRemoveLabel($current->id)"
))),
haspriv('metric', 'filters') ? item(set(array
(
'icon' => 'menu-backend',
'text' => $this->lang->metric->filters,
'class' => 'ghost hidden',
'url' => '#',
))) : null,
haspriv('metric', 'zAnalysis') ? item(set(array
(
'icon' => 'chart-line',
'text' => $this->lang->metric->zAnalysis,
'class' => 'ghost chart-line-margin hidden',
'url' => '#',
))) : null,
),
),
),
div
(
setClass('table-and-chart table-and-chart-multiple'),
div
(
setClass('table-side'),
div
(
$resultData ? dtable
(
set::height(310),
set::bordered(true),
set::cols($resultHeader),
set::data(array_values($resultData)),
set::onRenderCell(jsRaw('window.renderDTableCell')),
) : null,
)
),
div
(
setClass('chart-side'),
div
(
setClass('chart-type'),
),
div
(
setClass('chart chart-multiple'),
$echartOptions ? echarts
(
set::xAxis($echartOptions['xAxis']),
set::yAxis($echartOptions['yAxis']),
set::series($echartOptions['series']),
)->size('100%', '100%') : null,
)
),
),
);
div
(
setClass('main'),
@@ -313,82 +404,7 @@ div
div
(
setClass('table-and-charts'),
div
(
set::id('metricBox' . $current->id),
set('metric-id', $current->id),
setClass('metricBox'),
div
(
setClass('metric-name flex flex-between items-center'),
div
(
span
(
setClass('metric-name-weight'),
isset($current) ? $current->name : null,
),
),
div
(
setClass('flex-start'),
toolbar
(
haspriv('metric', 'details') ? item(set(array
(
'text' => $this->lang->metric->details,
'class' => 'ghost details',
'url' => helper::createLink('metric', 'details', "metricID=$current->id"),
'data-toggle' => 'modal'
))) : null,
item(set(array
(
'text' => $this->lang->metric->remove,
'class' => 'ghost metric-remove hidden',
'onclick' => "window.handleRemoveLabel($current->id)"
))),
haspriv('metric', 'filters') ? item(set(array
(
'icon' => 'menu-backend',
'text' => $this->lang->metric->filters,
'class' => 'ghost hidden',
'url' => '#',
))) : null,
haspriv('metric', 'zAnalysis') ? item(set(array
(
'icon' => 'chart-line',
'text' => $this->lang->metric->zAnalysis,
'class' => 'ghost chart-line-margin hidden',
'url' => '#',
))) : null,
),
),
),
div
(
setClass('table-and-chart table-and-chart-multiple'),
div
(
setClass('table-side'),
div
(
setClass('dtable'),
)
),
div
(
setClass('chart-side'),
div
(
setClass('chart-type'),
),
div
(
setClass('chart chart-multiple'),
)
),
),
),
$metricBoxs,
),
),
);
+15 -2
View File
@@ -64,6 +64,7 @@ $fnGenerateFilterPanel = function($code, $filterItem) use($lang)
$filterItems = $this->metric->buildFilterCheckList($filters);
featureBar
(
set::load(''),
set::current($scope),
set::linkParams("scope={key}"),
li
@@ -327,7 +328,13 @@ div
setClass('table-side'),
div
(
setClass('dtable'),
$resultData ? dtable
(
set::bordered(true),
set::cols($resultHeader),
set::data(array_values($resultData)),
set::onRenderCell(jsRaw('window.renderDTableCell')),
) : null,
)
),
div
@@ -339,7 +346,13 @@ div
),
div
(
setClass('chart chart-single'),
setClass('chart-single'),
$echartOptions ? echarts
(
set::xAxis($echartOptions['xAxis']),
set::yAxis($echartOptions['yAxis']),
set::series($echartOptions['series']),
)->size('100%', '100%') : null,
),
),
),