// ==UserScript==
// @name         Grafana Improve
// @namespace    https://xcodest.me/
// @version      0.4.3
// @description  Better grafana view
// @author       Jeffrey4l
// @match        *://localhost:3000/*
// @icon         https://grafana.com/static/assets/img/fav32.png
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant        GM_addStyle
// @homePage     https://gist.github.com/jeffrey4l/6d7c7ccdbb2c7493ddb9a20f81b929a9
// @updateURL    https://gist.github.com/jeffrey4l/6d7c7ccdbb2c7493ddb9a20f81b929a9/raw/d9dc114f0038e3c21d77c390eceb04f05c3e14b0/grafana-improve.user.js
// ==/UserScript==



window.addEventListener('load', function() {
    'use strict';
    var font_name = `"Ubuntu Mono", monospace`;
    var font_size = "14px";
    var custom_style = `
.submenu-controls{
  padding: 4px 0;
}
.scrollbar-view > div > section {
  position: fixed;
  z-index: 999;
  background-color: white;
  width: 100%;
}
.graph-tooltip {
  font-family: ${font_name};
  font-weight: 500;
  font-size: ${font_size};
}
.graph-tooltip > .graph-tooltip-list-item--highlight {
  font-weight: 800;
}
.panel-title > h1,
.panel-title > h2,
.panel-title > h3,
.panel-title > h4,
.panel-title > h5
{
  font-family: ${font_name};
  font-weight: 500;
}
.graph-legend-series {
  font-family: ${font_name};
  font-size: ${font_size};
}
.variable-link-wrapper{
  font-family: ${font_name};
  font-size: ${font_size};
}`;

    GM_addStyle(custom_style)
    waitForKeyElements (".submenu-controls", function(){
        var nav_height = $(".scrollbar-view>div>section").height();
        $(".react-grid-layout").css("margin-top", `${nav_height+8}px`);
    });
})