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>