Calendar Heatmap Type Not Work dynamicResize

[seiler-emerson]

Bug Report

Description

When setting the dynamicResize parameter in the Calendar heatmap chart component of angular-google-charts, I'm encountering the following issue: the chart doesn't resize automatically to fit the page width. When the element is loaded in full screen, it occupies approximately 70% of the screen, and when loaded with smaller dimensions, the chart gets cut off. When testing with other charts, the resizing works correctly, so it seems to be a specific configuration issue with the Calendar heatmap.

To reproduce

Steps to reproduce the behaviour:

1. I'm using Primeng to assist in development.
2. I have the following HTML structure with the chart in question:

< div class="row">
        < div class="grid">
            < div class="col-12 lg:col-12">
                < div class="card">
                    < div class="row grid">
                        < div class="col-8">
                            < h5>Atendimentos </h5>
                        < /div>
                        < div class="col-4 flex justify-content-end">
                            < h5>Total: {{panorama.amountCard[1].amount}}</h5>
                        < /div>
                    < /div>
                    < google-chart 
                        [type]="heatmap.type" 
                        [columns]="heatmap.columnNames" 
                        [data]="heatmap.data"
                        [options]="heatmap.options" 
                        [width]="undefined"
                        [height]="undefined"
                        [dynamicResize]="heatmap.dynamicResize"
                        style="width: 100%;"
                        >
                    < /google-chart>
                < /div>
            < /div>
        < /div>
    < /div>

3. In the Typescript file, I have the following structure:

import { Component, OnInit } from '@angular/core';
import { ChartType } from 'angular-google-charts';
import { MessageService } from 'primeng/api';
import { Observable, tap } from 'rxjs';
import { PanoramaService } from 'src/app/services/panorama/panorama.service';

@Component({
  selector: 'app-tests',
  templateUrl: './tests.component.html',
  styleUrls: ['./tests.component.scss'],
  providers: [MessageService]
})
export class TestsComponent implements OnInit{

  panorama$!: Observable<any[]>

  panorama: any = {
    doctorAppointmentUbs: [],
    amountCard: [],
    doctorAppointmentYear: [],
    amountAppointmentByType: [],
    amountDayMedicalAppointment: [],
    amountDayGlobalAppointmentYear: [],
    heatMap: [],
    heatmapDate: []
  }
 
  // Variaveis do Grafico Heatmap do Google Chart
  heatmap: any = {
    title: '',
    type: '',
    data: [],
    columnNames: [],
    options: {},
    dynamicResize: true,
  }

  constructor(
    public panoramaService: PanoramaService,
  ) { }

  ngOnInit(): void {
    // data received from backend
    this.panorama$ = this.panoramaService.getByDate("2022", "01")
    .pipe(
      tap((response: any) => {
        this.setPanoramaValues(response)
      })
    )
  }

  setPanoramaValues(response: any) {
    this.panorama = response
    this.setDataHeatmap()
  }

  setDataHeatmap() {
    this.heatmap.title = 'googlechart';
    this.heatmap.type = ChartType.Calendar;

    // data received from backend
    let datas = []

    for (let index = 0; index < this.panorama.heatMap.length; index++) {
      let item = [new Date(this.panorama.heatMap[index].year, this.panorama.heatMap[index].month - 1, this.panorama.heatMap[index].day), this.panorama.heatMap[index].amount]
      datas.push(item)
    }
    console.log(datas);

    this.heatmap.data = datas
    this.heatmap.columnNames = ['Name', 'Percentage'];
    this.heatmap.options = {
    };
  }
}

Expected behaviour

I expect the calendar heatmap chart to automatically adjust to the width of the page, occupying the entire screen in full-screen mode and being responsive in smaller dimensions.

Exception or Error

There are no specific exceptions or errors. The issue is related to the scaling and adjustment of the calendar heatmap chart.

Your environment

angular-google-charts version: 2.2.3 Angular CLI version: 15.1.1 Angular version: 15.1.0 Browser and version: Chrome 113.0.5672.92 | Safari 16.3 (18614.4.6.1.6)