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

@@ -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"

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;
 }