|
|
@@ -77,6 +77,9 @@
|
|
|
let selectedSentimentFilter = $state(sentimentFilterOptions[0].id);
|
|
|
let volumeView = $state(volumeViewOptions[0].id);
|
|
|
let queueTab = $state('all');
|
|
|
+ let hoveredRadarPoint = $state(null);
|
|
|
+
|
|
|
+ const totalBase = 4011;
|
|
|
|
|
|
function openAspectDrilldown(aspect, tone) {
|
|
|
selectedAspectDrilldown = { aspect, tone };
|
|
|
@@ -105,7 +108,7 @@
|
|
|
selectedAspectDrilldown.tone === 'positive' ? 'Pontos Positivos' :
|
|
|
selectedAspectDrilldown.tone === 'neutral' ? 'Pontos Neutros' : 'Pontos Negativos'
|
|
|
}`
|
|
|
- : 'Distribuição de Aspectos'
|
|
|
+ : 'Tema da Conversa'
|
|
|
);
|
|
|
|
|
|
const selectedFilterContext = $derived({
|
|
|
@@ -152,7 +155,7 @@
|
|
|
format: (value) => value.toLocaleString('pt-BR')
|
|
|
},
|
|
|
{
|
|
|
- title: 'Sentimento Geral',
|
|
|
+ title: 'Emoção Geral',
|
|
|
icon: ThumbsUp,
|
|
|
color: 'text-amber-600 dark:text-amber-400',
|
|
|
bg: 'bg-amber-50 dark:bg-amber-400/10',
|
|
|
@@ -196,6 +199,28 @@
|
|
|
}))
|
|
|
);
|
|
|
|
|
|
+ // Channel filter for the Tema da Conversa chart — add new channels to this array
|
|
|
+ const channelOptions = [
|
|
|
+ { id: 'Todos', label: 'Todos', multiplier: 1 },
|
|
|
+ { id: 'WhatsApp', label: 'WhatsApp', multiplier: 0.76 },
|
|
|
+ { id: 'Instagram', label: 'Instagram', multiplier: 0.24 }
|
|
|
+ ];
|
|
|
+ let selectedAspectChannel = $state('Todos');
|
|
|
+
|
|
|
+ const channelMultiplier = $derived(
|
|
|
+ channelOptions.find((o) => o.id === selectedAspectChannel)?.multiplier ?? 1
|
|
|
+ );
|
|
|
+
|
|
|
+ // Tema da Conversa bars always show all channels combined
|
|
|
+ const filteredAspectsData = $derived(aspectsData);
|
|
|
+
|
|
|
+ const totalInteractions = $derived(
|
|
|
+ aspectsData.reduce((sum, a) => sum + a.positive + a.neutral + a.negative, 0)
|
|
|
+ );
|
|
|
+
|
|
|
+ // Separate total for the channel filter display in Total de Conversas section
|
|
|
+ const channelDisplayTotal = $derived(Math.round(totalInteractions * channelMultiplier));
|
|
|
+
|
|
|
const baseDailyVolume = (() => {
|
|
|
const grouped = new Map();
|
|
|
for (const record of mockVolumeData) {
|
|
|
@@ -229,7 +254,7 @@
|
|
|
const base = volumeView === 'day' ? baseDailyVolume : mockVolumeData;
|
|
|
return base.map((entry, idx) => ({
|
|
|
date: entry.date,
|
|
|
- whatsapp: Math.max(0, Math.round(entry.whatsapp * (combinedMultiplier + idx * 0.02)))
|
|
|
+ whatsapp: Math.max(0, Math.round(entry.whatsapp * (combinedMultiplier + idx * 0.02) * channelMultiplier))
|
|
|
}));
|
|
|
});
|
|
|
|
|
|
@@ -297,6 +322,7 @@
|
|
|
const r = (d.value / 100) * radarRadius;
|
|
|
return {
|
|
|
...d,
|
|
|
+ count: Math.round((d.value / 100) * totalBase),
|
|
|
x: radarCenter + r * Math.cos(angle),
|
|
|
y: radarCenter + r * Math.sin(angle),
|
|
|
labelX: radarCenter + (radarRadius + 18) * Math.cos(angle),
|
|
|
@@ -525,14 +551,19 @@
|
|
|
<div
|
|
|
class="flex h-[500px] flex-col rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition-colors duration-200 dark:border-slate-800 dark:bg-[#1e293b]"
|
|
|
>
|
|
|
- <div class="mb-6 flex items-center justify-between">
|
|
|
+ <div class="mb-4 flex items-center justify-between">
|
|
|
<div class="flex items-center gap-2">
|
|
|
<div
|
|
|
class="flex h-8 w-8 items-center justify-center rounded-lg border border-indigo-100 bg-indigo-50 text-indigo-600 dark:border-transparent dark:bg-indigo-500/10 dark:text-indigo-400"
|
|
|
>
|
|
|
<Activity size={18} />
|
|
|
</div>
|
|
|
- <h2 class="text-base font-bold text-slate-900 dark:text-white">Humor da Base</h2>
|
|
|
+ <div>
|
|
|
+ <h2 class="text-base font-bold text-slate-900 dark:text-white">Humor da Base</h2>
|
|
|
+ <p class="text-xs text-slate-500 dark:text-slate-400">
|
|
|
+ {totalBase.toLocaleString('pt-BR')} clientes na base
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<span
|
|
|
class="rounded bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600 dark:bg-slate-800 dark:text-slate-400"
|
|
|
@@ -540,6 +571,23 @@
|
|
|
>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- Tooltip shown on hover of radar points -->
|
|
|
+ <div class="mb-3 h-7">
|
|
|
+ {#if hoveredRadarPoint}
|
|
|
+ <div
|
|
|
+ class="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs dark:border-slate-700 dark:bg-slate-900"
|
|
|
+ >
|
|
|
+ <span class="font-semibold text-slate-900 dark:text-white">{hoveredRadarPoint.name}</span>
|
|
|
+ <span class="text-slate-400">—</span>
|
|
|
+ <span class="text-slate-600 dark:text-slate-300">{hoveredRadarPoint.value}%</span>
|
|
|
+ <span class="text-slate-400 dark:text-slate-500">·</span>
|
|
|
+ <span class="font-medium text-slate-700 dark:text-slate-300">
|
|
|
+ {hoveredRadarPoint.count.toLocaleString('pt-BR')} clientes
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="relative flex h-full w-full flex-1 items-center justify-center">
|
|
|
<!-- Pure SVG Data-driven Radar Chart -->
|
|
|
<svg viewBox="0 0 200 200" class="h-auto w-full max-w-[300px] overflow-visible">
|
|
|
@@ -607,8 +655,10 @@
|
|
|
r="3"
|
|
|
class="hover:r-[5] fill-white stroke-emerald-500 transition-all duration-300 dark:fill-slate-900 dark:stroke-emerald-400"
|
|
|
stroke-width="2"
|
|
|
+ onmouseenter={() => (hoveredRadarPoint = point)}
|
|
|
+ onmouseleave={() => (hoveredRadarPoint = null)}
|
|
|
>
|
|
|
- <title>{point.name}: {point.value}%</title>
|
|
|
+ <title>{point.name}: {point.value}% · {point.count.toLocaleString('pt-BR')} clientes</title>
|
|
|
</circle>
|
|
|
{/each}
|
|
|
</svg>
|
|
|
@@ -622,8 +672,8 @@
|
|
|
<div
|
|
|
class="flex h-[400px] flex-col rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition-colors duration-200 dark:border-slate-800 dark:bg-[#1e293b]"
|
|
|
>
|
|
|
- <div class="mb-6 flex items-center justify-between">
|
|
|
- <h2 class="text-base font-bold text-slate-900 dark:text-white">Volume por Canal</h2>
|
|
|
+ <div class="mb-3 flex items-center justify-between">
|
|
|
+ <h2 class="text-base font-bold text-slate-900 dark:text-white">Total de Conversas</h2>
|
|
|
<select
|
|
|
class="rounded-lg border border-slate-300 bg-slate-50 px-2 py-1 text-xs text-slate-900 focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
|
|
|
bind:value={volumeView}
|
|
|
@@ -634,6 +684,25 @@
|
|
|
</select>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- Channel filter + total -->
|
|
|
+ <div class="mb-3 flex items-center justify-between border-b border-slate-100 pb-3 dark:border-slate-800">
|
|
|
+ <div class="flex items-center gap-1.5 text-xs">
|
|
|
+ <span class="font-medium text-slate-500 dark:text-slate-400">Total:</span>
|
|
|
+ <span class="font-bold text-slate-900 dark:text-white">{channelDisplayTotal.toLocaleString('pt-BR')}</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex gap-1">
|
|
|
+ {#each channelOptions as ch}
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ onclick={() => (selectedAspectChannel = ch.id)}
|
|
|
+ class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors {selectedAspectChannel === ch.id
|
|
|
+ ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400'
|
|
|
+ : 'text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200'}"
|
|
|
+ >{ch.label}</button>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="h-full w-full flex-1">
|
|
|
<Chart
|
|
|
data={volumeData}
|
|
|
@@ -666,14 +735,24 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- Sentiment and Aspects distribution -->
|
|
|
+ <!-- Tema da Conversa / Aspects distribution -->
|
|
|
<div
|
|
|
class="flex h-[400px] flex-col rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition-colors duration-200 dark:border-slate-800 dark:bg-[#1e293b]"
|
|
|
>
|
|
|
- <div class="mb-6 flex items-center justify-between">
|
|
|
- <h2 class="text-base font-bold text-slate-900 dark:text-white">
|
|
|
- {drilldownTitle}
|
|
|
- </h2>
|
|
|
+ <!-- Header with optional Total de Interações counter -->
|
|
|
+ <div class="mb-3 flex items-center justify-between">
|
|
|
+ <div class="flex items-center gap-3">
|
|
|
+ <h2 class="text-base font-bold text-slate-900 dark:text-white">
|
|
|
+ {drilldownTitle}
|
|
|
+ </h2>
|
|
|
+ {#if !selectedAspectDrilldown}
|
|
|
+ <span
|
|
|
+ class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600 dark:bg-slate-800 dark:text-slate-400"
|
|
|
+ >
|
|
|
+ {totalInteractions.toLocaleString('pt-BR')} interações
|
|
|
+ </span>
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
{#if selectedAspectDrilldown}
|
|
|
<button
|
|
|
type="button"
|
|
|
@@ -688,36 +767,61 @@
|
|
|
<div class="custom-scrollbar relative h-full w-full flex-1 overflow-y-auto pr-2">
|
|
|
{#if !selectedAspectDrilldown}
|
|
|
<div class="space-y-4">
|
|
|
- {#each aspectsData as aspect}
|
|
|
+ {#each filteredAspectsData as aspect}
|
|
|
+ {@const total = aspect.positive + aspect.neutral + aspect.negative}
|
|
|
+ {@const posPct = total > 0 ? (aspect.positive / total) * 100 : 0}
|
|
|
+ {@const neuPct = total > 0 ? (aspect.neutral / total) * 100 : 0}
|
|
|
+ {@const negPct = total > 0 ? (aspect.negative / total) * 100 : 0}
|
|
|
<div>
|
|
|
<div class="mb-1 flex justify-between text-xs text-slate-600 dark:text-slate-300">
|
|
|
<span class="font-medium">{aspect.aspect}</span>
|
|
|
- <span>{aspect.positive + aspect.neutral + aspect.negative} interações</span>
|
|
|
+ <span>{total} interações</span>
|
|
|
</div>
|
|
|
<div
|
|
|
class="flex h-7 w-full overflow-hidden rounded bg-slate-100 shadow-inner dark:bg-slate-800"
|
|
|
>
|
|
|
<button
|
|
|
type="button"
|
|
|
- class="h-full bg-emerald-500 transition-opacity hover:opacity-90"
|
|
|
- style="width: {(aspect.positive / (aspect.positive + aspect.neutral + aspect.negative)) * 100}%"
|
|
|
+ class="relative h-full bg-emerald-500 transition-opacity hover:opacity-90"
|
|
|
+ style="width: {posPct}%"
|
|
|
onclick={() => openAspectDrilldown(aspect.aspect, 'positive')}
|
|
|
aria-label={`Ver pontos positivos de ${aspect.aspect}`}
|
|
|
- ></button>
|
|
|
+ >
|
|
|
+ {#if posPct >= 12}
|
|
|
+ <span
|
|
|
+ class="pointer-events-none absolute inset-0 flex items-center justify-center text-[10px] font-bold text-white"
|
|
|
+ >{Math.round(posPct)}%</span
|
|
|
+ >
|
|
|
+ {/if}
|
|
|
+ </button>
|
|
|
<button
|
|
|
type="button"
|
|
|
- class="h-full bg-slate-400 transition-opacity hover:opacity-90"
|
|
|
- style="width: {(aspect.neutral / (aspect.positive + aspect.neutral + aspect.negative)) * 100}%"
|
|
|
+ class="relative h-full bg-slate-400 transition-opacity hover:opacity-90"
|
|
|
+ style="width: {neuPct}%"
|
|
|
onclick={() => openAspectDrilldown(aspect.aspect, 'neutral')}
|
|
|
aria-label={`Ver pontos neutros de ${aspect.aspect}`}
|
|
|
- ></button>
|
|
|
+ >
|
|
|
+ {#if neuPct >= 12}
|
|
|
+ <span
|
|
|
+ class="pointer-events-none absolute inset-0 flex items-center justify-center text-[10px] font-bold text-white"
|
|
|
+ >{Math.round(neuPct)}%</span
|
|
|
+ >
|
|
|
+ {/if}
|
|
|
+ </button>
|
|
|
<button
|
|
|
type="button"
|
|
|
- class="h-full bg-red-500 transition-opacity hover:opacity-90"
|
|
|
- style="width: {(aspect.negative / (aspect.positive + aspect.neutral + aspect.negative)) * 100}%"
|
|
|
+ class="relative h-full bg-red-500 transition-opacity hover:opacity-90"
|
|
|
+ style="width: {negPct}%"
|
|
|
onclick={() => openAspectDrilldown(aspect.aspect, 'negative')}
|
|
|
aria-label={`Ver pontos negativos de ${aspect.aspect}`}
|
|
|
- ></button>
|
|
|
+ >
|
|
|
+ {#if negPct >= 12}
|
|
|
+ <span
|
|
|
+ class="pointer-events-none absolute inset-0 flex items-center justify-center text-[10px] font-bold text-white"
|
|
|
+ >{Math.round(negPct)}%</span
|
|
|
+ >
|
|
|
+ {/if}
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
{/each}
|
|
|
@@ -754,6 +858,7 @@
|
|
|
</div>
|
|
|
{/if}
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
gdias