diff --git a/src/app/graphs/scenario-trends.ts b/src/app/graphs/scenario-trends.ts index 1069e663..ad937c52 100644 --- a/src/app/graphs/scenario-trends.ts +++ b/src/app/graphs/scenario-trends.ts @@ -123,6 +123,12 @@ export const labelTrends: any = (text, title = "") => { return timezoneOffset; } }, + legend: { + align: "center", + itemMarginTop: 1, + useHTML: true, + maxHeight: 105, + }, exporting: { buttons: { contextButton: { @@ -194,6 +200,12 @@ export const responseTimeDegradationCurveOption = () => { }, }, }, + legend: { + align: "center", + itemMarginTop: 1, + useHTML: true, + maxHeight: 105, + }, title: { text: "", }, diff --git a/src/app/scenario/scenario-trends/scenario-trends.component.html b/src/app/scenario/scenario-trends/scenario-trends.component.html index d3de3e4f..f57d526c 100644 --- a/src/app/scenario/scenario-trends/scenario-trends.component.html +++ b/src/app/scenario/scenario-trends/scenario-trends.component.html @@ -40,7 +40,7 @@
> {{degradationCurveDisplayed ? "Trends": "Degradation Curve"}} - +
diff --git a/src/app/scenario/scenario-trends/scenario-trends.component.ts b/src/app/scenario/scenario-trends/scenario-trends.component.ts index 4203bdbc..a1dc4ae4 100644 --- a/src/app/scenario/scenario-trends/scenario-trends.component.ts +++ b/src/app/scenario/scenario-trends/scenario-trends.component.ts @@ -38,7 +38,6 @@ export class ScenarioTrendsComponent implements OnInit { userSettings: ScenarioTrendsUserSettings; chartDataMapping; itemIds: Set = new Set(); - labelDataTruncated = false; degradationCurveDisplayed = false; constructor(private scenarioService: ScenarioService, private router: Router, @@ -54,14 +53,7 @@ export class ScenarioTrendsComponent implements OnInit { ["network", { name: Metrics.Network, yAxis: 4, onLoad: false, transform: this.networkTransform, tooltip: { valueSuffix: " mbps" } }], ]); } - - chartCallback: Highcharts.ChartCallbackFunction = function (chart): void { - setTimeout(() => { - chart.reflow(); - }, 0); - }; - - + ngOnInit() { this.scenarioService.trends$.subscribe((_: { aggregatedTrends: ScenarioTrendsData[], @@ -133,17 +125,10 @@ export class ScenarioTrendsComponent implements OnInit { const seriesThroughput = []; for (const key of Object.keys(data)) { - if (seriesP90.length < 20) { - // 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] })) }); - } else { - this.labelDataTruncated = true; - break; - } - - + // 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] })) }); } this.updateLabelChart(this.labelScenarioTrendChartP90Option, seriesP90); this.updateLabelChart(this.labelScenarioTrendChartThroughputOption, seriesThroughput);