Add unit.yAxisMax/unit.yAxisMin

projects/fhi-angular-highcharts/CHANGELOG.md

@@ -1,4 +1,10 @@
-# 4.0.0
+# Unreleased
+
+> Jun 25, 2024
+
+* :tada: **Enhancement** Add support for user defined max/min y-axis value
+
+## 4.0.0
 
 > Jun 13, 2024
 

projects/fhi-angular-highcharts/README.md

@@ -211,7 +211,8 @@ FhiDiagramSerieData is a custum type for FHI Angular Highcharts, but it is based
 | `label`    | `string`           | -       | yes      | The vertical y-axis label, showing next to the axis line. |
 | `symbol`   | `string`           | -       | no       | Symbol before or after the value in both tooltip and y-axis. |
 | `position` | `string`           | -       | no       | Wether the symbol i placed before or after the numbers in the diagram. Possible values: `'start' \| 'end'` |
-| `yAxis`    | `number`           | -       | no       | Which y-axis to associate the unit with. Only support for two y-axis is implemented: `0` is left hand y-axis, `1` is right hand y-axis. |
+| `yAxisMax` | `number`           | -       | no       | The maximum value of the y-axis. If not set, the max value is automatically calculated. NB! Highcharts may override the value in some edge cases. |
+| `yAxisMin` | `number`           | -       | no       | The minimum value of the y-axis. If not set, the min value is automatically calculated. NB! Highcharts may override the value in some edge cases. |
 
 ## Changelog
 

projects/fhi-angular-highcharts/src/lib/models/fhi-diagram-unit.model.ts

@@ -14,5 +14,6 @@ export interface FhiDiagramUnit {
   label: string;
   symbol?: string;
   position?: keyof typeof UnitSymbolPosition;
-  yAxis?: number;
+  yAxisMax?: number;
+  yAxisMin?: number;
 }

projects/fhi-angular-highcharts/src/lib/services/options.service.ts

@@ -157,31 +157,42 @@ export class OptionsService {
           format: '{value}',
         };
       }
+      if (unit.yAxisMax !== undefined) {
+        yAxis.max = unit.yAxisMax;
+      }
+      if (unit.yAxisMin !== undefined) {
+        yAxis.min = unit.yAxisMin;
+      }
     }
     return yAxis;
   }
 
   private updateOptionsForDiagramTypeColumnAndLine(options: Options) {
+    const units = this.diagramOptions.units;
     this.diagramOptions.series.forEach((serie, i) => {
-      if (serie.unitId === this.diagramOptions.units[0].id) {
-        options.series[i]['tooltip'] = this.getTooltip({}, this.diagramOptions.units[0]);
-        options.series[i].type = 'column';
-        options.series[i].yAxis = 0;
-      } else if (serie.unitId === this.diagramOptions.units[1].id) {
-        options.series[i]['tooltip'] = this.getTooltip({}, this.diagramOptions.units[1]);
-        options.series[i].type = 'line';
-        options.series[i].yAxis = 1;
+      if (units[0].id === serie.unitId) {
+        options.series[i] = {
+          ...serie,
+          tooltip: this.getTooltip({}, units[0]),
+          yAxis: 0,
+          type: 'column',
+        } as SeriesOptionsType;
+      } else if (units[1].id === serie.unitId) {
+        options.series[i] = {
+          ...serie,
+          tooltip: this.getTooltip({}, units[1]),
+          yAxis: 1,
+          type: 'line',
+        } as SeriesOptionsType;
       }
     });
-    options.yAxis = this.getTwoYAxis(options.yAxis as YAxisOptions[], this.diagramOptions.units);
-  }
-
-  private getTwoYAxis(yAxis: YAxisOptions[], units: FhiDiagramUnit[]): YAxisOptions[] {
-    yAxis = [];
-    yAxis[0] = this.getYAxis({}, units[0]);
-    yAxis[1] = this.getYAxis({}, units[1]);
-    yAxis[1].opposite = true;
-    return yAxis;
+    options.yAxis = [
+      this.getYAxis({}, units[0]),
+      {
+        ...this.getYAxis({}, units[1]),
+        opposite: true,
+      },
+    ];
   }
 
   /**

src/app/views/shared/dynamic-library-examples/example-components/highcharts/highcharts.component.ts

@@ -127,8 +127,10 @@ export class HighchartsComponent implements OnInit {
   }
 
   private getData__example_2a() {
+    const activeDiagramType = this.diagramOptions?.activeDiagramType;
     this.getData(MockData.DodsfallEtterAarsak_2017_2021, {
       series: undefined,
+      activeDiagramType: activeDiagramType ? activeDiagramType : undefined,
       title: this.titles.title_2a,
       controls: {
         navigation: {
@@ -194,14 +196,16 @@ export class HighchartsComponent implements OnInit {
   private getData__example_3b() {
     this.getData(MockData.BefolkningInndelingPr2024_andel, {
       ...this.diagramOptions,
-      activeDiagramType: 'column',
+      activeDiagramType: 'line',
       title: this.titles.title_3b,
       units: [
         {
           decimals: 1,
           label: 'Prosent',
           symbol: '%',
           position: 'end',
+          yAxisMax: 20,
+          yAxisMin: 10,
         },
       ],
     });