Commit 9b4f5801 authored by Savas Vedova's avatar Savas Vedova

Include toolbox for the trends chart

parent da75cd82
......@@ -3,6 +3,7 @@ import { GlLoadingIcon } from '@gitlab/ui';
import { GlLineChart } from '@gitlab/ui/dist/charts';
import createFlash from '~/flash';
import { formatDate, getDateInPast } from '~/lib/utils/datetime_utility';
import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
import { s__, __ } from '~/locale';
import projectsHistoryQuery from '../graphql/queries/project_vulnerabilities_by_day_and_count.query.graphql';
import { createProjectLoadingError } from '../helpers';
......@@ -68,6 +69,7 @@ export default {
return {
chartWidth: 0,
trendsByDay: [],
svgs: {},
};
},
computed: {
......@@ -109,21 +111,49 @@ export default {
shouldShowEmptyState() {
return !this.hasVulnerabilities;
},
chartOptions() {
return {
xAxis: {
name: __('Time'),
key: 'time',
type: 'category',
},
yAxis: {
name: __('Vulnerabilities'),
key: 'vulnerabilities',
type: 'value',
minInterval: 1,
},
toolbox: {
feature: {
dataZoom: {
icon: { zoom: this.svgs['marquee-selection'], back: this.svgs.redo },
},
restore: {
icon: this.svgs.repeat,
},
saveAsImage: {
icon: this.svgs.download,
},
},
},
};
},
},
mounted() {
this.chartWidth = this.$refs.layout.$el.clientWidth;
},
chartOptions: {
xAxis: {
name: __('Time'),
key: 'time',
type: 'category',
},
yAxis: {
name: __('Vulnerabilities'),
key: 'vulnerabilities',
type: 'value',
minInterval: 1,
created() {
['marquee-selection', 'redo', 'repeat', 'download'].forEach(this.setSvg);
},
methods: {
async setSvg(name) {
try {
this.$set(this.svgs, name, `path://${await getSvgIconPathContent(name)}`);
} catch (e) {
// eslint-disable-next-line no-console, @gitlab/require-i18n-strings
console.error('SVG could not be rendered correctly: ', e);
}
},
},
};
......@@ -139,7 +169,7 @@ export default {
class="gl-mt-6"
:width="chartWidth"
:data="dataSeries"
:option="$options.chartOptions"
:option="chartOptions"
:include-legend-avg-max="false"
/>
</template>
......
---
title: Add toolbox for the trends chart in project security dashboard
merge_request: 56316
author:
type: added
......@@ -15,6 +15,10 @@ import {
const localVue = createLocalVue();
localVue.use(VueApollo);
jest.mock('~/lib/utils/icon_utils', () => ({
getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'),
}));
describe('Project Security Charts component', () => {
let wrapper;
......@@ -87,13 +91,24 @@ describe('Project Security Charts component', () => {
return wrapper.vm.$nextTick();
});
it('should display the chart with data', async () => {
it('should display the chart with data', () => {
expect(findLineChart().props('data')).toMatchSnapshot();
});
it('should not display the loading icon', () => {
expect(findLoadingIcon().exists()).toBe(false);
});
it.each([['restore'], ['saveAsImage']])('should contain %i icon', (icon) => {
const option = findLineChart().props('option').toolbox.feature;
expect(option[icon].icon).toBe('path://mockSvgPathContent');
});
it('contains dataZoom config', () => {
const option = findLineChart().props('option').toolbox.feature;
expect(option.dataZoom.icon.zoom).toBe('path://mockSvgPathContent');
expect(option.dataZoom.icon.back).toBe('path://mockSvgPathContent');
});
});
describe('when there is no history data', () => {
......
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