Displaying all labels, warning removed (#375)

ludeknovy · Feb 12, 2024 · 8cf98b7 · 8cf98b7
1 parent d4c79c5
commit 8cf98b7
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 21 deletions.
diff --git 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
@@ -40,7 +40,7 @@ <h6 class="card-header bg-transparent">
          ><i class="fas fa-chart-line"></i> {{degradationCurveDisplayed ? "Trends": "Degradation Curve"}}</button>
       </div>
     </span>
-    <span ngbTooltip="Number of labels displayed is limited" class="float-right data-truncated-warning text-warning" *ngIf="labelDataTruncated">
+    <span ngbTooltip="Number of labels displayed is limited" class="float-right data-truncated-warning text-warning" *ngIf="labelTruncatedWarning">
       <i class="fas fa-exclamation-triangle"></i>
     </span>
   </h6>

diff --git 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<string> = 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);