Improve Statistics Page

01-frontend/src/helper/adminpanel/StatisticsInfo.tsx

@@ -122,31 +122,34 @@ export default function StatisticsInfo() {
             setMonthlyRevenueXaxis(cmmx)
             setTotalRevenue(tv)
         }
-    }, [dataRevenue]);
+    }, [dataRevenue, monthlyRevenueXaxis, t]);
 
     useEffect(() => {
         if(dataOrderStatus) {
             const orderStatus = []
-            for(var status in dataOrderStatus) {
+            for(const status in dataOrderStatus) {
                 orderStatus.push({value: dataOrderStatus[status], label: t(status)})
             }
             setOrderStatus(orderStatus)
         }
-    }, [dataOrderStatus]) ;
+    }, [dataOrderStatus, t]) ;
 
     useEffect(() => {
+        function generateName(percent: string) : string {
+            return ">" + percent + "%";
+        }
         if(dataStockPercent) {
             const stockPercent = []
             let i = 0
             for(let x = 0; x < 10; x++) {
-                stockPercent.push({value: 0, label: String(x*10), color: getColorFromPercent(String(x*10))});
+                stockPercent.push({value: 0, label: generateName(String(x*10)), color: getColorFromPercent(String(x*10))});
             }
-            for(var cat in dataStockPercent) {
+            for(const cat in dataStockPercent) {
-                for(var percent in dataStockPercent[cat]) {
+                for(const percent in dataStockPercent[cat]) {
-                    let index = stockPercent.findIndex( (entry) => entry.label == percent)
+                    let index = stockPercent.findIndex( (entry) => entry.label == generateName(percent))
                     const datapoint = dataStockPercent[cat][percent]
                     if(index === -1) {
-                        index = stockPercent.push({value: 0, label: percent, color: getColorFromPercent(percent)}) -1
+                        index = stockPercent.push({value: 0, label: generateName(percent), color: getColorFromPercent(percent)}) -1
                     }
                     stockPercent[index].value += datapoint
                 }
@@ -222,7 +225,8 @@ export default function StatisticsInfo() {
                             innerRadius: 10,
                             outerRadius: 85,
                             cornerRadius: 5,
-                            paddingAngle: 2
+                            paddingAngle: 2,
+                            valueFormatter: (v) => (v ? `${v.value}%` : '-'),
                         }]}
                         width={200}
                         height={200}