diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-30 18:09:40 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-30 18:09:40 +0300 |
commit | e65a1b9830b8746fefd18744a39d559cbf58c99e (patch) | |
tree | ba99958692b0b28611f0a7141415e774a0b520a6 /app/assets/javascripts/analytics | |
parent | 55b5a8778c6f30a0e03059c59a510ff0d6f5b761 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/analytics')
-rw-r--r-- | app/assets/javascripts/analytics/product_analytics/activity_charts_bundle.js | 28 | ||||
-rw-r--r-- | app/assets/javascripts/analytics/product_analytics/components/activity_chart.vue | 42 |
2 files changed, 70 insertions, 0 deletions
diff --git a/app/assets/javascripts/analytics/product_analytics/activity_charts_bundle.js b/app/assets/javascripts/analytics/product_analytics/activity_charts_bundle.js new file mode 100644 index 00000000000..d1f4b537b11 --- /dev/null +++ b/app/assets/javascripts/analytics/product_analytics/activity_charts_bundle.js @@ -0,0 +1,28 @@ +import Vue from 'vue'; +import ActivityChart from './components/activity_chart.vue'; + +export default () => { + const containers = document.querySelectorAll('.js-project-analytics-chart'); + + if (!containers) { + return false; + } + + return containers.forEach(container => { + const { chartData } = container.dataset; + const formattedData = JSON.parse(chartData); + + return new Vue({ + el: container, + provide: { + formattedData, + }, + components: { + ActivityChart, + }, + render(createElement) { + return createElement('activity-chart'); + }, + }); + }); +}; diff --git a/app/assets/javascripts/analytics/product_analytics/components/activity_chart.vue b/app/assets/javascripts/analytics/product_analytics/components/activity_chart.vue new file mode 100644 index 00000000000..c1441a012ab --- /dev/null +++ b/app/assets/javascripts/analytics/product_analytics/components/activity_chart.vue @@ -0,0 +1,42 @@ +<script> +import { s__ } from '~/locale'; +import { GlColumnChart } from '@gitlab/ui/dist/charts'; + +export default { + i18n: { + noDataMsg: s__( + 'ProductAnalytics|There is no data for this type of chart currently. Please see the Setup tab if you have not configured the product analytics tool already.', + ), + }, + components: { + GlColumnChart, + }, + inject: { + formattedData: { + default: {}, + }, + }, + computed: { + seriesData() { + return { + full: this.formattedData.keys.map((val, idx) => [val, this.formattedData.values[idx]]), + }; + }, + }, +}; +</script> + +<template> + <div class="gl-xs-w-full"> + <gl-column-chart + v-if="formattedData.keys" + :data="seriesData" + :x-axis-title="__('Value')" + :y-axis-title="__('Number of events')" + :x-axis-type="'category'" + /> + <p v-else data-testid="noActivityChartData"> + {{ $options.i18n.noDataMsg }} + </p> + </div> +</template> |