zkt24-sk1/assets/vendor/charts/chartist-bundle/chartist-plugin-threshold.js

129 lines
4.1 KiB
JavaScript
Raw Permalink Normal View History

2024-05-06 10:30:03 +00:00
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], function () {
return (root.returnExportsGlobal = factory());
});
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like enviroments that support module.exports,
// like Node.
module.exports = factory();
} else {
root['Chartist.plugins.ctThreshold'] = factory();
}
}(this, function () {
/**
* Chartist.js plugin to display a data label on top of the points in a line chart.
*
*/
/* global Chartist */
(function (window, document, Chartist) {
'use strict';
var defaultOptions = {
threshold: 0,
classNames: {
aboveThreshold: 'ct-threshold-above',
belowThreshold: 'ct-threshold-below'
},
maskNames: {
aboveThreshold: 'ct-threshold-mask-above',
belowThreshold: 'ct-threshold-mask-below'
}
};
function createMasks(data, options) {
// Select the defs element within the chart or create a new one
var defs = data.svg.querySelector('defs') || data.svg.elem('defs');
// Project the threshold value on the chart Y axis
var projectedThreshold = data.chartRect.height() - data.axisY.projectValue(options.threshold) + data.chartRect.y2;
var width = data.svg.width();
var height = data.svg.height();
// Create mask for upper part above threshold
defs
.elem('mask', {
x: 0,
y: 0,
width: width,
height: height,
id: options.maskNames.aboveThreshold
})
.elem('rect', {
x: 0,
y: 0,
width: width,
height: projectedThreshold,
fill: 'white'
});
// Create mask for lower part below threshold
defs
.elem('mask', {
x: 0,
y: 0,
width: width,
height: height,
id: options.maskNames.belowThreshold
})
.elem('rect', {
x: 0,
y: projectedThreshold,
width: width,
height: height - projectedThreshold,
fill: 'white'
});
return defs;
}
Chartist.plugins = Chartist.plugins || {};
Chartist.plugins.ctThreshold = function (options) {
options = Chartist.extend({}, defaultOptions, options);
return function ctThreshold(chart) {
if (chart instanceof Chartist.Line || chart instanceof Chartist.Bar) {
chart.on('draw', function (data) {
if (data.type === 'point') {
// For points we can just use the data value and compare against the threshold in order to determine
// the appropriate class
data.element.addClass(
data.value.y >= options.threshold ? options.classNames.aboveThreshold : options.classNames.belowThreshold
);
} else if (data.type === 'line' || data.type === 'bar' || data.type === 'area') {
// Cloning the original line path, mask it with the upper mask rect above the threshold and add the
// class for above threshold
data.element
.parent()
.elem(data.element._node.cloneNode(true))
.attr({
mask: 'url(#' + options.maskNames.aboveThreshold + ')'
})
.addClass(options.classNames.aboveThreshold);
// Use the original line path, mask it with the lower mask rect below the threshold and add the class
// for blow threshold
data.element
.attr({
mask: 'url(#' + options.maskNames.belowThreshold + ')'
})
.addClass(options.classNames.belowThreshold);
}
});
// On the created event, create the two mask definitions used to mask the line graphs
chart.on('created', function (data) {
createMasks(data, options);
});
}
};
}
}(window, document, Chartist));
return Chartist.plugins.ctThreshold;
}));