diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-11 15:08:52 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-11 15:08:52 +0300 |
commit | 05b5c609cb8c260b10c2eb1b92b711dc82d32c3f (patch) | |
tree | 05253c66806b17c5b1f9f13addab59524d536fc4 /app/assets/javascripts/projects | |
parent | 1078b7bf25c2cb6e03c57da9ae25b0512858556f (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/projects')
4 files changed, 155 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app.vue b/app/assets/javascripts/projects/pipelines/charts/components/app.vue index 4bd72c405ee..4dc1c512689 100644 --- a/app/assets/javascripts/projects/pipelines/charts/components/app.vue +++ b/app/assets/javascripts/projects/pipelines/charts/components/app.vue @@ -1,17 +1,25 @@ <script> +import dateFormat from 'dateformat'; +import { __, sprintf } from '~/locale'; import { GlColumnChart } from '@gitlab/ui/dist/charts'; +import { getDateInPast } from '~/lib/utils/datetime_utility'; import StatisticsList from './statistics_list.vue'; +import PipelinesAreaChart from './pipelines_area_chart.vue'; import { CHART_CONTAINER_HEIGHT, INNER_CHART_HEIGHT, X_AXIS_LABEL_ROTATION, X_AXIS_TITLE_OFFSET, + CHART_DATE_FORMAT, + ONE_WEEK_AGO_DAYS, + ONE_MONTH_AGO_DAYS, } from '../constants'; export default { components: { StatisticsList, GlColumnChart, + PipelinesAreaChart, }, props: { counts: { @@ -22,6 +30,18 @@ export default { type: Object, required: true, }, + lastWeekChartData: { + type: Object, + required: true, + }, + lastMonthChartData: { + type: Object, + required: true, + }, + lastYearChartData: { + type: Object, + required: true, + }, }, data() { return { @@ -30,10 +50,38 @@ export default { }, }; }, + computed: { + areaCharts() { + const { lastWeek, lastMonth, lastYear } = this.$options.chartTitles; + + return [ + this.buildAreaChartData(lastWeek, this.lastWeekChartData), + this.buildAreaChartData(lastMonth, this.lastMonthChartData), + this.buildAreaChartData(lastYear, this.lastYearChartData), + ]; + }, + }, methods: { mergeLabelsAndValues(labels, values) { return labels.map((label, index) => [label, values[index]]); }, + buildAreaChartData(title, data) { + const { labels, totals, success } = data; + + return { + title, + data: [ + { + name: 'all', + data: this.mergeLabelsAndValues(labels, totals), + }, + { + name: 'success', + data: this.mergeLabelsAndValues(labels, success), + }, + ], + }; + }, }, chartContainerHeight: CHART_CONTAINER_HEIGHT, timesChartOptions: { @@ -45,6 +93,22 @@ export default { nameGap: X_AXIS_TITLE_OFFSET, }, }, + get chartTitles() { + const today = dateFormat(new Date(), CHART_DATE_FORMAT); + const pastDate = timeScale => + dateFormat(getDateInPast(new Date(), timeScale), CHART_DATE_FORMAT); + return { + lastWeek: sprintf(__('Pipelines for last week (%{oneWeekAgo} - %{today})'), { + oneWeekAgo: pastDate(ONE_WEEK_AGO_DAYS), + today, + }), + lastMonth: sprintf(__('Pipelines for last month (%{oneMonthAgo} - %{today})'), { + oneMonthAgo: pastDate(ONE_MONTH_AGO_DAYS), + today, + }), + lastYear: __('Pipelines for last year'), + }; + }, }; </script> <template> @@ -68,5 +132,14 @@ export default { /> </div> </div> + <hr /> + <h4 class="my-4">{{ __('Pipelines charts') }}</h4> + <pipelines-area-chart + v-for="(chart, index) in areaCharts" + :key="index" + :chart-data="chart.data" + > + {{ chart.title }} + </pipelines-area-chart> </div> </template> diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue new file mode 100644 index 00000000000..d701f238a2e --- /dev/null +++ b/app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue @@ -0,0 +1,46 @@ +<script> +import { GlAreaChart } from '@gitlab/ui/dist/charts'; +import { s__ } from '~/locale'; +import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue'; +import { CHART_CONTAINER_HEIGHT } from '../constants'; + +export default { + components: { + GlAreaChart, + ResizableChartContainer, + }, + props: { + chartData: { + type: Array, + required: true, + }, + }, + areaChartOptions: { + xAxis: { + name: s__('Pipeline|Date'), + type: 'category', + }, + yAxis: { + name: s__('Pipeline|Pipelines'), + }, + }, + chartContainerHeight: CHART_CONTAINER_HEIGHT, +}; +</script> +<template> + <div class="prepend-top-default"> + <p> + <slot></slot> + </p> + <resizable-chart-container> + <gl-area-chart + slot-scope="{ width }" + :width="width" + :height="$options.chartContainerHeight" + :data="chartData" + :include-legend-avg-max="false" + :option="$options.areaChartOptions" + /> + </resizable-chart-container> + </div> +</template> diff --git a/app/assets/javascripts/projects/pipelines/charts/constants.js b/app/assets/javascripts/projects/pipelines/charts/constants.js index eeb29370e51..5dbe3c01100 100644 --- a/app/assets/javascripts/projects/pipelines/charts/constants.js +++ b/app/assets/javascripts/projects/pipelines/charts/constants.js @@ -5,3 +5,9 @@ export const INNER_CHART_HEIGHT = 200; export const X_AXIS_LABEL_ROTATION = 45; export const X_AXIS_TITLE_OFFSET = 60; + +export const ONE_WEEK_AGO_DAYS = 7; + +export const ONE_MONTH_AGO_DAYS = 31; + +export const CHART_DATE_FORMAT = 'dd mmm'; diff --git a/app/assets/javascripts/projects/pipelines/charts/index.js b/app/assets/javascripts/projects/pipelines/charts/index.js index b0f5f549980..4ae2b729200 100644 --- a/app/assets/javascripts/projects/pipelines/charts/index.js +++ b/app/assets/javascripts/projects/pipelines/charts/index.js @@ -10,8 +10,23 @@ export default () => { successRatio, timesChartLabels, timesChartValues, + lastWeekChartLabels, + lastWeekChartTotals, + lastWeekChartSuccess, + lastMonthChartLabels, + lastMonthChartTotals, + lastMonthChartSuccess, + lastYearChartLabels, + lastYearChartTotals, + lastYearChartSuccess, } = el.dataset; + const parseAreaChartData = (labels, totals, success) => ({ + labels: JSON.parse(labels), + totals: JSON.parse(totals), + success: JSON.parse(success), + }); + return new Vue({ el, name: 'ProjectPipelinesChartsApp', @@ -31,6 +46,21 @@ export default () => { labels: JSON.parse(timesChartLabels), values: JSON.parse(timesChartValues), }, + lastWeekChartData: parseAreaChartData( + lastWeekChartLabels, + lastWeekChartTotals, + lastWeekChartSuccess, + ), + lastMonthChartData: parseAreaChartData( + lastMonthChartLabels, + lastMonthChartTotals, + lastMonthChartSuccess, + ), + lastYearChartData: parseAreaChartData( + lastYearChartLabels, + lastYearChartTotals, + lastYearChartSuccess, + ), }, }), }); |