ok
Direktori : /home2/selectio/www/3-idiots/public/assets/back-end/js/ |
Current File : //home2/selectio/www/3-idiots/public/assets/back-end/js/hs.chartjs-matrix.js |
/* * Chart.js wrapper * @version: 2.0.0 (Mon, 25 Nov 2019) * @requires: jQuery v3.0 or later, Chart.js v2.8.0 * @author: HtmlStream * @event-namespace: .HSCore.components.HSValidation * @license: Htmlstream Libraries (https://htmlstream.com/licenses) * Copyright 2020 Htmlstream */ ;(function ($) { 'use strict'; $.HSCore.components.HSChartMatrixJS = { defaults: { type: 'matrix', options: { animation: { duration: 0 }, responsive: true, maintainAspectRatio: false, legend: { display: false }, tooltips: { enabled: false, mode: 'nearest' }, gradientPosition: { x0: 0, y0: 0, x1: 0, y1: 0, } } }, init: function (el, options) { if (!el.length) return; var context = this, defaults = Object.assign({}, context.defaults), dataSettings = el.attr('data-hs-chartjs-options') ? JSON.parse(el.attr('data-hs-chartjs-options')) : {}, settings = {}; settings = $.extend(true, dataSettings.type, defaults); settings = $.extend(true, settings, { options: { tooltips: { custom: function (tooltipModel) { // Tooltip Element var tooltipEl = document.getElementById('chartjsTooltip'); // Create element on first render if (!tooltipEl) { tooltipEl = document.createElement('div'); tooltipEl.id = 'chartjsTooltip'; tooltipEl.style.opacity = 0; tooltipEl.classList.add('hs-chartjs-tooltip-wrap'); tooltipEl.classList.add('hs-chartjs-tooltip-matrix'); tooltipEl.innerHTML = '<div class="hs-chartjs-tooltip"></div>'; document.body.appendChild(tooltipEl); } // Hide if no tooltip if (settings.type !== 'matrix' && tooltipModel.opacity === 0) { tooltipEl.style.opacity = 0; tooltipEl.remove() return; } // Set caret Position tooltipEl.classList.remove('above', 'below', 'no-transform'); if (tooltipModel.yAlign) { tooltipEl.classList.add(tooltipModel.yAlign); } else { tooltipEl.classList.add('no-transform'); } function getBody(bodyItem) { return bodyItem.lines; } // Set Text if (tooltipModel.body) { var titleLines = tooltipModel.title || [], bodyLines = tooltipModel.body.map(getBody), today = new Date(); var innerHtml = '<header class="hs-chartjs-tooltip-header">'; titleLines.forEach(function (title) { innerHtml += title + ', ' + today.getFullYear(); }); innerHtml += '</header><div class="hs-chartjs-tooltip-body">'; bodyLines.forEach(function (body, i) { innerHtml += '<div>' var oldBody = body[0], newBody = oldBody, color = tooltipModel.labelColors[i].backgroundColor instanceof Object ? tooltipModel.labelColors[i].borderColor : tooltipModel.labelColors[i].backgroundColor; innerHtml += (settings.options.tooltips.hasIndicator ? '<span class="d-inline-block rounded-circle mr-1" style="width: ' + settings.options.tooltips.indicatorWidth + '; height: ' + settings.options.tooltips.indicatorHeight + '; background-color: ' + color + '"></span>' : '') + (oldBody.length > 3 ? newBody : body); innerHtml += '</div>' }); innerHtml += '</div>'; var tooltipRoot = tooltipEl.querySelector('.hs-chartjs-tooltip'); tooltipRoot.innerHTML = innerHtml; } // `this` will be the overall tooltip var position = this._chart.canvas.getBoundingClientRect(); // Display, position, and set styles for font tooltipEl.style.opacity = 1; tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX - (tooltipEl.offsetWidth / 2) - 3 + 'px'; tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY - tooltipEl.offsetHeight - 25 + 'px'; tooltipEl.style.pointerEvents = 'none'; tooltipEl.style.transition = settings.options.tooltips.transition; } } } }, dataSettings, settings, options); if (settings.options.hasOwnProperty('matrixBackgroundColor')) { settings.data.datasets.forEach(function(datasets) { datasets.backgroundColor = function(ctx) { var value = ctx.dataset.data[ctx.dataIndex].v; var additionToValue = settings.options.matrixBackgroundColor.hasOwnProperty('additionToValue') ? settings.options.matrixBackgroundColor.additionToValue : 5; var alpha = (additionToValue + value) / settings.options.matrixBackgroundColor.accent; if (value.toFixed() == 0 && settings.options.matrixBackgroundColor.hasOwnProperty('nullColor')) { return Color(settings.options.matrixBackgroundColor.nullColor).rgbString(); } else { return Color(settings.options.matrixBackgroundColor.color).alpha(alpha).rgbString(); } }; }) } if (settings.options.hasOwnProperty('matrixLegend')) { var min = settings.data.datasets[0].data[0].v; var max = settings.data.datasets[0].data[0].v; for (var i = 1; i < settings.data.datasets[0].data.length; i++) { if (settings.data.datasets[0].data[i].v < min) min = settings.data.datasets[0].data[i].v; if (settings.data.datasets[0].data[i].v > max) max = settings.data.datasets[0].data[i].v; } min = min.toFixed(); max = max.toFixed(); var html = [], stepSize = settings.options.matrixLegend.hasOwnProperty('stepSize') ? settings.options.matrixLegend.stepSize : (max / 10), additionToValue = settings.options.matrixBackgroundColor.hasOwnProperty('additionToValue') ? settings.options.matrixBackgroundColor.additionToValue : 5; $(settings.options.matrixLegend.container).addClass('hs-chartjs-matrix-legend') $(settings.options.matrixLegend.container).append('<li class="hs-chartjs-matrix-legend-min">' + min + '</li>') for (var i = 0; i < max;) { var value = i; var alpha = (additionToValue + value) / settings.options.matrixBackgroundColor.accent; html.push('<li class="hs-chartjs-matrix-legend-item" style="background-color: ' + Color(settings.options.matrixBackgroundColor.color).alpha(alpha).rgbString() + '"></li>'); i = i + stepSize; } $(settings.options.matrixLegend.container).append(html) if (settings.options.matrixLegend.metric && max > 100) { if (max < 1000000) { max = max / 1000 + 'k'; } else { max = max / 1000000 + 'kk'; } } $(settings.options.matrixLegend.container).append('<li class="hs-chartjs-matrix-legend-max">' + max + '</li>') } window.addEventListener('mousemove', function (e) { if (!$(e.target).hasClass('chartjs-render-monitor')) { $('.hs-chartjs-tooltip-matrix').remove() } }); /* Start : Init */ var newChartJS = new Chart(el, settings); /* End : Init */ return newChartJS; } }; })(jQuery);