@@ -163,9 +163,8 @@ function render_timing_graph() {
163
163
for (c of CONCURRENCY_DATA) {
164
164
max_v = Math.max(max_v, c.active, c.waiting, c.inactive);
165
165
}
166
- let [step, top] = split_ticks(max_v, GRAPH_HEIGHT / MIN_TICK_DIST);
167
- let num_ticks = top / step;
168
- let tick_dist = GRAPH_HEIGHT / num_ticks;
166
+ const px_per_v = GRAPH_HEIGHT / max_v;
167
+ const {step, tick_dist, num_ticks} = split_ticks(max_v, px_per_v, GRAPH_HEIGHT);
169
168
ctx.textAlign = 'end';
170
169
for (n=0; n<num_ticks; n++) {
171
170
let y = HEIGHT - Y_LINE - ((n + 1) * tick_dist);
@@ -299,7 +298,7 @@ function draw_graph_axes(id, graph_height) {
299
298
// 4096 is still ridiculously large, and probably won't render on mobile
300
299
// browsers, but should be ok for many desktop environments.
301
300
const graph_width = Math.min(scale * DURATION, 4096);
302
- const px_per_sec = Math.floor( graph_width / DURATION) ;
301
+ const px_per_sec = graph_width / DURATION;
303
302
const canvas_width = Math.max(graph_width + X_LINE + 30, X_LINE + 250);
304
303
const canvas_height = graph_height + MARGIN + Y_LINE;
305
304
let ctx = setup_canvas(id, canvas_width, canvas_height);
@@ -318,9 +317,7 @@ function draw_graph_axes(id, graph_height) {
318
317
ctx.stroke();
319
318
320
319
// Draw X tick marks.
321
- const [step, top] = split_ticks(DURATION, graph_width / MIN_TICK_DIST);
322
- const num_ticks = top / step;
323
- const tick_dist = graph_width / num_ticks;
320
+ const {step, tick_dist, num_ticks} = split_ticks(DURATION, px_per_sec, graph_width);
324
321
ctx.fillStyle = '#303030';
325
322
for (let n=0; n<num_ticks; n++) {
326
323
const x = X_LINE + ((n + 1) * tick_dist);
@@ -347,40 +344,39 @@ function draw_graph_axes(id, graph_height) {
347
344
return {canvas_width, canvas_height, graph_width, graph_height, ctx, px_per_sec};
348
345
}
349
346
350
- function round_up(n, step) {
351
- if (n % step == 0) {
352
- return n;
353
- } else {
354
- return (step - n % step) + n;
347
+ // Determine the spacing and number of ticks along an axis.
348
+ function split_ticks(max_value, px_per_v, max_px) {
349
+ const max_ticks = Math.floor(max_px / MIN_TICK_DIST);
350
+ if (max_ticks <= 1) {
351
+ // Graph is too small for even 1 tick.
352
+ return {step: max_value, tick_dist: max_px, num_ticks: 1};
355
353
}
356
- }
357
-
358
- // Determine the `(step, max_value)` of the number of ticks along an axis.
359
- function split_ticks(n, max_ticks) {
360
- max_ticks = Math.ceil(max_ticks);
361
- if (n <= max_ticks) {
362
- return [1, n];
363
- } else if (n <= max_ticks * 2) {
364
- return [2, round_up(n, 2)];
365
- } else if (n <= max_ticks * 4) {
366
- return [4, round_up(n, 4)];
367
- } else if (n <= max_ticks * 5) {
368
- return [5, round_up(n, 5)];
354
+ let step;
355
+ if (max_value <= max_ticks) {
356
+ step = 1;
357
+ } else if (max_value <= max_ticks * 2) {
358
+ step = 2;
359
+ } else if (max_value <= max_ticks * 4) {
360
+ step = 4;
361
+ } else if (max_value <= max_ticks * 5) {
362
+ step = 5;
369
363
} else {
370
- let step = 10;
364
+ step = 10;
371
365
let count = 0;
372
366
while (true) {
373
367
if (count > 100) {
374
368
throw Error("tick loop too long");
375
369
}
376
370
count += 1;
377
- let top = round_up(n, step);
378
- if (top <= max_ticks * step) {
379
- return [step, top];
371
+ if (max_value <= max_ticks * step) {
372
+ break;
380
373
}
381
374
step += 10;
382
375
}
383
376
}
377
+ const tick_dist = px_per_v * step;
378
+ const num_ticks = Math.floor(max_value / step);
379
+ return {step, tick_dist, num_ticks};
384
380
}
385
381
386
382
function codegen_time(unit) {
0 commit comments