Skip to content

Fix benchmark visualizer #104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 3, 2022
Merged

Fix benchmark visualizer #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/pages/benchviz/Benchmark.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ import { joinOnProperty, JoinResult } from "./util";
import { barComparisonGraph } from "./visualizations/bar-comparison-graph";
import { positiveNegativeBarGraph } from "./visualizations/positive-negative-bar-graph";

const comparisonGraphWidth = 1000;
const comparisonGraphWidth = 1200;
const comparisonGraphHeight = 300;

const changeGraphWidth = 1000;
const changeGraphWidth = 1200;
const changeGraphHeight = 300;

// Utility functions
Expand Down Expand Up @@ -53,7 +53,7 @@ function BenchmarkCategory<T extends BenchmarkResult>({
// Populate graph with benchmark results
const memoryBenchmarksResultTable = benchmarksSortedByPercentageDiff.map((bm, i) => {
const change = percentChangeForResult(bm);
const rowColor = change === 0 ? "currentColor" : change > 0 ? "red" : "green";
const rowColor = change <= -0.01 ? "green" : change >= 0.01 ? "red" : "currentColor";

return (
<tr key={i} style={{ color: rowColor }}>
Expand Down Expand Up @@ -133,7 +133,7 @@ export default function Benchmark() {
<BenchmarkCategory
name={"Runtime"}
benchmarks={benchmarkData.runtime}
extractValue={(bm) => bm.time}
extractValue={(bm) => bm.time * 1000}
formatValue={formatTime}
/>
</>
Expand Down
19 changes: 14 additions & 5 deletions src/pages/benchviz/visualizations/bar-comparison-graph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function barComparisonGraph(
.range([GRAPH_MARGIN.left, width - GRAPH_MARGIN.right]);

const bandWidth = xScale.bandwidth();
const barWidth = 25;
const barWidth = Math.min(25, (0.3 * width) / data.length);

const xAxis = d3.axisBottom(xScale);
selection.append("g").attr("transform", `translate(0, ${barMaxHeight})`).call(xAxis);
Expand All @@ -47,23 +47,32 @@ export function barComparisonGraph(
// Create bars for each entry
const entries = selection.selectAll("rect").data(data).enter();

const formatTooltip = (d: ComparisonData) =>
`${d.name}\nOld: ${d.oldValue.toFixed(2)}\nNew: ${d.newValue.toFixed(2)}`;

entries
.append("rect")
.attr("width", barWidth)
.attr("x", (d) => xScale(d.name)! + 0.5 * bandWidth - barWidth - 1)
.attr("height", (d) => barMaxHeight - yScale(d.oldValue)!)
.attr("y", (d) => yScale(d.oldValue)!)
.style("fill", COLOR_OLD);
//.style("stroke", "currentColor");
.style("fill", COLOR_OLD)
.style("stroke", "currentColor")
// Add hover tooltip
.append("svg:title")
.text(formatTooltip);

entries
.append("rect")
.attr("width", barWidth)
.attr("x", (d) => xScale(d.name)! + 0.5 * bandWidth + 1)
.attr("height", (d) => barMaxHeight - yScale(d.newValue)!)
.attr("y", (d) => yScale(d.newValue)!)
.style("fill", COLOR_NEW);
//.style("stroke", "currentColor");
.style("fill", COLOR_NEW)
.style("stroke", "currentColor")
// Add hover tooltip
.append("svg:title")
.text(formatTooltip);

// Add legend
const legendEntries: Array<[string, string]> = [
Expand Down
22 changes: 13 additions & 9 deletions src/pages/benchviz/visualizations/positive-negative-bar-graph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@ export function positiveNegativeBarGraph(
const minValue = d3.min(data.map((bm) => bm.value))!;
const maxValue = d3.max(data.map((bm) => bm.value))!;

const range = maxValue - minValue;

const yScale = d3
.scaleLinear()
.domain([minValue * 1.2, maxValue * 1.2])
.domain([minValue - 0.2 * range, maxValue + 0.2 * range])
.range([0, height - 10]);

const yAxis = d3.axisLeft(yScale);
Expand All @@ -29,7 +31,7 @@ export function positiveNegativeBarGraph(
.range([GRAPH_MARGIN.left, width - GRAPH_MARGIN.right]);

const bandWidth = xScale.bandwidth();
const barWidth = 25;
const barWidth = Math.min(25, (0.5 * width) / data.length);

const xAxis = d3.axisBottom(xScale);

Expand All @@ -40,25 +42,27 @@ export function positiveNegativeBarGraph(

selection.append("g").attr("transform", `translate(${GRAPH_MARGIN.left}, ${GRAPH_MARGIN.top})`).call(yAxis);

const barSize = (val: number) => Math.abs(height / 2 - yScale(val)!);
const barSize = (val: number) => Math.abs(yScale(0)! - yScale(val)!);

const bars = selection.selectAll("rect").data(data).enter();

bars.append("rect")
.attr("width", barWidth)
.attr("x", (d) => xScale(d.name)! + 0.5 * bandWidth - 0.5 * barWidth)
.attr("height", (d) => barSize(d.value) - 1)
.attr("y", (d) => (d.value > 0 ? height / 2 + 10 : height / 2 + 10 - barSize(d.value)))
.style("fill", (d) => (d.value > 0 ? "red" : "green"));
//.style("stroke", "currentColor");
.attr("height", (d) => barSize(d.value))
.attr("y", (d) => GRAPH_MARGIN.top + (d.value > 0 ? yScale(0)! : yScale(0)! - barSize(d.value)))
.style("fill", (d) => (d.value > 0 ? "red" : "green"))
.style("stroke", "currentColor")
// Add hover tooltip
.append("svg:title")
.text((d) => `${d.name}: ${d.value.toFixed(2)}%`);

bars.append("text")
.text((d) => `${d.value > 0 ? "+" : ""}${d.value.toFixed(2)}%`)
.attr("x", (d) => xScale(d.name)! + 0.5 * bandWidth)
.attr("y", (d) => (d.value > 0 ? height / 2 + barSize(d.value) + 30 : height / 2 - barSize(d.value)))
.attr("y", (d) => (d.value > 0 ? Math.max(yScale(0)! + 40, yScale(d.value)! + 20) : yScale(d.value)!))
.style("fill", "currentColor")
.style("text-anchor", "middle");
//.style("stroke", "currentColor");

return selection;
}
8 changes: 4 additions & 4 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ interface Feature {

const features: Feature[] = [
{
title: "Extend existing APIs",
title: "Declare and use existing APIs",
description: (
<>
This project is useful in any environment where Lua code is accepted, with the powerful option of simply
declaring any existing API using TypeScript declaration files.
This project is useful in any environment where Lua code is accepted, with the powerful option of
declaring types for any existing API using TypeScript declaration files.
</>
),
},
Expand All @@ -43,7 +43,7 @@ const features: Feature[] = [
];

const exampleSource = `
function onAbilityCast(this: void, caster: Unit, targetPos: Vector) {
function onAbilityCast(caster: Unit, targetPos: Vector) {
const units = findUnitsInRadius(targetPos, 500);

const enemies = units.filter(unit => caster.isEnemy(unit));
Expand Down