src/web/gui/src/dashboard.js/charting/sparkline.js
// ----------------------------------------------------------------------------------------------------------------
// 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;
};