From 6e996307a1439be849d30073d7df62f63f84ac43 Mon Sep 17 00:00:00 2001
From: Thomas Heller <thomas.heller@dynatrace.com>
Date: Fri, 31 Jan 2020 09:24:49 +0100
Subject: [PATCH] fix(timeline-chart): Fixes an issue where the label of a key
 timing marker was cut off.

If a key timing marker was rendered too far to the right end of the
chart, the label associated with it was cut off by the container.
We introduced a threshold of 85%, at which point the label would be
rendered on the left hand side of the marker.

Fixes #495
---
 components/timeline-chart/src/timeline-chart.html | 1 +
 components/timeline-chart/src/timeline-chart.scss | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/components/timeline-chart/src/timeline-chart.html b/components/timeline-chart/src/timeline-chart.html
index 6fba51d2e3..65101b8963 100644
--- a/components/timeline-chart/src/timeline-chart.html
+++ b/components/timeline-chart/src/timeline-chart.html
@@ -34,6 +34,7 @@
   <div class="dt-timeline-chart-key-timing-marker-container">
     <div
       class="dt-timeline-chart-key-timing-marker"
+      [ngClass]="{ 'dt-timeline-chart-key-timing-marker-label-left': markerObj.position > 85 }"
       *ngFor="let markerObj of _renderKeyTimingMarkers"
       [style.left.%]="markerObj.position"
       [dtOverlay]="markerObj.marker._hasOverlay ? markerObj.marker._overlayTemplate : undefined"
diff --git a/components/timeline-chart/src/timeline-chart.scss b/components/timeline-chart/src/timeline-chart.scss
index 05d31226c7..bb4ab70d3f 100644
--- a/components/timeline-chart/src/timeline-chart.scss
+++ b/components/timeline-chart/src/timeline-chart.scss
@@ -134,6 +134,12 @@ $dt-timeline-chart-marker-stroke-width-size: 2px;
   color: $dt-timeline-chart-key-timing-marker-color;
 }
 
+.dt-timeline-chart-key-timing-marker-label-left
+  .dt-timeline-chart-key-timing-marker-label {
+  left: auto;
+  right: 12px;
+}
+
 .dt-timeline-chart-legend {
   margin-top: 20px;
 }