diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 468ee73c90db11b7388b49f6d0b2adc719a8fe72..7c57cdce8f41945363e18863eb2a1122c4a7b940 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -41,7 +41,7 @@ import {
import { HttpClientModule } from "@angular/common/http";
import { FormsModule, ReactiveFormsModule } from "@angular/forms"; // <-- NgModel lives here
-import { ChartModule } from "angular2-chartjs";
+import { NgChartsModule } from "ng2-charts";
import { RouterModule, Routes } from "@angular/router";
import { HotkeyModule } from "angular2-hotkeys";
import { NgxMatomoTrackerModule } from "@ngx-matomo/tracker";
@@ -138,7 +138,7 @@ const appRoutes: Routes = [
ReactiveFormsModule,
BrowserAnimationsModule,
BrowserModule,
- ChartModule,
+ NgChartsModule,
DragDropModule,
FlexLayoutModule,
HotkeyModule.forRoot(),
diff --git a/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html b/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html
index 9bc8e3bb104543f2a70712755bdc96d76ce18226..76aefb4b68bd64ccfc04c2cc4e8570decf0d2de4 100644
--- a/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html
+++ b/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html
@@ -116,8 +116,8 @@
</div>
<div mat-dialog-content *ngIf="viewChart">
- <chart id="values-chart" type="scatter" [data]="chartData" [options]="chartOptions">
- </chart>
+ <canvas baseChart id="values-chart" type="scatter" [data]="chartData" [options]="chartOptions">
+ </canvas>
</div>
<div mat-dialog-actions [attr.align]="'end'">
diff --git a/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.ts b/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.ts
index 7f28b26ddab5397d2453fb115a0c019d286b4ba5..b1e971ec1f85573ff85b4c68744ec6caf4f20a63 100644
--- a/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.ts
+++ b/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.ts
@@ -107,18 +107,15 @@ export class DialogEditParamValuesComponent implements OnInit {
animation: {
duration: 0
},
- legend: {
- display: false
- },
scales: {
- xAxes: [{
+ x: [{
type: "linear",
position: "bottom",
ticks: {
precision: ResultsComponentDirective.CHARTS_AXIS_PRECISION
}
}],
- yAxes: [{
+ y: [{
type: "linear",
position: "left",
ticks: {
@@ -131,10 +128,15 @@ export class DialogEditParamValuesComponent implements OnInit {
tension: 0
}
},
- tooltips: {
- callbacks: {
- label: function(tooltipItem) {
- return fv(Number(tooltipItem.yLabel));
+ plugins: {
+ legend: {
+ display: false
+ },
+ tooltip: {
+ callbacks: {
+ label: function (tooltipItem) {
+ return fv(Number(tooltipItem.formattedValue));
+ }
}
}
}
diff --git a/src/app/components/jet-trajectory-chart/jet-trajectory-chart.component.html b/src/app/components/jet-trajectory-chart/jet-trajectory-chart.component.html
index cedbcf29399b1b64c0fc89833f8b4cbee6e55830..78d2ed8f52b2b21879d95290c529e639b5ff4586 100644
--- a/src/app/components/jet-trajectory-chart/jet-trajectory-chart.component.html
+++ b/src/app/components/jet-trajectory-chart/jet-trajectory-chart.component.html
@@ -17,7 +17,7 @@
</div>
<div *ngIf="! displayChart" class="fake-chart"></div><!-- trick to avoid blinking effect due to forceRebuild -->
- <chart *ngIf="displayChart" type="scatter" [data]="graph_data" [options]="graph_options">
- </chart>
+ <canvas baseChart *ngIf="displayChart" type="scatter" [data]="graph_data" [options]="graph_options">
+ </canvas>
</div>
</div>
\ No newline at end of file
diff --git a/src/app/components/jet-trajectory-chart/jet-trajectory-chart.component.ts b/src/app/components/jet-trajectory-chart/jet-trajectory-chart.component.ts
index 2d726e9f975d19f3075bc924800f867df01a1134..c5df1edb317b76415a3d6212469f0296f620ef6b 100644
--- a/src/app/components/jet-trajectory-chart/jet-trajectory-chart.component.ts
+++ b/src/app/components/jet-trajectory-chart/jet-trajectory-chart.component.ts
@@ -1,6 +1,6 @@
import { Component, ViewChild, ChangeDetectorRef, Input, OnChanges } from "@angular/core";
-import { ChartComponent } from "angular2-chartjs";
+import { NgChartsModule } from "ng2-charts";
import { I18nService } from "../../services/internationalisation.service";
import { ResultsComponentDirective } from "../fixedvar-results/results.component";
@@ -19,7 +19,7 @@ import { Jet, Result } from "jalhyd";
})
export class JetTrajectoryChartComponent extends ResultsComponentDirective implements OnChanges {
- @ViewChild(ChartComponent)
+ @ViewChild(NgChartsModule)
private chartComponent;
private _results: Result;
@@ -42,14 +42,16 @@ export class JetTrajectoryChartComponent extends ResultsComponentDirective imple
animation: {
duration: 0
},
- legend: {
- display: true,
- position: "bottom",
- reverse: false
- },
- title: {
- display: true,
- text: this.intlService.localizeText("INFO_JET_TITRE_TRAJECTOIRE")
+ plugins: {
+ legend: {
+ display: true,
+ position: "bottom",
+ reverse: false
+ },
+ title: {
+ display: true,
+ text: this.intlService.localizeText("INFO_JET_TITRE_TRAJECTOIRE")
+ }
},
elements: {
line: {
@@ -65,26 +67,26 @@ export class JetTrajectoryChartComponent extends ResultsComponentDirective imple
super();
// do not move following block out of constructor or scale labels won't be rendered
this.graph_options["scales"] = {
- xAxes: [{
+ x: [{
type: "linear",
position: "bottom",
ticks: {
precision: ResultsComponentDirective.CHARTS_AXIS_PRECISION
},
- scaleLabel: {
+ title: {
display: true,
- labelString: this.intlService.localizeText("INFO_LIB_ABSCISSE")
+ text: this.intlService.localizeText("INFO_LIB_ABSCISSE")
}
}],
- yAxes: [{
+ y: [{
type: "linear",
position: "left",
ticks: {
precision: ResultsComponentDirective.CHARTS_AXIS_PRECISION
},
- scaleLabel: {
+ title: {
display: true,
- labelString: this.intlService.localizeText("INFO_LIB_ALTITUDE")
+ text: this.intlService.localizeText("INFO_LIB_ALTITUDE")
}
}]
};
@@ -110,12 +112,12 @@ export class JetTrajectoryChartComponent extends ResultsComponentDirective imple
}
}
};
- // format numbers in tooltips
- this.graph_options.tooltips = {
+ // format numbers in tooltip
+ this.graph_options.tooltip = {
displayColors: false,
callbacks: {
- label: (tooltipItem, data) => {
- return "(" + fv(Number(tooltipItem.xLabel)) + ", " + fv(Number(tooltipItem.yLabel)) + ")";
+ label: (tooltipItem) => {
+ return "(" + fv(Number(tooltipItem.label)) + ", " + fv(Number(tooltipItem.formattedValue)) + ")";
}
}
};
@@ -132,7 +134,7 @@ export class JetTrajectoryChartComponent extends ResultsComponentDirective imple
@Input()
public set results(r: Result) {
- this.forceRebuild(); // used for forcing redefinition of xAxes[0].ticks.min/max in generateScatterChart()
+ this.forceRebuild(); // used for forcing redefinition of x[0].min/max in generateScatterChart()
this._results = r;
}
@@ -193,8 +195,8 @@ export class JetTrajectoryChartComponent extends ResultsComponentDirective imple
}
// adjust chart width
- this.graph_options.scales.xAxes[0].ticks.min = 0;
- this.graph_options.scales.xAxes[0].ticks.max = greatestAbscissa;
+ this.graph_options.scales.x[0].min = 0;
+ this.graph_options.scales.x[0].max = greatestAbscissa;
// build Y data series
for (const ys of ySeries) {
diff --git a/src/app/components/pab-profile-chart/pab-profile-chart.component.html b/src/app/components/pab-profile-chart/pab-profile-chart.component.html
index f7c4d9079569cf669e92ffecf1e18d01684b654b..fbc980f171f8f9aad2b3fb37471d94b3f3570c20 100644
--- a/src/app/components/pab-profile-chart/pab-profile-chart.component.html
+++ b/src/app/components/pab-profile-chart/pab-profile-chart.component.html
@@ -16,7 +16,7 @@
</button>
</div>
- <chart type="scatter" [data]="graph_data" [options]="graph_options">
- </chart>
+ <canvas baseChart type="scatter" [data]="graph_data" [options]="graph_options">
+ </canvas>
</div>
</div>
\ No newline at end of file
diff --git a/src/app/components/pab-profile-chart/pab-profile-chart.component.ts b/src/app/components/pab-profile-chart/pab-profile-chart.component.ts
index 449c050ffc94f34685a9aa280756ced6b9b051fc..ca8aeebcda4bf5bf73eae5cb07b189b794e5147d 100644
--- a/src/app/components/pab-profile-chart/pab-profile-chart.component.ts
+++ b/src/app/components/pab-profile-chart/pab-profile-chart.component.ts
@@ -1,6 +1,6 @@
import { Component, ViewChild, ChangeDetectorRef, Input, OnChanges } from "@angular/core";
-import { ChartComponent } from "angular2-chartjs";
+import { NgChartsModule } from "ng2-charts";
import { I18nService } from "../../services/internationalisation.service";
import { ResultsComponentDirective } from "../fixedvar-results/results.component";
@@ -23,7 +23,7 @@ import { CalculatorResults } from 'app/results/calculator-results';
})
export class PabProfileChartComponent extends ResultsComponentDirective implements OnChanges {
- @ViewChild(ChartComponent)
+ @ViewChild(NgChartsModule)
private chartComponent;
private _results: PabResults;
@@ -40,21 +40,23 @@ export class PabProfileChartComponent extends ResultsComponentDirective implemen
* config du graphique
*/
public graph_data: { datasets: any[] };
- public graph_options = {
+ public graph_options: any = {
responsive: true,
maintainAspectRatio: true,
aspectRatio: 1.5,
animation: {
duration: 0
},
- legend: {
- display: true,
- position: "bottom",
- reverse: false
- },
- title: {
- display: true,
- text: this.intlService.localizeText("INFO_PAB_TITRE_PROFIL")
+ plugins: {
+ legend: {
+ display: true,
+ position: "bottom",
+ reverse: false
+ },
+ title: {
+ display: true,
+ text: this.intlService.localizeText("INFO_PAB_TITRE_PROFIL")
+ }
},
elements: {
line: {
@@ -70,26 +72,26 @@ export class PabProfileChartComponent extends ResultsComponentDirective implemen
super();
// do not move following block out of constructor or scale labels won't be rendered
this.graph_options["scales"] = {
- xAxes: [{
+ x: [{
type: "linear",
position: "bottom",
ticks: {
precision: ResultsComponentDirective.CHARTS_AXIS_PRECISION
},
- scaleLabel: {
+ title: {
display: true,
- labelString: this.intlService.localizeText("INFO_LIB_DISTANCE_AMONT")
+ text: this.intlService.localizeText("INFO_LIB_DISTANCE_AMONT")
}
}],
- yAxes: [{
+ y: [{
type: "linear",
position: "left",
ticks: {
precision: ResultsComponentDirective.CHARTS_AXIS_PRECISION
},
- scaleLabel: {
+ title: {
display: true,
- labelString: this.intlService.localizeText("INFO_LIB_COTE")
+ text: this.intlService.localizeText("INFO_LIB_COTE")
}
}]
};
@@ -115,12 +117,12 @@ export class PabProfileChartComponent extends ResultsComponentDirective implemen
}
}
};
- // format numbers in tooltips
- this.graph_options["tooltips"] = {
+ // format numbers in tooltip
+ this.graph_options["tooltip"] = {
displayColors: false,
callbacks: {
- label: (tooltipItem, data) => {
- return "(" + fv(Number(tooltipItem.xLabel)) + ", " + fv(Number(tooltipItem.yLabel)) + ")";
+ label: (tooltipItem) => {
+ return "(" + fv(Number(tooltipItem.label)) + ", " + fv(Number(tooltipItem.formattedValue)) + ")";
}
}
};
diff --git a/src/app/components/remous-results/remous-results.component.html b/src/app/components/remous-results/remous-results.component.html
index 7f9efd5fd03a4a8827d85473bc660943f101a7c4..bdeaafee6dd4dad09e45a4578a5e64bb10d11267 100644
--- a/src/app/components/remous-results/remous-results.component.html
+++ b/src/app/components/remous-results/remous-results.component.html
@@ -14,9 +14,9 @@
</button>
</div>
- <chart id="main-chart" ngClass.lt-sm="height300" ngClass.sm="height400" ngClass.md="height400"
+ <canvas baseChart id="main-chart" ngClass.lt-sm="height300" ngClass.sm="height400" ngClass.md="height400"
ngClass.gt-md="height600" [type]="graph1_type" [data]="graph1_data" [options]="graph1_options">
- </chart>
+ </canvas>
</div>
</div>
@@ -36,7 +36,7 @@
</button>
</div>
- <chart [type]="graph2_type" [data]="graph2_data" [options]="graph2_options"></chart>
+ <canvas baseChart [type]="graph2_type" [data]="graph2_data" [options]="graph2_options"></canvas>
</div>
</div>
@@ -47,4 +47,4 @@
<div *ngIf="hasData">
<!-- rÊsultats numÊriques -->
<var-results [results]=varResults></var-results>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/remous-results/remous-results.component.ts b/src/app/components/remous-results/remous-results.component.ts
index b753778b459b0fd9db99057765b099cecfc82bc5..ad48d29575f7a65120ee3c69a1628b4d92f29fad 100644
--- a/src/app/components/remous-results/remous-results.component.ts
+++ b/src/app/components/remous-results/remous-results.component.ts
@@ -397,12 +397,8 @@ export class RemousResultsComponent extends ResultsComponentDirective implements
animation: {
duration: 0
},
- legend: {
- display: true,
- position: "bottom"
- },
scales: {
- xAxes: [{
+ x: [{
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)",
@@ -410,27 +406,33 @@ export class RemousResultsComponent extends ResultsComponentDirective implements
},
ticks: {
precision: ResultsComponentDirective.CHARTS_AXIS_PRECISION,
- callback: function(value, index, values) {
+ callback: function (value, index, values) {
return fv(Number(value));
}
},
- scaleLabel: {
+ title: {
display: true,
- labelString: this.uitextAbscisse
+ text: this.uitextAbscisse
}
}],
- yAxes: [{
+ y: [{
// stacked: true,
gridLines: {
- display: true,
- color: "rgba(255,99,132,0.2)"
+ display: true,
+ color: "rgba(255,99,132,0.2)"
}
}]
},
- tooltips: {
- callbacks: {
- label: function(tooltipItem, data) {
- return fv(Number(tooltipItem.yLabel));
+ plugins: {
+ legend: {
+ display: true,
+ position: "bottom"
+ },
+ tooltip: {
+ callbacks: {
+ label: function (tooltipItem) {
+ return fv(Number(tooltipItem.formattedValue));
+ }
}
}
}
@@ -445,28 +447,30 @@ export class RemousResultsComponent extends ResultsComponentDirective implements
animation: {
duration: 0
},
- legend: {
- display: true,
- position: "bottom"
- },
scales: {
- xAxes: [{
- scaleLabel: {
+ x: [{
+ title: {
display: true,
- labelString: this.uitextAbscisse
+ text: this.uitextAbscisse
},
ticks: {
precision: ResultsComponentDirective.CHARTS_AXIS_PRECISION,
- callback: function(value, index, values) {
+ callback: function (value, index, values) {
return fv(Number(value));
}
},
}]
},
- tooltips: {
- callbacks: {
- label: function(tooltipItem, data) {
- return fv(Number(tooltipItem.yLabel));
+ plugins: {
+ legend: {
+ display: true,
+ position: "bottom"
+ },
+ tooltip: {
+ callbacks: {
+ label: function (tooltipItem) {
+ return fv(Number(tooltipItem.formattedValue));
+ }
}
}
}
diff --git a/src/app/components/results-chart/results-chart.component.html b/src/app/components/results-chart/results-chart.component.html
index be55ade023ec1c2b38630011af12ef652a515152..3e228f4561ec1e17ef499c04b9baabbd3c267674 100644
--- a/src/app/components/results-chart/results-chart.component.html
+++ b/src/app/components/results-chart/results-chart.component.html
@@ -17,8 +17,8 @@
</div>
<div *ngIf="! displayChart" class="fake-chart"></div><!-- trick to avoid blinking effect due to forceRebuild -->
- <chart *ngIf="displayChart" [type]="graph_type" [data]="graph_data" [options]="graph_options">
- </chart>
+ <canvas baseChart *ngIf="displayChart" [type]="graph_type" [data]="graph_data" [options]="graph_options">
+ </canvas>
</div>
</div>
diff --git a/src/app/components/results-chart/results-chart.component.ts b/src/app/components/results-chart/results-chart.component.ts
index a547f1097474621a175fdb755fb4b9dd7c2417c1..743986e40e3b4a80b022c46144cb21d06b7eeca9 100644
--- a/src/app/components/results-chart/results-chart.component.ts
+++ b/src/app/components/results-chart/results-chart.component.ts
@@ -1,6 +1,6 @@
import { Component, ViewChild, AfterContentInit, ChangeDetectorRef, Input, OnChanges } from "@angular/core";
-import { ChartComponent } from "angular2-chartjs";
+import { NgChartsModule } from "ng2-charts";
import { Observer, ParamFamily, Result } from "jalhyd";
@@ -23,7 +23,7 @@ import { AppComponent } from "../../app.component";
})
export class ResultsChartComponent extends ResultsComponentDirective implements AfterContentInit, Observer, OnChanges {
- @ViewChild(ChartComponent)
+ @ViewChild(NgChartsModule)
private chartComponent;
private _results: PlottableData;
@@ -47,12 +47,14 @@ export class ResultsChartComponent extends ResultsComponentDirective implements
animation: {
duration: 0
},
- legend: {
- display: false
- },
- title: {
- display: true,
- text: ""
+ plugins: {
+ legend: {
+ display: false
+ },
+ title: {
+ display: true,
+ text: ""
+ }
},
elements: {
line: {
@@ -250,42 +252,42 @@ export class ResultsChartComponent extends ResultsComponentDirective implements
}
this.graph_options["scales"] = {
- xAxes: [{
+ x: [{
gridLines: {
offsetGridLines: true
},
ticks: {
precision: ResultsComponentDirective.CHARTS_AXIS_PRECISION,
- callback: function(value, index, values) {
+ callback: function (value, index, values) {
return fv(Number(value));
}
},
- scaleLabel: {
+ title: {
display: true,
- labelString: this.axisLabelWithoutSymbol(this.chartX)
+ text: this.axisLabelWithoutSymbol(this.chartX)
}
}],
- yAxes: [{
- scaleLabel: {
+ y: [{
+ title: {
display: true,
- labelString: this.axisLabelWithoutSymbol(this.chartY)
+ text: this.axisLabelWithoutSymbol(this.chartY)
}
}]
};
const that = this;
- this.graph_options["tooltips"] = {
+ this.graph_options["tooltip"] = {
displayColors: false,
callbacks: {
- title: (tooltipItems, data) => {
- return this.chartY + " = " + fv(Number(tooltipItems[0].yLabel));
+ title: (tooltipItems) => {
+ return this.chartY + " = " + fv(Number(tooltipItems[0].formattedValue));
},
- label: (tooltipItem, data) => {
+ label: (tooltipItem) => {
const lines: string[] = [];
const nbLines = that._results.getVariatingParametersSymbols().length;
for (const v of that._results.getVariatingParametersSymbols()) {
const series = that._results.getValuesSeries(v);
- const line = v + " = " + fv(series[tooltipItem.index]);
+ const line = v + " = " + fv(series[tooltipItem.dataIndex]);
if (v === this.chartX) {
if (nbLines > 1) {
lines.unshift("");
@@ -347,54 +349,54 @@ export class ResultsChartComponent extends ResultsComponentDirective implements
}
this.graph_options["scales"] = {
- xAxes: [{
+ x: [{
type: "linear",
position: "bottom",
ticks: {
precision: ResultsComponentDirective.CHARTS_AXIS_PRECISION
},
- scaleLabel: {
+ title: {
display: true,
- labelString: this.axisLabelWithoutSymbol(this.chartX)
+ text: this.axisLabelWithoutSymbol(this.chartX)
}
}],
- yAxes: [{
+ y: [{
type: "linear",
position: "left",
ticks: {
precision: ResultsComponentDirective.CHARTS_AXIS_PRECISION
},
- scaleLabel: {
+ title: {
display: true,
- labelString: this.axisLabelWithoutSymbol(this.chartY)
+ text: this.axisLabelWithoutSymbol(this.chartY)
}
}]
};
if (isMultiple) {
// add legend for multiple series
- this.graph_options.legend = {
+ this.graph_options.plugins.legend = {
display: true,
position: "bottom",
reverse: false
};
- // remove tooltips
- delete this.graph_options.tooltips;
+ // remove tooltip
+ delete this.graph_options.tooltip;
} else {
- // enhanced tooltips for single series
+ // enhanced tooltip for single series
const that = this;
- this.graph_options.tooltips = {
+ this.graph_options.tooltip = {
displayColors: false,
callbacks: {
- title: (tooltipItems, data) => {
- return this.chartY + " = " + fv(Number(tooltipItems[0].yLabel));
+ title: (tooltipItems) => {
+ return this.chartY + " = " + fv(Number(tooltipItems[0].formattedValue));
},
- label: (tooltipItem, data) => {
+ label: (tooltipItem) => {
let lines: string[] = [];
// 1. X if different from Y
if (this.chartX !== this.chartY) {
const xseries = that._results.getValuesSeries(this.chartX);
- const xline = this.chartX + " = " + fv(xseries[tooltipItem.index]);
+ const xline = this.chartX + " = " + fv(xseries[tooltipItem.dataIndex]);
lines.push(xline);
}
// 2. variated parameters other than X or Y
@@ -402,7 +404,7 @@ export class ResultsChartComponent extends ResultsComponentDirective implements
for (const v of that._results.getVariatingParametersSymbols()) {
if (v !== this.chartX && v !== this.chartY) {
const series = that._results.getValuesSeries(v);
- const line = v + " = " + fv(series[tooltipItem.index]);
+ const line = v + " = " + fv(series[tooltipItem.dataIndex]);
varLines.push(line);
}
}
@@ -416,7 +418,7 @@ export class ResultsChartComponent extends ResultsComponentDirective implements
}
};
// remove legend
- this.graph_options.legend = {
+ this.graph_options.plugins.legend = {
display: false
};
}