ticket #47 : résolution de "Déplacer la coche histogramme auprès du graphique"

résolution de "Mettre le graphe en scatter par défaut pour min, max, pas et en histogramme en valeurs libres"

src/app/app.module.ts

@@ -32,7 +32,7 @@ import { GenericCalculatorComponent } from './components/generic-calculator/calc
 import { CalcCanvasComponent } from './components/canvas/canvas.component';
 import { SectionCanvasComponent } from './components/section-canvas/section-canvas.component';
 import { RemousResultsComponent } from './components/remous-results/remous-results.component';
-import { ResultsGraphComponent } from './components/results-graph/results-graph.component';
+import { ResultsGraphComponent, GraphTypeSelectComponent } from './components/results-graph/results-graph.component';
 import { LogComponent } from './components/log/log.component';
 import { CalculatorListComponent } from './components/calculator-list/calculator-list.component';
 import { ApplicationSetupComponent } from './components/app-setup/app-setup.component';
@@ -75,7 +75,8 @@ const appRoutes: Routes = [
     BaseParamInputComponent,
     GenericCalculatorComponent,
     // AlertDialog,
-    CalculatorResultsComponent, FixedVarResultsComponent, SectionResultsComponent, RemousResultsComponent, ResultsGraphComponent,
+    CalculatorResultsComponent, FixedVarResultsComponent, SectionResultsComponent, RemousResultsComponent,
+    ResultsGraphComponent, GraphTypeSelectComponent,
     CalcCanvasComponent, SectionCanvasComponent
   ],
   // entryComponents: [AlertDialog],

src/app/components/generic-select/generic-select.component.html

@@ -3,6 +3,6 @@
         {{currentLabel}}
     </button>
     <div class="dropdown-menu">
-        <a class="dropdown-item" *ngFor="let e of entries" [value]=entryValue(e)>{{entryLabel(e)}}</a>
+        <a class="dropdown-item" *ngFor="let e of entries" [value]=e>{{entryLabel(e)}}</a>
     </div>
 </div>
\ No newline at end of file

src/app/components/generic-select/generic-select.component.ts

@@ -6,19 +6,20 @@ import { FormulaireService } from "../../services/formulaire/formulaire.service"
 
 /*
   exemple de template :
-  <div class="btn-group col-12 col-sm-9" dropdown (click)="onSelect($event)">
+
+<div class="btn-group" dropdown (click)="onSelect($event)">
     <button dropdownToggle class="btn btn-primary dropdown-toggle waves-light my-1" type="button" mdbRippleRadius>
         {{currentLabel}}
     </button>
     <div class="dropdown-menu">
-        <a class="dropdown-item" *ngFor="let e of entries" [value]=e.value>{{e.label}}</a>
+        <a class="dropdown-item" *ngFor="let e of entries" [value]=e>{{entryLabel(e)}}</a>
     </div>
-  </div>
+</div>
 */
 
 export abstract class GenericSelectComponent {
     // valeur actuellement sélectionnée
-    // la valeur est le code non affiché repérant une entrée de la liste (cf. [value] dans le templace)
+    // la valeur repère une entrée de la liste (cf. [value] dans le template)
     private _selectedValue: any;
 
     /**
@@ -27,11 +28,14 @@ export abstract class GenericSelectComponent {
     @Output()
     private selectChange = new EventEmitter<string>();
 
+    public set selectedValue(v: any) {
+        this._selectedValue = v;
+    }
+
     private get currentLabel(): string {
-        if (this._selectedValue != undefined)
-            for (let e of this.entries)
-                if (this.entryValue(e) == this._selectedValue)
-                    return this.entryLabel(e);
+        for (let e of this.entries)
+            if (e == this._selectedValue)
+                return this.entryLabel(e);
 
         return "<no selection>";
     }
@@ -46,11 +50,6 @@ export abstract class GenericSelectComponent {
      */
     protected abstract get entries(): any[];
 
-    /**
-     * calcule la "valeur" d'une entrée
-     */
-    protected abstract entryValue(entry: any): string;
-
     /**
      * calcule l'étiquette d'une entrée (ce qui est affiché dans la liste déroulante)
      */

src/app/components/param-values/param-values.component.html

@@ -21,9 +21,4 @@
     <div *ngIf="isList" class="col-12 col-sm-6">
         <value-list title="valeurs séparées par ';'" (onChange)="onListChanged($event)"></value-list>
     </div>
-
-    <div *ngIf="isList" class="col-12 col-sm-3">
-        <input type="checkbox" name="histogram" [(ngModel)]="_param.histogramMode">Histogramme
-        <br/>
-    </div>
 </div>
\ No newline at end of file

src/app/components/results-graph/results-graph.component.html

@@ -3,4 +3,10 @@
         <chart [type]="graph_type" [data]="graph_data" [options]="graph_options">
         </chart>
     </div>
+</div>
+
+<div class="row">
+    <div class="col-4 mx-auto">
+        <graph-type (selectChange)="onGraphTypeSelectChange($event)"></graph-type>
+    </div>
 </div>
\ No newline at end of file

src/app/components/results-graph/results-graph.component.ts

-import { Component, AfterViewInit, EventEmitter, Output } from '@angular/core';
+import { Component, AfterViewInit, EventEmitter, Output, ViewChild } from '@angular/core';
 
 import { FixedVarResults, GraphType } from "../../results/fixed-var-results";
+import { GenericSelectComponent } from '../generic-select/generic-select.component';
+
+@Component({
+    selector: "graph-type",
+    templateUrl: "../generic-select/generic-select.component.html"
+})
+export class GraphTypeSelectComponent extends GenericSelectComponent {
+    private _entries: GraphType[] = [GraphType.Histogram, GraphType.Scatter];
+    private _entriesLabels: string[] = ["Histogramme", "XY"];
+
+    protected get entries(): any[] {
+        return this._entries;
+    }
+
+    protected entryLabel(entry: any): string {
+        // return entry;
+        const i = this._entries.indexOf(entry);
+        return this._entriesLabels[i];
+    }
+}
 
 @Component({
     selector: 'results-graph',
@@ -9,6 +29,11 @@ import { FixedVarResults, GraphType } from "../../results/fixed-var-results";
 export class ResultsGraphComponent { //implements AfterViewInit {
     private _results: FixedVarResults;
 
+    private _currentGraphType: GraphType;
+
+    @ViewChild(GraphTypeSelectComponent)
+    private _graphTypeComponent: GraphTypeSelectComponent;
+
     /*
      * config du graphe
      */
@@ -27,25 +52,19 @@ export class ResultsGraphComponent { //implements AfterViewInit {
             display: true,
             text: ""
         }
-        // scales: {}
     };
 
-    /**
-     * événement émis à la fin de la création de la vue
-     */
-    // @Output()
-    // private onViewInit = new EventEmitter();
-
     public set results(r: FixedVarResults) {
         this._results = r;
-        // this.updateView();
+        this._currentGraphType = r.graphType;
+        this._graphTypeComponent.selectedValue = this._currentGraphType;
     }
 
     // http://www.chartjs.org/docs/latest/charts/line.html#dataset-properties
     //     showLine
 
     public updateView() {
-        switch (this._results.graphType) {
+        switch (this._currentGraphType) {
             case GraphType.Histogram:
                 this.graph_type = "bar";
                 this.generateBarGraph();
@@ -63,9 +82,10 @@ export class ResultsGraphComponent { //implements AfterViewInit {
         }
     }
 
-    // public ngAfterViewInit() {
-    //     this.onViewInit.emit();
-    // }
+    private onGraphTypeSelectChange(event) {
+        this._currentGraphType = event;
+        this.updateView();
+    }
 
     /**
      * génère les données d'un graphe de type "line"
@@ -157,4 +177,4 @@ export class ResultsGraphComponent { //implements AfterViewInit {
             ]
         };
     }
-}
\ No newline at end of file
+}

src/app/formulaire/formulaire-definition.ts

@@ -1139,7 +1139,7 @@ export class FormulaireDefinition extends Observable {
                     break;
 
                 case ParamValueMode.LISTE:
-                    this._fixVarResults.graphType = varParam.histogramMode ? GraphType.Histogram : GraphType.Scatter;
+                    this._fixVarResults.graphType = GraphType.Histogram;
 
                     for (let val of varParam.valueList) {
                         prms[varParam.symbol].v = val;

src/app/formulaire/ngparam.ts

@@ -52,7 +52,6 @@ export class NgParameter extends InputField {
     public stepValue: number; // pas de progression dans le cas ParamRadioConfig.VAR
     public valueList: number[];
     public valueMode: ParamValueMode = ParamValueMode.MINMAX;
-    public histogramMode: boolean = false; // A VIRER et deplacer dans FixVarResults
 
     constructor(private _paramDef: ParamDefinition, formId: number) {
         super(_paramDef.computeNodeType, _paramDef.symbol, formId);