From cb419b535f6b2faee4f2bd6292e9442de8785308 Mon Sep 17 00:00:00 2001 From: Pedro Duarte Date: Tue, 6 Oct 2020 16:30:20 +0200 Subject: [PATCH 1/2] Create benchmark.tsx --- pages/benchmark.tsx | 257 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 257 insertions(+) create mode 100644 pages/benchmark.tsx diff --git a/pages/benchmark.tsx b/pages/benchmark.tsx new file mode 100644 index 0000000..0158796 --- /dev/null +++ b/pages/benchmark.tsx @@ -0,0 +1,257 @@ +import React from 'react'; +import Head from 'next/head'; +import NextLink from 'next/link'; +import { Box, Container, Text, theme } from '@modulz/design-system'; +import { StitchesLogo } from '../components/StitchesLogo'; +import { TitleAndMetaTags } from '../components/TitleAndMetaTags'; + +function collectBenchesPerTestCase(entries) { + const map = new Map(); + for (const entry of entries) { + const { commit, date, tool, benches } = entry; + for (const bench of benches) { + const result = { commit, date, tool, bench }; + const arr = map.get(bench.name); + if (arr === undefined) { + map.set(bench.name, [result]); + } else { + arr.push(result); + } + } + } + return map; +} + +export default function BenchmarkPage(props) { + React.useEffect(() => { + // const toolColors = { + // cargo: '#dea584', + // go: '#00add8', + // benchmarkjs: 'hsl(16,60%,74%)', + // pytest: '#3572a5', + // googlecpp: '#f34b7d', + // catch2: '#f34b7d', + // _: '#333333', + // }; + + function init() { + const data = props.data; + // Prepare data points for charts + return Object.keys(data.entries).map((name) => ({ + name, + dataSet: collectBenchesPerTestCase(data.entries[name]), + })); + } + + function renderAllChars(dataSets) { + function renderGraph(parent, name, dataset) { + const canvas = document.createElement('canvas'); + canvas.className = 'benchmark-chart'; + parent.appendChild(canvas); + + // const color = toolColors[dataset.length > 0 ? dataset[0].tool : '_']; + const data = { + labels: dataset.map((d) => d.commit.id.slice(0, 7)), + datasets: [ + { + label: name, + data: dataset.map((d) => d.bench.value), + // borderColor: color, + // backgroundColor: color + '60', // Add alpha for #rrggbbaa + borderColor: 'hsl(252,80%,70%)', + backgroundColor: 'hsl(272,100%,96%)', + }, + ], + }; + const options = { + scales: { + xAxes: [ + { + scaleLabel: { + display: true, + labelString: 'commit', + }, + }, + ], + yAxes: [ + { + scaleLabel: { + display: true, + labelString: dataset.length > 0 ? dataset[0].bench.unit : '', + }, + ticks: { + beginAtZero: true, + }, + }, + ], + }, + tooltips: { + callbacks: { + afterTitle: (items) => { + const { index } = items[0]; + const data = dataset[index]; + return ( + '\n' + + data.commit.message + + '\n\n' + + data.commit.timestamp + + ' committed by @' + + data.commit.committer.username + + '\n' + ); + }, + label: (item) => { + let label = item.value; + const { range, unit } = dataset[item.index].bench; + label += ' ' + unit; + if (range) { + label += ' (' + range + ')'; + } + return label; + }, + afterLabel: (item) => { + const { extra } = dataset[item.index].bench; + return extra ? '\n' + extra : ''; + }, + }, + }, + onClick: (_mouseEvent, activeElems) => { + if (activeElems.length === 0) { + return; + } + // XXX: Undocumented. How can we know the index? + const index = activeElems[0]._index; + const url = dataset[index].commit.url; + window.open(url, '_blank'); + }, + }; + + (window as any).Chart.defaults.global.defaultFontFamily = + 'Untitled Sans, -apple-system, BlinkMacSystemFont, system-ui, sans-serif'; + + new (window as any).Chart(canvas, { + type: 'line', + data, + options, + }); + } + + function renderBenchSet(name, benchSet, main) { + const setElem = document.createElement('div'); + setElem.className = 'benchmark-set'; + main.appendChild(setElem); + + const graphsElem = document.createElement('div'); + graphsElem.className = 'benchmark-graphs'; + setElem.appendChild(graphsElem); + + for (const [benchName, benches] of benchSet.entries()) { + renderGraph(graphsElem, benchName, benches); + } + } + + const main = document.getElementById('benchmark-main'); + for (const { name, dataSet } of dataSets) { + renderBenchSet(name, dataSet, main); + } + } + renderAllChars(init()); // Start + }, []); + return ( + + + + + + + + + + Stitches homepage + + + + + + + + Stitches Benchmarks + + + +
+ + + + ); +} + +const RAW_GITHUB_URL = 'https://raw.githubusercontent.com'; + +function getErrorText(res) { + try { + return res.text(); + } catch (err) { + return res.statusText; + } +} + +export async function getError(msg, res) { + const errorText = await getErrorText(res); + const error = new Error(`${msg} (${res.status}): ${errorText}`) as any; + + error.url = res.url; + error.status = res.status; + error.headers = res.headers.raw(); + + return error; +} + +async function getRawFileFromGitHub(path) { + const res = await fetch(RAW_GITHUB_URL + path); + + if (res.ok) return res.text(); + throw await getError('GitHub raw download error', res); +} + +export async function getStaticProps(context) { + // raw.githubusercontent.com/jonathantneal/stitches/gh-pages/dev/bench/data.js + const rawData = await getRawFileFromGitHub(`/jonathantneal/stitches/gh-pages/dev/bench/data.js`); + const data = rawData.replace('window.BENCHMARK_DATA = ', ''); + return { + props: { + data: JSON.parse(data), + }, + }; +} From 75a01e1a224a0bbe7bcd8d6f2178cca9d3185354 Mon Sep 17 00:00:00 2001 From: Pedro Duarte Date: Wed, 7 Oct 2020 17:22:06 +0200 Subject: [PATCH 2/2] Update benchmark.tsx --- pages/benchmark.tsx | 319 ++++++++++++++++++++++++-------------------- 1 file changed, 175 insertions(+), 144 deletions(-) diff --git a/pages/benchmark.tsx b/pages/benchmark.tsx index 0158796..55271bb 100644 --- a/pages/benchmark.tsx +++ b/pages/benchmark.tsx @@ -1,9 +1,10 @@ import React from 'react'; import Head from 'next/head'; import NextLink from 'next/link'; -import { Box, Container, Text, theme } from '@modulz/design-system'; +import { Badge, Box, Container, Text, Link, Button } from '@modulz/design-system'; import { StitchesLogo } from '../components/StitchesLogo'; import { TitleAndMetaTags } from '../components/TitleAndMetaTags'; +import { format } from 'date-fns'; function collectBenchesPerTestCase(entries) { const map = new Map(); @@ -22,147 +23,30 @@ function collectBenchesPerTestCase(entries) { return map; } -export default function BenchmarkPage(props) { - React.useEffect(() => { - // const toolColors = { - // cargo: '#dea584', - // go: '#00add8', - // benchmarkjs: 'hsl(16,60%,74%)', - // pytest: '#3572a5', - // googlecpp: '#f34b7d', - // catch2: '#f34b7d', - // _: '#333333', - // }; - - function init() { - const data = props.data; - // Prepare data points for charts - return Object.keys(data.entries).map((name) => ({ - name, - dataSet: collectBenchesPerTestCase(data.entries[name]), - })); - } - - function renderAllChars(dataSets) { - function renderGraph(parent, name, dataset) { - const canvas = document.createElement('canvas'); - canvas.className = 'benchmark-chart'; - parent.appendChild(canvas); - - // const color = toolColors[dataset.length > 0 ? dataset[0].tool : '_']; - const data = { - labels: dataset.map((d) => d.commit.id.slice(0, 7)), - datasets: [ - { - label: name, - data: dataset.map((d) => d.bench.value), - // borderColor: color, - // backgroundColor: color + '60', // Add alpha for #rrggbbaa - borderColor: 'hsl(252,80%,70%)', - backgroundColor: 'hsl(272,100%,96%)', - }, - ], - }; - const options = { - scales: { - xAxes: [ - { - scaleLabel: { - display: true, - labelString: 'commit', - }, - }, - ], - yAxes: [ - { - scaleLabel: { - display: true, - labelString: dataset.length > 0 ? dataset[0].bench.unit : '', - }, - ticks: { - beginAtZero: true, - }, - }, - ], - }, - tooltips: { - callbacks: { - afterTitle: (items) => { - const { index } = items[0]; - const data = dataset[index]; - return ( - '\n' + - data.commit.message + - '\n\n' + - data.commit.timestamp + - ' committed by @' + - data.commit.committer.username + - '\n' - ); - }, - label: (item) => { - let label = item.value; - const { range, unit } = dataset[item.index].bench; - label += ' ' + unit; - if (range) { - label += ' (' + range + ')'; - } - return label; - }, - afterLabel: (item) => { - const { extra } = dataset[item.index].bench; - return extra ? '\n' + extra : ''; - }, - }, - }, - onClick: (_mouseEvent, activeElems) => { - if (activeElems.length === 0) { - return; - } - // XXX: Undocumented. How can we know the index? - const index = activeElems[0]._index; - const url = dataset[index].commit.url; - window.open(url, '_blank'); - }, - }; +const fontFamily = 'Untitled Sans, -apple-system, BlinkMacSystemFont, system-ui, sans-serif'; - (window as any).Chart.defaults.global.defaultFontFamily = - 'Untitled Sans, -apple-system, BlinkMacSystemFont, system-ui, sans-serif'; - - new (window as any).Chart(canvas, { - type: 'line', - data, - options, - }); - } - - function renderBenchSet(name, benchSet, main) { - const setElem = document.createElement('div'); - setElem.className = 'benchmark-set'; - main.appendChild(setElem); - - const graphsElem = document.createElement('div'); - graphsElem.className = 'benchmark-graphs'; - setElem.appendChild(graphsElem); +export default function BenchmarkPage({ data, ...props }) { + if (!data) { + return null; + } - for (const [benchName, benches] of benchSet.entries()) { - renderGraph(graphsElem, benchName, benches); - } - } + const dataSets = Object.keys(data.entries).map((name) => ({ + name, + dataSet: collectBenchesPerTestCase(data.entries[name]), + })); - const main = document.getElementById('benchmark-main'); - for (const { name, dataSet } of dataSets) { - renderBenchSet(name, dataSet, main); - } - } - renderAllChars(init()); // Start + React.useEffect(() => { + // Global Chart.js overrides + (window as any).Chart.defaults.global.defaultFontFamily = fontFamily; + (window as any).Chart.defaults.global.animation.duration = 0; }, []); + return ( - + - + Stitches Benchmarks - + Updated: {format(data.lastUpdate, 'dd/MM/yy')} at {format(data.lastUpdate, 'HH:mm')}{' '} + {format(data.lastUpdate, 'O')} + + + {dataSets.map(({ name, dataSet }) => ( + + ))} + + + Repository: {data.repoUrl} + + + ); } +function Bench(props: any) { + return ( + <> + {[...props.dataSet.entries()].map(([name, data], i) => ( + + ))} + + ); +} + +function Chart({ dataSet, name }: any) { + const canvasRef = React.useRef(null); + + React.useEffect(() => { + const data = { + labels: dataSet.map((d) => d.commit.id.slice(0, 7)), + datasets: [ + { + label: name, + data: dataSet.map((d) => d.bench.value), + + borderColor: 'hsl(252,80%,70%)', + backgroundColor: 'hsla(252,80%,70%, 0.2)', + pointBackgroundColor: 'hsl(252,80%,70%)', + pointBorderColor: 'white', + pointRadius: 5, + pointHoverRadius: 5, + pointHitRadius: 3, + }, + ], + }; + const options = { + global: { + defaultFontFamily: fontFamily, + }, + hover: { + animationDuration: 0, + }, + scales: { + xAxes: [ + { + gridLines: { + color: 'hsla(252,80%,70%, 0.4)', + zeroLineColor: 'hsla(252,80%,70%, 0.4)', + }, + scaleLabel: { + display: true, + labelString: 'commit', + }, + }, + ], + yAxes: [ + { + gridLines: { + color: 'hsla(252,80%,70%, 0.4)', + zeroLineColor: 'hsla(252,80%,70%, 0.4)', + }, + scaleLabel: { + display: true, + labelString: dataSet.length > 0 ? dataSet[0].bench.unit : '', + }, + ticks: { + beginAtZero: true, + }, + }, + ], + }, + tooltips: { + displayColors: false, + xPadding: 15, + yPadding: 15, + titleFontFamily: fontFamily, + bodyFontFamily: fontFamily, + footerFontFamily: fontFamily, + titleSpacing: 5, + titleMarginBottom: 10, + bodySpacing: 5, + bodyMarginBottom: 0, + cornerRadius: 5, + callbacks: { + afterTitle: (items) => { + const { index } = items[0]; + return dataSet[index].commit.message; + }, + label: (item) => { + let label = item.value; + const { range, unit } = dataSet[item.index].bench; + label += ' ' + unit; + if (range) { + label += ' (' + range + ')'; + } + return label; + }, + afterLabel: (item) => { + const { extra } = dataSet[item.index].bench; + return extra ? extra : ''; + }, + }, + }, + onClick: (_mouseEvent, activeElems) => { + if (activeElems.length === 0) { + return; + } + const index = activeElems[0]._index; + const url = dataSet[index].commit.url; + window.open(url, '_blank'); + }, + }; + + new (window as any).Chart(canvasRef.current, { + type: 'line', + data, + options, + }); + }, [dataSet]); + + return ( + + + + ); +} + const RAW_GITHUB_URL = 'https://raw.githubusercontent.com'; function getErrorText(res) {