☰

Fintual Goal Variation

Easily display profit/loss on the profitability chart.

// ==UserScript==
// @name           Fintual Goal Variation
// @name:es        Fintual variación de objetivos
// @namespace      http://tampermonkey.net/
// @version        0.4
// @description    Easily display profit/loss on the profitability chart.
// @description:es Muestra fácilmente la ganancia/pérdida en el gráfico de rentabilidad.
// @author         IgnaV
// @match          https://fintual.cl/app/goals/*
// @icon           http://fintual.cl/favicon.ico
// @grant          none
// ==/UserScript==

(function() {
    'use strict';

    const showHistory = false;

    const containerHeightStyle = document.createElement('style');
    document.head.appendChild(containerHeightStyle);
    const updateContainerHeight = elements => {
        containerHeightStyle.textContent = `div.nvtooltip.performance-tooltip { top: -${22 * elements}px !important }`;
    };
    updateContainerHeight(2);

    const history = {};
    let diff, date, clickDiff, clickDate;

    const calculatePercentage = (value, total) => ((value / total) * 100).toFixed(1);

    const getLegendBgColor = value => (value >= 0 ? 'rgb(43, 214, 0)' : 'rgb(214, 0, 0)');

    const formatNumber = number => number.toLocaleString('es-CL', { useGrouping: true });

    const addRowToTable = (tbody, label, percentage, value, color) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td class="legend-color-guide"><div style="background-color: ${color};"></div></td>
            <td class="key">${label}</td>
            <td class="value">(${percentage}%) $ ${value}</td>`;
        tbody.appendChild(row);
    };

    const updateDateContent = (tdDate, esDateStr, weekDayName) => {
        tdDate.textContent = `${esDateStr} | ${weekDayName}`;
        if (clickDate !== undefined) {
            const betweenDays = Math.round((date - clickDate) / (1000 * 60 * 60 * 24));
            tdDate.textContent += ` | ${betweenDays} ${betweenDays === 1 ? "día" : "días"}`;
        }
    };

    const observeTableChanges = targetElement => {
        const tableObserver = new MutationObserver(mutationsList => {
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                    for (const node of mutation.addedNodes) {
                        if (node.tagName === 'TABLE') {
                            const table = node;
                            const tdDate = table.querySelector('thead > tr > td > strong');
                            const tbody = table.querySelector('tbody');
                            const existingRows = tbody.querySelectorAll('tr');
                            const depositAmount = parseFloat(existingRows[0].querySelectorAll('td')[2].textContent.replace(/[^0-9-]+/g, ''));
                            const fintualBalance = parseFloat(existingRows[1].querySelectorAll('td')[2].textContent.replace(/[^0-9-]+/g, ''));
                            diff = fintualBalance - depositAmount;

                            const diffPercentage = calculatePercentage(diff, depositAmount);
                            const legendBgColor = getLegendBgColor(diff);
                            const formattedDiff = formatNumber(diff);

                            addRowToTable(tbody, 'Balance', diffPercentage, formattedDiff, legendBgColor);

                            let [esDateStr, weekDayName] = tdDate.textContent.split(' ');
                            const dateParts = esDateStr.split('/');
                            const year = '20' + dateParts[2];
                            const month = dateParts[1];
                            const day = dateParts[0];
                            const enDateStr = `${year}-${month}-${day}`;

                            if (!weekDayName) {
                                date = new Date(year, month - 1, day);
                                const weekDayNames = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
                                weekDayName = weekDayNames[date.getDay()];
                                updateDateContent(tdDate, esDateStr, weekDayName);
                            }

                            history[enDateStr] = diff;

                            if (showHistory) {
                                console.log(Object.keys(history).sort().reduce((acc, key) => (acc[key] = history[key], acc), {}));
                            }

                            const previousDate = Object.keys(history).sort().reverse().find(key => key < enDateStr);
                            if (previousDate !== undefined) {
                                const previousDiff = history[previousDate];
                                const balanceDiff = diff - previousDiff;
                                const balanceDiffPercentage = calculatePercentage(balanceDiff, depositAmount);
                                const balanceLegendBgColor = getLegendBgColor(balanceDiff);
                                const balanceFormattedDiff = formatNumber(balanceDiff);

                                addRowToTable(tbody, 'Diferencia', balanceDiffPercentage, balanceFormattedDiff, balanceLegendBgColor);
                            }

                            if (clickDiff !== undefined) {
                                const balanceDiff = diff - clickDiff;
                                const balanceDiffPercentage = calculatePercentage(balanceDiff, depositAmount);
                                const balanceLegendBgColor = getLegendBgColor(balanceDiff);
                                const balanceFormattedDiff = formatNumber(balanceDiff);

                                addRowToTable(tbody, 'Diferencia click', balanceDiffPercentage, balanceFormattedDiff, balanceLegendBgColor);
                                updateContainerHeight(3);
                            } else {
                                updateContainerHeight(2);
                            }
                        }
                    }
                }
            }
        });

        const tableObserverOptions = {
            childList: true,
            subtree: true
        };
        tableObserver.observe(targetElement, tableObserverOptions);
        return tableObserver;
    };

    let prev;
    const rootObserver = new MutationObserver(mutationsList => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                const targetElement = document.querySelector('div.nvtooltip.performance-tooltip');
                if (targetElement) {
                    if (prev) prev.disconnect();
                    prev = observeTableChanges(targetElement);
                    rootObserver.disconnect();
                }
            }
        }
    });

    const rootObserverOptions = {
        childList: true,
        subtree: true
    };
    rootObserver.observe(document.body, rootObserverOptions);

    const removeLastClick = () => {
        clickDiff = clickDate = undefined;
        const lastClickElement = document.querySelector('.last-click');
        if (lastClickElement) {
            lastClickElement.remove();
        }
    };

    document.addEventListener('click', event => {
        if (event.target.matches('g.nv-focus, g.nv-focus *')) {
            removeLastClick();
            clickDiff = diff;
            clickDate = date;
            const guideLine = document.querySelector('.nv-interactiveGuideLine');
            const clonedGuideLine = guideLine.cloneNode(true);
            clonedGuideLine.classList.add('last-click');
            guideLine.parentNode.insertBefore(clonedGuideLine, guideLine.nextSibling);
        }
    });

    document.addEventListener('dblclick', removeLastClick);
})();