debian-mirror-gitlab/app/assets/javascripts/monitoring/components/graph/deployment.vue

74 lines
1.4 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2018-05-09 12:01:36 +05:30
export default {
props: {
deploymentData: {
type: Array,
required: true,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
graphHeight: {
type: Number,
required: true,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
graphHeightOffset: {
type: Number,
required: true,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
},
computed: {
calculatedHeight() {
return this.graphHeight - this.graphHeightOffset;
},
},
methods: {
transformDeploymentGroup(deployment) {
return `translate(${Math.floor(deployment.xPos) - 5}, 20)`;
},
},
};
2018-03-17 18:26:18 +05:30
</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>