mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
263 lines
7.5 KiB
JavaScript
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);
|
|
}
|
|
});
|
|
|
|
|