Skip to content

Commit 1536229

Browse files
author
Maxim Egorushkin
committed
Chart styling improvements.
1 parent d196942 commit 1536229

File tree

3 files changed

+93
-82
lines changed

3 files changed

+93
-82
lines changed

‎html/benchmarks.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ <h3 class="view-toggle">Scalability on AMD Ryzen 9 5950X</h3><div class="chart"
3434

3535
<h1 class="view-toggle">Latency Benchmark</h1>
3636
<div>
37-
<p>One thread posts a 4-byte integer to another thread through one queue and waits for a reply from another queue (2 queues in total). The benchmark measures the total time of 100,000 ping-pongs, best of 10 runs. Contention is minimal here (1-producer-1-consumer, 1 element in the queue) to be able to achieve and measure the lowest latency. Reports the average round-trip time, i.e. the time it takes to post a message to another thread and receive a reply. The minimum, maximum, mean and standard deviation of at least 33 runs are reported in the tooltip, the error bars are ±1 standard deviation.</p>
37+
<p>One thread posts a 4-byte integer to another thread through one queue and waits for a reply from another queue (2 queues in total). The benchmark measures the total time of 100,000 ping-pongs, best of 10 runs. Contention is minimal here (1-producer-1-consumer, 1 element in the queue) to be able to achieve and measure the lowest latency. Reports the average round-trip time, i.e. the time it takes to post a message to another thread and receive a reply. The minimum, maximum, mean and standard deviation of at least 33 runs are reported in the tooltip, the error bars are ±1 standard deviation. The boxplot displays minimum, mean-stdev, mean, mean+stdev, maximum.</p>
3838
<h3 class="view-toggle">Latency on Intel i9-9900KS</h3><div class="chart" id="latency-9900KS-5GHz"></div>
3939
<h3 class="view-toggle">Latency on AMD Ryzen 7 5825U</h3><div class="chart" id="latency-ryzen-5825u"></div>
4040
<h3 class="view-toggle">Latency on Intel Xeon Gold 6132</h3><div class="chart" id="latency-xeon-gold-6132"></div>

‎html/benchmarks.js‎

Lines changed: 75 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -35,24 +35,21 @@ $(function() {
3535
"OptimistAtomicQueueB2": ['#FFBFBF', 18]
3636
};
3737

38-
// function getSeriesColor(s) {
39-
// const c = s[0];
40-
// return c?.pattern?.color ?? c;
41-
// }
38+
// function getSeriesColor(c) { return c?.pattern?.color ?? c; }
4239

43-
function fmt(v) {
40+
function prec0(v) {
4441
return Highcharts.numberFormat(v, 0);
4542
}
4643

4744
function plot_scalability(div_id, results, max_lin, max_log) {
4845
const modes = [
4946
{
5047
yAxis: { type: 'linear', title: { text: 'throughput, msg/sec (linear scale)' }, max: max_lin, min: 0 },
51-
subtitle: {text: 'click on the chart background to switch to logarithmic scale'},
48+
subtitle: {text: 'tap the chart background to switch to logarithmic scale'},
5249
},
5350
{
5451
yAxis: { type: 'logarithmic', title: { text: 'throughput, msg/sec (logarithmic scale)' }, max: max_log, min: 100e3 },
55-
subtitle: {text: 'click on the chart background to switch to linear scale'},
52+
subtitle: {text: 'tap the chart background to switch to linear scale'},
5653
}
5754
];
5855
let mode = 0;
@@ -85,7 +82,7 @@ $(function() {
8582

8683
const data = [];
8784
for(const p of this.points) {
88-
const [n_threads, min, max, mean, stdev] = p.series.options.atomic_queue_stats[p.point.index].map(fmt);
85+
const [n_threads, min, max, mean, stdev] = p.series.options.atomic_queue_stats[p.point.index].map(prec0);
8986
data[p.series.options.index] = {
9087
name: p.series.name,
9188
color: p.series.color,
@@ -122,7 +119,10 @@ $(function() {
122119
title: { text: 'number of producers, number of consumers' },
123120
tickInterval: 1
124121
},
125-
tooltip: { formatter: tooltip_formatter },
122+
tooltip: {
123+
formatter: tooltip_formatter,
124+
shared: true,
125+
},
126126
});
127127
}
128128

@@ -139,72 +139,78 @@ $(function() {
139139
},
140140
tooltip: {
141141
formatter: function() {
142-
const [min, max, mean, stdev] = this.series.options.atomic_queue_stats.map(fmt);
143-
return `<strong>mean: ${mean} stdev: ${stdev}</strong> min: ${min} max: ${max}<br/>`;
142+
const s = this.series;
143+
const [min, max, mean, stdev] = s.options.atomic_queue_stats.map(prec0);
144+
return `<strong style="color: ${s.color}">${s.name}: </strong> mean: ${mean} stdev: ${stdev}</strong> min: ${min} max: ${max}<br/>`;
144145
}
145146
},
146147
};
147-
function plot_latency(div_id, results) {
148-
function chartData(chartType) {
149-
if (chartType === 'boxplot') {
150-
const series = [];
151-
for(const [name, s] of Object.entries(settings)) {
152-
let stats = results[name];
153-
if(!stats)
154-
continue;
155-
const [color, index] = s;
156-
const [min, max, mean, stdev] = stats;
157-
const q1 = mean - stdev;
158-
const q3 = mean + stdev;
159-
series.push({
160-
name: name,
161-
color: color,
162-
medianColor: color,
163-
type: 'boxplot',
164-
data: [[index, min, q1, mean, q3, max]],
165-
atomic_queue_stats: stats,
166-
});
167-
}
168-
return {
169-
series: series,
170-
subtitle: { text: 'click on the chart background to switch to bar chart view' },
171-
chart: {
172-
inverted: true,
173-
events: { click: createChart.bind(null, "bar") }
174-
},
175-
};
176-
} else {
177-
const series = [];
178-
for(const [name, s] of Object.entries(settings)) {
179-
let stats = results[name];
180-
if(!stats)
181-
continue;
182-
const [color, index] = s;
183-
const mean = stats[2];
184-
const stdev = stats[3];
185-
series.push({
186-
name: name,
187-
color: color,
188-
type: 'bar',
189-
data: [[index, mean]],
190-
atomic_queue_stats: stats,
191-
});
192-
series.push({
193-
name: `${s.name} StdDev`,
194-
type: 'errorbar',
195-
data: [[index, mean - stdev, mean + stdev]],
196-
});
197-
}
198-
return {
199-
series: series,
200-
subtitle: { text: 'click on the chart background to switch to boxplot view' },
201-
chart: { events: { click: createChart.bind(null, "boxplot") } },
202-
};
148+
149+
const latencyViewOptions = {
150+
boxplot: function(results, createChartFn) {
151+
const series = [];
152+
for(const [name, s] of Object.entries(settings)) {
153+
let stats = results[name];
154+
if(!stats)
155+
continue;
156+
const [color, index] = s;
157+
// const color2 = getSeriesColor(color);
158+
const [min, max, mean, stdev] = stats;
159+
const q1 = Math.max(min, mean - stdev);
160+
const q3 = Math.min(max, mean + stdev);
161+
series.push({
162+
name: name,
163+
color: color,
164+
fillColor: color,
165+
type: 'boxplot',
166+
data: [[index, min, q1, mean, q3, max]],
167+
atomic_queue_stats: stats,
168+
});
203169
}
204-
};
170+
return {
171+
series: series,
172+
subtitle: { text: 'tap the chart background to switch to bars' },
173+
chart: {
174+
inverted: true,
175+
events: { click: createChartFn.bind(null, "bar") }
176+
},
177+
};
178+
},
205179

180+
bar: function(results, createChartFn) {
181+
const series = [];
182+
for(const [name, s] of Object.entries(settings)) {
183+
let stats = results[name];
184+
if(!stats)
185+
continue;
186+
const [color, index] = s;
187+
const mean = stats[2];
188+
const stdev = stats[3];
189+
series.push({
190+
name: name,
191+
color: color,
192+
type: 'bar',
193+
data: [[index, mean]],
194+
atomic_queue_stats: stats,
195+
});
196+
series.push({
197+
name: `${s.name} StdDev`,
198+
type: 'errorbar',
199+
data: [[index, mean - stdev, mean + stdev]],
200+
});
201+
}
202+
return {
203+
series: series,
204+
subtitle: { text: 'tap the chart background to switch to boxplots' },
205+
chart: { events: { click: createChartFn.bind(null, "boxplot") } },
206+
};
207+
}
208+
};
209+
210+
function plot_latency(div_id, results) {
206211
function createChart(chartType) {
207-
Highcharts.chart(div_id, $.extend(true, chartData(chartType), latencyChartOptions));
212+
const viewOptions = latencyViewOptions[chartType](results, createChart);
213+
Highcharts.chart(div_id, $.extend(true, viewOptions, latencyChartOptions));
208214
};
209215
createChart("bar");
210216
};

‎html/theme.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,28 +26,34 @@ Highcharts.theme = {
2626
yAxis: theme_axis,
2727
tooltip: {
2828
followPointer: true,
29-
shared: true,
3029
useHTML: true,
31-
backgroundColor: 'rgba(0, 0, 0, 0.85)',
30+
backgroundColor: 'rgba(0, 0, 0, 0.8)',
3231
borderWidth: 1,
33-
borderColor: 'white',
32+
borderColor: 'rgba(255, 255, 255, 0.5)',
3433
style: { color: 'white' }
3534
},
3635
plotOptions: {
3736
series: {
3837
pointPadding: 0.2,
39-
groupPadding: 0.1,
38+
groupPadding: 0,
4039
borderWidth: 0,
4140
animationLimit: Infinity,
42-
shadow: true,
41+
// inactiveOtherPoints: false,
42+
stickyTracking: false,
43+
states: {
44+
inactive: {
45+
// enabled: true,
46+
opacity: 0.3,
47+
},
48+
}
4349
},
4450
boxplot: {
45-
fillColor: 'rgba(0, 0, 0, 0)',
51+
medianColor: 'black',
4652
grouping: false,
47-
lineWidth: 2,
48-
stemDashStyle: 'solid',
53+
lineWidth: 1,
4954
stemWidth: 1,
5055
whiskerWidth: 3,
56+
borderWidth: 0,
5157
},
5258
column: {
5359
borderWidth: 0
@@ -60,19 +66,18 @@ Highcharts.theme = {
6066
stemWidth: 1,
6167
whiskerLength: 3,
6268
lineWidth: 1,
63-
dashStyle: 'Solid',
6469
enableMouseTracking: false,
6570
showInLegend: false,
6671
color: "#aaa",
6772
},
6873
},
6974
legend: {
7075
layout: 'horizontal',
71-
align: 'center',
76+
align: 'left',
7277
verticalAlign: 'bottom',
73-
itemStyle: { color: '#ccc' },
78+
itemStyle: { color: '#eee' },
7479
itemHoverStyle: { color: 'white' },
75-
itemHiddenStyle: { color: '#606060' }
80+
itemHiddenStyle: { color: '#888' }
7681
},
7782
lang: { thousandsSep: ',' },
7883
credits: { enabled: false },

0 commit comments

Comments
 (0)