@evercam/ui 0.0.36 → 0.0.38-alpha.0

package/dist/src/components/ETimeline.config.d.ts

@@ -0,0 +1,5 @@
+import { TimelineAxesConfig } from '../types';
+/**
+ * Map of formats and ticks intervals for the Timeline axis(s) by type.
+ */
+export declare const defaultAxesConfig: TimelineAxesConfig;

package/dist/src/components/ETimeline.vue.d.ts

@@ -0,0 +1,117 @@
+import * as d3 from "d3";
+import Vue from "vue";
+import { D3ZoomEvent } from "d3";
+import { TimelineAxesConfig, TimelineAxis, TimelineTicksConfig, Timestamp } from '../types';
+export type TimelineEvent = {
+    timestamp: string | Date;
+    [key: string]: any;
+} | {
+    startDate: string | Date;
+    endDate: string | Date;
+    [key: string]: any;
+};
+export type TimelineEventsGroup = {
+    label: string;
+    color: string;
+    events: Array<TimelineEvent>;
+};
+export type TimelineEventsByType = {
+    [eventsType: string]: TimelineEventsGroup;
+};
+declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>, {
+    tooltip: HTMLElement;
+    cursor: HTMLElement;
+    timeline: HTMLElement;
+    selectedTimestampCursor: HTMLElement;
+    svg: d3.Selection<SVGSVGElement, any, any, any>;
+    axesContainer: d3.Selection<SVGGElement, any, any, any>;
+    xAxes: Record<TimelineAxis, d3.Axis<Date>>;
+    timeScale: d3.ScaleTime<any, any, unknown>;
+    initialTimeScale: d3.ScaleTime<any, any, unknown>;
+    currentTimeScaleDensity: number;
+    zoomBehavior: d3.ZoomBehavior<SVGSVGElement, unknown>;
+    isMouseDown: boolean;
+    axisHeight: number;
+    eventGroupHeight: number;
+    eventGroupPadding: number;
+    isHoveringEvent: boolean;
+    hoveredEvent: TimelineEvent;
+    isHoveringTimeline: boolean;
+    hoveredTimestamp: Date;
+    eventTooltipStyle: {};
+    hoveredEventType: string;
+    utcOffset: number;
+}, {
+    utcToZonedTime(timestamp: Timestamp): Date;
+    getFormattedTimestamp(timestamp: Timestamp): string;
+    handleResize({ contentRect }: ResizeObserverEntry): void;
+    initTimeline(): void;
+    initRefs(): void;
+    initSvg(): void;
+    initUtcOffset(): void;
+    initTimeScale(): void;
+    initXAxes(): void;
+    createAxis(axisName: TimelineAxis): d3.Axis<Date>;
+    getAxisTicksConfig(configs: TimelineTicksConfig[]): {
+        formatFn: (d: Date) => string;
+        interval: any;
+    };
+    initZoomBehavior(): void;
+    initSelectedTimestampCursor(): void;
+    repositionSelectedTimestampCursor(): void;
+    updateCurrentTimeScaleDensity(): void;
+    registerEventsListeners(): void;
+    handleMouseDown(): void;
+    handleDocumentMouseUp(): void;
+    handleMouseLeave(): void;
+    handleMouseMove(event: MouseEvent): void;
+    handleClick(event: MouseEvent): void;
+    handleEventMouseOver(_event: MouseEvent, eventData: TimelineEvent, eventType: string): void;
+    handleEventMouseOut(): void;
+    handleZoom(event: D3ZoomEvent<SVGSVGElement, any>): void;
+    zoomToStartAndEndDates(): void;
+    rescaleAxis(axisName: string, newScale: d3.ScaleTime<any, any, unknown>): void;
+    translateTicksText(axisName: string): void;
+    updateEventsRects(): void;
+    getEventRectX(d: TimelineEvent): any;
+    getEventRectWidth(d: TimelineEvent): number;
+    drawEventsGroups(): void;
+    drawBackground({ color, yPosition, gElement, }: {
+        gElement: d3.Selection<SVGGElement, any, any, any>;
+        yPosition: number;
+        color: string;
+    }): void;
+    drawEvents({ events, gElement, yPosition, color, type, }: {
+        events: TimelineEvent[];
+        gElement: d3.Selection<SVGGElement, any, any, any>;
+        yPosition: number;
+        color: string;
+        type: string;
+    }): void;
+    drawTextLabel({ gElement, yPosition, color, label, }: {
+        gElement: d3.Selection<SVGGElement, any, any, any>;
+        yPosition: number;
+        color: string;
+        label: string;
+    }): void;
+    getTextFillColor(baseColor: string): string;
+    getLabelBackgroundColor(baseColor: string): string;
+    onDarkModeChange(): void;
+}, {
+    labelRectWidth: number;
+    combinedXAxesHeight: number;
+    timelineHeight: number;
+    allEventsSorted: TimelineEvent[];
+    oldestEvent: TimelineEvent;
+    latestEvent: TimelineEvent;
+}, {
+    eventsGroups: {};
+    xAxesConfig: TimelineAxesConfig;
+    dark: boolean;
+    startDate: string;
+    endDate: string;
+    selectedTimestamp: string;
+    showEventTooltip: boolean;
+    disableZoom: boolean;
+}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
+export default _default;

package/dist/src/directives/index.d.ts

@@ -1,6 +1,6 @@
 import ResizeObserverDirective from '../directives/resize-observer';
 export declare const DirectivesMap: {
     name: string;
-    definition: import("vue").ObjectDirective<any, any>;
+    definition: import("vue").DirectiveOptions;
 }[];
 export { ResizeObserverDirective };

package/dist/src/directives/resize-observer.d.ts

@@ -1,6 +1,6 @@
-import { ObjectDirective } from "vue";
+import { DirectiveOptions } from "vue";
 export interface ObservedElement extends HTMLElement {
     __resizeObserver__?: ResizeObserver;
 }
-declare const ResizeObserverDirective: ObjectDirective;
+declare const ResizeObserverDirective: DirectiveOptions;
 export default ResizeObserverDirective;

package/dist/src/index.d.ts

@@ -5,7 +5,7 @@ import ESpinner from './components/ESpinner.vue';
 import ERow from './components/ERow.vue';
 import ECol from './components/ECol.vue';
 import EVideoPlayer from './components/EVideoPlayer.vue';
-import ECountryFlag from './components/ECountryFlag.vue';
+import ETimeline from './components/ETimeline.vue';
 import { VueConstructor } from "vue";
 export declare const components: {
     EAvatar: import("vue/types/vue").ExtendedVue<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>, {
@@ -170,13 +170,108 @@ export declare const components: {
         videoListeners: {};
         videoOptions: {};
     }, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
-    ECountryFlag: any;
+    ETimeline: import("vue/types/vue").ExtendedVue<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>, {
+        tooltip: HTMLElement;
+        cursor: HTMLElement;
+        timeline: HTMLElement;
+        selectedTimestampCursor: HTMLElement;
+        svg: import("d3-selection").Selection<SVGSVGElement, any, any, any>;
+        axesContainer: import("d3-selection").Selection<SVGGElement, any, any, any>;
+        xAxes: Record<import('./types').TimelineAxis, import("d3-axis").Axis<Date>>;
+        timeScale: import("d3-scale").ScaleTime<any, any, unknown>;
+        initialTimeScale: import("d3-scale").ScaleTime<any, any, unknown>;
+        currentTimeScaleDensity: number;
+        zoomBehavior: import("d3-zoom").ZoomBehavior<SVGSVGElement, unknown>;
+        isMouseDown: boolean;
+        axisHeight: number;
+        eventGroupHeight: number;
+        eventGroupPadding: number;
+        isHoveringEvent: boolean;
+        hoveredEvent: import('./components/ETimeline.vue').TimelineEvent;
+        isHoveringTimeline: boolean;
+        hoveredTimestamp: Date;
+        eventTooltipStyle: {};
+        hoveredEventType: string;
+        utcOffset: number;
+    }, {
+        utcToZonedTime(timestamp: import('./types').Timestamp): Date;
+        getFormattedTimestamp(timestamp: import('./types').Timestamp): string;
+        handleResize({ contentRect }: ResizeObserverEntry): void;
+        initTimeline(): void;
+        initRefs(): void;
+        initSvg(): void;
+        initUtcOffset(): void;
+        initTimeScale(): void;
+        initXAxes(): void;
+        createAxis(axisName: import('./types').TimelineAxis): import("d3-axis").Axis<Date>;
+        getAxisTicksConfig(configs: import('./types').TimelineTicksConfig[]): {
+            formatFn: (d: Date) => string;
+            interval: any;
+        };
+        initZoomBehavior(): void;
+        initSelectedTimestampCursor(): void;
+        repositionSelectedTimestampCursor(): void;
+        updateCurrentTimeScaleDensity(): void;
+        registerEventsListeners(): void;
+        handleMouseDown(): void;
+        handleDocumentMouseUp(): void;
+        handleMouseLeave(): void;
+        handleMouseMove(event: MouseEvent): void;
+        handleClick(event: MouseEvent): void;
+        handleEventMouseOver(_event: MouseEvent, eventData: import('./components/ETimeline.vue').TimelineEvent, eventType: string): void;
+        handleEventMouseOut(): void;
+        handleZoom(event: import("d3-zoom").D3ZoomEvent<SVGSVGElement, any>): void;
+        zoomToStartAndEndDates(): void;
+        rescaleAxis(axisName: string, newScale: import("d3-scale").ScaleTime<any, any, unknown>): void;
+        translateTicksText(axisName: string): void;
+        updateEventsRects(): void;
+        getEventRectX(d: import('./components/ETimeline.vue').TimelineEvent): any;
+        getEventRectWidth(d: import('./components/ETimeline.vue').TimelineEvent): number;
+        drawEventsGroups(): void;
+        drawBackground({ color, yPosition, gElement, }: {
+            gElement: import("d3-selection").Selection<SVGGElement, any, any, any>;
+            yPosition: number;
+            color: string;
+        }): void;
+        drawEvents({ events, gElement, yPosition, color, type, }: {
+            events: import('./components/ETimeline.vue').TimelineEvent[];
+            gElement: import("d3-selection").Selection<SVGGElement, any, any, any>;
+            yPosition: number;
+            color: string;
+            type: string;
+        }): void;
+        drawTextLabel({ gElement, yPosition, color, label, }: {
+            gElement: import("d3-selection").Selection<SVGGElement, any, any, any>;
+            yPosition: number;
+            color: string;
+            label: string;
+        }): void;
+        getTextFillColor(baseColor: string): string;
+        getLabelBackgroundColor(baseColor: string): string;
+        onDarkModeChange(): void;
+    }, {
+        labelRectWidth: number;
+        combinedXAxesHeight: number;
+        timelineHeight: number;
+        allEventsSorted: import('./components/ETimeline.vue').TimelineEvent[];
+        oldestEvent: import('./components/ETimeline.vue').TimelineEvent;
+        latestEvent: import('./components/ETimeline.vue').TimelineEvent;
+    }, {
+        eventsGroups: {};
+        xAxesConfig: import('./types').TimelineAxesConfig;
+        dark: boolean;
+        startDate: string;
+        endDate: string;
+        selectedTimestamp: string;
+        showEventTooltip: boolean;
+        disableZoom: boolean;
+    }, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
 };
 declare const _default: {
     install(Vue: VueConstructor): void;
 };
 export default _default;
-export { EAvatar, EBadge, EIcon, ESpinner, ERow, ECol, EVideoPlayer, ECountryFlag, };
+export { EAvatar, EBadge, EIcon, ESpinner, ERow, ECol, EVideoPlayer, ETimeline };
 export * from './constants';
 export * from './types';
 export * from './utils';

package/dist/src/types.d.ts

@@ -34,5 +34,19 @@ export type FlexJustifyContent = "around" | "between" | "center" | "end" | "even
 export type FlexAlignItems = "start" | "center" | "end" | "baseline" | "stretch";
 export type FlexAlignContent = "around" | "baseline" | "between" | "center" | "end" | "evenly" | "normal" | "start" | "stretch";
 export type FlexAlignSelf = "auto" | "baseline" | "center" | "end" | "start" | "stretch";
+export declare enum TimelineAxis {
+    overview = "overview",
+    detailed = "detailed",
+    detailedBackground = "detailedBackground"
+}
+export type TimelineTicksConfig = {
+    precision: number;
+    interval: any;
+    format: string | ((d: Date) => string);
+};
+export type TimelineAxesConfig = {
+    [key in TimelineAxis]: TimelineTicksConfig[];
+};
+export type Timestamp = Date | string | number;
 declare const _default: {};
 export default _default;