diff --git a/src/views/charts2/charts/NetworkOverviewApps.vue b/src/views/charts2/charts/NetworkOverviewApps.vue
index 7f76b964..a69b4ac3 100644
--- a/src/views/charts2/charts/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/NetworkOverviewApps.vue
@@ -24,7 +24,7 @@
           </div>
           <div class="app-card-title-more" v-ele-click-outside="clickOutSide">
             <span><i class="cn-icon cn-icon-more-dark" @click="moreChange(app)"></i></span>
-            <span class="app-card-title-more-delete" @click="del(app, index)" v-show="app.moreName"><i class="cn-icon cn-icon-delete"></i>{{$t('overall.delete')}}</span>
+            <span class="app-card-title-more-delete" @click="del(app, index)" v-show="app.moreOptions"><i class="cn-icon cn-icon-delete"></i>{{$t('overall.delete')}}</span>
           </div>
         </div>
         <div class="app-card__bodys">
@@ -115,6 +115,7 @@ import { get, put } from '@/utils/http'
 import { api } from '@/utils/api'
 import _ from 'lodash'
 import { getSecond } from '@/utils/date-util'
+import { appTestData, appPrevTestData, providerTestData, providerPrevTestData } from './appsTestData'
 export default {
   name: 'NetworkOverviewApps',
   props: {
@@ -168,339 +169,90 @@ export default {
     unitConvert,
     clickOutSide () {
       this.appData.forEach(t => {
-        t.moreName = false
+        t.moreOptions = false
       })
     },
     init () {
-      this.appDataQuery(this.appData)
-    },
-    appDataQuery (data) {
-      const appLabels = []
-      const providerLabels = []
-      let appData = []
-      let providerData = []
-      data.forEach(t => {
-        if (t.type === 'app') {
-          appLabels.push(t)
-        } else if (t.type === 'provider') {
-          providerLabels.push(t)
+      // this.appDataQuery(this.appData)
+      const appCards = []
+      const providerCards = []
+      this.appData.forEach(d => {
+        if (d.type === 'app') {
+          appCards.push(d)
+        } else if (d.type === 'provider') {
+          providerCards.push(d)
         }
       })
-      if (appLabels) {
-        const params = {
+      let prevRequest
+      let request
+      let params
+      if (appCards.length > 0) {
+        params = {
           startTime: getSecond(this.timeFilter.startTime),
           endTime: getSecond(this.timeFilter.endTime),
-          appLabels: appLabels.map(item => { return item.name }).join(',')
+          appLabels: appCards.map(item => {
+            return item.name
+          }).join(',')
         }
-        const app1 = get(api.netWorkOverview.applicationCycleTrafficTotal, params)
-        const app2 = get(api.netWorkOverview.applicationTrafficAnalysis, params)
-        this.resultTotal = [
-          {
-            type: 'bytes',
-            analysis: {
-              rate: 2,
-              total: 3145435
-            }
-          },
-          {
-            type: 'packets',
-            analysis: {
-              rate: 2,
-              total: 3245435
-            }
-          },
-          {
-            type: 'sessions',
-            analysis: {
-              rate: 2,
-              total: 23345
-            }
-          }
-        ]
-        this.resultAnalysis = [
-          {
-            type: 'bytes',
-            l11: {
-              analysis: {
-                rate: 2
-              },
-              values: [
-                [
-                  1435781430781,
-                  '12'
-                ],
-                [
-                  1435781431781,
-                  '13'
-                ]
-              ]
-            },
-            a0: {
-              analysis: {
-                rate: 4
-              },
-              values: [
-                [
-                  1435781430781,
-                  '12'
-                ],
-                [
-                  1435781431781,
-                  '31'
-                ]
-              ]
-            }
-          },
-          {
-            type: 'packets',
-            l11: {
-              analysis: {
-                rate: 3
-              },
-              values: [
-                [
-                  1435781430781,
-                  '13'
-                ],
-                [
-                  1435781431781,
-                  '21'
-                ]
-              ]
-            },
-            a0: {
-              analysis: {
-                rate: 3
-              },
-              values: [
-                [
-                  1435781430781,
-                  '11'
-                ],
-                [
-                  1435781431781,
-                  '21'
-                ]
-              ]
-            }
-          },
-          {
-            type: 'sessions',
-            l11: {
-              analysis: {
-                rate: 2
-              },
-              values: [
-                [
-                  1435781430781,
-                  '1'
-                ],
-                [
-                  1435781431781,
-                  '1'
-                ]
-              ]
-            }
-          }
-        ]
-        this.resultTotal.forEach(t => {
-          this.resultAnalysis.forEach((v, i) => {
-            if (t.type === v.type) {
-              this.resultAnalysis[i].total = t
-            }
-          })
-        })
-        appData = this.resultAnalysis
-        Promise.all([app1, app2]).then(res => {
-          if (res.code === 200) {
-            console.log(1)
-          }
-        })
-        this.appData.forEach((app, i) => {
-          if (app.type === 'app') {
-            appData.forEach(t => {
-              if (t.type === this.appShowType && this.appShowType === 'bytes') {
-                // app.value = t.total.analysis.rate === 0 ? 0 : (t[app.name].analysis.rate - t.total.analysis.rate) / t.total.analysis.rate
-                app.rate = t[app.name].analysis.rate
-                app.pRate = t.total.analysis.rate
-                app.total = t.total.analysis.total
-                app.lineData = t[app.name].values.map(v => [Number(v[0]), Number(v[1]), 'time'])
-                app.trend = this.periodicJudgmentCalculationChange(app.rate, app.pRate).value
-              }
-            })
-            this.initChart(app)
-          }
-        })
+        prevRequest = get(api.netWorkOverview.applicationCycleTrafficTotal, params)
+        request = get(api.netWorkOverview.applicationTrafficAnalysis, params)
+        this.handleData(prevRequest, request, 'app')
       }
-      if (providerLabels) {
-        const params = {
+      if (providerCards.length > 0) {
+        params = {
           startTime: getSecond(this.timeFilter.startTime),
           endTime: getSecond(this.timeFilter.endTime),
-          appCompanies: providerLabels.map(item => { return item.name }).join(',')
+          appLabels: providerCards.map(item => {
+            return item.name
+          }).join(',')
         }
-        const app1 = get(api.netWorkOverview.appCompanyCycleTrafficTotal, params)
-        const app2 = get(api.netWorkOverview.appCompanyTrafficAnalysis, params)
-        this.resultTotal = [
-          {
-            type: 'bytes',
-            analysis: {
-              rate: 20,
-              total: 3245435
-            }
-          },
-          {
-            type: 'packets',
-            analysis: {
-              rate: 2,
-              total: 3245435
-            }
-          },
-          {
-            type: 'sessions',
-            analysis: {
-              rate: 2,
-              total: 23345
-            }
+        prevRequest = get(api.netWorkOverview.appCompanyCycleTrafficTotal, params)
+        request = get(api.netWorkOverview.appCompanyTrafficAnalysis, params)
+        this.handleData(prevRequest, request, 'provider')
+      }
+    },
+    handleData (prevRequest, request, _t) {
+      Promise.all([prevRequest, request]).then(res => {
+        // if (res[0].code === 200 && res[1].code === 200) {
+        if (true) {
+          // const prevData = res[0].data.result
+          // const data = res[1].data.result
+          let prevData
+          let data
+          if (_t === 'app') {
+            prevData = appPrevTestData
+            data = appTestData
+          } else if (_t === 'provider') {
+            prevData = providerPrevTestData
+            data = providerTestData
           }
-        ]
-        this.resultAnalysis = [
-          {
-            type: 'bytes',
-            l11: {
-              analysis: {
-                rate: 2
-              },
-              values: [
-                [
-                  1435781430781,
-                  '12'
-                ],
-                [
-                  1435781431781,
-                  '13'
-                ]
-              ]
-            },
-            a0: {
-              analysis: {
-                rate: 6
-              },
-              values: [
-                [
-                  1435781430781,
-                  '12'
-                ],
-                [
-                  1435781431781,
-                  '31'
-                ]
-              ]
-            },
-            d3: {
-              analysis: {
-                rate: 8
-              },
-              values: [
-                [
-                  1435781430781,
-                  '121'
-                ],
-                [
-                  1435781431781,
-                  '131'
-                ],
-                [
-                  1435781432781,
-                  '321'
-                ],
-                [
-                  1435781433781,
-                  '331'
-                ]
-              ]
-            }
-          },
-          {
-            type: 'packets',
-            l11: {
-              analysis: {
-                rate: 3
-              },
-              values: [
-                [
-                  1435781430781,
-                  '13'
-                ],
-                [
-                  1435781431781,
-                  '21'
-                ]
-              ]
-            },
-            a0: {
-              analysis: {
-                rate: 3
-              },
-              values: [
-                [
-                  1435781430781,
-                  '11'
-                ],
-                [
-                  1435781431781,
-                  '21'
-                ]
-              ]
-            }
-          },
-          {
-            type: 'sessions',
-            l11: {
-              analysis: {
-                rate: 2
-              },
-              values: [
-                [
-                  1435781430781,
-                  '1'
-                ],
-                [
-                  1435781431781,
-                  '1'
-                ]
-              ]
-            }
+          let toCompareType = 'bytes'
+          if (this.metricFilter === 'Sessions/s') {
+            toCompareType = 'sessions'
+          } else if (this.metricFilter === 'Packets/s') {
+            toCompareType = 'packets'
           }
-        ]
-        this.resultTotal.forEach(t => {
-          this.resultAnalysis.forEach((v, i) => {
-            if (t.type === v.type) {
-              this.resultAnalysis[i].total = t
+          data.forEach(d => {
+            if (d.type === toCompareType) {
+              const prevTypeData = prevData.find(p => p.type === toCompareType)
+              Object.keys(d).forEach(app => {
+                if (app !== 'type') {
+                  this.appData.forEach(d2 => {
+                    if (d2.type === _t && d2.name === app) {
+                      d2.rate = d[app].analysis.rate
+                      d2.pRate = prevTypeData ? (prevTypeData[app] ? prevTypeData[app].rate : 0) : 0
+                      d2.total = d[app].analysis.total
+                      d2.lineData = d[app].values.map(v => [Number(v[0]), Number(v[1]), 'time'])
+                      d2.trend = this.periodicJudgmentCalculationChange(d2.rate, d2.pRate).value
+                      this.initChart(d2)
+                    }
+                  })
+                }
+              })
             }
           })
-        })
-        Promise.all([app1, app2]).then(res => {
-          if (res.code === 200) {
-            console.log(1)
-          }
-        })
-        providerData = this.resultAnalysis
-        this.appData.forEach((app, i) => {
-          if (app.type === 'provider') {
-            providerData.forEach(t => {
-              if (t.type === this.appShowType && this.appShowType === 'bytes') {
-                // app.value = t.total.analysis.rate === 0 ? 0 : (t[app.name].analysis.rate - t.total.analysis.rate) / t.total.analysis.rate
-                app.rate = t[app.name].analysis.rate
-                app.pRate = t.total.analysis.rate
-                app.total = t.total.analysis.total
-                app.lineData = t[app.name].values.map(v => [Number(v[0]), Number(v[1]), 'time'])
-                app.trend = this.periodicJudgmentCalculationChange(app.rate, app.pRate).value
-              }
-            })
-            this.initChart(app)
-          }
-        })
-      }
+        }
+      })
     },
     metricChange (value) {
       if (value === 'Bits/s') {
@@ -705,7 +457,7 @@ export default {
     moreChange (app) {
       this.appData.forEach(t => {
         if (t.name === app.name && t.type === app.type) {
-          t.moreName = !t.moreName
+          t.moreOptions = !t.moreOptions
         }
       })
     },
@@ -713,12 +465,13 @@ export default {
       const periodicData = {}
       if (period > pperiod) {
         periodicData.value = 'up'
-        periodicData.total = (period - pperiod) / pperiod
+        periodicData.total = pperiod === 0 ? 0 : (period - pperiod) / pperiod
       } else if (period < pperiod) {
         periodicData.value = 'down'
         periodicData.total = (pperiod - period) / pperiod
       } else {
         periodicData.value = ''
+        periodicData.total = 0
       }
       return periodicData
     },
@@ -737,11 +490,9 @@ export default {
         app = apps.find(p => p.user === 'default')
       }
       this.appData = app.list
-    }
-    this.timer = setTimeout(() => {
       this.init()
-    }, 100)
-    window.addEventListener('resize', this.resize)
+      window.addEventListener('resize', this.resize)
+    }
   }
 }
 </script>
diff --git a/src/views/charts2/charts/NpmMap.vue b/src/views/charts2/charts/NpmMap.vue
index 1b0c7233..10274dd5 100644
--- a/src/views/charts2/charts/NpmMap.vue
+++ b/src/views/charts2/charts/NpmMap.vue
@@ -40,25 +40,83 @@
 </template>
 
 <script>
-import mapTestData from '@/views/charts2/charts/mapTestData'
+import { mapData, mapData2, drillDownData } from '@/views/charts2/charts/mapTestData'
 import { shallowRef } from 'vue'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import { getGeoData } from '@/utils/tools'
-import { storageKey } from '@/utils/constants'
+import { storageKey, unitTypes } from '@/utils/constants'
 import locationOptions from '@/views/charts2/charts/locationOptions'
+import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
 
 export default {
   name: 'NpmMap',
   data () {
     return {
       locationOptions,
-      mapTestData,
+      mapData,
+      mapData2,
+      drillDownData,
       myChart: null,
       polygonSeries: null,
+      countrySeries: null,
+      worldImageSeries: null,
+      countryImageSeries: null,
       // Server | Client
       trafficDirection: 'Server',
-      location: ''
+      location: '',
+      keyMapping: [
+        {
+          key: 'sessions',
+          label: this.$t('overall.sessions'),
+          unitType: unitTypes.number
+        },
+        {
+          key: 'establishLatency',
+          label: this.$t('networkAppPerformance.tripTime'),
+          unitType: unitTypes.time
+        },
+        {
+          key: 'httpResponseLatency',
+          label: this.$t('networkAppPerformance.httpResponse'),
+          unitType: unitTypes.time
+        },
+        {
+          key: 'sslConLatency',
+          label: this.$t('networkAppPerformance.sslResponse'),
+          unitType: unitTypes.time
+        },
+        {
+          key: 'sequenceGapLossPercent',
+          label: this.$t('networkAppPerformance.packetLossRate'),
+          unitType: unitTypes.percent
+        },
+        {
+          key: 'pktRetransPercent',
+          label: this.$t('networkAppPerformance.retransmissionRate'),
+          unitType: unitTypes.percent
+        },
+        {
+          key: 'packets',
+          label: this.$t('overall.packets'),
+          unitType: unitTypes.number
+        },
+        {
+          key: 'sentBytes',
+          label: this.$t('overall.sent'),
+          unitType: unitTypes.byte
+        },
+        {
+          key: 'receivedBytes',
+          label: this.$t('overall.received'),
+          unitType: unitTypes.byte
+        },
+        {
+          key: 'count',
+          label: this.$t('overall.count'),
+          unitType: unitTypes.number
+        }
+      ]
     }
   },
   methods: {
@@ -74,6 +132,82 @@ export default {
       }
       this.myChart = shallowRef(chart)
       this.polygonSeries = shallowRef(this.polygonSeriesFactory())
+      this.worldImageSeries = shallowRef(this.imageSeriesFactory())
+      // 渲染
+      this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
+      this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
+        const countryId = ev.target.dataItem.dataContext.id
+        ev.target.isHover = false
+        if (countryId) {
+          const targetMapObject = this.polygonSeries.getPolygonById(countryId)
+          targetMapObject.series.chart.zoomToMapObject(targetMapObject)
+          const geoData = getGeoData(countryId)
+          if (geoData) {
+            this.countrySeries = shallowRef(this.polygonSeriesFactory())
+            this.countrySeries.geodata = geoData
+            this.countryImageSeries = shallowRef(this.imageSeriesFactory())
+            this.polygonSeries.hide()
+            this.worldImageSeries.hide()
+            const country = ev.target.dataItem.dataContext.name
+            const queryParams = { ...this.queryParams, ipLocationCountry: country }
+            const chartData = this.drillDownData
+            this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
+          }
+        }
+      })
+    },
+    loadAm4ChartMap (polygonSeries, imageSeries, country, chartData) {
+      // chartData不为空是下钻
+      if (chartData) {
+        this.$emit('showLoading', true)
+      }
+      try {
+        // 清除数据
+        polygonSeries.data.splice(0)
+
+        // 清除legend
+        this.myChart.children.each((s, i) => {
+          if (s && s.className !== 'Container') {
+            this.myChart.children.removeIndex(i)
+          }
+        })
+
+        this.showMapBackButton = !!country
+        const data = chartData || this.mapData
+        imageSeries.data = data.map(r => ({
+          ...this.convertMapData(r),
+          id: r.ipLocationId || r.Country,
+          dnsServerRole: r.dnsServerRole,
+          name: r.ipLocationCity || r.ipLocationProvince || r.ipLocationCountry || r.Country,
+          desc: 'hehe',
+          color: '#7E9F54',
+          border: '#7E9F54'
+        }))
+      } catch (e) {
+        console.error(e)
+      } finally {
+        if (chartData) {
+          setTimeout(() => {
+            this.$emit('showLoading', false)
+          }, 200)
+        }
+      }
+    },
+    convertMapData (data) {
+      const converted = {}
+      this.keyMapping.forEach(mapping => {
+        if (data[mapping.key] || data[mapping.key] === 0) {
+          converted[mapping.key] = Number(data[mapping.key])
+          converted[`${mapping.key}Label`] = mapping.label
+          converted[`${mapping.key}ShowValue`] = valueToRangeValue(data[mapping.key], mapping.unitType).join(' ')
+          converted[`${mapping.key}Display`] = 'block'
+        } else {
+          converted[mapping.key] = ''
+          converted[`${mapping.key}Label`] = ''
+          converted[`${mapping.key}Display`] = 'none'
+        }
+      })
+      return converted
     },
     polygonSeriesFactory () {
       const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())
@@ -120,7 +254,7 @@ export default {
       circle.propertyFields.fill = 'color'
       circle.propertyFields.stroke = 'border'
       circle.strokeWidth = 1
-      circle.tooltipHTML = this.generatePolygonTooltipHTML()
+      // circle.tooltipHTML = this.generatePolygonTooltipHTML()
       imageSeries.tooltip.getFillFromObject = false
       imageSeries.tooltip.background.fill = am4Core.color('#41495D')
       imageSeries.tooltip.background.filters.clear()
@@ -129,8 +263,8 @@ export default {
       imageSeries.heatRules.push({
         target: circle,
         property: 'radius',
-        min: 6,
-        max: 25,
+        min: 15,
+        max: 15,
         dataField: 'value'
       })
 
diff --git a/src/views/charts2/charts/appsTestData.js b/src/views/charts2/charts/appsTestData.js
new file mode 100644
index 00000000..8c69623d
--- /dev/null
+++ b/src/views/charts2/charts/appsTestData.js
@@ -0,0 +1,284 @@
+export const appTestData = [
+  {
+    "type": "bytes",
+    "l11": {
+      "analysis": {
+        "rate": 2,
+        "total":2245435
+      },
+      "values": [
+        [
+          1435781430781,
+          3
+        ],
+        [
+          1435781431781,
+          2
+        ]
+      ]
+    },
+    "a0": {
+      "analysis": {
+        "rate": 2,
+        "total":3245435
+      },
+      "values": [
+        [
+          1435781430781,
+          1
+        ],
+        [
+          1435781431781,
+          1
+        ]
+      ]
+    }
+  },
+  {
+    "type": "packets",
+    "l11": {
+      "analysis": {
+        "rate": 3,
+        "total":4245435
+      },
+      "values": [
+        [
+          1435781430781,
+          4
+        ],
+        [
+          1435781431781,
+          5
+        ]
+      ]
+    },
+    "a0": {
+      "analysis": {
+        "rate": 3,
+        "total":2245435
+      },
+      "values": [
+        [
+          1435781430781,
+          2
+        ],
+        [
+          1435781431781,
+          1
+        ]
+      ]
+    }
+  },
+  {
+    "type": "sessions",
+    "l11": {
+      "analysis": {
+        "rate": 2,
+        "total": 2245435
+      },
+      "values": [
+        [
+          1435781430781,
+          3
+        ],
+        [
+          1435781431781,
+          8
+        ]
+      ]
+    },
+    "a0": {
+      "analysis": {
+        "rate": 3,
+        "total": 3245435
+      },
+      "values": [
+        [
+          1435781430781,
+          1
+        ],
+        [
+          1435781431781,
+          1
+        ]
+      ]
+    }
+  }
+]
+export const appPrevTestData = [
+  {
+    "type": "bytes",
+    "l11": {
+      "rate": 2,
+      "total":3245435
+    },
+    "a0": {
+      "rate": 3,
+      "total":4245435
+    }
+  },
+  {
+    "type": "packets",
+    "l11": {
+      "rate": 2,
+      "total":3245435
+    },
+    "a0": {
+      "rate": 4,
+      "total":4245435
+    }
+  },
+  {
+    "type": "sessions",
+    "l11": {
+      "rate": 3,
+      "total":233451
+    },
+    "a0": {
+      "rate": 3,
+      "total":4245435
+    }
+  }
+]
+export const providerTestData = [
+  {
+    "type": "bytes",
+    "d3": {
+      "analysis": {
+        "rate": 4,
+        "total":4245435
+      },
+      "values": [
+        [
+          1435781430781,
+          "1"
+        ],
+        [
+          1435781431781,
+          "1"
+        ]
+      ]
+    },
+    "a0": {
+      "analysis": {
+        "rate": 2,
+        "total":3245435
+      },
+      "values": [
+        [
+          1435781430781,
+          1
+        ],
+        [
+          1435781431781,
+          2
+        ]
+      ]
+    }
+  },
+  {
+    "type": "packets",
+    "d3": {
+      "analysis": {
+        "rate": 3,
+        "total": 1245435
+      },
+      "values": [
+        [
+          1435781430781,
+          2
+        ],
+        [
+          1435781431781,
+          1
+        ]
+      ]
+    },
+    "a0": {
+      "analysis": {
+        "rate": 3,
+        "total": 3245435
+      },
+      "values": [
+        [
+          1435781430781,
+          5
+        ],
+        [
+          1435781431781,
+          3
+        ]
+      ]
+    }
+  },
+  {
+    "type": "sessions",
+    "d3": {
+      "analysis": {
+        "rate": 2,
+        "total":2245435
+      },
+      "values": [
+        [
+          1435781430781,
+          "1"
+        ],
+        [
+          1435781431781,
+          "1"
+        ]
+      ]
+    },
+    "a0": {
+      "analysis": {
+        "rate": 3,
+        "total": 3245435
+      },
+      "values": [
+        [
+          1435781430781,
+          1
+        ],
+        [
+          1435781431781,
+          3
+        ]
+      ]
+    }
+  }
+]
+export const providerPrevTestData = [
+  {
+    "type": "bytes",
+    "d3": {
+      "rate": 2,
+      "total":2245435
+    },
+    "a0": {
+      "rate": 3,
+      "total":4245435
+    }
+  },
+  {
+    "type": "packets",
+    "d3": {
+      "rate": 2,
+      "total":3245435
+    },
+    "a0": {
+      "rate": 4,
+      "total":4245435
+    }
+  },
+  {
+    "type": "sessions",
+    "d3": {
+      "rate": 3,
+      "total":233451
+    },
+    "a0": {
+      "rate": 3,
+      "total":4245435
+    }
+  }
+]
diff --git a/src/views/charts2/charts/mapTestData.js b/src/views/charts2/charts/mapTestData.js
index a4343856..5df827d3 100644
--- a/src/views/charts2/charts/mapTestData.js
+++ b/src/views/charts2/charts/mapTestData.js
@@ -1,630 +1,428 @@
-export default {
-  "msg": "OK",
-  "code": 200,
-  "data": {
-    "result": [
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "Paraguay",
-        "serverId": "PY",
-        "packets": "1",
-        "bytes": "106",
-        "sentBytes": "106"
-      },
-      {
-        "receivedBytes": "27435",
-        "sessions": "119",
-        "serverCountry": "Sweden",
-        "serverId": "SE",
-        "packets": "339",
-        "bytes": "53044",
-        "sentBytes": "25609"
-      },
-      {
-        "receivedBytes": "40925",
-        "sessions": "60",
-        "serverCountry": "Malaysia",
-        "serverId": "MY",
-        "packets": "888",
-        "bytes": "77424",
-        "sentBytes": "36499"
-      },
-      {
-        "receivedBytes": "25755",
-        "sessions": "52",
-        "serverCountry": "Russia",
-        "serverId": "",
-        "packets": "305",
-        "bytes": "50811",
-        "sentBytes": "25056"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "Nigeria",
-        "serverId": "NG",
-        "packets": "1",
-        "bytes": "106",
-        "sentBytes": "106"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "11",
-        "serverCountry": "Romania",
-        "serverId": "RO",
-        "packets": "11",
-        "bytes": "898",
-        "sentBytes": "898"
-      },
-      {
-        "receivedBytes": "3840",
-        "sessions": "2",
-        "serverCountry": "Bahrain",
-        "serverId": "BH",
-        "packets": "180",
-        "bytes": "11040",
-        "sentBytes": "7200"
-      },
-      {
-        "receivedBytes": "8006",
-        "sessions": "7",
-        "serverCountry": "Chile",
-        "serverId": "CL",
-        "packets": "35",
-        "bytes": "11307",
-        "sentBytes": "3301"
-      },
-      {
-        "receivedBytes": "1313470",
-        "sessions": "229",
-        "serverCountry": "Japan",
-        "serverId": "JP",
-        "packets": "3391",
-        "bytes": "1505018",
-        "sentBytes": "191548"
-      },
-      {
-        "receivedBytes": "504",
-        "sessions": "11",
-        "serverCountry": "Turkey",
-        "serverId": "TR",
-        "packets": "19",
-        "bytes": "2016",
-        "sentBytes": "1512"
-      },
-      {
-        "receivedBytes": "1086",
-        "sessions": "11",
-        "serverCountry": "Finland",
-        "serverId": "FI",
-        "packets": "31",
-        "bytes": "2495",
-        "sentBytes": "1409"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "3",
-        "serverCountry": "Mongolia",
-        "serverId": "MN",
-        "packets": "3",
-        "bytes": "318",
-        "sentBytes": "318"
-      },
-      {
-        "receivedBytes": "1064",
-        "sessions": "8",
-        "serverCountry": "Hungary",
-        "serverId": "HU",
-        "packets": "27",
-        "bytes": "2331",
-        "sentBytes": "1267"
-      },
-      {
-        "receivedBytes": "17568",
-        "sessions": "101",
-        "serverCountry": "Brazil",
-        "serverId": "BR",
-        "packets": "240",
-        "bytes": "40517",
-        "sentBytes": "22949"
-      },
-      {
-        "receivedBytes": "4564",
-        "sessions": "3",
-        "serverCountry": "Kuwait",
-        "serverId": "KW",
-        "packets": "46",
-        "bytes": "7100",
-        "sentBytes": "2536"
-      },
-      {
-        "receivedBytes": "46123",
-        "sessions": "95",
-        "serverCountry": "Viet Nam",
-        "serverId": "VN",
-        "packets": "387",
-        "bytes": "72673",
-        "sentBytes": "26550"
-      },
-      {
-        "receivedBytes": "126",
-        "sessions": "3",
-        "serverCountry": "Belgium",
-        "serverId": "BE",
-        "packets": "4",
-        "bytes": "394",
-        "sentBytes": "268"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "2",
-        "serverCountry": "Ecuador",
-        "serverId": "EC",
-        "packets": "2",
-        "bytes": "212",
-        "sentBytes": "212"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "Morocco",
-        "serverId": "MA",
-        "packets": "1",
-        "bytes": "106",
-        "sentBytes": "106"
-      },
-      {
-        "receivedBytes": "70985",
-        "sessions": "140",
-        "serverCountry": "India",
-        "serverId": "IN",
-        "packets": "558",
-        "bytes": "123995",
-        "sentBytes": "53010"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "2",
-        "serverCountry": "Israel",
-        "serverId": "IL",
-        "packets": "2",
-        "bytes": "212",
-        "sentBytes": "212"
-      },
-      {
-        "receivedBytes": "279",
-        "sessions": "3",
-        "serverCountry": "Norway",
-        "serverId": "NO",
-        "packets": "12",
-        "bytes": "1054",
-        "sentBytes": "775"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "3",
-        "serverCountry": "Peru",
-        "serverId": "PE",
-        "packets": "3",
-        "bytes": "318",
-        "sentBytes": "318"
-      },
-      {
-        "receivedBytes": "61410",
-        "sessions": "42",
-        "serverCountry": "Thailand",
-        "serverId": "TH",
-        "packets": "404",
-        "bytes": "90757",
-        "sentBytes": "29347"
-      },
-      {
-        "receivedBytes": "2683",
-        "sessions": "9",
-        "serverCountry": "Ireland",
-        "serverId": "IE",
-        "packets": "31",
-        "bytes": "5553",
-        "sentBytes": "2870"
-      },
-      {
-        "receivedBytes": "49653235083",
-        "sessions": "103792",
-        "serverCountry": "China",
-        "serverId": "CN",
-        "packets": "49636392",
-        "bytes": "51157081522",
-        "sentBytes": "1503846439"
-      },
-      {
-        "receivedBytes": "773",
-        "sessions": "18",
-        "serverCountry": "Portugal",
-        "serverId": "PT",
-        "packets": "29",
-        "bytes": "2614",
-        "sentBytes": "1841"
-      },
-      {
-        "receivedBytes": "12687",
-        "sessions": "29",
-        "serverCountry": "Canada",
-        "serverId": "CA",
-        "packets": "249",
-        "bytes": "35918",
-        "sentBytes": "23231"
-      },
-      {
-        "receivedBytes": "18779",
-        "sessions": "79",
-        "serverCountry": "France",
-        "serverId": "FR",
-        "packets": "296",
-        "bytes": "40830",
-        "sentBytes": "22051"
-      },
-      {
-        "receivedBytes": "3660",
-        "sessions": "5",
-        "serverCountry": "Poland",
-        "serverId": "PL",
-        "packets": "44",
-        "bytes": "7635",
-        "sentBytes": "3975"
-      },
-      {
-        "receivedBytes": "18177",
-        "sessions": "51",
-        "serverCountry": "Italy",
-        "serverId": "IT",
-        "packets": "218",
-        "bytes": "41307",
-        "sentBytes": "23130"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "Greece",
-        "serverId": "GR",
-        "packets": "1",
-        "bytes": "159",
-        "sentBytes": "159"
-      },
-      {
-        "receivedBytes": "9896",
-        "sessions": "8",
-        "serverCountry": "Cambodia",
-        "serverId": "KH",
-        "packets": "59",
-        "bytes": "13885",
-        "sentBytes": "3989"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "Iraq",
-        "serverId": "IQ",
-        "packets": "1",
-        "bytes": "106",
-        "sentBytes": "106"
-      },
-      {
-        "receivedBytes": "5802",
-        "sessions": "1",
-        "serverCountry": "Iran",
-        "serverId": "",
-        "packets": "21",
-        "bytes": "6814",
-        "sentBytes": "1012"
-      },
-      {
-        "receivedBytes": "15514",
-        "sessions": "37",
-        "serverCountry": "Spain",
-        "serverId": "ES",
-        "packets": "133",
-        "bytes": "30255",
-        "sentBytes": "14741"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "2",
-        "serverCountry": "Colombia",
-        "serverId": "CO",
-        "packets": "2",
-        "bytes": "212",
-        "sentBytes": "212"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "27",
-        "serverCountry": "Mexico",
-        "serverId": "MX",
-        "packets": "27",
-        "bytes": "2580",
-        "sentBytes": "2580"
-      },
-      {
-        "receivedBytes": "247",
-        "sessions": "2",
-        "serverCountry": "Myanmar",
-        "serverId": "MM",
-        "packets": "28",
-        "bytes": "2216",
-        "sentBytes": "1969"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "8",
-        "serverCountry": "Slovakia",
-        "serverId": "SK",
-        "packets": "8",
-        "bytes": "620",
-        "sentBytes": "620"
-      },
-      {
-        "receivedBytes": "1171",
-        "sessions": "20",
-        "serverCountry": "Austria",
-        "serverId": "AT",
-        "packets": "23",
-        "bytes": "2757",
-        "sentBytes": "1586"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "Algeria",
-        "serverId": "DZ",
-        "packets": "1",
-        "bytes": "106",
-        "sentBytes": "106"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "Oman",
-        "serverId": "OM",
-        "packets": "1",
-        "bytes": "148",
-        "sentBytes": "148"
-      },
-      {
-        "receivedBytes": "91671",
-        "sessions": "187",
-        "serverCountry": "Germany",
-        "serverId": "DE",
-        "packets": "1321",
-        "bytes": "147323",
-        "sentBytes": "55652"
-      },
-      {
-        "receivedBytes": "335",
-        "sessions": "2",
-        "serverCountry": "Bulgaria",
-        "serverId": "BG",
-        "packets": "3",
-        "bytes": "615",
-        "sentBytes": "280"
-      },
-      {
-        "receivedBytes": "498",
-        "sessions": "1",
-        "serverCountry": "Laos",
-        "serverId": "",
-        "packets": "9",
-        "bytes": "919",
-        "sentBytes": "421"
-      },
-      {
-        "receivedBytes": "90",
-        "sessions": "1",
-        "serverCountry": "Denmark",
-        "serverId": "DK",
-        "packets": "2",
-        "bytes": "180",
-        "sentBytes": "90"
-      },
-      {
-        "receivedBytes": "19981",
-        "sessions": "58",
-        "serverCountry": "United Kingdom",
-        "serverId": "",
-        "packets": "214",
-        "bytes": "45834",
-        "sentBytes": "25853"
-      },
-      {
-        "receivedBytes": "998",
-        "sessions": "4",
-        "serverCountry": "Venezuela",
-        "serverId": "",
-        "packets": "8",
-        "bytes": "1311",
-        "sentBytes": "313"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "6",
-        "serverCountry": "Argentina",
-        "serverId": "AR",
-        "packets": "6",
-        "bytes": "553",
-        "sentBytes": "553"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "Luxembourg",
-        "serverId": "LU",
-        "packets": "1",
-        "bytes": "106",
-        "sentBytes": "106"
-      },
-      {
-        "receivedBytes": "7188",
-        "sessions": "189",
-        "serverCountry": "Switzerland",
-        "serverId": "CH",
-        "packets": "243",
-        "bytes": "23417",
-        "sentBytes": "16229"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "3",
-        "serverCountry": "Sri Lanka",
-        "serverId": "LK",
-        "packets": "3",
-        "bytes": "318",
-        "sentBytes": "318"
-      },
-      {
-        "receivedBytes": "8672",
-        "sessions": "38",
-        "serverCountry": "Philippines",
-        "serverId": "PH",
-        "packets": "339",
-        "bytes": "23214",
-        "sentBytes": "14542"
-      },
-      {
-        "receivedBytes": "48638",
-        "sessions": "66",
-        "serverCountry": "Indonesia",
-        "serverId": "ID",
-        "packets": "448",
-        "bytes": "86156",
-        "sentBytes": "37518"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "Bangladesh",
-        "serverId": "BD",
-        "packets": "1",
-        "bytes": "106",
-        "sentBytes": "106"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "Lithuania",
-        "serverId": "LT",
-        "packets": "15",
-        "bytes": "1950",
-        "sentBytes": "1950"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "Guatemala",
-        "serverId": "GT",
-        "packets": "1",
-        "bytes": "106",
-        "sentBytes": "106"
-      },
-      {
-        "receivedBytes": "40098",
-        "sessions": "173",
-        "serverCountry": "South Korea",
-        "serverId": "",
-        "packets": "628",
-        "bytes": "88407",
-        "sentBytes": "48309"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "New Zealand",
-        "serverId": "NZ",
-        "packets": "1",
-        "bytes": "106",
-        "sentBytes": "106"
-      },
-      {
-        "receivedBytes": "32446",
-        "sessions": "29",
-        "serverCountry": "Australia",
-        "serverId": "AU",
-        "packets": "209",
-        "bytes": "51532",
-        "sentBytes": "19086"
-      },
-      {
-        "receivedBytes": "30462468",
-        "sessions": "1150",
-        "serverCountry": "United States",
-        "serverId": "US",
-        "packets": "34301",
-        "bytes": "31632321",
-        "sentBytes": "1169853"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "1",
-        "serverCountry": "Uzbekistan",
-        "serverId": "UZ",
-        "packets": "1",
-        "bytes": "106",
-        "sentBytes": "106"
-      },
-      {
-        "receivedBytes": "2285",
-        "sessions": "6",
-        "serverCountry": "Czech Republic",
-        "serverId": "CZ",
-        "packets": "47",
-        "bytes": "5457",
-        "sentBytes": "3172"
-      },
-      {
-        "receivedBytes": "15064",
-        "sessions": "11",
-        "serverCountry": "South Africa",
-        "serverId": "ZA",
-        "packets": "118",
-        "bytes": "29107",
-        "sentBytes": "14043"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "2",
-        "serverCountry": "Costa Rica",
-        "serverId": "CR",
-        "packets": "2",
-        "bytes": "212",
-        "sentBytes": "212"
-      },
-      {
-        "receivedBytes": "20961",
-        "sessions": "81",
-        "serverCountry": "The Netherlands",
-        "serverId": "",
-        "packets": "231",
-        "bytes": "41709",
-        "sentBytes": "20748"
-      },
-      {
-        "receivedBytes": "663000",
-        "sessions": "355",
-        "serverCountry": "Singapore",
-        "serverId": "SG",
-        "packets": "3065",
-        "bytes": "894750",
-        "sentBytes": "231750"
-      },
-      {
-        "receivedBytes": "0",
-        "sessions": "3",
-        "serverCountry": "United Arab Emirates",
-        "serverId": "AE",
-        "packets": "3",
-        "bytes": "238",
-        "sentBytes": "238"
-      }
-    ],
-    "resultType": "table"
+export const mapData = [
+  {
+    "count": 9,
+    "ipLocationId": "AU",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "australia"
+  },
+  {
+    "count": 3,
+    "ipLocationId": "AT",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "austria"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "bolivia"
+  },
+  {
+    "count": 2,
+    "ipLocationId": "BR",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "brazil"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "CM",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "cameroon"
+  },
+  {
+    "count": 2,
+    "ipLocationId": "CL",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "chile"
+  },
+  {
+    "count": 11,
+    "ipLocationId": "CN",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "china"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "CY",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "cyprus"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "CZ",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "czech republic"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "FR",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "france"
+  },
+  {
+    "count": 2,
+    "ipLocationId": "ID",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "indonesia"
+  },
+  {
+    "count": 2,
+    "ipLocationId": "IE",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "ireland"
+  },
+  {
+    "count": 5,
+    "ipLocationId": "JP",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "japan"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "KW",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "kuwait"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "KG",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "kyrgyzstan"
+  },
+  {
+    "count": 2,
+    "ipLocationId": "MX",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "mexico"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "moldova"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "MN",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "mongolia"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "MZ",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "mozambique"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "NZ",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "new zealand"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "NE",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "niger"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "PT",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "portugal"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "RO",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "romania"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "SR",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "suriname"
+  },
+  {
+    "count": 4,
+    "ipLocationId": "SE",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "sweden"
+  },
+  {
+    "count": 2,
+    "ipLocationId": "CH",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "switzerland"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "TH",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "thailand"
+  },
+  {
+    "count": 5,
+    "ipLocationId": "",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "the netherlands"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "TK",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "tokelau"
+  },
+  {
+    "count": 2,
+    "ipLocationId": "AE",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "united arab emirates"
+  },
+  {
+    "count": 20,
+    "ipLocationId": "",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "united kingdom"
+  },
+  {
+    "count": 81,
+    "ipLocationId": "US",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "united states"
+  },
+  {
+    "count": 3,
+    "ipLocationId": "UZ",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "uzbekistan"
+  },
+  {
+    "count": 1,
+    "ipLocationId": "",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "venezuela"
   }
-}
+]
+export const mapData2 = [
+  {
+    "score": 5,
+    "locationId": "AU",
+    "direction": "server",
+    "locationCountry": "australia"
+  },
+  {
+    "score": 3,
+    "locationId": "AT",
+    "direction": "server",
+    "locationCountry": "austria"
+  },
+  {
+    "score": 1,
+    "locationId": "",
+    "direction": "server",
+    "locationCountry": "bolivia"
+  },
+  {
+    "score": 2,
+    "locationId": "BR",
+    "direction": "server",
+    "locationCountry": "brazil"
+  },
+  {
+    "score": 1,
+    "locationId": "CM",
+    "direction": "server",
+    "locationCountry": "cameroon"
+  },
+  {
+    "score": 2,
+    "locationId": "CL",
+    "direction": "server",
+    "locationCountry": "chile"
+  },
+  {
+    "score": 4,
+    "locationId": "CN",
+    "direction": "server",
+    "locationCountry": "china"
+  },
+  {
+    "score": 1,
+    "locationId": "CY",
+    "direction": "server",
+    "locationCountry": "cyprus"
+  },
+  {
+    "score": 1,
+    "locationId": "CZ",
+    "direction": "server",
+    "locationCountry": "czech republic"
+  },
+  {
+    "score": 1,
+    "locationId": "FR",
+    "direction": "server",
+    "locationCountry": "france"
+  },
+  {
+    "score": 2,
+    "locationId": "ID",
+    "direction": "server",
+    "locationCountry": "indonesia"
+  },
+  {
+    "score": 2,
+    "locationId": "IE",
+    "direction": "server",
+    "locationCountry": "ireland"
+  },
+  {
+    "score": 5,
+    "locationId": "JP",
+    "direction": "server",
+    "locationCountry": "japan"
+  },
+  {
+    "score": 1,
+    "locationId": "KW",
+    "direction": "server",
+    "locationCountry": "kuwait"
+  },
+  {
+    "score": 1,
+    "locationId": "KG",
+    "direction": "server",
+    "locationCountry": "kyrgyzstan"
+  },
+  {
+    "score": 2,
+    "locationId": "MX",
+    "direction": "server",
+    "locationCountry": "mexico"
+  },
+  {
+    "score": 1,
+    "locationId": "",
+    "direction": "server",
+    "locationCountry": "moldova"
+  },
+  {
+    "score": 1,
+    "locationId": "MN",
+    "direction": "server",
+    "locationCountry": "mongolia"
+  },
+  {
+    "score": 1,
+    "locationId": "MZ",
+    "direction": "server",
+    "locationCountry": "mozambique"
+  },
+  {
+    "score": 1,
+    "locationId": "NZ",
+    "direction": "server",
+    "locationCountry": "new zealand"
+  },
+  {
+    "score": 1,
+    "locationId": "NE",
+    "direction": "server",
+    "locationCountry": "niger"
+  },
+  {
+    "score": 1,
+    "locationId": "PT",
+    "direction": "server",
+    "locationCountry": "portugal"
+  },
+  {
+    "score": 3,
+    "locationId": "RO",
+    "direction": "server",
+    "locationCountry": "romania"
+  },
+  {
+    "score": 1,
+    "locationId": "SR",
+    "direction": "server",
+    "locationCountry": "suriname"
+  },
+  {
+    "score": 4,
+    "locationId": "SE",
+    "direction": "server",
+    "locationCountry": "sweden"
+  },
+  {
+    "score": 3,
+    "locationId": "CH",
+    "direction": "server",
+    "locationCountry": "switzerland"
+  },
+  {
+    "score": 1,
+    "locationId": "TH",
+    "direction": "server",
+    "locationCountry": "thailand"
+  },
+  {
+    "score": 5,
+    "locationId": "",
+    "direction": "server",
+    "locationCountry": "the netherlands"
+  },
+  {
+    "score": 1,
+    "locationId": "TK",
+    "direction": "server",
+    "locationCountry": "tokelau"
+  },
+  {
+    "score": 2,
+    "locationId": "AE",
+    "direction": "server",
+    "locationCountry": "united arab emirates"
+  },
+  {
+    "score": 6,
+    "locationId": "",
+    "direction": "server",
+    "locationCountry": "united kingdom"
+  },
+  {
+    "score": 6,
+    "locationId": "US",
+    "direction": "server",
+    "locationCountry": "united states"
+  },
+  {
+    "score": 3,
+    "locationId": "UZ",
+    "direction": "server",
+    "locationCountry": "uzbekistan"
+  },
+  {
+    "score": 1,
+    "locationId": "",
+    "direction": "server",
+    "locationCountry": "venezuela"
+  }
+]
+export const drillDownData = [
+  {
+    "ipLocationProvince": "beijing",
+    "count": 1,
+    "ipLocationId": "CN-BJ",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "china"
+  },
+  {
+    "ipLocationProvince": "taiwan",
+    "count": 3,
+    "ipLocationId": "CN",
+    "dnsServerRole": "tldns",
+    "ipLocationCountry": "china"
+  }
+]
diff --git a/src/views/charts2/charts/options/echartOption.js b/src/views/charts2/charts/options/echartOption.js
index 60a06b40..f3c11dc9 100644
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -236,7 +236,9 @@ export const appListChartOption = {
   },
   grid: {
     left: 0,
-    right: 0
+    right: 1,
+    top: 2,
+    bottom: 0
   },
   animation: false,
   color: chartColor,