<template>
  <div class="scale-wrapper">
    {{ -maximum }} <span v-if="minLabel != null"> ({{ minLabel }})</span>
    <div class="scale">
      <div v-for="multiplier in range" :key="multiplier">
        <div
          :style="{
            backgroundColor: mapper(-maximum, maximum)(maximum * multiplier),
            width: scaleSize ? valueToPercent(maximum * multiplier) : '100%',
            height: scaleSize ? valueToPercent(maximum * multiplier) : '100%',
          }"
        ></div>
      </div>
    </div>
    {{ maximum }}  <span v-if="maxLabel != null">({{ maxLabel }})</span>
  </div>
</template>

<script>
export default {
  props: ["range", "maximum", "mapper", "scaleSize", "minLabel", "maxLabel"],
  methods: {
    valueToPercent(value) {
      return (Math.abs(value) * 100).toFixed() + "%";
    },
  },
};
</script>

<style scoped>
.scale-wrapper {
  display: flex;
  align-items: center;
}
.scale {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
}
.scale > div {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  height: 15px;
  width: 15px;
}
</style>