// ==UserScript== // @name Car-Part Price Analyzer with MIN/MAX and Matlock Marker // @namespace web.nextbyte.ai // @version 69.0 // @description Аналіз цін на Car-Part з графіком, калькулятором MIN/MAX між сторінками, підсвічуванням A Plus Auto LLC та позначенням магазинів Matlock знаком оклику на графіку. // @author NextByte // @match *://trade9907.car-part.com/cgi-bin/tpSearch.cgi* // @grant GM_xmlhttpRequest // @grant GM_setValue // @grant GM_getValue // @connect trade9907.car-part.com // ==/UserScript== (function() { 'use strict'; // Color palette for different grades const gradeColors = { 'A': '#667eea', 'B': '#f093fb', 'C': '#4facfe', 'D': '#fa709a', 'E': '#30cfd0', 'F': '#a8edea', 'G': '#fed6e3', 'H': '#ff9a56' }; function normalizeShopName(value) { return (value || '') .replace(/\s+/g, ' ') .trim() .toLowerCase(); } function isAPlusShop(shopName) { return normalizeShopName(shopName).includes('a plus auto llc'); } function isMatlockShop(shopName) { const normalized = normalizeShopName(shopName); return normalized.includes('matlock') || normalized.includes('matlockused.com'); } // ===================================================================== // MIN / MAX BUTTONS ON LISTINGS // ===================================================================== // State for selected min/max prices from listing buttons const minMaxState = { minPrice: null, minGrade: null, minDesc: null, minPage: null, // page number where MIN was selected maxPrice: null, maxGrade: null, maxDesc: null, maxPage: null, // page number where MAX was selected marketType: 'global', // default totalListings: 0, // total visible listings on page (for coefficient) manualListings: null, // manually overridden listing count for cross-page calc collapsed: false // whether the calculator panel is collapsed }; // Get current page number from URL function getCurrentPageNum() { const url = new URL(window.location.href); const page = url.searchParams.get('userPage'); return page ? parseInt(page) : 1; } // Persist minMaxState to GM storage (excluding transient fields) function saveMinMaxState() { const toSave = { minPrice: minMaxState.minPrice, minGrade: minMaxState.minGrade, minDesc: minMaxState.minDesc, minPage: minMaxState.minPage, maxPrice: minMaxState.maxPrice, maxGrade: minMaxState.maxGrade, maxDesc: minMaxState.maxDesc, maxPage: minMaxState.maxPage, marketType: minMaxState.marketType, manualListings: minMaxState.manualListings, collapsed: minMaxState.collapsed }; GM_setValue('aplus_minmax', JSON.stringify(toSave)); } // Load minMaxState from GM storage function loadMinMaxState() { try { const raw = GM_getValue('aplus_minmax', null); if (!raw) return; const saved = JSON.parse(raw); if (saved.minPrice !== undefined) minMaxState.minPrice = saved.minPrice; if (saved.minGrade !== undefined) minMaxState.minGrade = saved.minGrade; if (saved.minDesc !== undefined) minMaxState.minDesc = saved.minDesc; if (saved.minPage !== undefined) minMaxState.minPage = saved.minPage; if (saved.maxPrice !== undefined) minMaxState.maxPrice = saved.maxPrice; if (saved.maxGrade !== undefined) minMaxState.maxGrade = saved.maxGrade; if (saved.maxDesc !== undefined) minMaxState.maxDesc = saved.maxDesc; if (saved.maxPage !== undefined) minMaxState.maxPage = saved.maxPage; if (saved.marketType !== undefined) minMaxState.marketType = saved.marketType; if (saved.manualListings !== undefined) minMaxState.manualListings = saved.manualListings; if (saved.collapsed !== undefined) minMaxState.collapsed = saved.collapsed; } catch (e) { // ignore parse errors } } // Count total listing rows on the current page function countPageListings() { const rows = document.querySelectorAll('table[border="1"] tbody tr'); let count = 0; for (let i = 1; i < rows.length; i++) { const cells = rows[i].querySelectorAll('td'); if (cells.length >= 5) { const priceText = cells[4].textContent.trim(); if (/\$[\d,]+/.test(priceText)) count++; } } return count; } // Calculate recommended price using the same formula as the calculator function calcRecommendedPrice(minP, maxP, marketType, count) { let coefficient = null; let reason = ''; if (marketType === 'local') { if (count >= 26 && count <= 100) { coefficient = 0.7; reason = `Локальний, ${count} (26-100) → 0.7`; } else if (count >= 101 && count <= 200) { coefficient = 0.6; reason = `Локальний, ${count} (101-200) → 0.6`; } else if (count > 200) { coefficient = 0.5; reason = `Локальний, ${count} (201+) → 0.5`; } else { return { error: `Локальний ринок: потрібно мінімум 26 оголошень (зараз: ${count})` }; } } else { if (count >= 1 && count <= 5) { coefficient = 0.8; reason = `Глобальний, ${count} (1-5) → 0.8`; } else if (count >= 6 && count <= 25) { coefficient = 0.7; reason = `Глобальний, ${count} (6-25) → 0.7`; } else if (count >= 26 && count <= 100) { coefficient = 0.6; reason = `Глобальний, ${count} (26-100) → 0.6`; } else if (count > 100) { coefficient = 0.5; reason = `Глобальний, ${count} (100+) → 0.5`; } else { return { error: 'Немає оголошень для розрахунку' }; } } const price = ((maxP - minP) * coefficient) + minP; return { price, coefficient, reason }; } // Update the floating result panel function updateMinMaxPanel() { const panel = document.getElementById('aplus-minmax-panel'); if (!panel) return; const { minPrice, minGrade, minDesc, minPage, maxPrice, maxGrade, maxDesc, maxPage, marketType, totalListings, manualListings } = minMaxState; const currentPage = getCurrentPageNum(); const isCrossPage = (minPage !== null && maxPage !== null && minPage !== maxPage); const { collapsed } = minMaxState; const toggleIcon = collapsed ? '▼' : '▲'; const toggleTitle = collapsed ? 'Розгорнути калькулятор' : 'Згорнути калькулятор'; let html = `

Розрахунок ціни (MIN/MAX)

`; if (collapsed) { panel.style.overflow = 'hidden'; panel.style.maxHeight = ''; panel.innerHTML = html; const toggleBtn = panel.querySelector('#aplus-toggle-panel'); if (toggleBtn) { toggleBtn.addEventListener('click', () => { minMaxState.collapsed = false; saveMinMaxState(); updateMinMaxPanel(); }); } return; } panel.style.overflow = 'auto'; panel.style.maxHeight = 'calc(100vh - 180px)'; // Cross-page notice if (isCrossPage) { html += `

Значення з різних сторінок (MIN: стор.${minPage}, MAX: стор.${maxPage})

`; } // Market type selector html += `

Тип ринку:
Глобальний Локальний

`; // Listings count: show current page count + manual override input const displayCount = manualListings !== null ? manualListings : totalListings; html += `

Оголошень на сторінці: ${totalListings} ${isCrossPage ? '(мін/макс з різних сторінок)' : ''}

Кількість для розрахунку: ${manualListings !== null ? `` : ''}

`; // MIN row html += `

`; html += `MIN: `; if (minPrice !== null) { html += `${minPrice.toFixed(2)}`; if (minGrade) html += ` [${minGrade}]`; if (minPage) html += ` стор.${minPage}`; if (minDesc) html += `

${minDesc}

`; html += ` `; } else { html += `не вибрано`; } html += `

`; // MAX row html += `

`; html += `MAX: `; if (maxPrice !== null) { html += `${maxPrice.toFixed(2)}`; if (maxGrade) html += ` [${maxGrade}]`; if (maxPage) html += ` стор.${maxPage}`; if (maxDesc) html += `

${maxDesc}

`; html += ` `; } else { html += `не вибрано`; } html += `

`; // Result if (minPrice !== null && maxPrice !== null) { const effectiveMin = Math.min(minPrice, maxPrice); const effectiveMax = Math.max(minPrice, maxPrice); const result = calcRecommendedPrice(effectiveMin, effectiveMax, marketType, displayCount); if (result.error) { html += `

${result.error}

`; } else { html += `

Рекомендована ціна

${result.price.toFixed(2)}

Формула: ((макс - мін) × коеф) + мін

((${effectiveMax.toFixed(2)} - ${effectiveMin.toFixed(2)}) × ${result.coefficient}) + ${effectiveMin.toFixed(2)}

${result.reason}

`; } } else { html += `

Виберіть MIN та MAX для розрахунку

`; } // Reset all button html += ``; panel.innerHTML = html; // Bind toggle button const toggleBtn = panel.querySelector('#aplus-toggle-panel'); if (toggleBtn) { toggleBtn.addEventListener('click', () => { minMaxState.collapsed = !minMaxState.collapsed; saveMinMaxState(); updateMinMaxPanel(); }); } // Bind radio buttons panel.querySelectorAll('input[name="aplus-market"]').forEach(radio => { radio.addEventListener('change', (e) => { minMaxState.marketType = e.target.value; saveMinMaxState(); updateMinMaxPanel(); }); }); // Bind manual listings apply button const applyListings = panel.querySelector('#aplus-apply-listings'); if (applyListings) { applyListings.addEventListener('click', () => { const input = panel.querySelector('#aplus-manual-listings'); const val = parseInt(input ? input.value : '0'); if (val > 0) { minMaxState.manualListings = val; saveMinMaxState(); updateMinMaxPanel(); } }); } // Bind reset listings button (back to auto) const resetListings = panel.querySelector('#aplus-reset-listings'); if (resetListings) { resetListings.addEventListener('click', () => { minMaxState.manualListings = null; saveMinMaxState(); updateMinMaxPanel(); }); } // Bind clear buttons const clearMin = panel.querySelector('#aplus-clear-min'); if (clearMin) clearMin.addEventListener('click', () => { minMaxState.minPrice = null; minMaxState.minGrade = null; minMaxState.minDesc = null; minMaxState.minPage = null; saveMinMaxState(); refreshRowButtonStates(); updateMinMaxPanel(); }); const clearMax = panel.querySelector('#aplus-clear-max'); if (clearMax) clearMax.addEventListener('click', () => { minMaxState.maxPrice = null; minMaxState.maxGrade = null; minMaxState.maxDesc = null; minMaxState.maxPage = null; saveMinMaxState(); refreshRowButtonStates(); updateMinMaxPanel(); }); const resetAll = panel.querySelector('#aplus-reset-all'); if (resetAll) resetAll.addEventListener('click', () => { minMaxState.minPrice = null; minMaxState.minGrade = null; minMaxState.minDesc = null; minMaxState.minPage = null; minMaxState.maxPrice = null; minMaxState.maxGrade = null; minMaxState.maxDesc = null; minMaxState.maxPage = null; minMaxState.manualListings = null; saveMinMaxState(); refreshRowButtonStates(); updateMinMaxPanel(); }); } // Refresh visual state of all MIN/MAX buttons in the table function refreshRowButtonStates() { const currentPage = getCurrentPageNum(); document.querySelectorAll('.aplus-min-btn').forEach(btn => { const rowId = btn.dataset.rowid; // Highlight if same row on same page, or if price matches and MIN was set on a different page const isMinRow = (minMaxState.minRowId === rowId) || (minMaxState.minPrice !== null && minMaxState.minPage !== null && minMaxState.minPage !== currentPage && Math.abs(parseFloat(btn.dataset.price) - minMaxState.minPrice) < 0.001); btn.style.background = isMinRow ? '#2e7d32' : '#4caf50'; btn.style.fontWeight = isMinRow ? 'bold' : 'normal'; btn.style.boxShadow = isMinRow ? '0 0 0 2px #fff, 0 0 0 4px #2e7d32' : 'none'; }); document.querySelectorAll('.aplus-max-btn').forEach(btn => { const rowId = btn.dataset.rowid; const isMaxRow = (minMaxState.maxRowId === rowId) || (minMaxState.maxPrice !== null && minMaxState.maxPage !== null && minMaxState.maxPage !== currentPage && Math.abs(parseFloat(btn.dataset.price) - minMaxState.maxPrice) < 0.001); btn.style.background = isMaxRow ? '#e65100' : '#ff9800'; btn.style.fontWeight = isMaxRow ? 'bold' : 'normal'; btn.style.boxShadow = isMaxRow ? '0 0 0 2px #fff, 0 0 0 4px #e65100' : 'none'; }); } // Create the floating MIN/MAX result panel function createMinMaxPanel() { if (document.getElementById('aplus-minmax-panel')) return; const panel = document.createElement('div'); panel.id = 'aplus-minmax-panel'; panel.style.cssText = ` position: fixed; top: 160px; right: 10px; z-index: 9999; background: white; border: 2px solid #667eea; border-radius: 10px; padding: 14px; width: 240px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); font-family: Arial, Verdana, sans-serif; font-size: 12px; max-height: calc(100vh - 180px); overflow-y: auto; `; document.body.appendChild(panel); minMaxState.totalListings = countPageListings(); updateMinMaxPanel(); } // Add MIN/MAX buttons to each listing row in the table function addMinMaxButtonsToListings() { const rows = document.querySelectorAll('table[border="1"] tbody tr'); let rowIndex = 0; for (let i = 1; i < rows.length; i++) { const row = rows[i]; if (row.querySelector('.aplus-min-btn')) continue; // already processed const cells = row.querySelectorAll('td'); if (cells.length < 5) continue; const priceCell = cells[4]; const priceText = priceCell.textContent.trim(); const priceMatch = priceText.match(/\$?([\d,]+\.?\d*)/); if (!priceMatch) continue; const price = parseFloat(priceMatch[1].replace(',', '')); if (!price) continue; // Extract grade const gradeRaw = cells[2] ? cells[2].textContent.trim() : ''; const grade = gradeRaw.charAt(0).toUpperCase(); // Extract short description const descCell = cells[1]; let desc = descCell ? descCell.textContent.trim().replace(/\s+/g, ' ').substring(0, 60) : ''; // Extract stock number const stock = cells[3] ? cells[3].textContent.trim() : ''; const rowId = `row-${i}`; row.dataset.aplusplusRowid = rowId; // Create button container const btnContainer = document.createElement('div'); btnContainer.style.cssText = 'display:flex;gap:3px;justify-content:center;margin-top:4px;'; // MIN button const minBtn = document.createElement('button'); minBtn.textContent = 'MIN'; minBtn.className = 'aplus-min-btn'; minBtn.dataset.price = price; minBtn.dataset.grade = grade; minBtn.dataset.desc = desc; minBtn.dataset.stock = stock; minBtn.dataset.rowid = rowId; minBtn.style.cssText = ` padding: 2px 7px; background: #4caf50; color: white; border: none; border-radius: 4px; font-size: 11px; font-weight: bold; cursor: pointer; transition: all 0.15s ease; `; minBtn.title = `Встановити як мінімальну ціну: ${price.toFixed(2)}`; minBtn.addEventListener('click', (e) => { e.preventDefault(); minMaxState.minPrice = price; minMaxState.minGrade = grade; minMaxState.minDesc = desc; minMaxState.minRowId = rowId; minMaxState.minPage = getCurrentPageNum(); saveMinMaxState(); refreshRowButtonStates(); updateMinMaxPanel(); }); // MAX button const maxBtn = document.createElement('button'); maxBtn.textContent = 'MAX'; maxBtn.className = 'aplus-max-btn'; maxBtn.dataset.price = price; maxBtn.dataset.grade = grade; maxBtn.dataset.desc = desc; maxBtn.dataset.stock = stock; maxBtn.dataset.rowid = rowId; maxBtn.style.cssText = ` padding: 2px 7px; background: #ff9800; color: white; border: none; border-radius: 4px; font-size: 11px; font-weight: bold; cursor: pointer; transition: all 0.15s ease; `; maxBtn.title = `Встановити як максимальну ціну: ${price.toFixed(2)}`; maxBtn.addEventListener('click', (e) => { e.preventDefault(); minMaxState.maxPrice = price; minMaxState.maxGrade = grade; minMaxState.maxDesc = desc; minMaxState.maxRowId = rowId; minMaxState.maxPage = getCurrentPageNum(); saveMinMaxState(); refreshRowButtonStates(); updateMinMaxPanel(); }); btnContainer.appendChild(minBtn); btnContainer.appendChild(maxBtn); priceCell.appendChild(btnContainer); rowIndex++; } } // Initialize MIN/MAX feature on page load function initMinMaxFeature() { loadMinMaxState(); // restore persisted MIN/MAX from previous pages createMinMaxPanel(); addMinMaxButtonsToListings(); refreshRowButtonStates(); // highlight buttons that match restored state } // ===================================================================== // END MIN / MAX BUTTONS // ===================================================================== // Add button to start parser function addParserButton() { const button = document.createElement('button'); button.textContent = 'А+'; button.style.cssText = ` position: fixed; top: 100px; right: 10px; z-index: 10000; padding: 8px 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 0; font-size: 16px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: all 0.3s ease; min-width: 40px; text-align: center; `; button.onmouseover = () => { button.style.transform = 'translateY(-2px)'; button.style.boxShadow = '0 6px 20px rgba(0,0,0,0.3)'; }; button.onmouseout = () => { button.style.transform = 'translateY(0)'; button.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)'; }; button.onclick = showParserDialog; document.body.appendChild(button); } // Get available page count from pagination function getAvailablePageCount() { const paginationContainer = document.getElementById('top-pagination-container'); if (!paginationContainer) return 0; // Find all page number links (they have data-page-num attribute or are numeric links) const pageLinks = paginationContainer.querySelectorAll('a[data-page-num], a'); let maxPage = 0; for (let link of pageLinks) { const pageNum = link.getAttribute('data-page-num'); if (pageNum) { const num = parseInt(pageNum); if (num > maxPage) maxPage = num; } else { // Try to parse the link text as a number const text = link.textContent.trim(); if (/^\d+$/.test(text)) { const num = parseInt(text); if (num > maxPage) maxPage = num; } } } return maxPage; } // Show dialog to get user input function showParserDialog() { const overlay = document.createElement('div'); overlay.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10001; display: flex; justify-content: center; align-items: center; `; const dialog = document.createElement('div'); dialog.style.cssText = ` background: white; padding: 30px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); max-width: 400px; width: 90%; `; const availablePages = getAvailablePageCount(); const selectAllText = availablePages > 0 ? ` (доступно: ${availablePages})` : ''; dialog.innerHTML = `

Налаштування парсера

Кількість сторінок для аналізу:

Усі доступні сторінки${selectAllText}

Фільтр за грейдом:

Тільки до 300 миль

Must Contain (букви в порядку):

Введіть букви, які мають бути в описі в такому порядку (без урахування регістру)

`; overlay.appendChild(dialog); document.body.appendChild(overlay); // Handle "select all pages" checkbox const selectAllCheckbox = document.getElementById('selectAllPages'); const pageCountInput = document.getElementById('pageCount'); selectAllCheckbox.onchange = () => { if (selectAllCheckbox.checked) { pageCountInput.value = availablePages; pageCountInput.disabled = true; } else { pageCountInput.disabled = false; } }; // Set checkbox to checked by default selectAllCheckbox.checked = true; // Trigger checkbox change on dialog load to set default state selectAllCheckbox.dispatchEvent(new Event('change')); document.getElementById('cancelParsing').onclick = () => { document.body.removeChild(overlay); }; document.getElementById('startParsing').onclick = () => { const pageCount = parseInt(document.getElementById('pageCount').value); const gradeFilter = document.getElementById('gradeFilter').value; const distanceFilter = document.getElementById('distanceFilter').checked; const mustContainFilter = document.getElementById('mustContainFilter').value; document.body.removeChild(overlay); startParsing(pageCount, gradeFilter, distanceFilter, mustContainFilter); }; } // Show loading indicator function showLoading(message) { const loading = document.createElement('div'); loading.id = 'parserLoading'; loading.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px 40px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); z-index: 10002; text-align: center; `; loading.innerHTML = `

${message}

`; // Add animation const style = document.createElement('style'); style.textContent = '@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }'; document.head.appendChild(style); document.body.appendChild(loading); return loading; } // Update countdown timer function updateCountdown(secondsRemaining) { const countdownEl = document.getElementById('parserCountdown'); if (countdownEl) { countdownEl.textContent = `⏱️ Залишилось: ${secondsRemaining} сек`; } } function hideLoading() { const loading = document.getElementById('parserLoading'); if (loading) { document.body.removeChild(loading); } } // Helper function to check if letters appear in order (case-insensitive) function containsLettersInOrder(text, pattern) { const textUpper = text.toUpperCase(); const patternUpper = pattern.toUpperCase(); let patternIndex = 0; for (let i = 0; i < textUpper.length && patternIndex < patternUpper.length; i++) { if (textUpper[i] === patternUpper[patternIndex]) { patternIndex++; } } return patternIndex === patternUpper.length; } // Parse a single page function parsePage(html) { const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); const rows = doc.querySelectorAll('table[border="1"] tbody tr'); const listings = []; if (rows.length === 0) { console.warn('No table rows found on page'); return listings; } for (let i = 1; i < rows.length; i++) { // Skip header row const row = rows[i]; const cells = row.querySelectorAll('td'); if (cells.length < 7) continue; // Extract data const yearPartModel = cells[0].textContent.trim(); const descriptionCell = cells[1]; // cells[2] is Part/Grade let gradeRaw = cells[2].textContent.trim(); // Extract only the first letter of the grade (ignore suffixes like "cc", "hrs", etc.) const grade = gradeRaw.charAt(0).toUpperCase(); const stockNum = cells[3].textContent.trim(); const priceText = cells[4].textContent.trim(); // Extract price const priceMatch = priceText.match(/\$?([\d,]+\.?\d*)/); const price = priceMatch ? parseFloat(priceMatch[1].replace(',', '')) : null; if (!price) continue; // Extract image - use thumbnail directly as it's more reliable const img = descriptionCell.querySelector('img[src*="thumb"]'); let imageUrl = null; if (img && img.src) { imageUrl = img.src; } // Extract description let description = descriptionCell.textContent.trim(); description = description.replace(/\s+/g, ' ').substring(0, 300); // Extract shop name from the 6th cell (cells[5]) const shopCell = cells[5]; let shopName = ''; if (shopCell) { const shopLink = shopCell.querySelector('a'); if (shopLink) { shopName = shopLink.textContent.trim(); } } // Extract distance from the 7th cell (cells[6]) let distance = 0; if (cells.length > 6) { const distanceText = cells[6].textContent.trim(); const distanceMatch = distanceText.match(/(\d+)/); if (distanceMatch) { distance = parseInt(distanceMatch[1]); } } listings.push({ yearPartModel, grade, stockNum, price, imageUrl, description, shopName, distance }); } return listings; } // Start parsing function startParsing(pageCount, gradeFilter, distanceFilter, mustContainFilter) { showLoading('Завантаження даних...'); const allListings = []; let pagesLoaded = 0; const startTime = Date.now(); const estimatedTimePerPage = 4000; // 4 seconds per page estimate const totalEstimatedTime = pageCount * estimatedTimePerPage; // Start countdown timer const countdownInterval = setInterval(() => { const elapsedTime = Date.now() - startTime; const remainingTime = Math.max(0, Math.ceil((totalEstimatedTime - elapsedTime) / 1000)); updateCountdown(remainingTime); }, 100); function loadPage(pageNum) { const currentUrl = window.location.href; const url = currentUrl.includes('userPage=') ? currentUrl.replace(/userPage=\d+/, `userPage=${pageNum}`) : currentUrl + (currentUrl.includes('?') ? '&' : '?') + `userPage=${pageNum}`; GM_xmlhttpRequest({ method: 'GET', url: url, onload: function(response) { const listings = parsePage(response.responseText); // Apply filters let filtered = listings; // Filter by grade if specified if (gradeFilter) { filtered = filtered.filter(l => l.grade === gradeFilter); } // Filter by distance if checkbox is checked if (distanceFilter) { filtered = filtered.filter(l => l.distance >= 0 && l.distance <= 300); } // Filter by must contain if specified if (mustContainFilter && mustContainFilter.trim()) { filtered = filtered.filter(l => { return containsLettersInOrder(l.description, mustContainFilter); }); } allListings.push(...filtered); pagesLoaded++; if (pagesLoaded < pageCount) { loadPage(pageNum + 1); } else { clearInterval(countdownInterval); hideLoading(); if (allListings.length > 0) { // Sort by price from lowest to highest allListings.sort((a, b) => a.price - b.price); showResults(allListings, gradeFilter, mustContainFilter); } else { alert('Немає даних для аналізу'); } } }, onerror: function() { clearInterval(countdownInterval); hideLoading(); alert('Помилка при завантаженні сторінки'); } }); } loadPage(1); } // Show results function showResults(listings, gradeFilter, mustContainFilter) { const container = document.createElement('div'); container.style.cssText = ` position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); z-index: 10003; padding: 30px; overflow: auto; max-width: 95vw; max-height: 95vh; width: 1500px; `; const closeBtn = document.createElement('button'); closeBtn.textContent = '✕'; closeBtn.style.cssText = ` position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; border: none; background: #e74c3c; color: white; border-radius: 50%; font-size: 20px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; `; closeBtn.onmouseover = () => closeBtn.style.background = '#c0392b'; closeBtn.onmouseout = () => closeBtn.style.background = '#e74c3c'; closeBtn.onclick = () => document.body.removeChild(container); container.appendChild(closeBtn); const title = document.createElement('h2'); title.textContent = '📊 Аналіз цін'; title.style.cssText = 'margin: 0 0 20px 0; color: #000; font-size: 28px;'; container.appendChild(title); // Create wrapper for graph and calculator side by side const graphCalcWrapper = document.createElement('div'); graphCalcWrapper.style.cssText = ` display: flex; gap: 30px; margin-bottom: 30px; align-items: flex-start; `; container.appendChild(graphCalcWrapper); // Create canvas for graph const canvas = document.createElement('canvas'); canvas.width = 700; canvas.height = 350; canvas.style.cssText = ` border: 1px solid #ddd; border-radius: 8px; background: white; cursor: crosshair; flex-shrink: 0; `; graphCalcWrapper.appendChild(canvas); // Create container for canvas and slider const graphContainer = document.createElement('div'); graphContainer.style.cssText = 'flex-shrink: 0;'; // Move canvas into container graphCalcWrapper.removeChild(canvas); graphContainer.appendChild(canvas); // Create slider controls for yellow and green lines const sliderContainer = document.createElement('div'); sliderContainer.style.cssText = ` margin-top: 15px; padding: 15px; background: #f5f5f5; border-radius: 8px; border: 1px solid #ddd; `; // Yellow lines toggle const yellowLineLabel = document.createElement('label'); yellowLineLabel.style.cssText = 'display: flex; align-items: center; gap: 10px; margin-bottom: 12px; cursor: pointer; user-select: none;'; const yellowCheckbox = document.createElement('input'); yellowCheckbox.type = 'checkbox'; yellowCheckbox.checked = true; yellowCheckbox.style.cssText = 'cursor: pointer; width: 18px; height: 18px;'; const yellowLabel = document.createElement('span'); yellowLabel.textContent = '🟨 Жовті лінії (10% і 90% позиції)'; yellowLabel.style.cssText = 'font-weight: 500; color: #333;'; yellowLineLabel.appendChild(yellowCheckbox); yellowLineLabel.appendChild(yellowLabel); sliderContainer.appendChild(yellowLineLabel); // Green lines toggle const greenLineLabel = document.createElement('label'); greenLineLabel.style.cssText = 'display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;'; const greenCheckbox = document.createElement('input'); greenCheckbox.type = 'checkbox'; greenCheckbox.checked = true; greenCheckbox.style.cssText = 'cursor: pointer; width: 18px; height: 18px;'; const greenLabel = document.createElement('span'); greenLabel.textContent = '🟩 Зелені лінії (10% і 90% ціни)'; greenLabel.style.cssText = 'font-weight: 500; color: #333;'; greenLineLabel.appendChild(greenCheckbox); greenLineLabel.appendChild(greenLabel); sliderContainer.appendChild(greenLineLabel); graphContainer.appendChild(sliderContainer); graphCalcWrapper.appendChild(graphContainer); // Create tooltip const tooltip = document.createElement('div'); tooltip.style.cssText = ` position: fixed; background: white; border: 1px solid #ddd; border-radius: 8px; padding: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10004; display: none; max-width: 350px; font-size: 13px; pointer-events: none; `; document.body.appendChild(tooltip); // Group listings by grade const listingsByGrade = {}; listings.forEach(listing => { if (!listingsByGrade[listing.grade]) { listingsByGrade[listing.grade] = []; } listingsByGrade[listing.grade].push(listing); }); // Create grade visibility checkboxes const checkboxContainer = document.createElement('div'); checkboxContainer.style.cssText = 'margin-bottom: 20px; display: flex; gap: 15px; flex-wrap: wrap;'; const gradeVisibility = {}; Object.keys(listingsByGrade).forEach(grade => { gradeVisibility[grade] = true; const label = document.createElement('label'); label.style.cssText = 'display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;'; const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.checked = true; checkbox.dataset.grade = grade; checkbox.style.cssText = 'cursor: pointer; width: 18px; height: 18px;'; const labelText = document.createElement('span'); labelText.textContent = `Грейд ${grade}`; labelText.style.cssText = `color: #000; font-weight: bold; font-size: 14px;`; label.appendChild(checkbox); label.appendChild(labelText); checkboxContainer.appendChild(label); }); container.appendChild(checkboxContainer); // Draw graph - pass a reference to update highlighted price const graphState = { highlightedPrice: null, redrawGraph: null, showYellowLines: true, showGreenLines: true }; drawMultiGradeGraph(canvas, listingsByGrade, tooltip, gradeVisibility, checkboxContainer, graphState, mustContainFilter); // Add event listeners for line visibility toggles yellowCheckbox.addEventListener('change', (e) => { graphState.showYellowLines = e.target.checked; graphState.redrawGraph(); }); greenCheckbox.addEventListener('change', (e) => { graphState.showGreenLines = e.target.checked; graphState.redrawGraph(); }); // Add calculator section to the right of graph const calculatorSection = document.createElement('div'); calculatorSection.style.cssText = ` flex: 1; min-width: 300px; padding: 20px; background: #f9f9f9; border-radius: 8px; border: 1px solid #eee; `; const calculatorTitle = document.createElement('h3'); calculatorTitle.textContent = '🧮 Калькулятор ціни'; calculatorTitle.style.cssText = 'margin: 0 0 20px 0; color: #000; font-size: 18px;'; calculatorSection.appendChild(calculatorTitle); createCalculator(calculatorSection, listingsByGrade, graphState); graphCalcWrapper.appendChild(calculatorSection); // Add infographics section const infographicsSection = document.createElement('div'); infographicsSection.style.cssText = 'margin-top: 40px; padding-top: 30px; border-top: 2px solid #eee;'; const infographicsTitle = document.createElement('h3'); infographicsTitle.textContent = '📈 Детальна інфографіка по грейдам'; infographicsTitle.style.cssText = 'margin: 0 0 20px 0; color: #000; font-size: 20px;'; infographicsSection.appendChild(infographicsTitle); createInfographics(infographicsSection, listingsByGrade); container.appendChild(infographicsSection); document.body.appendChild(container); } // Create infographics function createInfographics(container, listingsByGrade) { const infographicsGrid = document.createElement('div'); infographicsGrid.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px;'; Object.entries(listingsByGrade).forEach(([grade, listings]) => { const prices = listings.map(l => l.price); const count = listings.length; const minPrice = Math.min(...prices); const maxPrice = Math.max(...prices); const avgPrice = prices.reduce((a, b) => a + b, 0) / count; const priceRange = maxPrice - minPrice; // Calculate median const sortedPrices = [...prices].sort((a, b) => a - b); const medianPrice = count % 2 === 0 ? (sortedPrices[count / 2 - 1] + sortedPrices[count / 2]) / 2 : sortedPrices[Math.floor(count / 2)]; // Calculate standard deviation (average price drop every 5 units) let totalDrop = 0; let dropCount = 0; for (let i = 0; i < sortedPrices.length - 5; i += 5) { const drop = sortedPrices[i + 5] - sortedPrices[i]; totalDrop += Math.abs(drop); dropCount++; } const stdDev = dropCount > 0 ? totalDrop / dropCount : 0; // Calculate price distribution const priceDistribution = calculatePriceDistribution(prices); const card = document.createElement('div'); card.style.cssText = ` background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); `; // Header with grade circle const header = document.createElement('div'); header.style.cssText = 'display: flex; align-items: center; margin-bottom: 20px;'; const gradeCircle = document.createElement('div'); gradeCircle.style.cssText = ` width: 60px; height: 60px; border-radius: 50%; background: ${gradeColors[grade] || '#000'}; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold; margin-right: 15px; `; gradeCircle.textContent = grade; const headerText = document.createElement('div'); headerText.style.cssText = 'flex: 1;'; headerText.innerHTML = `

Грейд ${grade}

Всього оголошень: ${count}

`; header.appendChild(gradeCircle); header.appendChild(headerText); card.appendChild(header); // Indicators grid const indicatorsGrid = document.createElement('div'); indicatorsGrid.style.cssText = 'display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;'; // Indicator 1: Min Price indicatorsGrid.appendChild(createIndicator('Мінімальна ціна', `$${minPrice.toFixed(2)}`, '#4facfe', '📉')); // Indicator 2: Max Price indicatorsGrid.appendChild(createIndicator('Максимальна ціна', `$${maxPrice.toFixed(2)}`, '#fa709a', '📈')); // Indicator 3: Average Price indicatorsGrid.appendChild(createIndicator('Середня ціна', `$${avgPrice.toFixed(2)}`, '#667eea', '💰')); // Indicator 4: Median Price indicatorsGrid.appendChild(createIndicator('Медіанна ціна', `$${medianPrice.toFixed(2)}`, '#30cfd0', '📊')); // Indicator 5: Price Range indicatorsGrid.appendChild(createIndicator('Діапазон цін', `$${priceRange.toFixed(2)}`, '#f093fb', '↔️')); // Indicator 6: Standard Deviation indicatorsGrid.appendChild(createIndicator('Стандартне відхилення', `${stdDev.toFixed(2)}`, '#fed6e3', '📐')); // Indicator 7: Lower Threshold (Average - StdDev) const lowerThreshold = avgPrice - stdDev; indicatorsGrid.appendChild(createIndicator('Поріг виживання (мін)', `${lowerThreshold.toFixed(2)}`, '#a8edea', '📉')); // Indicator 8: Upper Threshold (Average + StdDev) const upperThreshold = avgPrice + stdDev; indicatorsGrid.appendChild(createIndicator('Поріг виживання (макс)', `${upperThreshold.toFixed(2)}`, '#ff9a56', '📈')); card.appendChild(indicatorsGrid); // Price distribution chart const distributionContainer = document.createElement('div'); distributionContainer.style.cssText = 'margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;'; const distributionTitle = document.createElement('div'); distributionTitle.style.cssText = 'font-weight: bold; color: #000; margin-bottom: 12px; font-size: 13px;'; distributionTitle.textContent = 'Розподіл цін:'; distributionContainer.appendChild(distributionTitle); // Create mini bar chart const barChart = document.createElement('div'); barChart.style.cssText = 'display: flex; gap: 3px; align-items: flex-end; height: 120px;'; const totalCount = Object.values(priceDistribution).reduce((a, b) => a + b, 0); const maxCount = Math.max(...Object.values(priceDistribution)); Object.entries(priceDistribution).forEach(([range, count]) => { const percentage = totalCount > 0 ? (count / totalCount) * 100 : 0; const height = totalCount > 0 ? (count / totalCount) * 100 : 0; // Create bar container const barContainer = document.createElement('div'); barContainer.style.cssText = ` flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; cursor: pointer; transition: all 0.2s ease; position: relative; `; // Create the bar itself const bar = document.createElement('div'); bar.style.cssText = ` width: 100%; background: linear-gradient(180deg, ${gradeColors[grade] || '#000'} 0%, ${gradeColors[grade] || '#000'}80 100%); border-radius: 4px 4px 0 0; height: ${height}%; min-height: 8px; transition: all 0.2s ease; position: relative; display: flex; align-items: center; justify-content: center; `; // Create percentage label inside bar const percentageLabel = document.createElement('div'); percentageLabel.style.cssText = ` color: #000; font-size: 11px; font-weight: bold; text-shadow: 0 1px 2px rgba(255,255,255,0.5); text-align: center; padding: 2px 4px; white-space: nowrap; opacity: ${height > 20 ? '1' : '0'}; transition: opacity 0.2s ease; `; percentageLabel.textContent = `${percentage.toFixed(1)}%`; bar.appendChild(percentageLabel); // Create range label below bar const rangeLabel = document.createElement('div'); rangeLabel.style.cssText = ` font-size: 10px; color: #000; margin-top: 4px; text-align: center; word-break: break-word; max-width: 100%; font-weight: 500; `; rangeLabel.textContent = range; barContainer.appendChild(bar); barContainer.appendChild(rangeLabel); // Hover effects barContainer.onmouseover = () => { bar.style.opacity = '0.85'; bar.style.transform = 'scaleY(1.05)'; percentageLabel.style.opacity = '1'; rangeLabel.style.color = gradeColors[grade] || '#000'; rangeLabel.style.fontWeight = 'bold'; }; barContainer.onmouseout = () => { bar.style.opacity = '1'; bar.style.transform = 'scaleY(1)'; percentageLabel.style.opacity = height > 20 ? '1' : '0'; rangeLabel.style.color = '#000'; rangeLabel.style.fontWeight = '500'; }; barContainer.title = `${range}: ${count} оголошень (${percentage.toFixed(1)}% ринку)`; barChart.appendChild(barContainer); }); distributionContainer.appendChild(barChart); card.appendChild(distributionContainer); infographicsGrid.appendChild(card); }); container.appendChild(infographicsGrid); } // Helper function to create indicator boxes function createIndicator(label, value, color, icon) { const indicator = document.createElement('div'); indicator.style.cssText = ` background: linear-gradient(135deg, ${color}15 0%, ${color}05 100%); border: 1px solid ${color}40; border-radius: 8px; padding: 12px; text-align: center; transition: all 0.2s ease; `; indicator.onmouseover = () => { indicator.style.borderColor = color; indicator.style.background = `linear-gradient(135deg, ${color}25 0%, ${color}10 100%)`; }; indicator.onmouseout = () => { indicator.style.borderColor = `${color}40`; indicator.style.background = `linear-gradient(135deg, ${color}15 0%, ${color}05 100%)`; }; indicator.innerHTML = `

${icon}

${label}

${value}

`; return indicator; } // Helper function to calculate price distribution function calculatePriceDistribution(prices) { if (prices.length === 0) return {}; const minPrice = Math.min(...prices); const maxPrice = Math.max(...prices); const range = maxPrice - minPrice || 1; // Create 5 price ranges const distribution = {}; const rangeSize = range / 5; for (let i = 0; i < 5; i++) { const rangeStart = minPrice + (rangeSize * i); const rangeEnd = minPrice + (rangeSize * (i + 1)); const rangeLabel = `$${rangeStart.toFixed(0)}-${rangeEnd.toFixed(0)}`; distribution[rangeLabel] = 0; } // Count prices in each range prices.forEach(price => { for (let i = 0; i < 5; i++) { const rangeStart = minPrice + (rangeSize * i); const rangeEnd = minPrice + (rangeSize * (i + 1)); if (price >= rangeStart && price <= rangeEnd) { const rangeLabel = `$${rangeStart.toFixed(0)}-${rangeEnd.toFixed(0)}`; distribution[rangeLabel]++; break; } } }); return distribution; } // Create calculator // Function to extract prices from yellow lines (10% and 90% of listings) function extractPricesFromYellowLines(listingsByGrade, selectedGrade) { if (!selectedGrade || !listingsByGrade[selectedGrade]) { return null; } const listings = listingsByGrade[selectedGrade]; if (listings.length < 2) { return null; } // Get prices at 10% and 90% positions const index10Percent = Math.floor(listings.length * 0.1); const index90Percent = Math.floor(listings.length * 0.9); // Ensure indices are within bounds const idx10 = Math.min(index10Percent, listings.length - 1); const idx90 = Math.min(index90Percent, listings.length - 1); const price10 = listings[idx10].price; const price90 = listings[idx90].price; // Return min and max prices from the yellow lines return { minPrice: Math.min(price10, price90), maxPrice: Math.max(price10, price90) }; } function createCalculator(container, listingsByGrade, graphState) { const calculatorBox = document.createElement('div'); calculatorBox.style.cssText = ` background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 12px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); max-width: 600px; `; // Market type selector const marketSection = document.createElement('div'); marketSection.style.cssText = 'margin-bottom: 20px;'; const marketLabel = document.createElement('label'); marketLabel.style.cssText = 'display: block; margin-bottom: 10px; color: #000; font-weight: bold; font-size: 14px;'; marketLabel.textContent = 'Тип ринку:'; marketSection.appendChild(marketLabel); const marketContainer = document.createElement('div'); marketContainer.style.cssText = 'display: flex; gap: 15px;'; const localRadio = document.createElement('input'); localRadio.type = 'radio'; localRadio.name = 'market'; localRadio.value = 'local'; localRadio.checked = true; localRadio.id = 'marketLocal'; localRadio.style.cssText = 'cursor: pointer;'; const localLabel = document.createElement('label'); localLabel.htmlFor = 'marketLocal'; localLabel.style.cssText = 'cursor: pointer; display: flex; align-items: center; gap: 8px;'; localLabel.innerHTML = '🏠 Локальний ринок'; const globalRadio = document.createElement('input'); globalRadio.type = 'radio'; globalRadio.name = 'market'; globalRadio.value = 'global'; globalRadio.id = 'marketGlobal'; globalRadio.style.cssText = 'cursor: pointer;'; const globalLabel = document.createElement('label'); globalLabel.htmlFor = 'marketGlobal'; globalLabel.style.cssText = 'cursor: pointer; display: flex; align-items: center; gap: 8px;'; globalLabel.innerHTML = '🌍 Глобальний ринок'; marketContainer.appendChild(localRadio); marketContainer.appendChild(localLabel); marketContainer.appendChild(globalRadio); marketContainer.appendChild(globalLabel); marketSection.appendChild(marketContainer); calculatorBox.appendChild(marketSection); // Grade selector const gradeSection = document.createElement('div'); gradeSection.style.cssText = 'margin-bottom: 20px;'; const gradeLabel = document.createElement('label'); gradeLabel.style.cssText = 'display: block; margin-bottom: 10px; color: #000; font-weight: bold; font-size: 14px;'; gradeLabel.textContent = 'Виберіть грейд:'; gradeSection.appendChild(gradeLabel); const gradeSelect = document.createElement('select'); gradeSelect.style.cssText = 'width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 6px; font-size: 14px; cursor: pointer;'; const defaultOption = document.createElement('option'); defaultOption.value = ''; defaultOption.textContent = '-- Виберіть грейд --'; gradeSelect.appendChild(defaultOption); Object.keys(listingsByGrade).sort().forEach(grade => { const option = document.createElement('option'); option.value = grade; option.textContent = `Грейд ${grade} (${listingsByGrade[grade].length} оголошень)`; gradeSelect.appendChild(option); }); gradeSection.appendChild(gradeSelect); calculatorBox.appendChild(gradeSection); // Auto-fill section (from yellow lines) const autoFillSection = document.createElement('div'); autoFillSection.style.cssText = 'margin-bottom: 20px; padding: 15px; background: #fff9e6; border-radius: 8px; border: 2px solid #FFD700;'; const autoFillLabel = document.createElement('label'); autoFillLabel.style.cssText = 'display: block; margin-bottom: 10px; color: #000; font-weight: bold; font-size: 14px;'; autoFillLabel.textContent = '📊 Автоматично з жовтих ліній:'; autoFillSection.appendChild(autoFillLabel); const autoFillButton = document.createElement('button'); autoFillButton.textContent = '🔄 Заповнити ціни з графіка'; autoFillButton.style.cssText = ` width: 100%; padding: 10px; background: #FFD700; color: #000; border: none; border-radius: 6px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; `; autoFillButton.onmouseover = () => { autoFillButton.style.background = '#FFC700'; autoFillButton.style.transform = 'scale(1.02)'; }; autoFillButton.onmouseout = () => { autoFillButton.style.background = '#FFD700'; autoFillButton.style.transform = 'scale(1)'; }; autoFillSection.appendChild(autoFillButton); calculatorBox.appendChild(autoFillSection); // Manual price input section const manualPriceSection = document.createElement('div'); manualPriceSection.style.cssText = 'margin-bottom: 20px; padding: 15px; background: white; border-radius: 8px; border: 2px dashed #000;'; const manualPriceLabel = document.createElement('label'); manualPriceLabel.style.cssText = 'display: block; margin-bottom: 10px; color: #000; font-weight: bold; font-size: 14px;'; manualPriceLabel.textContent = 'Або введіть ціни вручну:'; manualPriceSection.appendChild(manualPriceLabel); const priceInputContainer = document.createElement('div'); priceInputContainer.style.cssText = 'display: grid; grid-template-columns: 1fr 1fr; gap: 10px;'; const minPriceLabel = document.createElement('label'); minPriceLabel.style.cssText = 'display: block; font-size: 12px; color: #000; margin-bottom: 5px;'; minPriceLabel.textContent = 'Мінімальна ціна ($):'; const minPriceInput = document.createElement('input'); minPriceInput.type = 'number'; minPriceInput.placeholder = '0.00'; minPriceInput.step = '0.01'; minPriceInput.style.cssText = 'padding: 8px; border: 2px solid #ddd; border-radius: 6px; font-size: 14px;'; const maxPriceLabel = document.createElement('label'); maxPriceLabel.style.cssText = 'display: block; font-size: 12px; color: #000; margin-bottom: 5px;'; maxPriceLabel.textContent = 'Максимальна ціна ($):'; const maxPriceInput = document.createElement('input'); maxPriceInput.type = 'number'; maxPriceInput.placeholder = '0.00'; maxPriceInput.step = '0.01'; maxPriceInput.style.cssText = 'padding: 8px; border: 2px solid #ddd; border-radius: 6px; font-size: 14px;'; const minPriceWrapper = document.createElement('div'); minPriceWrapper.appendChild(minPriceLabel); minPriceWrapper.appendChild(minPriceInput); const maxPriceWrapper = document.createElement('div'); maxPriceWrapper.appendChild(maxPriceLabel); maxPriceWrapper.appendChild(maxPriceInput); priceInputContainer.appendChild(minPriceWrapper); priceInputContainer.appendChild(maxPriceWrapper); manualPriceSection.appendChild(priceInputContainer); calculatorBox.appendChild(manualPriceSection); // Result display const resultSection = document.createElement('div'); resultSection.style.cssText = ` background: white; border-radius: 8px; padding: 20px; margin-top: 20px; border: 2px solid #ddd; display: none; `; resultSection.id = 'calculatorResult'; const resultTitle = document.createElement('div'); resultTitle.style.cssText = 'font-weight: bold; color: #000; margin-bottom: 15px; font-size: 16px;'; resultTitle.textContent = 'Результат розрахунку:'; resultSection.appendChild(resultTitle); const resultContent = document.createElement('div'); resultContent.id = 'resultContent'; resultSection.appendChild(resultContent); calculatorBox.appendChild(resultSection); container.appendChild(calculatorBox); // Calculate function function calculatePrice() { const selectedGrade = gradeSelect.value; const marketType = document.querySelector('input[name="market"]:checked').value; const manualMinPrice = minPriceInput.value ? parseFloat(minPriceInput.value) : null; const manualMaxPrice = maxPriceInput.value ? parseFloat(maxPriceInput.value) : null; // Determine if using manual prices or grade-based prices let minPrice, maxPrice, count; let useManualPrices = manualMinPrice !== null && manualMaxPrice !== null; if (useManualPrices) { // Use manually entered prices minPrice = manualMinPrice; maxPrice = manualMaxPrice; // If grade is selected, use its count for coefficient calculation if (selectedGrade) { count = listingsByGrade[selectedGrade].length; } else { resultSection.style.display = 'block'; resultContent.innerHTML = `

⚠️ Будь ласка, виберіть грейд для визначення коефіцієнта

`; return; } } else { // Use grade-based prices if (!selectedGrade) { resultSection.style.display = 'none'; return; } const listings = listingsByGrade[selectedGrade]; const prices = listings.map(l => l.price); minPrice = Math.min(...prices); maxPrice = Math.max(...prices); count = listings.length; } // Determine coefficient based on market type and count let coefficient = 0; let coefficientReason = ''; if (marketType === 'local') { if (count >= 26 && count <= 100) { coefficient = 0.7; coefficientReason = `Локальний ринок, ${count} оголошень (26-100) → коефіцієнт 0.7`; } else if (count >= 101 && count <= 200) { coefficient = 0.6; coefficientReason = `Локальний ринок, ${count} оголошень (101-200) → коефіцієнт 0.6`; } else if (count > 200) { coefficient = 0.5; coefficientReason = `Локальний ринок, ${count} оголошень (201+) → коефіцієнт 0.5`; } else { resultSection.style.display = 'block'; resultContent.innerHTML = `

⚠️ Для локального ринку потрібно мінімум 26 оголошень. Поточно: ${count}

`; return; } } else { if (count >= 1 && count <= 5) { coefficient = 0.8; coefficientReason = `Глобальний ринок, ${count} оголошень (1-5) → коефіцієнт 0.8`; } else if (count >= 6 && count <= 25) { coefficient = 0.7; coefficientReason = `Глобальний ринок, ${count} оголошень (6-25) → коефіцієнт 0.7`; } else if (count >= 26 && count <= 100) { coefficient = 0.6; coefficientReason = `Глобальний ринок, ${count} оголошень (26-100) → коефіцієнт 0.6`; } else if (count > 100) { coefficient = 0.5; coefficientReason = `Глобальний ринок, ${count} оголошень (100+) → коефіцієнт 0.5`; } } // Calculate price: ((max - min) * coefficient) + min const calculatedPrice = ((maxPrice - minPrice) * coefficient) + minPrice; // Update graph state with the calculated price to highlight it if (graphState) { graphState.highlightedPrice = calculatedPrice; // Trigger graph redraw to show the highlight if (graphState.redrawGraph) { graphState.redrawGraph(); } } // Display result resultSection.style.display = 'block'; resultContent.innerHTML = `

Формула: ((макс - мін) × коеф) + мін

((${maxPrice.toFixed(2)} - ${minPrice.toFixed(2)}) × ${coefficient}) + ${minPrice.toFixed(2)}

Рекомендована ціна

$${calculatedPrice.toFixed(2)}

Параметри:

• Мінімальна ціна: $${minPrice.toFixed(2)}

• Максимальна ціна: $${maxPrice.toFixed(2)}

• Діапазон: $${(maxPrice - minPrice).toFixed(2)}

${coefficientReason}

`; } // Auto-fill button listener autoFillButton.addEventListener('click', () => { const selectedGrade = gradeSelect.value; if (!selectedGrade) { alert('⚠️ Будь ласка, спочатку виберіть грейд'); return; } const prices = extractPricesFromYellowLines(listingsByGrade, selectedGrade); if (prices) { minPriceInput.value = prices.minPrice.toFixed(2); maxPriceInput.value = prices.maxPrice.toFixed(2); calculatePrice(); } else { alert('⚠️ Не вдалося отримати ціни з графіка'); } }); // Add event listeners gradeSelect.addEventListener('change', calculatePrice); localRadio.addEventListener('change', calculatePrice); globalRadio.addEventListener('change', calculatePrice); minPriceInput.addEventListener('input', calculatePrice); maxPriceInput.addEventListener('input', calculatePrice); } // Show tooltip with listing details function showTooltip(tooltip, listing, x, y) { tooltip.style.display = 'block'; tooltip.style.left = (x + 10) + 'px'; tooltip.style.top = (y + 10) + 'px'; let imageHtml = ''; if (listing.imageUrl) { imageHtml = ` Product image

`; } const badges = []; if (isAPlusShop(listing.shopName)) { badges.push('A Plus'); } if (isMatlockShop(listing.shopName)) { badges.push('Matlock !'); } tooltip.innerHTML = ` ${imageHtml}

${listing.price.toFixed(2)}

${badges.length ? `

${badges.join('')}

` : ''}

Грейд: ${listing.grade}

Номер: ${listing.stockNum}

Магазин: ${listing.shopName || 'Невідомо'}

${listing.yearPartModel}

${listing.description}

`; } // Draw the graph with multiple grades function drawMultiGradeGraph(canvas, listingsByGrade, tooltip, gradeVisibility, checkboxContainer, graphState, mustContainFilter) { const ctx = canvas.getContext('2d'); const width = canvas.width; const height = canvas.height; const padding = 50; const graphWidth = width - padding * 2; const graphHeight = height - padding * 2; // Pan state let isPanning = false; let panStartX = 0; let panStartY = 0; let panOffsetX = 0; let panOffsetY = 0; let zoomLevel = 1; // Collect all prices to determine scale let allPrices = []; Object.values(listingsByGrade).forEach(listings => { allPrices.push(...listings.map(l => l.price)); }); const minPrice = Math.min(...allPrices); const maxPrice = Math.max(...allPrices); const priceRange = maxPrice - minPrice || 1; // Find max listing count for any grade let maxListingCount = 0; Object.values(listingsByGrade).forEach(listings => { if (listings.length > maxListingCount) { maxListingCount = listings.length; } }); function redrawGraph() { // Clear canvas ctx.fillStyle = 'white'; ctx.fillRect(0, 0, width, height); // Draw grid ctx.strokeStyle = '#f0f0f0'; ctx.lineWidth = 1; // Vertical grid lines for (let i = 0; i <= 10; i++) { const x = padding + (graphWidth / 10) * i + panOffsetX; ctx.beginPath(); ctx.moveTo(x, padding); ctx.lineTo(x, height - padding); ctx.stroke(); } // Horizontal grid lines for (let i = 0; i <= 10; i++) { const y = height - padding - (graphHeight / 10) * i + panOffsetY; ctx.beginPath(); ctx.moveTo(padding, y); ctx.lineTo(width - padding, y); ctx.stroke(); } // Draw axes ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(padding, height - padding); ctx.lineTo(width - padding, height - padding); ctx.stroke(); ctx.beginPath(); ctx.moveTo(padding, padding); ctx.lineTo(padding, height - padding); ctx.stroke(); // Draw axis labels ctx.fillStyle = '#333'; ctx.font = 'bold 10px Arial'; ctx.textAlign = 'center'; // X-axis labels for (let i = 0; i <= 10; i++) { const x = padding + (graphWidth / 10) * i; const label = Math.round((maxListingCount / 10) * i); ctx.fillText(label, x, height - padding + 20); } // Y-axis labels ctx.textAlign = 'right'; for (let i = 0; i <= 10; i++) { const y = height - padding - (graphHeight / 10) * i; const label = '$' + Math.round(minPrice + (priceRange / 10) * i); ctx.fillText(label, padding - 10, y + 4); } // Draw axis titles ctx.font = 'bold 11px Arial'; ctx.textAlign = 'center'; ctx.fillText('Номер оголошення', width / 2, height - 8); ctx.save(); ctx.translate(15, height / 2); ctx.rotate(-Math.PI / 2); ctx.fillText('Ціна ($)', 0, 0); ctx.restore(); // Draw vertical yellow lines at 10% and 90% of listings (if enabled) if (graphState && graphState.showYellowLines) { ctx.strokeStyle = '#FFD700'; // Yellow color ctx.lineWidth = 3; ctx.setLineDash([5, 5]); // Dashed line // Line at 10% (first 10% cutoff) const x10Percent = padding + (0.1 * graphWidth) + panOffsetX; ctx.beginPath(); ctx.moveTo(x10Percent, padding); ctx.lineTo(x10Percent, height - padding); ctx.stroke(); // Line at 90% (last 10% cutoff) const x90Percent = padding + (0.9 * graphWidth) + panOffsetX; ctx.beginPath(); ctx.moveTo(x90Percent, padding); ctx.lineTo(x90Percent, height - padding); ctx.stroke(); ctx.setLineDash([]); // Reset line dash } // Draw vertical green lines at 10% and 90% of price range (if enabled) if (graphState && graphState.showGreenLines) { ctx.strokeStyle = '#00AA00'; // Green color ctx.lineWidth = 3; ctx.setLineDash([5, 5]); // Dashed line // Line at 10% from bottom (first 10% of price range) const y10PercentPrice = height - padding - (0.1 * graphHeight) + panOffsetY; ctx.beginPath(); ctx.moveTo(padding, y10PercentPrice); ctx.lineTo(width - padding, y10PercentPrice); ctx.stroke(); // Line at 90% from bottom (last 10% of price range from top) const y90PercentPrice = height - padding - (0.9 * graphHeight) + panOffsetY; ctx.beginPath(); ctx.moveTo(padding, y90PercentPrice); ctx.lineTo(width - padding, y90PercentPrice); ctx.stroke(); ctx.setLineDash([]); // Reset line dash } // Draw data for each grade Object.entries(listingsByGrade).forEach(([grade, listings]) => { if (!gradeVisibility[grade]) return; ctx.strokeStyle = gradeColors[grade] || '#000'; ctx.fillStyle = gradeColors[grade] || '#000'; ctx.lineWidth = 1.5; // Draw lines and points for (let i = 0; i < listings.length; i++) { const listing = listings[i]; const x = padding + (i / maxListingCount) * graphWidth * zoomLevel + panOffsetX; const y = height - padding - ((listing.price - minPrice) / priceRange) * graphHeight * zoomLevel + panOffsetY; if (i === 0) { ctx.beginPath(); ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } // Draw point ctx.fillRect(x - 2, y - 2, 4, 4); } ctx.stroke(); // Draw red dots for A Plus Auto LLC listings for (let i = 0; i < listings.length; i++) { const listing = listings[i]; if (isAPlusShop(listing.shopName)) { const x = padding + (i / maxListingCount) * graphWidth * zoomLevel + panOffsetX; const y = height - padding - ((listing.price - minPrice) / priceRange) * graphHeight * zoomLevel + panOffsetY; // Draw red circle with glow effect ctx.fillStyle = 'rgba(231, 76, 60, 0.3)'; ctx.beginPath(); ctx.arc(x, y, 8, 0, Math.PI * 2); ctx.fill(); // Draw solid red circle border ctx.strokeStyle = '#e74c3c'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(x, y, 8, 0, Math.PI * 2); ctx.stroke(); } } // Draw Matlock listings with an exclamation mark for (let i = 0; i < listings.length; i++) { const listing = listings[i]; if (isMatlockShop(listing.shopName)) { const x = padding + (i / maxListingCount) * graphWidth * zoomLevel + panOffsetX; const y = height - padding - ((listing.price - minPrice) / priceRange) * graphHeight * zoomLevel + panOffsetY; // Glow behind the marker ctx.fillStyle = 'rgba(255, 193, 7, 0.28)'; ctx.beginPath(); ctx.arc(x, y, 11, 0, Math.PI * 2); ctx.fill(); // White badge ctx.fillStyle = '#ffffff'; ctx.beginPath(); ctx.arc(x, y, 8.5, 0, Math.PI * 2); ctx.fill(); // Orange border ctx.strokeStyle = '#f39c12'; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.arc(x, y, 8.5, 0, Math.PI * 2); ctx.stroke(); // Exclamation mark ctx.fillStyle = '#d35400'; ctx.font = 'bold 14px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('!', x, y + 0.5); ctx.textBaseline = 'alphabetic'; } } // Draw purple highlights for must contain filter matches if (mustContainFilter && mustContainFilter.trim()) { for (let i = 0; i < listings.length; i++) { const listing = listings[i]; if (containsLettersInOrder(listing.description, mustContainFilter)) { const x = padding + (i / maxListingCount) * graphWidth * zoomLevel + panOffsetX; const y = height - padding - ((listing.price - minPrice) / priceRange) * graphHeight * zoomLevel + panOffsetY; // Draw purple circle with glow effect ctx.fillStyle = 'rgba(155, 89, 182, 0.3)'; ctx.beginPath(); ctx.arc(x, y, 12, 0, Math.PI * 2); ctx.fill(); // Draw solid purple circle border ctx.strokeStyle = '#9b59b6'; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.arc(x, y, 12, 0, Math.PI * 2); ctx.stroke(); } } } // Draw price drop annotations for (let i = 1; i < listings.length; i++) { const prevPrice = listings[i - 1].price; const currPrice = listings[i].price; const priceDrop = ((prevPrice - currPrice) / prevPrice) * 100; if (priceDrop >= 5) { const x1 = padding + ((i - 1) / maxListingCount) * graphWidth * zoomLevel + panOffsetX; const y1 = height - padding - ((prevPrice - minPrice) / priceRange) * graphHeight * zoomLevel + panOffsetY; const x2 = padding + (i / maxListingCount) * graphWidth * zoomLevel + panOffsetX; const y2 = height - padding - ((currPrice - minPrice) / priceRange) * graphHeight * zoomLevel + panOffsetY; // Draw annotation line ctx.strokeStyle = '#e74c3c'; ctx.lineWidth = 1; ctx.setLineDash([5, 5]); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); ctx.setLineDash([]); // Draw annotation text const midX = (x1 + x2) / 2; const midY = (y1 + y2) / 2; ctx.fillStyle = '#e74c3c'; ctx.font = 'bold 9px Arial'; ctx.textAlign = 'center'; ctx.fillText(`↓${priceDrop.toFixed(1)}%`, midX, midY - 8); } } // Highlight the point where the calculated price would be if (graphState && graphState.highlightedPrice !== null) { // Find the closest price point to the calculated price let closestIndex = 0; let closestDiff = Math.abs(listings[0].price - graphState.highlightedPrice); for (let i = 1; i < listings.length; i++) { const diff = Math.abs(listings[i].price - graphState.highlightedPrice); if (diff < closestDiff) { closestDiff = diff; closestIndex = i; } } // Draw green highlight circle at the closest point const x = padding + (closestIndex / maxListingCount) * graphWidth * zoomLevel + panOffsetX; const y = height - padding - ((listings[closestIndex].price - minPrice) / priceRange) * graphHeight * zoomLevel + panOffsetY; // Draw green circle with glow effect ctx.fillStyle = 'rgba(46, 204, 113, 0.3)'; ctx.beginPath(); ctx.arc(x, y, 12, 0, Math.PI * 2); ctx.fill(); // Draw solid green circle border ctx.strokeStyle = '#2ecc71'; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(x, y, 12, 0, Math.PI * 2); ctx.stroke(); // Draw inner white circle ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(x, y, 8, 0, Math.PI * 2); ctx.fill(); // Draw green checkmark inside ctx.strokeStyle = '#2ecc71'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(x - 3, y); ctx.lineTo(x - 1, y + 2); ctx.lineTo(x + 3, y - 2); ctx.stroke(); } }); // Mouse move event for tooltip canvas.addEventListener('mousemove', (e) => { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const mouseX = (e.clientX - rect.left) * scaleX; const mouseY = (e.clientY - rect.top) * scaleY; let foundListing = null; Object.entries(listingsByGrade).forEach(([grade, listings]) => { if (!gradeVisibility[grade]) return; for (let i = 0; i < listings.length; i++) { const listing = listings[i]; const x = padding + (i / maxListingCount) * graphWidth * zoomLevel + panOffsetX; const y = height - padding - ((listing.price - minPrice) / priceRange) * graphHeight * zoomLevel + panOffsetY; const distance = Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2); if (distance < 6) { foundListing = listing; } } }); if (foundListing) { showTooltip(tooltip, foundListing, e.clientX, e.clientY); } else { tooltip.style.display = 'none'; } }); } // Store redrawGraph function in graphState so calculator can trigger redraws graphState.redrawGraph = redrawGraph; redrawGraph(); // Pan and zoom functionality disabled - chart is now fixed // Users can still hover over points to see tooltips canvas.addEventListener('mouseleave', () => { tooltip.style.display = 'none'; }); // Add checkbox change listeners const checkboxes = checkboxContainer.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(checkbox => { checkbox.addEventListener('change', (e) => { const grade = e.target.dataset.grade; gradeVisibility[grade] = e.target.checked; redrawGraph(); }); }); } // Initialize function initAll() { addParserButton(); initMinMaxFeature(); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initAll); } else { initAll(); } })();