☰

CSStats Match ADR Trend Chart

Показывает тренд роста ADR с графиком и сглаживанием на csstats.gg/player/*#/matches

// ==UserScript==
// @name         CSStats Match ADR Trend Chart
// @namespace    http://github.com/dykomenko
// @version      1.0
// @description  Показывает тренд роста ADR с графиком и сглаживанием на csstats.gg/player/*#/matches
// @author       dykomenko
// @match        https://csstats.gg/player/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const style = document.createElement("style");
    style.innerHTML = `
        tbody > tr > td:nth-child(11) {
            background-color: #3d434729 !important;
        }
        #chartContainer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 250px;
            background: #1a1a1a;
            z-index: 9999;
            padding: 10px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
        }
    `;
    document.head.appendChild(style);

    let chart, chartContainer, canvas;

    function loadChartJs(callback) {
        if (window.Chart) {
            callback();
            return;
        }
        const script = document.createElement("script");
        script.src = "https://cdn.jsdelivr.net/npm/chart.js";
        script.onload = callback;
        document.body.appendChild(script);
    }

    function movingAverage(data, windowSize = 5) {
        return data.map((_, idx, arr) => {
            const start = Math.max(0, idx - Math.floor(windowSize / 2));
            const end = Math.min(arr.length, idx + Math.ceil(windowSize / 2));
            const subset = arr.slice(start, end);
            return subset.reduce((sum, val) => sum + val, 0) / subset.length;
        });
    }

    function buildChart() {
        const cells = document.querySelectorAll("tbody > tr > td:nth-child(11)");
        const values = Array.from(cells)
            .map(cell => parseInt(cell.textContent.trim()))
            .filter(num => !isNaN(num));

        if (values.length === 0) return;

        const smoothed = movingAverage(values, 10);

        if (!chart) {
            chartContainer = document.createElement("div");
            chartContainer.id = "chartContainer";

            canvas = document.createElement("canvas");
            canvas.id = "chartCanvas";
            chartContainer.appendChild(canvas);

            document.body.appendChild(chartContainer);

            const ctx = canvas.getContext("2d");
            chart = new Chart(ctx, {
                type: "line",
                data: {
                    labels: values.map((_, i) => i + 1),
                    datasets: [
                        {
                            label: "ADR (raw)",
                            data: values,
                            borderColor: "lime",
                            backgroundColor: "rgba(0,255,0,0.2)",
                            fill: false,
                            tension: 0.2
                        },
                        {
                            label: "ADR (smoothed)",
                            data: smoothed,
                            borderColor: "dodgerblue",
                            borderWidth: 2,
                            fill: false,
                            tension: 0.3
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            suggestedMax: 150
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                color: "#eee"
                            }
                        }
                    }
                }
            });
        } else {
            chart.data.labels = values.map((_, i) => i + 1);
            chart.data.datasets[0].data = values;
            chart.data.datasets[1].data = smoothed;
            chart.update();
        }
    }

    function initChartLogic() {
        loadChartJs(() => {
            setTimeout(() => {
                buildChart();

                const targetNode = document.querySelector("tbody");
                if (!targetNode) return;

                const observer = new MutationObserver(() => {
                    buildChart();
                });

                observer.observe(targetNode, {
                    childList: true,
                    subtree: true
                });
            }, 1000);
        });
    }

    function watchUrlAndInit() {
        let lastPath = "";
        setInterval(() => {
            const hash = location.hash;
            if (hash.includes("/matches") && hash !== lastPath) {
                lastPath = hash;
                chart = null; // сброс графика
                initChartLogic();
            }
        }, 1000);
    }

    watchUrlAndInit();
})();