use date picker in visualization page

pdb-js/src/app/visualization-page/visualization-page.component.html

@@ -1,113 +1,155 @@
 <div id="visualization">
   <div id="query-box">
-      <pdb-query-autocomplete #query></pdb-query-autocomplete>
+    <pdb-query-autocomplete #query></pdb-query-autocomplete>
   </div>
-  
+
   <div id="date-box">
+    <app-date-picker #datePicker></app-date-picker>
+    <!--
     <mat-form-field class="pdb-form-full-width">
         <mat-label>Date Range:</mat-label>
         <input matInput id="search-date-range" value="dateRange" name="dates" />
       </mat-form-field>
+      -->
   </div>
-  
+
   <div id="filters">
     <div id="filterpanel">
       <mat-form-field class="pdb-form-full-width">
         <mat-label>Type:</mat-label>
-        <mat-select  multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)">
-          <mat-option *ngFor="let plotType of plotTypes" [value]="plotType" [disabled]="!plotType.active">
-            <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
+        <mat-select
+          multiple
+          [(ngModel)]="selectedPlotType"
+          (ngModelChange)="changePlotType($event)"
+        >
+          <mat-option
+            *ngFor="let plotType of plotTypes"
+            [value]="plotType"
+            [disabled]="!plotType.active"
+          >
+            <img src="assets/img/{{ plotType.icon }}.svg" class="icon-select" />
+            {{ plotType.name }}
           </mat-option>
         </mat-select>
       </mat-form-field>
-    
+
       <mat-form-field class="pdb-form-full-width">
         <mat-label>Group By:</mat-label>
         <mat-select multiple [(value)]="groupBy">
-          <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
+          <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{
+            tagField.name
+          }}</mat-option>
         </mat-select>
       </mat-form-field>
-      
+
       <pdb-limit-by #limitbycomponent></pdb-limit-by>
       <div [hidden]="!selectedPlotTypesContains(['BAR', 'BOX'])">
-      <mat-form-field >
-        <mat-label>Intervals (only bar chart):</mat-label>
-        <mat-select [(value)]="intervalUnit">
-          <mat-option value="NO_INTERVAL">-</mat-option>
-          <mat-option value="SECOND">second</mat-option>
-          <mat-option value="MINUTE">minute</mat-option>
-          <mat-option value="HOUR">hour</mat-option>
-          <mat-option value="DAY">day</mat-option>
-          <mat-option value="WEEK">week</mat-option>
-          <mat-option value="MONTH">month</mat-option>
-          <mat-option value="YEAR">year</mat-option>
-        </mat-select>
-      </mat-form-field>
+        <mat-form-field>
+          <mat-label>Intervals (only bar chart):</mat-label>
+          <mat-select [(value)]="intervalUnit">
+            <mat-option value="NO_INTERVAL">-</mat-option>
+            <mat-option value="SECOND">second</mat-option>
+            <mat-option value="MINUTE">minute</mat-option>
+            <mat-option value="HOUR">hour</mat-option>
+            <mat-option value="DAY">day</mat-option>
+            <mat-option value="WEEK">week</mat-option>
+            <mat-option value="MONTH">month</mat-option>
+            <mat-option value="YEAR">year</mat-option>
+          </mat-select>
+        </mat-form-field>
       </div>
       <div [hidden]="!selectedPlotTypesContains(['BAR', 'BOX'])">
-        <mat-checkbox [(ngModel)]="renderBarChartTickLabels">Show Tic Labels (bar chart)</mat-checkbox>
+        <mat-checkbox [(ngModel)]="renderBarChartTickLabels"
+          >Show Tic Labels (bar chart)</mat-checkbox
+        >
       </div>
-     <pdb-y-axis-definition #y1AxisDefinitionComponent yIndex="1"></pdb-y-axis-definition>
-     <pdb-y-axis-definition #y2AxisDefinitionComponent yIndex="2" [hidden]="!y2AxisAvailable"></pdb-y-axis-definition>
-     
-     <mat-checkbox *ngIf="galleryEnabled" [(ngModel)]="enableGallery" (click)="toggleGallery($event)">Gallery</mat-checkbox>
-     
-     <mat-form-field *ngIf="enableGallery" class="pdb-form-full-width">
+      <pdb-y-axis-definition
+        #y1AxisDefinitionComponent
+        yIndex="1"
+      ></pdb-y-axis-definition>
+      <pdb-y-axis-definition
+        #y2AxisDefinitionComponent
+        yIndex="2"
+        [hidden]="!y2AxisAvailable"
+      ></pdb-y-axis-definition>
+
+      <mat-checkbox
+        *ngIf="galleryEnabled"
+        [(ngModel)]="enableGallery"
+        (click)="toggleGallery($event)"
+        >Gallery</mat-checkbox
+      >
+
+      <mat-form-field *ngIf="enableGallery" class="pdb-form-full-width">
         <mat-label>Split By:</mat-label>
         <mat-select [(value)]="splitBy">
-          <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
+          <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{
+            tagField.name
+          }}</mat-option>
         </mat-select>
         <mat-error *ngIf="splitBy == null || true">
           Please select a value!
         </mat-error>
       </mat-form-field>
-     
-     
+
       <div id="plot-button-bar">
-        <a 
-          mat-icon-button 
+        <a
+          mat-icon-button
           [routerLink]="['/vis']"
-          [queryParams]="{config: serializedConfig()}"
+          [queryParams]="{ config: serializedConfig() }"
           target="_blank"
           aria-label="open new window with the same search"
-          title="open new window with the same search"><img src="assets/img/link.svg" aria-hidden="true"/></a>
-        <button 
-        *ngIf="!enableGallery && !plotJobActive"
-        [disabled]="plotJobActive"
-        mat-button
-        matTooltip="Create Plot" 
-        (click)="plot()">
-          <img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
+          title="open new window with the same search"
+          ><img src="assets/img/link.svg" aria-hidden="true"
+        /></a>
+        <button
+          *ngIf="!enableGallery && !plotJobActive"
+          [disabled]="plotJobActive"
+          mat-button
+          matTooltip="Create Plot"
+          (click)="plot()"
+        >
+          <img
+            src="assets/img/scatter-chart2.svg"
+            class="icon-inline"
+            aria-hidden="true"
+            title="create plot"
+          />
           Plot
         </button>
-        <button 
+        <button
           *ngIf="enableGallery && !plotJobActive"
           mat-button
           matTooltip="Create Gallery"
           (click)="gallery()"
-          [disabled]="this.splitBy == null">
-          <img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
+          [disabled]="this.splitBy == null"
+        >
+          <img
+            src="assets/img/four-squares-line.svg"
+            class="icon-inline"
+            aria-hidden="true"
+            title="Create Gallery (only active if 'Split' is set)"
+          />
           Gallery
         </button>
-        <button 
+        <button
           *ngIf="plotJobActive"
           mat-button
           (click)="abort()"
-          matTooltip="abort"><img src="assets/img/close.svg" class="icon-inline" /> Abort</button>
+          matTooltip="abort"
+        >
+          <img src="assets/img/close.svg" class="icon-inline" /> Abort
+        </button>
       </div>
     </div>
   </div>
-  
+
   <div id="results">
     <pdb-plot-view
-      #plotView 
+      #plotView
       (loadingEvent)="loading($event)"
-      (dateRangeUpdateEvent)="updateDateRange($event)"></pdb-plot-view>
-    <pdb-gallery-view
-      #galleryView>
-    </pdb-gallery-view>
+      (dateRangeUpdateEvent)="updateDateRange($event)"
+    ></pdb-plot-view>
+    <pdb-gallery-view #galleryView> </pdb-gallery-view>
   </div>
-  
 </div>
-
-