diff --git a/src/app/graphs/scenarios.ts b/src/app/graphs/scenarios.ts index 8ecdaf7d..f2728d96 100644 --- a/src/app/graphs/scenarios.ts +++ b/src/app/graphs/scenarios.ts @@ -11,7 +11,7 @@ export const scenarioHistory = (inputData) => { }; } const dt = inputData.map(_ => { - return { percentil: _.percentil, date: _.startDate }; + return { percentile90: _.percentile90, date: _.startDate }; }); return { type: "bar", @@ -20,7 +20,7 @@ export const scenarioHistory = (inputData) => { labels: dt.map(_ => _.date), datasets: [ { - data: dt.map(_ => _.percentil), + data: dt.map(_ => _.percentile90), backgroundColor: "rgb(17,122,139, 0.8)", fill: true, borderWidth: 1, diff --git a/src/app/project/graph/scenarios-graph.component.ts b/src/app/project/graph/scenarios-graph.component.ts index 227a10a8..75d32290 100644 --- a/src/app/project/graph/scenarios-graph.component.ts +++ b/src/app/project/graph/scenarios-graph.component.ts @@ -11,6 +11,7 @@ import { } from "@angular/core"; import { Chart } from "chart.js"; import { scenarioHistory } from "src/app/graphs/scenarios"; +import { normalizeOverviewData } from "../../utils/normalizeOverviewData"; @Component({ selector: "app-scenarios-graph", @@ -46,7 +47,7 @@ export class ScenariosGraphComponent implements AfterViewInit, OnDestroy { data.datasets[0].data[i] = 0; } }, - // after the update .. + // after the update afterUpdate: function(chart) { if (length === -1) { return; } }, @@ -68,7 +69,7 @@ export class ScenariosGraphComponent implements AfterViewInit, OnDestroy { } } }); - this.chart = new Chart(this.chartCanvas.nativeElement, scenarioHistory(this.graphData)); + this.chart = new Chart(this.chartCanvas.nativeElement, scenarioHistory(this.graphData.map(normalizeOverviewData))); } ngOnDestroy(): void { diff --git a/src/app/scenario/scenario-trends/scenario-trends.component.ts b/src/app/scenario/scenario-trends/scenario-trends.component.ts index 21bfdf5b..c844e7c9 100644 --- a/src/app/scenario/scenario-trends/scenario-trends.component.ts +++ b/src/app/scenario/scenario-trends/scenario-trends.component.ts @@ -7,11 +7,12 @@ import { bytesToMbps } from "src/app/item-detail/calculations"; import { LabelTrendsData, ScenarioTrendsData, ScenarioTrendsUserSettings } from "src/app/items.service.model"; import { ScenarioService } from "src/app/scenario.service"; import { Metrics } from "../../item-detail/metrics"; +import { normalizeOverviewData } from "../../utils/normalizeOverviewData"; @Component({ - selector: "app-scenario-trends", - templateUrl: "./scenario-trends.component.html", - styleUrls: ["./scenario-trends.component.scss"] + selector: 'app-scenario-trends', + templateUrl: './scenario-trends.component.html', + styleUrls: ['./scenario-trends.component.scss'] }) export class ScenarioTrendsComponent implements OnInit { @Input() params; @@ -78,11 +79,8 @@ export class ScenarioTrendsComponent implements OnInit { const dates = data.map(_ => moment(_.overview.startDate).format("DD. MM. YYYY HH:mm:ss")); const series = []; const seriesData = data.map((scenarioTrends) => { - // legacy property `percentil` mapped to a new property - if (scenarioTrends.overview["percentil"]) { - scenarioTrends.overview["percentile90"] = scenarioTrends.overview["percentil"] - } - return scenarioTrends + scenarioTrends.overview = normalizeOverviewData(scenarioTrends.overview); + return scenarioTrends; }).reduce((acc, current) => { for (const key of Object.keys(current.overview)) { @@ -97,7 +95,7 @@ export class ScenarioTrendsComponent implements OnInit { return acc; }, {}); - this.setItemIds(data) + this.setItemIds(data); for (const key of Object.keys(seriesData)) { const chartSeriesSettings = this.chartDataMapping.get(key); @@ -132,9 +130,18 @@ export class ScenarioTrendsComponent implements OnInit { for (const key of Object.keys(data)) { // Adding item id to correctly identify it when clicking a point. - seriesP90.push({ name: key, data: data[key].percentile90.map(dataValue => ({ y: dataValue[1], name: dataValue[0], itemId: dataValue[2] })) }); - seriesErrorRate.push({ name: key, data: data[key].errorRate.map(dataValue => ({ y: dataValue[1], name: dataValue[0], itemId: dataValue[2] })) }); - seriesThroughput.push({ name: key, data: data[key].throughput.map(dataValue => ({ y: dataValue[1], name: dataValue[0], itemId: dataValue[2] })) }); + seriesP90.push({ + name: key, + data: data[key].percentile90.map(dataValue => ({ y: dataValue[1], name: dataValue[0], itemId: dataValue[2] })) + }); + seriesErrorRate.push({ + name: key, + data: data[key].errorRate.map(dataValue => ({ y: dataValue[1], name: dataValue[0], itemId: dataValue[2] })) + }); + seriesThroughput.push({ + name: key, + data: data[key].throughput.map(dataValue => ({ y: dataValue[1], name: dataValue[0], itemId: dataValue[2] })) + }); } this.updateLabelChart(this.labelScenarioTrendChartP90Option, seriesP90); this.updateLabelChart(this.labelScenarioTrendChartThroughputOption, seriesThroughput); @@ -156,7 +163,7 @@ export class ScenarioTrendsComponent implements OnInit { // Label series have item id amended to open correct detail, it's needed for a case when a labels do not match, eg: // label2 start at point 0, but label2 starts at point 1, it leads to off by N issues. // It's not needed for aggregated trend chart, as that is column chart and only one point can be clicked. - const boundItemId = event.point.series.data[event.point.index]?.options?.itemId + const boundItemId = event.point.series.data[event.point.index]?.options?.itemId; const itemId = boundItemId || Array.from(this.itemIds)[event.point.index]; const { projectName, scenarioName } = this.params; @@ -180,9 +187,9 @@ export class ScenarioTrendsComponent implements OnInit { private setItemIds = (data: ScenarioTrendsData[]) => { if (this.itemIds.size > 0) { - this.itemIds.clear() + this.itemIds.clear(); } - data.forEach(line => this.itemIds.add(line.id)) - } + data.forEach(line => this.itemIds.add(line.id)); + }; } diff --git a/src/app/utils/normalizeOverviewData.ts b/src/app/utils/normalizeOverviewData.ts new file mode 100644 index 00000000..4815bc57 --- /dev/null +++ b/src/app/utils/normalizeOverviewData.ts @@ -0,0 +1,7 @@ +export const normalizeOverviewData = (overviewData: any) => { + // legacy property `percentil` mapped to a new property + if (overviewData["percentil"]) { + overviewData["percentile90"] = overviewData["percentil"] + } + return overviewData +}