@evercam/ui 0.0.37 → 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,6 +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 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>>, {
@@ -169,12 +170,108 @@ export declare const components: {
         videoListeners: {};
         videoOptions: {};
     }, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
+    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 };
+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;

package/dist/style.css

@@ -1 +1 @@
-.e-spinner[data-v-f6962f4a]{vertical-align:center}.e-spinner__primary[data-v-f6962f4a],.e-spinner__secondary[data-v-f6962f4a]{stroke-width:0;animation:fade-f6962f4a;animation-iteration-count:infinite}@keyframes fade-f6962f4a{0%{fill-opacity:0}50%{fill-opacity:1}to{fill-opacity:0}}.e-row.e-row--no-gutters{margin:0}.e-row.e-row--no-gutters>.e-col{padding:0}.e-col{padding:.75rem}.spinner-container[data-v-40b3a4ac]{position:absolute;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);inset:0;display:flex;justify-content:center;align-items:center;vertical-align:middle}.video-container[data-v-40b3a4ac]{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;margin:0 auto}.video-container.full-screen[data-v-40b3a4ac]{max-width:initial;width:100%;max-height:100vh}video[data-v-40b3a4ac]{width:100%;height:inherit}.video-controls-container[data-v-40b3a4ac]{position:absolute;bottom:0;left:0;right:0;color:#fff;z-index:100;opacity:0;transition:opacity .15s ease-in-out}.hide[data-v-40b3a4ac]{display:none}.video-controls-container[data-v-40b3a4ac]:before{content:"";position:absolute;bottom:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);width:100%;aspect-ratio:6 / 1;z-index:-1;pointer-events:none}.video-container:hover .video-controls-container[data-v-40b3a4ac],.video-container:focus-within .video-controls-container[data-v-40b3a4ac],.video-container.paused .video-controls-container[data-v-40b3a4ac]{opacity:1}.video-controls-container .controls[data-v-40b3a4ac]{display:flex;gap:.5rem;padding:.75rem 1rem;align-items:center;width:100%}.video-controls-container .controls button[data-v-40b3a4ac]{background:none;border:none;color:inherit;padding:0;height:32px;width:32px;font-size:1.35rem;cursor:pointer;opacity:.85;transition:opacity .15s ease-in-out}.video-controls-container .controls button[data-v-40b3a4ac]:hover{opacity:1}.duration-container[data-v-40b3a4ac]{display:flex;align-items:center;gap:.25rem;flex-grow:1}.video-container.captions .captions-btn[data-v-40b3a4ac]{border-bottom:3px solid red}.video-controls-container .controls button.wide-btn[data-v-40b3a4ac]{width:50px}.timeline-container[data-v-40b3a4ac]{width:100%;height:7px;margin-inline:.5rem;cursor:pointer;display:flex;align-items:center}.timeline[data-v-40b3a4ac]{background-color:#64646480;height:3px;width:100%;position:relative}.timeline[data-v-40b3a4ac]:before{content:"";position:absolute;left:0;top:0;bottom:0;right:calc(100% - var(--preview-position) * 100%);background-color:#969696;display:none}.timeline[data-v-40b3a4ac]:after{content:"";position:absolute;left:0;top:0;bottom:0;right:calc(100% - var(--progress-position) * 100%);background-color:red}.timeline .thumb-indicator[data-v-40b3a4ac]{--scale: 0;position:absolute;transform:translate(-50%) scale(var(--scale));height:200%;top:-50%;left:calc(var(--progress-position) * 100%);background-color:red;border-radius:50%;transition:transform .15s ease-in-out;aspect-ratio:1 / 1}.video-container.scrubbing .thumbnail-img[data-v-40b3a4ac]{display:block}.video-container.scrubbing .timeline[data-v-40b3a4ac]:before,.timeline-container:hover .timeline[data-v-40b3a4ac]:before{display:block}.video-container.scrubbing .thumb-indicator[data-v-40b3a4ac],.timeline-container:hover .thumb-indicator[data-v-40b3a4ac]{--scale: 1}.video-container.scrubbing .timeline[data-v-40b3a4ac],.timeline-container:hover .timeline[data-v-40b3a4ac]{height:100%}
+.e-spinner[data-v-29711f67]{vertical-align:center}.e-spinner__primary[data-v-29711f67],.e-spinner__secondary[data-v-29711f67]{stroke-width:0;animation:fade-29711f67;animation-iteration-count:infinite}@keyframes fade-29711f67{0%{fill-opacity:0}50%{fill-opacity:1}to{fill-opacity:0}}.e-row.e-row--no-gutters{margin:0}.e-row.e-row--no-gutters>.e-col{padding:0}.e-col{padding:.75rem}.spinner-container[data-v-99c9162d]{position:absolute;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);inset:0;display:flex;justify-content:center;align-items:center;vertical-align:middle}.video-container[data-v-99c9162d]{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;margin:0 auto}.video-container.full-screen[data-v-99c9162d]{max-width:initial;width:100%;max-height:100vh}video[data-v-99c9162d]{width:100%;height:inherit}.video-controls-container[data-v-99c9162d]{position:absolute;bottom:0;left:0;right:0;color:#fff;z-index:100;opacity:0;transition:opacity .15s ease-in-out}.hide[data-v-99c9162d]{display:none}.video-controls-container[data-v-99c9162d]:before{content:"";position:absolute;bottom:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);width:100%;aspect-ratio:6 / 1;z-index:-1;pointer-events:none}.video-container:hover .video-controls-container[data-v-99c9162d],.video-container:focus-within .video-controls-container[data-v-99c9162d],.video-container.paused .video-controls-container[data-v-99c9162d]{opacity:1}.video-controls-container .controls[data-v-99c9162d]{display:flex;gap:.5rem;padding:.75rem 1rem;align-items:center;width:100%}.video-controls-container .controls button[data-v-99c9162d]{background:none;border:none;color:inherit;padding:0;height:32px;width:32px;font-size:1.35rem;cursor:pointer;opacity:.85;transition:opacity .15s ease-in-out}.video-controls-container .controls button[data-v-99c9162d]:hover{opacity:1}.duration-container[data-v-99c9162d]{display:flex;align-items:center;gap:.25rem;flex-grow:1}.video-container.captions .captions-btn[data-v-99c9162d]{border-bottom:3px solid red}.video-controls-container .controls button.wide-btn[data-v-99c9162d]{width:50px}.timeline-container[data-v-99c9162d]{width:100%;height:7px;margin-inline:.5rem;cursor:pointer;display:flex;align-items:center}.timeline[data-v-99c9162d]{background-color:#64646480;height:3px;width:100%;position:relative}.timeline[data-v-99c9162d]:before{content:"";position:absolute;left:0;top:0;bottom:0;right:calc(100% - var(--preview-position) * 100%);background-color:#969696;display:none}.timeline[data-v-99c9162d]:after{content:"";position:absolute;left:0;top:0;bottom:0;right:calc(100% - var(--progress-position) * 100%);background-color:red}.timeline .thumb-indicator[data-v-99c9162d]{--scale: 0;position:absolute;transform:translate(-50%) scale(var(--scale));height:200%;top:-50%;left:calc(var(--progress-position) * 100%);background-color:red;border-radius:50%;transition:transform .15s ease-in-out;aspect-ratio:1 / 1}.video-container.scrubbing .thumbnail-img[data-v-99c9162d]{display:block}.video-container.scrubbing .timeline[data-v-99c9162d]:before,.timeline-container:hover .timeline[data-v-99c9162d]:before{display:block}.video-container.scrubbing .thumb-indicator[data-v-99c9162d],.timeline-container:hover .thumb-indicator[data-v-99c9162d]{--scale: 1}.video-container.scrubbing .timeline[data-v-99c9162d],.timeline-container:hover .timeline[data-v-99c9162d]{height:100%}.e-timeline svg{display:block}.e-timeline .x-axis-overview .domain,.e-timeline .x-axis-detailed .domain,.e-timeline .x-axis-overviewBackground .domain,.e-timeline .x-axis-detailedBackground .domain{display:none}.e-timeline .x-axis-detailedBackground .domain,.e-timeline .x-axis-detailedBackground text{display:none}.e-timeline .x-axis-overview>g.tick>line{opacity:.1;stroke-width:3;stroke-linecap:round}.e-timeline .x-axis-detailed>g.tick>line{opacity:.1;stroke-linecap:round}.e-timeline .x-axis-detailedBackground>g.tick>line{opacity:.075;stroke-linecap:round}.e-timeline--dark line{stroke:#fff}.e-timeline--dark text{fill:#fff}