Fix spacing on contributions analytics charts

The distance between the chart and the title of the chart is too
much on the contribution analytics page. This is caused by the
styling that's on the SVG.

This fixes that by:

- reducing the height of the svg
- changing the value of preserveAspectRatio
- adding a padding between the title of the chart and the chart

app/assets/javascripts/vue_shared/components/bar_chart.vue

@@ -55,13 +55,13 @@ export default {
       vbWidth: 0,
       vbHeight: 0,
       vpWidth: 0,
-      vpHeight: 350,
-      preserveAspectRatioType: 'xMidYMid meet',
+      vpHeight: 200,
+      preserveAspectRatioType: 'xMidYMin meet',
       containerMargin: {
         leftRight: 30,
       },
       viewBoxMargin: {
-        topBottom: 150,
+        topBottom: 100,
       },
       panX: 0,
       xScale: {},
@@ -274,6 +274,7 @@ export default {
   <div ref="svgContainer" :class="activateGrabCursor" class="svg-graph-container">
     <svg
       ref="baseSvg"
+      class="svg-graph overflow-visible pt-5"
       :width="vpWidth"
       :height="vpHeight"
       :viewBox="svgViewBox"

app/assets/stylesheets/framework/common.scss

@@ -442,6 +442,7 @@ img.emoji {
 .ws-normal { white-space: normal; }
 .ws-pre-wrap { white-space: pre-wrap; }
 .overflow-auto { overflow: auto; }
+.overflow-visible { overflow: visible; }
 
 .d-flex-center {
   display: flex;

ee/changelogs/unreleased/6830-fix-contribution-analytics-styling.yml

+---
+title: Fix styling on contribution analytics dashboard
+merge_request: 207012
+author: briankabiro
+type: fixed