gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：pie treemap bar 添加legend 修改 stat刷新无效的问题

Browse Source
This commit is contained in:
zhangyu
2021-12-28 10:53:34 +08:00
parent 3c2d27b5aa
commit 210aea92f9
16 changed files with 239 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/components/chart/chart/chartAutotopology.vue
View File

@@ -38,7 +38,11 @@ export default {
topology
},
methods: {
initChart () {
this.queryAllProjectData()
},
queryAllProjectData () {
this.isInit = false
this.$get('monitor/project', { pageSize: -1 }).then(res => {
this.topologyLoading = true
const axiosAll = []

8
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -11,6 +11,7 @@
:chart-data="chartData"
:chart-info="chartInfo"
:legends="legends"
:series="series"
:is-fullscreen="isFullscreen"
></chart-legend>
</div>
@@ -80,7 +81,7 @@ export default {
initChart (chartOption = this.chartOption) {
const self = this
this.legends = []
chartOption.series = this.initBarData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
this.series = chartOption.series = this.initBarData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
if (this.isNoData) {
return
}
@@ -129,12 +130,13 @@ export default {
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
// eslint-disable-next-line vue/no-mutating-props
mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
s.data.push({
value: value,
realValue: value,
showValue: showValue,
name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name,
alias: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias,
name: legend.name,
alias: legend.alias,
labels: data.metric,
seriesIndex: expressionIndex,
dataIndex: dataIndex,

1
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -61,6 +61,7 @@ export default {
},
initGaugeData (chartInfo, originalDatas) {
this.gaugeData = []
this.isInit = false
return new Promise(resolve => {
let colorIndex = 0
originalDatas.forEach((originalData, expressionIndex) => {

1
nezha-fronted/src/components/chart/chart/chartMap.vue
View File

@@ -56,6 +56,7 @@ export default {
loadPromise = this.loadDataCenterMapData()
}
})
this.isInit = false
return loadPromise
}, 500)
},

5
nezha-fronted/src/components/chart/chart/chartPie.vue
View File

@@ -106,12 +106,13 @@ export default {
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
// eslint-disable-next-line vue/no-mutating-props
mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
s.data.push({
value: value,
realValue: value,
showValue: showValue,
name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name,
alias: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias,
name: legend.name,
alias: legend.alias,
labels: data.metric,
seriesIndex: expressionIndex,
dataIndex: dataIndex,

1
nezha-fronted/src/components/chart/chart/chartStat.vue
View File

@@ -137,6 +137,7 @@ export default {
item.width = width
}
})
this.isInit = false
},
resize () {
this.getLayout().then(layout => {

3
nezha-fronted/src/components/chart/chart/chartTable.vue
View File

@@ -87,6 +87,7 @@ export default {
this.tableData = arr
this.oldTableData = lodash.cloneDeep(arr)
this.$refs.dataTable && this.$refs.dataTable.doLayout()
this.isInit = false
}, 200)
},
initTableData (chartInfo, originalDatas) {
@@ -249,10 +250,8 @@ export default {
// 本地正序
asce (prop) {
return function (obj1, obj2) {
console.log(obj1, obj2)
const val1 = obj1.display[prop + 'display'].replace(/\s*/g, '')
const val2 = obj2.display[prop + 'display'].replace(/\s*/g, '')
console.log(val1, val2, val1 < val2)
if (val1 < val2) {
return -1
} else if (val1 > val2) {

1
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -43,7 +43,6 @@ export default {
return {
stackTotalColor: null,
isStack: false,
series: []
}
},
computed: {

10
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -11,6 +11,7 @@
:chart-data="chartData"
:chart-info="chartInfo"
:legends="legends"
:series="series"
:is-fullscreen="isFullscreen"
></chart-legend>
</div>
@@ -79,7 +80,7 @@ export default {
methods: {
initChart (chartOption = this.chartOption) {
this.legends = []
chartOption.series[0] = this.initTreeMapData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
this.series = chartOption.series = this.initTreeMapData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
chartOption.tooltip.formatter = this.formatterFunc
chartOption.tooltip.position = this.tooltipPosition
/* 使用setTimeout延迟渲染图表，避免样式错乱 */
@@ -104,12 +105,13 @@ export default {
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
// eslint-disable-next-line vue/no-mutating-props
this.chartOption.color && mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
s.data.push({
value: value,
realValue: value,
showValue: showValue,
name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name,
alias: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias,
name: legend.name,
alias: legend.alias,
labels: data.metric,
seriesIndex: expressionIndex,
dataIndex: dataIndex,
@@ -130,7 +132,7 @@ export default {
})
})
this.$emit('chartIsNoData', this.isNoData)
return s
return [s]
},
formatterFunc (params, ticket, callback) {
const self = this

113
nezha-fronted/src/components/chart/chart/legend.vue
View File

@@ -79,6 +79,15 @@ export default {
const curIsGrey = this.isGrey[index] // 当前legend的状态
const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
const echarts = getChart(this.chartId)
if (this.chartInfo.type === 'bar') {
this.clickLegendBar(legendName, index, hasGrey, curIsGrey, currentIsTheOnlyOneHighlight)
return
}
if (this.chartInfo.type === 'treemap') {
this.clickLegendTreemap(legendName, index, hasGrey, curIsGrey, currentIsTheOnlyOneHighlight)
return
}
if (echarts) {
if (!hasGrey) { // 1.除当前legend外全置灰
echarts.dispatchAction({
@@ -102,32 +111,86 @@ export default {
})
this.$set(this.isGrey, index, !this.isGrey[index])
}
// 处理点击后的 Y轴
const chartInfo = this.chartInfo
const dataArg = this.series.filter((seriesItem, seriesIndex) => !this.isGrey[seriesIndex])
const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
const maxValue = maxValueCopies.maxValue
const copies = maxValueCopies.copies
const unit = maxValueCopies.unit
const option = {
yAxis: {
minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
if (this.chartInfo.type !== 'pie' && this.chartInfo.type !== 'bar' && this.chartInfo.type !== 'treemap') {
// 处理点击后的 Y轴
const chartInfo = this.chartInfo
const dataArg = this.series.filter((seriesItem, seriesIndex) => !this.isGrey[seriesIndex])
const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
const maxValue = maxValueCopies.maxValue
const copies = maxValueCopies.copies
const unit = maxValueCopies.unit
const option = {
yAxis: {
minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
}
}
}
if (!maxValueCopies.copies) {
option.yAxis.min = 0
option.yAxis.max = 1
} else {
option.yAxis.max = undefined
}
if (unit.type == 'Time' || option.yAxis.maxInterval === 1) {
delete option.yAxis.maxInterval
}
getChart(this.chartId) && getChart(this.chartId).setOption({
yAxis: {
...option.yAxis
if (!maxValueCopies.copies) {
option.yAxis.min = 0
option.yAxis.max = 1
} else {
option.yAxis.max = undefined
}
if (unit.type == 'Time' || option.yAxis.maxInterval === 1) {
delete option.yAxis.maxInterval
}
getChart(this.chartId) && getChart(this.chartId).setOption({
yAxis: {
...option.yAxis
}
})
}
}
},
clickLegendBar (legendName, index, hasGrey, curIsGrey, currentIsTheOnlyOneHighlight) {
const echarts = getChart(this.chartId)
if (echarts) {
let data = []
const xAxis = {
data: []
}
data = lodash.cloneDeep(this.series)
if (!hasGrey) { // 1.除当前legend外全置灰
this.isGrey = this.isGrey.map((g, i) => i !== index)
} else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
this.isGrey = this.isGrey.map(() => false)
} else { // 对应高亮
this.$set(this.isGrey, index, !this.isGrey[index])
}
data[0].data = data[0].data.filter((item, i) => !this.isGrey[i])
xAxis.data = data[0].data.map(item => {
if (this.chartInfo.param.text == 'all' || this.chartInfo.param.text == 'legend') {
return item.name
} else {
return ''
}
})
echarts.setOption({
series: data,
xAxis: {
data: xAxis.data
}
})
}
},
clickLegendTreemap (legendName, index, hasGrey, curIsGrey, currentIsTheOnlyOneHighlight) {
const echarts = getChart(this.chartId)
if (echarts) {
let data = []
const xAxis = {
data: []
}
data = lodash.cloneDeep(this.series)
if (!hasGrey) { // 1.除当前legend外全置灰
this.isGrey = this.isGrey.map((g, i) => i !== index)
} else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
this.isGrey = this.isGrey.map(() => false)
} else { // 对应高亮
this.$set(this.isGrey, index, !this.isGrey[index])
}
data[0].data = data[0].data.filter((item, i) => !this.isGrey[i])
echarts.setOption({
series: data
})
}
},
@@ -181,7 +244,7 @@ export default {
unit,
oldDot
}
},
}
},
watch: {
legends (n) {

3
nezha-fronted/src/components/chart/chart/options/chartGauge.js
View File

@@ -9,6 +9,9 @@ const chartGaugeOption = {
appendToBody: true,
className: 'chart-gauge'
},
legend: {
show: false
},
series: [
{
type: 'gauge',

1
nezha-fronted/src/components/chart/chartMixin.js
View File

@@ -15,6 +15,7 @@ export default {
},
chartId: '',
isNoData: true,
series: []
}
},
props: {

28
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -385,6 +385,7 @@
:label="$t('dashboard.panel.chartForm.legendValues')"
class="form-item--half-width"
prop="param.legend.values"
v-if="isShowLegendVlaues(chartConfig.type)"
>
<el-select
id="chart-box-legend-value"
@@ -802,11 +803,8 @@ export default {
})
break
case 'stat':
case 'bar':
case 'treemap':
case 'guage':
case 'pie':
if (this.oldType === 'stat' || this.oldType === 'bar' || this.oldType === 'treemap' || this.oldType === 'guage' || this.oldType === 'pie') {
if (this.oldType === 'stat' || this.oldType === 'guage') {
break
}
this.chartConfig.param = {
@@ -824,6 +822,28 @@ export default {
}
}
break
case 'bar':
case 'treemap':
case 'pie':
if (this.oldType === 'bar' || this.oldType === 'treemap' || this.oldType === 'pie') {
break
}
this.chartConfig.param = {
nullType: this.chartConfig.param.nullType,
link: this.chartConfig.param.link,
statistics: 'last',
text: 'value',
valueMapping: [],
legend: { placement: 'bottom', values: [], show: true },
min: 0,
max: 100,
enable: {
legend: true,
valueMapping: false,
thresholds: false
}
}
break
case 'table':
if (this.oldType === 'table') {
break

3
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -436,6 +436,9 @@ export default {
if (!this.editChart.param.link) {
this.$set(this.editChart.param, 'link', '')
}
if (this.editChart.param.enable.legend && !this.editChart.param.legend) {
this.editChart.param.legend = { placement: 'bottom', values: [], show: true }
}
}
}
},

15
nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
View File

@@ -79,17 +79,26 @@ export default {
case 'line':
case 'area':
case 'point':
case 'treemap':
case 'pie':
case 'bar':
return true
case 'table':
case 'stat':
case 'bar':
case 'guage':
case 'treemap':
case 'pie':
return false
default: return false
}
},
isShowLegendVlaues (type) {
switch (type) {
case 'line':
case 'area':
case 'point':
return true
default: return false
}
},
isShowValueMapping (type) {
switch (type) {
case 'line':

105
nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
View File

@@ -278,7 +278,67 @@
</el-select>
</el-form-item>
</div>
<!--legend-->
<div v-if="isShowLegend(chartConfig.type)">
<!--legendConfig-->
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.legendConfig')}}</span>
<el-switch v-model="chartConfig.param.enable.legend" size="small" @change="change"></el-switch>
</div>
<transition name="el-zoom-in-top">
<div
v-if="chartConfig.param.enable.legend"
class="form-items--half-width-group"
>
<el-form-item
:label="$t('dashboard.panel.chartForm.legendPosition')"
class="form-item--half-width"
prop="param.legend.placement"
>
<el-select
id="chart-box-legend-show"
v-model="chartConfig.param.legend.placement"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option
v-for="item in legendPositionList"
:key="item.value"
:label="$t(item.label)"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item
:label="$t('dashboard.panel.chartForm.legendValues')"
class="form-item--half-width"
prop="param.legend.values"
v-if="isShowLegendVlaues(chartConfig.type)"
>
<el-select
id="chart-box-legend-value"
v-model="chartConfig.param.legend.values"
multiple
collapse-tags
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option
v-for="item in statisticsList"
:key="item.value"
:label="$t(item.label)"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</div>
</transition>
</div>
<!-- table column-->
<div v-if="isTable(chartConfig.type)">
<div class="form__sub-title">
@@ -590,38 +650,45 @@ export default {
chartTypeChange (type) {
switch (type) {
case 'stat':
case 'bar':
case 'pie':
case 'guage':
case 'treemap':
if (this.oldType !== 'table') {
if (this.oldType === 'stat' || this.oldType === 'guage') {
break
}
this.chartConfig.param = {
nullType: this.chartConfig.param.nullType,
link: this.chartConfig.param.link,
refer: 1,
nullType: 'null',
statistics: 'last',
valueMapping: [],
text: 'value',
valueMapping: [],
min: 0,
max: 100,
enable: {
legend: true,
valueMapping: false,
thresholds: false
}
}
break
case 'bar':
case 'treemap':
case 'pie':
if (this.oldType === 'bar' || this.oldType === 'treemap' || this.oldType === 'pie') {
break
}
this.chartConfig.param = {
nullType: this.chartConfig.param.nullType,
link: this.chartConfig.param.link,
statistics: 'last',
text: 'value',
valueMapping: [],
legend: { placement: 'bottom', values: [], show: true },
min: 0,
max: 100,
enable: {
legend: true,
valueMapping: false,
thresholds: false
},
datasource: [{
name: 'System',
type: '',
systemGroup: '',
systemSelect: '',
group: '',
select: '',
limit: 100,
sort: 'desc'
}
]
}
break
case 'table':