Изменил пороги цвета и привязку процента к выбранной дате

resources/js/Layouts/Components/Statistic/StatisticRecipientPlanOfYear.vue

@@ -1,6 +1,8 @@
 <script setup>
 import {NNumberAnimation, NTag, NFlex} from "naive-ui"
 import {computed} from "vue";
+import {percentType} from "../../../Utils/numbers.js";
+
 const props = defineProps({
     plan: {
         type: Number,
@@ -14,13 +16,7 @@ const props = defineProps({
 
 const percentProgress = computed(() => {
     if (!Number(props.plan) && !Number(props.progress)) return 0
-    return (props.progress * 100) / props.plan
-})
-
-const percentColor = computed(() => {
-    if (percentProgress.value < 50) return 'color: var(--color-red-500);' // Ужасно
-    if (percentProgress.value >= 50 && percentProgress.value < 80) return 'color: var(--color-amber-500);' // Плохо
-    if (percentProgress.value >= 80) return 'color: var(--color-emerald-500);' // Хорошо
+    return Math.round((props.progress * 100) / props.plan)
 })
 
 </script>
@@ -30,12 +26,13 @@ const percentColor = computed(() => {
         <NFlex align="center" justify="center">
             <div>
                 План:
-                <span :style="percentColor">
-                    <NNumberAnimation  show-separator :from="0" :to="progress" />
-                </span>
+                <NNumberAnimation show-separator :from="0" :to="progress" />
                 из
                 <NNumberAnimation show-separator :from="0" :to="plan" />
             </div>
+            <NTag :type="percentType(percentProgress)" round :bordered="false" size="small">
+                {{ percentProgress }}%
+            </NTag>
         </NFlex>
     </NTag>
 </template>

resources/js/Utils/numbers.js

@@ -1,15 +1,15 @@
 export const percentColor = (number) => {
     if (!Number(number)) return
-    if (number < 50) return 'color: var(--color-red-500);' // Ужасно
-    if (number >= 50 && number < 80) return 'color: var(--color-amber-500);' // Плохо
-    if (number >= 80) return 'color: var(--color-emerald-500);' // Хорошо
+    if (number >= 90) return 'color: var(--color-emerald-500);' // Хорошо
+    if (number >= 80) return 'color: var(--color-amber-500);' // Плохо
+    return 'color: var(--color-red-500);' // Ужасно
 }
 
 export const percentType = (number) => {
     if (!Number(number)) return
-    if (number < 50) return 'error' // Ужасно
-    if (number >= 50 && number < 80) return 'warning' // Плохо
-    if (number >= 80) return 'success' // Хорошо
+    if (number >= 90) return 'success' // Хорошо
+    if (number >= 80) return 'warning' // Плохо
+    return 'error' // Ужасно
 }
 
 export const typePlan = (plan, completed) => {