SFD-98: Chart scaling on zoom bugfix

src/app/carbon-estimation/carbon-estimation.component.spec.ts

@@ -48,31 +48,36 @@ describe('CarbonEstimationComponent', () => {
   });
 
   it('should set chart height when inner height is more than base height', () => {
+    spyOnProperty(window, 'innerHeight').and.returnValue(1000);
     spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200);
+
     component.ngOnInit();
     fixture.detectChanges();
 
-    expect(component.chartOptions.chart.height).toBe(600 - estimatorBaseHeight - 200);
+    console.log(`window.innerHeight: ${window.innerHeight}`);
+    expect(component.chartOptions.chart.height).toBe(1000 - estimatorBaseHeight - 200);
   });
 
   it('should set chart height to value if inner height more than base height plus extra height', () => {
+    spyOnProperty(window, 'innerHeight').and.returnValue(1000);
     spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200);
+
     fixture.componentRef.setInput('extraHeight', '100');
     fixture.detectChanges();
     component.ngOnInit();
     fixture.detectChanges();
 
-    expect(component.chartOptions.chart.height).toBe(600 - estimatorBaseHeight - 200 - 100);
+    expect(component.chartOptions.chart.height).toBe(1000 - estimatorBaseHeight - 200 - 100);
   });
 
   it('should recalculate chart height on window resize, for laptop screen', () => {
     spyOn(component.chart as ChartComponent, 'updateOptions');
     spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200);
 
-    component.onResize(2000, 1000, 2000);
+    component.onResize(1500, 1000, 2000);
 
     expect(component.chart?.updateOptions).toHaveBeenCalledOnceWith({
-      chart: { height: 1500 }, // Height will be capped at a percentage of the screen height
+      chart: { height: 1500 - estimatorBaseHeight - 200 },
     });
   });
 
@@ -87,23 +92,36 @@ describe('CarbonEstimationComponent', () => {
     });
   });
 
-  it('should call onResize when onExpansion is called', () => {
-    spyOn(component, 'onResize');
+  it('should cap chart height as a percentage of screen height, for laptop screen', () => {
+    spyOn(component.chart as ChartComponent, 'updateOptions');
+    spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200);
 
-    component.onExpanded();
+    const screenHeight = 2000;
+    component.onResize(2000, 1000, screenHeight);
 
-    expect(component.onResize).toHaveBeenCalledTimes(1);
+    expect(component.chart?.updateOptions).toHaveBeenCalledOnceWith({
+      chart: { height: screenHeight * 0.75 },
+    });
   });
 
-  it('chart updateOptions should be not be called if inner height less than base height and extra height', () => {
+  it('should cap chart height as a percentage of screen height, for mobile screen', () => {
     spyOn(component.chart as ChartComponent, 'updateOptions');
+    spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200);
 
-    fixture.componentRef.setInput('extraHeight', '600');
-    fixture.detectChanges();
-    component.ngOnInit();
-    fixture.detectChanges();
+    const screenHeight = 1200;
+    component.onResize(1200, 500, screenHeight);
+
+    expect(component.chart?.updateOptions).toHaveBeenCalledOnceWith({
+      chart: { height: screenHeight * 0.75 },
+    });
+  });
 
-    expect(component.chart?.updateOptions).not.toHaveBeenCalled();
+  it('should call onResize when onExpansion is called', () => {
+    spyOn(component, 'onResize');
+
+    component.onExpanded();
+
+    expect(component.onResize).toHaveBeenCalledTimes(1);
   });
 
   it('should set emissions with total % and category breakdown', () => {

src/app/carbon-estimation/carbon-estimation.component.ts

@@ -149,12 +149,23 @@ export class CarbonEstimationComponent implements OnInit, OnDestroy {
 
   private calculateChartHeight(innerHeight: number, innerWidth: number, expansionPanelHeight: number) {
     // medium tailwind responsive design breakpoint https://tailwindcss.com/docs/responsive-design
-    if (innerWidth < 768) {
-      return innerHeight - this.estimatorBaseHeight - expansionPanelHeight + estimatorHeights.title;
-    }
+    const responsiveBreakpoint = 768;
+
     const extraHeightString = this.extraHeight();
     const extraHeight = Number(extraHeightString) || 0;
-    return innerHeight - this.estimatorBaseHeight - extraHeight - expansionPanelHeight;
+
+    const calculatedHeight =
+      innerWidth < responsiveBreakpoint ?
+        innerHeight - this.estimatorBaseHeight - expansionPanelHeight + estimatorHeights.title
+      : innerHeight - this.estimatorBaseHeight - extraHeight - expansionPanelHeight;
+
+    // Cap on the mininum height of the chart to prevent the chart becoming squashed when zooming
+    // in on desktop browsers. (Zooming in results in window.innerHeight decreasing proportionally
+    // on most desktop browsers which can result in the calculatedHeight above becoming too small
+    // or even negative. N.B. Mobile browsers behave differently.)
+    const minChartHeight = 300;
+
+    return Math.max(calculatedHeight, minChartHeight);
   }
 
   private getDataItem(key: string, value: number, parent: string): ApexChartDataItem {