Skip to content
Snippets Groups Projects
Commit a486f542 authored by François's avatar François
Browse files

ticket #47 : extraction d'un composant d'affichage du graphe des résultats ResultsGraphComponent

parent 30e39106
No related branches found
No related tags found
1 merge request!7Resolve "Paramètres à varier : liste libre de paramètres"
Hide whitespace changes
Inline Side-by-side
src/app/app.module.ts
+ 3
− 2
View file @ a486f542
......@@ -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],
......
src/app/components/fixedvar-results/fixedvar-results.component.html
+ 1
− 6
View file @ a486f542
......@@ -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 :
......
src/app/components/fixedvar-results/fixedvar-results.component.ts
+ 34
− 192
View file @ a486f542
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";
......
src/app/components/results-graph/results-graph.component.html 0 → 100644
+ 6
− 0
View file @ a486f542
<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
src/app/components/results-graph/results-graph.component.ts 0 → 100644
+ 160
− 0
View file @ a486f542
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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment