diff options
Diffstat (limited to 'app/assets/javascripts/analytics/product_analytics/components')
-rw-r--r-- | app/assets/javascripts/analytics/product_analytics/components/activity_chart.vue | 42 |
1 files changed, 42 insertions, 0 deletions
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..a475ff8fd25 --- /dev/null +++ b/app/assets/javascripts/analytics/product_analytics/components/activity_chart.vue @@ -0,0 +1,42 @@ +<script> +import { GlColumnChart } from '@gitlab/ui/dist/charts'; +import { s__ } from '~/locale'; + +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> |