Skip to content

Commit bfb71c2

Browse files
author
Dmitry Kuzin (DevExpress)
committed
Add SurveyAnalytics in the project
1 parent 40d76a1 commit bfb71c2

File tree

3 files changed

+160
-57
lines changed

3 files changed

+160
-57
lines changed

‎wwwroot/index.css‎

Lines changed: 69 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,79 @@ section {
7979
color: #fff;
8080
}
8181

82-
#resultsTable td {
83-
cursor: pointer;
84-
}
85-
8682
.sv_body {
8783
overflow: scroll;
8884
}
8985

9086
.fork_me_on_github img {
9187
z-index: 1;
9288
}
89+
90+
.rounded-button {
91+
-webkit-appearance: none;
92+
-moz-appearance: none;
93+
appearance: none;
94+
min-width: 155px;
95+
height: 34px;
96+
line-height: 34px;
97+
border-radius: 17px;
98+
background-color: #1ab394;
99+
padding: 0 2em;
100+
font-size: 14px;
101+
font-weight: bold;
102+
text-align: center;
103+
color: #ffffff;
104+
border: none;
105+
display: inline-block;
106+
cursor: pointer;
107+
outline: none;
108+
}
109+
110+
.sa-table .rounded-button {
111+
background-color: #1ab394;
112+
margin-right: 50px;
113+
}
114+
115+
.results-page {
116+
font-family:"Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Arial, sans-serif;
117+
background-color: #fff;
118+
}
119+
120+
.results-page__title {
121+
height:79px;
122+
position:relative;
123+
max-width: 80%;
124+
}
125+
126+
.results-page__title h3 {
127+
font-size:28px;
128+
font-weight: 300;
129+
}
130+
131+
.results-page__centered {
132+
max-width: 80%;
133+
margin: auto;
134+
}
135+
136+
.results-page__tabs {
137+
padding-left: 0;
138+
}
139+
140+
.results-page__tab {
141+
display: inline-block;
142+
margin-right: -.25em;
143+
margin-left: -2px;
144+
padding: 0;
145+
}
146+
.results-page__tab a {
147+
padding: .83em 1.5em;
148+
border: 1px solid #e7e7e7;
149+
cursor: pointer;
150+
font-size: 12px;
151+
font-weight: bold;
152+
color: #404040;
153+
text-decoration: none;
154+
}
155+
.results-page__tab--active a {
156+
background-color: #f7f7f7;
157+
}

‎wwwroot/results.html‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,31 @@
44
<head>
55
<meta charset="utf-8" />
66
<title>Survey Results</title>
7-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
8-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
9-
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
10-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
117
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-debug.js"></script>
128
<script src="https://unpkg.com/survey-knockout"></script>
9+
<script src="https://cdn.rawgit.com/inexorabletash/polyfill/master/typedarray.js"></script>
10+
11+
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
12+
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
13+
<script src="https://unpkg.com/wordcloud@1.1.0/src/wordcloud2.js"></script>
14+
<script src="https://unpkg.com/survey-analytics/survey.analytics.js"></script>
15+
16+
<script src="https://unpkg.com/tabulator-tables@4.7.2/dist/js/tabulator.js"></script>
17+
<script src="https://unpkg.com/survey-analytics/survey.analytics.tabulator.js"></script>
18+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
19+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.10/jspdf.plugin.autotable.min.js"></script>
20+
<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
21+
1322
<link rel="stylesheet" href="https://unpkg.com/survey-knockout/survey.css" />
14-
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
15-
<link rel="stylesheet" href="./index.css" />
23+
<link rel="stylesheet" type="text/css"href="https://unpkg.com/survey-analytics/survey.analytics.css"/>
24+
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tabulator-tables@4.7.2/dist/css/tabulator.css"/>
25+
<link rel="stylesheet" type="text/css" href="https://unpkg.com/survey-analytics/survey.analytics.tabulator.css"/>
26+
<link rel="stylesheet" type="text/css" href="./index.css"/>
1627
</head>
1728

18-
<body>
29+
30+
31+
<body class="results-page">
1932
<a class="fork_me_on_github" href="https://github.com/surveyjs/surveyjs-aspnet-mvc" target="_blank">
2033
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67"
2134
alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png">
@@ -25,16 +38,21 @@
2538
<button onclick="window.location = '/'">&lt&nbspBack</button>
2639
</div>
2740
</div>
28-
<div class="sv_main sv_frame sv_default_css">
29-
<div class="sv_custom_header"></div>
30-
<div class="sv_container">
31-
<div class="sv_header">
32-
<h3 data-bind="text: surveyId + ' results'"></h3>
33-
</div>
34-
<div class="sv_body">
35-
<table id="resultsTable" class="table table-striped table-bordered">
36-
</table>
37-
</div>
41+
<div class="results-page__centered">
42+
<div class="results-page__title">
43+
<h3 data-bind="text: surveyId + ' results'"></h3>
44+
</div>
45+
<ul class="results-page__tabs">
46+
<li class="results-page__tab" data-bind="css: { 'results-page__tab--active': activeTab() === 'summary'}">
47+
<a href="#summary" data-bind="click: showSummary">Summary</a>
48+
</li>
49+
<li class="results-page__tab" data-bind="css: { 'results-page__tab--active': activeTab() === 'table'}">
50+
<a href="#table" data-bind="click: showTable">Table</a>
51+
</li>
52+
</ul>
53+
<div id="resultsContainer">
54+
<div id="summaryContainer" data-bind="visible: activeTab() === 'summary'"></div>
55+
<div id="tableContainer" data-bind="visible: activeTab() === 'table'"></div>
3856
</div>
3957
</div>
4058

‎wwwroot/results.js‎

Lines changed: 56 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
function getParams() {
22
var url = window.location.href
3+
.split("#")[0]
34
.slice(window.location.href.indexOf("?") + 1)
45
.split("&");
56
var result = {};
6-
url.forEach(function(item) {
7+
url.forEach(function (item) {
78
var param = item.split("=");
89
result[param[0]] = param[1];
910
});
@@ -12,71 +13,90 @@ function getParams() {
1213

1314
function SurveyManager(baseUrl, accessKey) {
1415
var self = this;
16+
self.activeTab = ko.observable(
17+
window.location.hash.replace("#", "") || "summary"
18+
);
1519
self.surveyId = decodeURI(getParams()["id"]);
1620
self.results = ko.observableArray();
1721
Survey.dxSurveyService.serviceUrl = "";
1822
var survey = new Survey.Model({
1923
surveyId: self.surveyId,
20-
surveyPostId: self.surveyId
24+
surveyPostId: self.surveyId,
2125
});
2226
self.columns = ko.observableArray();
2327

24-
self.loadResults = function() {
28+
self.loadResults = function () {
2529
var xhr = new XMLHttpRequest();
2630
xhr.open("GET", baseUrl + "/results?postId=" + self.surveyId);
2731
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
28-
xhr.onload = function() {
32+
xhr.onload = function () {
2933
var result = xhr.response ? JSON.parse(xhr.response) : [];
3034
self.results(
31-
result.map(function(r) {
35+
result.map(function (r) {
3236
return JSON.parse(r || "{}");
3337
})
3438
);
35-
self.columns(
36-
survey.getAllQuestions().map(function(q) {
37-
return {
38-
data: q.name,
39-
sTitle: (q.title || "").trim(" ") || q.name,
40-
mRender: function(rowdata) {
41-
return (
42-
(typeof rowdata === "string"
43-
? rowdata
44-
: JSON.stringify(rowdata)) || ""
45-
);
46-
}
47-
};
48-
})
49-
);
50-
self.columns.push({
51-
targets: -1,
52-
data: null,
53-
sortable: false,
54-
defaultContent:
55-
"<button style='min-width: 150px;'>Show in Survey</button>"
56-
});
57-
var table = $("#resultsTable").DataTable({
58-
columns: self.columns(),
59-
data: self.results()
60-
});
6139

6240
var json = new Survey.JsonObject().toJsonObject(survey);
6341
var windowSurvey = new Survey.SurveyWindow(json);
6442
windowSurvey.survey.mode = "display";
6543
windowSurvey.survey.title = self.surveyId;
6644
windowSurvey.show();
6745

68-
$(document).on("click", "#resultsTable td", function(e) {
69-
var row_object = table.row(this).data();
70-
windowSurvey.survey.data = row_object;
71-
windowSurvey.isExpanded = true;
46+
var visPanel = (self.visPanel = new SurveyAnalytics.VisualizationPanel(
47+
survey.getAllQuestions(),
48+
self.results(),
49+
{ haveCommercialLicense: true }
50+
));
51+
visPanel.render(document.getElementById("summaryContainer"));
52+
53+
SurveyAnalyticsTabulator.TableExtensions.registerExtension({
54+
location: "details",
55+
name: "showinsurvey",
56+
visibleIndex: 0,
57+
render: (table, opt) => {
58+
return SurveyAnalyticsTabulator.DocumentHelper.createElement(
59+
"button",
60+
"rounded-button",
61+
{
62+
innerHTML: "Show in Survey",
63+
onclick: (e) => {
64+
windowSurvey.survey.data =
65+
table.data[opt.row.getDataPosition()];
66+
windowSurvey.isExpanded = true;
67+
},
68+
}
69+
);
70+
},
7271
});
72+
73+
var table = (self.table = new SurveyAnalyticsTabulator.Tabulator(
74+
survey,
75+
self.results(),
76+
{ haveCommercialLicense: true }
77+
));
78+
table.render(document.getElementById("tableContainer"));
7379
};
7480
xhr.send();
7581
};
7682

77-
survey.onLoadSurveyFromService = function() {
83+
survey.onLoadSurveyFromService = function () {
7884
self.loadResults();
7985
};
86+
87+
self.showSummary = function () {
88+
var tab = "summary";
89+
self.activeTab(tab);
90+
self.visPanel.layout();
91+
window.location.hash = "#" + tab;
92+
};
93+
94+
self.showTable = function () {
95+
var tab = "table";
96+
self.activeTab(tab);
97+
self.table.layout();
98+
window.location.hash = "#" + tab;
99+
};
80100
}
81101

82102
ko.applyBindings(new SurveyManager(""), document.body);

0 commit comments

Comments
 (0)