EnergyPerformanceCertificate.vue

<script setup>
import { onMounted, onUpdated, ref } from 'vue'

const props = defineProps(['data'])

const pos = ref(0)

function calculatePosition(pos) {
  const offset = pos * 0.25
  return `${pos + offset}em`
}

function getCurrentRange(value) {
  if (value >= 0 && value < 30) {
    pos.value = 0
  }
  else if (value < 50) {
    pos.value = 1
  }
  else if (value < 75) {
    pos.value = 2
  }
  else if (value < 100) {
    pos.value = 3
  }
  else if (value < 130) {
    pos.value = 4
  }
  else if (value < 160) {
    pos.value = 5
  }
  else if (value < 200) {
    pos.value = 6
  }
  else if (value < 250) {
    pos.value = 7
  }
  else if (value >= 250) {
    pos.value = 8
  } else {
    return
  }
}

onMounted(() => {
  getCurrentRange(props.data)
})

onUpdated(() => {
  getCurrentRange(props.data)
})
</script>

<template>
  <div class="epc" v-if="props.data">
    <div class="epc__bar" :style="{ backgroundColor: '#449881', color: '#449881', width: '55%' }">
      <span>A+</span>
    </div>
    <div class="epc__bar" :style="{ backgroundColor: '#5ea742', color: '#5ea742', width: '60%' }">
      <span>A</span>
    </div>
    <div class="epc__bar" :style="{ backgroundColor: '#a3c93e', color: '#a3c93e', width: '65%' }">
      <span>B</span>
    </div>
    <div class="epc__bar" :style="{ backgroundColor: '#beda76', color: '#beda76', width: '70%' }">
      <span>C</span>
    </div>
    <div class="epc__bar" :style="{ backgroundColor: '#fbe24a', color: '#fbe24a', width: '75%' }">
      <span>D</span>
    </div>
    <div class="epc__bar" :style="{ backgroundColor: '#f9c268', color: '#f9c268', width: '80%' }">
      <span>E</span>
    </div>
    <div class="epc__bar" :style="{ backgroundColor: '#f6b247', color: '#f6b247', width: '85%' }">
      <span>F</span>
    </div>
    <div class="epc__bar" :style="{ backgroundColor: '#ee736c', color: '#ee736c', width: '90%' }">
      <span>G</span>
    </div>
    <div class="epc__bar" :style="{ backgroundColor: '#ea554e', color: '#ea554e', width: '95%' }">
      <span>H</span>
    </div>
    <div class="epc__marker" :style="{ top: calculatePosition(pos) }"></div>
  </div>
</template>

<style scoped>
.epc {
  width: calc(100% - 1em);
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.epc__bar {
  position: relative;
  padding-left: var(--spacing);
  height: 1em;
  display: flex;
  align-items: center;
  border-radius: 0.5em 0 0 0.5em;
}

.epc__bar::after {
  position: absolute;
  content: '';
  right: -0.5em;
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
  border-left: 0.5em solid;
}

.epc__bar>span {
  color: var(--clr-text);
  font-weight: bold;
  font-size: var(--text-s);
}

.epc__marker {
  z-index: 1;
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
  border-left: 0.5em solid hsl(var(--clr-black));
  transition: top ease-out 250ms;
}
</style>