All files / app/assets/javascripts/analytics/usage_trends/components usage_counts.vue

60% Statements 9/15
28.57% Branches 2/7
40% Functions 2/5
60% Lines 9/15

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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82  2x 2x 2x 2x 2x 2x   2x                 3x                                                                                   19x                                            
<script>
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
import { GlSingleStat } from '@gitlab/ui/dist/charts';
import createFlash from '~/flash';
import { number } from '~/lib/utils/unit_format';
import { __, s__ } from '~/locale';
import usageTrendsCountQuery from '../graphql/queries/usage_trends_count.query.graphql';
 
const defaultPrecision = 0;
 
export default {
  name: 'UsageCounts',
  components: {
    GlSkeletonLoading,
    GlSingleStat,
  },
  data() {
    return {
      counts: [],
    };
  },
  apollo: {
    counts: {
      query: usageTrendsCountQuery,
      update(data) {
        return Object.entries(data).map(([key, obj]) => {
          const label = this.$options.i18n.labels[key];
          const value = obj.nodes?.length ? number(obj.nodes[0].count, defaultPrecision) : null;
 
          return {
            key,
            value,
            label,
          };
        });
      },
      error(error) {
        createFlash({
          message: this.$options.i18n.loadCountsError,
          captureError: true,
          error,
        });
      },
    },
  },
  i18n: {
    labels: {
      users: s__('UsageTrends|Users'),
      projects: s__('UsageTrends|Projects'),
      groups: s__('UsageTrends|Groups'),
      issues: s__('UsageTrends|Issues'),
      mergeRequests: s__('UsageTrends|Merge requests'),
      pipelines: s__('UsageTrends|Pipelines'),
    },
    loadCountsError: __('Could not load usage counts. Please refresh the page to try again.'),
  },
};
</script>
 
<template>
  <div>
    <h2>
      {{ __('Usage Trends') }}
    </h2>
    <div
      class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-my-6 gl-align-items-flex-start"
    >
      <gl-skeleton-loading v-if="$apollo.queries.counts.loading" />
      <template v-else>
        <gl-single-stat
          v-for="count in counts"
          :key="count.key"
          class="gl-pr-9 gl-my-4 gl-md-mt-0 gl-md-mb-0"
          :value="`${count.value}`"
          :title="count.label"
          :should-animate="true"
        />
      </template>
    </div>
  </div>
</template>