feat(event-chart): APM-295388 Implemented "heatfield" into event-chart

apps/demos/src/app-routing.module.ts

@@ -123,6 +123,7 @@ import {
   DtExampleEventChartOverlappingLoad,
   DtExampleEventChartOverlay,
   DtExampleEventChartSelection,
+  DtExampleEventChartHeatfield,
   DtExampleEventChartSessionReplay,
   DtExampleExpandablePanelDefault,
   DtExampleExpandablePanelDisabled,
@@ -643,6 +644,10 @@ const ROUTES: Routes = [
     path: 'event-chart-overlay-example',
     component: DtExampleEventChartOverlay,
   },
+  {
+    path: 'event-chart-heatfield-example',
+    component: DtExampleEventChartHeatfield,
+  },
   {
     path: 'event-chart-selection-example',
     component: DtExampleEventChartSelection,

apps/demos/src/nav-items.ts

@@ -549,6 +549,10 @@ export const DT_DEMOS_EXAMPLE_NAV_ITEMS = [
         name: 'event-chart-overlay-example',
         route: '/event-chart-overlay-example',
       },
+      {
+        name: 'event-chart-heatfield-example',
+        route: '/event-chart-heatfield-example',
+      },
       {
         name: 'event-chart-selection-example',
         route: '/event-chart-selection-example',

apps/dev/src/event-chart/big-time-test-data.ts

@@ -21,6 +21,7 @@ import {
   EventChartDemoEvent,
   EventChartDemoLane,
   EventChartDemoLegendItem,
+  EventChartDemoHeatfield,
 } from './event-chart-demo-data';
 
 // tslint:disable: max-file-line-count
@@ -218,4 +219,8 @@ export class BigTimeDataSource implements EventChartDemoDataSource {
     }
     return Array.from(lanesPerColor.values());
   }
+
+  getHeatfields(): EventChartDemoHeatfield[] {
+    return [];
+  }
 }

apps/dev/src/event-chart/easy-travel-test-data.ts

@@ -19,6 +19,7 @@ import {
   EventChartDemoEvent,
   EventChartDemoLane,
   EventChartDemoLegendItem,
+  EventChartDemoHeatfield,
 } from './event-chart-demo-data';
 
 export const EASY_TRAVEL_TEST_DATA = [
@@ -179,4 +180,40 @@ export class EasyTravelDataSource implements EventChartDemoDataSource {
     }
     return Array.from(lanesPerColor.values());
   }
+
+  getHeatfields(): EventChartDemoHeatfield[] {
+    return [
+      {
+        end: 1250,
+        data: {
+          page: '/home',
+          pageGroup: '/home',
+        },
+      },
+      {
+        start: 1250,
+        end: 2000,
+        data: {
+          page: '/booking/asdf',
+          pageGroup: '/booking',
+        },
+        color: 'error',
+      },
+      {
+        start: 2000,
+        end: 3000,
+        data: {
+          page: '/cart/asdf2',
+          pageGroup: '/cart',
+        },
+      },
+      {
+        start: 3000,
+        data: {
+          page: '/finish',
+          pageGroup: '/finish',
+        },
+      },
+    ];
+  }
 }

apps/dev/src/event-chart/event-chart-demo-data.ts

@@ -23,6 +23,14 @@ export interface EventChartDemoEvent {
   data?: any;
 }
 
+export interface EventChartDemoHeatfield {
+  start?: number;
+  end?: number;
+  color?: 'default' | 'error' | 'filtered';
+  // tslint:disable-next-line: no-any
+  data?: any;
+}
+
 export interface EventChartDemoLane {
   name: string;
   label: string;
@@ -38,4 +46,5 @@ export interface EventChartDemoDataSource {
   getEvents(): EventChartDemoEvent[];
   getLanes(): EventChartDemoLane[];
   getLegendItems(): EventChartDemoLegendItem[];
+  getHeatfields(): EventChartDemoHeatfield[];
 }

apps/dev/src/event-chart/event-chart-demo.component.html

@@ -1,4 +1,18 @@
+<h2>Event Chart</h2>
+<br />
+<br />
+<br />
+
 <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"
@@ -40,6 +54,24 @@
       </dt-key-value-list>
     </div>
   </ng-template>
+
+  <ng-template dtEventChartHeatfieldOverlay let-tooltip>
+    <div *ngFor="let t of tooltip">
+      <p>Page {{ t.data.page }}</p>
+      <dt-key-value-list>
+        <dt-key-value-list-item>
+          <dt-key-value-list-key>Page</dt-key-value-list-key>
+          <dt-key-value-list-value>{{ t.data.page }}</dt-key-value-list-value>
+        </dt-key-value-list-item>
+        <dt-key-value-list-item>
+          <dt-key-value-list-key>Page group</dt-key-value-list-key>
+          <dt-key-value-list-value>{{
+            t.data.pageGroup
+          }}</dt-key-value-list-value>
+        </dt-key-value-list-item>
+      </dt-key-value-list>
+    </div>
+  </ng-template>
 </dt-event-chart>
 
 <div class="demo-controls">

apps/dev/src/event-chart/event-chart-demo.component.ts

@@ -28,6 +28,7 @@ import {
   EventChartDemoEvent,
   EventChartDemoLane,
   EventChartDemoLegendItem,
+  EventChartDemoHeatfield,
 } from './event-chart-demo-data';
 import { MobileActionDataSource } from './mobile-actions-test-data';
 import { SessionReplayDataSource } from './session-replay-test-data';
@@ -56,6 +57,7 @@ export class EventChartDemo {
   _events: EventChartDemoEvent[] = [];
   _lanes: EventChartDemoLane[] = [];
   _legendItems: EventChartDemoLegendItem[] = [];
+  _heatfields: EventChartDemoHeatfield[] = [];
 
   get _selectedDataSet(): DataSet {
     return this._ds;
@@ -65,6 +67,7 @@ export class EventChartDemo {
     this._events = value.dataSource.getEvents();
     this._lanes = value.dataSource.getLanes();
     this._legendItems = value.dataSource.getLegendItems();
+    this._heatfields = value.dataSource.getHeatfields();
     this._changeDetectorRef.markForCheck();
   }
   private _ds = DATA_SETS[1];

apps/dev/src/event-chart/mobile-actions-test-data.ts

@@ -21,6 +21,7 @@ import {
   EventChartDemoEvent,
   EventChartDemoLane,
   EventChartDemoLegendItem,
+  EventChartDemoHeatfield,
 } from './event-chart-demo-data';
 
 // tslint:disable: max-file-line-count
@@ -455,6 +456,10 @@ const TEST_DATA = [
 ];
 
 export class MobileActionDataSource implements EventChartDemoDataSource {
+  getHeatfields(): EventChartDemoHeatfield[] {
+    return [];
+  }
+
   getEvents(): EventChartDemoEvent[] {
     const events: EventChartDemoEvent[] = [];
     TEST_DATA.forEach((event) => {

apps/dev/src/event-chart/session-replay-test-data.ts

@@ -19,6 +19,7 @@ import {
   EventChartDemoEvent,
   EventChartDemoLane,
   EventChartDemoLegendItem,
+  EventChartDemoHeatfield,
 } from './event-chart-demo-data';
 
 // tslint:disable: max-file-line-count
@@ -3286,4 +3287,8 @@ export class SessionReplayDataSource implements EventChartDemoDataSource {
     }
     return Array.from(lanesPerColor.values());
   }
+
+  getHeatfields(): EventChartDemoHeatfield[] {
+    return [];
+  }
 }

libs/barista-components/event-chart/README.md

@@ -65,6 +65,27 @@ metadata for this event.
 | ---------- | ------------------------------------------- | -------------------------------------------------- |
 | `selected` | `EventEmitter<DtEventChartSelectedEvent<T>` | Event that fires when a an eventBubble is clicked. |
 
+### DtEventChartHeatfield<T>
+
+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
@@ -112,6 +133,22 @@ context to the overlay template, which can be used as following:
 </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:
+
+```html
+<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
@@ -140,6 +177,10 @@ Currently, there are only four different colors which are applicable to a
 
 <ba-live-example name="DtExampleEventChartOverlay" fullwidth></ba-live-example>
 
+### Setting heatfields and heatfield overlay template
+
+<ba-live-example name="DtExampleEventChartHeatfield" fullwidth></ba-live-example>
+
 ### Handling event selection via click
 
 <ba-live-example name="DtExampleEventChartSelection" fullwidth></ba-live-example>

libs/barista-components/event-chart/src/event-chart-directives.ts

@@ -53,13 +53,29 @@ export class DtEventChartSelectedEvent<T> {
   constructor(public sources: DtEventChartEvent<T>[]) {}
 }
 
+/**
+ * Selected field class.
+ * An instance of this class will be emitted, when a field is clicked
+ * by the user.
+ */
+export class DtEventChartSelectedField<T> {
+  constructor(public sources: DtEventChartField<T>[]) {}
+}
+
 @Directive({
   selector:
     'ng-template[dtEventChartOverlay], ng-template[dtSausageChartOverlay]',
   exportAs: 'dtEventChartOverlay',
 })
 export class DtEventChartOverlay {}
 
+@Directive({
+  selector:
+    'ng-template[dtEventChartHeatfieldOverlay], ng-template[dtSausageChartHeatfieldOverlay]',
+  exportAs: 'dtEventChartHeatfieldOverlay',
+})
+export class DtEventChartHeatfieldOverlay {}
+
 @Component({
   selector: 'dt-event-chart-event, dt-sausage-chart-event',
   exportAs: 'dtEventChartEvent',
@@ -235,3 +251,81 @@ export class DtEventChartLegendItem implements OnChanges, OnDestroy {
     this._stateChanges$.complete();
   }
 }
+
+@Component({
+  selector: 'dt-event-chart-field, dt-sausage-chart-field',
+  exportAs: 'dtEventChartField',
+  template: '<ng-template><ng-content></ng-content></ng-template>',
+})
+export class DtEventChartField<T> implements OnChanges, OnDestroy {
+  /** Start on the xAxis of the chart for the heatfield */
+  @Input()
+  get start(): number | null {
+    return this._start;
+  }
+
+  set start(value: number | null) {
+    if (value === this._start) {
+      return;
+    }
+    this._start = value == undefined ? null : coerceNumberProperty(value);
+  }
+
+  private _start: number | null = null;
+  static ngAcceptInputType_start: NumberInput;
+
+  /** End on the xAxis of the chart for the heatfield */
+  @Input()
+  get end(): number | null {
+    return this._end;
+  }
+
+  set end(value: number | null) {
+    if (value === this._end) {
+      return;
+    }
+    this._end = value == undefined ? null : coerceNumberProperty(value);
+  }
+
+  private _end: number | null = null;
+  static ngAcceptInputType_end: NumberInput;
+
+  /** Defines the color for this field. */
+  @Input() color: DtEventChartColors = 'default';
+
+  /**
+   * Data of the field. This can be freely given and the data will be exposed
+   * to the consumer, when the field is clicked or passed through to the
+   * implicit overlay context.
+   */
+  @Input() data: T;
+
+  /** Emits when field is selected. */
+  @Output() readonly selected = new EventEmitter<
+    DtEventChartSelectedField<T>
+  >();
+
+  /**
+   * @internal
+   * Content template, which will be used to render the ng-content of
+   * this component into the legend item
+   */
+  @ViewChild(TemplateRef, { static: true })
+  _contentTemplate: TemplateRef<void>;
+
+  /**
+   * @internal
+   * Subject that fires when either of the inputs changes, the
+   * dtEventChart will subscribe to a collection of these stateChanges
+   * events to react to changes in the data of DtEventChartLegendItem.
+   */
+  _stateChanges$ = new Subject<void>();
+
+  ngOnChanges(): void {
+    this._stateChanges$.next();
+  }
+
+  ngOnDestroy(): void {
+    this._stateChanges$.complete();
+  }
+}