* Reconfiguration code.
This commit is contained in:
@@ -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();
|
||||
}
|
||||
|
||||
|
||||
@@ -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;}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user