- BudgetIcon separate colors based on percent

front/components/budget/budget-icon.vue

@@ -1,69 +1,35 @@
 <template>
-  <div ref="budget-icon" class="budget-icon" :style="{ '--budget-percent': budgetLimitPercent }">
+  <app-circle :progress="budgetLimitPercent" :progressColor="progressColor" :size="45" class="budget-icon">
     <app-icon :icon="icon ?? TablerIconConstants.budget" :size="TablerIconConstants.defaultSize" />
-  </div>
+  </app-circle>
 </template>
 
 <script setup>
 import TablerIconConstants from '~/constants/TablerIconConstants.js'
 import Budget from '~/models/Budget.js'
-import { get } from 'lodash'
+import { get, head } from 'lodash'
+import AppCircle from '~/components/ui-kit/app-circle.vue'
 
 const props = defineProps({
   value: {},
 })
 
-
 const icon = computed(() => Budget.getIcon(props.value))
 const budgetLimit = computed(() => Budget.getLimit(props.value))
-const budgetLimitPercent = computed(() => get(budgetLimit.value, `attributes.percent`, 0))
-
+const budgetLimitPercent = computed(() => get(budgetLimit.value, `attributes.percent`) ?? 0)
+
+let colorsList = [
+  // { start: 0, end: Infinity, colorWhite: '#E53935', colorDark: '#E53935' },
+  { start: 0, end: 50, colorWhite: '#4CAF50', colorDark: '#4CAF50' },
+  { start: 50, end: 70, colorWhite: '#FFC107', colorDark: '#FFC107' },
+  { start: 70, end: 90, colorWhite: '#FF5722', colorDark: '#FF5722' },
+  { start: 90, end: Infinity, colorWhite: '#E53935', colorDark: '#E53935' },
+]
+
+const profileStore = useProfileStore()
+const progressColor = computed(() => {
+  let color = colorsList.find((item) => budgetLimitPercent.value >= item.start && budgetLimitPercent.value < item.end)
+  color = color ?? head(colorsList)
+  return profileStore.darkTheme ? color.colorDark : color.colorWhite
+})
 </script>
-
-<style>
-.budget-icon {
-  --budget-percent: 20; /* the percentage */
-  --circle-colorircle-thickness: 5px; /* the thickness */
-  --circle-color: #66bb6a; /* the color */
-  --circle-size: 45px; /* the size*/
-
-  width: var(--circle-size);
-  aspect-ratio: 1/1;
-  position: relative;
-  display: inline-grid;
-  margin: 5px;
-  place-content: center;
-  border-radius: 50%;
-}
-
-.budget-icon:before,
-.budget-icon:after {
-  content: '';
-  position: absolute;
-  border-radius: 50%;
-}
-
-.budget-icon:before {
-  inset: 0;
-  background:
-    radial-gradient(farthest-side, var(--circle-color) 98%, #0000) top/var(--circle-colorircle-thickness) var(--circle-colorircle-thickness) no-repeat,
-    conic-gradient(var(--circle-color) calc(var(--budget-percent) * 1%), #0000 0);
-  mask: radial-gradient(farthest-side, #0000 calc(99% - var(--circle-colorircle-thickness)), #000 calc(100% - var(--circle-colorircle-thickness)));
-}
-
-.budget-icon:after {
-  inset: calc(50% - var(--circle-colorircle-thickness) / 2);
-  background: var(--circle-color);
-  transform: rotate(calc(var(--budget-percent) * 3.6deg - 90deg)) translate(calc(var(--circle-size) / 2 - 50%));
-}
-
-.no-round:before {
-  background-size:
-    0 0,
-    auto;
-}
-
-.no-round:after {
-  content: none;
-}
-</style>

front/components/dashboard/dashboard-budgets/dashboard-budget-item.vue

@@ -2,13 +2,12 @@
   <van-grid-item @click="onGoToBudget">
     <template #icon>
       <budget-icon :value="props.value" />
-<!--      <budget-icon2 :value="props.value" />-->
     </template>
     <template #text>
       <div class="display-flex flex-column align-items-center">
         <div class="font-600 text-size-12 text-center">{{ displayName }}</div>
-        <div class="font-500 text-size-10 text-center ">{{ getFormattedValue(budgetLimitSpent) }} / {{ getFormattedValue(budgetAmount) }} {{ budgetCurrencySymbol }}</div>
-        <div class="font-500 text-size-10 text-center text-muted">{{ budgetLimitInterval }} </div>
+        <div class="font-500 text-size-10 text-center">{{ getFormattedValue(budgetLimitSpent) }} / {{ getFormattedValue(budgetAmount) }} {{ budgetCurrencySymbol }}</div>
+        <div class="font-500 text-size-10 text-center text-muted">{{ budgetLimitInterval }}</div>
       </div>
     </template>
   </van-grid-item>
@@ -42,5 +41,4 @@ const onGoToBudget = async () => {
 
   await navigateTo(`${RouteConstants.ROUTE_BUDGET_ID}/${budgetId}`)
 }
-
 </script>