Fix: Update Ui

Author: Pratap2018

src/views/analytics/UserAnalytics.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-container >
+    <v-container>
         <v-row>
             <!-- Left Column -->
             <v-col cols="12">
@@ -24,7 +24,7 @@
             </v-col>
 
         </v-row>
-         <v-row>
+        <v-row>
             <v-col cols="12">
                 <DeviceStats :env="env" />
             </v-col>
@@ -41,7 +41,7 @@ export default {
     name: "UserAnalytics",
     data() {
         return {
-          isProd: false,
+            isProd: false,
         };
     },
     computed: {

src/views/analytics/components/DemographicStats.vue

@@ -79,6 +79,7 @@ export default {
 
     async refreshData() {
       await this.fetchData();
+      await this.$nextTick();
       await this.initChart();
     },
 
@@ -97,11 +98,21 @@ export default {
     },
 
     async initChart() {
-      // 1. Fetch World GeoJSON (ECharts needs this to draw the map)
-      const worldData = await fetch('https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/json/world.json').then(res => res.json());
-      echarts.registerMap('world', worldData);
-
       const chartDom = this.$refs.worldMap;
+      if (!chartDom) return;
+
+      if (this.chart) {
+        this.chart.dispose();
+      }
+
+      try {
+        const worldData = await fetch('https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/json/world.json').then(res => res.json());
+        echarts.registerMap('world', worldData);
+      } catch (error) {
+        console.error('Error loading world map:', error);
+        return;
+      }
+
       this.chart = echarts.init(chartDom);
 
       // 2. Format country data for ECharts (Mapping ISO codes to Map Names if necessary)
@@ -113,7 +124,7 @@ export default {
         //     value: value
         //   }));
 
-      const mapData = Object.entries(this.demographics.countries).map(([code, value]) => ({
+      const mapData = Object.entries(this.demographics.countries || {}).map(([code, value]) => ({
         name: countries.getName(code, "en") || code, // Dynamically gets "India" from "IN"
         value: value
       }));

src/views/analytics/components/DeviceStats.vue

@@ -64,6 +64,7 @@ export default {
   },
   async mounted() {
     await this.fetchDevices();
+    await this.$nextTick();
     this.initChart();
     window.addEventListener('resize', this.handleResize);
   },
@@ -72,19 +73,27 @@ export default {
     if (this.chart) this.chart.dispose();
   },
   watch: {
-    env() {
-      this.fetchDevices();
+    async env() {
+      await this.refreshData();
     }
   },
   methods: {
     ...mapActions('mainStore', ['fetchAnalyticsDeviceStats']),
 
+    async refreshData() {
+      await this.fetchDevices();
+      await this.$nextTick();
+      this.initChart();
+    },
+
     async fetchDevices() {
       this.loading = true;
       try {
         const response = await this.fetchAnalyticsDeviceStats({ env: this.env });
-        if (response && response.data) {
+        if (response && Array.isArray(response.data)) {
           this.deviceData = response.data;
+        } else {
+          this.deviceData = [];
         }
       } catch (err) {
         console.error("API Error:", err);
@@ -101,6 +110,11 @@ export default {
 
     initChart() {
       if (!this.$refs.deviceChart) return;
+
+      if (this.chart) {
+        this.chart.dispose();
+      }
+
       this.chart = echarts.init(this.$refs.deviceChart);
       
       const chartData = this.deviceData.map(item => ({

src/views/analytics/components/Overview.vue

@@ -19,7 +19,7 @@
       <div class="stat-card border-blue">
         <div class="card-content">
           <p class="label">Total Verifications</p>
-          <h3 class="value">{{ metrics.totalVerifications.toLocaleString() }}</h3>
+          <h3 class="value">{{ formatNumber(metrics.totalVerifications) }}</h3>
         </div>
         <p class="subtext text-muted italic">Across all channels</p>
       </div>
@@ -59,6 +59,13 @@
 <script>
 import { mapActions } from 'vuex/dist/vuex.common.js';
 
+const getDefaultMetrics = () => ({
+  totalVerifications: 0,
+  completionRate: 0,
+  successRate: 0,
+  dropOffRate: 0
+});
+
 export default {
   name: 'AnalyticsOverview',
   props: {
@@ -71,12 +78,7 @@ export default {
     return {
       loading: true,
       error: null,
-      metrics: {
-        totalVerifications: 0,
-        completionRate: 0,
-        successRate: 0,
-        dropOffRate: 0
-      }
+      metrics: getDefaultMetrics()
     };
   },
   mounted() {
@@ -89,17 +91,28 @@ export default {
   },
   methods: {
     ...mapActions('mainStore', ['fetchAnalyticsOverview']),
+    formatNumber(value) {
+      return Number(value || 0).toLocaleString();
+    },
     async fetchOverviewData() {
       this.loading = true;
       this.error = null;
       try {
         const response = await this.fetchAnalyticsOverview({ env: this.env });
         if (response && response.data) {
-          this.metrics = response.data;
+          this.metrics = {
+            ...getDefaultMetrics(),
+            totalVerifications: Number(response.data.totalVerifications) || 0,
+            completionRate: Number(response.data.completionRate) || 0,
+            successRate: Number(response.data.successRate) || 0,
+            dropOffRate: Number(response.data.dropOffRate) || 0
+          };
         } else {
+          this.metrics = getDefaultMetrics();
           this.error = "Data format mismatch from server.";
         }
       } catch (err) {
+        this.metrics = getDefaultMetrics();
         this.error = "Unable to load dashboard data.";
       } finally {
         this.loading = false;