add timestamp in fpsdata (#17)

* [PERF-1346] add timestamp in fpsdata

* Update README.md

Author: farhan-sauce

README.md

@@ -78,20 +78,40 @@ const fps = tasks.getFPS()
 console.log(fps)
 
 /**
- * [ 182.2821727559685,
- *   10.307790628308753,
- *   11.092131244032895,
- *   11.014792866762287,
- *   11.00897231503525,
- *   10.794939328106791,
- *   10.929081197725838,
- *   10.815838712204958,
- *   10.556652274643293,
- *   10.47987340271033,
- *   10.926095888726774,
- *   10.486577179634944,
- *   10.897876006628481,
- *   10.839990888916617 ]
+ * {
+ * times: [
+ *  289959949.734,
+ *  289959955.22,
+ *  289960052.234,
+ *  289960142.388,
+ *  289960233.175,
+ *  289960324.01,
+ *  289960416.646,
+ *  289960508.145,
+ *  289960600.602,
+ *  289960695.329,
+ *  289960790.75,
+ *  289960882.274,
+ *  289960977.634,
+ *  289961069.395
+ * ],
+ * values: [
+ *  182.2821727559685,
+ *  10.307790628308753,
+ *  11.092131244032895,
+ *  11.014792866762287,
+ *  11.00897231503525,
+ *  10.794939328106791,
+ *  10.929081197725838,
+ *  10.815838712204958,
+ *  10.556652274643293,
+ *  10.47987340271033,
+ *  10.926095888726774,
+ *  10.486577179634944,
+ *  10.897876006628481,
+ *  10.839990888916617
+ * ]
+ * }
  */
 ```
 

devtools/types.ts

@@ -420,9 +420,11 @@ export interface CountersObject {
     [key: string]: Counter
 }
 
+export interface CountersValuesTimestamp {
+    times: number[],
+    values: number[]
+}
+
 export interface CountersData {
-    [key: string]: {
-        times: number[],
-        values: number[]
-    }
+    [key: string]: CountersValuesTimestamp
 }

src/index.ts

@@ -1,4 +1,4 @@
-import { Range, StatsObject, CountersData, StatsArray } from '../devtools/types'
+import { Range, StatsObject, CountersData, CountersValuesTimestamp } from '../devtools/types'
 import TimelineLoader from '../devtools/loader'
 import { calcFPS } from '../devtools/utils'
 import Track, { TrackType } from '../devtools/timelineModel/track'
@@ -48,9 +48,16 @@ export default class Tracelib {
         return mainTrack.events
     }
 
-    public getFPS(): number[] {
-        return this._timelineLoader.performanceModel.frames()
-            .map(({ duration }): number => calcFPS(duration))
+    public getFPS(): CountersValuesTimestamp {
+        const fpsData: CountersValuesTimestamp = {
+            times: [],
+            values: []
+        }
+        this._timelineLoader.performanceModel.frames().forEach(({ duration, startTime }): void => {
+            fpsData.values.push(calcFPS(duration))
+            fpsData.times.push(startTime)
+        })
+        return fpsData
     }
 
     public getSummary(from?: number, to?: number): StatsObject {
@@ -95,7 +102,7 @@ export default class Tracelib {
         }), {})
     }
 
-    public getDetailStats(from?: number, to?: number): StatsArray {
+    public getDetailStats(from?: number, to?: number): CountersData {
         const timelineUtils = new CustomUtils()
         const startTime = from || this._performanceModel.timelineModel().minimumRecordTime()
         const endTime = to || this._performanceModel.timelineModel().maximumRecordTime()
@@ -109,8 +116,8 @@ export default class Tracelib {
                 syncEvents, startTime, endTime
             ),
             range: {
-                time: [startTime, endTime],
-                value: [startTime, endTime]
+                times: [startTime, endTime],
+                values: [startTime, endTime]
             }
         }
     }

src/utils.ts

@@ -1,5 +1,5 @@
 import TimelineUIUtils from './../devtools/timelineModel/timelineUIUtils'
-import { StatsArray } from './../devtools/types'
+import { CountersData } from './../devtools/types'
 import TimelineModel from './../devtools/timelineModel'
 import Event from './../devtools/tracingModel/event'
 import TracingModel from './../devtools/tracingModel'
@@ -11,22 +11,22 @@ export default class CustomUtils extends TimelineUIUtils {
     * @param {number} endTime
     * @return {!Object<string, number>}
     */
-    public detailStatsForTimeRange(events: Event[], startTime: number, endTime: number): StatsArray {
+    public detailStatsForTimeRange(events: Event[], startTime: number, endTime: number): CountersData {
         const eventStyle = this.eventStyle.bind(this)
         const visibleEventsFilterFunc = this.visibleEventsFilter.bind(this)
 
         if (!events.length) {
             return {
                 idle: {
-                    'time': [endTime - startTime],
-                    'value': [endTime - startTime]
+                    'times': [endTime - startTime],
+                    'values': [endTime - startTime]
                 }
             }
         }
 
         // aggeregatedStats is a map by categories. For each category there's an array
         // containing sorted time points which records accumulated value of the category.
-        const aggregatedStats: StatsArray = {}
+        const aggregatedStats: CountersData = {}
         const categoryStack: string[] = []
         let lastTime = 0
         TimelineModel.forEachEvent(
@@ -54,15 +54,14 @@ export default class CustomUtils extends TimelineUIUtils {
         function updateCategory(category: string, time: number): void {
             let statsArrays = aggregatedStats[category]
             if (!statsArrays) {
-                statsArrays = { time: [], value: [] }
+                statsArrays = { times: [], values: [] }
                 aggregatedStats[category] = statsArrays
             }
-            if (statsArrays.time.length && statsArrays.time[statsArrays.time.length - 1] === time) {
+            if (statsArrays.times.length && statsArrays.times[statsArrays.times.length - 1] === time) {
                 return
             }
-            // const lastValue = statsArrays.value.length ? statsArrays.value[statsArrays.value.length - 1] : 0
-            statsArrays.value.push(time - lastTime)
-            statsArrays.time.push(time)
+            statsArrays.values.push(time - lastTime)
+            statsArrays.times.push(time)
         }
 
         /**

tests/__snapshots__/index.test.ts.snap

@@ -75,22 +75,40 @@ Object {
 `;
 
 exports[`should get FPS 1`] = `
-Array [
-  182.2821727559685,
-  10.307790628308753,
-  11.092131244032895,
-  11.014792866762287,
-  11.00897231503525,
-  10.794939328106791,
-  10.929081197725838,
-  10.815838712204958,
-  10.556652274643293,
-  10.47987340271033,
-  10.926095888726774,
-  10.486577179634944,
-  10.897876006628481,
-  10.839990888916617,
-]
+Object {
+  "times": Array [
+    289959949.734,
+    289959955.22,
+    289960052.234,
+    289960142.388,
+    289960233.175,
+    289960324.01,
+    289960416.646,
+    289960508.145,
+    289960600.602,
+    289960695.329,
+    289960790.75,
+    289960882.274,
+    289960977.634,
+    289961069.395,
+  ],
+  "values": Array [
+    182.2821727559685,
+    10.307790628308753,
+    11.092131244032895,
+    11.014792866762287,
+    11.00897231503525,
+    10.794939328106791,
+    10.929081197725838,
+    10.815838712204958,
+    10.556652274643293,
+    10.47987340271033,
+    10.926095888726774,
+    10.486577179634944,
+    10.897876006628481,
+    10.839990888916617,
+  ],
+}
 `;
 
 exports[`should get memory counters 1`] = `