add ability to override graph size measurements

2 files changed, 12 insertions, 1 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 3544dd96e3e..f1d61a1c360 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -26,6 +26,11 @@
         required: false,
         default: true,
       },
+      forceSmallGraph: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       documentationPath: {
         type: String,
         required: true,
@@ -165,6 +170,7 @@
         :project-path="projectPath"
         :tags-path="tagsPath"
         :show-legend="showLegend"
+        :small-graph="forceSmallGraph"
       />
     </graph-group>
   </div>
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 30236d51d30..9e67a6f2146 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -57,6 +57,11 @@
         required: false,
         default: true,
       },
+      smallGraph: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
 
     data() {
@@ -135,7 +140,7 @@
         const breakpointSize = bp.getBreakpointSize();
         const query = this.graphData.queries[0];
         this.margin = measurements.large.margin;
-        if (breakpointSize === 'xs' || breakpointSize === 'sm') {
+        if (this.smallGraph || breakpointSize === 'xs' || breakpointSize === 'sm') {
           this.graphHeight = 300;
           this.margin = measurements.small.margin;
           this.measurements = measurements.small;