ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / niazsaze / public_html / wp-content / plugins / wp-statistics / assets / dev / javascript / meta-box

wps_js.render_wp_statistics_post_summary_widget = function(response, key){
    const post_summary_chart =   (elementId, args = []) => {
        let postChartData = args.postChartData;
        let postChartSettings = [];
        let postChartTooltipLabel = 'Visitors';
        let $postChartColor = '#A5AAEA';
        let gradient;

if (typeof (args.postChartSettings) !== 'undefined' && args.postChartSettings !== null) {
            postChartSettings = args.postChartSettings;
            if (postChartSettings.color) $postChartColor = postChartSettings.color;
            if (postChartSettings.label)  postChartTooltipLabel = postChartSettings.label;
        }

const externalTooltipHandler = (context) => {
            const { chart, tooltip } = context;

let tooltipEl = chart.canvas.parentNode.querySelector('div');
            if (!tooltipEl) {
                tooltipEl = document.createElement('div');
                tooltipEl.classList.add('c-wps-mini-chart-post-summary-tooltip');
                chart.canvas.parentNode.appendChild(tooltipEl);
            }

if (tooltip.opacity === 0) {
                tooltipEl.style.opacity = 0;
                return;
            }

if (tooltip.body) {
                const titleLines = tooltip.title || [];
                const bodyLines = tooltip.body.map(b => b.lines);
                let innerHtml = `<div>`;

// Title
                titleLines.forEach(title => {
                    innerHtml += `<div class="chart-title">${title}</div>`;
                });

bodyLines.forEach((body, i) => {
                    const line = body.join(': ');
                    innerHtml += `<div>${line}</div>`;
                });

tooltipEl.innerHTML = innerHtml;
                const { offsetLeft: positionX, offsetTop: positionY, offsetWidth: canvasWidth, offsetHeight: canvasHeight } = chart.canvas;
                tooltipEl.style.opacity = bodyLines[0].length === 0 ? 0 : 1;
                const tooltipWidth = tooltipEl.offsetWidth;

let left = positionX + tooltip.caretX - tooltipWidth / 2;
                let top = positionY + canvasHeight;

if (left < positionX) {
                    left = positionX;
                }

if (left + tooltipWidth > positionX + canvasWidth) {
                    left = positionX + canvasWidth - tooltipWidth;
                }

tooltipEl.style.left = `${left}px`;
                tooltipEl.style.top = `${top}px`;
            }
        };

const chartContext = jQuery('#' + elementId)[0].getContext('2d');
        const chartData= Object.entries(postChartData).map(([date, stat]) => stat.hits);
        const type= chartData.length <= 30 ? 'bar' : 'line';

if (type === 'line') {
            gradient = chartContext.createLinearGradient(0, 0, 0, chartContext.canvas.height - 10);
            gradient.addColorStop(0, wps_js.hex_to_rgba($postChartColor,1));
            gradient.addColorStop(0.5, wps_js.hex_to_rgba($postChartColor,0.25));
            gradient.addColorStop(0.75, wps_js.hex_to_rgba($postChartColor,0));
            gradient.addColorStop(1, wps_js.hex_to_rgba($postChartColor,0));
        }

const getBackgroundColor = ([date, value]) => {
            const backgroundColor = value.hits === 0 ? '#000000b3' : wps_js.hex_to_rgba($postChartColor, 0.5);
            return backgroundColor;
        };

const getHoverBackgroundColor = ([date, value]) => {
            const hoverBackgroundColor = value.hits === 0 ? '#000000b3' : $postChartColor;
            return hoverBackgroundColor;
        };

new Chart(chartContext, {
            type: type,
            data: {
                labels: Object.entries(postChartData).map(([date, stat]) => date),
                datasets: [{
                    data: chartData,
                    backgroundColor:type === 'line' ? gradient : Object.entries(postChartData).map(getBackgroundColor),
                    hoverBackgroundColor: type === 'line' ? gradient : Object.entries(postChartData).map(getHoverBackgroundColor),
                    pointBackgroundColor: $postChartColor,
                    fill: type === 'line',
                    barPercentage: 0.9,
                    categoryPercentage: 1.0,
                    tension: 0.5,
                    minBarLength: 1,
                    borderWidth: type === 'line' ? 1 : 0,
                    pointRadius: type === 'line' ? 0 : undefined,
                    pointHoverRadius: type === 'line' ? 5 : undefined,
                    borderColor: $postChartColor
                }],
            },
            options: chartOptions,
        });
    }
    if (response && response.response) {
        wps_js.metaBoxInner(key).html(response.response.output);
        if (response.response?.data) {
            let params = response.response.data;
            post_summary_chart('postSummaryChart',params )
        }
        wps_js.initDatePickerHandlers();
    }
}

[-] line-chart.js [edit]
[-] vector-map.js [edit]
[-] post-summary.js [edit]
[-] table.js [edit]
[-] horizontal-bar.js [edit]
[-] traffic-hour.js [edit]
[-] countries.js [edit]
[-] pages.js [edit]
[+] ..
[-] post.js [edit]