Skip to content

Commit 0418936

Browse files
itsiprikshititsiprikshit
authored
Merge pull request #2048 from Countly/feature/new-ui-compare-apps
SERVER-2319 Vue transition of compare apps
2 parents c50f7e7 + c1a793f commit 0418936

File tree

12 files changed

+581
-42
lines changed

12 files changed

+581
-42
lines changed

‎frontend/express/public/javascripts/countly/vue/components/sidebar.js

+15-1
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,28 @@
1919
set: function(activeApp) {
2020
this.onChange(activeApp);
2121
}
22-
}
22+
},
23+
showCompare: function() {
24+
var cc = countlyVue.container.dataMixin({
25+
'compareComponent': '/apps/compare'
26+
});
27+
var component = cc.data();
28+
if (component && component.compareComponent && component.compareComponent.length > 0) {
29+
return component.compareComponent[0].enabled.default || false;
30+
}
31+
return false;
32+
},
2333
},
2434
props: {
2535
allApps: {
2636
type: Array
2737
}
2838
},
2939
methods: {
40+
compare: function() {
41+
app.navigate("#/compare", true);
42+
this.$emit("close");
43+
},
3044
onChange: function(id) {
3145
var selectedApp = this.allApps.find(function(a) {
3246
return a._id === id;

‎frontend/express/public/javascripts/countly/vue/templates/sidebar/app-selector.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<span slot="title" class="dialog-title bu-level">
44
<span class="bu-level-left text-big">Apps</span>
55
<span class="bu-level-right">
6-
<el-button type="text"><span class="text-medium">Compare Apps <i class="ion-arrow-right-c"></i> </span></el-button>
6+
<el-button v-if="showCompare" @click="compare" type="text"><span class="text-medium">Compare Apps <i class="ion-arrow-right-c"></i> </span></el-button>
77
</span>
88
</span>
99
<cly-listbox height="624" :options="allApps" :searchable="true" :bordered="false" v-model="activeApp">

‎plugins/compare/frontend/public/javascripts/countly.apps.models.js

+216
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
/*global countlyVue, CV,_, countlyCommon */
2+
(function(countlyCompareApps) {
3+
countlyCompareApps.helpers = {
4+
getTableRows: function(context) {
5+
var tableData = [];
6+
var tableStateMap = context.state.tableStateMap;
7+
for (var key in context.state.allAppsCompareData) {
8+
var obj = {};
9+
var item = context.state.allAppsCompareData[key];
10+
obj.name = item.name;
11+
obj.totalSessions = item.sessions && item.sessions.total ? countlyCommon.formatNumber(item.sessions.total) : 0,
12+
obj.totalUsers = item.users && item.users.total ? countlyCommon.formatNumber(item.users.total) : 0,
13+
obj.newUsers = item.newusers && item.newusers.total ? countlyCommon.formatNumber(item.newusers.total) : 0,
14+
obj.timeSpent = item.duration && item.duration.total ? item.duration.total : 0,
15+
obj.avgSessionDuration = item.avgduration && item.avgduration.total ? item.avgduration.total : 0;
16+
obj.checked = _.isEmpty(tableStateMap) ? true : tableStateMap[key];
17+
obj.id = item.id;
18+
tableData.push(obj);
19+
}
20+
21+
return tableData;
22+
},
23+
getLineChartData: function(context, selectedApps) {
24+
var series = [];
25+
var allAppsCompareData = context.state.allAppsCompareData;
26+
var selectedGraphMetric = context.state.selectedGraphMetric;
27+
var allAppsInfo = context.rootGetters["countlyCommon/getAllApps"];
28+
if (selectedApps.length > 0) {
29+
for (var i = 0;i < selectedApps.length;i++) {
30+
if (allAppsCompareData && allAppsCompareData[selectedApps[i]] && allAppsCompareData[selectedApps[i]].charts && allAppsCompareData[selectedApps[i]].charts[selectedGraphMetric]) {
31+
var obj = {
32+
name: allAppsInfo[selectedApps[i]].label,
33+
data: allAppsCompareData[selectedApps[i]].charts[selectedGraphMetric]
34+
};
35+
series.push(obj);
36+
}
37+
}
38+
}
39+
return {series: series};
40+
},
41+
getLegendData: function(context, selectedApps) {
42+
var lineLegend = {};
43+
var legendData = [];
44+
var allAppsInfo = context.rootGetters["countlyCommon/getAllApps"];
45+
for (var i = 0;i < selectedApps.length; i++) {
46+
var ob = {};
47+
ob.name = allAppsInfo[selectedApps[i]].label;
48+
legendData.push(ob);
49+
}
50+
if (legendData.length > 3) {
51+
lineLegend.position = "right";
52+
}
53+
lineLegend.data = legendData;
54+
lineLegend.show = true;
55+
lineLegend.type = "secondary";
56+
return lineLegend;
57+
},
58+
getAllAppsCompareData: function(res) {
59+
if (res.length > 0) {
60+
var obj = {};
61+
for (var i = 0;i < res.length;i++) {
62+
var appID = res[i].id;
63+
obj[appID] = res[i];
64+
}
65+
return obj;
66+
}
67+
return {};
68+
},
69+
getTableStateMap: function(context) {
70+
var obj = {};
71+
var allAppsInfo = context.rootGetters["countlyCommon/getAllApps"];
72+
for (var key in allAppsInfo) {
73+
obj[key] = true;
74+
}
75+
// var allAppsInfo = context.rootGetters["countlyCommon/getAllApps"];
76+
return obj;
77+
},
78+
filterSelectedApps: function(tableStateMap, selectedApps) {
79+
var maxItems = 0;
80+
if (_.isEmpty(tableStateMap)) {
81+
return selectedApps;
82+
83+
}
84+
return selectedApps.filter(function(item) {
85+
if (tableStateMap[item] && maxItems < 12) {
86+
maxItems++;
87+
return item;
88+
}
89+
});
90+
}
91+
};
92+
93+
countlyCompareApps.service = {
94+
fetchCompareAppsData: function(context, period) {
95+
return CV.$.ajax({
96+
type: "GET",
97+
url: countlyCommon.API_PARTS.data.r + "/compare/apps",
98+
data: {
99+
"period": period,
100+
"apps": JSON.stringify(context.state.selectedApps)
101+
},
102+
dataType: "json",
103+
});
104+
}
105+
};
106+
countlyCompareApps.getVuexModule = function() {
107+
108+
var getCompareInitialState = function() {
109+
return {
110+
allAppsCompareData: {},
111+
selectedApps: [],
112+
selectedGraphMetric: "total-sessions",
113+
lineChartData: {},
114+
lineLegend: {},
115+
tableRows: [],
116+
tableStateMap: {}
117+
};
118+
};
119+
120+
var compareAppsActions = {
121+
fetchCompareAppsData: function(context) {
122+
var period = context.rootGetters["countlyCommon/period"];
123+
return countlyCompareApps.service.fetchCompareAppsData(context, period)
124+
.then(function(res) {
125+
if (res) {
126+
context.commit("setAllAppsCompareData", countlyCompareApps.helpers.getAllAppsCompareData(res));
127+
context.commit("setLineChartData", countlyCompareApps.helpers.getLineChartData(context, countlyCompareApps.helpers.filterSelectedApps(context.state.tableStateMap, context.state.selectedApps)));
128+
context.commit('setLineLegend', countlyCompareApps.helpers.getLegendData(context, countlyCompareApps.helpers.filterSelectedApps(context.state.tableStateMap, context.state.selectedApps)));
129+
context.commit("setTableRows", countlyCompareApps.helpers.getTableRows(context));
130+
}
131+
});
132+
},
133+
fetchLineChartData: function(context, selectedApps) {
134+
context.commit("setLineChartData", countlyCompareApps.helpers.getLineChartData(context, countlyCompareApps.helpers.filterSelectedApps(context.state.tableStateMap, selectedApps)));
135+
},
136+
setSelectedApps: function(context, apps) {
137+
context.commit('setSelectedApps', apps);
138+
},
139+
setSelectedGraphMetric: function(context, metric) {
140+
context.commit("setSelectedGraphMetric", metric);
141+
},
142+
fetchLegendData: function(context, selectedApps) {
143+
context.commit('setLineLegend', countlyCompareApps.helpers.getLegendData(context, countlyCompareApps.helpers.filterSelectedApps(context.state.tableStateMap, selectedApps)));
144+
},
145+
initializeTableStateMap: function(context) {
146+
context.commit("setTableStateMap", countlyCompareApps.helpers.getTableStateMap(context));
147+
},
148+
updateTableStateMap: function(context, selection) {
149+
var tableRows = context.state.tableRows;
150+
for (var i = 0;i < tableRows.length; i++) {
151+
var isSelected = false;
152+
for (var j = 0;j < selection.length;j++) {
153+
if (tableRows[i].id === selection[j].id) {
154+
isSelected = true;
155+
continue;
156+
}
157+
}
158+
context.state.tableStateMap[tableRows[i].id] = isSelected;
159+
}
160+
}
161+
};
162+
163+
var compareAppsMutations = {
164+
setSelectedApps: function(state, value) {
165+
state.selectedApps = value;
166+
},
167+
setAllAppsCompareData: function(state, value) {
168+
state.allAppsCompareData = value;
169+
},
170+
setSelectedGraphMetric: function(state, value) {
171+
state.selectedGraphMetric = value;
172+
},
173+
setLineChartData: function(state, value) {
174+
state.lineChartData = value;
175+
},
176+
setLineLegend: function(state, value) {
177+
state.lineLegend = value;
178+
},
179+
setTableRows: function(state, value) {
180+
state.tableRows = value;
181+
},
182+
setTableStateMap: function(state, value) {
183+
state.tableStateMap = value;
184+
}
185+
};
186+
var compareAppsGetters = {
187+
selectedApps: function(_state) {
188+
return _state.selectedApps;
189+
},
190+
allAppsCompareData: function(_state) {
191+
return _state.allAppsCompareData;
192+
},
193+
selectedGraphMetric: function(_state) {
194+
return _state.selectedGraphMetric;
195+
},
196+
lineChartData: function(_state) {
197+
return _state.lineChartData;
198+
},
199+
lineLegend: function(_state) {
200+
return _state.lineLegend;
201+
},
202+
tableRows: function(_state) {
203+
return _state.tableRows;
204+
},
205+
tableStateMap: function(_state) {
206+
return _state.tableStateMap;
207+
}
208+
};
209+
return countlyVue.vuex.Module("countlyCompareApps", {
210+
state: getCompareInitialState,
211+
actions: compareAppsActions,
212+
mutations: compareAppsMutations,
213+
getters: compareAppsGetters,
214+
});
215+
};
216+
}(window.countlyCompareApps = window.countlyCompareApps || {}));

0 commit comments

Comments
 (0)