ChatTicketsCharts

src/components/analytics-charts/ — 3 componentes: ChatTicketsBarChart, ChatTicketsChartByDepartment, ChatTicketsChartByInstance

Data Visualization Low 1 uso (Analytics.vue)

Grupo de 3 componentes de gráficos para a tela de Analytics de atendimentos WhatsApp. Todos usam vue-apexcharts. ChatTicketsBarChart: barras verticais por hora (00h–23h), 350px. ChatTicketsChartByDepartment: pizza por departamento, 250px, com empty state "Sem Dados". ChatTicketsChartByInstance: pizza por conexão WhatsApp, 250px. Padrão universal: v-show + ref + :started-at + :finished-at. O pai chama updateChatTicketCount() via $refs para atualizar dados.

Layout no Analytics.vue

Os 3 charts ficam em grade: pizzas 50%+50% (lado a lado) + barras full-width abaixo. O card wrapper (vx-card) é interno nos 2 pizzas — o bar chart é usado sem card.

Atend. / Conexão

WhatsApp Principal (50%)

WhatsApp Suporte (25%)

WhatsApp Vendas (15%)

WhatsApp Bot (10%)

Atend. / Departamento

Suporte Técnico (40%)

Vendas (30%)

Financeiro (20%)

RH (10%)

Atendimentos por Hora do Dia

00h

01h

02h

03h

04h

05h

06h

07h

08h

09h

10h

11h

12h

13h

14h

15h

16h

17h

18h

19h

20h

21h

22h

23h

<!-- Pizza por instância + pizza por departamento lado a lado -->
<div class="vx-col w-full md:w-1/2">
  <chat-tickets-chart-by-instance
    v-show="!chatTicketsChartByInstanceLoading"
    ref="chatTicketsChartByInstance"
    :started-at="initial_date"
    :finished-at="finish_date"
  />
</div>
<div class="vx-col w-full md:w-1/2">
  <chat-tickets-chart-by-department
    v-show="!chatTicketsChartByDepartmentLoading"
    ref="chatTicketsChartByDepartment"
    :started-at="initial_date"
    :finished-at="finish_date"
  />
</div>

<!-- Barras por hora — largura total, sem wrapper vx-card -->
<div class="vx-col w-full">
  <chat-tickets-bar-chart
    v-show="!chatTicketsChartBarLoading"
    ref="chatTicketBar"
    :started-at="initial_date"
    :finished-at="finish_date"
  />
</div>

Empty State (ByDepartment)

Apenas o ChatTicketsChartByDepartment tem empty state explícito. Quando series.length === 0, exibe texto "Sem Dados" centralizado via v-show. O ChatTicketsChartByInstance renderiza o chart vazio sem fallback.

Atend. / Departamento

Sem Dados

Atend. / Conexão

(chart ApexCharts vazio — sem fallback)

Padrão de Atualização via $refs

O pai controla quando os dados são buscados chamando updateChatTicketCount() diretamente via $refs. O método retorna uma Promise — o pai pode encadear .then() para parar o loading.

Analytics.vue mounted() ou filtro de datas alterado

↓

setShowLoadingOverlay(false) — ativa overlay global

↓ (em paralelo)

$refs.chatTicketsChartByInstance.updateChatTicketCount()

$refs.chatTicketsChartByDepartment.updateChatTicketCount()

$refs.chatTicketBar.updateChatTicketCount() ← ref diferente!

↓ cada Promise resolve

setShowLoadingOverlay(true) — desativa overlay

⚠ Nome de ref inconsistente: os 2 pizzas usam chatTicketsChartByInstance e chatTicketsChartByDepartment, mas o bar chart usa chatTicketBar (não chatTicketsBarChart).

API

Props (todos os 3 componentes)

Nome	Tipo	Obrig.	Descrição
`startedAt` / `:started-at`	String \| Date	Sim	Data/hora de início do filtro. Passado à API do WhatsApp.
`finishedAt` / `:finished-at`	String \| Date	Sim	Data/hora de fim do filtro.

Método público

Método	Retorno	Descrição
`updateChatTicketCount()`	Promise	Busca dados na API com `startedAt`/`finishedAt` atuais. Chame via `$refs` — não há evento para isto.

Comparação dos 3 componentes

Componente	Tipo	Altura	vx-card	Empty state	API endpoint
`chat-tickets-bar-chart`	Barras verticais	350px	Não	Não	`chatTicketsCount`
`chat-tickets-chart-by-department`	Pizza	250px	Sim	Sim — "Sem Dados"	`chatTicketsCountByDepartment`
`chat-tickets-chart-by-instance`	Pizza	250px	Sim	Não	`chatTicketsCountByInstance`

Paleta de cores

Cores hardcoded nos componentes — não seguem os tokens do design system Pedbot (usam #7367F0 roxo Vuexy, não #0491FF azul Pedbot).

#7367F0

#28C76F

#EA5455

#FF9F43

#1E1E1E

Dependências

Tipo	Dependência
Externo	`vue-apexcharts` — wrapper Vue do ApexCharts.js
Custom	`vx-card` — wrapper dos gráficos de pizza
HTTP	`whatsapp.chatTicketsCount/ByDepartment/ByInstance`
Store	`setShowLoadingOverlay` — overlay global de loading

Onde é usado

Arquivo	Nota
`src/views/analytics/Analytics.vue`	Único uso. Todos os 3 componentes usados juntos na mesma view.