copacol - Outubro rosa youtube
Status: Ativa
📅
Período:
até
Período: Carregando...
🎬 Visão Geral
🧭 Por Canal
📊 Análise & Insights
📋 Planejamento

MÉTRICAS DE QUARTIS DE VÍDEO

Resumo da Campanha

Dashboard de performance para a campanha Outubro rosa youtube do cliente copacol
CanalBudget Contratado (R$)Budget Utilizado (R$)Pacing (%) ImpressõesCliquesCTRVC (100%)VTR (100%) CPV (R$)CPM (R$)

Carregando Dashboard

Extraindo dados atualizados...

0%
break; case '7-dias': startDate = new Date(today); startDate.setDate(today.getDate() - 7); break; case '30-dias': startDate = new Date(today); startDate.setDate(today.getDate() - 30); break; case 'todos': startDate = null; break; } this.activeFilter = filterType; if (startDate) { this.startDate = this.formatDateForInput(startDate); this.endDate = this.formatDateForInput(today); // Atualizar inputs const startDateInput = document.getElementById('filter-start-date'); const endDateInput = document.getElementById('filter-end-date'); if (startDateInput) startDateInput.value = this.startDate; if (endDateInput) endDateInput.value = this.endDate; } else { // Para "todos", limpar datas this.startDate = null; this.endDate = null; const startDateInput = document.getElementById('filter-start-date'); const endDateInput = document.getElementById('filter-end-date'); if (startDateInput) startDateInput.value = ''; if (endDateInput) endDateInput.value = ''; } this.updatePeriodDisplay(); this.triggerDateChange(); } updatePeriodDisplay() { const displayElement = document.getElementById('period-display'); if (!displayElement) return; if (this.startDate && this.endDate) { const startFormatted = this.formatDateForDisplay(this.startDate); const endFormatted = this.formatDateForDisplay(this.endDate); displayElement.textContent = `Período: ${startFormatted} até ${endFormatted}`; } else { displayElement.textContent = 'Período: Todos os dados'; } } formatDateForInput(date) { if (typeof date === 'string') return date; return date.toISOString().split('T')[0]; } formatDateForDisplay(dateString) { if (!dateString) return ''; const date = new Date(dateString); return date.toLocaleDateString('pt-BR'); } triggerDateChange() { if (this.callbacks.onDateChange) { this.callbacks.onDateChange({ startDate: this.startDate, endDate: this.endDate, activeFilter: this.activeFilter }); } } // Método para definir callback de mudança de data onDateChange(callback) { this.callbacks.onDateChange = callback; } // Método para obter filtros atuais getCurrentFilters() { return { startDate: this.startDate, endDate: this.endDate, activeFilter: this.activeFilter }; } // Método para aplicar filtros aos dados applyDateFilter(data, dateField = 'date') { if (!this.startDate && !this.endDate) { return data; } return data.filter(item => { const itemDate = new Date(item[dateField]); const startDate = this.startDate ? new Date(this.startDate) : null; const endDate = this.endDate ? new Date(this.endDate) : null; if (startDate && itemDate < startDate) return false; if (endDate && itemDate > endDate) return false; return true; }); } // Método para filtrar dados diários filterDailyData(dailyData) { return this.applyDateFilter(dailyData, 'date'); } // Método para recarregar dashboard com filtros aplicados reloadDashboard() { // Esta função será chamada quando os filtros mudarem // Pode ser sobrescrita para integrar com o sistema de dados específico console.log('Filtros aplicados:', this.getCurrentFilters()); } } // Inicializar dashboard quando a página carregar document.addEventListener('DOMContentLoaded', () => { // Extrair campaign key da URL ou usar padrão let campaignKey = 'copacol_outubro_rosa_youtube'; // Criar e carregar dashboard const dashboard = new DashboardLoader(campaignKey); window.dashboard = dashboard; // Tornar dashboard acessível globalmente dashboard.loadDashboard(); // Inicializar barra de filtro window.filterBar = new FilterBar(); // Configurar callback para aplicar filtros quando mudarem window.filterBar.onDateChange((filters) => { console.log('🔄 Filtros alterados:', filters); console.log('🔍 Dashboard disponível:', !!window.dashboard); console.log('🔍 Método applyDateFilter existe:', typeof window.dashboard?.applyDateFilter); // Aplicar filtros no dashboard if (window.dashboard && typeof window.dashboard.applyDateFilter === 'function') { console.log('✅ Chamando window.dashboard.applyDateFilter'); window.dashboard.applyDateFilter(filters.startDate, filters.endDate); } else { console.error('❌ Dashboard não disponível ou método applyDateFilter não existe'); } }); });