diff --git a/src/pages/benchviz/Benchmark.tsx b/src/pages/benchviz/Benchmark.tsx index b941ba04..8f956186 100644 --- a/src/pages/benchviz/Benchmark.tsx +++ b/src/pages/benchviz/Benchmark.tsx @@ -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 @@ -53,7 +53,7 @@ function BenchmarkCategory({ // 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 ( @@ -133,7 +133,7 @@ export default function Benchmark() { bm.time} + extractValue={(bm) => bm.time * 1000} formatValue={formatTime} /> diff --git a/src/pages/benchviz/visualizations/bar-comparison-graph.ts b/src/pages/benchviz/visualizations/bar-comparison-graph.ts index 5640f785..7195e232 100644 --- a/src/pages/benchviz/visualizations/bar-comparison-graph.ts +++ b/src/pages/benchviz/visualizations/bar-comparison-graph.ts @@ -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); @@ -47,14 +47,20 @@ 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") @@ -62,8 +68,11 @@ export function barComparisonGraph( .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]> = [ diff --git a/src/pages/benchviz/visualizations/positive-negative-bar-graph.ts b/src/pages/benchviz/visualizations/positive-negative-bar-graph.ts index 7a401ce6..11dc4f8b 100644 --- a/src/pages/benchviz/visualizations/positive-negative-bar-graph.ts +++ b/src/pages/benchviz/visualizations/positive-negative-bar-graph.ts @@ -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); @@ -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); @@ -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; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 613fa611..e4738e9d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -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. ), }, @@ -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));