smartxtrader 3.8.1-xm.0

package/src/javascript/app/common/trade_reports_modal.js

@@ -0,0 +1,665 @@
+const moment               = require('moment');
+const BinarySocket         = require('../base/socket');
+const Client               = require('../base/client');
+const localize             = require('../../_common/localize').localize;
+const { formatMoney }      = require('../../_common/base/currency_base');
+const getElementById       = require('../../_common/common_functions').getElementById;
+const applyToAllElements   = require('../../_common/utility').applyToAllElements;
+const ViewPopup            = require('../pages/user/view_popup/view_popup');
+
+const TradeReportsModal = (() => {
+    let modal;
+    let close_button;
+    let status_el;
+    let summary_el;
+    let rows_container;
+    let backdrop;
+    let chart_button;
+    let chart_panel;
+    let chart_close_button;
+    let chart_canvas;
+    let chart_controls;
+    let chart_status;
+    let chart_style_menu;
+    let chart_style_toggle;
+    let chart_style_reset;
+    let chart_style_inputs;
+    let chart_zoom_inputs;
+    let chart_zoom_status;
+    let chart_zoom_reset;
+    let limit_select;
+
+    let chart_instance;
+    let ChartJS;
+    let latest_transactions = [];
+
+    const chart_style_defaults = {
+        chartType    : 'line',
+        lineWidth    : 2,
+        lineStyle    : 'solid',
+        pointRadius  : 3,
+        pointStyle   : 'circle',
+        tension      : 0.35,
+        chartHeight  : 380,
+        gridWidth    : 1,
+        tickFontSize : 10,
+        legendFontSize: 12,
+        maxTicks     : 6,
+    };
+
+    const chart_style_state = { ...chart_style_defaults };
+    const chart_window_defaults = { start: 0, end: 100 };
+    const chart_window_state = { ...chart_window_defaults };
+
+    const getModalElements = () => {
+        modal              = getElementById('trade-reports-modal');
+        close_button       = getElementById('trade-reports-modal__close');
+        status_el          = getElementById('trade-reports-modal__status');
+        summary_el         = getElementById('trade-reports-modal__summary');
+        rows_container     = getElementById('trade-reports-modal__rows');
+        backdrop           = modal?.querySelector('.trade-reports-modal__backdrop');
+        chart_button       = getElementById('trade-reports-modal__chart-button');
+        chart_panel        = getElementById('trade-reports-modal__chart-panel');
+        chart_close_button = getElementById('trade-reports-modal__chart-close');
+        chart_canvas       = getElementById('trade-reports-modal__chart');
+        chart_controls     = getElementById('trade-reports-modal__chart-controls');
+        chart_status       = getElementById('trade-reports-modal__chart-status');
+        chart_style_menu   = getElementById('trade-reports-modal__chart-style-menu');
+        chart_style_toggle = getElementById('trade-reports-modal__chart-style-toggle');
+        chart_style_reset  = getElementById('trade-reports-modal__chart-style-reset');
+        chart_style_inputs = chart_style_menu?.querySelectorAll('[data-style]');
+        chart_zoom_inputs  = chart_panel?.querySelectorAll('[data-zoom]');
+        chart_zoom_status  = getElementById('trade-reports-modal__chart-zoom-status');
+        chart_zoom_reset   = getElementById('trade-reports-modal__chart-zoom-reset');
+        limit_select       = getElementById('trade-reports-modal__limit');
+    };
+
+    const DEFAULT_LIMIT = 100;
+
+    const getSelectedLimit = () => {
+        if (limit_select) {
+            const value = parseInt(limit_select.value, 10);
+            if (Number.isFinite(value) && value > 0) return value;
+        }
+
+        return DEFAULT_LIMIT;
+    };
+
+    const setStatus = (message, type = 'info') => {
+        if (!status_el) return;
+        status_el.textContent = message;
+        status_el.setAttribute('data-type', type);
+    };
+
+    const formatDate = (epoch) => (epoch ? moment.unix(epoch).utc().format('DD MMM YYYY HH:mm [GMT]') : '—');
+
+    const formatAmount = (amount, currency, with_currency = true) => formatMoney(currency, amount || 0, !with_currency);
+
+    const toggleModal = (should_show) => {
+        if (!modal) return;
+        modal.classList.toggle('trade-reports-modal--open', should_show);
+        modal.setAttribute('aria-hidden', should_show ? 'false' : 'true');
+        document.body.classList.toggle('stop-scrolling', should_show);
+    };
+
+    const getCurrency = (transactions = []) => Client.get('currency') || transactions.find(txn => txn.currency)?.currency;
+
+    const getProfit = (txn) => {
+        if (typeof txn?.profit !== 'undefined' && txn.profit !== null) return +txn.profit || 0;
+
+        const sell_price = +txn?.sell_price || 0;
+        const buy_price  = +txn?.buy_price || 0;
+        return sell_price ? sell_price - buy_price : 0;
+    };
+
+    const default_metrics = ['profit'];
+    const active_metrics = new Set(default_metrics);
+    const metric_config = {
+        profit: {
+            label      : localize('Profit / loss'),
+            color      : '#34d399',
+            background : 'rgba(52, 211, 153, 0.15)',
+            description: localize('Net result of each contract'),
+            extractor  : (txn) => getProfit(txn),
+        },
+        buy_price: {
+            label      : localize('Stake'),
+            color      : '#60a5fa',
+            background : 'rgba(96, 165, 250, 0.15)',
+            description: localize('Amount you paid to open the contract'),
+            extractor  : (txn) => +txn.buy_price || 0,
+        },
+        sell_price: {
+            label      : localize('Contract value'),
+            color      : '#f59e0b',
+            background : 'rgba(245, 158, 11, 0.15)',
+            description: localize('Payout you received when selling'),
+            extractor  : (txn) => +txn.sell_price || 0,
+        },
+    };
+
+    const renderSummary = (transactions = []) => {
+        if (!summary_el) return;
+        if (!transactions.length) {
+            summary_el.textContent = '';
+            return;
+        }
+
+        const currency     = getCurrency(transactions);
+        const total_profit = transactions.reduce((acc, txn) => acc + getProfit(txn), 0);
+        const total_stake  = transactions.reduce((acc, txn) => acc + (+txn.buy_price || 0), 0);
+
+        summary_el.innerHTML = `
+            <div class="trade-reports-modal__summary-item">
+                <span>${localize('Trades')}</span>
+                <strong>${transactions.length}</strong>
+            </div>
+            <div class="trade-reports-modal__summary-item">
+                <span>${localize('Total stake')}</span>
+                <strong>${formatAmount(total_stake, currency)}</strong>
+            </div>
+            <div class="trade-reports-modal__summary-item">
+                <span>${localize('Total profit/loss')}</span>
+                <strong class="${total_profit >= 0 ? 'is-positive' : 'is-negative'}">${formatAmount(total_profit, currency)}</strong>
+            </div>
+        `;
+    };
+
+    const renderRows = (transactions = []) => {
+        if (!rows_container) return;
+        rows_container.innerHTML = '';
+
+        if (!transactions.length) {
+            const empty_row = document.createElement('div');
+            empty_row.className = 'trade-reports-modal__row trade-reports-modal__row--empty';
+            empty_row.textContent = localize('No transactions found for your account.');
+            rows_container.appendChild(empty_row);
+            return;
+        }
+
+        const currency = getCurrency(transactions);
+
+        const getOutcomeIcon = (is_positive) => (is_positive
+            ? '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+            : '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M7 17L17 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>');
+
+        const openContractDetails = (contract_id) => {
+            if (!contract_id) return;
+
+            const trigger = document.createElement('button');
+            trigger.setAttribute('contract_id', contract_id);
+            trigger.classList.add('open_contract_details');
+
+            ViewPopup.init(trigger);
+        };
+
+        transactions.forEach((txn) => {
+            const profit = getProfit(txn);
+            const is_positive = profit > 0;
+            const row = document.createElement('div');
+            row.className = `trade-reports-modal__row ${is_positive ? 'trade-reports-modal__row--positive' : 'trade-reports-modal__row--negative'}`;
+            if (txn.contract_id) {
+                row.classList.add('trade-reports-modal__row--clickable');
+                row.setAttribute('tabindex', '0');
+                row.setAttribute('role', 'button');
+                row.setAttribute('aria-label', localize('View contract details for transaction [_1]', [txn.transaction_id || txn.reference_id || txn.contract_id]));
+                row.addEventListener('click', () => openContractDetails(txn.contract_id));
+                row.addEventListener('keydown', (event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        openContractDetails(txn.contract_id);
+                    }
+                });
+            }
+            row.innerHTML = `
+                <div class="trade-reports-modal__cell">
+                    <div class="trade-reports-modal__contract">${txn.contract_type || localize('Contract')}</div>
+                    <div class="trade-reports-modal__market">${txn.longcode || ''}</div>
+                </div>
+                <div class="trade-reports-modal__cell">${txn.transaction_id || txn.reference_id || '—'}</div>
+                <div class="trade-reports-modal__cell">${formatDate(txn.purchase_time)}</div>
+                <div class="trade-reports-modal__cell">${formatDate(txn.sell_time)}</div>
+                <div class="trade-reports-modal__cell" aria-label="${localize('Stake')}">${formatAmount(txn.buy_price, currency)}</div>
+                <div class="trade-reports-modal__cell" aria-label="${localize('Contract value')}">${formatAmount(txn.sell_price, currency)}</div>
+                <div class="trade-reports-modal__cell trade-reports-modal__cell--profit ${is_positive ? 'is-positive' : 'is-negative'}">
+                    <div class="trade-reports-modal__profit">
+                        <span class="trade-reports-modal__profit-icon">${getOutcomeIcon(is_positive)}</span>
+                        <span>${formatAmount(profit, currency)}</span>
+                    </div>
+                </div>
+            `;
+            rows_container.appendChild(row);
+        });
+    };
+
+    const getChartLibrary = () => {
+        if (ChartJS) return Promise.resolve(ChartJS);
+
+        return import('chart.js/auto').then((module) => {
+            ChartJS = module.default;
+            return ChartJS;
+        });
+    };
+
+    const toggleChartPanel = (should_show) => {
+        if (!chart_panel) return;
+        chart_panel.classList.toggle('trade-reports-modal__chart-panel--open', should_show);
+        chart_panel.setAttribute('aria-hidden', should_show ? 'false' : 'true');
+
+        if (should_show && latest_transactions.length) {
+            renderChart(latest_transactions);
+        }
+    };
+
+    const destroyChart = () => {
+        if (chart_instance) {
+            chart_instance.destroy();
+            chart_instance = null;
+        }
+    };
+
+    const renderChartControls = () => {
+        if (!chart_controls) return;
+
+        chart_controls.innerHTML = '';
+        const controls_wrapper = document.createElement('div');
+        controls_wrapper.className = 'trade-reports-modal__chart-controls-grid';
+
+        Object.entries(metric_config).forEach(([key, config]) => {
+            const control = document.createElement('label');
+            control.className = 'trade-reports-modal__chart-toggle';
+            control.innerHTML = `
+                <input type="checkbox" data-metric="${key}" ${active_metrics.has(key) ? 'checked' : ''} />
+                <div class="trade-reports-modal__chart-toggle-body">
+                    <div class="trade-reports-modal__chart-toggle-title">
+                        <span class="trade-reports-modal__chart-toggle-dot" style="background:${config.color}"></span>
+                        ${config.label}
+                    </div>
+                    <small>${config.description}</small>
+                </div>
+            `;
+            controls_wrapper.appendChild(control);
+        });
+
+        chart_controls.appendChild(controls_wrapper);
+
+        chart_controls.querySelectorAll('input[type="checkbox"]').forEach((input) => {
+            input.addEventListener('change', (event) => {
+                const metric = event.target.getAttribute('data-metric');
+                if (!metric) return;
+
+                if (event.target.checked) {
+                    active_metrics.add(metric);
+                } else if (active_metrics.size > 1) {
+                    active_metrics.delete(metric);
+                } else {
+                    event.target.checked = true;
+                }
+
+                if (latest_transactions.length) {
+                    renderChart(latest_transactions);
+                }
+            });
+        });
+    };
+
+    const getLabels = (transactions = []) => transactions.map((txn, index) => {
+        const date = txn.sell_time || txn.purchase_time;
+        const formatted_date = date ? moment.unix(date).utc().format('DD MMM HH:mm') : localize('Pending');
+        return `${localize('Trade')} #${transactions.length - index} • ${formatted_date}`;
+    }).reverse();
+
+    const getDatasets = (transactions = []) => {
+        const ordered_transactions = [...transactions].reverse();
+        const is_bar_chart = chart_style_state.chartType === 'bar';
+        const line_dash = getLineDash();
+        return Array.from(active_metrics).map((metric_key) => {
+            const config = metric_config[metric_key];
+            if (!config) return null;
+
+            return {
+                label          : config.label,
+                data           : ordered_transactions.map(config.extractor),
+                borderColor    : config.color,
+                backgroundColor: config.background,
+                borderWidth    : chart_style_state.lineWidth,
+                borderDash     : line_dash,
+                pointRadius    : is_bar_chart ? 0 : chart_style_state.pointRadius,
+                pointHoverRadius: is_bar_chart ? 0 : Math.max(chart_style_state.pointRadius + 2, 2),
+                pointStyle     : chart_style_state.pointStyle,
+                tension        : is_bar_chart ? 0 : chart_style_state.tension,
+                fill           : is_bar_chart,
+            };
+        }).filter(Boolean);
+    };
+
+    const setChartStatus = (message) => {
+        if (!chart_status) return;
+        chart_status.textContent = message;
+        chart_status.classList.toggle('trade-reports-modal__chart-status--visible', !!message);
+    };
+
+    const getLineDash = () => {
+        if (chart_style_state.lineStyle === 'dashed') return [6, 6];
+        if (chart_style_state.lineStyle === 'dotted') return [2, 4];
+        return [];
+    };
+
+    const applyChartHeight = () => {
+        if (!chart_canvas) return;
+        const surface = chart_canvas.closest('.trade-reports-modal__chart-surface');
+        if (surface) {
+            surface.style.minHeight = `${chart_style_state.chartHeight}px`;
+            surface.style.height = `${chart_style_state.chartHeight}px`;
+        }
+        chart_canvas.style.height = `${chart_style_state.chartHeight}px`;
+    };
+
+    const syncChartZoomInputs = () => {
+        chart_zoom_inputs?.forEach((input) => {
+            const key = input.getAttribute('data-zoom');
+            if (!key || !(key in chart_window_state)) return;
+
+            input.value = chart_window_state[key];
+        });
+
+        updateZoomStatus();
+    };
+
+    const syncChartStyleInputs = () => {
+        chart_style_inputs?.forEach((input) => {
+            const key = input.getAttribute('data-style');
+            if (!key || !(key in chart_style_state)) return;
+
+            input.value = chart_style_state[key];
+        });
+    };
+
+    const toggleChartStyleMenu = (should_show) => {
+        if (!chart_style_menu || !chart_style_toggle) return;
+
+        const is_open = typeof should_show === 'boolean'
+            ? should_show
+            : !chart_style_menu.classList.contains('trade-reports-modal__chart-style-menu--open');
+
+        chart_style_menu.classList.toggle('trade-reports-modal__chart-style-menu--open', is_open);
+        chart_style_menu.setAttribute('aria-hidden', is_open ? 'false' : 'true');
+        chart_style_toggle.setAttribute('aria-expanded', is_open ? 'true' : 'false');
+    };
+
+    const handleChartStyleChange = (event) => {
+        const key = event.target?.getAttribute('data-style');
+        if (!key || !(key in chart_style_state)) return;
+
+        const raw_value = event.target.type === 'range' ? +event.target.value : event.target.value;
+        chart_style_state[key] = typeof chart_style_state[key] === 'number' ? +raw_value : raw_value;
+
+        if (key === 'chartHeight') {
+            applyChartHeight();
+        }
+
+        if (latest_transactions.length) {
+            renderChart(latest_transactions);
+        }
+    };
+
+    const clampZoomState = () => {
+        const minimum_gap = 5;
+        if (chart_window_state.start > chart_window_state.end - minimum_gap) {
+            chart_window_state.start = chart_window_state.end - minimum_gap;
+        }
+        if (chart_window_state.end < chart_window_state.start + minimum_gap) {
+            chart_window_state.end = chart_window_state.start + minimum_gap;
+        }
+
+        chart_window_state.start = Math.max(0, Math.min(95, chart_window_state.start));
+        chart_window_state.end = Math.max(chart_window_state.start + minimum_gap, Math.min(100, chart_window_state.end));
+    };
+
+    const updateZoomStatus = (total = latest_transactions.length) => {
+        if (!chart_zoom_status) return;
+        const window_span = chart_window_state.end - chart_window_state.start;
+        const visible_count = Math.max(1, Math.round((window_span / 100) * total));
+        const message = window_span >= 100
+            ? localize('Showing entire trade history')
+            : localize('Showing {{visible}} of {{total}} trades', { visible: visible_count, total });
+        chart_zoom_status.textContent = message;
+    };
+
+    const handleZoomChange = (event) => {
+        const key = event.target?.getAttribute('data-zoom');
+        if (!key || !(key in chart_window_state)) return;
+
+        chart_window_state[key] = +event.target.value;
+        clampZoomState();
+        syncChartZoomInputs();
+
+        if (latest_transactions.length) {
+            renderChart(latest_transactions);
+        }
+    };
+
+    const resetZoom = () => {
+        Object.assign(chart_window_state, chart_window_defaults);
+        syncChartZoomInputs();
+
+        if (latest_transactions.length) {
+            renderChart(latest_transactions);
+        }
+    };
+
+    const getWindowedTransactions = (transactions = []) => {
+        if (!transactions.length) return transactions;
+
+        const start_ratio = chart_window_state.start / 100;
+        const end_ratio = chart_window_state.end / 100;
+        const start_index = Math.floor(start_ratio * (transactions.length - 1));
+        const end_index = Math.ceil(end_ratio * (transactions.length - 1));
+
+        return transactions.slice(start_index, end_index + 1);
+    };
+
+    const resetChartStyle = () => {
+        Object.assign(chart_style_state, chart_style_defaults);
+        syncChartStyleInputs();
+        applyChartHeight();
+        if (latest_transactions.length) {
+            renderChart(latest_transactions);
+        }
+    };
+
+    const renderChart = (transactions = []) => {
+        if (!chart_canvas || !transactions.length) {
+            setChartStatus(transactions.length ? '' : localize('Load some trades to see the chart.'));
+            destroyChart();
+            return;
+        }
+
+        getChartLibrary().then((Chart) => {
+            const currency = getCurrency(transactions);
+            const windowed_transactions = getWindowedTransactions(transactions);
+            const labels   = getLabels(windowed_transactions);
+            const datasets = getDatasets(windowed_transactions, currency);
+
+            updateZoomStatus(transactions.length);
+
+            setChartStatus(datasets.length ? '' : localize('Select at least one metric to plot.'));
+
+            if (!datasets.length) {
+                destroyChart();
+                return;
+            }
+
+            destroyChart();
+            applyChartHeight();
+            chart_instance = new Chart(chart_canvas.getContext('2d'), {
+                type   : chart_style_state.chartType,
+                data   : { labels, datasets },
+                options: {
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            labels: {
+                                color: '#e2e8f0',
+                                usePointStyle: true,
+                                boxWidth     : 8,
+                                font         : { size: chart_style_state.legendFontSize },
+                            },
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: (context) => {
+                                    const value = context.parsed.y || 0;
+                                    return `${context.dataset.label}: ${formatAmount(value, currency)}`;
+                                },
+                            },
+                        },
+                    },
+                    scales: {
+                        x: {
+                            ticks: {
+                                color: '#cbd5e1',
+                                font : { size: chart_style_state.tickFontSize },
+                                autoSkip: true,
+                                maxTicksLimit: chart_style_state.maxTicks,
+                                maxRotation: 0,
+                                minRotation: 0,
+                            },
+                            grid: {
+                                color    : 'rgba(255,255,255,0.08)',
+                                lineWidth: chart_style_state.gridWidth,
+                            },
+                        },
+                        y: {
+                            ticks: {
+                                color: '#cbd5e1',
+                                font : { size: chart_style_state.tickFontSize },
+                            },
+                            grid: {
+                                color    : 'rgba(255,255,255,0.08)',
+                                lineWidth: chart_style_state.gridWidth,
+                            },
+                        },
+                    },
+                },
+            });
+        }).catch(() => {
+            setChartStatus(localize('Unable to load chart right now. Please try again.'));
+        });
+    };
+
+    const fetchProfitTable = (limit = DEFAULT_LIMIT) => BinarySocket
+        .wait('authorize')
+        .then(() => BinarySocket.send({ profit_table: 1, description: 1, limit, sort: 'DESC' }));
+
+    const loadAndRender = () => {
+        if (!Client.isLoggedIn()) {
+            setStatus(localize('Please log in to view your trade results.'), 'warning');
+            summary_el.innerHTML = '';
+            renderRows([]);
+            latest_transactions = [];
+            setChartStatus('');
+            return;
+        }
+
+        setStatus(localize('Loading your latest trades...'), 'info');
+        renderRows([]);
+        summary_el.innerHTML = '';
+
+        const limit = getSelectedLimit();
+
+        fetchProfitTable(limit)
+            .then((response) => {
+                if (response?.error) {
+                    throw new Error(response.error.message);
+                }
+
+                const transactions = response?.profit_table?.transactions || [];
+                setStatus(transactions.length ? localize('Latest [_1] contracts', [limit]) : localize('You have no recent contracts.'));
+                renderSummary(transactions);
+                renderRows(transactions);
+                latest_transactions = transactions;
+                renderChartControls();
+
+                if (chart_panel?.classList.contains('trade-reports-modal__chart-panel--open')) {
+                    renderChart(transactions);
+                }
+            })
+            .catch((error) => {
+                setStatus(error.message || localize('Unable to load your trade history right now.'), 'error');
+            });
+    };
+
+    const attachHandlers = () => {
+        if (close_button) close_button.addEventListener('click', () => toggleModal(false));
+        if (backdrop) backdrop.addEventListener('click', () => toggleModal(false));
+
+        if (chart_button) {
+            chart_button.addEventListener('click', () => {
+                toggleChartPanel(true);
+                if (!latest_transactions.length) {
+                    loadAndRender();
+                } else {
+                    renderChart(latest_transactions);
+                }
+            });
+        }
+
+        if (chart_close_button) chart_close_button.addEventListener('click', () => toggleChartPanel(false));
+
+        if (chart_style_toggle) {
+            chart_style_toggle.addEventListener('click', () => toggleChartStyleMenu());
+        }
+
+        chart_style_inputs?.forEach((input) => {
+            input.addEventListener('input', handleChartStyleChange);
+            input.addEventListener('change', handleChartStyleChange);
+        });
+
+        if (chart_style_reset) {
+            chart_style_reset.addEventListener('click', resetChartStyle);
+        }
+
+        chart_zoom_inputs?.forEach((input) => {
+            input.addEventListener('input', handleZoomChange);
+            input.addEventListener('change', handleZoomChange);
+        });
+
+        if (chart_zoom_reset) {
+            chart_zoom_reset.addEventListener('click', resetZoom);
+        }
+
+        if (limit_select) {
+            limit_select.addEventListener('change', () => {
+                loadAndRender();
+            });
+        }
+
+        applyToAllElements('.url-reports-profit', (el) => {
+            el.addEventListener('click', (event) => {
+                event.preventDefault();
+                toggleModal(true);
+                loadAndRender();
+            });
+        });
+    };
+
+    const init = () => {
+        getModalElements();
+        if (!modal) return;
+
+        toggleModal(false);
+        attachHandlers();
+        renderChartControls();
+        syncChartStyleInputs();
+        syncChartZoomInputs();
+        toggleChartStyleMenu(false);
+        applyChartHeight();
+    };
+
+    return {
+        init,
+    };
+})();
+
+module.exports = TradeReportsModal;