Commit 75d3a2b6 authored by Michael Lunøe's avatar Michael Lunøe Committed by Phil Hughes

Feat(analytics/insights): load charts individually

parent 0d9f0596
......@@ -20,11 +20,13 @@ export default {
props: {
loaded: {
type: Boolean,
required: true,
required: false,
default: false,
},
type: {
type: String,
required: true,
required: false,
default: null,
},
title: {
type: String,
......@@ -38,7 +40,8 @@ export default {
},
data: {
type: Object,
required: true,
required: false,
default: null,
},
error: {
type: String,
......@@ -150,7 +153,7 @@ export default {
@created="onChartCreated"
/>
</resizable-chart-container>
<div v-else class="insights-chart">
<div v-else-if="error" class="insights-chart">
<insights-chart-error
:chart-name="title"
:title="__('This chart could not be displayed')"
......
......@@ -74,7 +74,7 @@ export default {
<div class="insights-page" data-qa-selector="insights_page">
<div v-if="hasChartsConfigured" class="js-insights-page-container">
<h4 class="text-center">{{ pageConfig.title }}</h4>
<div v-if="!pageLoading" class="insights-charts" data-qa-selector="insights_charts">
<div class="insights-charts" data-qa-selector="insights_charts">
<insights-chart
v-for="({ loaded, type, description, data, error }, key, index) in chartData"
:key="index"
......@@ -86,7 +86,7 @@ export default {
:error="error"
/>
</div>
<div v-else class="insights-chart-loading text-center">
<div v-if="pageLoading" class="insights-chart-loading text-center p-5">
<gl-loading-icon :inline="true" size="lg" />
</div>
</div>
......
---
title: 'Analytics Insights page: Load charts individually, instead of waiting for
all data to load before displaying the page'
merge_request: 34290
author:
type: changed
......@@ -65,11 +65,21 @@ describe('Insights page component', () => {
});
});
it('does not display chart area', () => {
it('does display chart area', () => {
return component.$nextTick(() => {
expect(component.$el.querySelector('.js-insights-page-container .insights-charts')).toBe(
null,
);
expect(
component.$el.querySelector('.js-insights-page-container .insights-charts'),
).not.toBe(null);
});
});
it('does not display chart', () => {
return component.$nextTick(() => {
expect(
component.$el.querySelector(
'.js-insights-page-container .insights-charts .insights-chart',
),
).toBe(null);
});
});
});
......
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