Detailed Comparison
@@ -467,6 +497,7 @@
Detailed Comparison
const missing_result_time = 300;
let selectors = {
+ "database": {},
"system": {},
"type": {},
"machine": {},
@@ -474,7 +505,7 @@
Detailed Comparison
"opensource": {"yes": true, "no": true},
"hardware": {"cpu": true, "gpu": false},
"tuned": {"no": true, "yes": false},
- "metric": "combined",
+ "metric": "hot",
"queries": [],
};
@@ -497,12 +528,30 @@
Detailed Comparison
/// Generate selectors
+let databases = document.getElementById('selectors_database');
let systems = document.getElementById('selectors_system');
let types = document.getElementById('selectors_type');
let machines = document.getElementById('selectors_machine');
let cluster_sizes = document.getElementById('selectors_cluster_size');
-let unique_systems = [... new Set(data.map(elem => elem.system))].sort((a, b) => a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}));
+function database(system_name) {
+ // Remove any parenthesized comments from the system name
+ // They only contain variations of the same DB and pollute the selectors
+ const base = system_name.replace(/\s*\([^)]*\)\s*$/, '');
+ const aliases = {
+ 'ClickHouse ☁️': 'ClickHouse',
+ 'Timescale ☁️': 'TimescaleDB',
+ };
+ return aliases[base] || base;
+}
+
+data.forEach(elem => { elem.database = database(elem.system); });
+additional_data_size_points.forEach(elem => { elem.database = database(elem.system); });
+
+const uniqueSorted = values => [... new Set(values)].sort((a, b) => a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}));
+
+let unique_databases = uniqueSorted(data.map(elem => elem.database));
+let all_systems = uniqueSorted(data.map(elem => elem.system));
function toggle(e, elem, selectors_map) {
selectors_map[elem] = !selectors_map[elem];
@@ -521,15 +570,36 @@
Detailed Comparison
updateHistory();
}
-unique_systems.map(elem => {
+unique_databases.map(elem => {
+ let selector = document.createElement('a');
+ selector.className = 'selector selector-active';
+ selector.appendChild(document.createTextNode(elem));
+ databases.appendChild(selector);
+ selectors.database[elem] = data.some(entry => entry.database == elem && !entry.hide);
+ selector.addEventListener('click', e => toggle(e, elem, selectors.database));
+
+ /// Highlighting summary rows and table columns on hovering over the database selector.
+ selector.addEventListener('mouseover', e => {
+ [...document.querySelectorAll('.summary-row')].map(row => {
+ row.className = row.dataset.database == elem ? 'summary-row summary-row-hilite' : 'summary-row' });
+ [...document.querySelectorAll('.th-entry')].map(th => {
+ th.className = th.dataset.database == elem ? 'th-entry th-entry-hilite' : 'th-entry' });
+ });
+ selector.addEventListener('mouseout', e => {
+ [...document.querySelectorAll('.summary-row')].map(row => { row.className = 'summary-row' });
+ [...document.querySelectorAll('.th-entry')].map(row => { row.className = 'th-entry' });
+ });
+});
+
+all_systems.map(elem => {
let selector = document.createElement('a');
selector.className = 'selector selector-active';
selector.appendChild(document.createTextNode(elem));
systems.appendChild(selector);
- selectors.system[elem] = data.some(entry => entry.system == elem && !entry.hide);
+ selectors.system[elem] = true;
selector.addEventListener('click', e => toggle(e, elem, selectors.system));
- /// Highlighting summary rows and table columns on hovering over the system selector.
+ /// Highlighting summary rows and table columns on hovering over the database selector.
selector.addEventListener('mouseover', e => {
[...document.querySelectorAll('.summary-row')].map(row => {
row.className = row.dataset.system == elem ? 'summary-row summary-row-hilite' : 'summary-row' });
@@ -640,6 +710,7 @@
Detailed Comparison
updateHistory();
});
+document.getElementById('select-all-databases').addEventListener('click', e => toggleAll(e, selectors.database));
document.getElementById('select-all-systems').addEventListener('click', e => toggleAll(e, selectors.system));
document.getElementById('select-all-types').addEventListener('click', e => toggleAll(e, selectors.type));
document.getElementById('select-all-machines').addEventListener('click', e => toggleAll(e, selectors.machine));
@@ -658,7 +729,8 @@
Detailed Comparison
selectors.queries = [...data[0].result.keys()].map(k => true);
function updateSelectors() {
- [...systems.childNodes].map(elem => { elem.className = selectors.system[elem.innerText] ? 'selector selector-active' : 'selector' });
+ [...databases.childNodes].map(elem => { elem.className = selectors.database[elem.innerText] ? 'selector selector-active' : 'selector' });
+ [...systems.childNodes].map(elem => { elem.className = selectors.system[elem.textContent] ? 'selector selector-active' : 'selector' });
[...types.childNodes].map(elem => { elem.className = selectors.type[elem.innerText] ? 'selector selector-active' : 'selector' });
[...machines.childNodes].map(elem => { elem.className = selectors.machine[elem.innerText] ? 'selector selector-active' : 'selector' });
[...cluster_sizes.childNodes].map(elem => { elem.className = selectors.cluster_size[elem.innerText] ? 'selector selector-active' : 'selector' });
@@ -691,6 +763,7 @@
Detailed Comparison
}
}
}
+ process('database', databases);
process('system', systems);
process('tags', types);
process('machine', machines);
@@ -814,6 +887,7 @@
Detailed Comparison
tr.className = 'summary-row';
tr.dataset.system = elem.system;
+ tr.dataset.database = elem.database;
let td_name = document.createElement('td');
td_name.className = 'summary-name';
@@ -928,6 +1002,7 @@
Detailed Comparison
clearElement(details_body);
let filtered_data = data.filter(elem =>
+ selectors.database[elem.database] &&
selectors.system[elem.system] &&
selectors.machine[elem.machine] &&
selectors.cluster_size[elem.cluster_size] &&
@@ -990,6 +1065,7 @@
Detailed Comparison
th.appendChild(document.createTextNode(`${elem.system}\n(${Number.isInteger(elem.cluster_size) && elem.cluster_size > 1 ? elem.cluster_size + '×': ''}${elem.machine})`));
th.className = 'th-entry';
th.dataset.system = elem.system;
+ th.dataset.database = elem.database;
details_head.appendChild(th);
});
@@ -1179,14 +1255,17 @@
Detailed Comparison
return decoded;
}
-function updateHistory() {
- history.pushState(selectors, '',
- window.location.pathname + (window.location.search || '') + '#' + encodeState(selectors));
-}
-
-window.onpopstate = function(event) {
- if (!event.state) { return; }
- selectors = event.state;
+function addMissingSelectors() {
+ if (!selectors.database) {
+ selectors.database = {};
+ if (selectors.system) {
+ const selected_databases = new Set(
+ data.filter(elem => selectors.system[elem.system]).map(elem => elem.database));
+ unique_databases.forEach(k => { selectors.database[k] = selected_databases.has(k) });
+ } else {
+ unique_databases.forEach(k => { selectors.database[k] = true });
+ }
+ }
if (!selectors.opensource) {
selectors.opensource = {"yes": true, "no": false};
}
@@ -1196,6 +1275,17 @@
Detailed Comparison
if (!selectors.tuned) {
selectors.tuned = {"no": true, "yes": false};
}
+}
+
+function updateHistory() {
+ history.pushState(selectors, '',
+ window.location.pathname + (window.location.search || '') + '#' + encodeState(selectors));
+}
+
+window.onpopstate = function(event) {
+ if (!event.state) { return; }
+ selectors = event.state;
+ addMissingSelectors();
updateSelectors();
render();
};
@@ -1203,15 +1293,7 @@
Detailed Comparison
if (window.location.hash) {
try {
selectors = decodeState(decodeURIComponent(window.location.hash.substring(1)));
- if (!selectors.opensource) {
- selectors.opensource = {"yes": true, "no": false};
- }
- if (!selectors.hardware) {
- selectors.hardware = {"cpu": true, "gpu": false};
- }
- if (!selectors.tuned) {
- selectors.tuned = {"no": true, "yes": false};
- }
+ addMissingSelectors();
} catch {}
}
diff --git a/versions/index.html b/versions/index.html
index 3923323b0..4fd5224ca 100644
--- a/versions/index.html
+++ b/versions/index.html
@@ -91,7 +91,7 @@
}
.selectors-container {
- padding: 2rem 0 2rem 0;
+ padding: 1rem 0 2rem 0;
user-select: none;
}
@@ -111,6 +111,7 @@
color: var(--selector-text-color);
border: 0.2rem solid var(--background-color);
border-radius: 0.5rem;
+ cursor: pointer;
}
.selector-active {
@@ -164,6 +165,16 @@
white-space: nowrap;
}
+ #summary-table {
+ width: 100%;
+ height: 45vh;
+ overflow-y: scroll;
+ scrollbar-gutter: stable;
+ padding-right: 1rem;
+ margin-top: 1.5rem;
+ margin-bottom: 1rem;
+ }
+
th {
padding-bottom: 0.5rem;
}
@@ -490,6 +501,21 @@
ClickHouse Versions Benchmark
Source |
Report Mistake |
Benchmark For Analytical DBMS |
Hardware Benchmark
+