screenshot added and graph vue trying to fetch real data

Author: incendies

README.md

@@ -1,5 +1,7 @@
 # Admin Data Viewer
 
+![Admin Data Viewer Screenshot](/admin-data-viewer.jpeg)
+
 ## Description
 A WordPress plugin that displays data from a remote API in a Vue app for admin users.
 
@@ -18,9 +20,6 @@ Navigate to the 'Admin Data Viewer' menu in the WordPress admin panel to access
 - 'npm run build'
 - 'download the zip and upload to the wordpress'
 
-## Screenshots
-(Add screenshots here if applicable)
-
 ## Changelog
 - **1.0.0**: Initial release.
 

admin-data-viewer.jpeg

@@ -43,7 +43,7 @@ export default {
     methods: {
         async fetchGraphData() {
             try {
-                const apiUrl = `${this.apiData.root_url}/api`;
+                const apiUrl = `${this.apiData.root_url}/api/data-endpoint`; // Update this line to point to your actual API endpoint
                 const headers = this.apiData.nonce !== 'development_nonce' ? { 'X-WP-Nonce': this.apiData.nonce } : {};
 
                 const response = await fetch(apiUrl, { headers });
@@ -55,23 +55,20 @@ export default {
                 }
 
                 const result = await response.json();
-                console.log("Graph data:", result.graph);  // Debugging log
+                console.log("Graph data:", result);  // Debugging log
 
-                // Update this section based on the actual structure of result.graph
-                if (result.graph) {
-                    // Assume graph data is structured as an array of objects with 'label' and 'value' properties
-                    // Modify according to the actual data structure you observe in the console
+                // Update this section based on the actual structure of result
+                if (result.data) { // Adjust this based on your actual API response structure
                     this.chartData = {
-                        labels: result.graph.map(item => item.label),
+                        labels: result.data.map(item => item.label), // Adjust according to your data structure
                         datasets: [
                             {
                                 label: 'Sample Data',
                                 backgroundColor: '#42b983',
-                                data: result.graph.map(item => item.value)
+                                data: result.data.map(item => item.value) // Adjust according to your data structure
                             }
                         ]
-                   };
-                    this.chartData.datasets[0].data = Object.values(result.graph).map(item => item.value);
+                    };
                 } else {
                     console.error("Unexpected graph data format:", result);
                     this.statusMessage = "Unexpected data format for graph data.";