Make multiple bands with different event sets possible

build/src/constants.d.ts

@@ -8,11 +8,12 @@ export declare const CENTER_CHANGE = "CENTER_CHANGE";
 export declare const CENTER_CHANGE_DONE = "CENTER_CHANGE_DONE";
 export declare type Milliseconds = number;
 export declare type Grid = [Milliseconds, Milliseconds][][];
-export declare type ComponentType = 'EVENTS' | 'MINIMAP' | 'RULERS' | 'SPARKLINE';
 export declare type Ratio = number;
 export declare type Pixels = number;
 export declare class RawSegment {
     events?: RawEv3nt[];
     from: Milliseconds;
     to: Milliseconds;
 }
+export declare type Color = (opacity: number) => string;
+export declare const colors: Color[];

build/src/index.d.ts

@@ -1,7 +1,7 @@
 import Config from './models/config';
-import { orderEvents } from './utils/events.worker';
+import { orderEvents, OrderedEvents } from './utils/events.worker';
 import Api from './api';
-export { orderEvents, Config as TimelineConfig };
+export { Config as TimelineConfig, orderEvents, OrderedEvents };
 export default class Timeline extends Api {
     private wrapper;
     constructor(config: Config);
@@ -11,5 +11,6 @@ export default class Timeline extends Api {
     private render();
     private renderBands();
     private renderIndicators();
+    private renderLabels();
     private appendToWrapper;
 }

build/src/models/config.d.ts

@@ -1,17 +1,7 @@
-import { Ratio, Milliseconds } from "../constants";
-import { RawEv3nt } from "./event";
+import { Ratio } from "../constants";
 import DomainConfig from "./domain.config";
-export declare class AggregateEntry {
-    count: number;
-    year: number;
-}
 export default class Config {
-    aggregate?: AggregateEntry[];
     center?: Ratio;
-    domains: DomainConfig[];
-    events: RawEv3nt[];
-    from: Milliseconds;
-    rootElement: HTMLElement;
-    rowCount: number;
-    to: Milliseconds;
+    domains?: DomainConfig[];
+    rootElement?: HTMLElement;
 }

build/src/models/domain.config.d.ts

@@ -1,12 +1,15 @@
-import { Ratio, ComponentType } from "../constants";
+import { Ratio, Pixels } from "../constants";
+import { OrderedEvents } from "../utils/events.worker";
+import { RawEv3nt } from "./event";
 export default class DomainConfig {
-    components: Set<ComponentType>;
-    hasEvents?: boolean;
-    hasIndicatorFor?: number;
+    events?: RawEv3nt[];
+    targets?: number[];
     heightRatio?: Ratio;
-    hasRulers?: boolean;
-    hasSparkline?: boolean;
+    label?: string;
+    orderedEvents?: OrderedEvents;
+    rulers?: boolean;
     topOffsetRatio?: Ratio;
+    type?: 'events' | 'minimap';
     visibleRatio?: Ratio;
-    constructor(props: any);
+    constructor(config: DomainConfig, viewportWidth: Pixels);
 }

build/src/models/domain.d.ts

@@ -1,16 +1,17 @@
 import { Granularity } from '../utils/dates';
 import DomainConfig from './domain.config';
-import { Pixels, Milliseconds, Ratio } from '../constants';
+import { Pixels, Milliseconds, Ratio, Color } from '../constants';
 declare class Domain {
     config: DomainConfig;
+    color: Color;
     granularity: Granularity;
+    height: number;
     pixelsPerMillisecond: number;
     width: number;
-    height: number;
     private _left;
     left: number;
     nextDate: (d: Milliseconds) => Milliseconds;
-    constructor(configProps: any);
+    constructor(config: DomainConfig, color: Color);
     updateLeft(): Pixels;
     positionAtDate(date: Milliseconds): Pixels;
     proportionAtPosition(position: Pixels): Ratio;

build/src/models/props.d.ts

@@ -1,13 +1,15 @@
-import { Ratio, Milliseconds } from "../constants";
+import { Ratio, Milliseconds, Pixels } from "../constants";
 import Config from "./config";
 import Domain from "./domain";
 export declare class Props {
     private readonly defaultCenter;
     config: Config;
     domains: Domain[];
+    from: Milliseconds;
     time: Milliseconds;
-    viewportHeight: number;
-    viewportWidth: number;
+    to: Milliseconds;
+    viewportHeight: Pixels;
+    viewportWidth: Pixels;
     init(config: Config): void;
     private _center;
     center: Ratio;

build/src/utils/dates.d.ts

@@ -17,4 +17,4 @@ export declare const format: (date: Date, granularity: Granularity) => string;
 export declare const getGranularity: (from: number, to: number, visibleRatio: number) => Granularity;
 export declare const getStep: (granularity: Granularity) => number;
 export declare function subsequentDate(granularity: Granularity): ((date: Milliseconds) => Milliseconds);
-export declare function byDate(a: RawEv3nt, b: RawEv3nt): 0 | 1 | -1;
+export declare function byDate(a: RawEv3nt, b: RawEv3nt): 1 | -1 | 0;

build/src/utils/events.worker.d.ts

@@ -1,12 +1,18 @@
 import { Milliseconds, Grid, Pixels, Ratio } from "../constants";
 import { RawEv3nt } from "../models/event";
-export declare type OrderedEvents = [RawEv3nt[], Milliseconds, Milliseconds, Grid, number];
+export declare class OrderedEvents {
+    events: RawEv3nt[];
+    from: Milliseconds;
+    to: Milliseconds;
+    grid: Grid;
+    rowCount: number;
+}
 export declare function orderEvents(events: RawEv3nt[], viewportWidth: Pixels, visibleRatio: Ratio): OrderedEvents;
 export declare function eventsWorker(e: {
     data: {
         events: RawEv3nt[];
         orderEventsURL: string;
     };
 }): void;
-declare const _default: (events: RawEv3nt[], done: (response: [RawEv3nt[], number, number, [number, number][][], number]) => void) => void;
+declare const _default: (events: RawEv3nt[], done: (response: OrderedEvents) => void) => void;
 export default _default;

build/src/views/band/events/event/interval/index.d.ts

@@ -1,7 +1,9 @@
 import DomainEvent from "../../../../../models/event";
-export default class PointInTime {
+import Domain from "../../../../../models/domain";
+export default class Interval {
+    private domain;
     private event;
     private segmentOffset;
-    constructor(event: DomainEvent, segmentOffset: number);
+    constructor(domain: Domain, event: DomainEvent, segmentOffset: number);
     render(): any;
 }

build/src/views/band/events/event/point-in-time/index.d.ts

@@ -1,7 +1,9 @@
 import DomainEvent from "../../../../../models/event";
+import Domain from "../../../../../models/domain";
 export default class PointInTime {
+    private domain;
     private event;
     private segmentOffset;
-    constructor(event: DomainEvent, segmentOffset: number);
+    constructor(domain: Domain, event: DomainEvent, segmentOffset: number);
     render(): any;
 }

build/src/views/band/rulers/index.d.ts

@@ -1,7 +1,7 @@
 import Domain from '../../../models/domain';
 import { Granularity } from '../../../utils/dates';
 import { Milliseconds } from '../../../constants';
-export declare function findClosestRulerDate(d: Milliseconds, granularity: Granularity): Milliseconds;
+export declare function findClosestRulerDate(timestamp: Milliseconds, granularity: Granularity): Milliseconds;
 export default class Rulers {
     private domain;
     private ul;

build/src/views/indicator/index.d.ts

@@ -1,14 +1,13 @@
 import Domain from '../../models/domain';
 export default class Indicator {
     private hostDomain;
-    private targetDomain;
     private leftOfIndicator;
     private rightOfIndicator;
     private width;
     private leftWidth;
     private rightWidth;
     private offset;
-    constructor(hostDomain: Domain, targetDomain: Domain);
+    constructor(hostDomain: Domain);
     render(): any;
     private handleCenterChange;
     private nextLeftWidth();

data/explorers.json

@@ -1,46 +1,46 @@
 [
 	{
-		"title": "Abel Tasman",
+		"label": "Abel Tasman",
 		"date": -11581401600000,
 		"end_date": -9789811200000
 	},
 	{
-		"title": "Ferdinand Magellan",
+		"label": "Ferdinand Magellan",
 		"date": -15460070400000,
 		"end_date": -14159059200000
 	},
 	{
-		"title": "Christopher Columbus",
+		"label": "Christopher Columbus",
 		"date": -16351891200000,
 		"end_date": -14630457600000
 	},
 	{
-		"title": "Vasco da Gama",
+		"label": "Vasco da Gama",
 		"date": -16094073600000,
 		"end_date": -14043542400000
 	},
 	{
-		"title": "Bartolomeu Dias",
+		"label": "Bartolomeu Dias",
 		"date": -16409606400000,
 		"end_date": -14818982400000
 	},
 	{
-		"title": "Amerigo Vespucci",
+		"label": "Amerigo Vespucci",
 		"date": -16277587200000,
 		"end_date": -14448672000000
 	},
 	{
-		"title": "Meriwether Lewis",
+		"label": "Meriwether Lewis",
 		"date": -6165331200000,
 		"end_date": -5056214400000
 	},
 	{
-		"title": "William Clark",
+		"label": "William Clark",
 		"date": -6293030400000,
 		"end_date": -4144521600000
 	},
 	{
-		"title": "Jacob Roggeveen",
+		"label": "Jacob Roggeveen",
 		"date": -9811497600000,
 		"end_date": -7602595200000
 	}