Update chart height responsiveBreakpoint and updated test with new value

ScottLogic · Jul 15, 2024 · 7a4c93b · 7a4c93b
1 parent 9050518
commit 7a4c93b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/app/carbon-estimation/carbon-estimation.component.spec.ts b/src/app/carbon-estimation/carbon-estimation.component.spec.ts
@@ -49,8 +49,8 @@ describe('CarbonEstimationComponent', () => {
 
   it('should set the chart height when the component is initialised', () => {
     spyOnProperty(window, 'innerHeight').and.returnValue(1000);
-    spyOnProperty(window, 'innerWidth').and.returnValue(1000);
-    spyOnProperty(window.screen, 'height').and.returnValue(1080);
+    spyOnProperty(window, 'innerWidth').and.returnValue(2000);
+    spyOnProperty(window.screen, 'height').and.returnValue(2160);
     spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200);
 
     component.ngOnInit();
@@ -64,7 +64,7 @@ describe('CarbonEstimationComponent', () => {
     spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200);
     fixture.componentRef.setInput('extraHeight', '100');
 
-    component.onResize(1500, 1000, 2000);
+    component.onResize(1500, 1500, 2000);
 
     expect(component.chart?.updateOptions).toHaveBeenCalledOnceWith({
       chart: { height: 1500 - estimatorBaseHeight - 200 - 100 },
@@ -75,7 +75,7 @@ describe('CarbonEstimationComponent', () => {
     spyOn(component.chart as ChartComponent, 'updateOptions');
     spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200);
 
-    component.onResize(1500, 1000, 2000);
+    component.onResize(1500, 2000, 2000);
 
     expect(component.chart?.updateOptions).toHaveBeenCalledOnceWith({
       chart: { height: 1500 - estimatorBaseHeight - 200 },
@@ -98,7 +98,7 @@ describe('CarbonEstimationComponent', () => {
     spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200);
 
     const screenHeight = 2000;
-    component.onResize(2000, 1000, screenHeight);
+    component.onResize(2000, 1500, screenHeight);
 
     expect(component.chart?.updateOptions).toHaveBeenCalledOnceWith({
       chart: { height: screenHeight * 0.75 },

diff --git a/src/app/carbon-estimation/carbon-estimation.component.ts b/src/app/carbon-estimation/carbon-estimation.component.ts
@@ -136,8 +136,8 @@ export class CarbonEstimationComponent implements OnInit, OnDestroy {
   private getChartHeight(innerHeight: number, innerWidth: number, screenHeight: number): number {
     const expansionPanelHeight = this.detailsPanel.nativeElement.clientHeight;
 
-    // medium tailwind responsive design breakpoint https://tailwindcss.com/docs/responsive-design
-    const responsiveBreakpoint = 768;
+    // large tailwind responsive design breakpoint https://tailwindcss.com/docs/responsive-design
+    const responsiveBreakpoint = 1024;
 
     const extraHeightString = this.extraHeight();
     const extraHeight = Number(extraHeightString) || 0;