Use cloneDeep() to make diagramOptions immutable

projects/fhi-angular-highcharts/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * :tada: **Enhancement** Add option `categoryAxis` to `FhiDiagramOptions`, and add support for setting the category axis title [(#763)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/763)
 * :tada: **Enhancement** Update qualitative color series [(#771)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/771)
+* :tada: **Enhancement** Use cloneDeep() to make diagramOptions immutable [(#765)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/765)
 
 ## 5.2.0
 

projects/fhi-angular-highcharts/src/lib/fhi-angular-highcharts.component.html

@@ -1,8 +1,8 @@
-<article *ngIf="diagramOptions !== undefined">
-  <h1 class="h3 mb-3">{{ diagramOptions.title }}</h1>
+<article *ngIf="diagramOptionsInternal">
+  <h1 class="h3 mb-3">{{ diagramOptionsInternal.title }}</h1>
 
-  @if (diagramOptions.description) {
-    <p class="mb-4">{{ diagramOptions.description }}</p>
+  @if (diagramOptionsInternal.description) {
+    <p class="mb-4">{{ diagramOptionsInternal.description }}</p>
   }
 
   @if (showDiagramTypeNav || showDownloadButton || showFullScreenButton || showMetadataButton) {
@@ -78,16 +78,16 @@ <h1 class="h3 mb-3">{{ diagramOptions.title }}</h1>
 <ng-template #diagramModal>
   <fhi-modal
     [openModalButtonClass]="'fhi-btn-icon fhi-btn-icon--circular'"
-    [modalTitle]="diagramOptions.title"
+    [modalTitle]="diagramOptionsInternal.title"
     [size]="'fullscreen'"
   >
     <ng-container fhi-modal.button>
       <i class="icon-arrows-fullscreen"></i>
       <span class="visually-hidden">Fullskjerm </span>
     </ng-container>
     <ng-container fhi-modal.body>
-      @if (diagramOptions.description) {
-        <p>{{ diagramOptions.description }}</p>
+      @if (diagramOptionsInternal.description) {
+        <p>{{ diagramOptionsInternal.description }}</p>
       }
       <ng-container *ngTemplateOutlet="diagramAndFooter"></ng-container>
     </ng-container>
@@ -170,30 +170,32 @@ <h1 class="h3 mb-3">{{ diagramOptions.title }}</h1>
 
 <ng-template #diagramFooter>
   <footer class="mt-3">
-    <p *ngIf="diagramOptions.units?.length > 0 && activeDiagramTypeGroup?.name === diagramTypeGroupNames?.table">
+    <p
+      *ngIf="diagramOptionsInternal.units?.length > 0 && activeDiagramTypeGroup?.name === diagramTypeGroupNames?.table"
+    >
       <strong>Måltall </strong>
       <span>
-        @for (unit of diagramOptions.units; track unit; let i = $index) {
+        @for (unit of diagramOptionsInternal.units; track unit; let i = $index) {
           <ng-container *ngIf="i === 0">{{ unit.label }}</ng-container>
           <ng-container *ngIf="i > 0">, {{ unit.label }}</ng-container>
         }
       </span>
     </p>
-    <p *ngIf="diagramOptions.footer?.lastUpdated">
-      <strong>Sist oppdatert </strong>{{ diagramOptions.footer?.lastUpdated }}
+    <p *ngIf="diagramOptionsInternal.footer?.lastUpdated">
+      <strong>Sist oppdatert </strong>{{ diagramOptionsInternal.footer?.lastUpdated }}
     </p>
-    <p *ngIf="diagramOptions.footer?.credits">
+    <p *ngIf="diagramOptionsInternal.footer?.credits">
       <strong>Kilde </strong>
-      <a href="{{ diagramOptions.footer.credits.href }}">{{ diagramOptions.footer.credits.text }}</a>
+      <a href="{{ diagramOptionsInternal.footer.credits.href }}">{{ diagramOptionsInternal.footer.credits.text }}</a>
     </p>
     <div
       class="mb-3"
-      *ngIf="diagramOptions.footer?.flags && activeDiagramTypeGroup?.name === diagramTypeGroupNames?.table"
+      *ngIf="diagramOptionsInternal.footer?.flags && activeDiagramTypeGroup?.name === diagramTypeGroupNames?.table"
     >
       <strong>Tegnforklaringer</strong><br />
       <table>
         <tbody>
-          <tr *ngFor="let flag of diagramOptions.footer?.flags">
+          <tr *ngFor="let flag of diagramOptionsInternal.footer?.flags">
             <td class="pe-2">{{ flag.symbol }}</td>
             <td>{{ flag.label }}</td>
           </tr>
@@ -204,7 +206,7 @@ <h1 class="h3 mb-3">{{ diagramOptions.title }}</h1>
       class="mb-3"
       *ngIf="
         flaggedSeries.length > 0 &&
-        diagramOptions.footer?.flags &&
+        diagramOptionsInternal.footer?.flags &&
         activeDiagramTypeGroup?.name !== diagramTypeGroupNames?.table
       "
     >
@@ -232,11 +234,14 @@ <h1 class="h3 mb-3">{{ diagramOptions.title }}</h1>
       <a role="button" class="fhi-link" tabindex="0" (click)="setDiagramTypeGroupToTable()">Vis som tabell</a>
       for å se flere detaljer.
     </div>
-    <p class="fst-italic small" *ngIf="diagramOptions.footer?.disclaimer">
-      {{ diagramOptions.footer?.disclaimer }}
+    <p class="fst-italic small" *ngIf="diagramOptionsInternal.footer?.disclaimer">
+      {{ diagramOptionsInternal.footer?.disclaimer }}
     </p>
     <p>
-      <a class="highcharts-credits" href="{{ getMapCopyright()['url'] }}" *ngIf="!diagramOptions.openSource && showMap"
+      <a
+        class="highcharts-credits"
+        href="{{ getMapCopyright()['url'] }}"
+        *ngIf="!diagramOptionsInternal.openSource && showMap"
         >Kartdata fra &#169; {{ getMapCopyright()['text'] }}</a
       >
     </p>

projects/fhi-angular-highcharts/src/lib/fhi-angular-highcharts.component.ts

@@ -9,6 +9,8 @@ import {
 } from '@angular/core';
 
 import { first } from 'rxjs';
+import { cloneDeep } from 'lodash-es';
+
 import * as Highcharts from 'highcharts';
 import * as Highmaps from 'highcharts/highmaps';
 import { Chart, Options } from 'highcharts';
@@ -58,6 +60,7 @@ export class FhiAngularHighchartsComponent implements OnChanges {
   highmaps: typeof Highmaps = Highmaps;
   highchartsOptions!: Options;
 
+  diagramOptionsInternal!: FhiDiagramOptions;
   activeDiagramTypeGroup!: DiagramTypeGroup;
   diagramTypeGroups!: DiagramTypeGroup[];
   diagramTypeGroupNames = DiagramTypeGroupNames;
@@ -95,9 +98,11 @@ export class FhiAngularHighchartsComponent implements OnChanges {
   }
 
   ngOnChanges() {
+    this.diagramOptionsInternal = cloneDeep(this.diagramOptions);
+    this.resetDiagramState();
+
     try {
-      this.resetDiagramState();
-      this.diagramOptions.series.forEach((serie) => {
+      this.diagramOptionsInternal.series.forEach((serie) => {
         serie.name = this.formatSerieName(serie.name);
         this.findDuplicateSerieNames(serie.name);
         this.testForFlaggedDataAndUpdateFlaggedSeries(serie);
@@ -120,7 +125,7 @@ export class FhiAngularHighchartsComponent implements OnChanges {
       this.downloadService.downloadImage(
         this.chartInstance,
         'image/svg+xml',
-        this.diagramOptions.title,
+        this.diagramOptionsInternal.title,
       );
     }
   }
@@ -222,10 +227,10 @@ export class FhiAngularHighchartsComponent implements OnChanges {
   }
 
   private getVerifiedMaxDecimalCount(serie: FhiDiagramSerie): number {
-    let unit = this.diagramOptions.units?.find((unit) => unit.id === serie.unitId);
+    let unit = this.diagramOptionsInternal.units?.find((unit) => unit.id === serie.unitId);
 
-    if (!unit && this.diagramOptions.units?.length === 1) {
-      unit = this.diagramOptions.units[0];
+    if (!unit && this.diagramOptionsInternal.units?.length === 1) {
+      unit = this.diagramOptionsInternal.units[0];
     }
     if (unit?.decimals !== undefined && unit?.decimals >= 0 && unit?.decimals <= 9) {
       return unit.decimals;
@@ -261,7 +266,7 @@ export class FhiAngularHighchartsComponent implements OnChanges {
 
   private updateDiagramTypeGroups() {
     this.diagramTypeGroups = this.diagramTypeGroupService.getDiagramTypeGroups(
-      this.diagramOptions,
+      this.diagramOptionsInternal,
       this.flaggedSeries,
       this.diagramTypeGroups,
     );
@@ -271,11 +276,11 @@ export class FhiAngularHighchartsComponent implements OnChanges {
   }
 
   private updateDiagramOptions() {
-    const footer = this.diagramOptions.footer;
-    const openSource = this.diagramOptions.openSource;
+    const footer = this.diagramOptionsInternal.footer;
+    const openSource = this.diagramOptionsInternal.openSource;
 
-    this.diagramOptions = {
-      ...this.diagramOptions,
+    this.diagramOptionsInternal = {
+      ...this.diagramOptionsInternal,
       activeDiagramType: this.activeDiagramTypeGroup.diagramType.id as FhiDiagramTypeIds,
       footer: footer ? footer : undefined,
       openSource: openSource === undefined || openSource ? true : false,
@@ -285,23 +290,23 @@ export class FhiAngularHighchartsComponent implements OnChanges {
   private updateDiagramState() {
     const diagramTypeIsDisabled = this.diagramTypeGroupService.getDiagramTypeIsDisabled(
       this.diagramTypeGroups,
-      this.diagramOptions.activeDiagramType,
+      this.diagramOptionsInternal.activeDiagramType,
     );
     this.showDiagramTypeDisabledWarning = diagramTypeIsDisabled;
     this.showDownloadButton = diagramTypeIsDisabled ? false : this.canShowDownloadButton();
     this.showFooter = diagramTypeIsDisabled ? false : this.canShowFooter();
-    this.showFullScreenButton = !!this.diagramOptions.controls?.fullScreenButton?.show;
-    this.showMetadataButton = !!this.diagramOptions.controls?.metadataButton?.show;
-    this.showDiagramTypeNav = !!this.diagramOptions.controls?.navigation?.show;
+    this.showFullScreenButton = !!this.diagramOptionsInternal.controls?.fullScreenButton?.show;
+    this.showMetadataButton = !!this.diagramOptionsInternal.controls?.metadataButton?.show;
+    this.showDiagramTypeNav = !!this.diagramOptionsInternal.controls?.navigation?.show;
 
     if (!diagramTypeIsDisabled) {
       this.updateDiagram();
     } else {
-      console.warn(
-        `Kan ikke vise diagramtype "${this.diagramOptions.activeDiagramType}" fordi "${this.diagramTypeGroupService.getDiagramTypeDisabledWarningMsg(
-          this.diagramOptions.activeDiagramType,
-        )}"`,
+      const activeDiagramType = this.diagramOptionsInternal.activeDiagramType;
+      const msg = this.diagramTypeGroupService.getDiagramTypeDisabledWarningMsg(
+        this.diagramOptionsInternal.activeDiagramType,
       );
+      console.warn(`Kan ikke vise diagramtype "${activeDiagramType}" fordi "${msg}"`);
     }
   }
 
@@ -318,27 +323,27 @@ export class FhiAngularHighchartsComponent implements OnChanges {
   private updateChart() {
     this.showDefaultChartTemplate = !this.showDefaultChartTemplate;
     this.highchartsOptions = this.optionsService.updateOptions(
-      this.diagramOptions,
+      this.diagramOptionsInternal,
       this.metadataForSeries,
     );
   }
 
   private updateTable() {
-    const series: FhiDiagramSerie[] = this.diagramOptions.series;
+    const series: FhiDiagramSerie[] = this.diagramOptionsInternal.series;
     this.tableData = this.tableService.getTable(
       series,
-      this.diagramOptions.tableOrientation,
+      this.diagramOptionsInternal.tableOrientation,
       this.metadataForSeries,
     );
   }
 
   private updateMap() {
-    const mapTypeId = this.diagramOptions.activeDiagramType;
+    const mapTypeId = this.diagramOptionsInternal.activeDiagramType;
 
     if (this.highmaps.maps && this.highmaps.maps[mapTypeId]) {
       this.topoJsonService.setCurrentMapTypeId(mapTypeId);
       this.highchartsOptions = this.optionsService.updateOptions(
-        this.diagramOptions,
+        this.diagramOptionsInternal,
         this.metadataForSeries,
       );
       this.showMap = true;
@@ -371,25 +376,25 @@ export class FhiAngularHighchartsComponent implements OnChanges {
 
   private canShowDownloadButton(): boolean {
     return (
-      !!this.diagramOptions.controls?.downloadButton?.show &&
-      this.diagramOptions.activeDiagramType !== 'table'
+      !!this.diagramOptionsInternal.controls?.downloadButton?.show &&
+      this.diagramOptionsInternal.activeDiagramType !== 'table'
     );
   }
 
   private canShowFooter(): boolean {
-    if (this.showMap && !this.diagramOptions.openSource) {
+    if (this.showMap && !this.diagramOptionsInternal.openSource) {
       return true;
     }
-    if (this.diagramOptions.footer?.flags && this.flaggedSeries.length !== 0) {
+    if (this.diagramOptionsInternal.footer?.flags && this.flaggedSeries.length !== 0) {
       return true;
     }
-    if (this.diagramOptions.footer?.lastUpdated) {
+    if (this.diagramOptionsInternal.footer?.lastUpdated) {
       return true;
     }
-    if (this.diagramOptions.footer?.disclaimer) {
+    if (this.diagramOptionsInternal.footer?.disclaimer) {
       return true;
     }
-    if (this.diagramOptions.footer?.credits) {
+    if (this.diagramOptionsInternal.footer?.credits) {
       return true;
     }
     return false;