All files / app/assets/javascripts/vue_shared/components/ci_cd_analytics ci_cd_analytics_charts.vue

100% Statements 8/8
100% Branches 2/2
100% Functions 6/6
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58  6x 6x 6x                                   5x           17x     6x     5x         41x                                      
<script>
import { GlSegmentedControl } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import CiCdAnalyticsAreaChart from './ci_cd_analytics_area_chart.vue';
 
export default {
  components: {
    GlSegmentedControl,
    CiCdAnalyticsAreaChart,
  },
  props: {
    charts: {
      required: true,
      type: Array,
    },
    chartOptions: {
      required: true,
      type: Object,
    },
  },
  data() {
    return {
      selectedChart: 0,
    };
  },
  computed: {
    chartRanges() {
      return this.charts.map(({ title }, index) => ({ text: title, value: index }));
    },
    chart() {
      return this.charts[this.selectedChart];
    },
    dateRange() {
      return sprintf(s__('CiCdAnalytics|Date range: %{range}'), { range: this.chart.range });
    },
  },
};
</script>
<template>
  <div>
    <gl-segmented-control v-model="selectedChart" :options="chartRanges" class="gl-mb-4" />
    <ci-cd-analytics-area-chart
      v-if="chart"
      v-bind="$attrs"
      :chart-data="chart.data"
      :area-chart-options="chartOptions"
    >
      {{ dateRange }}
      <template #tooltip-title>
        <slot name="tooltip-title"></slot>
      </template>
      <template #tooltip-content>
        <slot name="tooltip-content"></slot>
      </template>
    </ci-cd-analytics-area-chart>
  </div>
</template>