diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-03 21:10:17 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-03 21:10:17 +0300 |
commit | b7b1a593e418c7f271df19866b13f617b169e77a (patch) | |
tree | f3d5d159830546615f38369eabc72e1e4d92c387 /app/assets/javascripts/vue_shared/components/ci_cd_analytics | |
parent | 0568b9e17a3ab88a1923160047c74cba99bbf30b (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/ci_cd_analytics')
3 files changed, 100 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue new file mode 100644 index 00000000000..2552236a073 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue @@ -0,0 +1,45 @@ +<script> +import { GlAreaChart } from '@gitlab/ui/dist/charts'; +import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue'; +import { CHART_CONTAINER_HEIGHT } from './constants'; + +export default { + name: 'CiCdAnalyticsAreaChart', + components: { + GlAreaChart, + ResizableChartContainer, + }, + props: { + chartData: { + type: Array, + required: true, + }, + areaChartOptions: { + type: Object, + required: true, + }, + }, + chartContainerHeight: CHART_CONTAINER_HEIGHT, +}; +</script> +<template> + <div class="gl-mt-3"> + <p> + <slot></slot> + </p> + <resizable-chart-container> + <gl-area-chart + slot-scope="{ width }" + v-bind="$attrs" + :width="width" + :height="$options.chartContainerHeight" + :data="chartData" + :include-legend-avg-max="false" + :option="areaChartOptions" + > + <slot slot="tooltip-title" name="tooltip-title"></slot> + <slot slot="tooltip-content" name="tooltip-content"></slot> + </gl-area-chart> + </resizable-chart-container> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue new file mode 100644 index 00000000000..f4fd57e4cdc --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue @@ -0,0 +1,54 @@ +<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 }} + + <slot slot="tooltip-title" name="tooltip-title"></slot> + <slot slot="tooltip-content" name="tooltip-content"></slot> + </ci-cd-analytics-area-chart> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/ci_cd_analytics/constants.js b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/constants.js new file mode 100644 index 00000000000..1561674c0ad --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/constants.js @@ -0,0 +1 @@ +export const CHART_CONTAINER_HEIGHT = 300; |