New timeline chart type

projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts

@@ -53,6 +53,7 @@ export class BarComponent implements OnChanges {
   @Input() animations: boolean = true;
   @Input() ariaLabel: string;
   @Input() noBarWhenZero: boolean = true;
+  @Input() timelineChart: boolean = false;
 
   @Output() select: EventEmitter<DataItem> = new EventEmitter();
   @Output() activate: EventEmitter<DataItem> = new EventEmitter();
@@ -193,7 +194,9 @@ export class BarComponent implements OnChanges {
   get edges(): boolean[] {
     let edges = [false, false, false, false];
     if (this.roundEdges) {
-      if (this.orientation === BarOrientation.Vertical) {
+      if (this.timelineChart) {
+        edges = [true, true, true, true];
+      } else if (this.orientation === BarOrientation.Vertical) {
         if (this.data.value > 0) {
           edges = [true, true, false, false];
         } else {

projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts

@@ -214,6 +214,14 @@ export class BaseChartComponent implements OnChanges, AfterViewInit, OnDestroy,
         copy['target'] = item['target'];
       }
 
+      if (item['startTime'] !== undefined) {
+        copy['startTime'] = item['startTime'];
+      }
+
+      if (item['endTime'] !== undefined) {
+        copy['endTime'] = item['endTime'];
+      }
+
       results.push(copy);
     }
 

projects/swimlane/ngx-charts/src/lib/common/timeline/timeline.component.ts

@@ -49,14 +49,14 @@ export class Timeline implements OnChanges {
   @Input() autoScale: boolean;
   @Input() scaleType: ScaleType;
   @Input() height: number = 50;
+  @Input() xScale: any;
 
   @Output() select = new EventEmitter();
   @Output() onDomainChange = new EventEmitter();
 
   element: HTMLElement;
   dims: ViewDimensions;
   xDomain: any[];
-  xScale: any;
   brush: any;
   transform: string;
   initialized: boolean = false;
@@ -81,9 +81,6 @@ export class Timeline implements OnChanges {
     this.height = this.dims.height;
     const offsetY = this.view[1] - this.height;
 
-    this.xDomain = this.getXDomain();
-    this.xScale = this.getXScale();
-
     if (this.brush) {
       this.updateBrush();
     }

projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts

@@ -162,6 +162,7 @@ import { isPlatformServer } from '@angular/common';
         [customColors]="customColors"
         [scaleType]="scaleType"
         [legend]="legend"
+        [xScale]="timelineXScale"
         (onDomainChange)="updateDomain($event)"
       >
         <svg:g *ngFor="let series of results; trackBy: trackBy">

projects/swimlane/ngx-charts/src/lib/models/chart-data.model.ts

@@ -85,6 +85,21 @@ export interface BoxChartSeries {
 
 export interface BoxChartMultiSeries extends Array<BoxChartSeries> {}
 
+export interface TimelineStandardDataItem {
+  name: StringOrNumberOrDate;
+  startTime: Date;
+  endTime: Date;
+}
+
+export interface TimelineStandardData extends Array<TimelineStandardDataItem> {}
+
+export interface TimelineStackedDataItem {
+  name: StringOrNumberOrDate;
+  series: TimelineStandardDataItem[];
+}
+
+export interface TimelineStackedData extends Array<TimelineStackedDataItem> {}
+
 export interface IBoxModel {
   value: number | Date;
   label: StringOrNumberOrDate;

projects/swimlane/ngx-charts/src/lib/ngx-charts.module.ts

@@ -13,6 +13,7 @@ import { TreeMapModule } from './tree-map/tree-map.module';
 import { GaugeModule } from './gauge/gauge.module';
 import { ngxChartsPolyfills } from './polyfills';
 import { SankeyModule } from './sankey/sankey.module';
+import { TimelineChartModule } from './timeline-chart/timeline-chart.module';
 
 @NgModule({
   exports: [
@@ -28,7 +29,8 @@ import { SankeyModule } from './sankey/sankey.module';
     NumberCardModule,
     PieChartModule,
     TreeMapModule,
-    GaugeModule
+    GaugeModule,
+    TimelineChartModule
   ]
 })
 export class NgxChartsModule {