The timeline chart is used to analyze user actions and can indicate a violation of defined thresholds and provide additional timing information by showing markers.
The overall duration is shown as a horizontal bar. The markers indicate timing events during this duration.
<dt-timeline-chart value="0.37" unit="s">
<dt-timeline-chart-timing-marker value="0.02" identifier="R">
Request start 0.02s
</dt-timeline-chart-timing-marker>
<dt-timeline-chart-timing-marker value="0.04" identifier="S">
Speed index 0.04s
</dt-timeline-chart-timing-marker>
<dt-timeline-chart-timing-marker value="0.17" identifier="I">
DOM interactive 0.17s
</dt-timeline-chart-timing-marker>
<dt-timeline-chart-timing-marker value="0.37" identifier="L">
Load event start 0.37s
</dt-timeline-chart-timing-marker>
<dt-timeline-chart-key-timing-marker value="0.03" identifier="V">
Visually complete
</dt-timeline-chart-key-timing-marker>
</dt-timeline-chart>
Imports
You have to import the DtTimelineChartModule
when you want to use the
<dt-timeline-chart>
.
@NgModule({
imports: [DtTimelineChartModule],
})
class MyModule {}
Inputs
Name | Type | Default | Description |
---|---|---|---|
unit |
string |
- | The unit of the provided values. Needs to be a time-unit like "s". |
value |
number |
0 |
The value (length) of the timeline chart. In most cases it is the same value as the last timing marker. |
Markers
The chart takes "timing" (DtTimelineChartTimingMarker
) markers and
"key-timing" (DtTimelineChartKeyTimingMarker
) markers, which are used to show
key performance metrics. Each marker needs an identifier which should be a
single unique character and a value. The value is used to position the marker on
the horizontal timeline bar. For each timing marker the chart will also create
an item in the legend below the chart.
Marker inputs
Name | Type | Default | Description |
---|---|---|---|
identifier |
string |
- | The single character identifier character." |
value |
number |
0 |
The actual value of the marker. |
Overlay
For timing markers you can also add additional information that will be displayed in an overlay when hovering the legend item.
<dt-timeline-chart value="0.37" unit="s">
<dt-timeline-chart-timing-marker value="0.02" identifier="R">
Request start 0.02s
<dt-timeline-chart-overlay-title>
Request start - 0.02s
</dt-timeline-chart-overlay-title>
<dt-timeline-chart-overlay-text>
The time before the user agent starts requesting the current document from
the server, or from relevant application caches or from local resources.
</dt-timeline-chart-overlay-text>
</dt-timeline-chart-timing-marker>
<dt-timeline-chart-timing-marker value="0.04" identifier="S">
Speed index 0.04s
</dt-timeline-chart-timing-marker>
<dt-timeline-chart-timing-marker value="0.17" identifier="I">
DOM interactive 0.17s
</dt-timeline-chart-timing-marker>
<dt-timeline-chart-timing-marker value="0.37" identifier="L">
Load event start 0.37s
</dt-timeline-chart-timing-marker>
<dt-timeline-chart-key-timing-marker value="0.03" identifier="V">
Visually complete
</dt-timeline-chart-key-timing-marker>
</dt-timeline-chart>
Showing thresholds
Note: Threshold markers are not yet implemented in Angular.
It is possible to show a threshold marker in the timeline chart. For each threshold marker a color needs to be defined. If the duration exceeds the threshold the bar's color changes to the threshold-color.
If the overall duration is exceeding 70% of a configured threshold (i.e. it's close to hit the threshold), the timeframe of the chart expands to show the threshold marker in order to see how close the duration is in respect to the threshold.
The timeframe shown in the chart is expanded to accommodate space for threshold markers, so that they can be displayed without wrapping or cutting off their text label.
Responsive behavior
Note: Overlaying markers are not yet implemented in Angular.
If multiple markers are displayed on the same position, they are overlaying each other (last marker to be added is on top). Hovering a timing marker in the legend moves the corresponding marker in the chart temporarily to the top in order to see where the marker is hidden otherwise. Markers overlap as soon as they get closer together than the radius of one marker.
Timeline chart in use
A timeline chart is used as a preview for a detailed timing analysis of a user action. Most of the time it is accompanied with a link (button) to drill-down to a detailed analysis.