Files
safekat/httpdocs/themes/focus2/vendor/chart.heatmap.js/Chart.HeatMap.js
2023-04-24 13:00:46 +02:00

263 lines
7.5 KiB
JavaScript

// Return with commas in between
var numberWithCommas = function (x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
var helpers = Chart.helpers;
Chart.HeatMapPlugin = Chart.PluginBase.extend({
beforeInit: function (chart) {
if (chart.config.type === 'heatmap') {
// Keep the y-axis in sync with the datasets
chart.data.yLabels = chart.data.datasets.map(function (ds) {
return ds.label;
});
}
},
beforeUpdate: function (chart) {
if (chart.config.type === 'heatmap') {
// Keep the y-axis in sync with the datasets
chart.data.yLabels = chart.data.datasets.map(function (ds) {
return ds.label;
});
}
},
});
Chart.plugins.register(new Chart.HeatMapPlugin());
Chart.defaults.heatmap = {
radiusScale: 0,
paddingScale: 0,
colorFunction: function (value, minVal, maxVal, colorScheme) {
return getColorForPercentage(value, minVal, maxVal, colorScheme);
},
colorGradiant: 'YellowToRed',
hover: {
mode: 'single'
},
legend: {
display: false,
displayCustom: true,
position: 'right',
},
scales: {
xAxes: [{
type: 'category',
position: 'bottom',
gridLines: {
display: false,
offsetGridLines: true,
drawBorder: false,
drawTicks: false
}
}],
yAxes: [{
type: 'category',
position: 'left',
gridLines: {
display: false,
offsetGridLines: true,
drawBorder: false,
drawTicks: false
}
}]
}
};
Chart.controllers.heatmap = Chart.DatasetController.extend({
dataElementType: Chart.elements.Rectangle,
minDataSetValue: function (){
var returnValue = 0;
var tmpValue = 0;
var dataset = this.chart.data.datasets;
for (var xx = 0; xx < dataset.length; xx++){
if(xx == 0){
returnValue = Math.min.apply(Math, dataset[xx].data);
}
else{
tmpValue = Math.min.apply(Math, dataset[xx].data);
if (tmpValue < returnValue) {
returnValue = tmpValue;
}
}
}
return returnValue;
},
maxDataSetValue: function () {
var returnValue = 0;
var tmpValue = 0;
var dataset = this.chart.data.datasets;
for (var xx = 0; xx < dataset.length; xx++) {
if (xx == 0) {
returnValue = Math.max.apply(Math, dataset[xx].data);
}
else {
tmpValue = Math.max.apply(Math, dataset[xx].data);
if (tmpValue > returnValue) {
returnValue = tmpValue;
}
}
}
return returnValue;
},
update: function (reset) {
var me = this;
var meta = me.getMeta();
var boxes = meta.data;
// Update Boxes
helpers.each(boxes, function (box, index) {
me.updateElement(box, index, reset);
});
},
updateElement: function (box, index) {
var me = this;
var meta = me.getMeta();
var xScale = me.getScaleForId(meta.xAxisID);
var yScale = me.getScaleForId(meta.yAxisID);
var dataset = me.getDataset();
var data = dataset.data[index];
var datasetIndex = me.index;
var radiusScale = me.chart.options.radiusScale;
var paddingScale = me.chart.options.paddingScale;
var x = xScale.getPixelForValue(data, index, datasetIndex);
var y = yScale.getPixelForValue(data, datasetIndex, datasetIndex);
var boxWidth = 0;
if (dataset.data.length > 1) {
var x0 = xScale.getPixelForValue(dataset.data[0], 0, datasetIndex);
var x1 = xScale.getPixelForValue(dataset.data[1], 1, datasetIndex);
boxWidth = x1 - x0;
} else {
boxWidth = xScale.width;
}
var boxHeight = 0;
if (me.chart.data.datasets.length > 1) {
// We only support 'category' scales on the y-axis for now
boxHeight = yScale.getPixelForValue(null, 1, 1) - yScale.getPixelForValue(null, 0, 0);
} else {
boxHeight = yScale.height;
}
// Apply padding
var horizontalPadding = paddingScale * boxWidth;
var verticalPadding = paddingScale * boxHeight;
boxWidth = boxWidth - horizontalPadding;
boxHeight = boxHeight - verticalPadding;
y = y + verticalPadding / 2;
x = x + horizontalPadding / 2;
var color = me.chart.options.colorFunction(data, me.minDataSetValue(), me.maxDataSetValue(), me.chart.options.colorGradiant);
var cornerRadius = boxWidth * radiusScale;
helpers.extend(box, {
// Utility
_xScale: xScale,
_yScale: yScale,
_datasetIndex: datasetIndex,
_index: index,
_data: data,
// Desired view properties
_model: {
// Position
x: x + boxWidth / 2,
y: y,
// Appearance
base: y + boxHeight,
height: boxHeight,
width: boxWidth,
backgroundColor: color,
cornerRadius: cornerRadius,
// Tooltip
label: me.chart.data.labels[index],
datasetLabel: dataset.label,
},
// Override to draw rounded rectangles without any borders
draw: function () {
var ctx = this._chart.ctx;
var vm = this._view;
var leftX = vm.x - (vm.width) / 2;
ctx.fillStyle = vm.backgroundColor;
helpers.drawRoundedRectangle(ctx, leftX, vm.y, vm.width, vm.height, vm.cornerRadius);
ctx.fill();
},
// Override to position the tooltip in the center of the box
tooltipPosition: function () {
var vm = this._view;
return {
x: vm.x,
y: vm.y + vm.height / 2
};
}
});
box.pivot();
},
setHoverStyle: function () {
// TODO: Implement this
},
removeHoverStyle: function () {
// TODO: Implement this
}
});
function getYellowToRedColor(colorSelectionCount, value) {
var incroment = 100 / colorSelectionCount;
var colorIncroment = 255 / colorSelectionCount;
for (var ii = 1; ii <= colorSelectionCount; ii++) {
if ((ii * incroment) >= value) {
return "rgb(255, " + Math.ceil(255 - (ii * colorIncroment)) + ", 0)";
}
}
return "rgb(255, 255, 0)";
}
function getGreenToBlueColor(colorSelectionCount, value) {
var incroment = 100 / colorSelectionCount;
var colorIncroment = 255 / colorSelectionCount;
for (var ii = 1; ii <= colorSelectionCount; ii++) {
if ((ii * incroment) >= value) {
return "rgb(0, " + Math.ceil(255 - (ii * colorIncroment)) + ", 255)";
}
}
return "rgb(0, 255, 255)";
}
//sets the chart background to white
Chart.plugins.register({
beforeDraw: function (chartInstance) {
var ctx = chartInstance.chart.ctx;
ctx.fillStyle = "white";
ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
}
});