// ----------------------------------------------------------------------------
// You can set the following variables before loading this script:
-/*global netdataNoDygraphs *//* boolean, disable dygraph charts
- * (default: false) */
-/*global netdataNoSparklines *//* boolean, disable sparkline charts
- * (default: false) */
-/*global netdataNoPeitys *//* boolean, disable peity charts
- * (default: false) */
-/*global netdataNoGoogleCharts *//* boolean, disable google charts
- * (default: false) */
-/*global netdataNoMorris *//* boolean, disable morris charts
- * (default: false) */
-/*global netdataNoEasyPieChart *//* boolean, disable easypiechart charts
- * (default: false) */
-/*global netdataNoGauge *//* boolean, disable gauge.js charts
- * (default: false) */
-/*global netdataNoD3 *//* boolean, disable d3 charts
- * (default: false) */
-/*global netdataNoC3 *//* boolean, disable c3 charts
- * (default: false) */
-/*global netdataNoBootstrap *//* boolean, disable bootstrap - disables help too
- * (default: false) */
-/*global netdataDontStart *//* boolean, do not start the thread to process the charts
- * (default: false) */
-/*global netdataErrorCallback *//* function, callback to be called when the dashboard encounters an error
- * (default: null) */
-/*global netdataRegistry *//* boolean, use the netdata registry
- * (default: false) */
-/*global netdataNoRegistry *//* boolean, included only for compatibility with existing custom dashboard
- * (obsolete - do not use this any more) */
-/*global netdataRegistryCallback *//* function, callback that will be invoked with one param: the URLs from the registry
- * (default: null) */
-/*global netdataShowHelp *//* boolean, disable charts help
- * (default: true) */
-/*global netdataShowAlarms *//* boolean, enable alarms checks and notifications
- * (default: false) */
-/*global netdataRegistryAfterMs *//* ms, delay registry use at started
- * (default: 1500) */
-/*global netdataCallback *//* function, callback to be called when netdata is ready to start
- * (default: null)
- * netdata will be running while this is called
- * (call NETDATA.pause to stop it) */
-/*global netdataPrepCallback *//* function, callback to be called before netdata does anything else
- * (default: null) */
-/*global netdataServer *//* string, the URL of the netdata server to use
- * (default: the URL the page is hosted at) */
+/*global netdataNoDygraphs *//* boolean, disable dygraph charts
+ * (default: false) */
+/*global netdataNoSparklines *//* boolean, disable sparkline charts
+ * (default: false) */
+/*global netdataNoPeitys *//* boolean, disable peity charts
+ * (default: false) */
+/*global netdataNoGoogleCharts *//* boolean, disable google charts
+ * (default: false) */
+/*global netdataNoMorris *//* boolean, disable morris charts
+ * (default: false) */
+/*global netdataNoEasyPieChart *//* boolean, disable easypiechart charts
+ * (default: false) */
+/*global netdataNoGauge *//* boolean, disable gauge.js charts
+ * (default: false) */
+/*global netdataNoD3 *//* boolean, disable d3 charts
+ * (default: false) */
+/*global netdataNoC3 *//* boolean, disable c3 charts
+ * (default: false) */
+/*global netdataNoBootstrap *//* boolean, disable bootstrap - disables help too
+ * (default: false) */
+/*global netdataDontStart *//* boolean, do not start the thread to process the charts
+ * (default: false) */
+/*global netdataErrorCallback *//* function, callback to be called when the dashboard encounters an error
+ * (default: null) */
+/*global netdataRegistry:true *//* boolean, use the netdata registry
+ * (default: false) */
+/*global netdataNoRegistry *//* boolean, included only for compatibility with existing custom dashboard
+ * (obsolete - do not use this any more) */
+/*global netdataRegistryCallback *//* function, callback that will be invoked with one param: the URLs from the registry
+ * (default: null) */
+/*global netdataShowHelp:true *//* boolean, disable charts help
+ * (default: true) */
+/*global netdataShowAlarms:true *//* boolean, enable alarms checks and notifications
+ * (default: false) */
+/*global netdataRegistryAfterMs:true *//* ms, delay registry use at started
+ * (default: 1500) */
+/*global netdataCallback *//* function, callback to be called when netdata is ready to start
+ * (default: null)
+ * netdata will be running while this is called
+ * (call NETDATA.pause to stop it) */
+/*global netdataPrepCallback *//* function, callback to be called before netdata does anything else
+ * (default: null) */
+/*global netdataServer *//* string, the URL of the netdata server to use
+ * (default: the URL the page is hosted at) */
// ----------------------------------------------------------------------------
// global namespace
NETDATA.peity_js = NETDATA.serverDefault + 'lib/jquery.peity-3.2.0.min.js';
NETDATA.sparkline_js = NETDATA.serverDefault + 'lib/jquery.sparkline-2.1.2.min.js';
NETDATA.easypiechart_js = NETDATA.serverDefault + 'lib/jquery.easypiechart-97b5824.min.js';
- NETDATA.gauge_js = NETDATA.serverDefault + 'lib/gauge-d5260c3.min.js';
+ NETDATA.gauge_js = NETDATA.serverDefault + 'lib/gauge-1.3.2.min.js';
NETDATA.dygraph_js = NETDATA.serverDefault + 'lib/dygraph-combined-dd74404.js';
NETDATA.dygraph_smooth_js = NETDATA.serverDefault + 'lib/dygraph-smooth-plotter-dd74404.js';
NETDATA.raphael_js = NETDATA.serverDefault + 'lib/raphael-2.2.4-min.js';
if(netdataRegistry === false && typeof netdataRegistryCallback === 'function')
netdataRegistry = true;
+
+ // ----------------------------------------------------------------------------------------------------------------
+ // detect if this is probably a slow device
+
+ var isSlowDeviceResult = undefined;
+ var isSlowDevice = function() {
+ if(isSlowDeviceResult !== undefined)
+ return isSlowDeviceResult;
+
+ try {
+ var ua = navigator.userAgent.toLowerCase();
+
+ var iOS = /ipad|iphone|ipod/.test(ua) && !window.MSStream;
+ var android = /android/.test(ua) && !window.MSStream;
+ isSlowDeviceResult = (iOS === true || android === true);
+ }
+ catch (e) {
+ isSlowDeviceResult = false;
+ }
+
+ return isSlowDeviceResult;
+ };
+
// ----------------------------------------------------------------------------------------------------------------
// the defaults for all charts
before: 0, // panning
after: -600, // panning
pixels_per_point: 1, // the detail of the chart
- fill_luminance: 0.8 // luminance of colors in solit areas
+ fill_luminance: 0.8 // luminance of colors in solid areas
};
// ----------------------------------------------------------------------------------------------------------------
// new elements we have to check.
auto_refresher_fast_weight: 0, // this is the current time in ms, spent
- // rendering charts continiously.
+ // rendering charts continuously.
// used with .current.fast_render_timeframe
page_is_visible: true, // when true, this page is visible
- auto_refresher_stop_until: 0, // timestamp in ms - used internaly, to stop the
+ auto_refresher_stop_until: 0, // timestamp in ms - used internally, to stop the
// auto-refresher for some time (when a chart is
// performing pan or zoom, we need to stop refreshing
// all other charts, to have the maximum speed for
// the current profile
// we may have many...
current: {
- pixels_per_point: 1, // the minimum pixels per point for all charts
+ pixels_per_point: isSlowDevice()?5:1, // the minimum pixels per point for all charts
// increase this to speed javascript up
// each chart library has its own limit too
// the max of this and the chart library is used
idle_between_charts: 100, // ms - how much time to wait between chart updates
- fast_render_timeframe: 200, // ms - render continously until this time of continious
+ fast_render_timeframe: 200, // ms - render continuously until this time of continuous
// rendering has been reached
// this setting is used to make it render e.g. 10
// charts at once, sleep idle_between_charts time
idle_lost_focus: 500, // ms - when the window does not have focus, check
// if focus has been regained, every this time
- global_pan_sync_time: 1000, // ms - when you pan or zoon a chart, the background
- // autorefreshing of charts is paused for this amount
+ global_pan_sync_time: 1000, // ms - when you pan or zoom a chart, the background
+ // auto-refreshing of charts is paused for this amount
// of time
sync_selection_delay: 1500, // ms - when you pan or zoom a chart, wait this amount
update_only_visible: true, // enable or disable visibility management
- parallel_refresher: true, // enable parallel refresh of charts
+ parallel_refresher: (isSlowDevice() === false), // enable parallel refresh of charts
concurrent_refreshes: true, // when parallel_refresher is enabled, sync also the charts
- destroy_on_hide: false, // destroy charts when they are not visible
+ destroy_on_hide: (isSlowDevice() === true), // destroy charts when they are not visible
show_help: netdataShowHelp, // when enabled the charts will show some help
show_help_delay_show_ms: 500,
double_click_speed: 500, // ms - time between clicks / taps to detect double click/tap
- smooth_plot: true, // enable smooth plot, where possible
+ smooth_plot: (isSlowDevice() === false), // enable smooth plot, where possible
charts_selection_animation_delay: 50, // delay to animate charts when syncing selection
// every time a chart is panned or zoomed
// we set the timestamp here
// then we use it as a sequence number
- // to find if other charts are syncronized
- // to this timerange
+ // to find if other charts are synchronized
+ // to this time-range
master: null, // the master chart (state), to which all others
// are synchronized
//if(state.needsRecreation())
// return true;
- return (!(state.tm.pan_and_zoom_seq === this.seq));
+ return (state.tm.pan_and_zoom_seq !== this.seq);
}
};
this.override_options = self.data('override-options') || null; // override options to pass to netdata
this.running = false; // boolean - true when the chart is being refreshed now
- this.validated = false; // boolean - has the chart been validated?
this.enabled = true; // boolean - is the chart enabled for refresh?
this.paused = false; // boolean - is the chart paused for any reason?
this.selected = false; // boolean - is the chart shown a selection?
this.value_decimal_detail = -1;
var d = self.data('decimal-digits');
if(typeof d === 'number') {
- this.value_decimal_detail = 1;
- while(d-- > 0)
- this.value_decimal_detail *= 10;
+ this.value_decimal_detail = d;
}
this.auto = {
// find the element that needs to be updated
var refresh_dt_element_name = self.data('dt-element-name') || null; // string - the element to print refresh_dt_ms
- if(refresh_dt_element_name !== null)
+ if(refresh_dt_element_name !== null) {
this.refresh_dt_element = document.getElementById(refresh_dt_element_name) || null;
+ }
else
this.refresh_dt_element = null;
document.ontouchend =
this.element_legend_childs.resize_handler.onmouseup =
this.element_legend_childs.resize_handler.ontouchend =
- function() {
+ function(e) {
+ void(e);
+
// remove all the hooks
document.onmouseup =
document.onmousemove =
if(NETDATA.options.current.sync_selection === false)
return false;
- return (!(NETDATA.globalSelectionSync.dont_sync_before > Date.now()));
+ return (NETDATA.globalSelectionSync.dont_sync_before <= Date.now());
};
this.globalSelectionSyncIsMaster = function() {
this.clearSelection = function() {
if(this.selected === true) {
if(typeof this.library.clearSelection === 'function')
- this.selected = (!(this.library.clearSelection(this) === true));
+ this.selected = (this.library.clearSelection(this) !== true);
else
this.selected = false;
return ret;
};
+ var __legendFormatValueChartDecimalsLastMin = undefined;
+ var __legendFormatValueChartDecimalsLastMax = undefined;
+ var __legendFormatValueChartDecimals = -1;
+ this.legendFormatValueDecimalsFromMinMax = function(min, max) {
+ if(min === __legendFormatValueChartDecimalsLastMin && max === __legendFormatValueChartDecimalsLastMax)
+ return;
+
+ __legendFormatValueChartDecimalsLastMin = min;
+ __legendFormatValueChartDecimalsLastMax = max;
+
+ if(this.data !== null && this.data.min === this.data.max)
+ __legendFormatValueChartDecimals = -1;
+
+ else if(this.value_decimal_detail !== -1)
+ __legendFormatValueChartDecimals = this.value_decimal_detail;
+
+ else {
+ var delta;
+
+ if (min === max)
+ delta = Math.abs(min);
+ else
+ delta = Math.abs(max - min);
+
+ if (delta > 1000) __legendFormatValueChartDecimals = 0;
+ else if (delta > 10) __legendFormatValueChartDecimals = 1;
+ else if (delta > 1) __legendFormatValueChartDecimals = 2;
+ else if (delta > 0.1) __legendFormatValueChartDecimals = 2;
+ else __legendFormatValueChartDecimals = 4;
+ }
+ };
+
this.legendFormatValue = function(value) {
- if(value === null || value === 'undefined') return '-';
- if(typeof value !== 'number') return value;
-
- if(this.value_decimal_detail !== -1)
- return (Math.round(value * this.value_decimal_detail) / this.value_decimal_detail).toLocaleString();
-
- var abs = Math.abs(value);
- if(abs >= 1000) return (Math.round(value)).toLocaleString();
- if(abs >= 100 ) return (Math.round(value * 10) / 10).toLocaleString();
- if(abs >= 1 ) return (Math.round(value * 100) / 100).toLocaleString();
- if(abs >= 0.1 ) return (Math.round(value * 1000) / 1000).toLocaleString();
- return (Math.round(value * 10000) / 10000).toLocaleString();
+ if(typeof value !== 'number') return '-';
+
+ var dmin, dmax;
+
+ if(__legendFormatValueChartDecimals < 0) {
+ dmin = 0;
+ var abs = value;
+ if(abs > 1000) dmax = 0;
+ else if(abs > 10 ) dmax = 1;
+ else if(abs > 1) dmax = 2;
+ else if(abs > 0.1) dmax = 2;
+ else dmax = 4;
+ }
+ else {
+ dmin = dmax = __legendFormatValueChartDecimals;
+ }
+
+ if(this.value_decimal_detail !== -1) {
+ dmin = dmax = this.value_decimal_detail;
+ }
+
+ return value.toLocaleString(undefined, {
+ // style: 'decimal',
+ // minimumIntegerDigits: 1,
+ // minimumSignificantDigits: 1,
+ // maximumSignificantDigits: 1,
+ useGrouping: true,
+ minimumFractionDigits: dmin,
+ maximumFractionDigits: dmax
+ });
};
this.legendSetLabelValue = function(label, value) {
}
};
+ this.legendSetDateLast = {
+ ms: 0,
+ date: undefined,
+ time: undefined
+ };
+
this.legendSetDate = function(ms) {
if(typeof ms !== 'number') {
this.legendShowUndefined();
return;
}
- var d = new Date(ms);
+ if(this.legendSetDateLast.ms !== ms) {
+ var d = new Date(ms);
+ this.legendSetDateLast.ms = ms;
+ this.legendSetDateLast.date = d.toLocaleDateString();
+ this.legendSetDateLast.time = d.toLocaleTimeString();
+ }
- if(this.element_legend_childs.title_date)
- this.__legendSetDateString(d.toLocaleDateString());
+ if(this.element_legend_childs.title_date !== null)
+ this.__legendSetDateString(this.legendSetDateLast.date);
- if(this.element_legend_childs.title_time)
- this.__legendSetTimeString(d.toLocaleTimeString());
+ if(this.element_legend_childs.title_time !== null)
+ this.__legendSetTimeString(this.legendSetDateLast.time);
- if(this.element_legend_childs.title_units)
+ if(this.element_legend_childs.title_units !== null)
this.__legendSetUnitsString(this.units)
};
this.legendShowUndefined = function() {
- if(this.element_legend_childs.title_date)
+ if(this.element_legend_childs.title_date !== null)
this.__legendSetDateString(' ');
- if(this.element_legend_childs.title_time)
+ if(this.element_legend_childs.title_time !== null)
this.__legendSetTimeString(this.chart.name);
- if(this.element_legend_childs.title_units)
+ if(this.element_legend_childs.title_units !== null)
this.__legendSetUnitsString(' ');
if(this.data && this.element_legend_childs.series !== null) {
while(i--) {
var label = labels[i];
- if(typeof label === 'undefined') continue;
- if(typeof this.element_legend_childs.series[label] === 'undefined') continue;
+ if(typeof label === 'undefined' || typeof this.element_legend_childs.series[label] === 'undefined') continue;
this.legendSetLabelValue(label, null);
}
}
this.element_legend_childs.title_date.className += " netdata-legend-title-date";
this.element_legend.appendChild(this.element_legend_childs.title_date);
+ this.__last_shown_legend_date = undefined;
this.element_legend.appendChild(document.createElement('br'));
this.element_legend_childs.title_time.className += " netdata-legend-title-time";
this.element_legend.appendChild(this.element_legend_childs.title_time);
+ this.__last_shown_legend_time = undefined;
this.element_legend.appendChild(document.createElement('br'));
this.element_legend_childs.title_units.className += " netdata-legend-title-units";
this.element_legend.appendChild(this.element_legend_childs.title_units);
+ this.__last_shown_legend_units = undefined;
this.element_legend.appendChild(document.createElement('br'));
placement: 'bottom',
title: 'Chart Legend',
delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
- content: 'You can click or tap on the values or the labels to select dimentions. By pressing SHIFT or CONTROL, you can enable or disable multiple dimensions.<br/><small>Help, can be disabled from the settings.</small>'
+ content: 'You can click or tap on the values or the labels to select dimensions. By pressing SHIFT or CONTROL, you can enable or disable multiple dimensions.<br/><small>Help, can be disabled from the settings.</small>'
});
}
else {
if(NETDATA.options.current.pan_and_zoom_data_padding === true && this.requested_padding !== null) {
if(this.view_after < this.data_after) {
- // console.log('adusting view_after from ' + this.view_after + ' to ' + this.data_after);
+ // console.log('adjusting view_after from ' + this.view_after + ' to ' + this.data_after);
this.view_after = this.data_after;
}
if(this.view_before > this.data_before) {
- // console.log('adusting view_before from ' + this.view_before + ' to ' + this.data_before);
+ // console.log('adjusting view_before from ' + this.view_before + ' to ' + this.data_before);
this.view_before = this.data_before;
}
}
if(this.debug === true)
this.log('max updates of ' + this.updates_since_last_creation.toString() + ' reached. Forcing re-generation.');
- this.chart_created = false;
+ init();
+ return;
}
// check and update the legend
var self = $(state.element);
- var chart_type = state.chart.chart_type;
+ var chart_type = self.data('dygraph-type') || state.chart.chart_type;
if(chart_type === 'stacked' && data.dimensions === 1) chart_type = 'area';
- chart_type = self.data('dygraph-type') || chart_type;
- var smooth = (chart_type === 'line' && !NETDATA.chartLibraries.dygraph.isSparkline(state));
- smooth = self.data('dygraph-smooth') || smooth;
+ var highlightCircleSize = (NETDATA.chartLibraries.dygraph.isSparkline(state) === true)?3:4;
- if(NETDATA.dygraph.smooth === false)
- smooth = false;
-
- var strokeWidth = (chart_type === 'stacked')?0.1:((smooth)?1.5:0.7);
- var highlightCircleSize = (NETDATA.chartLibraries.dygraph.isSparkline(state))?3:4;
+ var smooth = (NETDATA.dygraph.smooth === true)
+ ?(self.data('dygraph-smooth') || (chart_type === 'line' && NETDATA.chartLibraries.dygraph.isSparkline(state) === false))
+ :false;
state.dygraph_options = {
- colors: self.data('dygraph-colors') || state.chartColors(),
+ colors: self.data('dygraph-colors') || state.chartColors(),
// leave a few pixels empty on the right of the chart
- rightGap: self.data('dygraph-rightgap') || 5,
- showRangeSelector: self.data('dygraph-showrangeselector') || false,
- showRoller: self.data('dygraph-showroller') || false,
-
- title: self.data('dygraph-title') || state.title,
- titleHeight: self.data('dygraph-titleheight') || 19,
-
- legend: self.data('dygraph-legend') || 'always', // we need this to get selection events
- labels: data.result.labels,
- labelsDiv: self.data('dygraph-labelsdiv') || state.element_legend_childs.hidden,
- labelsDivStyles: self.data('dygraph-labelsdivstyles') || { 'fontSize':'1px' },
- labelsDivWidth: self.data('dygraph-labelsdivwidth') || state.chartWidth() - 70,
- labelsSeparateLines: self.data('dygraph-labelsseparatelines') || true,
- labelsShowZeroValues: self.data('dygraph-labelsshowzerovalues') || true,
- labelsKMB: false,
- labelsKMG2: false,
- showLabelsOnHighlight: self.data('dygraph-showlabelsonhighlight') || true,
- hideOverlayOnMouseOut: self.data('dygraph-hideoverlayonmouseout') || true,
-
- includeZero: self.data('dygraph-includezero') || (chart_type === 'stacked'),
- xRangePad: self.data('dygraph-xrangepad') || 0,
- yRangePad: self.data('dygraph-yrangepad') || 1,
-
- valueRange: self.data('dygraph-valuerange') || [ null, null ],
-
- ylabel: state.units,
- yLabelWidth: self.data('dygraph-ylabelwidth') || 12,
-
- // the function to plot the chart
- plotter: null,
-
- // The width of the lines connecting data points. This can be used to increase the contrast or some graphs.
- strokeWidth: self.data('dygraph-strokewidth') || strokeWidth,
- strokePattern: self.data('dygraph-strokepattern') || undefined,
-
- // The size of the dot to draw on each point in pixels (see drawPoints). A dot is always drawn when a point is "isolated",
- // i.e. there is a missing point on either side of it. This also controls the size of those dots.
- drawPoints: self.data('dygraph-drawpoints') || false,
-
- // Draw points at the edges of gaps in the data. This improves visibility of small data segments or other data irregularities.
- drawGapEdgePoints: self.data('dygraph-drawgapedgepoints') || true,
-
- connectSeparatedPoints: self.data('dygraph-connectseparatedpoints') || false,
- pointSize: self.data('dygraph-pointsize') || 1,
-
- // enabling this makes the chart with little square lines
- stepPlot: self.data('dygraph-stepplot') || false,
-
- // Draw a border around graph lines to make crossing lines more easily distinguishable. Useful for graphs with many lines.
- strokeBorderColor: self.data('dygraph-strokebordercolor') || NETDATA.themes.current.background,
- strokeBorderWidth: self.data('dygraph-strokeborderwidth') || (chart_type === 'stacked')?0.0:0.0,
-
- fillGraph: self.data('dygraph-fillgraph') || (chart_type === 'area' || chart_type === 'stacked'),
- fillAlpha: self.data('dygraph-fillalpha') || ((chart_type === 'stacked')?NETDATA.options.current.color_fill_opacity_stacked:NETDATA.options.current.color_fill_opacity_area),
- stackedGraph: self.data('dygraph-stackedgraph') || (chart_type === 'stacked'),
- stackedGraphNaNFill: self.data('dygraph-stackedgraphnanfill') || 'none',
-
- drawAxis: self.data('dygraph-drawaxis') || true,
- axisLabelFontSize: self.data('dygraph-axislabelfontsize') || 10,
- axisLineColor: self.data('dygraph-axislinecolor') || NETDATA.themes.current.axis,
- axisLineWidth: self.data('dygraph-axislinewidth') || 1.0,
-
- drawGrid: self.data('dygraph-drawgrid') || true,
- gridLinePattern: self.data('dygraph-gridlinepattern') || null,
- gridLineWidth: self.data('dygraph-gridlinewidth') || 1.0,
- gridLineColor: self.data('dygraph-gridlinecolor') || NETDATA.themes.current.grid,
-
- maxNumberWidth: self.data('dygraph-maxnumberwidth') || 8,
- sigFigs: self.data('dygraph-sigfigs') || null,
- digitsAfterDecimal: self.data('dygraph-digitsafterdecimal') || 2,
- valueFormatter: self.data('dygraph-valueformatter') || function(x){ return x.toFixed(2); },
-
- highlightCircleSize: self.data('dygraph-highlightcirclesize') || highlightCircleSize,
- highlightSeriesOpts: self.data('dygraph-highlightseriesopts') || null, // TOO SLOW: { strokeWidth: 1.5 },
- highlightSeriesBackgroundAlpha: self.data('dygraph-highlightseriesbackgroundalpha') || null, // TOO SLOW: (chart_type === 'stacked')?0.7:0.5,
-
- pointClickCallback: self.data('dygraph-pointclickcallback') || undefined,
- visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names),
+ rightGap: self.data('dygraph-rightgap')
+ || 5,
+
+ showRangeSelector: self.data('dygraph-showrangeselector')
+ || false,
+
+ showRoller: self.data('dygraph-showroller')
+ || false,
+
+ title: self.data('dygraph-title')
+ || state.title,
+
+ titleHeight: self.data('dygraph-titleheight')
+ || 19,
+
+ legend: self.data('dygraph-legend')
+ || 'always', // we need this to get selection events
+
+ labels: data.result.labels,
+
+ labelsDiv: self.data('dygraph-labelsdiv')
+ || state.element_legend_childs.hidden,
+
+ labelsDivStyles: self.data('dygraph-labelsdivstyles')
+ || { 'fontSize':'1px' },
+
+ labelsDivWidth: self.data('dygraph-labelsdivwidth')
+ || state.chartWidth() - 70,
+
+ labelsSeparateLines: self.data('dygraph-labelsseparatelines')
+ || true,
+
+ labelsShowZeroValues: self.data('dygraph-labelsshowzerovalues')
+ || true,
+
+ labelsKMB: false,
+ labelsKMG2: false,
+
+ showLabelsOnHighlight: self.data('dygraph-showlabelsonhighlight')
+ || true,
+
+ hideOverlayOnMouseOut: self.data('dygraph-hideoverlayonmouseout')
+ || true,
+
+ includeZero: self.data('dygraph-includezero')
+ || (chart_type === 'stacked'),
+
+ xRangePad: self.data('dygraph-xrangepad')
+ || 0,
+
+ yRangePad: self.data('dygraph-yrangepad')
+ || 1,
+
+ valueRange: self.data('dygraph-valuerange')
+ || [ null, null ],
+
+ ylabel: state.units,
+
+ yLabelWidth: self.data('dygraph-ylabelwidth')
+ || 12,
+
+ // the function to plot the chart
+ plotter: null,
+
+ // The width of the lines connecting data points.
+ // This can be used to increase the contrast or some graphs.
+ strokeWidth: self.data('dygraph-strokewidth')
+ || ((chart_type === 'stacked')?0.1:((smooth === true)?1.5:0.7)),
+
+ strokePattern: self.data('dygraph-strokepattern')
+ || undefined,
+
+ // The size of the dot to draw on each point in pixels (see drawPoints).
+ // A dot is always drawn when a point is "isolated",
+ // i.e. there is a missing point on either side of it.
+ // This also controls the size of those dots.
+ drawPoints: self.data('dygraph-drawpoints')
+ || false,
+
+ // Draw points at the edges of gaps in the data.
+ // This improves visibility of small data segments or other data irregularities.
+ drawGapEdgePoints: self.data('dygraph-drawgapedgepoints')
+ || true,
+
+ connectSeparatedPoints: self.data('dygraph-connectseparatedpoints')
+ || false,
+
+ pointSize: self.data('dygraph-pointsize')
+ || 1,
+
+ // enabling this makes the chart with little square lines
+ stepPlot: self.data('dygraph-stepplot')
+ || false,
+
+ // Draw a border around graph lines to make crossing lines more easily
+ // distinguishable. Useful for graphs with many lines.
+ strokeBorderColor: self.data('dygraph-strokebordercolor')
+ || NETDATA.themes.current.background,
+
+ strokeBorderWidth: self.data('dygraph-strokeborderwidth')
+ || (chart_type === 'stacked')?0.0:0.0,
+
+ fillGraph: self.data('dygraph-fillgraph')
+ || (chart_type === 'area' || chart_type === 'stacked'),
+
+ fillAlpha: self.data('dygraph-fillalpha')
+ || ((chart_type === 'stacked')
+ ?NETDATA.options.current.color_fill_opacity_stacked
+ :NETDATA.options.current.color_fill_opacity_area),
+
+ stackedGraph: self.data('dygraph-stackedgraph')
+ || (chart_type === 'stacked'),
+
+ stackedGraphNaNFill: self.data('dygraph-stackedgraphnanfill')
+ || 'none',
+
+ drawAxis: self.data('dygraph-drawaxis')
+ || true,
+
+ axisLabelFontSize: self.data('dygraph-axislabelfontsize')
+ || 10,
+
+ axisLineColor: self.data('dygraph-axislinecolor')
+ || NETDATA.themes.current.axis,
+
+ axisLineWidth: self.data('dygraph-axislinewidth')
+ || 1.0,
+
+ drawGrid: self.data('dygraph-drawgrid')
+ || true,
+
+ gridLinePattern: self.data('dygraph-gridlinepattern')
+ || null,
+
+ gridLineWidth: self.data('dygraph-gridlinewidth')
+ || 1.0,
+
+ gridLineColor: self.data('dygraph-gridlinecolor')
+ || NETDATA.themes.current.grid,
+
+ maxNumberWidth: self.data('dygraph-maxnumberwidth')
+ || 8,
+
+ sigFigs: self.data('dygraph-sigfigs')
+ || null,
+
+ digitsAfterDecimal: self.data('dygraph-digitsafterdecimal')
+ || 2,
+
+ valueFormatter: self.data('dygraph-valueformatter')
+ || undefined,
+
+ highlightCircleSize: self.data('dygraph-highlightcirclesize')
+ || highlightCircleSize,
+
+ highlightSeriesOpts: self.data('dygraph-highlightseriesopts')
+ || null, // TOO SLOW: { strokeWidth: 1.5 },
+
+ highlightSeriesBackgroundAlpha: self.data('dygraph-highlightseriesbackgroundalpha')
+ || null, // TOO SLOW: (chart_type === 'stacked')?0.7:0.5,
+
+ pointClickCallback: self.data('dygraph-pointclickcallback')
+ || undefined,
+
+ visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names),
+
axes: {
x: {
pixelsPerLabel: 50,
axisLabelFormatter: function (d, gran) {
void(gran);
return NETDATA.zeropad(d.getHours()) + ":" + NETDATA.zeropad(d.getMinutes()) + ":" + NETDATA.zeropad(d.getSeconds());
- },
- valueFormatter: function (ms) {
- void(ms);
- //var d = new Date(ms);
- //return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
-
- // no need to return anything here
- return ' ';
-
}
},
y: {
pixelsPerLabel: 15,
- valueFormatter: function (x) {
- // we format legends with the state object
- // no need to do anything here
- // return (Math.round(x*100) / 100).toLocaleString();
- // return state.legendFormatValue(x);
- return x;
+ axisLabelFormatter: function (y) {
+
+ // unfortunately, we have to call this every single time
+ state.legendFormatValueDecimalsFromMinMax(
+ this.axes_[0].extremeRange[0],
+ this.axes_[0].extremeRange[1]
+ );
+
+ return state.legendFormatValue(y);
}
}
},
// the time it thinks is selected is wrong
// here we calculate the time t based on the row number selected
// which is ok
- var t = state.data_after + row * state.data_update_every;
+ // var t = state.data_after + row * state.data_update_every;
// console.log('row = ' + row + ', x = ' + x + ', t = ' + t + ' ' + ((t === x)?'SAME':(Math.abs(x-t)<=state.data_update_every)?'SIMILAR':'DIFFERENT') + ', rows in db: ' + state.data_points + ' visible(x) = ' + state.timeIsVisible(x) + ' visible(t) = ' + state.timeIsVisible(t) + ' r(x) = ' + state.calculateRowForTime(x) + ' r(t) = ' + state.calculateRowForTime(t) + ' range: ' + state.data_after + ' - ' + state.data_before + ' real: ' + state.data.after + ' - ' + state.data.before + ' every: ' + state.data_update_every);
state.globalSelectionSync(x);
var xOffset = g.toDomCoords(g.xAxisRange()[0], null)[0];
var yar0 = g.yAxisRange(0);
- // This is calculating the pixel of the higest value. (Top pixel)
+ // This is calculating the pixel of the highest value. (Top pixel)
var yOffset = g.toDomCoords(null, yar0[1])[1];
// x y w and h are relative to the corner of the drawing area,
Dygraph.defaultInteractionModel.touchstart(event, dygraph, context);
// we overwrite the touch directions at the end, to overwrite
- // the internal default of dygraphs
+ // the internal default of dygraph
context.touchDirections = { x: true, y: false };
state.dygraph_last_touch_start = Date.now();
// if it didn't move, it is a selection
if(state.dygraph_last_touch_move === 0 && state.dygraph_last_touch_page_x !== 0) {
- // internal api of dygraphs
+ // internal api of dygraph
var pct = (state.dygraph_last_touch_page_x - (dygraph.plotter_.area.x + state.element.getBoundingClientRect().left)) / dygraph.plotter_.area.w;
var t = Math.round(state.data_after + (state.data_before - state.data_after) * pct);
if(NETDATA.dygraphSetSelection(state, t) === true)
state.__commonMax = self.data('common-max') || null;
}
else {
- state.log('incompatible version of dygraphs detected');
+ state.log('incompatible version of Dygraph detected');
state.__commonMin = null;
state.__commonMax = null;
}
};
NETDATA.d3ChartUpdate = function(state, data) {
+ void(state);
+ void(data);
+
return false;
};
NETDATA.d3ChartCreate = function(state, data) {
+ void(state);
+ void(data);
+
return false;
};
NETDATA.easypiechartClearSelection = function(state) {
if(typeof state.easyPieChartEvent !== 'undefined') {
- if(state.easyPieChartEvent.timer !== null)
+ if(state.easyPieChartEvent.timer !== undefined) {
clearTimeout(state.easyPieChartEvent.timer);
+ }
- state.easyPieChartEvent.timer = null;
+ state.easyPieChartEvent.timer = undefined;
}
if(state.isAutoRefreshable() === true && state.data !== null) {
if(typeof state.easyPieChartEvent === 'undefined') {
state.easyPieChartEvent = {
- timer: null,
+ timer: undefined,
value: 0,
pcent: 0
};
state.easyPieChartEvent.pcent = pcent;
state.easyPieChartLabel.innerText = state.legendFormatValue(value);
- if(state.easyPieChartEvent.timer === null) {
+ if(state.easyPieChartEvent.timer === undefined) {
state.easyPieChart_instance.disableAnimation();
state.easyPieChartEvent.timer = setTimeout(function() {
- state.easyPieChartEvent.timer = null;
+ state.easyPieChartEvent.timer = undefined;
state.easyPieChart_instance.update(state.easyPieChartEvent.pcent);
}, NETDATA.options.current.charts_selection_animation_delay);
}
// is always between min and max
var pcent = (value - min) * 100 / (max - min);
- // these should never happen
- if(pcent < 0) pcent = 0;
- if(pcent > 100) pcent = 100;
+ // bug fix for gauge.js 1.3.1
+ // if the value is the absolute min or max, the chart is broken
+ if(pcent < 0.001) pcent = 0.001;
+ if(pcent > 99.999) pcent = 99.999;
state.gauge_instance.set(pcent);
// console.log('gauge set ' + pcent + ', value ' + value + ', min ' + min + ', max ' + max);
NETDATA.gaugeClearSelection = function(state) {
if(typeof state.gaugeEvent !== 'undefined') {
- if(state.gaugeEvent.timer !== null)
+ if(state.gaugeEvent.timer !== undefined) {
clearTimeout(state.gaugeEvent.timer);
+ }
- state.gaugeEvent.timer = null;
+ state.gaugeEvent.timer = undefined;
}
if(state.isAutoRefreshable() === true && state.data !== null) {
if(typeof state.gaugeEvent === 'undefined') {
state.gaugeEvent = {
- timer: null,
+ timer: undefined,
value: 0,
min: 0,
max: 0
state.gaugeEvent.max = max;
NETDATA.gaugeSetLabels(state, value, min, max);
- if(state.gaugeEvent.timer === null) {
+ if(state.gaugeEvent.timer === undefined) {
NETDATA.gaugeAnimation(state, false);
state.gaugeEvent.timer = setTimeout(function() {
- state.gaugeEvent.timer = null;
+ state.gaugeEvent.timer = undefined;
NETDATA.gaugeSet(state, state.gaugeEvent.value, state.gaugeEvent.min, state.gaugeEvent.max);
}, NETDATA.options.current.charts_selection_animation_delay);
}
var options = {
lines: 12, // The number of lines to draw
- angle: 0.15, // The length of each line
- lineWidth: 0.44, // 0.44 The line thickness
+ angle: 0.15, // The span of the gauge arc
+ lineWidth: 0.50, // The line thickness
+ radiusScale: 0.85, // Relative radius
pointer: {
length: 0.8, // 0.9 The radius of the inner circle
strokeWidth: 0.035, // The rotation offset
color: pointerColor // Fill color
},
+ limitMax: true, // If false, the max value of the gauge will be updated if value surpass max
+ limitMin: true, // If true, the min value of the gauge will be fixed unless you set it manually
colorStart: startColor, // Colors
colorStop: stopColor, // just experiment with them
strokeColor: strokeColor, // to see which ones work best for you
- limitMax: true,
generateGradient: (generateGradient === true),
- gradientType: 0
+ gradientType: 0,
+ highDpiSupport: true // High resolution support
};
if (generateGradient.constructor === Array) {
var len = generateGradient.length;
while(len--) {
var pcent = generateGradient[len];
- var color = self.data('gauge-gradient-percent-color-' + pcent.toString()) || false;
+ var color = self.attr('data-gauge-gradient-percent-color-' + pcent.toString()) || false;
if(color !== false) {
var a = [];
a[0] = pcent / 100;
delete options.percentColors;
}
else if(generateGradient === false && NETDATA.themes.current.gauge_gradient === true) {
+ //noinspection PointlessArithmeticExpressionJS
options.percentColors = [
[0.0, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 0))],
[0.1, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 1))],
if(typeof $().emulateTransitionEnd === 'function')
return true;
else {
- return (typeof netdataNoBootstrap !== 'undefined' && netdataNoBootstrap);
+ return (typeof netdataNoBootstrap !== 'undefined' && netdataNoBootstrap === true);
}
}
},
{
url: NETDATA.themes.current.bootstrap_css,
isAlreadyLoaded: function() {
- return (typeof netdataNoBootstrap !== 'undefined' && netdataNoBootstrap);
+ return (typeof netdataNoBootstrap !== 'undefined' && netdataNoBootstrap === true);
}
},
{
if(NETDATA.alarms.current !== null) {
// get the current value_string
var t = NETDATA.alarms.current.alarms[entry.chart + '.' + entry.name];
- if(typeof t !== 'undefined' && entry.status === t.status)
+ if(typeof t !== 'undefined' && entry.status === t.status && typeof t.value_string !== 'undefined')
value_string = t.value_string;
}
return;
}
title = name + ' back to normal (' + value_string.toString() + ')';
- icon = 'images/check-mark-2-128-green.png'
+ icon = 'images/check-mark-2-128-green.png';
interaction = false;
break;
if(entry.old_status === 'WARNING')
status = 'escalated to ' + entry.status.toLowerCase();
- icon = 'images/alert-128-red.png'
+ icon = 'images/alert-128-red.png';
interaction = true;
break;
// Registry of netdata hosts
NETDATA.registry = {
- server: null, // the netdata registry server
- person_guid: null, // the unique ID of this browser / user
- machine_guid: null, // the unique ID the netdata server that served dashboard.js
- hostname: null, // the hostname of the netdata server that served dashboard.js
- machines: null, // the user's other URLs
- machines_array: null, // the user's other URLs in an array
+ server: null, // the netdata registry server
+ person_guid: null, // the unique ID of this browser / user
+ machine_guid: null, // the unique ID the netdata server that served dashboard.js
+ hostname: 'unknown', // the hostname of the netdata server that served dashboard.js
+ machines: null, // the user's other URLs
+ machines_array: null, // the user's other URLs in an array
person_urls: null,
parsePersonUrls: function(person_urls) {
NETDATA.registry.machines = {};
NETDATA.registry.machines_array = [];
- var now = Date.now();
var apu = person_urls;
var i = apu.length;
while(i--) {
projects / netdata.git / blobdiff