chore(Perf): Add renderComponent times to perf charts

build/gulp/tasks/perf.ts

@@ -77,35 +77,32 @@ const sumByExample = (measures: ProfilerMeasureCycle[]): PerExamplePerfMeasures
 
   return _.mapValues(perExampleMeasures, (profilerMeasures: ProfilerMeasure[]) => ({
     actualTime: reduceMeasures(profilerMeasures, 'actualTime'),
+    renderComponentTime: reduceMeasures(profilerMeasures, 'renderComponentTime'),
+    componentCount: reduceMeasures(profilerMeasures, 'componentCount'),
   }))
 }
 
-type NumberPropertyNames<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T]
-
-const createMarkdownTable = (
-  perExamplePerfMeasures: PerExamplePerfMeasures,
-  metricName: MeasuredValues = 'actualTime',
-  fields: NumberPropertyNames<ReducedMeasures>[] = ['min', 'avg', 'median', 'max'],
-) => {
-  const exampleMeasures = _.mapValues(
-    perExamplePerfMeasures,
-    exampleMeasure => exampleMeasure[metricName],
-  )
+const createMarkdownTable = (perExamplePerfMeasures: PerExamplePerfMeasures) => {
+  const fieldsMapping = {
+    min: 'actualTime.min',
+    avg: 'actualTime.avg',
+    median: 'actualTime.median',
+    max: 'actualTime.max',
+    'renderComponent.min': 'renderComponentTime.min',
+    'renderComponent.avg': 'renderComponentTime.avg',
+    'renderComponent.median': 'renderComponentTime.median',
+    'renderComponent.max': 'renderComponentTime.max',
+    components: 'componentCount.median',
+  }
 
-  const fieldLabels: string[] = _.map(fields, _.startCase)
-  const fieldValues = _.mapValues(exampleMeasures, exampleMeasure =>
-    _.flatMap(fields, field => exampleMeasure[field]),
-  )
+  const fieldLabels = _.keys(fieldsMapping)
+  const fieldValues = _.map(perExamplePerfMeasures, (value, exampleName) => {
+    return [exampleName, ..._.map(_.values(fieldsMapping), measure => _.get(value, measure))]
+  })
 
   return markdownTable([
     ['Example', ...fieldLabels],
-    ..._.sortBy(
-      _.map(exampleMeasures, (exampleMeasure, exampleName) => [
-        exampleName,
-        ...fieldValues[exampleName],
-      ]),
-      row => -row[fields.indexOf('median')],
-    ),
+    ..._.sortBy(fieldValues, row => -row[fieldLabels.indexOf('median') + 1]), // +1 is for exampleName
   ])
 }
 

build/gulp/tasks/stats.ts

@@ -139,6 +139,10 @@ function readSummaryPerfStats() {
     .mapKeys((value, key) => _.camelCase(key)) // mongodb does not allow dots in keys
     .mapValues(result => ({
       actualTime: _.omit(result.actualTime, 'values'),
+      renderComponentTime: {
+        ..._.omit(result.renderComponentTime, 'values'),
+        componentCount: result.componentCount.median,
+      },
     }))
     .value()
 }

perf/src/index.tsx

@@ -1,6 +1,6 @@
 import '@babel/polyfill'
 
-import { Provider, themes } from '@fluentui/react'
+import { Provider, Telemetry, themes } from '@fluentui/react'
 import * as _ from 'lodash'
 import * as minimatch from 'minimatch'
 import * as React from 'react'
@@ -32,9 +32,10 @@ const renderCycle = async (
   exampleIndex: number,
 ): Promise<ProfilerMeasure> => {
   let profilerMeasure: ProfilerMeasure
+  const telemetryRef: React.Ref<Telemetry> = React.createRef()
 
   await asyncRender(
-    <Provider theme={themes.teams}>
+    <Provider theme={themes.teams} telemetryRef={telemetryRef}>
       <Profiler
         id={exampleName}
         onRender={(
@@ -44,12 +45,24 @@ const renderCycle = async (
           startTime: number,
           commitTime: number,
         ) => {
+          const renderComponentTelemetry = _.reduce(
+            _.values(telemetryRef.current.performance),
+            (acc, next) => {
+              return {
+                componentCount: acc.componentCount + next.count,
+                renderComponentTime: acc.renderComponentTime + next.msTotal,
+              }
+            },
+            { componentCount: 0, renderComponentTime: 0 },
+          )
+
           profilerMeasure = {
             actualTime,
             exampleIndex,
             phase,
             commitTime,
             startTime,
+            ...renderComponentTelemetry,
           }
         }}
       >

perf/types.ts

@@ -4,13 +4,16 @@ declare global {
   }
 }
 
-export type MeasuredValues = 'actualTime'
+export type MeasuredValues = 'actualTime' | 'renderComponentTime' | 'componentCount'
 
 export type ProfilerMeasure = { [key in MeasuredValues]: number } & {
   exampleIndex: number
   phase: string
   startTime: number
   commitTime: number
+
+  componentCount: number
+  renderComponentTime: number
 }
 
 export type ProfilerMeasureCycle = Record<string, ProfilerMeasure>