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

<script>
  import { formatRelevantDigits } from '../../../lib/utils/number_utils';

  export default {
    props: {
      graphWidth: {
        type: Number,
        required: true,
      },
      graphHeight: {
        type: Number,
        required: true,
      },
      margin: {
        type: Object,
        required: true,
      },
      measurements: {
        type: Object,
        required: true,
      },
      legendTitle: {
        type: String,
        required: true,
      },
      yAxisLabel: {
        type: String,
        required: true,
      },
      timeSeries: {
        type: Array,
        required: true,
      },
      unitOfDisplay: {
        type: String,
        required: true,
      },
      currentDataIndex: {
        type: Number,
        required: true,
      },
      showLegendGroup: {
        type: Boolean,
        required: false,
        default: true,
      },
    },
    data() {
      return {
        yLabelWidth: 0,
        yLabelHeight: 0,
        seriesXPosition: 0,
        metricUsageXPosition: 0,
      };
    },
    computed: {
      textTransform() {
        const yCoordinate = (((this.graphHeight - this.margin.top)
                          + this.measurements.axisLabelLineOffset) / 2) || 0;

        return `translate(15, ${yCoordinate}) rotate(-90)`;
      },

      rectTransform() {
        const yCoordinate = (((this.graphHeight - this.margin.top)
                            + this.measurements.axisLabelLineOffset) / 2)
                            + (this.yLabelWidth / 2) || 0;

        return `translate(0, ${yCoordinate}) rotate(-90)`;
      },

      xPosition() {
        return (((this.graphWidth + this.measurements.axisLabelLineOffset) / 2)
               - this.margin.right) || 0;
      },

      yPosition() {
        return ((this.graphHeight - this.margin.top) + this.measurements.axisLabelLineOffset) || 0;
      },

    },
    mounted() {
      this.$nextTick(() => {
        const bbox = this.$refs.ylabel.getBBox();
        this.metricUsageXPosition = 0;
        this.seriesXPosition = 0;
        if (this.$refs.legendTitleSvg != null) {
          this.seriesXPosition = this.$refs.legendTitleSvg[0].getBBox().width;
        }
        if (this.$refs.seriesTitleSvg != null) {
          this.metricUsageXPosition = this.$refs.seriesTitleSvg[0].getBBox().width;
        }
        this.yLabelWidth = bbox.width + 10; // Added some padding
        this.yLabelHeight = bbox.height + 5;
      });
    },
    methods: {
      translateLegendGroup(index) {
        return `translate(0, ${12 * (index)})`;
      },

      formatMetricUsage(series) {
        const value = series.values[this.currentDataIndex] &&
          series.values[this.currentDataIndex].value;
        if (isNaN(value)) {
          return '-';
        }
        return `${formatRelevantDigits(value)} ${this.unitOfDisplay}`;
      },

      createSeriesString(index, series) {
        if (series.metricTag) {
          return `${series.metricTag} ${this.formatMetricUsage(series)}`;
        }
        return `${this.legendTitle} series ${index + 1} ${this.formatMetricUsage(series)}`;
      },

      strokeDashArray(type) {
        if (type === 'dashed') return '6, 3';
        if (type === 'dotted') return '3, 3';
        return null;
      },
    },
  };
</script>
<template>
  <g class="axis-label-container">
    <line
      class="label-x-axis-line"
      stroke="#000000"
      stroke-width="1"
      x1="10"
      :y1="yPosition"
      :x2="graphWidth + 20"
      :y2="yPosition"
    />
    <line
      class="label-y-axis-line"
      stroke="#000000"
      stroke-width="1"
      x1="10"
      y1="0"
      :x2="10"
      :y2="yPosition"
    />
    <rect
      class="rect-axis-text"
      :transform="rectTransform"
      :width="yLabelWidth"
      :height="yLabelHeight"
    />
    <text
      class="label-axis-text y-label-text"
      text-anchor="middle"
      :transform="textTransform"
      ref="ylabel"
    >
      {{ yAxisLabel }}
    </text>
    <rect
      class="rect-axis-text"
      :x="xPosition + 60"
      :y="graphHeight - 80"
      width="35"
      height="50"
    />
    <text
      class="label-axis-text x-label-text"
      :x="xPosition + 60"
      :y="yPosition"
      dy=".35em"
    >
      Time
    </text>
    <template v-if="showLegendGroup">
      <g
        class="legend-group"
        v-for="(series, index) in timeSeries"
        :key="index"
        :transform="translateLegendGroup(index)"
      >
        <line
          :stroke="series.lineColor"
          :stroke-width="measurements.legends.height"
          :stroke-dasharray="strokeDashArray(series.lineStyle)"
          :x1="measurements.legends.offsetX"
          :x2="measurements.legends.offsetX + measurements.legends.width"
          :y1="graphHeight - measurements.legends.offsetY"
          :y2="graphHeight - measurements.legends.offsetY"
        />
        <text
          v-if="timeSeries.length > 1"
          class="legend-metric-title"
          ref="legendTitleSvg"
          x="38"
          :y="graphHeight - 30"
        >
          {{ createSeriesString(index, series) }}
        </text>
        <text
          v-else
          class="legend-metric-title"
          ref="legendTitleSvg"
          x="38"
          :y="graphHeight - 30"
        >
          {{ legendTitle }} {{ formatMetricUsage(series) }}
        </text>
      </g>
    </template>
  </g>
</template>