{"version":3,"file":"GaugeIcon.394cf3ae.js","sources":["../../../../components/global/elements/GaugeIcon.vue"],"sourcesContent":["<template>\n  <svg class=\"gauge-icon\" viewBox=\"0 0 100 50\">\n    <linearGradient id=\"gradient\">\n      <stop class=\"gauge-icon__stop\" offset=\"0%\" />\n    </linearGradient>\n    <circle\n      class=\"gauge-icon__background\"\n      :r=\"circleRadius\"\n      :stroke-dasharray=\"`${gaugeHalf} ${gaugeMax}`\"\n      :stroke-width=\"gaugeWidth\"\n      cx=\"50\"\n      cy=\"2\"\n      shape-rendering=\"geometricPrecision\"\n    ></circle>\n    <circle\n      class=\"gauge-icon__progress\"\n      :stroke-dasharray=\"`${gaugeFill} ${gaugeMax}`\"\n      :stroke-width=\"gaugeWidth\"\n      :r=\"circleRadius\"\n      cx=\"50\"\n      cy=\"2\"\n      shape-rendering=\"geometricPrecision\"\n    ></circle>\n  </svg>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type ComputedRef } from 'vue';\n\nconst props = defineProps({\n  fillPercentage: {\n    type: Number,\n    default: 0,\n  },\n  gaugeWidth: {\n    type: Number,\n    default: 12,\n  },\n});\n\nconst circleRadius = computed(() => 50 - props.gaugeWidth / 2);\nconst gaugeMax = computed(() => Math.floor(2 * Math.PI * circleRadius.value));\nconst gaugeHalf = computed(() => gaugeMax.value / 2);\n\nconst gaugeFill: ComputedRef<number> = computed(() => {\n  const fill = (props.fillPercentage / 100) * gaugeHalf.value;\n\n  if (fill < 0) return 0;\n  if (fill > gaugeHalf.value) return gaugeHalf.value;\n  return fill;\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.gauge-icon {\n  width: rem(50);\n  height: rem(35);\n  transform: rotate(-180deg) scale(0.9);\n  fill: none;\n  stroke: white;\n  stroke-linecap: round;\n\n  &__background {\n    fill: none;\n    stroke: var(--primary);\n    stroke-linecap: round;\n    opacity: 0.3;\n  }\n\n  &__progress {\n    fill: none;\n    stroke-linecap: round;\n    stroke: url(#gradient);\n    stroke-linecap: round;\n    transition: stroke-dashoffset 1s ease-in-out;\n  }\n\n  &__stop {\n    stop-color: var(--primary);\n  }\n}\n</style>\n"],"names":["circleRadius","computed","props","gaugeMax","gaugeHalf","gaugeFill","fill"],"mappings":"6hBAwCMA,EAAeC,EAAS,IAAM,GAAKC,EAAM,WAAa,CAAC,EACvDC,EAAWF,EAAS,IAAM,KAAK,MAAM,EAAI,KAAK,GAAKD,EAAa,KAAK,CAAC,EACtEI,EAAYH,EAAS,IAAME,EAAS,MAAQ,CAAC,EAE7CE,EAAiCJ,EAAS,IAAM,CACpD,MAAMK,EAAQJ,EAAM,eAAiB,IAAOE,EAAU,MAEtD,OAAIE,EAAO,EAAU,EACjBA,EAAOF,EAAU,MAAcA,EAAU,MACtCE,CAAA,CACR"}