Added Maps for location and fixed busiest time

Signed-off-by: knrt10 <tripathi.kautilya@gmail.com>

app/livechat/client/lib/dataHandler.js

@@ -235,7 +235,7 @@ export const getSessionOverviewData = (dbCursor) => {
 	let totalOnline = 0;
 	let totalCompletedChat = 0;
 	let timeDuration = 0;
-	let busiestTime = 0;
+	const busiestTimeCount = new Map();
 	const mostCountryVisitors = new Map();
 	dbCursor.forEach(function(data) {
 		if (data.status === 'online') {
@@ -246,10 +246,11 @@ export const getSessionOverviewData = (dbCursor) => {
 			totalCompletedChat++;
 			const offlineTime = moment(data.offlineTime);
 			timeDuration += offlineTime.diff(data.createdAt);
+		}
 
-			if (offlineTime.diff(data.createdAt) > busiestTime) {
-				busiestTime = moment.duration(offlineTime.diff(data.createdAt));
-			}
+		if (data.chatStartTime) {
+			const dayHour = moment(data.chatStartTime).format('H');
+			busiestTimeCount.set(dayHour, busiestTimeCount.has(dayHour) ? busiestTimeCount.get(dayHour) + 1 : 1);
 		}
 
 		if (data.location) {
@@ -260,23 +261,17 @@ export const getSessionOverviewData = (dbCursor) => {
 
 	const avg = parseFloat(timeDuration / totalCompletedChat).toFixed(2);
 	const avgTimeDuration = moment.duration(Number(avg));
-	let avgTime = convertTimeAvg(avgTimeDuration);
 	const MaxVisitorsFrom = getKeyHavingMaxValue(mostCountryVisitors, '-');
-	if (moment.isDuration(busiestTime)) {
-		busiestTime = busiestTime.humanize();
-	}
-	if (isNaN(avgTimeDuration)) {
-		avgTime = '-';
-	}
+	const busiestHour = getKeyHavingMaxValue(busiestTimeCount, -1);
 	return [{
 		title: 'Online_Visitors',
 		value: totalOnline,
 	}, {
 		title: 'Avg_time_on_site',
-		value: avgTime,
+		value: isNaN(avgTimeDuration) ? '-' : convertTimeAvg(avgTimeDuration),
 	}, {
-		title: 'Busiest_chat_time',
-		value: busiestTime,
+		title: 'Busiest_time',
+		value: busiestHour > 0 ? `${ moment(busiestHour, ['H']).format('hA') }-${ moment((parseInt(busiestHour) + 1) % 24, ['H']).format('hA') }` : '-',
 	}, {
 		title: 'Most_visitors_from',
 		value: MaxVisitorsFrom,

app/livechat/client/stylesheets/livechat.less

@@ -23,6 +23,13 @@
   }
 }
 
+.map-container {
+  width: 500px;
+  max-width: 100%;
+  height: 500px;
+  overflow-x: scroll;
+}
+
 .lc-time-from,
 .lc-time-to {
   font-weight: 400;

app/livechat/client/views/app/realtimevisitors/livechatRealTimeVisitorSession.html

@@ -31,6 +31,14 @@ <h4>{{_ "Navigation_History"}}</h4>
               </div>
             </div>
           </div>
+          <div class="map-container">
+            <h4>{{_ "Visitor_Location"}}</h4>
+            {{#unless geolocationError}}
+            <img src="{{mapOptions}}">
+            {{else}}
+            Geolocation failed: {{geolocationError}}
+            {{/unless}}
+          </div>
         </div>
       {{/with}}
     </div>

app/livechat/client/views/app/realtimevisitors/livechatRealTimeVisitorSession.js

@@ -1,13 +1,39 @@
 import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
 
+import { settings } from '../../../../../settings';
 import { t } from '../../../../../utils';
 import './livechatRealTimeVisitorSession.html';
 
+
 Template.visitorSession.helpers({
 	user() {
 		return Template.instance().data;
 	},
 	pageTitle() {
 		return this.navigation.page.title || t('Empty_title');
 	},
+	geolocationError() {
+		const access = Template.instance().geolocation.get();
+		if (!access) {
+			return t('Livechat_session_geolocation');
+		}
+	},
+	mapOptions() {
+		const { location: { latitude, longitude } } = Template.instance().data;
+		return `https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=500x250&markers=color:gray%7Clabel:%7C${ latitude },${ longitude }&key=${ settings.get('MapView_GMapsAPIKey') }`;
+	},
+});
+
+Template.visitorSession.onCreated(function() {
+	this.geolocation = new ReactiveVar(true);
+	this.autorun(() => {
+		const isMapViewEnabled = settings.get('MapView_Enabled') === true;
+		const googleMapsApiKey = settings.get('MapView_GMapsAPIKey');
+		const canGetGeolocation = isMapViewEnabled && (googleMapsApiKey && googleMapsApiKey.length);
+
+		if (!canGetGeolocation) {
+			Template.instance().geolocation.set(false);
+		}
+	});
 });

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1916,6 +1916,7 @@
   "Livechat_room_count": "Livechat Room Count",
   "Livechat_Routing_Method": "Livechat Routing Method",
   "Livechat_Take_Confirm": "Do you want to take this client?",
+  "Livechat_session_geolocation": "Please check whether maps for visitor is enabled in settings and google maps API credentials exists",
   "Livechat_title": "Livechat Title",
   "Livechat_title_color": "Livechat Title Background Color",
   "Livechat_transcript_sent": "Livechat transcript sent",
@@ -3256,6 +3257,7 @@
   "Visit_Site_Url_and_try_the_best_open_source_chat_solution_available_today": "Visit __Site_URL__ and try the best open source chat solution available today!",
   "Visitor": "Visitor",
   "Visitor_Info": "Visitor Info",
+  "Visitor_Location": "Visitor Location",
   "Visitor_Navigation": "Visitor Navigation",
   "Visitor_page_URL": "Visitor page URL",
   "Visitor_time_on_site": "Visitor time on site",
@@ -3346,4 +3348,4 @@
   "Your_question": "Your question",
   "Your_server_link": "Your server link",
   "Your_workspace_is_ready": "Your workspace is ready to use 🎉"
-}
+}