// ==UserScript== // @name A++Damage // @namespace web.nextbyte.ai // @version 65.2 // @description A++Damage parser for Car-Part trading pages with multi-grade price analysis, graphing, calculator, and listing insights. // @author NextByte // @match *://trade9907.car-part.com/cgi-bin/tpSearch.cgi* // @grant GM_xmlhttpRequest // @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' }; // Add button to start parser function addParserButton() { const button = document.createElement('button'); button.textContent = 'AD'; button.style.cssText = ` position: fixed; top: 60px; right: 60px; z-index: 10000; padding: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 0px; font-size: 12px; font-weight: bold; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.3s ease; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; `; button.onmouseover = () => { button.style.transform = 'translateY(-2px)'; button.style.boxShadow = '0 4px 12px rgba(0,0,0,0.3)'; }; button.onmouseout = () => { button.style.transform = 'translateY(0)'; button.style.boxShadow = '0 2px 8px 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 миль

`; 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 as checked by default selectAllCheckbox.checked = true; 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; document.body.removeChild(overlay); startParsing(pageCount, gradeFilter, distanceFilter); }; } // 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); } } // 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 < 8) continue; // Extract data const yearPartModel = cells[0].textContent.trim(); const descriptionCell = cells[1]; // cells[2] is Damage Code - IGNORE IT // cells[3] is Part/Grade let gradeRaw = cells[3].textContent.trim(); // Extract only the first letter of the grade (ignore suffixes like "0", "1", "cc", "hrs", etc.) // Match only the first letter (A-Z) const gradeMatch = gradeRaw.match(/[A-Z]/); const grade = gradeMatch ? gradeMatch[0].toUpperCase() : 'A'; const stockNum = cells[4].textContent.trim(); const priceText = cells[5].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 7th cell (cells[6]) const shopCell = cells[6]; let shopName = ''; if (shopCell) { const shopLink = shopCell.querySelector('a'); if (shopLink) { shopName = shopLink.textContent.trim(); } } // Extract distance from the 8th cell (cells[7]) let distance = 0; if (cells.length > 7) { const distanceText = cells[7].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) { 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); } 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); } else { alert('Немає даних для аналізу'); } } }, onerror: function() { clearInterval(countdownInterval); hideLoading(); alert('Помилка при завантаженні сторінки'); } }); } loadPage(1); } // Show results function showResults(listings, gradeFilter) { 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: 20px; overflow: auto; max-width: 95vw; max-height: 95vh; width: 1400px; `; 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 15px 0; color: #000; font-size: 22px;'; container.appendChild(title); // Create wrapper for graph and calculator side by side const graphCalcWrapper = document.createElement('div'); graphCalcWrapper.style.cssText = ` display: flex; gap: 20px; margin-bottom: 20px; align-items: flex-start; `; container.appendChild(graphCalcWrapper); // Create canvas for graph const canvas = document.createElement('canvas'); canvas.width = 600; canvas.height = 300; canvas.style.cssText = ` border: 1px solid #ddd; border-radius: 8px; background: white; cursor: crosshair; flex-shrink: 0; `; graphCalcWrapper.appendChild(canvas); // 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 }; drawMultiGradeGraph(canvas, listingsByGrade, tooltip, gradeVisibility, checkboxContainer, graphState); // 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: 20px; padding-top: 15px; 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; } // Function to get prices at yellow line positions (10% and 90%) function getPricesAtYellowLines(listings) { if (!listings || listings.length === 0) { return { minPrice: null, maxPrice: null }; } // Sort listings by price to find the range const sortedListings = [...listings].sort((a, b) => a.price - b.price); // Get prices at 10% and 90% positions const index10 = Math.floor(sortedListings.length * 0.1); const index90 = Math.floor(sortedListings.length * 0.9); const price10 = sortedListings[index10].price; const price90 = sortedListings[index90].price; return { minPrice: Math.min(price10, price90), maxPrice: Math.max(price10, price90) }; } // Create calculator 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: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); max-width: 500px; min-width: 350px; `; // Market type selector const marketSection = document.createElement('div'); marketSection.style.cssText = 'margin-bottom: 12px;'; 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: 12px;'; 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); // Manual price input section const manualPriceSection = document.createElement('div'); manualPriceSection.style.cssText = 'margin-bottom: 12px; padding: 10px; 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: 12px; margin-top: 12px; 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}

`; } // Add event listeners gradeSelect.addEventListener('change', () => { // Auto-populate prices from yellow lines when grade is selected const selectedGrade = gradeSelect.value; if (selectedGrade && listingsByGrade[selectedGrade]) { const { minPrice, maxPrice } = getPricesAtYellowLines(listingsByGrade[selectedGrade]); if (minPrice !== null && maxPrice !== null) { minPriceInput.value = minPrice.toFixed(2); maxPriceInput.value = maxPrice.toFixed(2); } } 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

`; } tooltip.innerHTML = ` ${imageHtml}

${listing.price.toFixed(2)}

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

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

${listing.yearPartModel}

${listing.description}

`; } // Draw the graph with multiple grades function drawMultiGradeGraph(canvas, listingsByGrade, tooltip, gradeVisibility, checkboxContainer, graphState) { 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 for first 10% and last 10% of market ctx.strokeStyle = '#FFD700'; // Yellow color ctx.lineWidth = 2; ctx.setLineDash([5, 5]); // Dashed line style // First vertical line at 10% from the left const line1X = padding + (graphWidth * 0.1); ctx.beginPath(); ctx.moveTo(line1X, padding); ctx.lineTo(line1X, height - padding); ctx.stroke(); // Second vertical line at 90% from the left (last 10%) const line2X = padding + (graphWidth * 0.9); ctx.beginPath(); ctx.moveTo(line2X, padding); ctx.lineTo(line2X, height - padding); ctx.stroke(); ctx.setLineDash([]); // Reset line dash // Draw horizontal green lines for first 10% and last 10% of price range ctx.strokeStyle = '#00AA00'; // Green color ctx.lineWidth = 2; ctx.setLineDash([5, 5]); // Dashed line style // First horizontal line at 10% from the bottom (first 10% of price range) const line3Y = height - padding - (graphHeight * 0.1); ctx.beginPath(); ctx.moveTo(padding, line3Y); ctx.lineTo(width - padding, line3Y); ctx.stroke(); // Second horizontal line at 90% from the bottom (last 10% of price range from top) const line4Y = height - padding - (graphHeight * 0.9); ctx.beginPath(); ctx.moveTo(padding, line4Y); ctx.lineTo(width - padding, line4Y); 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 (listing.shopName && listing.shopName.includes('A Plus Auto LLC')) { 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 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 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', addParserButton); } else { addParserButton(); } })();