diff options
Diffstat (limited to 'app/assets/javascripts/analytics/instance_statistics/components/users_chart.vue')
-rw-r--r-- | app/assets/javascripts/analytics/instance_statistics/components/users_chart.vue | 143 |
1 files changed, 0 insertions, 143 deletions
diff --git a/app/assets/javascripts/analytics/instance_statistics/components/users_chart.vue b/app/assets/javascripts/analytics/instance_statistics/components/users_chart.vue deleted file mode 100644 index 73940f028a1..00000000000 --- a/app/assets/javascripts/analytics/instance_statistics/components/users_chart.vue +++ /dev/null @@ -1,143 +0,0 @@ -<script> -import { GlAlert } from '@gitlab/ui'; -import { GlAreaChart } from '@gitlab/ui/dist/charts'; -import produce from 'immer'; -import { sortBy } from 'lodash'; -import { formatDateAsMonth } from '~/lib/utils/datetime_utility'; -import { __ } from '~/locale'; -import * as Sentry from '~/sentry/wrapper'; -import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue'; -import usersQuery from '../graphql/queries/users.query.graphql'; -import { getAverageByMonth } from '../utils'; - -const sortByDate = (data) => sortBy(data, (item) => new Date(item[0]).getTime()); - -export default { - name: 'UsersChart', - components: { GlAlert, GlAreaChart, ChartSkeletonLoader }, - props: { - startDate: { - type: Date, - required: true, - }, - endDate: { - type: Date, - required: true, - }, - totalDataPoints: { - type: Number, - required: true, - }, - }, - data() { - return { - loadingError: null, - users: [], - pageInfo: null, - }; - }, - apollo: { - users: { - query: usersQuery, - variables() { - return { - first: this.totalDataPoints, - after: null, - }; - }, - update(data) { - return data.users?.nodes || []; - }, - result({ data }) { - const { - users: { pageInfo }, - } = data; - this.pageInfo = pageInfo; - this.fetchNextPage(); - }, - error(error) { - this.handleError(error); - }, - }, - }, - i18n: { - yAxisTitle: __('Total users'), - xAxisTitle: __('Month'), - loadUserChartError: __('Could not load the user chart. Please refresh the page to try again.'), - noDataMessage: __('There is no data available.'), - }, - computed: { - isLoading() { - return this.$apollo.queries.users.loading || this.pageInfo?.hasNextPage; - }, - chartUserData() { - const averaged = getAverageByMonth( - this.users.length > this.totalDataPoints - ? this.users.slice(0, this.totalDataPoints) - : this.users, - { shouldRound: true }, - ); - return sortByDate(averaged); - }, - options() { - return { - xAxis: { - name: this.$options.i18n.xAxisTitle, - type: 'category', - axisLabel: { - formatter: formatDateAsMonth, - }, - }, - yAxis: { - name: this.$options.i18n.yAxisTitle, - }, - }; - }, - }, - methods: { - handleError(error) { - this.loadingError = true; - this.users = []; - Sentry.captureException(error); - }, - fetchNextPage() { - if (this.pageInfo?.hasNextPage) { - this.$apollo.queries.users - .fetchMore({ - variables: { first: this.totalDataPoints, after: this.pageInfo.endCursor }, - updateQuery: (previousResult, { fetchMoreResult }) => { - return produce(fetchMoreResult, (newUsers) => { - // eslint-disable-next-line no-param-reassign - newUsers.users.nodes = [...previousResult.users.nodes, ...newUsers.users.nodes]; - }); - }, - }) - .catch(this.handleError); - } - }, - }, -}; -</script> -<template> - <div> - <h3>{{ $options.i18n.yAxisTitle }}</h3> - <gl-alert v-if="loadingError" variant="danger" :dismissible="false" class="gl-mt-3"> - {{ this.$options.i18n.loadUserChartError }} - </gl-alert> - <chart-skeleton-loader v-else-if="isLoading" /> - <gl-alert v-else-if="!chartUserData.length" variant="info" :dismissible="false" class="gl-mt-3"> - {{ $options.i18n.noDataMessage }} - </gl-alert> - <gl-area-chart - v-else - :option="options" - :include-legend-avg-max="true" - :data="[ - { - name: $options.i18n.yAxisTitle, - data: chartUserData, - }, - ]" - /> - </div> -</template> |