Note: This component is still experimental, use with caution! Help us get this component out of the experimental state by providing feedback.
The event chart is used to show the occurence of different types of events during a user session.
<dt-event-chart>
<dt-event-chart-event
*ngFor="let event of _events"
[value]="event.value"
[duration]="event.duration"
[lane]="event.lane"
[color]="event.color"
(selected)="logSelected($event)"
[data]="event.data"
></dt-event-chart-event>
<dt-event-chart-lane
name="xhr"
label="XHR"
pattern="true"
></dt-event-chart-lane>
<dt-event-chart-lane
*ngIf="_userEventsLaneEnabled"
name="user-event"
label="User event"
></dt-event-chart-lane>
<dt-event-chart-legend-item [lanes]="['xhr', 'user-event']">
This is the default legend
</dt-event-chart-legend-item>
<dt-event-chart-legend-item [lanes]="['xhr']" pattern>
{{ _durationLabel }}
</dt-event-chart-legend-item>
<dt-event-chart-legend-item
*ngIf="_errorLegendEnabled"
[lanes]="['xhr', 'user-event']"
color="error"
>
This is the error legend
</dt-event-chart-legend-item>
<ng-template dtEventChartOverlay let-tooltip>
<div *ngFor="let t of tooltip">{{ t.data }}</div>
</ng-template>
</dt-event-chart>
Imports
You have to import the DtEventChartModule
when you want to use the
<dt-event-chart>
:
@NgModule({
imports: [DtEventChartModule],
})
class MyModule {}
Example setup
<dt-event-chart>
<dt-event-chart-event
*ngFor="let event of _events"
[value]="event.value"
[duration]="event.duration"
[lane]="event.lane"
[color]="event.color"
[data]="event.data"
>
</dt-event-chart-event>
<dt-event-chart-lane name="Load" label="Load"></dt-event-chart-lane>
<dt-event-chart-lane name="Xhr" label="XHR"></dt-event-chart-lane>
<dt-event-chart-lane name="UserTag" label="User tag"></dt-event-chart-lane>
<dt-event-chart-lane
name="Conversion"
label="Conversion"
color="conversion"
></dt-event-chart-lane>
<dt-event-chart-legend-item
[lanes]="['Load', 'Xhr', 'UserTag', 'Conversion']"
>
User action or event
</dt-event-chart-legend-item>
<dt-event-chart-legend-item [lanes]="['Conversion']" color="conversion">
User action or event
</dt-event-chart-legend-item>
<dt-event-chart-legend-item [lanes]="['Load']" hasDuration>
Load Action
</dt-event-chart-legend-item>
<dt-event-chart-legend-item
[lanes]="['Load', 'Xhr', 'UserTag', 'Conversion']"
color="error"
>
Errors and annoyances
</dt-event-chart-legend-item>
<ng-template dtEventChartOverlay let-tooltip>
<div *ngFor="let t of tooltip">
<p>{{ t.data.name }}</p>
<dt-key-value-list>
<dt-key-value-list-item>
<dt-key-value-list-key>Type</dt-key-value-list-key>
<dt-key-value-list-value>{{ t.data.type }}</dt-key-value-list-value>
</dt-key-value-list-item>
</dt-key-value-list>
</div>
</ng-template>
</dt-event-chart>
Initialization
To create a dtEventChart
in a minimal configuration, only
dt-event-chart-events
and dt-event-chart-lane
elements are required to
create a valid output.
<dt-event-chart>
<dt-event-chart-event
*ngFor="let event of _events"
[value]="event.value"
[duration]="event.duration"
[lane]="event.lane"
[color]="event.color"
(selected)="logSelected($event)"
[data]="event.data"
></dt-event-chart-event>
<dt-event-chart-lane
name="xhr"
label="XHR"
pattern="true"
></dt-event-chart-lane>
<dt-event-chart-lane
*ngIf="_userEventsLaneEnabled"
name="user-event"
label="User event"
></dt-event-chart-lane>
<dt-event-chart-legend-item [lanes]="['xhr', 'user-event']">
This is the default legend
</dt-event-chart-legend-item>
<dt-event-chart-legend-item [lanes]="['xhr']" pattern>
{{ _durationLabel }}
</dt-event-chart-legend-item>
<dt-event-chart-legend-item
*ngIf="_errorLegendEnabled"
[lanes]="['xhr', 'user-event']"
color="error"
>
This is the error legend
</dt-event-chart-legend-item>
<ng-template dtEventChartOverlay let-tooltip>
<div *ngFor="let t of tooltip">{{ t.data }}</div>
</ng-template>
</dt-event-chart>
Options & Properties
DtEventChart
Methods
Name | Description | Return value |
---|---|---|
select(index: number) |
Selects the event by index. If the event is merged, the merged event will be displayed as the selected one. | void |
deselect() |
Deselects all events. | void |
closeOverlay() |
Closes the overlay if one is present. | void |
DtEventChartEvent
The dtEventChartEvent
component is used to provide event data to the parent
event chart. It will also accept an arbitrary data
input, which can hold
metadata for this event.
Inputs
Name | Type | Default | Description |
---|---|---|---|
value |
number |
- | Value of the event (most probably a timestamp). |
lane |
string |
- | Lane that this event is associated with. |
duration |
number |
0 | Duration of the event (most probably milliseconds). |
color |
DtEventChartColors |
default |
Color of the event. This color property will override the one provided by the lane. |
data |
T |
- | Any data for this event. This data will be emitted when an event is selected. |
Outputs
Name | Type | Description |
---|---|---|
selected |
EventEmitter<DtEventChartSelectedEvent<T> |
Event that fires when a an eventBubble is clicked. |
DtEventChartHeatfield
The DtEventChartHeatfield
component is used to provide heatfield data to the
parent event chart. It will also accept an arbitrary data
input, which can
hold metadata for this field.
Inputs
Name | Type | Default | Description |
---|---|---|---|
start |
number |
The start numerical/date value on the x-axis of the chart. | |
end |
number |
LThe end numerical/date value on the x-axis of the chart. | |
color |
DtEventChartColors |
default |
Color of the heatfield. |
data |
T |
- | Any data for this heatfield. This data will be emitted when an event is selected. |
Outputs
Name | Type | Description |
---|---|---|
selected |
EventEmitter<DtEventChartSelectedEvent<T> |
Event that fires when a an heatfield is clicked. |
DtEventChartLane
The dtEventChartLane
defines a lane, on which an event will be rendered. The
events are associated with the lanes via their names. This association is
case-sensitive.
Inputs
Name | Type | Default | Description |
---|---|---|---|
name |
string |
- | Name identifier of the lane. |
label |
string |
- | Label for the lane (will be rendered on the left hand side of the eventChart). |
pattern |
boolean |
false | Defines if the events get a pattern within the given lane. |
color |
DtEventChartColors |
default |
Defines the color for the given lane. |
DtEventChartLegendItem
The dtEventChartLegendItem
lets you provide possible legend items for all
varieties of events, that could be rendered within the EventChart. Depending on
which events are being rendered (default, error, conversion, duration events),
the correct legend items will be picked form the given items, and displayed
below the EventChart.
Inputs
Name | Type | Default | Description |
---|---|---|---|
lanes |
string | string[] |
- | Defines for which lanes this legend item can be used for. |
pattern |
boolean |
false | Defines that this legend item is used for pattern events. |
color |
DtEventChartColors |
default |
Defines that this legend item is only usable for the passed color. |
DtEventChartOverlay
The dtEventChartOverlay
directive applies to an ng-template
element lets you
provide a template for the rendered overlay. The overlay will be shown when a
user hovers the event bubble. The EventChart will expose the hovered events
(this is always an array, as the events could be clustered) as $implicit
context to the overlay template, which can be used as following:
<ng-template dtEventChartOverlay let-tooltip>
<div *ngFor="let t of tooltip">
<!-- Insert your template for one event here. -->
</div>
</ng-template>
DtEventChartHeatfieldOverlay
The dtEventChartHeatfieldOverlay
directive applies to an ng-template
element
lets you provide a template for the rendered overlay. The overlay will be shown
when a user hovers the heatfield. The EventChart will expose the hovered events
(this is always an array, as the events could be clustered) as $implicit
context to the overlay template, which can be used as following:
<ng-template dtEventChartHeatfieldOverlay let-tooltip>
<div *ngFor="let t of tooltip">
<!-- Insert your template for one event here. -->
</div>
</ng-template>
DtEventChartColors
Currently, there are only four different colors which are applicable to a
dtEventChartEvent
, dtEventChartLane
or dtEventChartLegendItem
.
- default
- error
- conversion
- filtered
Examples
Default
<dt-event-chart>
<dt-event-chart-event
*ngFor="let event of _events"
[value]="event.value"
[duration]="event.duration"
[lane]="event.lane"
[color]="event.color"
(selected)="logSelected($event)"
[data]="event.data"
></dt-event-chart-event>
<dt-event-chart-lane
name="xhr"
label="XHR"
pattern="true"
></dt-event-chart-lane>
<dt-event-chart-lane
*ngIf="_userEventsLaneEnabled"
name="user-event"
label="User event"
></dt-event-chart-lane>
<dt-event-chart-legend-item [lanes]="['xhr', 'user-event']">
This is the default legend
</dt-event-chart-legend-item>
<dt-event-chart-legend-item [lanes]="['xhr']" pattern>
{{ _durationLabel }}
</dt-event-chart-legend-item>
<dt-event-chart-legend-item
*ngIf="_errorLegendEnabled"
[lanes]="['xhr', 'user-event']"
color="error"
>
This is the error legend
</dt-event-chart-legend-item>
<ng-template dtEventChartOverlay let-tooltip>
<div *ngFor="let t of tooltip">{{ t.data }}</div>
</ng-template>
</dt-event-chart>
Setting custom colors on events
<dt-event-chart>
<dt-event-chart-event value="0" lane="xhr"></dt-event-chart-event>
<dt-event-chart-event
value="15"
lane="xhr"
color="error"
></dt-event-chart-event>
<dt-event-chart-event
value="25"
lane="xhr"
color="filtered"
></dt-event-chart-event>
<dt-event-chart-event
value="10"
lane="user-event"
color="conversion"
></dt-event-chart-event>
<dt-event-chart-event
value="35"
lane="xhr"
duration="15"
></dt-event-chart-event>
<dt-event-chart-event value="75" lane="user-event"></dt-event-chart-event>
<dt-event-chart-lane name="xhr" label="XHR"></dt-event-chart-lane>
<dt-event-chart-lane
name="user-event"
label="User event"
></dt-event-chart-lane>
</dt-event-chart>
Providing legend items for events
<dt-event-chart>
<dt-event-chart-event
value="0"
lane="xhr"
color="filtered"
></dt-event-chart-event>
<dt-event-chart-event
value="15"
lane="xhr"
color="error"
></dt-event-chart-event>
<dt-event-chart-event value="25" lane="xhr"></dt-event-chart-event>
<dt-event-chart-event value="10" lane="user-event"></dt-event-chart-event>
<dt-event-chart-event
value="35"
lane="xhr"
duration="15"
></dt-event-chart-event>
<dt-event-chart-event
value="75"
lane="user-event"
color="filtered"
></dt-event-chart-event>
<dt-event-chart-lane name="xhr" label="XHR" pattern></dt-event-chart-lane>
<dt-event-chart-lane
name="user-event"
label="User event"
></dt-event-chart-lane>
<dt-event-chart-legend-item [lanes]="['xhr', 'user-event']">
Legend label for default events
</dt-event-chart-legend-item>
<dt-event-chart-legend-item [lanes]="['xhr', 'user-event']" color="filtered">
Legend label for filtered events
</dt-event-chart-legend-item>
<dt-event-chart-legend-item [lanes]="['xhr']" pattern>
Legend label for patterned events
</dt-event-chart-legend-item>
<dt-event-chart-legend-item [lanes]="['xhr']" color="filtered" pattern>
Legend label for filtered patterned events
</dt-event-chart-legend-item>
<dt-event-chart-legend-item [lanes]="['xhr']" color="error" pattern>
Legend label for error events
</dt-event-chart-legend-item>
</dt-event-chart>
Defining the overlay template
<dt-event-chart>
<dt-event-chart-event value="0" lane="xhr" data="1"></dt-event-chart-event>
<dt-event-chart-event
value="15"
lane="xhr"
color="error"
data="2"
></dt-event-chart-event>
<dt-event-chart-event value="25" lane="xhr" data="3"></dt-event-chart-event>
<dt-event-chart-event
value="10"
lane="user-event"
data="5"
></dt-event-chart-event>
<dt-event-chart-event
value="35"
lane="xhr"
duration="15"
data="6"
></dt-event-chart-event>
<dt-event-chart-event
value="75"
lane="user-event"
data="7"
></dt-event-chart-event>
<dt-event-chart-lane name="xhr" label="XHR"></dt-event-chart-lane>
<dt-event-chart-lane
name="user-event"
label="User event"
></dt-event-chart-lane>
<ng-template dtEventChartOverlay let-tooltip>
<div *ngFor="let t of tooltip">Data for element: {{ t.data }}</div>
</ng-template>
</dt-event-chart>
Setting heatfields and heatfield overlay template
<dt-event-chart>
<dt-event-chart-field
*ngFor="let field of _heatfields"
[start]="field.start"
[end]="field.end"
[color]="field.color"
[data]="field.data"
></dt-event-chart-field>
<dt-event-chart-event
*ngFor="let event of _events"
[value]="event.value"
[duration]="event.duration"
[lane]="event.lane"
[color]="event.color"
(selected)="logSelected($event)"
[data]="event.data"
></dt-event-chart-event>
<dt-event-chart-lane
name="xhr"
label="XHR"
pattern="true"
></dt-event-chart-lane>
<dt-event-chart-lane
*ngIf="_userEventsLaneEnabled"
name="user-event"
label="User event"
></dt-event-chart-lane>
<dt-event-chart-legend-item [lanes]="['xhr', 'user-event']">
This is the default legend
</dt-event-chart-legend-item>
<dt-event-chart-legend-item [lanes]="['xhr']" pattern>
{{ _durationLabel }}
</dt-event-chart-legend-item>
<dt-event-chart-legend-item
*ngIf="_errorLegendEnabled"
[lanes]="['xhr', 'user-event']"
color="error"
>
This is the error legend
</dt-event-chart-legend-item>
<ng-template dtEventChartOverlay let-tooltip>
<div *ngFor="let t of tooltip">{{ t.data }}</div>
</ng-template>
<ng-template dtEventChartHeatfieldOverlay let-tooltip>
<div *ngFor="let t of tooltip">{{ t.data.name }}</div>
</ng-template>
</dt-event-chart>
Handling event selection via click
<dt-event-chart>
<dt-event-chart-event
(selected)="triggerSelection($event)"
value="0"
lane="xhr"
></dt-event-chart-event>
<dt-event-chart-event
(selected)="triggerSelection($event)"
value="15"
lane="xhr"
></dt-event-chart-event>
<dt-event-chart-event
(selected)="triggerSelection($event)"
value="25"
lane="xhr"
></dt-event-chart-event>
<dt-event-chart-event
(selected)="triggerSelection($event)"
value="10"
lane="user-event"
></dt-event-chart-event>
<dt-event-chart-event
(selected)="triggerSelection($event)"
value="35"
lane="xhr"
duration="15"
></dt-event-chart-event>
<dt-event-chart-event
(selected)="triggerSelection($event)"
value="75"
lane="user-event"
></dt-event-chart-event>
<dt-event-chart-lane name="xhr" label="XHR"></dt-event-chart-lane>
<dt-event-chart-lane
name="user-event"
label="User event"
></dt-event-chart-lane>
</dt-event-chart>
<div>See selection output in the browsers console.</div>
Session replay example (simplified)
<dt-event-chart>
<dt-event-chart-event
*ngFor="let event of _events"
[value]="event.value"
[duration]="event.duration"
[lane]="event.lane"
[color]="event.color"
[data]="event.data"
>
</dt-event-chart-event>
<dt-event-chart-lane name="Load" label="Load"></dt-event-chart-lane>
<dt-event-chart-lane name="Xhr" label="XHR"></dt-event-chart-lane>
<dt-event-chart-lane name="UserTag" label="User tag"></dt-event-chart-lane>
<dt-event-chart-lane
name="Conversion"
label="Conversion"
color="conversion"
></dt-event-chart-lane>
<dt-event-chart-legend-item
[lanes]="['Load', 'Xhr', 'UserTag', 'Conversion']"
>
User action or event
</dt-event-chart-legend-item>
<dt-event-chart-legend-item [lanes]="['Conversion']" color="conversion">
User action or event
</dt-event-chart-legend-item>
<dt-event-chart-legend-item [lanes]="['Load']" hasDuration>
Load Action
</dt-event-chart-legend-item>
<dt-event-chart-legend-item
[lanes]="['Load', 'Xhr', 'UserTag', 'Conversion']"
color="error"
>
Errors and annoyances
</dt-event-chart-legend-item>
<ng-template dtEventChartOverlay let-tooltip>
<div *ngFor="let t of tooltip">
<p>{{ t.data.name }}</p>
<dt-key-value-list>
<dt-key-value-list-item>
<dt-key-value-list-key>Type</dt-key-value-list-key>
<dt-key-value-list-value>{{ t.data.type }}</dt-key-value-list-value>
</dt-key-value-list-item>
</dt-key-value-list>
</div>
</ng-template>
</dt-event-chart>