summaryrefslogtreecommitdiffstats
path: root/web/gui/src/dashboard.js
diff options
context:
space:
mode:
Diffstat (limited to 'web/gui/src/dashboard.js')
-rw-r--r--web/gui/src/dashboard.js/charting/_c3.js114
-rw-r--r--web/gui/src/dashboard.js/charting/_morris.js81
-rw-r--r--web/gui/src/dashboard.js/charting/_raphael.js48
-rw-r--r--web/gui/src/dashboard.js/charting/dygraph.js37
4 files changed, 36 insertions, 244 deletions
diff --git a/web/gui/src/dashboard.js/charting/_c3.js b/web/gui/src/dashboard.js/charting/_c3.js
deleted file mode 100644
index 6688bbcce..000000000
--- a/web/gui/src/dashboard.js/charting/_c3.js
+++ /dev/null
@@ -1,114 +0,0 @@
-
-// DEPRECATED: will be removed!
-
-// c3
-
-NETDATA.c3Initialize = function(callback) {
- if (typeof netdataNoC3 === 'undefined' || !netdataNoC3) {
-
- // C3 requires D3
- if (!NETDATA.chartLibraries.d3.initialized) {
- if (NETDATA.chartLibraries.d3.enabled) {
- NETDATA.d3Initialize(function() {
- NETDATA.c3Initialize(callback);
- });
- } else {
- NETDATA.chartLibraries.c3.enabled = false;
- if (typeof callback === "function")
- return callback();
- }
- } else {
- NETDATA._loadCSS(NETDATA.c3_css);
-
- $.ajax({
- url: NETDATA.c3_js,
- cache: true,
- dataType: "script",
- xhrFields: { withCredentials: true } // required for the cookie
- })
- .done(function() {
- NETDATA.registerChartLibrary('c3', NETDATA.c3_js);
- })
- .fail(function() {
- NETDATA.chartLibraries.c3.enabled = false;
- NETDATA.error(100, NETDATA.c3_js);
- })
- .always(function() {
- if (typeof callback === "function")
- return callback();
- });
- }
- } else {
- NETDATA.chartLibraries.c3.enabled = false;
- if (typeof callback === "function")
- return callback();
- }
-};
-
-NETDATA.c3ChartUpdate = function(state, data) {
- state.c3_instance.destroy();
- return NETDATA.c3ChartCreate(state, data);
-
- //state.c3_instance.load({
- // rows: data.result,
- // unload: true
- //});
-
- //return true;
-};
-
-NETDATA.c3ChartCreate = function(state, data) {
-
- state.element_chart.id = 'c3-' + state.uuid;
- // console.log('id = ' + state.element_chart.id);
-
- state.c3_instance = c3.generate({
- bindto: '#' + state.element_chart.id,
- size: {
- width: state.chartWidth(),
- height: state.chartHeight()
- },
- color: {
- pattern: state.chartColors()
- },
- data: {
- x: 'time',
- rows: data.result,
- type: (state.chart.chart_type === 'line')?'spline':'area-spline'
- },
- axis: {
- x: {
- type: 'timeseries',
- tick: {
- format: function(x) {
- return NETDATA.dateTime.xAxisTimeString(x);
- }
- }
- }
- },
- grid: {
- x: {
- show: true
- },
- y: {
- show: true
- }
- },
- point: {
- show: false
- },
- line: {
- connectNull: false
- },
- transition: {
- duration: 0
- },
- interaction: {
- enabled: true
- }
- });
-
- // console.log(state.c3_instance);
-
- return true;
-};
diff --git a/web/gui/src/dashboard.js/charting/_morris.js b/web/gui/src/dashboard.js/charting/_morris.js
deleted file mode 100644
index 30789e4e2..000000000
--- a/web/gui/src/dashboard.js/charting/_morris.js
+++ /dev/null
@@ -1,81 +0,0 @@
-
-// DEPRECATED: will be removed!
-
-// morris
-
-NETDATA.morrisInitialize = function(callback) {
- if (typeof netdataNoMorris === 'undefined' || !netdataNoMorris) {
-
- // morris requires raphael
- if (!NETDATA.chartLibraries.raphael.initialized) {
- if (NETDATA.chartLibraries.raphael.enabled) {
- NETDATA.raphaelInitialize(function() {
- NETDATA.morrisInitialize(callback);
- });
- } else {
- NETDATA.chartLibraries.morris.enabled = false;
- if (typeof callback === "function")
- return callback();
- }
- } else {
- NETDATA._loadCSS(NETDATA.morris_css);
-
- $.ajax({
- url: NETDATA.morris_js,
- cache: true,
- dataType: "script",
- xhrFields: { withCredentials: true } // required for the cookie
- })
- .done(function() {
- NETDATA.registerChartLibrary('morris', NETDATA.morris_js);
- })
- .fail(function() {
- NETDATA.chartLibraries.morris.enabled = false;
- NETDATA.error(100, NETDATA.morris_js);
- })
- .always(function() {
- if (typeof callback === "function")
- return callback();
- });
- }
- } else {
- NETDATA.chartLibraries.morris.enabled = false;
- if (typeof callback === "function")
- return callback();
- }
-};
-
-NETDATA.morrisChartUpdate = function(state, data) {
- state.morris_instance.setData(data.result.data);
- return true;
-};
-
-NETDATA.morrisChartCreate = function(state, data) {
-
- state.morris_options = {
- element: state.element_chart.id,
- data: data.result.data,
- xkey: 'time',
- ykeys: data.dimension_names,
- labels: data.dimension_names,
- lineWidth: 2,
- pointSize: 3,
- smooth: true,
- hideHover: 'auto',
- parseTime: true,
- continuousLine: false,
- behaveLikeLine: false
- };
-
- if (state.chart.chart_type === 'line')
- state.morris_instance = new Morris.Line(state.morris_options);
-
- else if (state.chart.chart_type === 'area') {
- state.morris_options.behaveLikeLine = true;
- state.morris_instance = new Morris.Area(state.morris_options);
- }
- else // stacked
- state.morris_instance = new Morris.Area(state.morris_options);
-
- return true;
-};
diff --git a/web/gui/src/dashboard.js/charting/_raphael.js b/web/gui/src/dashboard.js/charting/_raphael.js
deleted file mode 100644
index 2d89a22a8..000000000
--- a/web/gui/src/dashboard.js/charting/_raphael.js
+++ /dev/null
@@ -1,48 +0,0 @@
-
-// DEPRECATED: will be removed!
-
-// raphael
-
-NETDATA.raphaelInitialize = function(callback) {
- if (typeof netdataStopRaphael === 'undefined' || !netdataStopRaphael) {
- $.ajax({
- url: NETDATA.raphael_js,
- cache: true,
- dataType: "script",
- xhrFields: { withCredentials: true } // required for the cookie
- })
- .done(function() {
- NETDATA.registerChartLibrary('raphael', NETDATA.raphael_js);
- })
- .fail(function() {
- NETDATA.chartLibraries.raphael.enabled = false;
- NETDATA.error(100, NETDATA.raphael_js);
- })
- .always(function() {
- if (typeof callback === "function")
- return callback();
- });
- } else {
- NETDATA.chartLibraries.raphael.enabled = false;
- if (typeof callback === "function")
- return callback();
- }
-};
-
-NETDATA.raphaelChartUpdate = function(state, data) {
- $(state.element_chart).raphael(data.result, {
- width: state.chartWidth(),
- height: state.chartHeight()
- });
-
- return false;
-};
-
-NETDATA.raphaelChartCreate = function(state, data) {
- $(state.element_chart).raphael(data.result, {
- width: state.chartWidth(),
- height: state.chartHeight()
- });
-
- return false;
-};
diff --git a/web/gui/src/dashboard.js/charting/dygraph.js b/web/gui/src/dashboard.js/charting/dygraph.js
index a60af18b8..f34d2f4aa 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();
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-23 19:32:34 +0000