Merge pull request #85 from e-picsa/refactor/climate-tool-services

Feat: Climate tool improvements

apps/picsa-apps/content-dashboard/src/app/pages/map/map.page.html

@@ -1,9 +1,9 @@
-<ion-header>
+<!-- <ion-header>
   <ion-toolbar>
     <ion-title>map</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content padding>
 
-</ion-content>
+</ion-content> -->

apps/picsa-tools/budget-tool/src/app/components/share-dialog/share-dialog.component.html

@@ -13,7 +13,7 @@ <h1 mat-dialog-title>{{ 'Share Budget' | translate }}</h1>
           style="height: 100px"
           [attr.data-disabled]="disabled || null"
         />
-        <div>Share as Picture</div>
+        <div>{{ 'Share as Picture' | translate }}</div>
       </div>
     </button>
     <button
@@ -28,7 +28,7 @@ <h1 mat-dialog-title>{{ 'Share Budget' | translate }}</h1>
           style="height: 100px"
           [attr.data-disabled]="disabled || null"
         />
-        <div>Share App Link</div>
+        <div>{{ 'Share App Link' | translate }}</div>
       </div>
     </button>
   </div>

apps/picsa-tools/budget-tool/src/app/store/budget.store.ts

@@ -320,6 +320,7 @@ export class BudgetStore implements OnDestroy {
   public async shareAsImage() {
     return this.printPrvdr.shareHtmlDom(
       '#budget',
+      this.activeBudget.meta.title,
       this.activeBudget.meta.title
     );
   }

apps/picsa-tools/budget-tool/src/styles/layout.scss

@@ -3,9 +3,3 @@ body {
   margin: 0;
   height: 100vh;
 }
-
-.page-content {
-  flex: 1;
-  background-color: white;
-  padding: 10px;
-}

apps/picsa-tools/climate-tool/.eslintrc.json

@@ -13,15 +13,15 @@
           "warn",
           {
             "type": "attribute",
-            "prefix": "picsa",
+            "prefix": "climate",
             "style": "camelCase"
           }
         ],
         "@angular-eslint/component-selector": [
           "warn",
           {
             "type": "element",
-            "prefix": "picsa",
+            "prefix": "climate",
             "style": "kebab-case"
           }
         ],

apps/picsa-tools/climate-tool/src/app/components/chart-layout/chart-layout.html

@@ -0,0 +1,31 @@
+<!-- line tool -->
+<climate-line-tool
+  #lineTool
+  [definition]="definition"
+  [chartConfig]="chartService.chartConfig"
+  *ngIf="toolService.enabled['line']"
+></climate-line-tool>
+<!-- chart -->
+<picsa-chart
+  #picsaChart
+  [config]="chartService.chartConfig"
+  [data]="$any(chartService.stationData)"
+></picsa-chart>
+<!-- definition -->
+<div class="chart-definition" #chartDefinition>
+  {{definition.definition | translate}}
+</div>
+<!-- probability tool -->
+<climate-probability-tool
+  *ngIf="toolService.enabled['line']"
+  style="height: 140px"
+  [x]="$any(toolService.tools['line'].value)"
+  [values]="chartService.chartSeriesData"
+  [chartName]="definition.name"
+  [reverseProbabilities]="definition.linetool?.reverse ? true : false"
+></climate-probability-tool>
+<!-- terciles tool -->
+<climate-terciles-tool
+  *ngIf="toolService.enabled['terciles']"
+  [values]="chartService.chartSeriesData"
+></climate-terciles-tool>

apps/picsa-tools/climate-tool/src/app/components/chart-layout/chart-layout.scss

@@ -0,0 +1,36 @@
+:host {
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  // fit the chart to aline line-tool with chart, description underneat and probability tools
+  grid-template-areas:
+    'line chart'
+    'blank  desc'
+    'prob prob';
+  // ensure the chart fits a minimum of 400px, with a target height of 60vh
+  grid-template-rows: minmax(400px, 60vh) auto auto;
+}
+
+climate-line-tool {
+  grid-area: line;
+  // offset chart title/dates with padding to line up
+  padding-top: 29px;
+  padding-bottom: 17px;
+}
+
+picsa-chart {
+  grid-area: chart;
+  margin-right: 3rem;
+  overflow: auto;
+  min-width: 500px;
+}
+
+.chart-definition {
+  grid-area: desc;
+  font-size: small;
+  font-style: italic;
+  margin: 1rem 2rem;
+  text-align: center;
+}
+climate-probability-tool {
+  grid-area: prob;
+}

apps/picsa-tools/climate-tool/src/app/components/chart-layout/chart-layout.ts

@@ -0,0 +1,35 @@
+import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
+import { IChartMeta } from '@picsa/models';
+import { PicsaChartComponent } from '@picsa/shared/features/charts/chart';
+import { IClimateView } from '../../models';
+import { ClimateChartService } from '../../services/climate-chart.service';
+import { ClimateToolService } from '../../services/climate-tool.service';
+
+/******************************************************************
+ * Component to display highly customised charts for climate data
+ * Additionally renders line tool alongside (to prevent lots of
+ * data passing up and down)
+ *****************************************************************/
+@Component({
+  selector: 'climate-chart-layout',
+  templateUrl: 'chart-layout.html',
+  styleUrls: ['chart-layout.scss'],
+})
+export class ClimateChartLayoutComponent implements AfterViewInit {
+  @Input() definition: IChartMeta & IClimateView;
+
+  @ViewChild('picsaChart', { static: false }) picsaChart: PicsaChartComponent;
+
+  constructor(
+    public chartService: ClimateChartService,
+    public toolService: ClimateToolService
+  ) {}
+
+  ngAfterViewInit() {
+    this.chartService.registerChartComponent(this.picsaChart);
+  }
+}
+
+/*****************************************************************************
+ *   Defaults and Interfaces
+ ****************************************************************************/

apps/picsa-tools/climate-tool/src/app/components/chart-tools/combined-probability/combined-probability.ts

@@ -0,0 +1,122 @@
+import { Component, Input } from '@angular/core';
+import { IStationData } from '@picsa/models';
+import { ClimateDataService } from '../../../services/climate-data.service';
+
+@Component({
+  selector: 'climate-combined-probability',
+  templateUrl: 'combined-probability.html',
+})
+export class CombinedProbabilityComponent {
+  @Input() data: IStationData[];
+
+  plantDate: any;
+  labels: any;
+  crops: any;
+  startProbability: any = { reversePercentage: null };
+  lengthProbability: any = { reversePercentage: null };
+  selectedCrop: any = {};
+  dayValue: number;
+  test = 'red';
+
+  constructor(public dataService: ClimateDataService) {
+    this.plantDate = { min: 1, max: 8, value: 3, step: 1 };
+    this.labels = {
+      1: 'Week 1, November',
+      2: 'Week 2, November',
+      3: 'Week 3, November',
+      4: 'Week 4, November',
+      5: 'Week 1, December',
+      6: 'Week 2, December',
+      7: 'Week 3, December',
+      8: 'Week 4, December',
+    };
+  }
+  plantDateChange(e) {
+    //manually set 1 October as day 274 and multiple by 7.6 (rough number of days in 1/4 month)
+    this.dayValue = 305 + (365 / 48) * this.plantDate.value;
+    this.startProbability = this.calculateCombinedProbability(this.data, [
+      { key: 'Start', value: this.dayValue, operator: '<=' },
+    ]);
+    this.calculateCropProbabilities();
+    // console.log('start probability', this.startProbability);
+    // console.log('day value', this.dayValue);
+  }
+  calculateCropProbabilities() {
+    for (const crop of this.crops) {
+      this.crops[crop.index].lengthProbability =
+        this.calculateCombinedProbability(this.data, [
+          {
+            key: 'End',
+            value: (this.dayValue + crop.lengthAvg) % 366,
+            operator: '>=',
+          },
+        ]);
+      this.crops[crop.index].rainfallProbability =
+        this.calculateCombinedProbability(this.data, [
+          {
+            key: 'Rainfall',
+            value: crop.waterAvg * (1 + this.plantDate.value / 16),
+            operator: '>=',
+          },
+        ]);
+    }
+  }
+
+  /******************************************************************************
+   *  Not currently in use, but may want in future
+   *****************************************************************************/
+  // used by combined probabilty component (not currently in use)
+  private calculateCombinedProbability(
+    data?: IStationData[],
+    conditions: { key: string; value: any; operator: '>=' | '<=' }[] = []
+  ) {
+    // //conditions are defined in format {key1:valueToTest1, key2:valueToTest2...}
+    // console.log('data', data);
+    // //remove values where conditions aren't known - current assumes null values non-numerical (e.g. string or null, may want to change later)
+    // for (const condition of conditions) {
+    //   console.log('testing condition', condition);
+    //   const key = condition.key;
+    //   const value = condition.value;
+    //   data = data.filter(element => {
+    //     return typeof element[key] == 'number';
+    //   });
+    // }
+    // //filter based on coditions
+    // const length = data.length;
+    // for (const condition of conditions) {
+    //   const key = condition.key;
+    //   const value = condition.value;
+    //   if (condition.operator == '>=') {
+    //     data = data.filter(element => {
+    //       return element[key] >= value;
+    //     });
+    //   }
+    //   if (condition.operator == '<=') {
+    //     data = data.filter(element => {
+    //       return element[key] <= value;
+    //     });
+    //   }
+    // }
+    // const percentage = data.length / length;
+    // const colors = {
+    //   0: '#BF7720',
+    //   10: '#B77A26',
+    //   20: '#AF7E2D',
+    //   30: '#A88134',
+    //   40: '#A0853B',
+    //   50: '#998942',
+    //   60: '#918C49',
+    //   70: '#899050',
+    //   80: '#829357',
+    //   90: '#7A975E',
+    //   100: '#739B65'
+    // };
+    // const color = colors[Math.round(percentage * 10) * 10];
+    // return {
+    //   results: data,
+    //   percentage: percentage,
+    //   reversePercentage: 1 - percentage,
+    //   color: color
+    // };
+  }
+}

apps/picsa-tools/climate-tool/src/app/components/crop-analysis/crop-analysis.ts → apps/picsa-tools/climate-tool/src/app/components/chart-tools/crop-analysis/crop-analysis.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { ICropRequirement } from '@picsa/models';
-import * as DATA from '../../data';
+import * as DATA from '../../../data';
 import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({