Skip to content

Commit

Permalink
FhiAngularHighcharts: Use cloneDeep() to make diagramOptions immutable (
Browse files Browse the repository at this point in the history 
#765)
  • Loading branch information
@proand
proand authored Dec 18, 2024
1 parent 6e616c6 commit 34b668c
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 50 deletions.
1 change: 1 addition & 0 deletions projects/fhi-angular-highcharts/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
43 changes: 24 additions & 19 deletions projects/fhi-angular-highcharts/src/lib/fhi-angular-highcharts.component.html
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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
"
>
Expand Down Expand Up @@ -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>
Expand Down
67 changes: 36 additions & 31 deletions projects/fhi-angular-highcharts/src/lib/fhi-angular-highcharts.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -58,6 +60,7 @@ export class FhiAngularHighchartsComponent implements OnChanges {
highmaps: typeof Highmaps = Highmaps;
highchartsOptions!: Options;

diagramOptionsInternal!: FhiDiagramOptions;
activeDiagramTypeGroup!: DiagramTypeGroup;
diagramTypeGroups!: DiagramTypeGroup[];
diagramTypeGroupNames = DiagramTypeGroupNames;
Expand Down Expand Up @@ -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);
Expand All @@ -120,7 +125,7 @@ export class FhiAngularHighchartsComponent implements OnChanges {
this.downloadService.downloadImage(
this.chartInstance,
'image/svg+xml',
this.diagramOptions.title,
this.diagramOptionsInternal.title,
);
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -261,7 +266,7 @@ export class FhiAngularHighchartsComponent implements OnChanges {

private updateDiagramTypeGroups() {
this.diagramTypeGroups = this.diagramTypeGroupService.getDiagramTypeGroups(
this.diagramOptions,
this.diagramOptionsInternal,
this.flaggedSeries,
this.diagramTypeGroups,
);
Expand All @@ -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,
Expand All @@ -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}"`);
}
}

Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 34b668c

Please sign in to comment.