<template>
  <section class="barchart">
    <div class="chart">
      <div
        class="bar"
        v-for="(loop, index) in details"
        :key="`barchart-loop-${index}-${label}`"
        :style="{
          height: `${scaledSelector(loop.loop) * 50}px`,
          backgroundColor:
            loop.loop.color != null ? loop.loop.color : loop.protein.color,
        }"
        @mouseenter="
          setPreview({
            $event,
            description: {
              Protein: loop.protein.name,
              Loop: loop.loop.id,
              Value: round(selector(loop.loop), 2),
            },
          })
        "
        @mouseleave="setPreview(null)"
      >
        <div
          class="label"
          :style="{
            marginBottom: `${clamp(
              scaledSelector(loop.loop) * 50 - 24,
              0,
              100
            )}px`,
          }"
        >
          {{ roundToFourDigits(selector(loop.loop)) }}
        </div>
      </div>
    </div>
    <div class="label">{{ label }}</div>
  </section>
</template>

<script>
import { scaleLinear } from "d3";
import { mapGetters, mapMutations } from "vuex";
import { round, clamp, max } from "lodash";
import DetailsMixin from "@/mixins/DetailsMixin";
import RoundMixin from '../../mixins/RoundMixin';
export default {
  props: ["details", "selector", "label"],

  methods: {
    ...mapMutations(["setPreview"]),
    makeScale(selector) {
      let maximum = max(this.getAllLoops.map(selector));
      return scaleLinear().domain([0, maximum]).range([0, 1]);
    },

    scaledSelector(loop) {
      let scale = this.makeScale(this.selector);
      return scale(this.selector(loop));
    },

    roundToFourDigits(number) {
      if (number >= 100) {
        return round(number, 1);
      }
      return round(number, 2);
    },

    clamp: clamp,
  },
  computed: {
    ...mapGetters(["getAllLoops"]),
  },
  mixins: [DetailsMixin, RoundMixin],
};
</script>

<style scoped>
.chart {
  display: flex;
  align-items: flex-end;
}
.bar {
  width: 48px;

  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.barchart {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.label {
  color: white;

  text-shadow: 0.07em 0 black, 0 0.07em black, -0.07em 0 black, 0 -0.07em black,
    -0.07em -0.07em black, -0.07em 0.07em black, 0.07em -0.07em black,
    0.07em 0.07em black;
}
</style>