19
19
20
20
< div class ="dashboard-grid " style ="width: 100%; max-width: 100%; margin: 0 auto; padding: 20px; ">
21
21
< div class ="dashboard-card ">
22
- < h3 > Mensagens por Dia </ h3 >
22
+ < h3 > Messages per day </ h3 >
23
23
< div id ="chat-messages-graph " style ="height:300px; width: 100%; "> </ div >
24
24
</ div >
25
25
26
26
< div class ="dashboard-card ">
27
- < h3 > Usuários Únicos por Dia </ h3 >
27
+ < h3 > Unique users per day </ h3 >
28
28
< div id ="unique-users-graph " style ="height:300px; width: 100%; "> </ div >
29
29
</ div >
30
30
31
31
< div class ="dashboard-card ">
32
- < h3 > Top 5 Usuários </ h3 >
32
+ < h3 > Top 5 Users </ h3 >
33
33
< div id ="top-users-graph " style ="height:300px; width: 100%; "> </ div >
34
34
</ div >
35
35
36
36
< div class ="dashboard-card ">
37
37
< h3 > Feedback Like/Dislike</ h3 >
38
38
< div id ="feedback-pie " style ="height:300px; width: 100%; "> </ div >
39
39
</ div >
40
+
41
+ < div class ="dashboard-card ">
42
+ < h3 > Sentiments by Day</ h3 >
43
+ < div id ="sentiment-graph " style ="height:350px; width: 100%; "> </ div >
44
+ </ div >
45
+ < div class ="dashboard-card ">
46
+ < h3 > Sentiments Rank</ h3 >
47
+ < div id ="sentiment-bar-graph " style ="height:300px; width: 100%; "> </ div >
48
+ </ div >
40
49
</ div >
41
50
</ div >
42
51
</ main >
@@ -46,14 +55,13 @@ <h3>Feedback Like/Dislike</h3>
46
55
const plotConfig = {
47
56
responsive : true ,
48
57
displaylogo : false ,
49
- displayModeBar : true // ou 'hover' se quiser só ao passar o mouse
58
+ displayModeBar : true
50
59
} ;
51
60
52
- // Paleta personalizada mais próxima do CSS da aplicação
53
61
const customLayout = {
54
- paper_bgcolor : "#faf8ff" , // fundo lilás super claro
55
- plot_bgcolor : "#ffffff" , // fundo interno branco
56
- font : { color : "#4a2d7c" } , // roxo institucional
62
+ paper_bgcolor : "#faf8ff" ,
63
+ plot_bgcolor : "#ffffff" ,
64
+ font : { color : "#4a2d7c" } ,
57
65
xaxis : {
58
66
gridcolor : '#ddd' ,
59
67
zerolinecolor : '#ccc' ,
@@ -70,45 +78,41 @@ <h3>Feedback Like/Dislike</h3>
70
78
title : { font : { color : "#4a2d7c" } }
71
79
} ;
72
80
73
- // Dados vindos do Django
74
81
const chatDates = { { chat_dates_json| safe } } ;
75
82
const minDate = chatDates . length > 0 ? chatDates [ 0 ] : null ;
76
83
77
- // Mensagens por dia
84
+ // Messages per day
78
85
Plotly . newPlot ( 'chat-messages-graph' , [ {
79
86
x : chatDates ,
80
87
y : { { chat_counts_json| safe } } ,
81
88
type : 'scatter' ,
82
89
mode : 'lines+markers' ,
83
- marker : { color : '#8c30f5' } // roxo vibrante
90
+ marker : { color : '#8c30f5' }
84
91
} ] , Object . assign ( { } , customLayout , {
85
- title : 'Mensagens por Dia' ,
86
- xaxis : Object . assign ( { } , customLayout . xaxis , { title : 'Data' , range : [ minDate , null ] } ) ,
87
- yaxis : Object . assign ( { } , customLayout . yaxis , { title : 'Mensagens' } )
92
+ xaxis : Object . assign ( { } , customLayout . xaxis , { range : [ minDate , null ] } ) ,
93
+ yaxis : Object . assign ( { } , customLayout . yaxis , { title : 'Messages' } )
88
94
} ) , plotConfig ) ;
89
95
90
- // Usuários únicos por dia
96
+ //Unique users per day
91
97
Plotly . newPlot ( 'unique-users-graph' , [ {
92
98
x : { { unique_user_dates_json| safe } } ,
93
99
y : { { unique_user_counts_json| safe } } ,
94
100
type : 'bar' ,
95
101
marker : { color : '#8c30f5' }
96
102
} ] , Object . assign ( { } , customLayout , {
97
- title : 'Usuários Únicos por Dia' ,
98
- xaxis : Object . assign ( { } , customLayout . xaxis , { title : 'Data' } ) ,
99
- yaxis : Object . assign ( { } , customLayout . yaxis , { title : 'Usuários' } )
103
+ xaxis : Object . assign ( { } , customLayout . xaxis ) ,
104
+ yaxis : Object . assign ( { } , customLayout . yaxis , { title : 'Users' } )
100
105
} ) , plotConfig ) ;
101
106
102
- // Top usuários
107
+ // Top 5 Users
103
108
Plotly . newPlot ( 'top-users-graph' , [ {
104
109
x : { { top_usernames_json| safe } } ,
105
110
y : { { top_user_counts_json| safe } } ,
106
111
type : 'bar' ,
107
- marker : { color : '#3bace2' } // azul institucional
112
+ marker : { color : '#3bace2' }
108
113
} ] , Object . assign ( { } , customLayout , {
109
- title : 'Top 5 Usuários' ,
110
- xaxis : Object . assign ( { } , customLayout . xaxis , { title : 'Usuário' } ) ,
111
- yaxis : Object . assign ( { } , customLayout . yaxis , { title : 'Mensagens' } )
114
+ xaxis : Object . assign ( { } , customLayout . xaxis ) ,
115
+ yaxis : Object . assign ( { } , customLayout . yaxis , { title : 'Messages' } )
112
116
} ) , plotConfig ) ;
113
117
114
118
// Feedback Pie
@@ -118,9 +122,37 @@ <h3>Feedback Like/Dislike</h3>
118
122
type : 'pie' ,
119
123
marker : { colors : [ '#81d4af' , '#f78da7' ] } ,
120
124
} ] , Object . assign ( { } , customLayout , {
121
- title : 'Likes vs Dislikes' ,
122
125
legend : { orientation : "h" , x : 0.5 , xanchor : 'center' , font : { color : '#4a2d7c' } }
123
126
} ) , plotConfig ) ;
127
+
128
+ // Sentiments by Day
129
+ fetch ( "{% url 'sentiment_over_time' %}" )
130
+ . then ( response => response . json ( ) )
131
+ . then ( data => {
132
+ const layout = Object . assign ( { } , customLayout , {
133
+ xaxis : Object . assign ( { } , customLayout . xaxis ) ,
134
+ yaxis : Object . assign ( { } , customLayout . yaxis , { title : 'Messages' , rangemode : 'tozero' } ) ,
135
+ legend : { orientation : "h" , x : 0.5 , xanchor : 'center' , font : { color : '#4a2d7c' } }
136
+ } ) ;
137
+ Plotly . newPlot ( 'sentiment-graph' , data . datasets , layout , plotConfig ) ;
138
+ } ) ;
139
+
140
+ // Sentiments Rank
141
+ fetch ( "{% url 'sentiment_ranking' %}" )
142
+ . then ( response => response . json ( ) )
143
+ . then ( data => {
144
+ const barLayout = Object . assign ( { } , customLayout , {
145
+ xaxis : Object . assign ( { } , customLayout . xaxis ) ,
146
+ yaxis : Object . assign ( { } , customLayout . yaxis , { title : 'Messages' , rangemode : 'tozero' } ) ,
147
+ margin : { t : 50 , l : 40 , r : 20 , b : 40 }
148
+ } ) ;
149
+ Plotly . newPlot ( 'sentiment-bar-graph' , [ {
150
+ x : data . sentiments ,
151
+ y : data . counts ,
152
+ type : 'bar' ,
153
+ marker : { color : '#8c30f5' }
154
+ } ] , barLayout , plotConfig ) ;
155
+ } ) ;
124
156
</ script >
125
157
126
158
</ body >
0 commit comments