All files / src/lib/modules analytics.ts

30.3% Statements 10/33
0% Branches 0/13
0% Functions 0/10
31.25% Lines 10/32
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 732x 2x 2x 2x       2x                 2x 2x     2x             2x                                                       2x                                  
import {Module} from "../module";
import {Util} from "../util";
import {EVENT, TIME_LABELS} from "../enums";
import {on} from "../decorators";
import {IPageFragmentConfig, IPageLibConfiguration} from "../types";
 
 
export class Analytics extends Module {
  static get fragments(): IPageFragmentConfig[] {
    return this._fragments;
  }
 
  static set fragments(value: IPageFragmentConfig[]) {
    this._fragments = value;
  }
 
  private static _fragments: IPageFragmentConfig[] = [];
  private static connectionInformation: any = null;
 
  @on(EVENT.ON_CONFIG)
  static start(config: string) {
    Analytics.connectionInformation = Analytics.collectConnectionInformation();
    performance.mark(`${TIME_LABELS.HTML_TRANSFER_STARTED}`);
    Analytics.fragments = Analytics.fragments.concat((JSON.parse(config) as IPageLibConfiguration).fragments);
  }
 
  @on(EVENT.ON_PAGE_LOAD)
  static end() {
    Util.wrapGroup('PuzzleJs', 'Debug Mode - Analytics', () => {
      Util.table({
        'Round Trip Time': `${this.connectionInformation.rtt} ms`,
        'Connection Speed': `${this.connectionInformation.downlink} kbps`,
        'Connection Type': this.connectionInformation.effectiveType
      });
 
      const fragmentsTableData = Analytics.fragments.reduce((fragmentMap, fragment) => {
        fragmentMap[fragment.name] = {
          'Parsing Started': `${~~(fragment as any).loadTime[0].startTime} ms`,
          'Parse Duration': `${~~(fragment as any).loadTime[0].duration} ms`,
        };
        return fragmentMap;
      }, {});
      Util.table(fragmentsTableData);
 
      if (window.performance && performance.getEntriesByType) {
        const performance = window.performance;
        const performanceEntries = performance.getEntriesByType('paint');
        performanceEntries.forEach((performanceEntry, i, entries) => {
          Util.log("The time to " + performanceEntry.name + " was " + performanceEntry.startTime + " milliseconds.");
        });
      }
    });
  }
 
  @on(EVENT.ON_FRAGMENT_RENDERED)
  static fragment(name) {
    const fragment = Analytics.fragments.find(fragment => fragment.name === name);
    performance.mark(`${TIME_LABELS.FRAGMENT_RENDER_END}${name}`);
    performance.measure(`${TIME_LABELS.FRAGMENT_MEASUREMENT}${name}`, `${TIME_LABELS.HTML_TRANSFER_STARTED}`, `${TIME_LABELS.FRAGMENT_RENDER_END}${name}`);
    (fragment as any).loadTime = performance.getEntriesByName(`${TIME_LABELS.FRAGMENT_MEASUREMENT}${name}`);
  }
 
  private static collectConnectionInformation() {
    const connection = (navigator as any).connection || (navigator as any).mozConnection || (navigator as any).webkitConnection;
    //if (!connection) log('Connection api is not supported', LOG_TYPES.WARN, LOG_COLORS.RED);
    return {
      rtt: connection ? connection.rtt : '',
      effectiveType: connection ? connection.effectiveType : '',
      downlink: connection ? connection.downlink : ''
    };
  }
}