Competitor Tweet Tracker

\n \n

Daily Tweet Mentions

\n \n

Total Tweet Mentions

\n\n \n\n",[],[129,139],"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);",[],[129,146],"d627d3f6-4087-11f0-8470-76b3cceeab13","d627d568-4087-11f0-8470-76b3cceeab13",26,["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.",[],[129,121],["D",1748961151227],[163],[19],{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_38":164,"_17":34,"_74":75,"_76":77,"_78":52,"_79":-5,"_99":165,"_18":166},["D",1748961151227],[],[19,62],"444e22a4-34ee-11f0-8f96-9e149126039e",["D",1747685840126],"legacyEnvVars","httpPrivacy","description","it costs like $5k month for basic social listening tools lol","imageUrl","userId","28a12253-d65d-490e-97f1-5c00c30f3c90","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_210":206},"org",{"_11":12,"_204":-5,"_205":206,"_174":175,"_207":208,"_209":52},"branch",{"_17":155,"_13":16,"_36":68,"_42":167,"_45":37,"_47":44,"_201":54,"_202":43,"_203":57,"_58":14,"_55":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://avatars.githubusercontent.com/u/1903?v=4","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":167,"_13":14,"_38":277,"_50":-5,"_169":52,"_53":54,"_170":54,"_171":172,"_173":-5,"_174":175,"_176":112,"_177":72,"_178":72,"_179":-5,"_180":181,"_56":57,"_182":-5,"_183":-5,"_184":-5,"_185":-5,"_186":187,"_188":187,"_189":190,"_191":190,"_192":190,"_193":187,"_194":187,"_195":278,"_197":279,"_199":280,"_51":52},[247,249,253,254,255,256],"files",[247,248,249,250,251,252,253,254,255,256],"counts",{"_238":34,"_239":181,"_240":34,"_35":241,"_242":243},[236],{"_36":81,"_13":19,"_63":66,"_65":-5,"_67":68,"_69":70,"_71":72,"_38":82,"_17":34,"_74":83,"_76":-5,"_78":52,"_79":-5,"_18":235},"upstreamProject",{"_36":43,"_13":59,"_171":-5,"_173":-5,"_53":54,"_195":234},"upstreamBranch",{"_36":37,"_38":232,"_40":233,"_13":16,"_42":43,"_17":44,"_45":46,"_47":34,"_48":49,"_50":-5,"_51":52,"_53":54,"_55":12,"_56":57,"_58":59},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746138615693],["D",1720551623846],{"_11":12,"_210":206},[19],{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_38":73,"_17":34,"_74":75,"_76":77,"_78":52,"_79":-5,"_18":237},[19,62],"pulls","branches","forks",{"_244":181,"_246":34},"connections",{"_244":34,"_245":34},"count","unfilledCount","emptyCount",{"_36":81,"_13":19,"_63":66,"_65":-5,"_67":68,"_69":70,"_71":72,"_38":160,"_17":34,"_74":83,"_76":-5,"_78":52,"_79":-5,"_99":275,"_18":276},{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_38":164,"_17":34,"_74":75,"_76":77,"_78":52,"_79":-5,"_99":273,"_18":274},{"_36":128,"_13":129,"_63":130,"_65":-5,"_67":68,"_69":131,"_71":72,"_38":132,"_17":34,"_74":83,"_76":-5,"_78":52,"_79":-5,"_99":271,"_18":272},{"_36":153,"_13":121,"_63":154,"_65":130,"_67":68,"_69":155,"_71":72,"_38":156,"_17":34,"_74":24,"_76":157,"_78":52,"_79":-5,"_99":269,"_18":270},{"_36":145,"_13":146,"_63":147,"_65":130,"_67":68,"_69":148,"_71":72,"_38":149,"_17":34,"_74":75,"_76":150,"_78":52,"_79":-5,"_99":267,"_18":268},{"_36":138,"_13":139,"_63":140,"_65":130,"_67":68,"_69":131,"_71":72,"_38":141,"_17":34,"_74":24,"_76":142,"_78":52,"_79":-5,"_99":265,"_18":266},{"_36":120,"_13":121,"_63":122,"_65":-5,"_67":68,"_69":32,"_71":72,"_38":123,"_17":124,"_74":24,"_76":125,"_78":52,"_79":-5,"_99":263,"_18":264},{"_36":110,"_13":111,"_63":112,"_65":-5,"_67":68,"_69":113,"_71":72,"_38":114,"_17":115,"_74":116,"_76":117,"_78":52,"_79":-5,"_99":261,"_18":262},{"_36":102,"_13":103,"_63":104,"_65":-5,"_67":68,"_69":105,"_71":72,"_38":106,"_17":34,"_74":75,"_76":107,"_78":52,"_79":-5,"_99":259,"_18":260},{"_36":91,"_13":92,"_63":93,"_65":-5,"_67":68,"_69":94,"_71":72,"_38":95,"_17":96,"_74":97,"_76":98,"_78":52,"_79":-5,"_99":257,"_18":258},[],[92],[],[103],[],[111],[],[121],[],[129,139],[],[129,146],[],[129,121],[250,251,252],[129],[],[19,62],[248],[19],["D",1747685840126],{"_11":12,"_210":206},{"_11":12,"_204":-5,"_205":206,"_174":175,"_207":208,"_209":52},{"_17":155,"_13":16,"_36":68,"_42":167,"_45":37,"_47":44,"_201":54,"_202":43,"_203":57,"_58":14,"_55":12},"ctx",{"_195":-5,"_229":314,"_315":316,"_317":318,"_319":52,"_320":52,"_321":52,"_322":72,"_323":-5,"_324":-7,"_325":-7,"_326":34,"_327":52,"_328":52,"_329":-5,"_330":52,"_331":52,"_332":52,"_333":-5},"ENV",{"_285":286,"_287":288,"_289":16,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]