<script>
  export default {
    props: {
      deploymentData: {
        type: Array,
        required: true,
      },
      graphHeight: {
        type: Number,
        required: true,
      },
      graphHeightOffset: {
        type: Number,
        required: true,
      },
    },

    computed: {
      calculatedHeight() {
        return this.graphHeight - this.graphHeightOffset;
      },
    },

    methods: {
      transformDeploymentGroup(deployment) {
        return `translate(${Math.floor(deployment.xPos) - 5}, 20)`;
      },
    },
  };
</script>
<template>
  <g class="deploy-info">
    <g
      v-for="(deployment, index) in deploymentData"
      :key="index"
      :transform="transformDeploymentGroup(deployment)">
      <rect
        x="0"
        y="0"
        :height="calculatedHeight"
        width="3"
        fill="url(#shadow-gradient)"
      />
      <line
        class="deployment-line"
        x1="0"
        y1="0"
        x2="0"
        :y2="calculatedHeight"
        stroke="#000"
      />
    </g>
    <svg
      height="0"
      width="0"
    >
      <defs>
        <linearGradient
          id="shadow-gradient"
        >
          <stop
            offset="0%"
            stop-color="#000"
            stop-opacity="0.4"
          />
          <stop
            offset="100%"
            stop-color="#000"
            stop-opacity="0"
          />
        </linearGradient>
      </defs>
    </svg>
  </g>
</template>