fix(event-chart): Fix overlap for multiple elements

dynatrace-oss · Aug 23, 2021 · e15882c · e15882c
1 parent fb24008
commit e15882c
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 67 deletions.
diff --git a/libs/barista-components/event-chart/src/event-chart.html b/libs/barista-components/event-chart/src/event-chart.html
@@ -102,7 +102,7 @@
         <text
           *ngFor="let tick of _renderTicks; let last = last"
           [attr.x]="tick.x"
-          [attr.y]="_svgPlotHeight + 12"
+          [attr.y]="_svgPlotHeight + 24"
           [attr.text-anchor]="last ? 'end' : 'middle'"
           [attr.dx]="last ? 10 : 0"
           class="dt-event-chart-tick-label"

diff --git a/libs/barista-components/event-chart/src/event-chart.ts b/libs/barista-components/event-chart/src/event-chart.ts
@@ -102,7 +102,7 @@ const FIELD_BUBBLE_SIZE = 4;
 const EVENT_BUBBLE_SIZE = 16;
 const EVENT_BUBBLE_SPACING = 4;
 
-const EVENT_BUBBLE_OVERLAP_THRESHOLD = EVENT_BUBBLE_SIZE / 2;
+const EVENT_BUBBLE_OVERLAP_THRESHOLD = EVENT_BUBBLE_SIZE;
 const TICK_HEIGHT = 24;
 const TICK_WIDTH = 140;
 

diff --git a/libs/barista-components/event-chart/src/merge-and-path/merge-events.spec.ts b/libs/barista-components/event-chart/src/merge-and-path/merge-events.spec.ts
@@ -50,7 +50,7 @@ function createRenderEvent<T = any>(
 
 // Assuming a sizing for the event bubbles.
 const EVENT_BUBBLE_SIZE = 16;
-const EVENT_BUBBLE_OVERLAP_THRESHOLD = EVENT_BUBBLE_SIZE / 2;
+const EVENT_BUBBLE_OVERLAP_THRESHOLD = EVENT_BUBBLE_SIZE;
 
 describe('DtEventChart RenderEvent overlap', () => {
   it('should report overlapping events as overlapping', () => {
@@ -80,46 +80,8 @@ describe('DtEventChart RenderEvent overlap', () => {
     const eventB = createRenderEvent(
       'default',
       '1',
-      10,
-      10,
-      0,
-      'event 2',
-      false,
-    );
-    const isOverlapping = dtEventChartIsOverlappingEvent(
-      eventA,
-      eventB,
-      EVENT_BUBBLE_OVERLAP_THRESHOLD,
-    );
-    expect(isOverlapping).toBe(false);
-  });
-
-  it('should report the event as not overlapping if eventA has a duration', () => {
-    const eventA = createRenderEvent('default', '1', 0, 5, 0, 'event 1', false);
-    const eventB = createRenderEvent(
-      'default',
-      '1',
-      10,
-      10,
-      0,
-      'event 2',
-      false,
-    );
-    const isOverlapping = dtEventChartIsOverlappingEvent(
-      eventA,
-      eventB,
-      EVENT_BUBBLE_OVERLAP_THRESHOLD,
-    );
-    expect(isOverlapping).toBe(false);
-  });
-
-  it('should report the event as not overlapping if eventB has a duration', () => {
-    const eventA = createRenderEvent('default', '1', 0, 0, 0, 'event 1', false);
-    const eventB = createRenderEvent(
-      'default',
-      '1',
-      5,
-      10,
+      20,
+      20,
       0,
       'event 2',
       false,
@@ -244,10 +206,10 @@ describe('DtEventChart RenderEvent merging', () => {
         createRenderEvent('default', '2', 3, 3, 2, 'event 3', false),
         createRenderEvent('default', '1', 4, 4, 0, 'event 4', false),
         createRenderEvent('default', '1', 5, 5, 0, 'event 5', false),
-        createRenderEvent('default', '2', 15, 15, 2, 'event 6', false),
-        createRenderEvent('default', '1', 25, 25, 0, 'event 7', false),
-        createRenderEvent('default', '2', 35, 35, 2, 'event 8', false),
-        createRenderEvent('default', '1', 45, 45, 0, 'event 9', false),
+        createRenderEvent('default', '2', 25, 25, 2, 'event 6', false),
+        createRenderEvent('default', '1', 30, 30, 0, 'event 7', false),
+        createRenderEvent('default', '2', 45, 45, 2, 'event 8', false),
+        createRenderEvent('default', '1', 55, 55, 0, 'event 9', false),
       ];
       const mergedEvents = dtEventChartMergeEvents<any>(
         renderEvents,
@@ -305,22 +267,6 @@ describe('DtEventChart RenderEvent merging', () => {
       expect(mergedEvents[1]).toMatchObject(renderEvents[1]);
     });
 
-    it('two points separated by a duration event', () => {
-      const renderEvents = [
-        createRenderEvent('default', '1', 0, 0, 0, 'event 1', false),
-        createRenderEvent('default', '1', 2, 5, 0, 'event 2', false),
-        createRenderEvent('default', '1', 5, 5, 0, 'event 3', false),
-      ];
-      const mergedEvents = dtEventChartMergeEvents<any>(
-        renderEvents,
-        EVENT_BUBBLE_OVERLAP_THRESHOLD,
-      );
-      expect(mergedEvents).toHaveLength(3);
-      expect(mergedEvents[0]).toMatchObject(renderEvents[0]);
-      expect(mergedEvents[1]).toMatchObject(renderEvents[1]);
-      expect(mergedEvents[2]).toMatchObject(renderEvents[2]);
-    });
-
     it('two points separated by another color event', () => {
       const renderEvents = [
         createRenderEvent('default', '1', 0, 0, 0, 'event 1', false),

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
@@ -24,10 +24,6 @@ export function dtEventChartIsOverlappingEvent(
   eventB: RenderEvent<any> | RenderField<any>,
   overlapThreshold: number,
 ): boolean {
-  // Either eventA or eventB have a duration, in which case they should not overlap
-  if (eventA.x1 !== eventA.x2 || eventB.x1 !== eventB.x2) {
-    return false;
-  }
   return Math.abs(eventA.x1 - eventB.x1) < overlapThreshold;
 }