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

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>