debian-mirror-gitlab/app/assets/javascripts/monitoring/components/graph/deployment.vue
2018-11-08 19:23:39 +05:30

73 lines
1.4 KiB
Vue

<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
:height="calculatedHeight"
x="0"
y="0"
width="3"
fill="url(#shadow-gradient)"
/>
<line
:y2="calculatedHeight"
class="deployment-line"
x1="0"
y1="0"
x2="0"
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>