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>