debian-mirror-gitlab/app/assets/javascripts/branches/components/graph_bar.vue

<script>
import { SIDES, MAX_COMMIT_COUNT } from '../constants';

export default {
  props: {
    position: {
      type: String,
      required: true,
    },
    count: {
      type: Number,
      required: true,
    },
    maxCommits: {
      type: Number,
      required: true,
    },
  },
  computed: {
    label() {
      if (this.count >= MAX_COMMIT_COUNT) {
        return `${MAX_COMMIT_COUNT - 1}+`;
      }

      return this.count;
    },
    barGraphWidthFactor() {
      return this.maxCommits > 0 ? 100 / this.maxCommits : 0;
    },
    style() {
      return {
        width: `${this.count * this.barGraphWidthFactor}%`,
      };
    },
    isFullWidth() {
      return this.position === SIDES.full;
    },
    isLeftSide() {
      return this.position === SIDES.left;
    },
    roundedClass() {
      if (this.isFullWidth) return 'rounded';

      return `rounded-${this.position}`;
    },
    textAlignmentClass() {
      if (this.isFullWidth) return 'text-center';

      return `text-${this.isLeftSide ? SIDES.right : SIDES.left}`;
    },
    positionSideClass() {
      return `position-${this.isLeftSide ? SIDES.right : SIDES.left}-0`;
    },
  },
};
</script>

<template>
  <div :class="{ full: isFullWidth }" class="position-relative float-left pt-1 graph-side h-100">
    <div
      :style="style"
      :class="[roundedClass, positionSideClass]"
      class="position-absolute bar js-graph-bar"
    ></div>
    <span :class="textAlignmentClass" class="d-block pt-1 pr-1 count js-graph-count">
      {{ label }}
    </span>
  </div>
</template>