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

app/Models/Department.php

@@ -43,12 +43,12 @@ class Department extends Model
         return $this->belongsTo(UserDepartment::class, 'department_id', 'rf_department_id');
     }
 
-    public function recipientPlanOfYear()
+    public function recipientPlanOfYear(?Carbon $asOf = null)
     {
-        $now = Carbon::now();
+        $asOf = $asOf ?? Carbon::now();
 
         return $this->metrikaDefault()
-            ->where('date_end', '>', $now)
+            ->where('date_end', '>', $asOf)
             ->where('rf_metrika_item_id', 23)
             ->first();
     }

app/Services/MetricCalculators/PlanCalculator.php

@@ -68,7 +68,7 @@ class PlanCalculator extends BaseMetricService implements MetricCalculatorInterf
             $department = Department::find($departmentId);
 
             // Получаем годовой план
-            $annualPlanModel = $department->recipientPlanOfYear();
+            $annualPlanModel = $department->recipientPlanOfYear($endDate);
             $annualPlan = $annualPlanModel ? (int) $annualPlanModel->value : 0;
 
             // План на 1 месяц (равномерно)

app/Services/ReportService.php

@@ -829,7 +829,7 @@ class ReportService
      */
     public function getRecipientPlanOfYear(Department $department, DateRange $dateRange): array
     {
-        $periodPlanModel = $department->recipientPlanOfYear();
+        $periodPlanModel = $department->recipientPlanOfYear($dateRange->endDate);
         $monthsInPeriod = ceil($dateRange->startDate->diffInMonths($dateRange->endDate));
         $annualPlan = $periodPlanModel ? (int) $periodPlanModel->value : 0;
         $oneMonthPlan = ceil($annualPlan / 12);

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) => {