Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div class="text-center">
- <div class="panel panel-default">
- <div class="panel-heading">
- <h4>Recent Views</h4>
- </div>
- <div class="panel-body">
- <div v-for="view in recentViews" :key="view.id">
- <a :href="'/' + view.sequence">{{ view.sequence }}</a> was viewed <strong>{{ view.created_at | ago }}</strong>
- </div>
- <div >
- <a href="#" @click.prevent="numRecentViews += 5">more</a>
- </div>
- </div>
- </div>
- <div class="panel panel-default">
- <div class="panel-body">
- <div>
- <strong>Zoom:</strong>
- <a href="#" @click.prevent="timeRange = 'year'">1 Year</a>
- <a href="#" @click.prevent="timeRange = 'month'">1 Month</a>
- <a href="#" @click.prevent="timeRange = 'week'">1 Week</a>
- </div>
- <line-chart :chartData="chartData" @chartClick="handleClick"></line-chart>
- </div>
- </div>
- <div v-if="focusViews.length" class="panel panel-default">
- <div class="panel-heading">
- <h4>Policies viewed {{ focusDate }}</h4>
- </div>
- <div class="panel-body">
- <div v-for="view in focusViews" :key="view.id">
- <a :href="'/' + view.sequence">{{ view.sequence }}</a>
- <span v-if="timeRange == 'year'"> - {{ view.created_at | date }}</span>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import LineChart from '../components/LineChart';
- import moment from 'moment';
- export default {
- components: { LineChart },
- props: {
- views: {
- type: String,
- default: ''
- }
- },
- data() {
- return {
- myViews: null,
- timeRange: 'year',
- numRecentViews: 5,
- focusDate: null,
- focusViews: [],
- dates: [],
- activeData: []
- }
- },
- mounted() {
- this.myViews = JSON.parse(this.views);
- },
- computed: {
- chartData() {
- if (!this.myViews) return {};
- switch(this.timeRange){
- case 'week':
- return this.weekData();
- case 'month':
- return this.monthData();
- }
- return this.yearData();
- },
- recentViews() {
- if (!this.myViews) return [];
- return this.myViews.slice(0, this.numRecentViews);
- },
- },
- methods: {
- handleClick(element){
- let x = element._index;
- let date = this.chartData.labels[x];
- this.focusDate = this.dates[x];
- this.focusViews = this.activeData[x];
- },
- yearData() {
- let labels = [];
- let dates = [];
- let data = Array(12);
- for (let i = 12; i > 0; i--){
- dates.push('in ' + moment().subtract(i, 'months').format('MMMM YYYY'));
- labels.push(moment().subtract(i, 'months').format('MMM'));
- data[i-1] = [];
- }
- this.dates = dates;
- this.myViews.forEach(view => {
- const i = labels.indexOf(moment(view.created_at).format('MMM'));
- data[i].push(view);
- });
- this.activeData = data;
- return {
- labels,
- datasets: [{
- data: data.map(d => d.length),
- backgroundColor: "#2BBE83"
- }]
- };
- },
- monthData() {
- let labels = [];
- let dates = [];
- let data = Array(30);
- let viewsThisMonth = this.myViews.filter(v => {
- return moment().diff(v.created_at, 'days') < 30;
- });
- for (let i = 30; i > 0; i--){
- dates.push('on ' + moment().subtract(i, 'days').format('MMMM Do YYYY'));
- labels.push(moment().subtract(i, 'days').format('MMM D'));
- data[i - 1] = [];
- }
- viewsThisMonth.forEach(view => {
- const i = labels.indexOf(moment(view.created_at).format('MMM D'));
- data[i].push(view);
- });
- this.dates = dates;
- this.activeData = data;
- return {
- labels,
- datasets: [{
- data: data.map(d => d.length),
- backgroundColor: "#2BBE83"
- }]
- }
- },
- weekData() {
- let labels = [];
- let dates = [];
- let data = Array(7);
- let viewsThisWeek = this.myViews.filter(v => {
- return moment().diff(v.created_at, 'days') < 7;
- });
- for (let i = 7; i > 0; i--){
- dates.push('on ' + moment().subtract(i, 'days').format('MMMM Do YYYY'));
- labels.push(moment().subtract(i, 'days').format('MMM D'));
- data[i - 1] = [];
- }
- viewsThisWeek.forEach(view => {
- const i = labels.indexOf(moment(view.created_at).format('MMM D'));
- data[i].push(view);
- });
- this.dates = dates;
- this.activeData = data;
- return {
- labels,
- datasets: [{
- data: data.map(d => d.length),
- backgroundColor: "#2BBE83"
- }]
- }
- }
- },
- filters: {
- ago: (value) => {
- if (!value) return '';
- return moment(value).fromNow();
- },
- date: (value) => {
- if (!value) return '';
- return moment(value).format('MMMM Do');
- }
- }
- }
- </script>
Add Comment
Please, Sign In to add comment