Fixed current progress

package.json

@@ -47,7 +47,7 @@
     "mapbox-gl": "^0.42.2",
     "moment": "^2.20.1",
     "moment-timezone": "^0.5.14",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "rxjs": "^5.5.2",
     "sass-loader": "^6.0.6",
     "topojson-client": "^3.0.0",

src/app/dashboard/charts/activity-chart/activity-chart.component.ts

@@ -2,8 +2,8 @@ import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/cor
 import * as Chart from 'chart.js';
 import * as $ from 'jquery';
 import { TranslateService } from '@ngx-translate/core';
-
 import { TimeService } from '../../../services/time.service';
+import settings from '../settings'
 
 @Component({
   selector: 'app-activity-chart',
@@ -45,21 +45,12 @@ export class ActivityChartComponent implements OnInit, OnChanges {
             label: this.translate.get('chart_legend.count')['value'],
             xAxisId: 'x1',
             yAxisId: 'y1',
-            borderWidth: 2,
-            borderColor: '#31aade',
-            backgroundColor: 'rgba(49, 170, 222, 0.1)',
-            pointRadius: 0,
+            borderWidth: settings.border.width,
+            borderColor: settings.border.color,
+            backgroundColor: settings.backgroundColor.blue,
+            pointRadius: settings.border.pointRadius,
             data: this.reportsData
           },
-          {
-            label: this.translate.get('chart_legend.area_count')['value'],
-            xAxisId: 'x1',
-            yAxisId: 'y1',
-            borderWidth: 2,
-            borderColor: '#c1272d',
-            pointRadius: 0,
-            data: this.floodsData
-          }
         ]
       },
       options: {
@@ -72,8 +63,8 @@ export class ActivityChartComponent implements OnInit, OnChanges {
           display: true,
           position: 'top',
           labels: {
-            fontColor: '#d0d0d0',
-            fontFamily: '"Roboto-Medium", "Roboto", "Open Sans"'
+            fontColor: settings.font.color,
+            fontFamily: settings.font.family
           }
         },
         scales: {
@@ -82,8 +73,8 @@ export class ActivityChartComponent implements OnInit, OnChanges {
             type: 'linear',
             position: 'left',
             ticks: {
-              fontColor: '#d0d0d0',
-              fontFamily: '"Roboto-Medium", "Roboto", "Open Sans"'
+              fontColor: settings.font.color,
+              fontFamily: settings.font.family
             }
           }],
           xAxes: [{
@@ -103,8 +94,8 @@ export class ActivityChartComponent implements OnInit, OnChanges {
             ticks: {
               autoSkip: true,
               autoSkipPadding: 12,
-              fontColor: '#d0d0d0',
-              fontFamily: '"Roboto Light", "Roboto", "Open Sans"'
+              fontColor: settings.font.color,
+              fontFamily: settings.font.family
             }
           },
           {
@@ -127,8 +118,8 @@ export class ActivityChartComponent implements OnInit, OnChanges {
             ticks: {
               autoSkip: true,
               autoSkipPadding: 12,
-              fontColor: '#d0d0d0',
-              fontFamily: '"Roboto Medium", "Roboto", "Open Sans"'
+              fontColor: settings.font.color,
+              fontFamily: settings.font.family
             }
           }
         ],

src/app/dashboard/charts/charts.component.html

@@ -3,14 +3,15 @@
     *ngFor="let type of chartTypes"
     [id]="type.id + 'Button'"
     [class]="type.class + ' mat-body-1'"
+    (click)="changeCenter(type.center, type.zoom)"
     (click)="changeChart($event)">
     {{ 'chart_menu.' + type.id | translate }}
   </button>
 </div>
 
 <div id="activityWrapper" class="charts">
   <app-activity-chart
-    *ngIf="(reportsData.length || floodsData.length) && selectedChart==='activity'"
+    *ngIf="(reportsData.length || floodsData.length) && tableService.selectedChart==='activity'"
     [reportsData]="reportsData"
     [floodsData]="floodsData"
     [scaleLimits]="scaleLimits">
@@ -19,7 +20,16 @@
 
 <div id="sourceWrapper" class="charts">
   <app-source-chart
-    *ngIf="(reportsSource && reportsSource.aggregates.length) && selectedChart==='source'"
+    *ngIf="(reportsSource && reportsSource.aggregates.length) && tableService.selectedChart==='source'"
     [reportsSource]="reportsSource">
   </app-source-chart>
 </div>
+
+<div id="jakartaWrapper" class="charts">
+  <app-jakarta-chart
+    *ngIf="(reportsData.length || floodsData.length) && tableService.selectedChart==='jakarta'"
+    [jakartaData]="jakartaData"
+    [floodsData]="floodsData"
+    [scaleLimits]="scaleLimits">
+  </app-jakarta-chart>
+</div>

src/app/dashboard/charts/charts.component.scss

@@ -31,16 +31,20 @@
   }
 }
 
-#sourceWrapper {
-  display: none;
-}
-
 .charts {
   width: 100%;
   height: 255px;
   padding-left: 10px;
 }
 
+#sourceWrapper {
+  display: none;
+}
+
+#jakartaWrapper {
+  display: none;
+}
+
 #activityWrapper {
 
 }

src/app/dashboard/charts/charts.component.ts

@@ -1,9 +1,11 @@
-import { Component, Input, Output, OnInit } from '@angular/core';
+import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
 import * as Chart from 'chart.js';
+import * as mapboxgl from 'mapbox-gl';
 import * as $ from 'jquery';
 import { TranslateService } from '@ngx-translate/core';
-
 import { HttpService } from '../../services/http.service';
+import { TableService } from '../../services/table.service';
+import { TimeService } from '../../services/time.service';
 
 @Component({
   selector: 'app-charts',
@@ -17,65 +19,92 @@ export class ChartsComponent implements OnInit {
   };
   chartTypes: {
     id: string,
-    class: string
+    class: string,
+    center: Array<Number>,
+    zoom: number
   }[];
-  selectedChart: string;
+  @Input() map: mapboxgl.Map;
 
+  @Output() updateStats = new EventEmitter();
   @Output() scaleLimits: {max: number, min: number};
   @Output() reportsData: {t: string, y: number}[] = [];
   @Output() floodsData: {t: string, y: number}[] = [];
-
+  @Output() jakartaData: {t: string, y: number}[] = [];
   constructor(
     private httpService: HttpService,
-    private translate: TranslateService
+    private translate: TranslateService,
+    private tableService: TableService,
+    private timeservice: TimeService
   ) {
     this.chartTypes = [
-      {id: 'activity', class: 'tabButton selected'},
-      {id: 'source', class: 'tabButton'}
+      {id: 'activity', class: 'tabButton selected', center: [120, -2], zoom: 4.5},
+      {id: 'source', class: 'tabButton', center: [120, -2], zoom: 4.5},
+      {id: 'jakarta', class: 'tabButton', center: [106.86, -6.17], zoom: 11}
     ];
   }
 
   ngOnInit() {
     for (const type of this.chartTypes) {
       if (type.class.indexOf('selected', 10) === 10) {
-        this.selectedChart = type.id;
+        this.tableService.selectedChart = type.id;
       }
     }
   }
 
+  changeCenter(coords, zoom) {
+    if (this.map) {
+      this.map.setCenter(coords);
+      this.map.setMinZoom(zoom);
+      this.map.setZoom(zoom);
+    }
+  }
+
   changeChart(e) {
     $('.tabButton').removeClass('selected');
     $('#' + e.target.id).addClass('selected');
-    this.selectedChart = e.target.id.substring(0, e.target.id.length - 6);
+    this.tableService.selectedChart = e.target.id.substring(0, e.target.id.length - 6);
 
     // Use jQuery to show / hide, using *ngIf destroys component, & thus current graphics
-    $('.charts:not(#' + this.selectedChart + 'Wrapper)').hide();
-    $('#' + this.selectedChart + 'Wrapper').show();
+    $('.charts:not(#' + this.tableService.selectedChart + 'Wrapper)').hide();
+    $('#' + this.tableService.selectedChart + 'Wrapper').show();
+
+    const region = this.tableService.selectedChart == 'jakarta' ? 'ID-JK' : '';
+    this.updateStats.emit(region);
+  }
+
+  async loadData(data, timeseries) {
+    let response = await(timeseries)
+
+    for (const report of response) {
+
+      data.push({
+        t: report.ts,
+        y: report.count
+      });
+    }
   }
 
   prepareActivityData(timePeriod) {
     this.reportsData = [];
     this.floodsData = [];
-    this.httpService.getTimeseries('reports', timePeriod)
-    .then(reports => {
-      this.httpService.getTimeseries('floods', timePeriod)
-      .then(floods => {
-
-        for (const report of reports) {
-          this.reportsData.push({
-            t: report.ts,
-            y: report.count
-          });
-        }
+    this.jakartaData = [];
 
-        for (const area of floods) {
-          this.floodsData.push({
-            t: area.ts,
-            y: area.count
-          });
+    this.loadData(this.reportsData, this.httpService.getTimeseries('reports', timePeriod))
+    .catch(error => console.log(error));
+    this.loadData(this.floodsData, this.httpService.getTimeseries('floods', timePeriod))
+    .catch(error => console.log(error));
+
+    this.httpService.getReportsArchive(timePeriod,'ID-JK')
+    .then(geojsonData => {
+      const dataTS = this.timeservice.dataAnalysis
+      for (let i = 0; i < dataTS.length-1; i++) {
+        for (const data of geojsonData.features) {
+          if (data.properties.created_at >= dataTS[i].ts && data.properties.created_at < dataTS[(i+1)%dataTS.length].ts) {
+            dataTS[i].count += 1
+          }
         }
-      })
-      .catch(error => console.log(error));
+      }
+      this.loadData(this.jakartaData, dataTS)
     })
     .catch(error => console.log(error));
   }

src/app/dashboard/charts/jakarta-chart/jakarta-chart.component.html

@@ -0,0 +1,2 @@
+<div id="jakartaCanvasWrapper">
+</div>

src/app/dashboard/charts/jakarta-chart/jakarta-chart.component.scss

@@ -0,0 +1,6 @@
+@import "../../../../styles.scss";
+
+#jakartaCanvasWrapper {
+  width: 100%;
+  height: 100%;
+}

src/app/dashboard/charts/jakarta-chart/jakarta-chart.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JakartaChartComponent } from './jakarta-chart.component';
+
+describe('JakartaChartComponent', () => {
+  let component: JakartaChartComponent;
+  let fixture: ComponentFixture<JakartaChartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ JakartaChartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JakartaChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});