Skip to content

Commit a54c416

Browse files
author
Maxim Egorushkin
committed
Chart options unduplicated.
1 parent 1cbe3cf commit a54c416

File tree

1 file changed

+53
-71
lines changed

1 file changed

+53
-71
lines changed

‎html/benchmarks.js‎

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

38-
function getCleanColor(colorValue) {
39-
return colorValue?.pattern?.color ?? colorValue;
38+
function getSeriesColor(s) {
39+
const c = s[0];
40+
return c?.pattern?.color ?? c;
4041
}
4142

4243
function plot_scalability(div_id, results, max_lin, max_log) {
@@ -72,28 +73,19 @@ $(function() {
7273
name: `${name} StdDev`,
7374
type: 'errorbar',
7475
data: stats.map(a => [a[0], a[3] - a[4], a[3] + a[4]]),
75-
stemWidth: 1,
76-
whiskerLength: 6,
77-
lineWidth: 1,
78-
dashStyle: 'Solid',
79-
enableMouseTracking: false,
80-
showInLegend: false,
81-
color: "#adb5bd",
8276
linkedTo: `column-${name}`
8377
}
8478
});
8579

8680
const tooltips = [];
8781
const tooltip_formatter = function() {
88-
const threads = this.x;
89-
const tooltip = tooltips[threads];
82+
const n_threads = this.x;
83+
const tooltip = tooltips[n_threads];
9084
if(tooltip)
9185
return tooltip;
9286

9387
const data = [];
9488
for(const p of this.points) {
95-
if (p.series.type === 'errorbar')
96-
continue;
9789
const stats = p.series.options.atomic_queue_stats[p.point.index];
9890
data[p.series.options.index] = {
9991
name: p.series.name,
@@ -105,8 +97,8 @@ $(function() {
10597
};
10698
}
10799
const tbody = data.reduce((s, d) => d ? s + `<tr><td style="color: ${d.color}">${d.name}: </td><td><strong>${d.mean}</strong></td><td><strong>${d.stdev}</strong></td><td>${d.min}</td><td>${d.max}</td></tr>` : s, "");
108-
return tooltips[threads] = `
109-
<span class="tooltip_scalability_title">${threads} producers, ${threads} consumers</span>
100+
return tooltips[n_threads] = `
101+
<span class="tooltip_scalability_title">${n_threads} producers, ${n_threads} consumers</span>
110102
<table class="tooltip_scalability">
111103
<tr><th></th><th>mean</th><th>stdev</th><th>min</th><th>max</th></tr>
112104
${tbody}
@@ -115,47 +107,49 @@ $(function() {
115107
};
116108

117109
Highcharts.chart(div_id, {
110+
title: { text: undefined },
111+
series: [...columnSeries, ...errorBarSeriesStdev],
112+
plotOptions: {
113+
errorbar: {
114+
stemWidth: 1,
115+
// whiskerLength: 6,
116+
lineWidth: 1,
117+
dashStyle: 'Solid',
118+
enableMouseTracking: false,
119+
showInLegend: false,
120+
color: "#a0a0a0",
121+
}
122+
},
118123
chart: {
119124
events: {
120125
click: function() {
121-
mode ^= 1;
122-
const m = modes[mode];
126+
const m = modes[mode ^= 1];
123127
this.yAxis[0].update(m.yAxis);
124-
// this.subtitle.update(m.subtitle);
125128
this.subtitle.update(m.subtitle);
126129
}
127130
}
128131
},
129-
130-
title: { text: undefined },
131132
subtitle: modes[0].subtitle,
133+
yAxis: modes[0].yAxis,
132134
xAxis: {
133135
title: { text: 'number of producers, number of consumers' },
134136
tickInterval: 1
135137
},
136-
yAxis: modes[0].yAxis,
137138
tooltip: {
138139
followPointer: true,
139140
shared: true,
140141
useHTML: true,
141142
formatter: tooltip_formatter
142143
},
143-
series: [...columnSeries, ...errorBarSeriesStdev],
144144
});
145145
}
146146

147147
function plot_latency(div_id, results) {
148148
function createChart(chartType) {
149149
const chartOptions = {
150-
title: { text: undefined },
151150
legend: { enabled: true },
152-
title: { text: 'latency, nanoseconds/round-trip' },
153-
xAxis: {
154-
categories: Object.keys(results),
155-
},
156-
yAxis: {
157-
title: { text: 'latency, nanoseconds/round-trip' },
158-
},
151+
xAxis: { categories: Object.keys(results) },
152+
yAxis: { title: { text: 'latency, nanoseconds/round-trip' } },
159153
tooltip: {
160154
followPointer: true,
161155
shared: true,
@@ -167,14 +161,13 @@ $(function() {
167161
const series = Object.entries(results).map(entry => {
168162
const [name, stats] = entry;
169163
const s = settings[name];
170-
const seriesColor = getCleanColor(s[0]);
164+
const seriesColor = getSeriesColor(s);
171165
const min = stats[0];
172166
const max = stats[1];
173167
const mean = stats[2];
174168
const stdev = stats[3];
175-
176-
const q1 = Math.max(min, mean - 0.675 * stdev);
177-
const q3 = Math.min(max, mean + 0.675 * stdev);
169+
const q1 = mean - stdev;
170+
const q3 = mean + stdev;
178171

179172
return {
180173
name: name,
@@ -183,31 +176,30 @@ $(function() {
183176
type: 'boxplot',
184177
data: [[min, q1, mean, q3, max]],
185178
atomic_queue_stats: stats,
186-
fillColor: '#000000',
187-
lineWidth: 2,
188179
lineColor: seriesColor,
189180
medianColor: seriesColor,
190-
medianWidth: 3,
191181
stemColor: seriesColor,
192-
stemDashStyle: 'solid',
193-
stemWidth: 1,
194182
whiskerColor: seriesColor,
195-
whiskerLength: '50%',
196-
whiskerWidth: 2
197183
};
198184
});
199185
series.sort((a, b) => a.index - b.index);
200186

201187
Highcharts.chart(div_id, $.extend(true, {
202188
series: series,
203-
subtitle: { text: 'click on the chart background to switch to bar chart view' },
204-
chart: {
205-
events: {
206-
click: function () {
207-
createChart("bar");
208-
}
189+
plotOptions: {
190+
boxplot: {
191+
fillColor: '#000000',
192+
lineWidth: 2,
193+
medianWidth: 3,
194+
stemDashStyle: 'solid',
195+
stemWidth: 1,
196+
// whiskerLength: '50%',
197+
whiskerWidth: 2
209198
}
210199
},
200+
subtitle: { text: 'click on the chart background to switch to bar chart view' },
201+
title: { text: undefined },
202+
chart: { events: { click: createChart.bind(null, "bar") } },
211203
xAxis: {
212204
labels: {
213205
enabled: false
@@ -261,45 +253,35 @@ $(function() {
261253
name: `${s.name} StdDev`,
262254
type: 'errorbar',
263255
data: [[s.index, mean - stdev, mean + stdev]],
264-
stemWidth: 1,
265-
whiskerLength: 6,
266-
lineWidth: 1,
267-
dashStyle: 'Solid',
268-
enableMouseTracking: false,
269-
showInLegend: false,
270-
color: "#adb5bd",
271256
linkedTo: s.id
272257
};
273258
});
274259

275260
Highcharts.chart(div_id, $.extend(true, {
276261
series: [...barSeries, ...errorBarSeriesStdev],
277-
278-
subtitle: { text: 'click on the chart background to switch to boxplot view' },
279-
chart: {
280-
events: {
281-
click: function () {
282-
createChart("boxplot");
283-
}
284-
}
285-
},
286-
xAxis: {
287-
labels: {
288-
rotation: 0
289-
}
290-
},
291262
plotOptions: {
292-
series: { stacking: 'normal' }
263+
series: { stacking: 'normal' },
264+
errorbar: {
265+
stemWidth: 1,
266+
// whiskerLength: 6,
267+
lineWidth: 1,
268+
dashStyle: 'Solid',
269+
enableMouseTracking: false,
270+
showInLegend: false,
271+
color: "#a0a0a0",
272+
}
293273
},
274+
title: { text: undefined },
275+
subtitle: { text: 'click on the chart background to switch to boxplot view' },
276+
chart: { events: { click: createChart.bind(null, "boxplot") } },
277+
xAxis: { labels: { rotation: 0 } },
294278
yAxis: {
295279
max: 1000,
296280
tickInterval: 100,
297281
},
298282
tooltip: {
299283
formatter: function() {
300284
const stats = this.series.options.atomic_queue_stats;
301-
if (!stats)
302-
return;
303285
const min = Highcharts.numberFormat(stats[0], 0);
304286
const max = Highcharts.numberFormat(stats[1], 0);
305287
const mean = Highcharts.numberFormat(stats[2], 0);

0 commit comments

Comments
 (0)