fixed missing days and sorting in traffic widget

resources/js/components/UI/Bar.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="relative block cursor-pointer lg:mr-2 lg:w-2 2xl:w-3"
-        :style="{ height: bar.percentage + '%' }"
+        :style="{ height: bar.percentage > 0 ? bar.percentage + '%' : '10px' }"
         @mouseover="isVisible = true"
         @mouseleave="isVisible = false"
     >
@@ -22,7 +22,10 @@
                 <div class="h-3 w-3 origin-top-left -rotate-45 transform bg-gray-800 dark:bg-white"></div>
             </div>
         </div>
-        <span class="bg-theme block h-full w-full rounded-lg"></span>
+        <span
+			class="block h-full w-full rounded-lg"
+			:class="{'bg-theme': bar.percentage > 0, 'bg-gray-200': bar.percentage === 0}"
+		></span>
     </div>
 </template>
 <script>

resources/js/components/UI/BarChart.vue

@@ -4,16 +4,6 @@
     >
         <!--Data bar-->
         <Bar v-for="(item, i) in data" :key="i" :bar="item" />
-
-        <!--Ghost bar-->
-        <span
-            v-if="ghostLength > 0"
-            class="relative block cursor-pointer bg-gray-100 dark:bg-gray-800 lg:mr-2 lg:w-2 2xl:w-3"
-            v-for="(ghost, i) in ghostLength"
-            :style="{ height: '7%' }"
-            :key="i"
-        >
-        </span>
     </div>
 </template>
 <script>
@@ -25,10 +15,5 @@ export default {
     components: {
         Bar,
     },
-    computed: {
-        ghostLength() {
-            return 45 - this.data.length
-        },
-    },
 }
 </script>

src/App/Users/Resources/UserStorageResource.php

@@ -1,7 +1,10 @@
 <?php
+
 namespace App\Users\Resources;
 
 use ByteUnits\Metric;
+use Carbon\CarbonPeriod;
+use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Http\Resources\Json\JsonResource;
 
@@ -130,18 +133,26 @@ class UserStorageResource extends JsonResource
             ->where('user_id', $this->id)
             ->where('created_at', '>', $period)
             ->orderBy('created_at')
-            ->get();
+            ->get(['upload', 'download', 'created_at'])
+            ->each(fn($record) => $record->created_at = format_date($record->created_at, 'd. M. Y'))
+            ->keyBy('created_at');
 
-        $upload = $trafficRecords->map(fn ($record) => [
+        $mappedTrafficRecords = mapTrafficRecords($trafficRecords);
-            'created_at' => format_date($record->created_at, 'd. M. '),
+
-            'percentage' => $uploadMax !== 0 ? round(($record->upload / $uploadMax) * 100, 2) : 0,
+        $upload = $mappedTrafficRecords->map(fn($record) => [
+            'created_at' => $record->created_at,
             'amount'     => Metric::bytes($record->upload)->format(),
+            'percentage' => $uploadMax !== 0
+                ? round(($record->upload / $uploadMax) * 100, 2)
+                : 0,
         ]);
 
-        $download = $trafficRecords->map(fn ($record) => [
+        $download = $mappedTrafficRecords->map(fn($record) => [
-            'created_at' => format_date($record->created_at, 'd. M. '),
+            'created_at' => $record->created_at,
-            'percentage' => $downloadMax !== 0 ? round(($record->download / $downloadMax) * 100, 2) : 0,
             'amount'     => Metric::bytes($record->download)->format(),
+            'percentage' => $downloadMax !== 0
+                ? round(($record->download / $downloadMax) * 100, 2)
+                : 0,
         ]);
 
         return [$downloadTotal, $uploadTotal, $upload, $download];

src/Domain/Admin/Controllers/Dashboard/GetDashboardDataController.php

@@ -52,7 +52,7 @@ class GetDashboardDataController extends Controller
     {
         // Set period range for data retrieval
         $period = now()
-            ->subDays(44)
+            ->subDays(45)
             ->endOfDay();
 
         // Get bandwidth data
@@ -64,16 +64,20 @@ class GetDashboardDataController extends Controller
                 DB::raw('sum(upload) as upload')
             )
             ->groupBy('created_at')
-            ->get();
+            ->get(['upload', 'download', 'created_at'])
+            ->each(fn($record) => $record->created_at = format_date($record->created_at, 'd. M. Y'))
+            ->keyBy('created_at');
 
-        $upload = $trafficRecords->map(fn ($record) => [
+        $mappedTrafficRecords = mapTrafficRecords($trafficRecords);
-            'created_at' => format_date($record->created_at, 'd. M. '),
+
+        $upload = $mappedTrafficRecords->map(fn ($record) => [
+            'created_at' => $record->created_at,
             'percentage' => intval($trafficRecords->max('upload')) !== 0 ? round(($record->upload / $trafficRecords->max('upload')) * 100, 2) : 0,
             'amount'     => Metric::bytes($record->upload)->format(),
         ]);
 
-        $download = $trafficRecords->map(fn ($record) => [
+        $download = $mappedTrafficRecords->map(fn ($record) => [
-            'created_at' => format_date($record->created_at, 'd. M. '),
+            'created_at' => $record->created_at,
             'percentage' => intval($trafficRecords->max('download')) !== 0 ? round(($record->download / $trafficRecords->max('download')) * 100, 2) : 0,
             'amount'     => Metric::bytes($record->download)->format(),
         ]);

src/Support/helpers.php

@@ -648,6 +648,33 @@ if (! function_exists('getThumbnailFileList')) {
     }
 }
 
+if (! function_exists('mapTrafficRecords')) {
+    /**
+     * Map missing dates
+     */
+    function mapTrafficRecords(Collection $trafficRecords): Collection
+    {
+        $records = collect();
+
+        foreach (range(44, 0) as $day) {
+            $day = now()->subDays($day)->translatedFormat('d. M. Y');
+
+            if (optional($trafficRecords)[$day]) {
+                $records->push($trafficRecords[$day]);
+            } else {
+                $record = new Collection();
+
+                $record->upload = 0;
+                $record->download = 0;
+                $record->created_at = $day;
+
+                $records->add($record);
+            }
+        }
+        return $records;
+    }
+}
+
 if (! function_exists('map_language_translations')) {
     /**
      * It map language translations as language key and language value