Update Get Started examples for Dashboard and Table View

Author: RomanTsukanov

dashboard-table-view/html-css-js/index.js

@@ -1,3 +1,5 @@
+Survey.slk("YjA3ZGFkZTMtNjU5NS00YTYxLTkzZmEtYWJiOThjMWVhNjk3JmRvbWFpbnM6c3VydmV5anM7MT0yMDM0LTEwLTE2LDI9MjAzNC0xMC0xNiw0PTIwMzQtMTAtMTY=");
+
 const surveyJson = {
     elements: [{
         name: "satisfaction-score",

get-started-analytics/angular/src/app/app.component.ts

@@ -25,22 +25,22 @@ const surveyJson = {
   completedHtml: "Thank you for your feedback!",
 };
 
-const surveyResults = [{
-  "satisfaction-score": 5,
-  "nps-score": 10
-}, {
-  "satisfaction-score": 5,
-  "nps-score": 9
-}, {
-  "satisfaction-score": 3,
-  "nps-score": 6
-}, {
-  "satisfaction-score": 3,
-  "nps-score": 6
-}, {
-  "satisfaction-score": 2,
-  "nps-score": 3
-}];
+function randomIntFromInterval(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+function generateData() {
+  const data = [];
+  for (let index = 0; index < 100; index++) {
+    const satisfactionScore = randomIntFromInterval(index % 3 ? 1 : 3, 5);
+    const npsScore = satisfactionScore > 3 ? randomIntFromInterval(7, 10) : randomIntFromInterval(0, 6);
+    data.push({
+      "satisfaction-score": satisfactionScore,
+      "nps-score": npsScore
+    });
+  }
+  return data;
+}
 
 const vizPanelOptions = {
   allowHideQuestions: false
@@ -56,7 +56,7 @@ export class AppComponent implements AfterViewInit {
     const survey = new Model(surveyJson);
     const vizPanel = new VisualizationPanel(
       survey.getAllQuestions(),
-      surveyResults,
+      generateData(),
       vizPanelOptions
     );
     vizPanel.render("surveyVizPanel");

get-started-analytics/html-css-js/index.js

@@ -25,30 +25,30 @@ const surveyJson = {
 
 const survey = new Survey.Model(surveyJson);
 
-const surveyResults = [{
-    "satisfaction-score": 5,
-    "nps-score": 10
-}, {
-    "satisfaction-score": 5,
-    "nps-score": 9
-}, {
-    "satisfaction-score": 3,
-    "nps-score": 6
-}, {
-    "satisfaction-score": 3,
-    "nps-score": 6
-}, {
-    "satisfaction-score": 2,
-    "nps-score": 3
-}];
+function randomIntFromInterval(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+function generateData() {
+    const data = [];
+    for (let index = 0; index < 100; index++) {
+        const satisfactionScore = randomIntFromInterval(index % 3 ? 1 : 3, 5);
+        const npsScore = satisfactionScore > 3 ? randomIntFromInterval(7, 10) : randomIntFromInterval(0, 6);
+        data.push({
+            "satisfaction-score": satisfactionScore,
+            "nps-score": npsScore
+        });
+    }
+    return data;
+}
 
 const vizPanelOptions = {
     allowHideQuestions: false
 }
 
 const vizPanel = new SurveyAnalytics.VisualizationPanel(
     survey.getAllQuestions(),
-    surveyResults,
+    generateData(),
     vizPanelOptions
 );
 

get-started-analytics/react/src/components/Dashboard.tsx

@@ -28,22 +28,22 @@ const surveyJson = {
   completedHtml: "Thank you for your feedback!",
 };
 
-const surveyResults = [{
-  "satisfaction-score": 5,
-  "nps-score": 10
-}, {
-  "satisfaction-score": 5,
-  "nps-score": 9
-}, {
-  "satisfaction-score": 3,
-  "nps-score": 6
-}, {
-  "satisfaction-score": 3,
-  "nps-score": 6
-}, {
-  "satisfaction-score": 2,
-  "nps-score": 3
-}];
+function randomIntFromInterval(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+function generateData() {
+  const data = [];
+  for (let index = 0; index < 100; index++) {
+    const satisfactionScore = randomIntFromInterval(index % 3 ? 1 : 3, 5);
+    const npsScore = satisfactionScore > 3 ? randomIntFromInterval(7, 10) : randomIntFromInterval(0, 6);
+    data.push({
+      "satisfaction-score": satisfactionScore,
+      "nps-score": npsScore
+    });
+  }
+  return data;
+}
 
 const vizPanelOptions: IVisualizationPanelOptions = {
   allowHideQuestions: false
@@ -60,7 +60,7 @@ export default function DashboardComponent() {
   if (!vizPanel && !!survey) {
     const vizPanel = new VisualizationPanel(
       survey.getAllQuestions(),
-      surveyResults,
+      generateData(),
       vizPanelOptions
     );
     setVizPanel(vizPanel);

get-started-analytics/vue3/src/components/SurveyDashboard.vue

@@ -27,22 +27,22 @@ const surveyJson = {
   completedHtml: "Thank you for your feedback!",
 };
 
-const surveyResults = [{
-  "satisfaction-score": 5,
-  "nps-score": 10
-}, {
-  "satisfaction-score": 5,
-  "nps-score": 9
-}, {
-  "satisfaction-score": 3,
-  "nps-score": 6
-}, {
-  "satisfaction-score": 3,
-  "nps-score": 6
-}, {
-  "satisfaction-score": 2,
-  "nps-score": 3
-}];
+function randomIntFromInterval(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+function generateData() {
+  const data = [];
+  for (let index = 0; index < 100; index++) {
+    const satisfactionScore = randomIntFromInterval(index % 3 ? 1 : 3, 5);
+    const npsScore = satisfactionScore > 3 ? randomIntFromInterval(7, 10) : randomIntFromInterval(0, 6);
+    data.push({
+      "satisfaction-score": satisfactionScore,
+      "nps-score": npsScore
+    });
+  }
+  return data;
+}
 
 const vizPanelOptions = {
   allowHideQuestions: false
@@ -52,7 +52,7 @@ onMounted(() => {
   const survey = new Model(surveyJson);
   const vizPanel = new VisualizationPanel(
     survey.getAllQuestions(),
-    surveyResults,
+    generateData(),
     vizPanelOptions
   );
   vizPanel.render("surveyVizPanel");