Fix(chart skeleton loader): adjust size

This adjusts the size of the chart skeleton loader
so it fits the size of the charts a bit better
making for a better user experience

app/assets/javascripts/vue_shared/components/resizable_chart/constants.js

 export const DEFAULT_RX = 0.4;
-export const DEFAULT_BAR_WIDTH = 6;
-export const DEFAULT_LABEL_WIDTH = 4;
-export const DEFAULT_LABEL_HEIGHT = 5;
+export const DEFAULT_BAR_WIDTH = 4;
+export const DEFAULT_LABEL_WIDTH = 3;
+export const DEFAULT_LABEL_HEIGHT = 3;
 export const BAR_HEIGHTS = [5, 7, 9, 14, 21, 35, 50, 80];
 export const GRID_YS = [30, 60, 90];

app/assets/javascripts/vue_shared/components/resizable_chart/skeleton_loader.vue

@@ -61,7 +61,8 @@ export default {
 };
 </script>
 <template>
-  <gl-skeleton-loader :unique-key="uniqueKey">
+  <div class="gl-px-8">
+    <gl-skeleton-loader :unique-key="uniqueKey" class="gl-p-8">
       <rect
         v-for="(y, index) in $options.GRID_YS"
         :key="`grid-${index}`"
@@ -92,4 +93,5 @@ export default {
         :rx="`${rx}%`"
       />
     </gl-skeleton-loader>
+  </div>
 </template>

ee/app/assets/javascripts/insights/components/insights_chart.vue

@@ -127,11 +127,11 @@ export default {
       :error="error"
     />
   </div>
-  <resizable-chart-container v-else-if="loaded" class="insights-chart">
+  <resizable-chart-container v-else class="insights-chart">
     <h5 class="text-center">{{ title }}</h5>
     <p v-if="description" class="text-center">{{ description }}</p>
     <gl-column-chart
-      v-if="isColumnChart"
+      v-if="loaded && isColumnChart"
       v-bind="$attrs"
       :height="$options.height"
       :data="data.datasets"
@@ -142,7 +142,7 @@ export default {
       @created="onChartCreated"
     />
     <gl-stacked-column-chart
-      v-else-if="isStackedColumnChart"
+      v-else-if="loaded && isStackedColumnChart"
       v-bind="$attrs"
       :height="$options.height"
       :data="data.datasets"
@@ -155,13 +155,13 @@ export default {
       @created="onChartCreated"
     />
     <gl-line-chart
-      v-else-if="isLineChart"
+      v-else-if="loaded && isLineChart"
       v-bind="$attrs"
       :height="$options.height"
       :data="data.datasets"
       :option="chartOptions"
       @created="onChartCreated"
     />
-  </resizable-chart-container>
     <chart-skeleton-loader v-else />
+  </resizable-chart-container>
 </template>

ee/changelogs/unreleased/235734-mlunoe-address-size-of-chart-skeleton-loader.yml

+---
+title: Fix the size of chart placeholder on Analytics pages for Merge Requests, Insights and Value stream, so it matches the actual charts.
+  the size of the real chart shown afterwards
+merge_request: 41904
+author:
+type: fixed

ee/spec/frontend/insights/components/insights_chart_spec.js

@@ -10,8 +10,17 @@ import {
 import InsightsChart from 'ee/insights/components/insights_chart.vue';
 import InsightsChartError from 'ee/insights/components/insights_chart_error.vue';
 import { CHART_TYPES } from 'ee/insights/constants';
+import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 
+const DEFAULT_PROPS = {
+  loaded: false,
+  type: chartInfo.type,
+  title: chartInfo.title,
+  data: null,
+  error: '',
+};
+
 describe('Insights chart component', () => {
   let wrapper;
 
@@ -26,66 +35,32 @@ describe('Insights chart component', () => {
   });
 
   describe('when chart is loading', () => {
-    it('displays the chart loader', () => {
-      wrapper = factory({
-        loaded: false,
-        type: CHART_TYPES.BAR,
-        title: chartInfo.title,
-        data: null,
-        error: '',
-      });
+    it('displays the chart loader in the container', () => {
+      wrapper = factory(DEFAULT_PROPS);
 
       expect(wrapper.find(ChartSkeletonLoader).exists()).toBe(true);
+      expect(wrapper.find(ResizableChartContainer).exists()).toBe(true);
     });
   });
 
-  describe('when chart is loaded', () => {
-    it('displays a bar chart', () => {
+  describe.each`
+    type                       | component               | name                      | data
+    ${CHART_TYPES.BAR}         | ${GlColumnChart}        | ${'GlColumnChart'}        | ${barChartData}
+    ${CHART_TYPES.LINE}        | ${GlLineChart}          | ${'GlLineChart'}          | ${lineChartData}
+    ${CHART_TYPES.STACKED_BAR} | ${GlStackedColumnChart} | ${'GlStackedColumnChart'} | ${stackedBarChartData}
+    ${CHART_TYPES.PIE}         | ${GlColumnChart}        | ${'GlColumnChart'}        | ${barChartData}
+  `('when chart is loaded', ({ type, component, name, data }) => {
+    it(`when ${type} is passed: displays the a ${name}-chart in container and not the loader`, () => {
       wrapper = factory({
+        ...DEFAULT_PROPS,
         loaded: true,
-        type: CHART_TYPES.BAR,
-        title: chartInfo.title,
-        data: barChartData,
-        error: '',
-      });
-
-      expect(wrapper.find(GlColumnChart).exists()).toBe(true);
+        type,
+        data,
       });
 
-    it('displays a line chart', () => {
-      wrapper = factory({
-        loaded: true,
-        type: CHART_TYPES.LINE,
-        title: chartInfo.title,
-        data: lineChartData,
-        error: '',
-      });
-
-      expect(wrapper.find(GlLineChart).exists()).toBe(true);
-    });
-
-    it('displays a stacked bar chart', () => {
-      wrapper = factory({
-        loaded: true,
-        type: CHART_TYPES.STACKED_BAR,
-        title: chartInfo.title,
-        data: stackedBarChartData,
-        error: '',
-      });
-
-      expect(wrapper.find(GlStackedColumnChart).exists()).toBe(true);
-    });
-
-    it('displays a bar chart when a pie chart is requested', () => {
-      wrapper = factory({
-        loaded: true,
-        type: CHART_TYPES.PIE,
-        title: chartInfo.title,
-        data: barChartData,
-        error: '',
-      });
-
-      expect(wrapper.find(GlColumnChart).exists()).toBe(true);
+      expect(wrapper.find(ChartSkeletonLoader).exists()).toBe(false);
+      expect(wrapper.find(ResizableChartContainer).exists()).toBe(true);
+      expect(wrapper.find(component).exists()).toBe(true);
     });
   });
 
@@ -94,15 +69,15 @@ describe('Insights chart component', () => {
 
     beforeEach(() => {
       wrapper = factory({
-        loaded: false,
-        type: chartInfo.type,
-        title: chartInfo.title,
+        ...DEFAULT_PROPS,
         data: {},
         error,
       });
     });
 
     it('displays info about the error', () => {
+      expect(wrapper.find(ChartSkeletonLoader).exists()).toBe(false);
+      expect(wrapper.find(ResizableChartContainer).exists()).toBe(false);
       expect(wrapper.find(InsightsChartError).exists()).toBe(true);
     });
   });

spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Resizable Skeleton Loader default setup renders the bars, labels, and grid with correct position, size, and rx percentages 1`] = `
-<svg
+<div
+  class="gl-px-8"
+>
+  <svg
     class="gl-skeleton-loader"
     preserveAspectRatio="xMidYMid meet"
     version="1.1"
     viewBox="0 0 400 130"
->
+  >
     <rect
       clip-path="url(#null-idClip)"
       height="130"
@@ -45,130 +48,130 @@ exports[`Resizable Skeleton Loader default setup renders the bars, labels, and g
           data-testid="skeleton-chart-bar"
           height="5%"
           rx="0.4%"
-        width="6%"
-        x="5.875%"
+          width="4%"
+          x="6%"
           y="85%"
         />
         <rect
           data-testid="skeleton-chart-bar"
           height="7%"
           rx="0.4%"
-        width="6%"
-        x="17.625%"
+          width="4%"
+          x="18%"
           y="83%"
         />
         <rect
           data-testid="skeleton-chart-bar"
           height="9%"
           rx="0.4%"
-        width="6%"
-        x="29.375%"
+          width="4%"
+          x="30%"
           y="81%"
         />
         <rect
           data-testid="skeleton-chart-bar"
           height="14%"
           rx="0.4%"
-        width="6%"
-        x="41.125%"
+          width="4%"
+          x="42%"
           y="76%"
         />
         <rect
           data-testid="skeleton-chart-bar"
           height="21%"
           rx="0.4%"
-        width="6%"
-        x="52.875%"
+          width="4%"
+          x="54%"
           y="69%"
         />
         <rect
           data-testid="skeleton-chart-bar"
           height="35%"
           rx="0.4%"
-        width="6%"
-        x="64.625%"
+          width="4%"
+          x="66%"
           y="55%"
         />
         <rect
           data-testid="skeleton-chart-bar"
           height="50%"
           rx="0.4%"
-        width="6%"
-        x="76.375%"
+          width="4%"
+          x="78%"
           y="40%"
         />
         <rect
           data-testid="skeleton-chart-bar"
           height="80%"
           rx="0.4%"
-        width="6%"
-        x="88.125%"
+          width="4%"
+          x="90%"
           y="10%"
         />
          
         <rect
           data-testid="skeleton-chart-label"
-        height="5%"
+          height="3%"
           rx="0.4%"
-        width="4%"
-        x="6.875%"
-        y="95%"
+          width="3%"
+          x="6.5%"
+          y="97%"
         />
         <rect
           data-testid="skeleton-chart-label"
-        height="5%"
+          height="3%"
           rx="0.4%"
-        width="4%"
-        x="18.625%"
-        y="95%"
+          width="3%"
+          x="18.5%"
+          y="97%"
         />
         <rect
           data-testid="skeleton-chart-label"
-        height="5%"
+          height="3%"
           rx="0.4%"
-        width="4%"
-        x="30.375%"
-        y="95%"
+          width="3%"
+          x="30.5%"
+          y="97%"
         />
         <rect
           data-testid="skeleton-chart-label"
-        height="5%"
+          height="3%"
           rx="0.4%"
-        width="4%"
-        x="42.125%"
-        y="95%"
+          width="3%"
+          x="42.5%"
+          y="97%"
         />
         <rect
           data-testid="skeleton-chart-label"
-        height="5%"
+          height="3%"
           rx="0.4%"
-        width="4%"
-        x="53.875%"
-        y="95%"
+          width="3%"
+          x="54.5%"
+          y="97%"
         />
         <rect
           data-testid="skeleton-chart-label"
-        height="5%"
+          height="3%"
           rx="0.4%"
-        width="4%"
-        x="65.625%"
-        y="95%"
+          width="3%"
+          x="66.5%"
+          y="97%"
         />
         <rect
           data-testid="skeleton-chart-label"
-        height="5%"
+          height="3%"
           rx="0.4%"
-        width="4%"
-        x="77.375%"
-        y="95%"
+          width="3%"
+          x="78.5%"
+          y="97%"
         />
         <rect
           data-testid="skeleton-chart-label"
-        height="5%"
+          height="3%"
           rx="0.4%"
-        width="4%"
-        x="89.125%"
-        y="95%"
+          width="3%"
+          x="90.5%"
+          y="97%"
         />
       </clippath>
       <lineargradient
@@ -209,16 +212,20 @@ exports[`Resizable Skeleton Loader default setup renders the bars, labels, and g
         </stop>
       </lineargradient>
     </defs>
-</svg>
+  </svg>
+</div>
 `;
 
 exports[`Resizable Skeleton Loader with custom settings renders the correct position, and size percentages for bars and labels with different settings 1`] = `
-<svg
+<div
+  class="gl-px-8"
+>
+  <svg
     class="gl-skeleton-loader"
     preserveAspectRatio="xMidYMid meet"
     version="1.1"
     viewBox="0 0 400 130"
->
+  >
     <rect
       clip-path="url(#-idClip)"
       height="130"
@@ -421,5 +428,6 @@ exports[`Resizable Skeleton Loader with custom settings renders the correct posi
         </stop>
       </lineargradient>
     </defs>
-</svg>
+  </svg>
+</div>
 `;