Commit 10d44ce7 authored by Anshul Riyal's avatar Anshul Riyal

Refactored statistics chart responsiveness

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/81457
parent 6172b14a
<script>
import { GlResizeObserverDirective } from '@gitlab/ui';
import { GlAreaChart } from '@gitlab/ui/dist/charts';
import dateFormat from 'dateformat';
import { isFunction } from 'lodash';
import { COLORS, DATE_FORMATS, TIME } from './constants';
......@@ -11,9 +9,6 @@ export default {
components: {
GlAreaChart,
},
directives: {
GlResizeObserverDirective,
},
props: {
data: {
type: Object,
......@@ -87,18 +82,13 @@ export default {
onChartCreated(chartInstance) {
this.chartInstance = chartInstance;
},
onResize() {
if (isFunction(this.chartInstance?.resize)) {
this.chartInstance.resize();
}
},
},
};
</script>
<template>
<gl-area-chart
v-gl-resize-observer-directive="onResize"
:responsive="true"
:data="chartData"
:option="chartOptions"
:include-legend-avg-max="false"
......
......@@ -4,6 +4,7 @@ exports[`StatisticsHistory component chart tooltip renders the title and series
<div
data="[object Object],[object Object]"
option="[object Object]"
responsive="true"
>
<div>
Dec 4, 2019 12:00am (Time)
......
import { GlAreaChart } from '@gitlab/ui/dist/charts';
import { shallowMount } from '@vue/test-utils';
import Vue, { nextTick } from 'vue';
import { nextTick } from 'vue';
import { TOTAL_REQUESTS, ANOMALOUS_REQUESTS } from 'ee/threat_monitoring/components/constants';
import StatisticsHistory from 'ee/threat_monitoring/components/statistics_history.vue';
import { mockNominalHistory, mockAnomalousHistory } from '../mocks/mock_data';
let resizeCallback = null;
const MockResizeObserverDirective = {
bind(el, { value }) {
resizeCallback = value;
},
simulateResize() {
// Let tests fail if callback throws or isn't callable
resizeCallback();
},
unbind() {
resizeCallback = null;
},
};
Vue.directive('gl-resize-observer-directive', MockResizeObserverDirective);
describe('StatisticsHistory component', () => {
let wrapper;
......@@ -75,38 +57,6 @@ describe('StatisticsHistory component', () => {
});
});
describe('given the component needs to resize', () => {
let mockChartInstance;
beforeEach(() => {
factory();
mockChartInstance = {
resize: jest.fn(),
};
});
describe('given the chart has not emitted the created event', () => {
beforeEach(() => {
MockResizeObserverDirective.simulateResize();
});
it('there is no attempt to resize the chart instance', () => {
expect(mockChartInstance.resize).not.toHaveBeenCalled();
});
});
describe('given the chart has emitted the created event', () => {
beforeEach(() => {
findChart().vm.$emit('created', mockChartInstance);
MockResizeObserverDirective.simulateResize();
});
it('the chart instance is resized', () => {
expect(mockChartInstance.resize).toHaveBeenCalledTimes(1);
});
});
});
describe('chart tooltip', () => {
beforeEach(async () => {
const mockParams = {
......
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