summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/monitoring/components/graph/track_line.vue
blob: e04fd9c1f35962997a4e4b539e12882f7e3632c2 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
export default {
  name: 'TrackLine',
  props: {
    track: {
      type: Object,
      required: true,
    },
  },
  computed: {
    stylizedLine() {
      if (this.track.lineStyle === 'dashed') return '6, 3';
      if (this.track.lineStyle === 'dotted') return '3, 3';
      return null;
    },
  },
};
</script>
<template>
  <td>
    <svg
      width="16"
      height="8">
      <line
        :stroke-dasharray="stylizedLine"
        :stroke="track.lineColor"
        :x1="0"
        :x2="16"
        :y1="4"
        :y2="4"
        stroke-width="4"
      />
    </svg>
  </td>
</template>