StatisticsCardLine

src/components/statistics-cards/StatisticsCardLine.vue

Display Medium 4 usos

Card de estatística com ícone Feather, valor numérico, título e gráfico ApexCharts embutido (linha ou área). Layout vertical: topo com ícone + número + título, base com gráfico sparkline de 100px. Suporta modo sem gráfico (hideChart), ícone à direita (iconRight) e gradiente horizontal customizável. Cor do gráfico reage ao themePrimaryColor do Vuex store.

Sem Gráfico

Card de estatística simples sem gráfico — ícone acima do valor e título. Texto centralizado. Uso dominante no admin Pedbot (Analytics.vue).

1.234

Total de Mensagens Humanizadas

<statistics-card-line
  v-show="!loading"
  icon="MessageSquareIcon"
  :statistic="+stats.main_messages_received"
  statisticTitle="Total de Mensagens Humanizadas"
  type="area"
  hideChart
/>

Linha com Ícone à Direita

Gráfico de linha com ícone à direita e texto à esquerda. Layout horizontal flip via flex-row-reverse.

78.9k

Site Traffic

<statistics-card-line
  icon="MonitorIcon"
  icon-right
  statistic="78.9k"
  statisticTitle="Site Traffic"
  :chartData="siteTraffic.series"
/>

Gráfico de Área

Gráfico de área (gradiente vertical monochrome) com ícone acima. Cor primary por padrão.

Subscribers Gained

<statistics-card-line
  v-if="subscribersGained.analyticsData"
  icon="UsersIcon"
  :statistic="subscribersGained.analyticsData.subscribers | k_formatter"
  statisticTitle="Subscribers Gained"
  :chartData="subscribersGained.series"
  type="area"
/>

Linha com Ícone no Topo

Gráfico de linha (gradiente horizontal) com ícone acima do valor. Layout padrão do componente.

1.234

Atendimentos

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<statistics-card-line
  icon="TrendingUpIcon"
  :statistic="1234"
  statisticTitle="Atendimentos"
  :chartData="[{ name: 'Atendimentos', data: [28, 40, 36, 52, 38, 60, 55] }]"
  type="line"
/>

Variantes de Cor

Mesma estrutura com color diferente. O ícone e o gráfico assumem a cor configurada.

4.5k

Revenue Generated

12.3k

Orders Received

845

Quarterly Sales

<!-- Success -->
<statistics-card-line
  icon="DollarSignIcon"
  :statistic="revenueGenerated.analyticsData.revenue | k_formatter"
  statisticTitle="Revenue Generated"
  :chartData="revenueGenerated.series"
  color="success"
  type="area"
/>

<!-- Warning -->
<statistics-card-line
  icon="ShoppingBagIcon"
  :statistic="ordersRecevied.analyticsData.orders | k_formatter"
  statisticTitle="Orders Received"
  :chartData="ordersRecevied.series"
  color="warning"
  type="area"
/>

<!-- Danger -->
<statistics-card-line
  icon="ShoppingCartIcon"
  :statistic="quarterlySales.analyticsData.sales"
  statisticTitle="Quarterly Sales"
  :chartData="quarterlySales.series"
  color="danger"
  type="area"
/>

API

<statistics-card-line
  icon="MessageSquareIcon"
  :statistic="1234"
  statisticTitle="Atendimentos Hoje"
  :chartData="[{ name: 'Atendimentos', data: [28, 40, 36, 52, 38, 60, 55] }]"
  color="primary"
  type="area"
  :hideChart="false"
  :iconRight="false"
/>

Props

Nome	Tipo	Default	Obrig.	Descrição
`icon`	String	—	Sim	Nome do ícone Feather (ex: `'ShoppingBagIcon'`). Exibido em círculo colorido com fundo semi-transparente.
`statistic`	Number \| String	—	Sim	Valor principal em `h2` bold. Ex: `'1.234'`, `'87%'`.
`statisticTitle`	String	—	Não	Subtítulo/label abaixo do valor.
`chartData`	Array	—	Não	Dados do ApexCharts. Formato: `[{ name: 'series', data: [1,2,3,...] }]`.
`color`	String	`'primary'`	Não	Token do design system (`primary`, `success`, `warning`, `danger`) ou hex. Usado no ícone e na linha do gráfico.
`colorTo`	String	auto	Não	Cor de destino do gradiente horizontal. Se não definido, mapeado automaticamente: primary→#A9A2F6, success→#55DD92, warning→#ffc085, danger→#F97794.
`type`	String	`'line'`	Não	`'line'` — gradiente horizontal, stroke 5, drop shadow. `'area'` — gradiente vertical monochrome.
`iconRight`	Boolean	`false`	Não	Quando `true`: layout horizontal com ícone à direita (`flex-row-reverse`).
`hideChart`	Boolean	`false`	Não	Oculta o gráfico. Texto fica centralizado quando `!iconRight`. Uso dominante no Pedbot.
`isMediaUser`	Boolean	—	Não	Lógica de negócio específica de Analytics: exibe "Média de atendimentos por:" antes do `statisticTitle`.

Dependências

vx-card — slot no-body (remove padding interno)
feather-icon — ícone no círculo
vue-apexcharts — gráfico sparkline (100px height)
src/components/statistics-cards/chartConfigs.js — areaChartOptions, lineChartOptions
src/assets/utils/color.js — converte token → hex

Onde é usado

src/views/analytics/Analytics.vue
src/views/DashboardECommerce.vue
src/views/ui-elements/card/CardStatistics.vue
src/views/ui-elements/card/CardAnalytics.vue

Reatividade ao tema: O componente observa themePrimaryColor do Vuex store. Quando o tema muda, atualiza as opções do ApexCharts via apexChart.updateOptions() — sem re-render completo.