thevar1able/ClickHouse
1
0
Fork 0
mirror of https://github.com/ClickHouse/ClickHouse.git synced 2024-11-29 02:52:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard: development

Browse Source
This commit is contained in:
Alexey Milovidov 2022-08-01 00:23:38 +02:00
parent 36f69109ed
commit ff12e5805f
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
utils/dashboard.html
View File

@ -9,8 +9,7 @@
<style> <style>
:root { :root {
--color: black; --color: black;
--background-gradient-start: #00CCFF; --background: linear-gradient(to bottom, #00CCFF, #00D0D0);
--background-gradient-end: #00D0D0;
--chart-background: white; --chart-background: white;
--shadow-color: rgba(0, 0, 0, 0.25); --shadow-color: rgba(0, 0, 0, 0.25);
--input-shadow-color: rgba(0, 255, 0, 1); --input-shadow-color: rgba(0, 255, 0, 1);
@ -32,8 +31,7 @@
[data-theme="dark"] { [data-theme="dark"] {
--color: white; --color: white;
--background-gradient-start: #151C2C; --background: #151C2C;
--background-gradient-end: #151C2C;
--chart-background: #1b2834; --chart-background: #1b2834;
--shadow-color: rgba(0, 0, 0, 0); --shadow-color: rgba(0, 0, 0, 0);
--input-shadow-color: rgba(255, 128, 0, 0.25); --input-shadow-color: rgba(255, 128, 0, 0.25);
@ -65,7 +63,7 @@
font-family: Liberation Sans, DejaVu Sans, sans-serif, Noto Color Emoji, Apple Color Emoji, Segoe UI Emoji; font-family: Liberation Sans, DejaVu Sans, sans-serif, Noto Color Emoji, Apple Color Emoji, Segoe UI Emoji;
padding: 1rem; padding: 1rem;
overflow-x: hidden; overflow-x: hidden;
background: linear-gradient(to bottom, var(--background-gradient-start), var(--background-gradient-end)); background: var(--background);
display: grid; display: grid;
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: fit-content(10%) auto; grid-template-rows: fit-content(10%) auto;
@ -286,7 +284,7 @@
</body> </body>
<script> <script>
const queries = [ let queries = [
{ title: "Weekly Unique Comment Authors", query: { title: "Weekly Unique Comment Authors", query:
`SELECT toMonday(created_at)::DateTime::INT AS t, uniq(actor_login) AS authors `SELECT toMonday(created_at)::DateTime::INT AS t, uniq(actor_login) AS authors
FROM github_events FROM github_events
@ -339,7 +337,6 @@ ORDER BY t`},
let params = { let params = {
start: '2015-01-01', start: '2015-01-01',
repo: 'ClickHouse/ClickHouse', repo: 'ClickHouse/ClickHouse',
//word2: 'Coronavirus',
}; };
let theme = 'light'; let theme = 'light';
@ -360,7 +357,7 @@ let plots = queries.map(e => null);
/// This is not quite correct (we cannot really parse SQL with regexp) but tolerable. /// This is not quite correct (we cannot really parse SQL with regexp) but tolerable.
const query_param_regexp = /\{(\w+):[^}]+\}/g; const query_param_regexp = /\{(\w+):[^}]+\}/g;
/// Automatically parse more parameters from queires. /// Automatically parse more parameters from the queries.
function findParamsInQuery(query) { function findParamsInQuery(query) {
for (let match of query.matchAll(query_param_regexp)) { for (let match of query.matchAll(query_param_regexp)) {
const name = match[1]; const name = match[1];
@ -657,6 +654,8 @@ async function draw(idx, chart, url_params, query) {
? ["#F88", "#FEE", "#EED", "#2c3235"] ? ["#F88", "#FEE", "#EED", "#2c3235"]
: ["#864", "#045", "#2c3235", "#c7d0d9"]; : ["#864", "#045", "#2c3235", "#c7d0d9"];
let sync = uPlot.sync("sync");
const opts = { const opts = {
width: chart.clientWidth, width: chart.clientWidth,
height: chart.clientHeight, height: chart.clientHeight,
@ -669,10 +668,16 @@ async function draw(idx, chart, url_params, query) {
series: [ { label: "x" }, series: [ { label: "x" },
{ label: "y", stroke: line_color, fill: fill_color } ], { label: "y", stroke: line_color, fill: fill_color } ],
padding: [ null, null, null, (Math.floor(Math.log10(Math.max(...data[1]))) + Math.floor(Math.log10(Math.max(...data[1])) / 3)) * 6 - 10 ], padding: [ null, null, null, (Math.floor(Math.log10(Math.max(...data[1]))) + Math.floor(Math.log10(Math.max(...data[1])) / 3)) * 6 - 10 ],
plugins: [ legendAsTooltipPlugin() ] plugins: [ legendAsTooltipPlugin() ],
cursor: {
sync: {
key: "sync",
}
}
}; };
plots[idx] = new uPlot(opts, data, chart); plots[idx] = new uPlot(opts, data, chart);
sync.sub(plots[idx]);
/// Set title /// Set title
const title = queries[idx].title.replaceAll(/\{(\w+)\}/g, (_, name) => params[name] ); const title = queries[idx].title.replaceAll(/\{(\w+)\}/g, (_, name) => params[name] );