diff options
author | Jacek Kolasa <jacek.kolasa@gmail.com> | 2019-08-28 18:58:04 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-08-28 18:58:04 +0300 |
commit | cb888d11a6346778a4a7bfbffcc5ec55478814d6 (patch) | |
tree | 25df1fbe34542bcdee50a233bbfd968839c89e7b /web/gui/src/dashboard.js/charting/dygraph.js | |
parent | e972d27c5496ef3a9b7b9c3af2ce0e916e74f600 (diff) |
History tips (#6711)
* split sidebar note into multilines (just in code)
* note in sidebar - grammatical fixes, added history tip
* add history tip in dygraph chart, on the left side, when panned beyond its available past
* bundled/compiled dashboard.js
* invisible left side of history-tip was preventing further panning to the past, fix that
* change history link from "https://docs.netdata.cloud/daemon/config/#global-section-options" to
"https://docs.netdata.cloud/docs/configuration-guide/#increase-the-metrics-retention-period"
Diffstat (limited to 'web/gui/src/dashboard.js/charting/dygraph.js')
-rw-r--r-- | web/gui/src/dashboard.js/charting/dygraph.js | 37 |
1 files changed, 36 insertions, 1 deletions
diff --git a/web/gui/src/dashboard.js/charting/dygraph.js b/web/gui/src/dashboard.js/charting/dygraph.js index a60af18b83..f34d2f4aa1 100644 --- a/web/gui/src/dashboard.js/charting/dygraph.js +++ b/web/gui/src/dashboard.js/charting/dygraph.js @@ -483,8 +483,28 @@ NETDATA.dygraphChartCreate = function (state, data) { NETDATA.globalSelectionSync.stop(); }, underlayCallback: function (canvas, area, g) { - // the chart is about to be drawn + + // update history_tip_element + if (state.tmp.dygraph_history_tip_element) { + const xHookRightSide = g.toDomXCoord(state.netdata_first); + if (xHookRightSide > area.x) { + state.tmp.dygraph_history_tip_element_displayed = true; + // group the styles for possible better performance + state.tmp.dygraph_history_tip_element.setAttribute( + 'style', + `display: block; left: ${area.x}px; right: calc(100% - ${xHookRightSide}px);` + ) + } else { + if (state.tmp.dygraph_history_tip_element_displayed) { + // additional check just for performance + // don't update the DOM when it's not needed + state.tmp.dygraph_history_tip_element.style.display = 'none'; + state.tmp.dygraph_history_tip_element_displayed = false; + } + } + } + // this function renders global highlighted time-frame if (NETDATA.globalChartUnderlay.isActive()) { @@ -953,6 +973,21 @@ NETDATA.dygraphChartCreate = function (state, data) { state.tmp.dygraph_instance = new Dygraph(state.element_chart, data.result.data, state.tmp.dygraph_options); + + state.tmp.dygraph_history_tip_element = document.createElement('div'); + state.tmp.dygraph_history_tip_element.innerHTML = ` + <span class="dygraph__history-tip-content"> + Want to extend your history of real-time metrics? + <br /> + <a href="https://docs.netdata.cloud/docs/configuration-guide/#increase-the-metrics-retention-period" target=_blank> + Configure Netdata's <b>history</b></a> + or use the <a href="https://docs.netdata.cloud/database/engine/" target=_blank>DB engine</a>. + </span> + `; + state.tmp.dygraph_history_tip_element.className = 'dygraph__history-tip'; + state.element_chart.appendChild(state.tmp.dygraph_history_tip_element); + + state.tmp.dygraph_force_zoom = false; state.tmp.dygraph_user_action = false; state.tmp.dygraph_last_rendered = Date.now(); |