diff options
Diffstat (limited to 'app/assets/javascripts/pages/projects/graphs')
-rw-r--r-- | app/assets/javascripts/pages/projects/graphs/charts/index.js | 268 | ||||
-rw-r--r-- | app/assets/javascripts/pages/projects/graphs/show/index.js | 2 |
2 files changed, 134 insertions, 136 deletions
diff --git a/app/assets/javascripts/pages/projects/graphs/charts/index.js b/app/assets/javascripts/pages/projects/graphs/charts/index.js index ea38b8e15a4..c217bc5a727 100644 --- a/app/assets/javascripts/pages/projects/graphs/charts/index.js +++ b/app/assets/javascripts/pages/projects/graphs/charts/index.js @@ -7,151 +7,149 @@ import SeriesDataMixin from './series_data_mixin'; const seriesDataToBarData = (raw) => Object.entries(raw).map(([name, data]) => ({ name, data })); -document.addEventListener('DOMContentLoaded', () => { - waitForCSSLoaded(() => { - const languagesContainer = document.getElementById('js-languages-chart'); - const codeCoverageContainer = document.getElementById('js-code-coverage-chart'); - const monthContainer = document.getElementById('js-month-chart'); - const weekdayContainer = document.getElementById('js-weekday-chart'); - const hourContainer = document.getElementById('js-hour-chart'); - const LANGUAGE_CHART_HEIGHT = 300; - const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => { - if (firstDayOfWeek === 0) { - return weekDays; - } +waitForCSSLoaded(() => { + const languagesContainer = document.getElementById('js-languages-chart'); + const codeCoverageContainer = document.getElementById('js-code-coverage-chart'); + const monthContainer = document.getElementById('js-month-chart'); + const weekdayContainer = document.getElementById('js-weekday-chart'); + const hourContainer = document.getElementById('js-hour-chart'); + const LANGUAGE_CHART_HEIGHT = 300; + const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => { + if (firstDayOfWeek === 0) { + return weekDays; + } - return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => { - const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length]; + return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => { + const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length]; - return { - ...acc, - [reorderedDayName]: weekDays[reorderedDayName], - }; - }, {}); - }; + return { + ...acc, + [reorderedDayName]: weekDays[reorderedDayName], + }; + }, {}); + }; - // eslint-disable-next-line no-new - new Vue({ - el: languagesContainer, - components: { - GlColumnChart, + // eslint-disable-next-line no-new + new Vue({ + el: languagesContainer, + components: { + GlColumnChart, + }, + data() { + return { + chartData: JSON.parse(languagesContainer.dataset.chartData), + }; + }, + computed: { + seriesData() { + return [{ name: 'full', data: this.chartData.map((d) => [d.label, d.value]) }]; }, - data() { - return { - chartData: JSON.parse(languagesContainer.dataset.chartData), - }; - }, - computed: { - seriesData() { - return [{ name: 'full', data: this.chartData.map((d) => [d.label, d.value]) }]; + }, + render(h) { + return h(GlColumnChart, { + props: { + bars: this.seriesData, + xAxisTitle: __('Used programming language'), + yAxisTitle: __('Percentage'), + xAxisType: 'category', }, - }, - render(h) { - return h(GlColumnChart, { - props: { - bars: this.seriesData, - xAxisTitle: __('Used programming language'), - yAxisTitle: __('Percentage'), - xAxisType: 'category', - }, - attrs: { - height: LANGUAGE_CHART_HEIGHT, - }, - }); - }, - }); + attrs: { + height: LANGUAGE_CHART_HEIGHT, + }, + }); + }, + }); - // eslint-disable-next-line no-new - new Vue({ - el: codeCoverageContainer, - render(h) { - return h(CodeCoverage, { - props: { - graphEndpoint: codeCoverageContainer.dataset?.graphEndpoint, - }, - }); - }, - }); + // eslint-disable-next-line no-new + new Vue({ + el: codeCoverageContainer, + render(h) { + return h(CodeCoverage, { + props: { + graphEndpoint: codeCoverageContainer.dataset?.graphEndpoint, + }, + }); + }, + }); - // eslint-disable-next-line no-new - new Vue({ - el: monthContainer, - components: { - GlColumnChart, - }, - mixins: [SeriesDataMixin], - data() { - return { - chartData: JSON.parse(monthContainer.dataset.chartData), - }; - }, - render(h) { - return h(GlColumnChart, { - props: { - bars: seriesDataToBarData(this.seriesData), - xAxisTitle: __('Day of month'), - yAxisTitle: __('No. of commits'), - xAxisType: 'category', - }, - }); - }, - }); + // eslint-disable-next-line no-new + new Vue({ + el: monthContainer, + components: { + GlColumnChart, + }, + mixins: [SeriesDataMixin], + data() { + return { + chartData: JSON.parse(monthContainer.dataset.chartData), + }; + }, + render(h) { + return h(GlColumnChart, { + props: { + bars: seriesDataToBarData(this.seriesData), + xAxisTitle: __('Day of month'), + yAxisTitle: __('No. of commits'), + xAxisType: 'category', + }, + }); + }, + }); - // eslint-disable-next-line no-new - new Vue({ - el: weekdayContainer, - components: { - GlColumnChart, - }, - data() { - return { - chartData: JSON.parse(weekdayContainer.dataset.chartData), - }; + // eslint-disable-next-line no-new + new Vue({ + el: weekdayContainer, + components: { + GlColumnChart, + }, + data() { + return { + chartData: JSON.parse(weekdayContainer.dataset.chartData), + }; + }, + computed: { + seriesData() { + const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week); + const data = Object.keys(weekDays).reduce((acc, key) => { + acc.push([key, weekDays[key]]); + return acc; + }, []); + return [{ name: 'full', data }]; }, - computed: { - seriesData() { - const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week); - const data = Object.keys(weekDays).reduce((acc, key) => { - acc.push([key, weekDays[key]]); - return acc; - }, []); - return [{ name: 'full', data }]; + }, + render(h) { + return h(GlColumnChart, { + props: { + bars: this.seriesData, + xAxisTitle: __('Weekday'), + yAxisTitle: __('No. of commits'), + xAxisType: 'category', }, - }, - render(h) { - return h(GlColumnChart, { - props: { - bars: this.seriesData, - xAxisTitle: __('Weekday'), - yAxisTitle: __('No. of commits'), - xAxisType: 'category', - }, - }); - }, - }); + }); + }, + }); - // eslint-disable-next-line no-new - new Vue({ - el: hourContainer, - components: { - GlColumnChart, - }, - mixins: [SeriesDataMixin], - data() { - return { - chartData: JSON.parse(hourContainer.dataset.chartData), - }; - }, - render(h) { - return h(GlColumnChart, { - props: { - bars: seriesDataToBarData(this.seriesData), - xAxisTitle: __('Hour (UTC)'), - yAxisTitle: __('No. of commits'), - xAxisType: 'category', - }, - }); - }, - }); + // eslint-disable-next-line no-new + new Vue({ + el: hourContainer, + components: { + GlColumnChart, + }, + mixins: [SeriesDataMixin], + data() { + return { + chartData: JSON.parse(hourContainer.dataset.chartData), + }; + }, + render(h) { + return h(GlColumnChart, { + props: { + bars: seriesDataToBarData(this.seriesData), + xAxisTitle: __('Hour (UTC)'), + yAxisTitle: __('No. of commits'), + xAxisType: 'category', + }, + }); + }, }); }); diff --git a/app/assets/javascripts/pages/projects/graphs/show/index.js b/app/assets/javascripts/pages/projects/graphs/show/index.js index 09d9c78c446..4f5a5bfe6fe 100644 --- a/app/assets/javascripts/pages/projects/graphs/show/index.js +++ b/app/assets/javascripts/pages/projects/graphs/show/index.js @@ -1,3 +1,3 @@ import initContributorsGraphs from '~/contributors'; -document.addEventListener('DOMContentLoaded', initContributorsGraphs); +initContributorsGraphs(); |