Add rain days chart

frontend/src/app/components/graph/graph.component.ts

@@ -18,6 +18,8 @@ export class GraphComponent implements AfterViewInit {
   colors: string[] = [];
   @Input()
   formatSting: string;
+  @Input()
+  graphType = 'line';
 
   readonly randomId = uuidv4();
 
@@ -28,7 +30,7 @@ export class GraphComponent implements AfterViewInit {
     const data: ChartDataSeriesOptions[] = [];
     for (const monthlyData of this.monthlyDatas) {
       data.push({
-        type: 'line',
+        type: this.graphType,
         color: 'black',
         showInLegend: this.labels.length > 0,
         yValueFormatString: this.formatSting,

frontend/src/app/containers/region-details/region-details.component.html

@@ -53,6 +53,16 @@
           </app-graph>
         </ng-template>
       </mat-tab>
+      <mat-tab *ngIf="region.rain_days && region.rain_days[0]" label="Rain days">
+        <ng-template matTabContent>
+          <app-graph
+            [monthlyDatas]="[region.rain_days]"
+            class="graph"
+            formatSting="####"
+            graphType="column">
+          </app-graph>
+        </ng-template>
+      </mat-tab>
     </mat-tab-group>
   </div>
 </div>