Enhancement/highcharts category axis title (#763)

* Add xAxis options * Add interface FhiDiagramCategoryAxis
folkehelseinstituttet · Dec 12, 2024 · 490368b · 490368b
1 parent 4a56206
commit 490368b
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 3 deletions.
diff --git a/projects/fhi-angular-highcharts/CHANGELOG.md b/projects/fhi-angular-highcharts/CHANGELOG.md
@@ -1,9 +1,15 @@
-# 5.2.0
+# Unreleased
+
+> Nov 27, 2024
+
+* :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)
+
+## 5.2.0
 
 > Nov 27, 2024
 
 * :tada: **Enhancement** Add test for disabling all other diagram types except `columnAndLine` (and `table`) if 2 units or more are defined in the diagram options. Also clean up existing tests for disabling diagram types [(#761)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/761)
-* :bug: **Bugfix** Make tooltip show zero decimals when `unit.decimals` set to `0`. Also fix inconsisten values for max decimals.
+* :bug: **Bugfix** Make tooltip show zero decimals when `unit.decimals` set to `0`. Also fix inconsisten values for max decimals [(#744)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/744)
 
 ## 5.1.0
 

diff --git a/projects/fhi-angular-highcharts/src/lib/highcharts-options/options-charts.ts b/projects/fhi-angular-highcharts/src/lib/highcharts-options/options-charts.ts
@@ -13,11 +13,14 @@ export const OptionsCharts = {
   xAxis: {
     allowDecimals: false,
     type: 'category',
+    title: {
+      text: undefined,
+    },
   },
   yAxis: {
     allowDecimals: false,
     title: {
-      text: null,
+      text: undefined,
     },
   },
 };
diff --git a/projects/fhi-angular-highcharts/src/lib/models/fhi-diagram-category-axis.model.ts b/projects/fhi-angular-highcharts/src/lib/models/fhi-diagram-category-axis.model.ts
@@ -0,0 +1,3 @@
+export interface FhiDiagramCategoryAxis {
+  title: string;
+}
diff --git a/projects/fhi-angular-highcharts/src/lib/models/fhi-diagram-options.model.ts b/projects/fhi-angular-highcharts/src/lib/models/fhi-diagram-options.model.ts
@@ -4,12 +4,14 @@ import { FhiDiagramSerie } from './fhi-diagram-serie.model';
 import { FhiDiagramUnit } from './fhi-diagram-unit.model';
 import { FhiDiagramControls } from './fhi-diagram-controls.model';
 import { FhiDiagramFooter } from './fhi-diagram-footer.model';
+import { FhiDiagramCategoryAxis } from './fhi-diagram-category-axis.model';
 
 export type FhiDiagramTypeIds = keyof typeof DiagramTypeIds;
 export type FhiTableOrientations = keyof typeof TableOrientations;
 
 export interface FhiDiagramOptions {
   activeDiagramType?: FhiDiagramTypeIds;
+  categoryAxis?: FhiDiagramCategoryAxis;
   controls?: FhiDiagramControls;
   description?: string;
   footer?: FhiDiagramFooter;

diff --git a/projects/fhi-angular-highcharts/src/lib/services/options.service.ts b/projects/fhi-angular-highcharts/src/lib/services/options.service.ts
@@ -8,6 +8,7 @@ import {
   SeriesOptionsType,
   TooltipOptions,
   XAxisLabelsOptions,
+  XAxisOptions,
   YAxisOptions,
 } from 'highcharts';
 
@@ -126,6 +127,8 @@ export class OptionsService {
 
   private updateChartOptions(options: Options): Options {
     options.series = this.getSeriesWithoutFlaggedDataPoints() as SeriesOptionsType[];
+    options.xAxis = this.getXAxis(options.xAxis as XAxisOptions, this.diagramOptions);
+
     if (this.diagramOptions.units?.length === 1) {
       options.yAxis = this.getYAxis(options.yAxis as YAxisOptions, this.diagramOptions.units[0]);
     } else {
@@ -192,6 +195,12 @@ export class OptionsService {
     return tooltip;
   }
 
+  private getXAxis(xAxis: XAxisOptions, diagramOptions: FhiDiagramOptions): XAxisOptions {
+    xAxis = xAxis ? xAxis : {};
+    xAxis.title.text = diagramOptions.categoryAxis?.title;
+    return xAxis;
+  }
+
   private getYAxis(yAxis: YAxisOptions, unit?: FhiDiagramUnit): YAxisOptions {
     const hasDecimalData = !!this.metadataForSeries.find((serie) => serie.hasDecimalData);
     const hasNegativeData = !!this.metadataForSeries.find((serie) => serie.hasNegativeData);

diff --git a/...ews/shared/dynamic-library-examples/example-components/highcharts/highcharts.component.ts b/...ews/shared/dynamic-library-examples/example-components/highcharts/highcharts.component.ts
@@ -175,6 +175,9 @@ export class HighchartsComponent implements OnInit {
       series: undefined,
       activeDiagramType: 'column',
       title: this.titles.title_3a,
+      categoryAxis: {
+        title: 'Uke',
+      },
       controls: {
         downloadButton: {
           show: true,