fix：修改问题
1 dashboard模块prometheus查询接口query内容进行encode 2 panel下拉列表位置左侧菜单收缩后显示异常 3 echarts图表对于返回数据metric为空图表，tooltip无法正常显示修改（列表及全屏，预览及全屏，explore及全屏） 4 图表tooltip中的冒号删掉 5 metric选择，metric及label高度为100%，无滚动条 6 增加网格，取消y轴 7 tooltip内容和legend内容显示不一致 8 tooltip颜色随机产生
This commit is contained in:
hyx
@@ -69,8 +69,7 @@
|
||||
handle:'.chartTitle',
|
||||
}" >@clone="clone"
|
||||
-->
|
||||
<draggable v-model="dataList" @chang="change" @start="start" @end="end" :move="move" @choose="choose"
|
||||
@add="add" @update="update" @remove="remove" @sort="sort"
|
||||
<draggable v-model="dataList" @start="start" @end="end" :move="move"
|
||||
:scroll-sensitivity="150"
|
||||
:options="{
|
||||
group:{name:'chartGroup',pull:'false'},
|
||||
@@ -501,7 +500,6 @@ export default {
|
||||
}else {
|
||||
this.dataList = this.dataTotalList;
|
||||
}
|
||||
console.log('0000==========',this.dataList);
|
||||
this.$nextTick(() => {
|
||||
if (this.dataList.length > 0 && this.$refs.editChart) {
|
||||
this.$refs.editChart.forEach((item, i) => {
|
||||
@@ -636,6 +634,9 @@ export default {
|
||||
if(!alias || alias===''){
|
||||
alias = chartItem.elements[innerPos].expression;
|
||||
}
|
||||
//if(alias){
|
||||
//host = alias;
|
||||
//}
|
||||
legend.push({name:host,alias:alias});
|
||||
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
|
||||
seriesItem.theData.name = host;
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
</div>
|
||||
<div :id="'chartUrl'+chartIndex" class="mt-10 url-container" v-show="firstShow" >
|
||||
<iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
|
||||
style="z-index:5000;"
|
||||
style="z-index:5000;padding-bottom:6px;"
|
||||
></iframe><!-- style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;" :src="chart.url" v-scrollBar:char-url-preview-->
|
||||
</div>
|
||||
<!--全屏-->
|
||||
@@ -41,7 +41,7 @@
|
||||
<span class="nz-dialog-title">{{data.title}}</span>
|
||||
</div>
|
||||
<iframe :id="'urlContainerFull'+chartIndex" frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto
|
||||
style="z-index:5000;"
|
||||
style="z-index:5000;padding-bottom:6px;"
|
||||
></iframe><!-- style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;" :src="chart.url" v-scrollBar:char-url-preview-->
|
||||
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
@@ -92,6 +92,7 @@ export default {
|
||||
minHeight:200,
|
||||
chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
|
||||
titleHeight:38,//title-height:28,magrin-bottom:10
|
||||
paddingBottom:6,
|
||||
divFirstShow:false,
|
||||
};
|
||||
},
|
||||
@@ -113,7 +114,7 @@ export default {
|
||||
}
|
||||
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
|
||||
const urlBox = document.getElementById('urlContainer'+this.chartIndex);
|
||||
urlBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
|
||||
urlBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.paddingBottom}px`;// -75-32
|
||||
});
|
||||
this.startLoading();
|
||||
this.setLoadFrame();
|
||||
@@ -150,7 +151,7 @@ export default {
|
||||
this.setLoadFrameFull();
|
||||
},
|
||||
dragResize:function(e){
|
||||
console.log('========',this.data)
|
||||
console.log('========',this.data);
|
||||
var diffWidth =20; //界面的宽度空白的地方的宽度
|
||||
var chartBoxPadding = 22;
|
||||
var targetDiv= document.getElementById('chartUrlDiv'+this.chartIndex); //e.target.parentNode.parentNode;.children[0]
|
||||
@@ -214,7 +215,7 @@ export default {
|
||||
//表格的高度
|
||||
const tableBox = document.getElementById('urlContainer'+_this.chartIndex);
|
||||
tableBox.style.height = `${containerHeight-_this.titleHeight}px`;//-75-32+25
|
||||
}
|
||||
};
|
||||
|
||||
document.onmouseup=function(){
|
||||
document.onmousemove=null;
|
||||
@@ -273,10 +274,10 @@ export default {
|
||||
height:(containerHeight+_this.chartSpaceHeight),
|
||||
prev:parseInt(_this.data.prev),
|
||||
next:parseInt(_this.data.next),
|
||||
}
|
||||
console.log('========2',_this.data)
|
||||
};
|
||||
console.log('========2',_this.data);
|
||||
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
|
||||
console.log('========3',_this.data)
|
||||
console.log('========3',_this.data);
|
||||
if (response.code === 200) {
|
||||
//更新当前图表数据
|
||||
_this.data.span= span;
|
||||
|
||||
@@ -17,8 +17,9 @@
|
||||
|
||||
}
|
||||
#chartPreviewDailog .el-dialog__body {
|
||||
padding-bottom:5px !important;
|
||||
padding-bottom:20px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<el-dialog class="chart-preview-dialog nz-dialog" id="chartPreviewDailog"
|
||||
@@ -94,6 +95,7 @@
|
||||
import bus from '../../libs/bus';
|
||||
import loading from "../common/loading";
|
||||
import chartDataFormat from './chartDataFormat'
|
||||
import {randomcolor} from '../common/js/radomcolor/randomcolor.js'
|
||||
|
||||
export default {
|
||||
name: 'chartPreview',
|
||||
@@ -134,14 +136,7 @@
|
||||
screenLegendList:[],
|
||||
isGrey:[],
|
||||
isGreyScreen:[],
|
||||
bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
|
||||
'#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
|
||||
'#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
|
||||
'#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
|
||||
'#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
|
||||
'#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
|
||||
'#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
|
||||
],
|
||||
bgColorList: [],
|
||||
//firstShow: false, // 默认不显示操作按钮,
|
||||
//dropdownMenuShow:false,
|
||||
showLegend:true,
|
||||
@@ -662,9 +657,10 @@ console.log('=======',this.chart);
|
||||
|
||||
//let str = `<div style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
|
||||
params.forEach((item, i) => {
|
||||
let tip=legend.find((element)=>{
|
||||
return element.name == item.seriesName;
|
||||
});
|
||||
//let tip=legend.find((element)=>{
|
||||
//return element.name == item.seriesName;
|
||||
//});
|
||||
let tip=legend[i];
|
||||
if(i===0){
|
||||
let t_date = new Date(item.data[0]);
|
||||
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
|
||||
@@ -676,7 +672,7 @@ console.log('=======',this.chart);
|
||||
val = Number(item.data[1]);
|
||||
}
|
||||
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
|
||||
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}: </div>`;
|
||||
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
|
||||
str += `<div style="padding-left: 10px;">`;
|
||||
str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
|
||||
str += `</div>`;
|
||||
@@ -777,7 +773,7 @@ console.log('=======',this.chart);
|
||||
show: true,
|
||||
},
|
||||
splitLine:{
|
||||
show:false
|
||||
show:true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
@@ -785,6 +781,14 @@ console.log('=======',this.chart);
|
||||
splitLine:{
|
||||
show:true
|
||||
},
|
||||
//去掉y轴--start
|
||||
axisLine:{
|
||||
show:false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
//去掉y轴--end
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
let chartUnit=chartInfo.unit;
|
||||
@@ -843,8 +847,15 @@ console.log('=======',this.chart);
|
||||
})
|
||||
}
|
||||
},
|
||||
setColor(colorNum){
|
||||
this.bgColorList = [];
|
||||
for(let i=0;i<colorNum;i++) {
|
||||
this.bgColorList.push(randomcolor())
|
||||
}
|
||||
},
|
||||
// 设置数据
|
||||
setData(chartItem, seriesItem,legend) {
|
||||
this.setColor(legend.length);
|
||||
this.legend = legend;
|
||||
//this.data = chartItem;
|
||||
//this.seriesItem = seriesItem;
|
||||
|
||||
@@ -120,6 +120,7 @@
|
||||
import bus from '../../libs/bus';
|
||||
import loading from "../common/loading";
|
||||
import chartDataFormat from './chartDataFormat'
|
||||
import {randomcolor} from '../common/js/radomcolor/randomcolor.js'
|
||||
|
||||
export default {
|
||||
name: 'lineChartBlock',
|
||||
@@ -182,13 +183,13 @@
|
||||
screenLegendList:[],
|
||||
isGrey:[],
|
||||
isGreyScreen:[],
|
||||
bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
|
||||
bgColorList: [/*'#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
|
||||
'#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
|
||||
'#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
|
||||
'#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
|
||||
'#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
|
||||
'#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
|
||||
'#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
|
||||
'#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',*/
|
||||
],
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow:false,
|
||||
@@ -744,9 +745,13 @@
|
||||
|
||||
//let str = `<div style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
|
||||
params.forEach((item, i) => {
|
||||
let tip=legend.find((element)=>{
|
||||
return element.name == item.seriesName;
|
||||
});
|
||||
//alert('tooltip====='+JSON.stringify(item))
|
||||
//let tip=legend.find((element)=>{
|
||||
//alert('legend====='+JSON.stringify(element))
|
||||
//return element.name == item.seriesName;
|
||||
//});
|
||||
let tip=legend[i];
|
||||
let color = self.bgColorList[i];
|
||||
if(i===0){
|
||||
let value=bus.computeTimezone(item.data[0]);
|
||||
let t_date = new Date(value);
|
||||
@@ -759,7 +764,7 @@
|
||||
val = Number(item.data[1]);
|
||||
}
|
||||
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
|
||||
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}: </div>`;
|
||||
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
|
||||
str += `<div style="padding-left: 10px;">`;
|
||||
str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
|
||||
str += `</div>`;
|
||||
@@ -868,14 +873,23 @@
|
||||
show: true,
|
||||
},
|
||||
splitLine:{
|
||||
show:false
|
||||
}
|
||||
show:true
|
||||
},
|
||||
//boundaryGap:['20%', '0'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine:{
|
||||
show:true
|
||||
},
|
||||
//去掉y轴--start
|
||||
axisLine:{
|
||||
show:false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
//去掉y轴--end
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
let chartUnit=chartInfo.unit;
|
||||
@@ -1107,8 +1121,15 @@
|
||||
*/
|
||||
//return rlt;
|
||||
},
|
||||
setColor(colorNum){
|
||||
this.bgColorList = [];
|
||||
for(let i=0;i<colorNum;i++) {
|
||||
this.bgColorList.push(randomcolor())
|
||||
}
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData(chartItem, seriesItem, panelId, filter,legend,area) {
|
||||
this.setColor(legend.length);
|
||||
if(area==='showFullScreen'){//全屏按时间查询
|
||||
/*
|
||||
this.legend = legend;
|
||||
|
||||
177
nezha-fronted/src/components/common/js/radomcolor/color.txt
Normal file
177
nezha-fronted/src/components/common/js/radomcolor/color.txt
Normal file
@@ -0,0 +1,177 @@
|
||||
|
||||
#d8a6ea
|
||||
#d8f799
|
||||
#7fe2d0
|
||||
#f7677b
|
||||
#6e4eed
|
||||
#adff3a
|
||||
#f082f2
|
||||
#cc2095
|
||||
#ea60aa
|
||||
#8cf2d7
|
||||
#51cc41
|
||||
#9c93d8
|
||||
#f4a1c5
|
||||
#a1f4b3
|
||||
#6de8a6
|
||||
#92a1e8
|
||||
#e5aa52
|
||||
#96c938
|
||||
#9dd7ea
|
||||
#ccd1ff
|
||||
#d65640
|
||||
#ffccd1
|
||||
#6ba5c4
|
||||
#6af7a0
|
||||
#ffa5fc
|
||||
#bff977
|
||||
#98f99a
|
||||
#c14c3f
|
||||
#0f1ec4
|
||||
#88e02a
|
||||
#d540dd
|
||||
#24f27d
|
||||
#4572ef
|
||||
#fff8af
|
||||
#5f56d8
|
||||
#5023ba
|
||||
#021b60
|
||||
#80ed76
|
||||
#cbfca9
|
||||
#235ad1
|
||||
#ed87ae
|
||||
#adf913
|
||||
#dbdb29
|
||||
#e23bc6
|
||||
#e2a33d
|
||||
#949fe8
|
||||
#bad7fc
|
||||
#4ce86e
|
||||
#9ccbe5
|
||||
#6354ea
|
||||
#98f2d7
|
||||
#fcc79c
|
||||
#192e96
|
||||
#a567ce
|
||||
#f72a56
|
||||
#f29e59
|
||||
#eb6eef
|
||||
#e03188
|
||||
#6050bf
|
||||
#beb9f7
|
||||
#9ec1ef
|
||||
#4083b7
|
||||
#f73302
|
||||
#614dd1
|
||||
#f7b183
|
||||
#d6ef97
|
||||
#13f7e4
|
||||
#bbccf7
|
||||
#c17c3c
|
||||
#db5c91
|
||||
#fcdfbf
|
||||
#88d32c
|
||||
#b33de5
|
||||
#5ef9b9
|
||||
#27e5b9
|
||||
#7f84d1
|
||||
#f98f7a
|
||||
#d05ae2
|
||||
#44c4c2
|
||||
#e5d04b
|
||||
#b23c2c
|
||||
#2209b5
|
||||
#cdc2f9
|
||||
#be40e8
|
||||
#b3d1fc
|
||||
#67e0d2
|
||||
#c5f9a4
|
||||
#89dbf9
|
||||
#f4b0d0
|
||||
#0e00aa
|
||||
#88a8d8
|
||||
#e595a3
|
||||
#9ef99a
|
||||
#ffdf2b
|
||||
#e59787
|
||||
#68f9ac
|
||||
#6620a3
|
||||
#6cd87a
|
||||
#ade8ed
|
||||
#e7f78a
|
||||
#d66a22
|
||||
#a24cff
|
||||
#959cdb
|
||||
#c6ffb2
|
||||
#db4cff
|
||||
#4dff47
|
||||
#ee24f2
|
||||
#41ce31
|
||||
#99efbd
|
||||
#2b8407
|
||||
#3db2c6
|
||||
#cb42ed
|
||||
#6d22a3
|
||||
#6357cc
|
||||
#012e77
|
||||
#fc2dc5
|
||||
#b27b21
|
||||
#ef1ce5
|
||||
#f75b87
|
||||
#e87ab6
|
||||
#a8ffcc
|
||||
#9ae2e1
|
||||
#b4f79b
|
||||
#13d681
|
||||
#85d85f
|
||||
#dd499d
|
||||
#e88db0
|
||||
#35ce35
|
||||
#fff7af
|
||||
#e57e91
|
||||
#2cc147
|
||||
#60f7e3
|
||||
#16af98
|
||||
#9b2ff9
|
||||
#dd0618
|
||||
#42c49d
|
||||
#c137ce
|
||||
#fcc3bf
|
||||
#1219e2
|
||||
#04a53f
|
||||
#69ea81
|
||||
#fcdbba
|
||||
#e53986
|
||||
#5656e2
|
||||
#423cfc
|
||||
#9ddd75
|
||||
#fc2500
|
||||
#f461a8
|
||||
#fc6fba
|
||||
#b53649
|
||||
#71e8ac
|
||||
#f26a8e
|
||||
#bf8511
|
||||
#21f2a2
|
||||
#b1bded
|
||||
#e5bd6e
|
||||
#c004e5
|
||||
#6fdbd9
|
||||
#98f9c4
|
||||
#f9e936
|
||||
#d16932
|
||||
#fcb86a
|
||||
#27e5d5
|
||||
#e2bc7f
|
||||
#ca52f2
|
||||
#3bd68e
|
||||
#74e3ed
|
||||
#e0e80b
|
||||
#bf5ced
|
||||
#ff14b0
|
||||
#66c3e8
|
||||
#fcf88a
|
||||
#6a2099
|
||||
#ea4ff2
|
||||
#c708e0
|
||||
#d35d6c
|
||||
322
nezha-fronted/src/components/common/js/radomcolor/randomcolor.js
Normal file
322
nezha-fronted/src/components/common/js/radomcolor/randomcolor.js
Normal file
@@ -0,0 +1,322 @@
|
||||
export function randomcolor() {
|
||||
var e = null,
|
||||
t = {};
|
||||
r("monochrome", null, [
|
||||
[0, 0],
|
||||
[100, 0]
|
||||
]),
|
||||
r("red", [-26, 18], [
|
||||
[20, 100],
|
||||
[30, 92],
|
||||
[40, 89],
|
||||
[50, 85],
|
||||
[60, 78],
|
||||
[70, 70],
|
||||
[80, 60],
|
||||
[90, 55],
|
||||
[100, 50]
|
||||
]),
|
||||
r("orange", [19, 46], [
|
||||
[20, 100],
|
||||
[30, 93],
|
||||
[40, 88],
|
||||
[50, 86],
|
||||
[60, 85],
|
||||
[70, 70],
|
||||
[100, 70]
|
||||
]),
|
||||
r("yellow", [47, 62], [
|
||||
[25, 100],
|
||||
[40, 94],
|
||||
[50, 89],
|
||||
[60, 86],
|
||||
[70, 84],
|
||||
[80, 82],
|
||||
[90, 80],
|
||||
[100, 75]
|
||||
]),
|
||||
r("green", [63, 178], [
|
||||
[30, 100],
|
||||
[40, 90],
|
||||
[50, 85],
|
||||
[60, 81],
|
||||
[70, 74],
|
||||
[80, 64],
|
||||
[90, 50],
|
||||
[100, 40]
|
||||
]),
|
||||
r("blue", [179, 257], [
|
||||
[20, 100],
|
||||
[30, 86],
|
||||
[40, 80],
|
||||
[50, 74],
|
||||
[60, 60],
|
||||
[70, 52],
|
||||
[80, 44],
|
||||
[90, 39],
|
||||
[100, 35]
|
||||
]),
|
||||
r("purple", [258, 282], [
|
||||
[20, 100],
|
||||
[30, 87],
|
||||
[40, 79],
|
||||
[50, 70],
|
||||
[60, 65],
|
||||
[70, 59],
|
||||
[80, 52],
|
||||
[90, 45],
|
||||
[100, 42]
|
||||
]),
|
||||
r("pink", [283, 334], [
|
||||
[20, 100],
|
||||
[30, 90],
|
||||
[40, 86],
|
||||
[60, 84],
|
||||
[80, 80],
|
||||
[90, 75],
|
||||
[100, 73]
|
||||
]);
|
||||
var n = function(r) {
|
||||
if (void 0 !== (r = r || {}).seed && null !== r.seed && r.seed === parseInt(r.seed, 10))
|
||||
e = r.seed;
|
||||
else if ("string" == typeof r.seed)
|
||||
e = function(e) {
|
||||
for (var t = 0, n = 0; n !== e.length && !(t >= Number.MAX_SAFE_INTEGER); n++)
|
||||
t += e.charCodeAt(n);
|
||||
return t
|
||||
};
|
||||
(r.seed);
|
||||
else {
|
||||
if (void 0 !== r.seed && null !== r.seed)
|
||||
throw new TypeError("The seed value must be an integer or string");
|
||||
e = null
|
||||
}
|
||||
var c,
|
||||
l;
|
||||
if (null !== r.count && void 0 !== r.count) {
|
||||
var u = r.count,
|
||||
d = [];
|
||||
for (r.count = null; u > d.length;)
|
||||
e && r.seed && (r.seed += 1), d.push(n(r));
|
||||
return r.count = u,
|
||||
d
|
||||
}
|
||||
return function(e, t) {
|
||||
switch (t.format) {
|
||||
case "hsvArray":
|
||||
return e;
|
||||
case "hslArray":
|
||||
return a(e);
|
||||
case "hsl":
|
||||
var n = a(e);
|
||||
return "hsl(" + n[0] + ", " + n[1] + "%, " + n[2] + "%)";
|
||||
case "hsla":
|
||||
var s = a(e),
|
||||
o = t.alpha || Math.random();
|
||||
return "hsla(" + s[0] + ", " + s[1] + "%, " + s[2] + "%, " + o + ")";
|
||||
case "rgbArray":
|
||||
return i(e);
|
||||
case "rgb":
|
||||
return "rgb(" + i(e).join(", ") + ")";
|
||||
case "rgba":
|
||||
var r = i(e);
|
||||
o = t.alpha || Math.random();
|
||||
return "rgba(" + r.join(", ") + ", " + o + ")";
|
||||
default:
|
||||
return function(e) {
|
||||
var t = i(e);
|
||||
|
||||
function n(e) {
|
||||
var t = e.toString(16);
|
||||
return 1 == t.length ? "0" + t : t
|
||||
}
|
||||
return "#" + n(t[0]) + n(t[1]) + n(t[2])
|
||||
};
|
||||
(e)
|
||||
}
|
||||
};
|
||||
([c = function(e) {
|
||||
var n = o(function(e) {
|
||||
if ("number" == typeof parseInt(e)) {
|
||||
var n = parseInt(e);
|
||||
if (n < 360 && n > 0)
|
||||
return [n, n]
|
||||
}
|
||||
if ("string" == typeof e)
|
||||
if (t[e]) {
|
||||
var s = t[e];
|
||||
if (s.hueRange)
|
||||
return s.hueRange
|
||||
} else if (e.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)) {
|
||||
var o = function(e) {
|
||||
e = 3 === (e = e.replace(/^#/, "")).length ? e.replace(/(.)/g, "$1$1") : e;
|
||||
var t = parseInt(e.substr(0, 2), 16) / 255,
|
||||
n = parseInt(e.substr(2, 2), 16) / 255,
|
||||
s = parseInt(e.substr(4, 2), 16) / 255,
|
||||
o = Math.max(t, n, s),
|
||||
r = o - Math.min(t, n, s),
|
||||
i = o ? r / o : 0;
|
||||
switch (o) {
|
||||
case t:
|
||||
return [(n - s) / r % 6 * 60 || 0, i, o];
|
||||
case n:
|
||||
return [60 * ((s - t) / r + 2) || 0, i, o];
|
||||
case s:
|
||||
return [60 * ((t - n) / r + 4) || 0, i, o]
|
||||
}
|
||||
};
|
||||
(e)[0];
|
||||
return [o, o]
|
||||
}
|
||||
return [0, 360]
|
||||
};
|
||||
(e.hue));
|
||||
n < 0 && (n = 360 + n);
|
||||
return n
|
||||
};
|
||||
(r), l = function(e, t) {
|
||||
if ("monochrome" === t.hue)
|
||||
return 0;
|
||||
if ("random" === t.luminosity)
|
||||
return o([0, 100]);
|
||||
var n = function(e) {
|
||||
return s(e).saturationRange
|
||||
};
|
||||
(e),
|
||||
r = n[0],
|
||||
i = n[1];
|
||||
switch (t.luminosity) {
|
||||
case "bright":
|
||||
r = 55;
|
||||
break;
|
||||
case "dark":
|
||||
r = i - 10;
|
||||
break;
|
||||
case "light":
|
||||
i = 55
|
||||
}
|
||||
return o([r, i])
|
||||
};
|
||||
(c, r),
|
||||
function(e, t, n) {
|
||||
var r = function(e, t) {
|
||||
for (var n = s(e).lowerBounds, o = 0; o < n.length - 1; o++) {
|
||||
var r = n[o][0],
|
||||
i = n[o][1],
|
||||
a = n[o + 1][0],
|
||||
c = n[o + 1][1];
|
||||
if (t >= r && t <= a) {
|
||||
var l = (c - i) / (a - r);
|
||||
return l * t + (i - l * r)
|
||||
}
|
||||
}
|
||||
return 0
|
||||
};
|
||||
(e, t),
|
||||
i = 100;
|
||||
switch (n.luminosity) {
|
||||
case "dark":
|
||||
i = r + 20;
|
||||
break;
|
||||
case "light":
|
||||
r = (i + r) / 2;
|
||||
break;
|
||||
case "random":
|
||||
r = 0,
|
||||
i = 100
|
||||
}
|
||||
return o([r, i])
|
||||
};
|
||||
(c, l, r)
|
||||
], r)
|
||||
};
|
||||
|
||||
function s(e) {
|
||||
for (var n in e >= 334 && e <= 360 && (e -= 360), t) {
|
||||
var s = t[n];
|
||||
if (s.hueRange && e >= s.hueRange[0] && e <= s.hueRange[1])
|
||||
return t[n]
|
||||
}
|
||||
return "Color not found"
|
||||
}
|
||||
|
||||
function o(t) {
|
||||
if (null === e)
|
||||
return Math.floor(t[0] + Math.random() * (t[1] + 1 - t[0]));
|
||||
var n = t[1] || 1,
|
||||
s = t[0] || 0,
|
||||
o = (e = (9301 * e + 49297) % 233280) / 233280;
|
||||
return Math.floor(s + o * (n - s))
|
||||
}
|
||||
|
||||
function r(e, n, s) {
|
||||
var o = s[0][0],
|
||||
r = s[s.length - 1][0],
|
||||
i = s[s.length - 1][1],
|
||||
a = s[0][1];
|
||||
t[e] = {
|
||||
hueRange: n,
|
||||
lowerBounds: s,
|
||||
saturationRange: [o, r],
|
||||
brightnessRange: [i, a]
|
||||
}
|
||||
}
|
||||
|
||||
function i(e) {
|
||||
var t = e[0];
|
||||
0 === t && (t = 1),
|
||||
360 === t && (t = 359),
|
||||
t /= 360;
|
||||
var n = e[1] / 100,
|
||||
s = e[2] / 100,
|
||||
o = Math.floor(6 * t),
|
||||
r = 6 * t - o,
|
||||
i = s * (1 - n),
|
||||
a = s * (1 - r * n),
|
||||
c = s * (1 - (1 - r) * n),
|
||||
l = 256,
|
||||
u = 256,
|
||||
d = 256;
|
||||
switch (o) {
|
||||
case 0:
|
||||
l = s,
|
||||
u = c,
|
||||
d = i;
|
||||
break;
|
||||
case 1:
|
||||
l = a,
|
||||
u = s,
|
||||
d = i;
|
||||
break;
|
||||
case 2:
|
||||
l = i,
|
||||
u = s,
|
||||
d = c;
|
||||
break;
|
||||
case 3:
|
||||
l = i,
|
||||
u = a,
|
||||
d = s;
|
||||
break;
|
||||
case 4:
|
||||
l = c,
|
||||
u = i,
|
||||
d = s;
|
||||
break;
|
||||
case 5:
|
||||
l = s,
|
||||
u = i,
|
||||
d = a
|
||||
}
|
||||
return [Math.floor(255 * l), Math.floor(255 * u), Math.floor(255 * d)]
|
||||
}
|
||||
|
||||
function a(e) {
|
||||
var t = e[0],
|
||||
n = e[1] / 100,
|
||||
s = e[2] / 100,
|
||||
o = (2 - n) * s;
|
||||
return [t, Math.round(n * s / (o < 1 ? o : 2 - o) * 1e4) / 100, o / 2 * 100]
|
||||
}
|
||||
return n()
|
||||
}
|
||||
@@ -120,7 +120,12 @@
|
||||
.dashboard-metric-dropdown .el-scrollbar__wrap{
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.dashboard-metric-dropdown>.el-cascader-panel{
|
||||
height:200px !important;
|
||||
}
|
||||
.metric-dropdown>.el-cascader-panel{
|
||||
height:200px !important;
|
||||
}
|
||||
.dashboard-metric-dropdown .el-cascader-menu:nth-child(1){
|
||||
min-width:80px !important;
|
||||
}
|
||||
@@ -132,7 +137,6 @@
|
||||
}
|
||||
|
||||
.label-cascader .el-cascader__tags{
|
||||
|
||||
max-height:50px;
|
||||
overflow-y:auto;
|
||||
right:5px !important;
|
||||
@@ -756,7 +760,7 @@ export default {
|
||||
value:item.name,
|
||||
label:item.name,
|
||||
children:[]
|
||||
}
|
||||
};
|
||||
if(valList && valList.length>0){
|
||||
valList.forEach((valuItem)=>{
|
||||
let disabled = false;
|
||||
@@ -767,7 +771,7 @@ export default {
|
||||
value:valuItem,
|
||||
label:valuItem,
|
||||
disabled: disabled,
|
||||
}
|
||||
};
|
||||
labelOption.children.push(valOption);
|
||||
});
|
||||
}
|
||||
@@ -997,7 +1001,7 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"]
|
||||
let labelValList = [];
|
||||
|
||||
Reference in New Issue
Block a user