summaryrefslogtreecommitdiffstats
path: root/web/gui/src/dashboard.js/charting/sparkline.js
diff options
context:
space:
mode:
Diffstat (limited to 'web/gui/src/dashboard.js/charting/sparkline.js')
-rw-r--r--web/gui/src/dashboard.js/charting/sparkline.js155
1 files changed, 155 insertions, 0 deletions
diff --git a/web/gui/src/dashboard.js/charting/sparkline.js b/web/gui/src/dashboard.js/charting/sparkline.js
new file mode 100644
index 0000000..5d8a9e6
--- /dev/null
+++ b/web/gui/src/dashboard.js/charting/sparkline.js
@@ -0,0 +1,155 @@
+// ----------------------------------------------------------------------------------------------------------------
+// sparkline
+
+NETDATA.sparklineInitialize = function (callback) {
+ if (typeof netdataNoSparklines === 'undefined' || !netdataNoSparklines) {
+ $.ajax({
+ url: NETDATA.sparkline_js,
+ cache: true,
+ dataType: "script",
+ xhrFields: {withCredentials: true} // required for the cookie
+ })
+ .done(function () {
+ NETDATA.registerChartLibrary('sparkline', NETDATA.sparkline_js);
+ })
+ .fail(function () {
+ NETDATA.chartLibraries.sparkline.enabled = false;
+ NETDATA.error(100, NETDATA.sparkline_js);
+ })
+ .always(function () {
+ if (typeof callback === "function") {
+ return callback();
+ }
+ });
+ } else {
+ NETDATA.chartLibraries.sparkline.enabled = false;
+ if (typeof callback === "function") {
+ return callback();
+ }
+ }
+};
+
+NETDATA.sparklineChartUpdate = function (state, data) {
+ state.sparkline_options.width = state.chartWidth();
+ state.sparkline_options.height = state.chartHeight();
+
+ $(state.element_chart).sparkline(data.result, state.sparkline_options);
+ return true;
+};
+
+NETDATA.sparklineChartCreate = function (state, data) {
+ let type = NETDATA.dataAttribute(state.element, 'sparkline-type', 'line');
+ let lineColor = NETDATA.dataAttribute(state.element, 'sparkline-linecolor', state.chartCustomColors()[0]);
+ let fillColor = NETDATA.dataAttribute(state.element, 'sparkline-fillcolor', ((state.chart.chart_type === 'line') ? NETDATA.themes.current.background : NETDATA.colorLuminance(lineColor, NETDATA.chartDefaults.fill_luminance)));
+ let chartRangeMin = NETDATA.dataAttribute(state.element, 'sparkline-chartrangemin', undefined);
+ let chartRangeMax = NETDATA.dataAttribute(state.element, 'sparkline-chartrangemax', undefined);
+ let composite = NETDATA.dataAttribute(state.element, 'sparkline-composite', undefined);
+ let enableTagOptions = NETDATA.dataAttribute(state.element, 'sparkline-enabletagoptions', undefined);
+ let tagOptionPrefix = NETDATA.dataAttribute(state.element, 'sparkline-tagoptionprefix', undefined);
+ let tagValuesAttribute = NETDATA.dataAttribute(state.element, 'sparkline-tagvaluesattribute', undefined);
+ let disableHiddenCheck = NETDATA.dataAttribute(state.element, 'sparkline-disablehiddencheck', undefined);
+ let defaultPixelsPerValue = NETDATA.dataAttribute(state.element, 'sparkline-defaultpixelspervalue', undefined);
+ let spotColor = NETDATA.dataAttribute(state.element, 'sparkline-spotcolor', undefined);
+ let minSpotColor = NETDATA.dataAttribute(state.element, 'sparkline-minspotcolor', undefined);
+ let maxSpotColor = NETDATA.dataAttribute(state.element, 'sparkline-maxspotcolor', undefined);
+ let spotRadius = NETDATA.dataAttribute(state.element, 'sparkline-spotradius', undefined);
+ let valueSpots = NETDATA.dataAttribute(state.element, 'sparkline-valuespots', undefined);
+ let highlightSpotColor = NETDATA.dataAttribute(state.element, 'sparkline-highlightspotcolor', undefined);
+ let highlightLineColor = NETDATA.dataAttribute(state.element, 'sparkline-highlightlinecolor', undefined);
+ let lineWidth = NETDATA.dataAttribute(state.element, 'sparkline-linewidth', undefined);
+ let normalRangeMin = NETDATA.dataAttribute(state.element, 'sparkline-normalrangemin', undefined);
+ let normalRangeMax = NETDATA.dataAttribute(state.element, 'sparkline-normalrangemax', undefined);
+ let drawNormalOnTop = NETDATA.dataAttribute(state.element, 'sparkline-drawnormalontop', undefined);
+ let xvalues = NETDATA.dataAttribute(state.element, 'sparkline-xvalues', undefined);
+ let chartRangeClip = NETDATA.dataAttribute(state.element, 'sparkline-chartrangeclip', undefined);
+ let chartRangeMinX = NETDATA.dataAttribute(state.element, 'sparkline-chartrangeminx', undefined);
+ let chartRangeMaxX = NETDATA.dataAttribute(state.element, 'sparkline-chartrangemaxx', undefined);
+ let disableInteraction = NETDATA.dataAttributeBoolean(state.element, 'sparkline-disableinteraction', false);
+ let disableTooltips = NETDATA.dataAttributeBoolean(state.element, 'sparkline-disabletooltips', false);
+ let disableHighlight = NETDATA.dataAttributeBoolean(state.element, 'sparkline-disablehighlight', false);
+ let highlightLighten = NETDATA.dataAttribute(state.element, 'sparkline-highlightlighten', 1.4);
+ let highlightColor = NETDATA.dataAttribute(state.element, 'sparkline-highlightcolor', undefined);
+ let tooltipContainer = NETDATA.dataAttribute(state.element, 'sparkline-tooltipcontainer', undefined);
+ let tooltipClassname = NETDATA.dataAttribute(state.element, 'sparkline-tooltipclassname', undefined);
+ let tooltipFormat = NETDATA.dataAttribute(state.element, 'sparkline-tooltipformat', undefined);
+ let tooltipPrefix = NETDATA.dataAttribute(state.element, 'sparkline-tooltipprefix', undefined);
+ let tooltipSuffix = NETDATA.dataAttribute(state.element, 'sparkline-tooltipsuffix', ' ' + state.units_current);
+ let tooltipSkipNull = NETDATA.dataAttributeBoolean(state.element, 'sparkline-tooltipskipnull', true);
+ let tooltipValueLookups = NETDATA.dataAttribute(state.element, 'sparkline-tooltipvaluelookups', undefined);
+ let tooltipFormatFieldlist = NETDATA.dataAttribute(state.element, 'sparkline-tooltipformatfieldlist', undefined);
+ let tooltipFormatFieldlistKey = NETDATA.dataAttribute(state.element, 'sparkline-tooltipformatfieldlistkey', undefined);
+ let numberFormatter = NETDATA.dataAttribute(state.element, 'sparkline-numberformatter', function (n) {
+ return n.toFixed(2);
+ });
+ let numberDigitGroupSep = NETDATA.dataAttribute(state.element, 'sparkline-numberdigitgroupsep', undefined);
+ let numberDecimalMark = NETDATA.dataAttribute(state.element, 'sparkline-numberdecimalmark', undefined);
+ let numberDigitGroupCount = NETDATA.dataAttribute(state.element, 'sparkline-numberdigitgroupcount', undefined);
+ let animatedZooms = NETDATA.dataAttributeBoolean(state.element, 'sparkline-animatedzooms', false);
+
+ if (spotColor === 'disable') {
+ spotColor = '';
+ }
+ if (minSpotColor === 'disable') {
+ minSpotColor = '';
+ }
+ if (maxSpotColor === 'disable') {
+ maxSpotColor = '';
+ }
+
+ // state.log('sparkline type ' + type + ', lineColor: ' + lineColor + ', fillColor: ' + fillColor);
+
+ state.sparkline_options = {
+ type: type,
+ lineColor: lineColor,
+ fillColor: fillColor,
+ chartRangeMin: chartRangeMin,
+ chartRangeMax: chartRangeMax,
+ composite: composite,
+ enableTagOptions: enableTagOptions,
+ tagOptionPrefix: tagOptionPrefix,
+ tagValuesAttribute: tagValuesAttribute,
+ disableHiddenCheck: disableHiddenCheck,
+ defaultPixelsPerValue: defaultPixelsPerValue,
+ spotColor: spotColor,
+ minSpotColor: minSpotColor,
+ maxSpotColor: maxSpotColor,
+ spotRadius: spotRadius,
+ valueSpots: valueSpots,
+ highlightSpotColor: highlightSpotColor,
+ highlightLineColor: highlightLineColor,
+ lineWidth: lineWidth,
+ normalRangeMin: normalRangeMin,
+ normalRangeMax: normalRangeMax,
+ drawNormalOnTop: drawNormalOnTop,
+ xvalues: xvalues,
+ chartRangeClip: chartRangeClip,
+ chartRangeMinX: chartRangeMinX,
+ chartRangeMaxX: chartRangeMaxX,
+ disableInteraction: disableInteraction,
+ disableTooltips: disableTooltips,
+ disableHighlight: disableHighlight,
+ highlightLighten: highlightLighten,
+ highlightColor: highlightColor,
+ tooltipContainer: tooltipContainer,
+ tooltipClassname: tooltipClassname,
+ tooltipChartTitle: state.title,
+ tooltipFormat: tooltipFormat,
+ tooltipPrefix: tooltipPrefix,
+ tooltipSuffix: tooltipSuffix,
+ tooltipSkipNull: tooltipSkipNull,
+ tooltipValueLookups: tooltipValueLookups,
+ tooltipFormatFieldlist: tooltipFormatFieldlist,
+ tooltipFormatFieldlistKey: tooltipFormatFieldlistKey,
+ numberFormatter: numberFormatter,
+ numberDigitGroupSep: numberDigitGroupSep,
+ numberDecimalMark: numberDecimalMark,
+ numberDigitGroupCount: numberDigitGroupCount,
+ animatedZooms: animatedZooms,
+ width: state.chartWidth(),
+ height: state.chartHeight()
+ };
+
+ $(state.element_chart).sparkline(data.result, state.sparkline_options);
+
+ return true;
+};