Skip to content

G
gitlab-ce
Commit 6e5c68f3 authored by Angelo Gulina's avatar Angelo Gulina Committed by André Luís
Browse files
Options

Update charts with new waitForCSSLoaded implementation

parent 32d88db6
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 136 deletions
app/assets/javascripts/pages/projects/graphs/charts/index.js
View file @ 6e5c68f3
...@@ -5,149 +5,151 @@ import { __ } from '~/locale'; ...@@ -5,149 +5,151 @@ import { __ } from '~/locale';
import CodeCoverage from '../components/code_coverage.vue'; import CodeCoverage from '../components/code_coverage.vue';
import SeriesDataMixin from './series_data_mixin'; import SeriesDataMixin from './series_data_mixin';
waitForCSSLoaded(() => { document.addEventListener('DOMContentLoaded', () => {
const languagesContainer = document.getElementById('js-languages-chart'); waitForCSSLoaded(() => {
const codeCoverageContainer = document.getElementById('js-code-coverage-chart'); const languagesContainer = document.getElementById('js-languages-chart');
const monthContainer = document.getElementById('js-month-chart'); const codeCoverageContainer = document.getElementById('js-code-coverage-chart');
const weekdayContainer = document.getElementById('js-weekday-chart'); const monthContainer = document.getElementById('js-month-chart');
const hourContainer = document.getElementById('js-hour-chart'); const weekdayContainer = document.getElementById('js-weekday-chart');
const LANGUAGE_CHART_HEIGHT = 300; const hourContainer = document.getElementById('js-hour-chart');
const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => { const LANGUAGE_CHART_HEIGHT = 300;
if (firstDayOfWeek === 0) { const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => {
return weekDays; if (firstDayOfWeek === 0) {
} return weekDays;
}
return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => { return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => {
const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length]; const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length];
return { return {
...acc, ...acc,
[reorderedDayName]: weekDays[reorderedDayName], [reorderedDayName]: weekDays[reorderedDayName],
}; };
}, {}); }, {});
}; };
// eslint-disable-next-line no-new // eslint-disable-next-line no-new
new Vue({ new Vue({
el: languagesContainer, el: languagesContainer,
components: { components: {
GlColumnChart, GlColumnChart,
},
data() {
return {
chartData: JSON.parse(languagesContainer.dataset.chartData),
};
},
computed: {
seriesData() {
return { full: this.chartData.map(d => [d.label, d.value]) };
}, },
}, data() {
render(h) { return {
return h(GlColumnChart, { chartData: JSON.parse(languagesContainer.dataset.chartData),
props: { };
data: this.seriesData, },
xAxisTitle: __('Used programming language'), computed: {
yAxisTitle: __('Percentage'), seriesData() {
xAxisType: 'category', return { full: this.chartData.map(d => [d.label, d.value]) };
},
attrs: {
height: LANGUAGE_CHART_HEIGHT,
}, },
}); },
}, render(h) {
}); return h(GlColumnChart, {
props: {
data: this.seriesData,
xAxisTitle: __('Used programming language'),
yAxisTitle: __('Percentage'),
xAxisType: 'category',
},
attrs: {
height: LANGUAGE_CHART_HEIGHT,
},
});
},
});
// eslint-disable-next-line no-new // eslint-disable-next-line no-new
new Vue({ new Vue({
el: codeCoverageContainer, el: codeCoverageContainer,
render(h) { render(h) {
return h(CodeCoverage, { return h(CodeCoverage, {
props: { props: {
graphEndpoint: codeCoverageContainer.dataset?.graphEndpoint, graphEndpoint: codeCoverageContainer.dataset?.graphEndpoint,
}, },
}); });
}, },
}); });
// eslint-disable-next-line no-new // eslint-disable-next-line no-new
new Vue({ new Vue({
el: monthContainer, el: monthContainer,
components: { components: {
GlColumnChart, GlColumnChart,
}, },
mixins: [SeriesDataMixin], mixins: [SeriesDataMixin],
data() { data() {
return { return {
chartData: JSON.parse(monthContainer.dataset.chartData), chartData: JSON.parse(monthContainer.dataset.chartData),
}; };
}, },
render(h) { render(h) {
return h(GlColumnChart, { return h(GlColumnChart, {
props: { props: {
data: this.seriesData, data: this.seriesData,
xAxisTitle: __('Day of month'), xAxisTitle: __('Day of month'),
yAxisTitle: __('No. of commits'), yAxisTitle: __('No. of commits'),
xAxisType: 'category', xAxisType: 'category',
}, },
}); });
}, },
}); });
// eslint-disable-next-line no-new // eslint-disable-next-line no-new
new Vue({ new Vue({
el: weekdayContainer, el: weekdayContainer,
components: { components: {
GlColumnChart, GlColumnChart,
}, },
data() { data() {
return { return {
chartData: JSON.parse(weekdayContainer.dataset.chartData), 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 { full: data };
}, },
}, computed: {
render(h) { seriesData() {
return h(GlColumnChart, { const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week);
props: { const data = Object.keys(weekDays).reduce((acc, key) => {
data: this.seriesData, acc.push([key, weekDays[key]]);
xAxisTitle: __('Weekday'), return acc;
yAxisTitle: __('No. of commits'), }, []);
xAxisType: 'category', return { full: data };
}, },
}); },
}, render(h) {
}); return h(GlColumnChart, {
props: {
data: this.seriesData,
xAxisTitle: __('Weekday'),
yAxisTitle: __('No. of commits'),
xAxisType: 'category',
},
});
},
});
// eslint-disable-next-line no-new // eslint-disable-next-line no-new
new Vue({ new Vue({
el: hourContainer, el: hourContainer,
components: { components: {
GlColumnChart, GlColumnChart,
}, },
mixins: [SeriesDataMixin], mixins: [SeriesDataMixin],
data() { data() {
return { return {
chartData: JSON.parse(hourContainer.dataset.chartData), chartData: JSON.parse(hourContainer.dataset.chartData),
}; };
}, },
render(h) { render(h) {
return h(GlColumnChart, { return h(GlColumnChart, {
props: { props: {
data: this.seriesData, data: this.seriesData,
xAxisTitle: __('Hour (UTC)'), xAxisTitle: __('Hour (UTC)'),
yAxisTitle: __('No. of commits'), yAxisTitle: __('No. of commits'),
xAxisType: 'category', xAxisType: 'category',
}, },
}); });
}, },
});
}); });
}); });
spec/frontend/helpers/startup_css_helper_spec.js
View file @ 6e5c68f3
import { import { waitForCSSLoaded } from '../../../app/assets/javascripts/helpers/startup_css_helper';
waitForCSSLoaded,
} from '../../../app/assets/javascripts/helpers/startup_css_helper';
describe('waitForCSSLoaded', () => { describe('waitForCSSLoaded', () => {
let mockedCallback; let mockedCallback;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7