Swap the security chart with the gitlab-ui chart

Adds a direct dependency on gl-line-chart
Uses gitlab-ui defaults where possible

ee/app/assets/javascripts/security_dashboard/components/vulnerability_chart.vue

 <script>
+import _ from 'underscore';
 import dateFormat from 'dateformat';
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlChart } from '@gitlab/ui/dist/charts';
+import GlLineChart from '@gitlab/ui/dist/components/charts/line/line';
 import { __ } from '~/locale';
 import ChartTooltip from './vulnerability_chart_tooltip.vue';
 import ChartButtons from './vulnerability_chart_buttons.vue';
@@ -12,7 +13,7 @@ import ResizableChartContainer from '~/vue_shared/components/resizable_chart/res
 export default {
   name: 'VulnerabilityChart',
   components: {
-    GlChart,
+    GlLineChart,
     ChartTooltip,
     ChartButtons,
     ResizableChartContainer,
@@ -48,7 +49,6 @@ export default {
     ...mapState('vulnerabilities', [
       'vulnerabilitiesHistory',
       'vulnerabilitiesHistoryDayRange',
-      'vulnerabilitiesHistoryShowSplitLine',
       'vulnerabilitiesHistoryMaxDayInterval',
     ]),
     ...mapGetters('vulnerabilities', ['getFilteredVulnerabilitiesHistory']),
@@ -58,34 +58,26 @@ export default {
         const data = this.getFilteredVulnerabilitiesHistory(name);
 
         return {
-          borderWidth: 2,
           color,
+          lineStyle: {
+            color,
+          },
           data,
           name,
-          symbol: 'circle',
-          symbolSize: 6,
-          type: 'line',
         };
       });
     },
     options() {
       return {
         grid: {
-          bottom: 85,
+          bottom: 70,
           left: 75,
           right: 15,
           top: 10,
         },
         tooltip: {
-          backgroundColor: '#fff',
-          borderColor: 'rgba(0, 0, 0, 0.1)',
-          borderWidth: 1,
-          confine: true,
           formatter: this.renderTooltip,
           padding: 0,
-          textStyle: {
-            color: '#4F4F4F',
-          },
           trigger: 'axis',
         },
         xAxis: {
@@ -93,45 +85,22 @@ export default {
             color: '#707070',
             formatter: date => dateFormat(date, 'd mmm'),
             margin: 8,
-            rotate: 45,
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#dedede',
-              width: 2,
-            },
-          },
-          splitLine: {
-            show: this.vulnerabilitiesHistoryShowSplitLine,
-          },
-          axisTick: {
-            show: false,
           },
           maxInterval: DAY_IN_MS * this.vulnerabilitiesHistoryMaxDayInterval,
           min: Date.now() - DAY_IN_MS * this.vulnerabilitiesHistoryDayRange,
           name: 'Date',
-          nameGap: 50,
+          nameGap: 35,
           nameLocation: 'center',
           nameTextStyle: {
             color: '#2e2e2e',
             fontWeight: 'bold',
           },
-          splitNumber: 12,
           type: 'time',
         },
         yAxis: {
           axisLabel: {
             color: '#707070',
           },
-          axisLine: {
-            lineStyle: {
-              color: '#dedede',
-              width: 2,
-            },
-          },
-          axisTick: {
-            show: false,
-          },
           boundaryGap: [0, '5%'],
           name: 'Vulnerabilities',
           nameGap: 42,
@@ -144,18 +113,6 @@ export default {
           minInterval: 1,
           type: 'value',
         },
-        legend: {
-          bottom: 0,
-          icon: 'path://M0,0H120V40H0Z',
-          itemGap: 15,
-          left: 70,
-          textStyle: {
-            color: '#4F4F4F',
-            fontWeight: 'bold',
-          },
-          type: 'scroll',
-        },
-        series: this.series,
       };
     },
     days() {
@@ -165,10 +122,10 @@ export default {
   },
   methods: {
     ...mapActions('vulnerabilities', ['setVulnerabilitiesHistoryDayRange']),
-    renderTooltip(params, ticket, callback) {
+    noop: _.noop, // Used to tell line-chart to render external tooltip
+    renderTooltip(params) {
       this.tooltipTitle = dateFormat(params[0].axisValue, 'd mmmm');
       this.tooltipEntries = params;
-      this.$nextTick(() => callback(ticket, this.$refs.tooltip.$el.innerHTML));
       return ' ';
     },
   },
@@ -192,20 +149,18 @@ export default {
     <div class="vulnerabilities-chart">
       <div class="vulnerabilities-chart-wrapper">
         <resizable-chart-container>
-          <gl-chart
-            slot-scope="{ width, height }"
-            :options="options"
+          <gl-line-chart
+            slot-scope="{ width }"
             :width="width"
-            :height="height"
-            :disable-theme="true"
-          />
+            :option="options"
+            :data="series"
+            :format-tooltip-text="noop"
+            :include-legend-avg-max="false"
+          >
+            <span slot="tooltipTitle">{{ tooltipTitle }}</span>
+            <chart-tooltip slot="tooltipContent" :entries="tooltipEntries" />
+          </gl-line-chart>
         </resizable-chart-container>
-        <chart-tooltip
-          v-show="false"
-          ref="tooltip"
-          :title="tooltipTitle"
-          :entries="tooltipEntries"
-        />
       </div>
     </div>
   </div>

ee/app/assets/javascripts/security_dashboard/components/vulnerability_chart_tooltip.vue

@@ -7,11 +7,6 @@ export default {
     VulnerabilityChartLabel,
   },
   props: {
-    title: {
-      type: String,
-      required: false,
-      default: '',
-    },
     entries: {
       type: Array,
       required: true,
@@ -21,18 +16,13 @@ export default {
 </script>
 
 <template>
-  <div class="card">
-    <div class="card-header">
-      <strong> {{ title }} </strong>
-    </div>
-    <div class="card-body">
-      <vulnerability-chart-label
-        v-for="entry in entries"
-        :key="entry.seriesId + entry.dataIndex"
-        :name="entry.seriesName"
-        :value="entry.data[1]"
-        :color="entry.color"
-      />
-    </div>
+  <div>
+    <vulnerability-chart-label
+      v-for="entry in entries"
+      :key="entry.seriesId + entry.dataIndex"
+      :name="entry.seriesName"
+      :value="entry.data[1]"
+      :color="entry.color"
+    />
   </div>
 </template>

ee/app/assets/javascripts/security_dashboard/store/modules/vulnerabilities/mutations.js

@@ -44,11 +44,8 @@ export default {
   },
   [types.SET_VULNERABILITIES_HISTORY_DAY_RANGE](state, days) {
     state.vulnerabilitiesHistoryDayRange = days;
-    state.vulnerabilitiesHistoryShowSplitLine = days <= DAYS.THIRTY;
 
     if (days <= DAYS.THIRTY) {
-      state.vulnerabilitiesHistoryMaxDayInterval = 1;
-    } else if (days > DAYS.THIRTY && days <= DAYS.SIXTY) {
       state.vulnerabilitiesHistoryMaxDayInterval = 7;
     } else if (days > DAYS.SIXTY) {
       state.vulnerabilitiesHistoryMaxDayInterval = 14;

ee/app/assets/javascripts/security_dashboard/store/modules/vulnerabilities/state.js

@@ -11,7 +11,6 @@ export default () => ({
   errorLoadingVulnerabilitiesHistory: false,
   vulnerabilitiesHistory: {},
   vulnerabilitiesHistoryDayRange: 90,
-  vulnerabilitiesHistoryShowSplitLine: false,
   vulnerabilitiesHistoryMaxDayInterval: 7,
   pageInfo: {},
   vulnerabilitiesCountEndpoint: null,

ee/app/assets/stylesheets/components/vulnerability_chart.scss

@@ -3,4 +3,3 @@ $trans-white: rgba(255, 255, 255, 0);
 .vulnerabilities-chart-wrapper {
   -webkit-overflow-scrolling: touch;
 }
-

ee/changelogs/unreleased/tr-upgrade-line-chart.yml

+---
+title: Upgrade group security dashboard to use gitlab-ui line chart
+merge_request: 10479
+author:
+type: changed

ee/spec/javascripts/security_dashboard/components/vulnerability_chart_tooltip_spec.js

@@ -5,7 +5,6 @@ import mountComponent from 'spec/helpers/vue_mount_component_helper';
 describe('Vulnerability Chart Tooltip component', () => {
   const Component = Vue.extend(component);
   const props = {
-    title: 'Tooltip Title',
     entries: [
       {
         dataIndex: 1,
@@ -40,12 +39,6 @@ describe('Vulnerability Chart Tooltip component', () => {
     vm.$destroy();
   });
 
-  it('should render the title', () => {
-    const header = vm.$el.querySelector('.card-header');
-
-    expect(header.textContent).toContain(props.title);
-  });
-
   it('should render three legends', () => {
     const legends = vm.$el.querySelectorAll('.js-chart-label');
 

ee/spec/javascripts/security_dashboard/store/vulnerabilities/mutations_spec.js

@@ -216,29 +216,9 @@ describe('vulnerabilities module mutations', () => {
       expect(state.vulnerabilitiesHistoryDayRange).toEqual(DAYS.THIRTY);
     });
 
-    it('should set the vulnerabilitiesHistoryShowSplitLine to true if 30 days or under', () => {
+    it('should set the vulnerabilitiesHistoryMaxDayInterval to 7 if days are 60 and under', () => {
       mutations[types.SET_VULNERABILITIES_HISTORY_DAY_RANGE](state, DAYS.THIRTY);
 
-      expect(state.vulnerabilitiesHistoryShowSplitLine).toEqual(true);
-    });
-
-    it('should set the vulnerabilitiesHistoryShowSplitLine to false if 30 days or over', () => {
-      mutations[types.SET_VULNERABILITIES_HISTORY_DAY_RANGE](state, DAYS.SIXTY);
-
-      expect(state.vulnerabilitiesHistoryShowSplitLine).toEqual(false);
-    });
-
-    it('should set the vulnerabilitiesHistoryMaxDayInterval to 1 if days are 30 and under', () => {
-      mutations[types.SET_VULNERABILITIES_HISTORY_DAY_RANGE](state, DAYS.THIRTY);
-
-      expect(state.vulnerabilitiesHistoryMaxDayInterval).toEqual(1);
-    });
-
-    it('should set the vulnerabilitiesHistoryMaxDayInterval to 7 if between 30 and 60', () => {
-      const days = 45;
-
-      mutations[types.SET_VULNERABILITIES_HISTORY_DAY_RANGE](state, days);
-
       expect(state.vulnerabilitiesHistoryMaxDayInterval).toEqual(7);
     });