@@ -17,6 +17,7 @@ import {
1717 Legend ,
1818 ArcElement ,
1919} from 'chart.js' ;
20+ import ApexCharts from 'apexcharts' ;
2021
2122// Register Chart.js components and controllers
2223Chart . register (
@@ -41,7 +42,9 @@ export class DashboardManager {
4142 revenue : [ ] ,
4243 users : [ ] ,
4344 orders : [ ] ,
44- performance : [ ]
45+ performance : [ ] ,
46+ recentOrders : [ ] ,
47+ salesByLocation : [ ]
4548 } ;
4649 this . init ( ) ;
4750 }
@@ -56,6 +59,9 @@ export class DashboardManager {
5659 this . initRevenueChart ( ) ;
5760 this . initUserGrowthChart ( ) ;
5861 this . initOrderStatusChart ( ) ;
62+ this . initStorageChart ( ) ;
63+ this . initSalesByLocationChart ( ) ;
64+ this . populateRecentOrders ( ) ;
5965
6066 // Initialize real-time updates
6167 this . startRealTimeUpdates ( ) ;
@@ -70,6 +76,8 @@ export class DashboardManager {
7076 this . data . users = this . generateUserData ( ) ;
7177 this . data . orders = this . generateOrderData ( ) ;
7278 this . data . performance = this . generatePerformanceData ( ) ;
79+ this . data . recentOrders = this . generateRecentOrders ( ) ;
80+ this . data . salesByLocation = this . generateSalesByLocation ( ) ;
7381 }
7482
7583 generateRevenueData ( ) {
@@ -99,6 +107,38 @@ export class DashboardManager {
99107 } ;
100108 }
101109
110+ generateRecentOrders ( ) {
111+ const customers = [ 'John Doe' , 'Jane Smith' , 'Mike Johnson' , 'Sarah Wilson' , 'Bob Brown' ] ;
112+ const statuses = [
113+ { text : 'Completed' , class : 'bg-success' } ,
114+ { text : 'Pending' , class : 'bg-warning' } ,
115+ { text : 'Shipped' , class : 'bg-info' } ,
116+ { text : 'Cancelled' , class : 'bg-danger' }
117+ ] ;
118+ return Array . from ( { length : 5 } , ( _ , i ) => ( {
119+ id : `#${ Math . floor ( Math . random ( ) * 9000 ) + 1000 } ,
120+ customer : customers [ Math . floor ( Math . random ( ) * customers . length ) ] ,
121+ amount : `$${ ( Math . random ( ) * 500 + 50 ) . toFixed ( 2 ) } ,
122+ status : statuses [ Math . floor ( Math . random ( ) * statuses . length ) ] ,
123+ date : new Date ( Date . now ( ) - Math . random ( ) * 1000 * 60 * 60 * 24 * 7 ) . toLocaleDateString ( )
124+ } ) ) ;
125+ }
126+
127+ generateSalesByLocation ( ) {
128+ return [
129+ { "name" : "United States" , "value" : 2822 } ,
130+ { "name" : "Canada" , "value" : 1432 } ,
131+ { "name" : "United Kingdom" , "value" : 980 } ,
132+ { "name" : "Australia" , "value" : 780 } ,
133+ { "name" : "Germany" , "value" : 650 } ,
134+ { "name" : "Brazil" , "value" : 450 } ,
135+ { "name" : "India" , "value" : 1800 } ,
136+ { "name" : "China" , "value" : 2100 } ,
137+ { "name" : "Japan" , "value" : 850 } ,
138+ { "name" : "Russia" , "value" : 550 }
139+ ]
140+ }
141+
102142 generatePerformanceData ( ) {
103143 const hours = Array . from ( { length : 24 } , ( _ , i ) => i ) ;
104144 return hours . map ( hour => ( {
@@ -295,6 +335,120 @@ export class DashboardManager {
295335 this . charts . set ( 'orderStatus' , chart ) ;
296336 }
297337
338+ initStorageChart ( ) {
339+ const options = {
340+ chart : {
341+ height : 280 ,
342+ type : "radialBar" ,
343+ } ,
344+ series : [ 76 ] ,
345+ colors : [ "#20E647" ] ,
346+ plotOptions : {
347+ radialBar : {
348+ hollow : {
349+ margin : 0 ,
350+ size : "70%" ,
351+ background : "#293450"
352+ } ,
353+ track : {
354+ dropShadow : {
355+ enabled : true ,
356+ top : 2 ,
357+ left : 0 ,
358+ blur : 4 ,
359+ opacity : 0.15
360+ }
361+ } ,
362+ dataLabels : {
363+ name : {
364+ offsetY : - 10 ,
365+ color : "#fff" ,
366+ fontSize : "13px"
367+ } ,
368+ value : {
369+ color : "#fff" ,
370+ fontSize : "30px" ,
371+ show : true
372+ }
373+ }
374+ }
375+ } ,
376+ fill : {
377+ type : "gradient" ,
378+ gradient : {
379+ shade : "dark" ,
380+ type : "vertical" ,
381+ gradientToColors : [ "#87D4F9" ] ,
382+ stops : [ 0 , 100 ]
383+ }
384+ } ,
385+ stroke : {
386+ lineCap : "round"
387+ } ,
388+ labels : [ "Used Space" ]
389+ } ;
390+
391+ const chart = new ApexCharts ( document . querySelector ( "#storageStatusChart" ) , options ) ;
392+ chart . render ( ) ;
393+ this . charts . set ( 'storage' , chart ) ;
394+ }
395+
396+ initSalesByLocationChart ( ) {
397+ const options = {
398+ series : [ {
399+ name : 'Sales' ,
400+ data : this . data . salesByLocation . map ( c => ( { x : c . name , y : c . value } ) )
401+ } ] ,
402+ chart : {
403+ type : 'treemap' ,
404+ height : 350
405+ } ,
406+ dataLabels : {
407+ enabled : true ,
408+ style : {
409+ fontSize : '12px' ,
410+ } ,
411+ formatter : function ( text , op ) {
412+ return [ text , op . value ]
413+ } ,
414+ offsetY : - 4
415+ } ,
416+ plotOptions : {
417+ treemap : {
418+ enableShades : true ,
419+ shadeIntensity : 0.5 ,
420+ reverseNegativeShade : true ,
421+ colorScale : {
422+ ranges : [
423+ { from : 0 , to : 1000 , color : '#CDD7B6' } ,
424+ { from : 1001 , to : 2000 , color : '#A4B494' } ,
425+ { from : 2001 , to : 3000 , color : '#52708E' }
426+ ]
427+ }
428+ }
429+ }
430+ } ;
431+
432+ const chart = new ApexCharts ( document . querySelector ( "#salesByLocationChart" ) , options ) ;
433+ chart . render ( ) ;
434+ this . charts . set ( 'salesByLocation' , chart ) ;
435+ }
436+
437+ populateRecentOrders ( ) {
438+ const tableBody = document . getElementById ( 'recent-orders-table' ) ;
439+ if ( ! tableBody ) return ;
440+
441+ tableBody . innerHTML = this . data . recentOrders . map ( order => `
442+ <tr>
443+ <td><strong>${ order . id }
444+ <td>${ order . customer }
445+ <td>${ order . amount }
446+ <td><span class="badge ${ order . status . class } ${ order . status . text }
447+ <td>${ order . date }
448+ </tr>
449+ ` ) . join ( '' ) ;
450+ }
451+
298452 startRealTimeUpdates ( ) {
299453 // Update charts every 30 seconds with new data
300454 setInterval ( ( ) => {
0 commit comments