fix(event-chart): Fixes various issues with the legend and heatfields.

dynatrace-oss · May 27, 2021 · c617d0a · c617d0a
1 parent a3ed931
commit c617d0a
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 11 deletions.
diff --git a/apps/dev/src/event-chart/easy-travel-test-data.ts b/apps/dev/src/event-chart/easy-travel-test-data.ts
@@ -199,6 +199,22 @@ export class EasyTravelDataSource implements EventChartDemoDataSource {
         },
         color: 'error',
       },
+      {
+        start: 2000,
+        end: 2000,
+        data: {
+          page: '/cart/asdf3',
+          pageGroup: '/cart',
+        },
+      },
+      {
+        start: 2000,
+        end: 2000,
+        data: {
+          page: '/cart/asdf1',
+          pageGroup: '/cart',
+        },
+      },
       {
         start: 2000,
         end: 3000,

diff --git a/libs/barista-components/event-chart/src/event-chart.html b/libs/barista-components/event-chart/src/event-chart.html
@@ -3,7 +3,7 @@
 <div class="dt-event-chart-container">
   <div
     class="dt-event-chart-lane-labels"
-    [style.margin-top]="hasHeatfields ? FIELDS_OFFSET : 0"
+    [style.margin-top.px]="hasHeatfields ? FIELDS_OFFSET : 0"
     #laneLabels
   >
     <div *ngFor="let lane of _lanesReversed" class="dt-event-chart-lane-label">

diff --git a/libs/barista-components/event-chart/src/event-chart.ts b/libs/barista-components/event-chart/src/event-chart.ts
@@ -972,16 +972,20 @@ export class DtEventChart<T> implements AfterContentInit, OnInit, OnDestroy {
         color = field.color;
       }
 
+      const length = x2 - x1;
+
       renderFields.push({
-        x1,
-        x2,
+        x1: length >= 3 ? x1 : x1 - (3 - length),
+        x2: length >= 3 ? x2 : x2 + (3 - length),
         y: FIELD_BUBBLE_SIZE,
         color,
         fields: [field],
       });
     }
 
-    this._renderFields = dtEventChartMergeFields<T>(renderFields, 0);
+    this._renderFields = dtEventChartMergeFields<T>(renderFields).sort(
+      (a, b) => b.x2 - b.x1 - (a.x2 - a.x1),
+    );
   }
 
   /** Generates and updates the path that connects all the render events. */

diff --git a/libs/barista-components/event-chart/src/merge-and-path/create-event-path.ts b/libs/barista-components/event-chart/src/merge-and-path/create-event-path.ts
@@ -17,7 +17,13 @@
 import { isDefined } from '@dynatrace/barista-components/core';
 import { RenderEvent } from '../render-event.interface';
 
-export function dtCreateEventPath<T>(renderEvents: RenderEvent<T>[]): string {
+export function dtCreateEventPath<T>(
+  renderEvents: RenderEvent<T>[],
+): string | null {
+  if (renderEvents.length === 0) {
+    return null;
+  }
+
   const svgPath: string[] = [];
 
   // Move to the start point

diff --git a/libs/barista-components/event-chart/src/merge-and-path/merge-events.ts b/libs/barista-components/event-chart/src/merge-and-path/merge-events.ts
@@ -118,7 +118,6 @@ export function dtEventChartMergeEvents<T>(
 
 export function dtEventChartMergeFields<T>(
   renderEvents: MergedRenderField<T>[],
-  overlapThreshold: number,
 ): RenderField<T>[] {
   // Loop over the rendered fields to merge points if necessary.
   for (let index = 0; index < renderEvents.length; index += 1) {
@@ -142,11 +141,9 @@ export function dtEventChartMergeFields<T>(
       eligableIndex += 1
     ) {
       const eligableEvent: MergedRenderField<T> = renderEvents[eligableIndex];
-      const isOverlapping = dtEventChartIsOverlappingEvent(
-        currentEvent,
-        eligableEvent,
-        overlapThreshold,
-      );
+      const isOverlapping =
+        currentEvent.x1 === eligableEvent.x1 &&
+        currentEvent.x2 === eligableEvent.x2;
       const hasSameColor = currentEvent.color === eligableEvent.color;
 
       // If the lane is the same, but the fields do not overlap, there will be no more overlaps