// ==UserScript== // @name Miiles // @namespace web.nextbyte.ai // @version 68.1 // @description Miiles - інструмент для аналізу оголошень з графіком цін, інфографікою, калькулятором та фільтрацією за пробігом на сторінках результатів car-part.com. // @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 widgetContainer = document.createElement('div'); widgetContainer.style.cssText = ` position: fixed; top: 50px; right: 10px; z-index: 10000; display: flex; gap: 8px; align-items: center; `; const amButton = document.createElement('button'); amButton.style.cssText = ` position: relative; width: 40px; height: 40px; border-radius: 4px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; font-size: 11px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; padding: 0; `; amButton.textContent = 'AM'; amButton.title = 'Аналізувати ціни'; amButton.onmouseover = () => { amButton.style.transform = 'scale(1.1)'; amButton.style.boxShadow = '0 6px 20px rgba(0,0,0,0.3)'; }; amButton.onmouseout = () => { amButton.style.transform = 'scale(1)'; amButton.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)'; }; amButton.onclick = showParserDialog; widgetContainer.appendChild(amButton); document.body.appendChild(widgetContainer); } // Get available page count from pagination function getAvailablePageCount() { const paginationContainer = document.getElementById('top-pagination-container'); if (!paginationContainer) return 0; 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 { const text = link.textContent.trim(); if (/^\d+$/.test(text)) { const num = parseInt(text); if (num > maxPage) maxPage = num; } } } return maxPage; } // Check if Miles column exists in the table function hasMilesColumn() { const table = document.querySelector('table[border="1"]'); if (!table) return false; const headerRow = table.querySelector('tbody tr'); if (!headerRow) return false; const headerCells = headerRow.querySelectorAll('td'); for (let cell of headerCells) { if (cell.textContent.includes('Miles')) { return true; } } return false; } // 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%; max-height: 90vh; overflow-y: auto; `; const availablePages = getAvailablePageCount(); const selectAllText = availablePages > 0 ? ` (доступно: ${availablePages})` : ''; const milesColumnExists = hasMilesColumn(); let dialogHTML = `

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

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

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

`; if (milesColumnExists) { dialogHTML += `

Фільтр за пробігом (Miles): Введіть пробіг. Буде враховуватися діапазон ±15,000 миль.
Наприклад: 30,000 → 15,000 до 45,000

`; } dialogHTML += `

Тип ринку:

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

`; dialog.innerHTML = dialogHTML; overlay.appendChild(dialog); document.body.appendChild(overlay); const selectAllCheckbox = document.getElementById('selectAllPages'); const pageCountInput = document.getElementById('pageCount'); selectAllCheckbox.checked = true; pageCountInput.value = availablePages; pageCountInput.disabled = true; selectAllCheckbox.onchange = () => { if (selectAllCheckbox.checked) { pageCountInput.value = availablePages; pageCountInput.disabled = true; } else { pageCountInput.disabled = false; } }; document.getElementById('cancelParsing').onclick = () => { document.body.removeChild(overlay); }; document.getElementById('startParsing').onclick = () => { const pageCount = parseInt(document.getElementById('pageCount').value); const marketType = document.getElementById('marketType').value; const distanceFilter = document.getElementById('distanceFilter').checked; let mileageFilter = null; if (milesColumnExists) { const mileageInput = document.getElementById('mileageFilter').value.trim(); if (mileageInput) { const mileage = parseInt(mileageInput.replace(/,/g, '')); if (!isNaN(mileage)) { mileageFilter = mileage; } } } document.body.removeChild(overlay); startParsing(pageCount, marketType, distanceFilter, mileageFilter); }; } // 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}

`; 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; } 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; } let hasMiles = false; const headerRow = rows[0]; const headerCells = headerRow.querySelectorAll('td'); for (let cell of headerCells) { if (cell.textContent.includes('Miles')) { hasMiles = true; break; } } for (let i = 1; i < rows.length; i++) { const row = rows[i]; const cells = row.querySelectorAll('td'); if (cells.length < 7) continue; const yearPartModel = cells[0].textContent.trim(); const descriptionCell = cells[1]; let miles = null; let gradeRaw, grade, stockNum, priceText, price, shopCell, distance; if (hasMiles) { const milesText = cells[2].textContent.trim(); const milesMatch = milesText.match(/(\d+(?:,\d+)*)/); if (milesMatch) { miles = parseInt(milesMatch[1].replace(/,/g, '')); } gradeRaw = cells[3].textContent.trim(); grade = gradeRaw.charAt(0).toUpperCase(); stockNum = cells[4].textContent.trim(); priceText = cells[5].textContent.trim(); shopCell = cells[6]; if (cells.length > 7) { const distanceText = cells[7].textContent.trim(); const distanceMatch = distanceText.match(/(\d+)/); distance = distanceMatch ? parseInt(distanceMatch[1]) : 0; } else { distance = 0; } } else { gradeRaw = cells[2].textContent.trim(); grade = gradeRaw.charAt(0).toUpperCase(); stockNum = cells[3].textContent.trim(); priceText = cells[4].textContent.trim(); shopCell = cells[5]; if (cells.length > 6) { const distanceText = cells[6].textContent.trim(); const distanceMatch = distanceText.match(/(\d+)/); distance = distanceMatch ? parseInt(distanceMatch[1]) : 0; } else { distance = 0; } } const priceMatch = priceText.match(/\$?([\d,]+\.?\d*)/); price = priceMatch ? parseFloat(priceMatch[1].replace(',', '')) : null; if (!price) continue; const img = descriptionCell.querySelector('img[src*="thumb"]'); let imageUrl = null; if (img && img.src) { imageUrl = img.src; } let description = descriptionCell.textContent.trim(); description = description.replace(/\s+/g, ' ').substring(0, 300); let shopName = ''; if (shopCell) { const shopLink = shopCell.querySelector('a'); if (shopLink) { shopName = shopLink.textContent.trim(); } } listings.push({ yearPartModel, grade, stockNum, price, imageUrl, description, shopName, distance, miles }); } return listings; } // Start parsing function startParsing(pageCount, marketType, distanceFilter, mileageFilter) { showLoading('Завантаження даних...'); const allListings = []; let pagesLoaded = 0; const startTime = Date.now(); const estimatedTimePerPage = 4000; const totalEstimatedTime = pageCount * estimatedTimePerPage; let mileageMin = null; let mileageMax = null; if (mileageFilter !== null && mileageFilter !== undefined) { const tolerance = 15000; mileageMin = Math.max(0, mileageFilter - tolerance); mileageMax = mileageFilter + tolerance; } 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); let filtered = listings; if (mileageFilter !== null && mileageFilter !== undefined && marketType === 'selected') { filtered = filtered.filter(l => { if (l.miles === null || l.miles === undefined) return false; return l.miles >= mileageMin && l.miles <= mileageMax; }); } 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) { allListings.sort((a, b) => a.price - b.price); showResults(allListings, null, mileageFilter, mileageMin, mileageMax, marketType); } else { alert('Немає даних для аналізу'); } } }, onerror: function() { clearInterval(countdownInterval); hideLoading(); alert('Помилка при завантаженні сторінки'); } }); } loadPage(1); } // Show results function showResults(listings, gradeFilter, mileageFilter, mileageMin, mileageMax, marketType) { 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 = 'X'; 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); // If marketType is "all", create 4 separate graphs for different mileage ranges if (marketType === 'all') { const mileageRanges = [ { min: 0, max: 30000, color: '#667eea', label: '0 - 30,000 миль' }, { min: 30000, max: 60000, color: '#f093fb', label: '30,000 - 60,000 миль' }, { min: 60000, max: 90000, color: '#4facfe', label: '60,000 - 90,000 миль' }, { min: 90000, max: 120000, color: '#fa709a', label: '90,000 - 120,000 миль' } ]; const graphsContainer = document.createElement('div'); graphsContainer.style.cssText = 'display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-bottom: 30px;'; container.appendChild(graphsContainer); mileageRanges.forEach(range => { const filteredListings = listings.filter(l => { if (l.miles === null || l.miles === undefined) return false; return l.miles >= range.min && l.miles <= range.max; }); if (filteredListings.length > 0) { const graphWrapper = document.createElement('div'); graphWrapper.style.cssText = 'border: 2px solid ' + range.color + '; border-radius: 8px; padding: 15px; background: #f9f9f9;'; const rangeTitle = document.createElement('h4'); rangeTitle.textContent = range.label + ' (' + filteredListings.length + ' оголошень)'; rangeTitle.style.cssText = 'margin: 0 0 15px 0; color: ' + range.color + '; font-size: 16px;'; graphWrapper.appendChild(rangeTitle); const rangeCanvas = document.createElement('canvas'); rangeCanvas.width = 500; rangeCanvas.height = 300; rangeCanvas.style.cssText = ` border: 1px solid #ddd; border-radius: 8px; background: white; cursor: crosshair; display: block; width: 100%; `; graphWrapper.appendChild(rangeCanvas); graphsContainer.appendChild(graphWrapper); const rangeTooltip = document.createElement('div'); rangeTooltip.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(rangeTooltip); const listingsByGradeRange = {}; filteredListings.forEach(listing => { if (!listingsByGradeRange[listing.grade]) { listingsByGradeRange[listing.grade] = []; } listingsByGradeRange[listing.grade].push(listing); }); const rangeCheckboxContainer = document.createElement('div'); rangeCheckboxContainer.style.cssText = 'margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap;'; const rangeGradeVisibility = {}; Object.keys(listingsByGradeRange).forEach(key => { rangeGradeVisibility[key] = true; const label = document.createElement('label'); label.style.cssText = 'display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 12px;'; const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.checked = true; checkbox.dataset.grade = key; checkbox.style.cssText = 'cursor: pointer; width: 16px; height: 16px;'; const labelText = document.createElement('span'); labelText.textContent = 'Грейд ' + key; labelText.style.cssText = 'color: #000; font-weight: bold;'; label.appendChild(checkbox); label.appendChild(labelText); rangeCheckboxContainer.appendChild(label); }); graphWrapper.appendChild(rangeCheckboxContainer); const rangeGraphState = { highlightedPrice: null, redrawGraph: null, showYellowLines: true, showGreenLines: true }; drawMultiGradeGraph(rangeCanvas, listingsByGradeRange, rangeTooltip, rangeGradeVisibility, rangeCheckboxContainer, rangeGraphState); } }); 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); const allRangesListings = {}; mileageRanges.forEach(range => { const filteredListings = listings.filter(l => { if (l.miles === null || l.miles === undefined) return false; return l.miles >= range.min && l.miles <= range.max; }); if (filteredListings.length > 0) { allRangesListings[range.label] = filteredListings; } }); createInfographics(infographicsSection, allRangesListings, true); container.appendChild(infographicsSection); document.body.appendChild(container); return; } // 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); 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; `; const graphContainer = document.createElement('div'); graphContainer.style.cssText = 'flex-shrink: 0;'; graphContainer.appendChild(canvas); const sliderContainer = document.createElement('div'); sliderContainer.style.cssText = ` margin-top: 15px; padding: 15px; background: #f5f5f5; border-radius: 8px; border: 1px solid #ddd; `; 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); 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); 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); const listingsByGrade = {}; const isMileageMode = mileageFilter !== null && mileageFilter !== undefined; if (isMileageMode) { const mileageRange = `${mileageMin.toLocaleString()} - ${mileageMax.toLocaleString()} миль`; listingsByGrade[mileageRange] = listings; } else { listings.forEach(listing => { if (!listingsByGrade[listing.grade]) { listingsByGrade[listing.grade] = []; } listingsByGrade[listing.grade].push(listing); }); } const checkboxContainer = document.createElement('div'); checkboxContainer.style.cssText = 'margin-bottom: 20px; display: flex; gap: 15px; flex-wrap: wrap;'; const gradeVisibility = {}; Object.keys(listingsByGrade).forEach(key => { gradeVisibility[key] = 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 = key; checkbox.style.cssText = 'cursor: pointer; width: 18px; height: 18px;'; const labelText = document.createElement('span'); labelText.textContent = isMileageMode ? `Пробіг: ${key}` : `Грейд ${key}`; labelText.style.cssText = `color: #000; font-weight: bold; font-size: 14px;`; label.appendChild(checkbox); label.appendChild(labelText); checkboxContainer.appendChild(label); }); container.appendChild(checkboxContainer); const graphState = { highlightedPrice: null, redrawGraph: null, showYellowLines: true, showGreenLines: true }; drawMultiGradeGraph(canvas, listingsByGrade, tooltip, gradeVisibility, checkboxContainer, graphState); yellowCheckbox.addEventListener('change', (e) => { graphState.showYellowLines = e.target.checked; graphState.redrawGraph(); }); greenCheckbox.addEventListener('change', (e) => { graphState.showGreenLines = e.target.checked; graphState.redrawGraph(); }); 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, isMileageMode); graphCalcWrapper.appendChild(calculatorSection); 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 = isMileageMode ? 'Детальна інфографіка по діапазону пробігу' : 'Детальна інфографіка по грейдам'; infographicsTitle.style.cssText = 'margin: 0 0 20px 0; color: #000; font-size: 20px;'; infographicsSection.appendChild(infographicsTitle); createInfographics(infographicsSection, listingsByGrade, isMileageMode); container.appendChild(infographicsSection); document.body.appendChild(container); } // Create infographics function createInfographics(container, listingsByGrade, isMileageMode) { 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(([key, listings]) => { const grade = isMileageMode ? null : key; const mileageRange = isMileageMode ? key : null; 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; 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)]; 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; 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); `; 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: ${isMileageMode ? '#667eea' : (gradeColors[grade] || '#000')}; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold; margin-right: 15px; `; gradeCircle.textContent = isMileageMode ? 'M' : grade; const headerText = document.createElement('div'); headerText.style.cssText = 'flex: 1;'; if (isMileageMode) { headerText.innerHTML = `

Пробіг: ${mileageRange}

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

`; } else { headerText.innerHTML = `

Грейд ${grade}

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

`; } header.appendChild(gradeCircle); header.appendChild(headerText); card.appendChild(header); const indicatorsGrid = document.createElement('div'); indicatorsGrid.style.cssText = 'display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;'; indicatorsGrid.appendChild(createIndicator('Мінімальна ціна', `$${minPrice.toFixed(2)}`, '#4facfe', 'min')); indicatorsGrid.appendChild(createIndicator('Максимальна ціна', `$${maxPrice.toFixed(2)}`, '#fa709a', 'max')); indicatorsGrid.appendChild(createIndicator('Середня ціна', `$${avgPrice.toFixed(2)}`, '#667eea', 'avg')); indicatorsGrid.appendChild(createIndicator('Медіанна ціна', `$${medianPrice.toFixed(2)}`, '#30cfd0', 'med')); indicatorsGrid.appendChild(createIndicator('Діапазон цін', `$${priceRange.toFixed(2)}`, '#f093fb', 'rng')); indicatorsGrid.appendChild(createIndicator('Стандартне відхилення', `${stdDev.toFixed(2)}`, '#fed6e3', 'std')); const lowerThreshold = avgPrice - stdDev; indicatorsGrid.appendChild(createIndicator('Поріг виживання (мін)', `${lowerThreshold.toFixed(2)}`, '#a8edea', 'lo')); const upperThreshold = avgPrice + stdDev; indicatorsGrid.appendChild(createIndicator('Поріг виживання (макс)', `${upperThreshold.toFixed(2)}`, '#ff9a56', 'hi')); card.appendChild(indicatorsGrid); 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); 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); Object.entries(priceDistribution).forEach(([range, cnt]) => { const percentage = totalCount > 0 ? (cnt / totalCount) * 100 : 0; const barHeight = totalCount > 0 ? (cnt / totalCount) * 100 : 0; 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; `; const bar = document.createElement('div'); const barColor = isMileageMode ? '#667eea' : (gradeColors[grade] || '#000'); bar.style.cssText = ` width: 100%; background: linear-gradient(180deg, ${barColor} 0%, ${barColor}80 100%); border-radius: 4px 4px 0 0; height: ${barHeight}%; min-height: 8px; transition: all 0.2s ease; position: relative; display: flex; align-items: center; justify-content: center; `; 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: ${barHeight > 20 ? '1' : '0'}; transition: opacity 0.2s ease; `; percentageLabel.textContent = `${percentage.toFixed(1)}%`; bar.appendChild(percentageLabel); 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); const hoverColor = isMileageMode ? '#667eea' : (gradeColors[grade] || '#000'); barContainer.onmouseover = () => { bar.style.opacity = '0.85'; bar.style.transform = 'scaleY(1.05)'; percentageLabel.style.opacity = '1'; rangeLabel.style.color = hoverColor; rangeLabel.style.fontWeight = 'bold'; }; barContainer.onmouseout = () => { bar.style.opacity = '1'; bar.style.transform = 'scaleY(1)'; percentageLabel.style.opacity = barHeight > 20 ? '1' : '0'; rangeLabel.style.color = '#000'; rangeLabel.style.fontWeight = '500'; }; barContainer.title = `${range}: ${cnt} оголошень (${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; 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; } 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 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; } const index10Percent = Math.floor(listings.length * 0.1); const index90Percent = Math.floor(listings.length * 0.9); 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 { minPrice: Math.min(price10, price90), maxPrice: Math.max(price10, price90) }; } function createCalculator(container, listingsByGrade, graphState, isMileageMode) { 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; `; 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.textContent = 'Локальний ринок'; 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.textContent = 'Глобальний ринок'; marketContainer.appendChild(localRadio); marketContainer.appendChild(localLabel); marketContainer.appendChild(globalRadio); marketContainer.appendChild(globalLabel); marketSection.appendChild(marketContainer); calculatorBox.appendChild(marketSection); const gradeSection = document.createElement('div'); gradeSection.style.cssText = `margin-bottom: 20px; ${isMileageMode ? 'display: none;' : ''}`; 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; const displayText = isMileageMode ? `${grade} (${listingsByGrade[grade].length} оголошень)` : `Грейд ${grade} (${listingsByGrade[grade].length} оголошень)`; option.textContent = displayText; gradeSelect.appendChild(option); }); gradeSection.appendChild(gradeSelect); calculatorBox.appendChild(gradeSection); 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); 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); 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); 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; let minPrice, maxPrice, count; let useManualPrices = manualMinPrice !== null && manualMaxPrice !== null; if (useManualPrices) { minPrice = manualMinPrice; maxPrice = manualMaxPrice; if (isMileageMode) { const allListings = Object.values(listingsByGrade).flat(); count = allListings.length; } else if (selectedGrade) { count = listingsByGrade[selectedGrade].length; } else { resultSection.style.display = 'block'; resultContent.innerHTML = `

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

`; return; } } else { if (isMileageMode) { const allListings = Object.values(listingsByGrade).flat(); const prices = allListings.map(l => l.price); minPrice = Math.min(...prices); maxPrice = Math.max(...prices); count = allListings.length; } else { 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; } } 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`; } } const calculatedPrice = ((maxPrice - minPrice) * coefficient) + minPrice; if (graphState) { graphState.highlightedPrice = calculatedPrice; if (graphState.redrawGraph) { graphState.redrawGraph(); } } resultSection.style.display = 'block'; resultContent.innerHTML = `

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

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

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

$${calculatedPrice.toFixed(2)}

Параметри:

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

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

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

${coefficientReason}

`; } autoFillButton.addEventListener('click', () => { let prices; if (isMileageMode) { const allListings = Object.values(listingsByGrade).flat(); if (allListings.length < 2) { alert('Недостатньо даних для автоматичного заповнення'); return; } const sortedPrices = allListings.map(l => l.price).sort((a, b) => a - b); const price10Index = Math.floor(sortedPrices.length * 0.1); const price90Index = Math.floor(sortedPrices.length * 0.9); prices = { minPrice: sortedPrices[price10Index], maxPrice: sortedPrices[price90Index] }; } else { const selectedGrade = gradeSelect.value; if (!selectedGrade) { alert('Будь ласка, спочатку виберіть грейд'); return; } prices = extractPricesFromYellowLines(listingsByGrade, selectedGrade); } if (prices) { minPriceInput.value = prices.minPrice.toFixed(2); maxPriceInput.value = prices.maxPrice.toFixed(2); calculatePrice(); } else { alert('Не вдалося отримати ціни з графіка'); } }); if (!isMileageMode) { 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

`; } let mileageHtml = ''; if (listing.miles !== null && listing.miles !== undefined) { mileageHtml = `

Пробіг: ${listing.miles.toLocaleString()} миль

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

$${listing.price.toFixed(2)}

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

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

${mileageHtml}

${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; let panOffsetX = 0; let panOffsetY = 0; let zoomLevel = 1; 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; let maxListingCount = 0; Object.values(listingsByGrade).forEach(listings => { if (listings.length > maxListingCount) { maxListingCount = listings.length; } }); function redrawGraph() { ctx.fillStyle = 'white'; ctx.fillRect(0, 0, width, height); ctx.strokeStyle = '#f0f0f0'; ctx.lineWidth = 1; 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(); } 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(); } 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(); ctx.fillStyle = '#333'; ctx.font = 'bold 10px Arial'; ctx.textAlign = 'center'; 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); } 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); } ctx.font = 'bold 11px Arial'; ctx.textAlign = 'center'; ctx.fillStyle = '#333'; ctx.fillText('Номер оголошення', width / 2, height - 8); ctx.save(); ctx.translate(15, height / 2); ctx.rotate(-Math.PI / 2); ctx.fillText('Ціна ($)', 0, 0); ctx.restore(); if (graphState && graphState.showYellowLines) { ctx.strokeStyle = '#FFD700'; ctx.lineWidth = 3; ctx.setLineDash([5, 5]); const x10Percent = padding + (0.1 * graphWidth) + panOffsetX; ctx.beginPath(); ctx.moveTo(x10Percent, padding); ctx.lineTo(x10Percent, height - padding); ctx.stroke(); const x90Percent = padding + (0.9 * graphWidth) + panOffsetX; ctx.beginPath(); ctx.moveTo(x90Percent, padding); ctx.lineTo(x90Percent, height - padding); ctx.stroke(); ctx.setLineDash([]); } if (graphState && graphState.showGreenLines) { ctx.strokeStyle = '#00AA00'; ctx.lineWidth = 3; ctx.setLineDash([5, 5]); const y10PercentPrice = height - padding - (0.1 * graphHeight) + panOffsetY; ctx.beginPath(); ctx.moveTo(padding, y10PercentPrice); ctx.lineTo(width - padding, y10PercentPrice); ctx.stroke(); const y90PercentPrice = height - padding - (0.9 * graphHeight) + panOffsetY; ctx.beginPath(); ctx.moveTo(padding, y90PercentPrice); ctx.lineTo(width - padding, y90PercentPrice); ctx.stroke(); ctx.setLineDash([]); } Object.entries(listingsByGrade).forEach(([grade, listings]) => { if (!gradeVisibility[grade]) return; ctx.strokeStyle = gradeColors[grade] || '#000'; ctx.fillStyle = gradeColors[grade] || '#000'; ctx.lineWidth = 1.5; ctx.beginPath(); 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.moveTo(x, y); } else { ctx.lineTo(x, y); } } ctx.stroke(); 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; ctx.fillStyle = gradeColors[grade] || '#000'; ctx.fillRect(x - 2, y - 2, 4, 4); } 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; ctx.fillStyle = 'rgba(231, 76, 60, 0.3)'; ctx.beginPath(); ctx.arc(x, y, 8, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#e74c3c'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(x, y, 8, 0, Math.PI * 2); ctx.stroke(); } } 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; ctx.strokeStyle = '#e74c3c'; ctx.lineWidth = 1; ctx.setLineDash([5, 5]); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); ctx.setLineDash([]); 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); } } if (graphState && graphState.highlightedPrice !== null) { 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; } } const x = padding + (closestIndex / maxListingCount) * graphWidth * zoomLevel + panOffsetX; const y = height - padding - ((listings[closestIndex].price - minPrice) / priceRange) * graphHeight * zoomLevel + panOffsetY; ctx.fillStyle = 'rgba(46, 204, 113, 0.3)'; ctx.beginPath(); ctx.arc(x, y, 12, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#2ecc71'; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(x, y, 12, 0, Math.PI * 2); ctx.stroke(); ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(x, y, 8, 0, Math.PI * 2); ctx.fill(); 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(); } }); } graphState.redrawGraph = redrawGraph; redrawGraph(); 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 dist = Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2); if (dist < 6) { foundListing = listing; } } }); if (foundListing) { showTooltip(tooltip, foundListing, e.clientX, e.clientY); } else { tooltip.style.display = 'none'; } }); canvas.addEventListener('mouseleave', () => { tooltip.style.display = 'none'; }); 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(); } })();