| 1 |
<template> |
| 2 |
<div v-loading="loading" class="entriest_chart_wrapper"> |
| 3 |
<subscriber-chart :chart-data="chartData" :maxCumulativeValue="maxCumulativeValue"></subscriber-chart> |
| 4 |
</div> |
| 5 |
</template> |
| 6 |
|
| 7 |
<script type="text/babel"> |
| 8 |
import SubscriberChart from './_chart' |
| 9 |
import each from 'lodash/each'; |
| 10 |
export default { |
| 11 |
name: 'EntriesChart', |
| 12 |
components: { |
| 13 |
SubscriberChart |
| 14 |
}, |
| 15 |
props: ['form_id'], |
| 16 |
data() { |
| 17 |
return { |
| 18 |
loading: true, |
| 19 |
chartData: {}, |
| 20 |
maxCumulativeValue: 0, |
| 21 |
stats: { |
| 22 |
'January' : 20, |
| 23 |
'February': 30 |
| 24 |
} |
| 25 |
} |
| 26 |
}, |
| 27 |
methods: { |
| 28 |
fetchData() { |
| 29 |
this.loading = true; |
| 30 |
|
| 31 |
jQuery.get(window.ajaxurl, { |
| 32 |
action: 'fluentform_get_all_entries_report', |
| 33 |
form_id: this.form_id |
| 34 |
}) |
| 35 |
.then(response => { |
| 36 |
this.stats = response.data.stats; |
| 37 |
this.setupChartItems(); |
| 38 |
}) |
| 39 |
.fail(error => { |
| 40 |
console.log(error); |
| 41 |
}) |
| 42 |
.always(() => { |
| 43 |
this.loading = false; |
| 44 |
}); |
| 45 |
}, |
| 46 |
setupChartItems() { |
| 47 |
const labels = []; |
| 48 |
const ItemValues = { |
| 49 |
label: 'Submission Count', |
| 50 |
yAxisID: 'byDate', |
| 51 |
backgroundColor: 'rgba(81, 52, 178, 0.5)', |
| 52 |
borderColor: '#b175eb', |
| 53 |
data: [], |
| 54 |
fill: false, |
| 55 |
gridLines: { |
| 56 |
display: false |
| 57 |
} |
| 58 |
}; |
| 59 |
|
| 60 |
let currentTotal = 0; |
| 61 |
each(this.stats, (count, label) => { |
| 62 |
ItemValues.data.push(count); |
| 63 |
labels.push(label); |
| 64 |
currentTotal += parseInt(count); |
| 65 |
}); |
| 66 |
this.maxCumulativeValue = currentTotal + 10; |
| 67 |
this.chartData = { |
| 68 |
labels: labels, |
| 69 |
datasets: [ItemValues] |
| 70 |
} |
| 71 |
} |
| 72 |
}, |
| 73 |
mounted() { |
| 74 |
this.fetchData(); |
| 75 |
} |
| 76 |
} |
| 77 |
</script> |
| 78 |
|
