In the statistics module, I have a signal that specifies the type of charts to display and this signal is updated through a radio button group. The signal:
typeSignal = signal<string>('OIA')The radio buttons for setting the :
<div class="btn-group w-auto" role="group">
@for (type of types; track $index) {
<input type="radio" class="btn-check" name="btnradio" [id]="type" autocomplete="off"
[checked]="type==typeSignal()">
<label class="btn btn-primary" for="btnradio1" (click)="typeSignal.set(type)">{{type}}</label>
}
</div>
Additionally, there is another computed signal that generates data for the charts based on the type signal. Here's the charts signal:
charts = computed(() => {
const chartsArr:ChartData[] = []
if (this.typeSignal() == "OIA") {
chartsArr.push(this.createBarChart("Status of Incident", ['Closed', 'Ongoing'], "status", "Advisories", true))
chartsArr.push(this.createBarChart("Severity of Incident", ['Severity 0', 'Severity 1', 'Severity 2', 'Severity 3', 'Severity 4'], "impacts", "Advisories", false))
chartsArr.push(this.createDonutChart("Communication type", ['Incident', 'Change'], 300))
} else if (this.typeSignal() == "Portail de l'information") {
chartsArr.push(this.createBarChart("Status of Incident", ['Scheduled', 'Archived', 'Ongoing'], "status", "Advisories", true))
chartsArr.push(this.createBarChart("Impact of Incident", ['Major', 'Minor', 'Grave'], "impacts", "Advisories", false))
chartsArr.push(this.createDonutChart("Communication type", ['Incident', 'Change'], 300))
} else if (this.typeSignal() == "Bulletin Board") {
chartsArr.push(this.createBarChart("Status of Change", ['Closed', 'Ongoing', 'Scheduled'], "status", "Advisories", true))
chartsArr.push(this.createBarChart("Outage of Incident", ['Complete Outage', 'Partial Outage', 'Info'], "impacts", "Advisories", false))
chartsArr.push(this.createDonutChart("Communication type", ['Info', 'Incident', 'Change'], 300))
}
console.log(chartsArr);
return structuredClone(chartsArr)
})
In the template, I'm reading this charts signal as follows:
@if (["OIA","Portail de l'information","Bulletin Board"].includes(typeSignal())) {
<div class="row row-cols-2 g-5 mx-1">
@for (chart of charts(); track $index) {
@if (chart.type == "bar") {
<app-bar-chart [title]="chart.title" [axissLabels]="chart.labels" [values]="chart.values"
[valuesType]="chart.valuesType!" [isHorizontal]="chart.isHorizontal!"></app-bar-chart>
}@else if (chart.type=="donut") {
<app-donut-chart [title]="chart.title" [values]="chart.values" [labels]="chart.labels"
[minWidth]="chart.minWidth!"></app-donut-chart>
}
}
</div>
}
The issue here is that the charts signal does not update the for loop even though the console.log(chartsArr); within it gets logged whenever I toggle the radio buttons.