diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cdec1aedb241e8e139169e6037f1efc35f256837..545d930ee3e10b0b4d302a562d4555940a96ad29 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -32,6 +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 { LogComponent } from './components/log/log.component';
import { CalculatorListComponent } from './components/calculator-list/calculator-list.component';
import { ApplicationSetupComponent } from './components/app-setup/app-setup.component';
@@ -66,7 +67,7 @@ const appRoutes: Routes = [
NgParamInputComponent,
FieldSetComponent,
ParamFieldLineComponent, NgParamMinComponent, NgParamMaxComponent, NgParamStepComponent,
- ParamValuesComponent, ValueListComponent,
+ ParamValuesComponent, ValueListComponent,
SelectFieldLineComponent, CheckFieldLineComponent,
LogComponent,
CalculatorListComponent,
@@ -74,7 +75,7 @@ const appRoutes: Routes = [
BaseParamInputComponent,
GenericCalculatorComponent,
// AlertDialog,
- CalculatorResultsComponent, FixedVarResultsComponent, SectionResultsComponent, RemousResultsComponent,
+ CalculatorResultsComponent, FixedVarResultsComponent, SectionResultsComponent, RemousResultsComponent, ResultsGraphComponent,
CalcCanvasComponent, SectionCanvasComponent
],
// entryComponents: [AlertDialog],
diff --git a/src/app/components/fixedvar-results/fixedvar-results.component.html b/src/app/components/fixedvar-results/fixedvar-results.component.html
index c9b33f435b61a976670abd2f71041ba2c3d3733a..f17d9e8ebf7dd2f990a393f91923269bb9c98f99 100644
--- a/src/app/components/fixedvar-results/fixedvar-results.component.html
+++ b/src/app/components/fixedvar-results/fixedvar-results.component.html
@@ -4,12 +4,7 @@
</div>
</div>
-<div class="row">
- <div class="col-8 mx-auto">
- <chart *ngIf="showVarResults" [type]="graph_type" [data]="graph_data" [options]="graph_options">
- </chart>
- </div>
-</div>
+<results-graph *ngIf="showVarResults"></results-graph>
<!--
classe conditionnelle :
diff --git a/src/app/components/fixedvar-results/fixedvar-results.component.ts b/src/app/components/fixedvar-results/fixedvar-results.component.ts
index 890766abc01cd6e9bb5823b3be1d9927f1338073..27b225369857614cc456b08f8cd98921776383e6 100644
--- a/src/app/components/fixedvar-results/fixedvar-results.component.ts
+++ b/src/app/components/fixedvar-results/fixedvar-results.component.ts
@@ -1,10 +1,10 @@
-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, DoCheck } from "@angular/core";
import { InternationalisationService } from "../../services/internationalisation/internationalisation.service";
import { ApplicationSetupService } from '../../services/app-setup/app-setup.service';
import { LogComponent } from '../../components/log/log.component';
-import { cLog } from "jalhyd";
-import { FixedVarResults, GraphType } from "../../results/fixed-var-results";
+import { FixedVarResults } from "../../results/fixed-var-results";
+import { ResultsGraphComponent } from "../results-graph/results-graph.component";
@Component({
selector: "fixedvar-results",
@@ -29,7 +29,7 @@ import { FixedVarResults, GraphType } from "../../results/fixed-var-results";
`
]
})
-export class FixedVarResultsComponent {
+export class FixedVarResultsComponent implements DoCheck {
/**
* résultats non mis en forme
*/
@@ -45,26 +45,10 @@ export class FixedVarResultsComponent {
*/
private _varResults: Object[];
- /*
- * config du graphe
- */
- private graph_type: string;
- private graph_data = {};
- private graph_options = {
- responsive: true,
- maintainAspectRatio: true,
- animation: {
- duration: 0
- },
- legend: {
- display: false
- },
- title: {
- display: true,
- text: ""
- },
- scales: {}
- };
+ /**
+ * true si le graphe des résultats doit être remis à jour
+ */
+ private _updateResultsGraph: boolean;
/**
* composant journal
@@ -72,6 +56,9 @@ export class FixedVarResultsComponent {
@ViewChild(LogComponent)
private logComponent: LogComponent;
+ @ViewChild(ResultsGraphComponent)
+ private resultsGraphComponent: ResultsGraphComponent;
+
constructor(
private intlService: InternationalisationService,
private appSetupService: ApplicationSetupService
@@ -79,48 +66,44 @@ export class FixedVarResultsComponent {
public set results(r: FixedVarResults) {
this._results = r;
- this.updateView();
+ this._updateResultsGraph = true;
}
public updateView() {
this._fixedResults = [];
this._varResults = [];
this.logComponent.log = undefined;
- if (this._results != undefined)
- this.generateResults();
+ this.generateResults();
+ this._updateResultsGraph = true;
}
- private generateResults() {
- const nDigits = this.appSetupService.displayDigits;
- const prec = this.appSetupService.displayPrecision;
-
- for (let r of this._results.fixedResults) {
- let v = r["value"];
- this._fixedResults.push({ "label": r["label"], "value": v.toFixed(nDigits) });
+ public ngDoCheck() {
+ if (this._updateResultsGraph) {
+ if (this.resultsGraphComponent != undefined) {
+ this.resultsGraphComponent.results = this._results;
+ this.resultsGraphComponent.updateView();
+ this._updateResultsGraph = false;
+ }
}
+ }
- for (let r of this._results.varResults)
- this._varResults.push({ "param": r["param"].toFixed(nDigits), "result": r["result"].toFixed(nDigits) });
-
- this.logComponent.log = this._results.log;
+ private generateResults() {
+ if (this._results != undefined) {
+ const nDigits = this.appSetupService.displayDigits;
+ const prec = this.appSetupService.displayPrecision;
- switch (this._results.graphType) {
- case GraphType.Histogram:
- this.graph_type = "bar";
- this.generateBarGraph();
- break;
+ for (let r of this._results.fixedResults) {
+ let v = r["value"];
+ this._fixedResults.push({ "label": r["label"], "value": v.toFixed(nDigits) });
+ }
- case GraphType.HistoLine:
- this.graph_type = "line";
- this.generateLineGraph();
- break;
+ for (let r of this._results.varResults)
+ this._varResults.push({ "param": r["param"].toFixed(nDigits), "result": r["result"].toFixed(nDigits) });
- default:
- this.graph_type = "scatter";
- this.generateScatterGraph();
- break;
+ this.logComponent.log = this._results.log;
}
}
+
/**
* affichage de la table des résultats fixés
*/
@@ -143,147 +126,6 @@ export class FixedVarResultsComponent {
return this.intlService.localizeText("INFO_CALCULATOR_VALEURS");
}
- // public addFixedResult(p: NgParameter, v: number, fixedPrec: number, displaySymbol: boolean) {
- // this._fixedResults.push({ "label": this.paramLabel(p, displaySymbol), "value": v.toFixed(fixedPrec) });
- // }
-
- // public addVarResult(paramVal: number, resVal: number, fixedPrec: number) {
- // this._varResults.push({ "param": paramVal.toFixed(fixedPrec), "result": resVal.toFixed(fixedPrec) });
- // this._varGraph.push(resVal);
- // }
-
- // public addLogMessages(l: cLog) {
- // this.logComponent.addLogEntries(l);
- // }
-
- /**
- * génère les données d'un graphe de type "line"
- */
- private generateLineGraph() {
- let labs = [];
- let dat = [];
- for (let i in this._results.varResults) {
- let r = this._results.varResults[i];
- labs.push(r["param"]);
- dat.push(this._results.varGraph[i]);
- }
-
- this.graph_options.title.text = this._results.graphTitle;
-
- this.graph_data = {
- labels: labs,
- datasets: [
- {
- label: "",
- data: dat
- }
- ]
- };
- }
-
- /**
- * génère les données d'un graphe de type "bar"
- */
- private generateBarGraph() {
- let labs = [];
- let dat = [];
- for (let i in this._results.varResults) {
- let r = this._results.varResults[i];
- labs.push(r["param"]);
- dat.push(this._results.varGraph[i]);
- }
-
- this.graph_options.title.text = this._results.graphTitle;
- this.graph_options.scales = {
- xAxes: [{
- gridLines: {
- offsetGridLines: true
- }
- }]
- };
-
- this.graph_data = {
- labels: labs,
- datasets: [
- {
- label: "",
- data: dat
- }
- ]
- };
- }
-
- /**
- * génère les données d'un graphe de type "scatter"
- */
- private generateScatterGraph() {
- let dat = [];
- for (let i in this._results.varResults) {
- let r = this._results.varResults[i];
- dat.push({ x: r["param"], y: this._results.varGraph[i] });
-
- }
-
- this.graph_options.title.text = this._results.graphTitle;
- this.graph_options.scales = {
- xAxes: [{
- type: 'linear',
- position: 'bottom'
- }]
- };
-
- this.graph_data = {
- datasets: [
- {
- label: "",
- data: dat,
- borderColor: '#000000',
- backgroundColor: '#000000'
- }
- ]
- };
- }
-
- // public reset(fixed: boolean) {
- // this._results.reset();
- // this.logComponent.reset();
- // }
-
- // public setVariableParamHeader(h: string) {
- // this._variableParamHeader = h;
- // }
-
- // public setVariableParamHeaderFromParameter(p: NgParameter, displaySymbol: boolean) {
- // this._variableParamHeader = this.paramLabel(p, displaySymbol);
- // }
-
- // public setVariableResultHeader(h: string) {
- // this._variableResultHeader = h;
- // }
-
- // public setVariableResultHeaderFromParameter(p: NgParameter) {
- // this._variableResultHeader = this.paramLabel(p, true);
- // }
-
- // public setGraphTitle(t: string) {
- // this.graph_options.title.text = t;
- // }
-
- // private paramLabel(p: NgParameter, displaySymbol: boolean): string {
- // let res = "";
- // if (displaySymbol)
- // res += p.symbol;
- // if (p.label != undefined && p.label != "")
- // if (p.symbol != p.label || !displaySymbol) {
- // if (res.length > 0)
- // res += ":";
- // res += p.label;
- // }
- // if (p.unit != undefined && p.unit != "")
- // res += " (" + p.unit + ")";
- // return res;
- // }
-
private getFixedResultClass(i: number) {
if (this._results.isFixed && i == this._results.fixedResults.length - 1)
return "font-weight-bold";
diff --git a/src/app/components/results-graph/results-graph.component.html b/src/app/components/results-graph/results-graph.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..b34ec9a0d0e1653cf0eb903906230d32fda31b70
--- /dev/null
+++ b/src/app/components/results-graph/results-graph.component.html
@@ -0,0 +1,6 @@
+<div class="row">
+ <div class="col-12">
+ <chart [type]="graph_type" [data]="graph_data" [options]="graph_options">
+ </chart>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/results-graph/results-graph.component.ts b/src/app/components/results-graph/results-graph.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bc85c2a18bf384fc82f24de7c327896bf21f76d9
--- /dev/null
+++ b/src/app/components/results-graph/results-graph.component.ts
@@ -0,0 +1,160 @@
+import { Component, AfterViewInit, EventEmitter, Output } from '@angular/core';
+
+import { FixedVarResults, GraphType } from "../../results/fixed-var-results";
+
+@Component({
+ selector: 'results-graph',
+ templateUrl: './results-graph.component.html'
+})
+export class ResultsGraphComponent { //implements AfterViewInit {
+ private _results: FixedVarResults;
+
+ /*
+ * config du graphe
+ */
+ private graph_type: string;
+ private graph_data = {};
+ private graph_options = {
+ responsive: true,
+ maintainAspectRatio: true,
+ animation: {
+ duration: 0
+ },
+ legend: {
+ display: false
+ },
+ title: {
+ 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();
+ }
+
+ // http://www.chartjs.org/docs/latest/charts/line.html#dataset-properties
+ // showLine
+
+ public updateView() {
+ switch (this._results.graphType) {
+ case GraphType.Histogram:
+ this.graph_type = "bar";
+ this.generateBarGraph();
+ break;
+
+ case GraphType.HistoLine:
+ this.graph_type = "line";
+ this.generateLineGraph();
+ break;
+
+ default:
+ this.graph_type = "scatter";
+ this.generateScatterGraph();
+ break;
+ }
+ }
+
+ // public ngAfterViewInit() {
+ // this.onViewInit.emit();
+ // }
+
+ /**
+ * génère les données d'un graphe de type "line"
+ */
+ private generateLineGraph() {
+ let labs = [];
+ let dat = [];
+ for (let i in this._results.varResults) {
+ let r = this._results.varResults[i];
+ labs.push(r["param"]);
+ dat.push(this._results.varGraph[i]);
+ }
+
+ this.graph_options.title.text = this._results.graphTitle;
+
+ this.graph_data = {
+ labels: labs,
+ datasets: [
+ {
+ label: "",
+ data: dat
+ }
+ ]
+ };
+ }
+
+ /**
+ * génère les données d'un graphe de type "bar"
+ */
+ private generateBarGraph() {
+ let labs = [];
+ let dat = [];
+ for (let i in this._results.varResults) {
+ let r = this._results.varResults[i];
+ labs.push(r["param"]);
+ dat.push(this._results.varGraph[i]);
+ }
+
+ this.graph_options.title.text = this._results.graphTitle;
+ this.graph_options["scales"] = {
+ xAxes: [{
+ gridLines: {
+ offsetGridLines: true
+ }
+ }]
+ };
+
+ this.graph_data = {
+ labels: labs,
+ datasets: [
+ {
+ label: "",
+ data: dat
+ }
+ ]
+ };
+ }
+
+ /**
+ * génère les données d'un graphe de type "scatter"
+ */
+ private generateScatterGraph() {
+ let dat = [];
+ for (let i in this._results.varResults) {
+ let r = this._results.varResults[i];
+ dat.push({ x: r["param"], y: this._results.varGraph[i] });
+ }
+
+ this.graph_options.title.text = this._results.graphTitle;
+ this.graph_options["scales"] = {
+ xAxes: [{
+ type: 'linear',
+ position: 'bottom'
+ }],
+ yAxes: [{
+ type: 'linear',
+ position: 'left'
+ }]
+ };
+
+ this.graph_data = {
+ datasets: [
+ {
+ label: "",
+ data: dat,
+ // borderColor: '#000000',
+ // backgroundColor: '#000000'
+ }
+ ]
+ };
+ }
+}
\ No newline at end of file