Added SSR Charts

packages/docs/src/components/ChartTabs.astro

@@ -4,14 +4,17 @@ interface Props {
   label: string
   tab1Label: string
   tab2Label: string
+  tab3Label?: string
 }
 
-const { sectionId, label, tab1Label, tab2Label } = Astro.props
+const { sectionId, label, tab1Label, tab2Label, tab3Label } = Astro.props
 
 const tab1Id = `${sectionId}-tab-1`
 const tab2Id = `${sectionId}-tab-2`
+const tab3Id = `${sectionId}-tab-3`
 const panel1Id = `${sectionId}-panel-1`
 const panel2Id = `${sectionId}-panel-2`
+const panel3Id = `${sectionId}-panel-3`
 ---
 
 <div class="chart-tabs-container" data-tab-section={sectionId}>
@@ -36,6 +39,20 @@ const panel2Id = `${sectionId}-panel-2`
     >
       {tab2Label}
     </button>
+    {
+      tab3Label && (
+        <button
+          type="button"
+          role="tab"
+          id={tab3Id}
+          aria-selected="false"
+          aria-controls={panel3Id}
+          class="tab"
+        >
+          {tab3Label}
+        </button>
+      )
+    }
   </div>
   <div class="chart-tabpanels">
     <div
@@ -55,6 +72,19 @@ const panel2Id = `${sectionId}-panel-2`
     >
       <slot name="panel-2" />
     </div>
+    {
+      tab3Label && (
+        <div
+          role="tabpanel"
+          id={panel3Id}
+          aria-labelledby={tab3Id}
+          class="chart-tabpanel"
+          hidden
+        >
+          <slot name="panel-3" />
+        </div>
+      )
+    }
   </div>
 </div>
 
@@ -134,7 +164,7 @@ const panel2Id = `${sectionId}-panel-2`
       const tabs = section.querySelectorAll<HTMLButtonElement>('[role="tab"]')
       const panels = section.querySelectorAll<HTMLElement>('[role="tabpanel"]')
 
-      if (tabs.length !== 2 || panels.length !== 2) return
+      if (tabs.length === 0 || panels.length === 0) return
 
       function setActive(index: number) {
         tabs.forEach((tab, i) => {

packages/docs/src/components/ComparisonBarChart.astro

@@ -4,7 +4,7 @@ import type { ChartDatum } from '../lib/types'
 interface Props {
   title: string
   data: ChartDatum[]
-  valueFormat: 'count' | 'mb'
+  valueFormat: 'count' | 'mb' | 'kb' | 'ms'
 }
 
 const { title, data, valueFormat } = Astro.props
@@ -119,9 +119,14 @@ const chartPayload = JSON.stringify({ data, valueFormat })
     { width: number; height: number }
   >()
 
-  function formatValue(value: number, format: 'count' | 'mb'): string {
+  function formatValue(
+    value: number,
+    format: 'count' | 'mb' | 'kb' | 'ms',
+  ): string {
     if (format === 'count') return String(Math.round(value))
-    return `${value.toFixed(2)} MB`
+    if (format === 'mb') return `${value.toFixed(2)} MB`
+    if (format === 'kb') return `${value.toFixed(2)} KB`
+    return `${value.toFixed(2)} ms`
   }
 
   function setTooltipContent(

packages/docs/src/components/SSRBodySizeChart.astro

@@ -0,0 +1,10 @@
+---
+import { ssrStats } from '../lib/collections'
+import ComparisonBarChart from './ComparisonBarChart.astro'
+
+const data = ssrStats
+  .filter((f) => f?.name != null && Number.isFinite(f.ssrBodySizeKb))
+  .map((f) => ({ name: f.name, value: f.ssrBodySizeKb }))
+---
+
+<ComparisonBarChart title="Body Size" data={data} valueFormat="kb" />

packages/docs/src/components/SSRCharts.astro

@@ -0,0 +1,18 @@
+---
+import ChartTabs from './ChartTabs.astro'
+import SSRBodySizeChart from './SSRBodySizeChart.astro'
+import SSRLatencyChart from './SSRLatencyChart.astro'
+import SSROpsChart from './SSROpsChart.astro'
+---
+
+<ChartTabs
+  sectionId="ssr"
+  label="SSR performance graphs"
+  tab1Label="Ops/sec"
+  tab2Label="Body Size"
+  tab3Label="Avg Latency"
+>
+  <SSROpsChart slot="panel-1" />
+  <SSRBodySizeChart slot="panel-2" />
+  <SSRLatencyChart slot="panel-3" />
+</ChartTabs>

packages/docs/src/components/SSRLatencyChart.astro

@@ -0,0 +1,10 @@
+---
+import { ssrStats } from '../lib/collections'
+import ComparisonBarChart from './ComparisonBarChart.astro'
+
+const data = ssrStats
+  .filter((f) => f?.name != null && Number.isFinite(f.ssrAvgLatencyMs))
+  .map((f) => ({ name: f.name, value: f.ssrAvgLatencyMs }))
+---
+
+<ComparisonBarChart title="Avg Latency" data={data} valueFormat="ms" />

packages/docs/src/components/SSROpsChart.astro

@@ -0,0 +1,10 @@
+---
+import { ssrStats } from '../lib/collections'
+import ComparisonBarChart from './ComparisonBarChart.astro'
+
+const data = ssrStats
+  .filter((f) => f?.name != null && Number.isFinite(f.ssrOpsPerSec))
+  .map((f) => ({ name: f.name, value: f.ssrOpsPerSec }))
+---
+
+<ComparisonBarChart title="Ops/sec" data={data} valueFormat="count" />

packages/docs/src/lib/types.ts

@@ -5,5 +5,5 @@ export interface ChartDatum {
 
 export interface ComparisonChartPayload {
   data: ChartDatum[]
-  valueFormat: 'count' | 'mb'
+  valueFormat: 'count' | 'mb' | 'kb' | 'ms'
 }

packages/docs/src/pages/index.astro

@@ -5,6 +5,7 @@ import Description from '../components/Description.astro'
 import DetailsLink from '../components/DetailsLink.astro'
 import FocusedToggle from '../components/FocusedToggle.astro'
 import PageHeader from '../components/PageHeader.astro'
+import SSRCharts from '../components/SSRCharts.astro'
 import SSRStatsTable from '../components/SSRStatsTable.astro'
 import Layout from '../layouts/Layout.astro'
 ---
@@ -43,6 +44,7 @@ import Layout from '../layouts/Layout.astro'
   <h2>Runtime Performance</h2>
   <h3>SSR Performance</h3>
   <SSRStatsTable />
+  <SSRCharts />
   <DetailsLink href="/run-time#ssr-performance" label="SSR in Run Time Stats" />
 </Layout>