feat(statistics): Dialog to fill in input for prediction models

hslayers · Jun 19, 2022 · ec50fcf · ec50fcf
1 parent 4cc322d
commit ec50fcf
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 415 deletions.
diff --git a/projects/test-statistics-app/src/lib/prediction-chart-dialog.component.html b/projects/test-statistics-app/src/lib/prediction-chart-dialog.component.html
@@ -1,18 +1,74 @@
 <div class="modal in" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
+    <div class="modal-dialog modal-lg" style="max-width: 90%; height: calc(var(--vh, 1vh) * 100 - 50);">
         <div class="modal-content">
             <div class="modal-header">
                 <h4 class="modal-title">
-                    {{'STATISTICS.PREDICT' | translateHs : {app: data.app} }} {{data.predictedVariable}} {{'STATISTICS.BY' |
-                    translateHs : {app: data.app} }}
-                    {{data.factor.name}}
+                    {{'STATISTICS.PREDICT' | translateHs : {app: data.app} }} {{predictedVariable}}
                 </h4>
                 <button (click)="close()" class="btn-close" data-dismiss="modal"><span aria-hidden="true"></span><span
                         class="visually-hidden">{{'COMMON.close' | translateHs : {app: data.app} }}</span></button>
             </div>
             <div class="modal-body" style="max-height:600px; overflow-y:auto">
+
                 <div class="flex-row w-100 m-auto justify-content-center align-items-center" style="display: flex">
-                    <p class="m-0 p-0 flex-fill text-primary">{{'STATISTICS.LOCATION_FILTER' | translateHs : {app: data.app} }}:
+                    <p class="m-0 p-0 flex-fill text-primary">{{'STATISTICS.PREDICTIONS' | translateHs : {app: data.app} }}:
+                    </p>
+                    <div ngbDropdown placement="bottom-right" style="max-width: 50%">
+                        <button type="button" ngbDropdownToggle class="
+                      btn btn-sm
+                      rounded-0
+                      hs-toolbar-button
+                      d-flex
+                      align-items-center
+                      mw-100
+                    " aria-haspopup="true">
+                            <div class="text-truncate" *ngIf="selectedPrediction !== undefined">
+                                {{selectedPrediction.name}}
+                            </div>
+                        </button>
+                        <div ngbDropdownMenu style="transform: translateX(25%); width: 15em">
+                            <div class="d-flex align-items-center w-100 flex-column">
+                                <a class="dropdown-item text-truncate" *ngFor="let prediction of predictions"
+                                    data-toggle="tooltip" (click)="selectPrediction(prediction)">{{prediction.name}}</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex-row w-100 m-auto justify-content-center align-items-center" style="display: flex">
+                    <div class="input-group">
+                        <span class="input-group-text">{{ "STATISTICS.FROM" | translateHs : {app: data.app} }}</span>
+                        <input class="form-control" style="width: 65px" (change)="dateRangeChanged()" [(ngModel)]="fromYear" name="min" />
+                    </div>
+
+                    <div class="input-group">
+                        <span class="input-group-text">{{ "STATISTICS.TILL" | translateHs : {app: data.app} }}</span>
+                        <input class="form-control" style="width: 65px" (change)="dateRangeChanged()" [(ngModel)]="tillYear" name="max" />
+                    </div>
+                </div>
+
+                <table class="table">
+                    <tr>
+                        <th>Variable</th>
+                        <th *ngFor="let year of years">
+                            {{year}}
+                        </th>
+                    </tr>
+                    <tr *ngFor="let col of variables">
+                        <td>{{col.name}}</td>
+                        <td *ngFor="let year of years">
+                            <input class="form-control form-control-sm" (change)="predict()" [(ngModel)]="dict[selectedLocation + '::'+ year].values[col.name]" />
+                        </td>
+                    </tr>
+                    <tr class="table-primary">
+                        <td>{{predictedVariable}}</td>
+                        <td *ngFor="let year of years">
+                            <input class="form-control form-control-sm" readonly [(ngModel)]="dict[selectedLocation + '::'+ year].values[predictedVariable]" />
+                        </td>
+                    </tr>
+                </table>
+                <div class="flex-row w-100 m-auto justify-content-center align-items-center" style="display: flex">
+                    <p class="m-0 p-0 flex-fill text-primary">{{'STATISTICS.LOCATION_FILTER' | translateHs : {app: data.app} }} {{'STATISTICS.OPTIONAL' | translateHs : {app: data.app} }}:
                     </p>
                     <div ngbDropdown placement="bottom-right" style="max-width: 50%">
                         <button type="button" ngbDropdownToggle class="
@@ -30,7 +86,7 @@ <h4 class="modal-title">
                         <div ngbDropdownMenu style="transform: translateX(25%); width: 15em">
                             <div class="d-flex align-items-center w-100 flex-column">
                                 <a class="dropdown-item text-truncate" *ngFor="let val of locationValues"
-                                    data-toggle="tooltip" (click)="selectFilter(val)">{{val}}</a>
+                                    data-toggle="tooltip" (click)="selectFilter(val); fillPlaceholders()">{{val}}</a>
                             </div>
                         </div>
                     </div>