Competitor Tweet Tracker

\n \n

Daily Tweet Mentions

\n \n

Total Tweet Mentions

\n\n \n\n",[],[236,228],"views","8fb5b488-4087-11f0-97d4-76b3cceeab13","charts.js","8fb5b53c-4087-11f0-97d4-76b3cceeab13",19,["D",1748961142424],"// Function to generate random colors for chart\nfunction generateColors(count) {\n const colors = [\n '#4299E1', '#48BB78', '#F6AD55', '#F56565', '#9F7AEA',\n '#ED64A6', '#38B2AC', '#ECC94B', '#667EEA', '#FC8181'\n ];\n \n // If we need more colors than in our predefined list, generate random ones\n if (count > colors.length) {\n for (let i = colors.length; i < count; i++) {\n const r = Math.floor(Math.random() * 255);\n const g = Math.floor(Math.random() * 255);\n const b = Math.floor(Math.random() * 255);\n colors.push(`rgb(${r}, ${g}, ${b})`);\n }\n }\n \n return colors.slice(0, count);\n}\n\n// Fetch data and render charts\nasync function renderCharts() {\n try {\n const response = await fetch('/api/data');\n const data = await response.json();\n console.log({ data });\n \n renderDailyChart(data.dailyCounts);\n renderTotalChart(data.totalCounts);\n } catch (error) {\n console.error('Error fetching data:', error);\n document.body.innerHTML += '

Error loading data. Please try again later.

';\n }\n}\n\n// Render daily tweet chart\nfunction renderDailyChart(dailyData) {\n if (!dailyData || dailyData.length === 0) {\n document.getElementById('dailyChart').parentNode.innerHTML = '

No data available yet.

';\n return;\n }\n \n // Process data for chart\n const days = [...new Set(dailyData.map(item => item.day))].sort();\n const competitors = [...new Set(dailyData.map(item => item.competitor))];\n const colors = generateColors(competitors.length);\n \n // Create datasets\n const datasets = competitors.map((competitor, index) => {\n const competitorData = days.map(day => {\n const match = dailyData.find(item => item.day === day && item.competitor === competitor);\n return match ? match.count : 0;\n });\n \n return {\n label: competitor,\n data: competitorData,\n backgroundColor: colors[index],\n borderColor: colors[index],\n borderWidth: 2,\n tension: 0.1,\n fill: false\n };\n });\n \n // Create chart\n new Chart(document.getElementById('dailyChart'), {\n type: 'line',\n data: {\n labels: days,\n datasets: datasets\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: 'Tweet Count'\n }\n },\n x: {\n title: {\n display: true,\n text: 'Date'\n }\n }\n },\n plugins: {\n legend: {\n position: 'top',\n },\n tooltip: {\n mode: 'index',\n intersect: false\n }\n }\n }\n });\n}\n\n// Render total tweet chart\nfunction renderTotalChart(totalData) {\n if (!totalData || totalData.length === 0) {\n document.getElementById('totalChart').parentNode.innerHTML = '

No data available yet.

';\n return;\n }\n \n // Sort by count descending\n totalData.sort((a, b) => b.count - a.count);\n \n const competitors = totalData.map(item => item.competitor);\n const counts = totalData.map(item => item.count);\n const colors = generateColors(competitors.length);\n \n // Create chart\n new Chart(document.getElementById('totalChart'), {\n type: 'bar',\n data: {\n labels: competitors,\n datasets: [{\n label: 'Total Tweets',\n data: counts,\n backgroundColor: colors,\n borderColor: colors,\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: 'Tweet Count'\n }\n },\n x: {\n title: {\n display: true,\n text: 'Competitor'\n }\n }\n },\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });\n}\n\n// Initialize charts when page loads\ndocument.addEventListener('DOMContentLoaded', renderCharts);",[],[236,238],"d627d3f6-4087-11f0-8470-76b3cceeab13","d627d568-4087-11f0-8470-76b3cceeab13",["D",1748961260610],"# Views Directory\n\nThis directory contains the frontend HTML and JavaScript files for the Competitor Tweet Tracker.\n\n## Files\n\n- **`index.html`**: Main HTML template with chart containers and styling\n- **`charts.js`**: JavaScript for fetching data and rendering Chart.js visualizations\n\n## Features\n\n- Responsive design using TailwindCSS\n- Interactive charts using Chart.js\n- Automatic color generation for multiple competitors\n- Error handling for data loading failures\n- Real-time data fetching from the API\n\n## Chart Types\n\n1. **Daily Chart**: Line chart showing tweet mentions over time for each competitor\n2. **Total Chart**: Bar chart showing total tweet counts per competitor\n\nThe charts automatically handle empty data states and dynamically adjust to the number of competitors being tracked.",[],[236,219],"81be5d76-4087-11f0-a981-76b3cceeab13",["D",1748961118991],[183,184,185],[236],["D",1748961151227],[],[18,64],["D",1748961151227],[181],[18],["D",1747685840126],{"_11":12,"_126":70},{"_11":12,"_122":-5,"_69":70,"_31":68,"_123":124,"_125":30},{"_39":110,"_13":16,"_33":36,"_111":74,"_112":113,"_114":115,"_116":79,"_117":118,"_119":42,"_120":14,"_121":12},"ctx",{"_52":-5,"_147":298,"_299":300,"_301":302,"_303":30,"_304":30,"_305":30,"_306":24,"_307":-5,"_308":-7,"_309":-7,"_310":26,"_311":30,"_312":30,"_313":-5,"_314":30,"_315":30,"_316":30,"_317":-5},"ENV",{"_269":270,"_271":272,"_273":16,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · utils