Browse Source

Switched charts library (again) and fixed a student response bug

- Switched vue-charts for apexcharts for ease of configuration and performance

- Fixed a bug where leaving a question before the instructor stops polling removes your response.
dev
Atridad Lahiji 11 months ago
parent
commit
c2396dcc8b
  1. 84
      components/session/FinalResults.vue
  2. 84
      components/session/LiveResults.vue
  3. 4
      components/session/Question.vue
  4. 2
      nuxt.config.js
  5. 4
      package.json
  6. 5
      plugins/apex-charts.js
  7. 124
      yarn.lock

84
components/session/FinalResults.vue

@ -20,29 +20,12 @@ along with Pollo. If not, see <https://www.gnu.org/licenses/>. -->
<div
v-if="qobj.question.qoptions"
>
<graph-bar
:theme="((GET_DARK_THEME) ? 'dark' : 'classic')"
:width="350"
:height="300"
:axis-min="0"
:labels="optionsList"
:values="responseCountList"
class="mx-auto d-sm-none"
>
<note text="Bar Chart" />
</graph-bar>
<graph-bar
:theme="((GET_DARK_THEME) ? 'dark' : 'classic')"
:width="600"
:height="300"
:axis-min="0"
:labels="optionsList"
:values="responseCountList"
class="mx-auto d-none d-sm-block"
>
<note :text="qobj.question.qname" />
</graph-bar>
<apexchart
:options="chartOptions"
:series="chartSeries"
max-width="500"
type="bar"
/>
</div>
<text-response-table
@ -141,52 +124,25 @@ export default {
return reducedList
},
// This dynamically formats the data for the chartjs plot
chartData () {
return {
labels: this.optionsList,
datasets: [
{
label: this.qobj.question.qname,
backgroundColor: this.graphColor,
data: this.responseCountList
}
]
}
},
// This dynamically formats the style options for the chartjs plot
chartOptions () {
return {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'top',
labels: {
fontColor: ((this.GET_DARK_THEME) ? '#ffffff' : '#000000')
}
chart: {
id: 'final-results',
toolbar: {
show: false
},
foreColor: ((this.GET_DARK_THEME) ? '#ffffff' : '#000000')
},
scales: {
xAxes: [{
gridLines: {
color: 'rgba(0, 0, 0, 0)',
zeroLineColor: ((this.GET_DARK_THEME) ? '#ffffff' : '#000000')
},
ticks: {
fontColor: ((this.GET_DARK_THEME) ? '#ffffff' : '#000000')
}
}],
yAxes: [{
gridLines: {
color: 'rgba(0, 0, 0, 0)',
zeroLineColor: ((this.GET_DARK_THEME) ? '#ffffff' : '#000000')
},
ticks: {
fontColor: ((this.GET_DARK_THEME) ? '#ffffff' : '#000000'),
beginAtZero: true
}
}]
xaxis: {
categories: this.optionsList
}
}
},
chartSeries () {
return [{
name: 'Responses',
data: this.responseCountList
}]
}
},
methods: {

84
components/session/LiveResults.vue

@ -21,29 +21,12 @@ along with Pollo. If not, see <https://www.gnu.org/licenses/>. -->
<div
v-if="activeQuestion.activequestion.qoptions"
>
<graph-bar
:theme="((GET_DARK_THEME) ? 'dark' : 'classic')"
:width="350"
:height="300"
:axis-min="0"
:labels="optionsList"
:values="responseCountList"
class="mx-auto d-sm-none"
>
<note text="Bar Chart" />
</graph-bar>
<graph-bar
:theme="((GET_DARK_THEME) ? 'dark' : 'classic')"
:width="600"
:height="300"
:axis-min="0"
:labels="optionsList"
:values="responseCountList"
class="mx-auto d-none d-sm-block"
>
<note :text="activeQuestion.activequestion.qname" />
</graph-bar>
<apexchart
:options="chartOptions"
:series="chartSeries"
max-width="500"
type="bar"
/>
</div>
<text-response-table
@ -135,52 +118,25 @@ export default {
return reducedList
},
// This dynamically formats the data for the chartjs plot
chartData () {
return {
labels: this.optionsList,
datasets: [
{
label: this.activeQuestion.activequestion.qname,
backgroundColor: this.graphColor,
data: this.responseCountList
}
]
}
},
// This dynamically formats the style options for the chartjs plot
chartOptions () {
return {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'top',
labels: {
fontColor: ((this.GET_DARK_THEME) ? '#ffffff' : '#000000')
}
chart: {
id: 'final-results',
toolbar: {
show: false
},
foreColor: ((this.GET_DARK_THEME) ? '#ffffff' : '#000000')
},
scales: {
xAxes: [{
gridLines: {
color: 'rgba(0, 0, 0, 0)',
zeroLineColor: ((this.GET_DARK_THEME) ? '#ffffff' : '#000000')
},
ticks: {
fontColor: ((this.GET_DARK_THEME) ? '#ffffff' : '#000000')
}
}],
yAxes: [{
gridLines: {
color: 'rgba(0, 0, 0, 0)',
zeroLineColor: ((this.GET_DARK_THEME) ? '#ffffff' : '#000000')
},
ticks: {
fontColor: ((this.GET_DARK_THEME) ? '#ffffff' : '#000000'),
beginAtZero: true
}
}]
xaxis: {
categories: this.optionsList
}
}
},
chartSeries () {
return [{
name: 'Responses',
data: this.responseCountList
}]
}
}
}

4
components/session/Question.vue

@ -110,7 +110,9 @@ export default {
watch: {
// Sends a response when the user selects one of the options
qSelectedResponse (newResponse) {
this.sendResponse(newResponse)
if (newResponse !== '') {
this.sendResponse(newResponse)
}
},
activeQuestionExists () {
this.qSelectedResponse = ''

2
nuxt.config.js

@ -29,7 +29,7 @@ export default {
plugins: [
{ src: '~/plugins/firebase/firebase', ssr: false },
{ src: '~/plugins/fireauth', ssr: false },
{ src: '~/plugins/vue-graph.js', ssr: false },
{ src: '~/plugins/apex-charts.js', ssr: false },
'@plugins/vuetify'
],
/*

4
package.json

@ -22,11 +22,11 @@
"@mdi/js": "^5.0.45",
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/pwa": "^3.0.0-0",
"chart.js": "^2.9.3",
"apexcharts": "^3.19.2",
"file-saver": "^2.0.2",
"json2csv": "^4.5.4",
"nuxt": "^2.12.1",
"vue-graph": "^0.8.7",
"vue-apexcharts": "^1.5.3",
"vuetify": "^2.2.15",
"vuex-persistedstate": "^2.7.1"
},

5
plugins/vue-graph.js → plugins/apex-charts.js

@ -13,6 +13,7 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Pollo. If not, see <https://www.gnu.org/licenses/>. */
import Vue from 'vue'
import VueGraph from 'vue-graph'
import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)
Vue.use(VueGraph)
Vue.component('apexchart', VueApexCharts)

124
yarn.lock

@ -2034,6 +2034,18 @@ anymatch@~3.1.1:
normalize-path "^3.0.0"
picomatch "^2.0.4"
apexcharts@^3.19.2:
version "3.19.2"
resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.19.2.tgz#d46113bf253e79f15e67d00721e5bb12af73914e"
integrity sha512-hMFLRE2Lyx4WrN9pYfQLvBDcn+HOodZrqRwc+kucxM+hcUmI2NHY4z+GI14+VcSFmD4aKiMbS3z3Q2jiBxUrcg==
dependencies:
svg.draggable.js "^2.2.2"
svg.easing.js "^2.0.0"
svg.filter.js "^2.0.2"
svg.pathmorphing.js "^0.1.3"
svg.resize.js "^1.4.3"
svg.select.js "^3.0.1"
aproba@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@ -2780,29 +2792,6 @@ chardet@^0.7.0:
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
chart.js@^2.9.3:
version "2.9.3"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.3.tgz#ae3884114dafd381bc600f5b35a189138aac1ef7"
integrity sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
chartjs-color-string@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
dependencies:
color-name "^1.0.0"
chartjs-color@^2.1.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
dependencies:
chartjs-color-string "^0.6.0"
color-convert "^1.9.3"
check-types@^8.0.3:
version "8.0.3"
resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
@ -2971,7 +2960,7 @@ collection-visit@^1.0.0:
map-visit "^1.0.0"
object-visit "^1.0.0"
color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
color-convert@^1.9.0, color-convert@^1.9.1:
version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@ -6402,18 +6391,6 @@ jsprim@^1.2.2:
json-schema "0.2.3"
verror "1.10.0"
juijs-chart@2.6.9:
version "2.6.9"
resolved "https://registry.yarnpkg.com/juijs-chart/-/juijs-chart-2.6.9.tgz#9f5e4759ee0c12101765c0b1af6870360e8116b5"
integrity sha512-l62qiuz/kPELx10zNC8gzV8DWSGdTkUhOCkmvDDlQzoW0a59vDP7sk8ahbzb0lUuCVGVjOL94YuKKriwcEcQtA==
dependencies:
juijs-graph "1.1.4"
juijs-graph@1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/juijs-graph/-/juijs-graph-1.1.4.tgz#36931cc0f79c406a08e5db9f1ff81de7bc4f26eb"
integrity sha512-97LnBbwTrqbKBi2nS4nfvsHXKAArwcVxmGHkoXx9X7GT1uGXdRONmdLhjYc87UkWWQr5p91sSWlwA0qXvQg7/Q==
kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
version "3.2.2"
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@ -7108,11 +7085,6 @@ mocha@^6.2.2:
yargs-parser "13.1.2"
yargs-unparser "1.6.0"
moment@^2.10.2:
version "2.26.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.26.0.tgz#5e1f82c6bafca6e83e808b30c8705eed0dcbd39a"
integrity sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw==
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@ -9953,6 +9925,61 @@ svg-tags@^1.0.0:
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
svg.draggable.js@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
dependencies:
svg.js "^2.0.1"
svg.easing.js@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
integrity sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=
dependencies:
svg.js ">=2.3.x"
svg.filter.js@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
integrity sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=
dependencies:
svg.js "^2.2.5"
svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
version "2.7.1"
resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
svg.pathmorphing.js@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
dependencies:
svg.js "^2.4.0"
svg.resize.js@^1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
dependencies:
svg.js "^2.6.5"
svg.select.js "^2.1.2"
svg.select.js@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
dependencies:
svg.js "^2.2.5"
svg.select.js@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
dependencies:
svg.js "^2.6.5"
svgo@^1.0.0:
version "1.3.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
@ -10519,6 +10546,11 @@ vm-browserify@^1.0.1:
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
vue-apexcharts@^1.5.3:
version "1.5.3"
resolved "https://registry.yarnpkg.com/vue-apexcharts/-/vue-apexcharts-1.5.3.tgz#9fde83727d944707da5c8c2fa9f09a051b48d082"
integrity sha512-ImbvQxgwbLMrEc9/veDIJ7lzncf1fJDSNqqK0x2YDNUCq5tE9uqM4Gb/ZYUB5WlDM3vDpzwDEmsidWcaO6/WXQ==
vue-client-only@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c"
@ -10548,14 +10580,6 @@ vue-eslint-parser@^7.0.0:
esquery "^1.0.1"
lodash "^4.17.15"
vue-graph@^0.8.7:
version "0.8.7"
resolved "https://registry.yarnpkg.com/vue-graph/-/vue-graph-0.8.7.tgz#686d1e7e50c537840493b5cd6d9dec34af6901b6"
integrity sha512-VLnYZ6AzVGGykIH4HothlJ9J39G2ute7crBeD4bvzvNCFq3+GhivUygrY/UUD3uN0e+BiYPCYq4v58vTIU7DiA==
dependencies:
juijs-chart "2.6.9"
vue "^2.6.7"
vue-hot-reload-api@^2.3.0:
version "2.3.4"
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
@ -10636,7 +10660,7 @@ vue-template-es2015-compiler@^1.9.0:
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
vue@^2.6.11, vue@^2.6.7:
vue@^2.6.11:
version "2.6.11"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==