diff --git a/src/assets/css/components/views/charts2/networkOverviewLine.scss b/src/assets/css/components/views/charts2/networkOverviewLine.scss index 03249c84..580f57b0 100644 --- a/src/assets/css/components/views/charts2/networkOverviewLine.scss +++ b/src/assets/css/components/views/charts2/networkOverviewLine.scss @@ -46,6 +46,9 @@ } } } + .link-traffic-select.line-select-metric { + margin-right: 20px; + } .line-select-metric,.line-select-reference-line { display: flex; align-items: center; @@ -126,7 +129,7 @@ flex: 1; padding-left: 19px; } - .total,.inbound,.outbound,.internal,.through,.other { + .total,.inbound,.outbound,.internal,.through,.other,.ingress,.egress { width: 14px; height: 14px; border-radius: 50%; @@ -137,10 +140,10 @@ .total { background: #00A7AB; } - .inbound { + .inbound,.ingress { background: #7FA054; } - .outbound { + .outbound,.egress { background: #35ADDA; } .internal { diff --git a/src/views/charts2/chart-tools.js b/src/views/charts2/chart-tools.js index 736c1736..fcdc9cfb 100644 --- a/src/views/charts2/chart-tools.js +++ b/src/views/charts2/chart-tools.js @@ -23,10 +23,10 @@ export const typeMapping = { linkMonitor: { linkBlock: 707, linkTrafficSankey: 708, - linkTrafficLine: 710 + linkTrafficLine: 105 }, dnsInsight: { - dnsTrafficLine: 704, + dnsTrafficLine: 106, dnsEventChart: 711, dnsRecentEvents: 605, dnsActiveMaliciousDomain: 604 diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue index e97a6237..ce894695 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue @@ -172,7 +172,11 @@ export default { timeFilter: { deep: true, handler (n) { - this.init(this.lineMetric, this.showMarkLine, 'active') + if (this.lineTab) { + this.init(this.lineMetric, this.showMarkLine, 'active') + } else { + this.init() + } } } }, @@ -466,33 +470,45 @@ export default { const dataIntegrationArray = [] if (stackedLineChartOption.series[0]) { const totalData = stackedLineChartOption.series[0].data.find(t => t[0] === time) // [time, value] - dataIntegrationArray.push(totalData) - totalData[2] = 0 + if (totalData) { + dataIntegrationArray.push(totalData) + totalData[2] = 0 + } } if (stackedLineChartOption.series[1]) { const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time) - dataIntegrationArray.push(inboundData) - inboundData[2] = 1 + if (inboundData) { + dataIntegrationArray.push(inboundData) + inboundData[2] = 1 + } } if (stackedLineChartOption.series[2]) { const outboundData = stackedLineChartOption.series[2].data.find(t => t[0] === time) - dataIntegrationArray.push(outboundData) - outboundData[2] = 2 + if (outboundData) { + dataIntegrationArray.push(outboundData) + outboundData[2] = 2 + } } if (stackedLineChartOption.series[3]) { const internalData = stackedLineChartOption.series[3].data.find(t => t[0] === time) - dataIntegrationArray.push(internalData) - internalData[2] = 3 + if (internalData) { + dataIntegrationArray.push(internalData) + internalData[2] = 3 + } } if (stackedLineChartOption.series[4]) { const throughData = stackedLineChartOption.series[4].data.find(t => t[0] === time) - dataIntegrationArray.push(throughData) - throughData[2] = 4 + if (throughData) { + dataIntegrationArray.push(throughData) + throughData[2] = 4 + } } if (stackedLineChartOption.series[5]) { const otherData = stackedLineChartOption.series[5].data.find(t => t[0] === time) - dataIntegrationArray.push(otherData) - otherData[2] = 5 + if (otherData) { + dataIntegrationArray.push(otherData) + otherData[2] = 5 + } } dataIntegrationArray.sort((a, b) => { return a[1] - b[1] }) const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index)