diff options
Diffstat (limited to 'website/app.ts')
| -rw-r--r-- | website/app.ts | 188 |
1 files changed, 119 insertions, 69 deletions
diff --git a/website/app.ts b/website/app.ts index c22c0d2c2..809be51bb 100644 --- a/website/app.ts +++ b/website/app.ts @@ -3,17 +3,71 @@ // How much to multiply time values in order to process log graphs properly. const TimeScaleFactor = 10000; -export async function getJson(path) { +export interface BenchmarkExecTimeResult { + min?: number; + max?: number; + mean?: number; + stddev?: number; + system?: number; + user?: number; +} + +export interface BenchmarkExecTimeResultSet { + [variant: string]: BenchmarkExecTimeResult; +} + +export interface BenchmarkVariantsResultSet { + [variant: string]: number; +} + +export interface BenchmarkRun { + created_at: string; + sha1: string; + benchmark: BenchmarkExecTimeResultSet; + binary_size?: BenchmarkVariantsResultSet | number; + max_memory?: BenchmarkVariantsResultSet | number; + bundle_size?: BenchmarkVariantsResultSet; + max_latency?: BenchmarkVariantsResultSet; + req_per_sec?: BenchmarkVariantsResultSet; + req_per_sec_proxy?: BenchmarkVariantsResultSet; + syscall_count?: BenchmarkVariantsResultSet; + thread_count?: BenchmarkVariantsResultSet; + throughput?: BenchmarkVariantsResultSet; +} + +export type BenchmarkName = Exclude<keyof BenchmarkRun, "created_at" | "sha1">; + +type Column = [string, ...Array<number | null>]; + +interface C3DataNode { + id: string; + index: number; + name: string; + value: number; + x: number; +} + +type C3OnClickCallback = (C3DataNode, unknown) => void; +type C3OnRenderedCallback = () => void; +type C3TickFormatter = (number) => number | string; + +export async function getJson(path: string): Promise<unknown> { return (await fetch(path)).json(); } -function getBenchmarkVarieties(data, benchmarkName) { +function getBenchmarkVarieties( + data: BenchmarkRun[], + benchmarkName: BenchmarkName +): string[] { // Look at last sha hash. const last = data[data.length - 1]; return Object.keys(last[benchmarkName]); } -export function createColumns(data, benchmarkName) { +export function createColumns( + data: BenchmarkRun[], + benchmarkName: BenchmarkName +): Column[] { const varieties = getBenchmarkVarieties(data, benchmarkName); return varieties.map(variety => [ variety, @@ -35,11 +89,11 @@ export function createColumns(data, benchmarkName) { } export function createNormalizedColumns( - data, - benchmarkName, - baselineBenchmark, - baselineVariety -) { + data: BenchmarkRun[], + benchmarkName: BenchmarkName, + baselineBenchmark: BenchmarkName, + baselineVariety: string +): Column[] { const varieties = getBenchmarkVarieties(data, benchmarkName); return varieties.map(variety => [ variety, @@ -65,19 +119,19 @@ export function createNormalizedColumns( ]); } -export function createExecTimeColumns(data) { +export function createExecTimeColumns(data: BenchmarkRun[]): Column[] { return createColumns(data, "benchmark"); } -export function createThroughputColumns(data) { +export function createThroughputColumns(data: BenchmarkRun[]): Column[] { return createColumns(data, "throughput"); } -export function createProxyColumns(data) { +export function createProxyColumns(data: BenchmarkRun[]): Column[] { return createColumns(data, "req_per_sec_proxy"); } -export function createNormalizedProxyColumns(data) { +export function createNormalizedProxyColumns(data: BenchmarkRun[]): Column[] { return createNormalizedColumns( data, "req_per_sec_proxy", @@ -86,23 +140,25 @@ export function createNormalizedProxyColumns(data) { ); } -export function createReqPerSecColumns(data) { +export function createReqPerSecColumns(data: BenchmarkRun[]): Column[] { return createColumns(data, "req_per_sec"); } -export function createNormalizedReqPerSecColumns(data) { +export function createNormalizedReqPerSecColumns( + data: BenchmarkRun[] +): Column[] { return createNormalizedColumns(data, "req_per_sec", "req_per_sec", "hyper"); } -export function createMaxLatencyColumns(data) { +export function createMaxLatencyColumns(data: BenchmarkRun[]): Column[] { return createColumns(data, "max_latency"); } -export function createMaxMemoryColumns(data) { +export function createMaxMemoryColumns(data: BenchmarkRun[]): Column[] { return createColumns(data, "max_memory"); } -export function createBinarySizeColumns(data) { +export function createBinarySizeColumns(data: BenchmarkRun[]): Column[] { const propName = "binary_size"; const binarySizeNames = Object.keys(data[data.length - 1][propName]); return binarySizeNames.map(name => [ @@ -122,7 +178,7 @@ export function createBinarySizeColumns(data) { ]); } -export function createThreadCountColumns(data) { +export function createThreadCountColumns(data: BenchmarkRun[]): Column[] { const propName = "thread_count"; const threadCountNames = Object.keys(data[data.length - 1][propName]); return threadCountNames.map(name => [ @@ -137,7 +193,7 @@ export function createThreadCountColumns(data) { ]); } -export function createSyscallCountColumns(data) { +export function createSyscallCountColumns(data: BenchmarkRun[]): Column[] { const propName = "syscall_count"; const syscallCountNames = Object.keys(data[data.length - 1][propName]); return syscallCountNames.map(name => [ @@ -152,27 +208,27 @@ export function createSyscallCountColumns(data) { ]); } -export function createBundleSizeColumns(data) { +export function createBundleSizeColumns(data: BenchmarkRun[]): Column[] { return createColumns(data, "bundle_size"); } -export function createSha1List(data) { +export function createSha1List(data: BenchmarkRun[]): string[] { return data.map(d => d.sha1); } -export function formatKB(bytes) { +export function formatKB(bytes: number): string { return (bytes / 1024).toFixed(2); } -export function formatMB(bytes) { +export function formatMB(bytes: number): string { return (bytes / (1024 * 1024)).toFixed(2); } -export function formatReqSec(reqPerSec) { - return reqPerSec / 1000; +export function formatReqSec(reqPerSec: number): string { + return (reqPerSec / 1000).toFixed(3); } -export function formatPercentage(decimal) { +export function formatPercentage(decimal: number): string { return (decimal * 100).toFixed(2); } @@ -186,15 +242,15 @@ export function formatPercentage(decimal) { * @param {boolean} zoomEnabled enables the zoom feature */ function generate( - id, - categories, - columns, - onclick, + id: string, + categories: string[], + columns: Column[], + onclick: C3OnClickCallback, yLabel = "", - yTickFormat = null, + yTickFormat?: C3TickFormatter, zoomEnabled = true, - onrendered = () => {} -) { + onrendered?: C3OnRenderedCallback +): void { const yAxis = { padding: { bottom: 0 }, min: 0, @@ -207,12 +263,12 @@ function generate( }; if (yTickFormat == logScale) { delete yAxis.min; - for (let col of columns) { + for (const col of columns) { for (let i = 1; i < col.length; i++) { if (col[i] == null || col[i] === 0) { continue; } - col[i] = Math.log10(col[i] * TimeScaleFactor); + col[i] = Math.log10((col[i] as number) * TimeScaleFactor); } } } @@ -240,21 +296,14 @@ function generate( }); } -function logScale(t) { +function logScale(t: number): string { return (Math.pow(10, t) / TimeScaleFactor).toFixed(4); } -function formatSecsAsMins(t) { - // TODO use d3.round() - const a = t % 60; - const min = Math.floor(t / 60); - return a < 30 ? min : min + 1; -} - /** * @param dataUrl The url of benchmark data json. */ -export function drawCharts(dataUrl) { +export function drawCharts(dataUrl: string): Promise<void> { // TODO Using window["location"]["hostname"] instead of // window.location.hostname because when deno runs app_test.js it gets a type // error here, not knowing about window.location. Ideally Deno would skip @@ -265,11 +314,8 @@ export function drawCharts(dataUrl) { return drawChartsFromBenchmarkData(dataUrl); } -const proxyFields = [ - "req_per_sec" - //"max_latency" -]; -function extractProxyFields(data) { +const proxyFields: BenchmarkName[] = ["req_per_sec"]; +function extractProxyFields(data: BenchmarkRun[]): void { for (const row of data) { for (const field of proxyFields) { const d = row[field]; @@ -290,8 +336,10 @@ function extractProxyFields(data) { /** * Draws the charts from the benchmark data stored in gh-pages branch. */ -export async function drawChartsFromBenchmarkData(dataUrl) { - const data = await getJson(dataUrl); +export async function drawChartsFromBenchmarkData( + dataUrl: string +): Promise<void> { + const data = (await getJson(dataUrl)) as BenchmarkRun[]; // hack to extract proxy fields from req/s fields extractProxyFields(data); @@ -311,25 +359,23 @@ export async function drawChartsFromBenchmarkData(dataUrl) { const sha1List = createSha1List(data); const sha1ShortList = sha1List.map(sha1 => sha1.substring(0, 6)); - const viewCommitOnClick = _sha1List => d => { + function viewCommitOnClick(d: C3DataNode, _: unknown): void { // @ts-ignore - window.open( - `https://github.com/denoland/deno/commit/${_sha1List[d["index"]]}` - ); - }; + window.open(`https://github.com/denoland/deno/commit/${sha1List[d.index]}`); + } function gen( - id, - columns, + id: string, + columns: Column[], yLabel = "", - yTickFormat = null, - onrendered = () => {} - ) { + yTickFormat?: C3TickFormatter, + onrendered?: C3OnRenderedCallback + ): void { generate( id, sha1ShortList, columns, - viewCommitOnClick(sha1List), + viewCommitOnClick, yLabel, yTickFormat, true, @@ -363,8 +409,8 @@ export async function drawChartsFromBenchmarkData(dataUrl) { gen("#bundle-size-chart", bundleSizeColumns, "kilobytes", formatKB); } -function hideOnRender(elementID) { - return () => { +function hideOnRender(elementID: string): C3OnRenderedCallback { + return (): void => { const chart = window["document"].getElementById(elementID); if (!chart.getAttribute("data-inital-hide-done")) { chart.setAttribute("data-inital-hide-done", "true"); @@ -373,12 +419,16 @@ function hideOnRender(elementID) { }; } -function registerNormalizedSwitcher(checkboxID, chartID, normalizedChartID) { +function registerNormalizedSwitcher( + checkboxID: string, + chartID: string, + normalizedChartID: string +): void { const checkbox = window["document"].getElementById(checkboxID); const regularChart = window["document"].getElementById(chartID); const normalizedChart = window["document"].getElementById(normalizedChartID); - checkbox.addEventListener("change", event => { + checkbox.addEventListener("change", _ => { // If checked is true the normalized variant should be shown // @ts-ignore if (checkbox.checked) { @@ -395,15 +445,15 @@ export function main(): void { window["chartWidth"] = 800; const overlay = window["document"].getElementById("spinner-overlay"); - function showSpinner() { + function showSpinner(): void { overlay.style.display = "block"; } - function hideSpinner() { + function hideSpinner(): void { overlay.style.display = "none"; } - function updateCharts() { + function updateCharts(): void { const u = window.location.hash.match("all") ? "./data.json" : "recent.json"; showSpinner(); |