Altra conversione in Typescript , partendo da un progetto di esempio funzionante...
This commit is contained in:
paolo
96
src/views/dashboard/one/cardChart.vue
Normal file
96
src/views/dashboard/one/cardChart.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="card bg-white">
|
||||
<div class="card-title bg-teal text-white">
|
||||
{{cardTitle}}
|
||||
<div class=" float-right">
|
||||
<q-fab icon="keyboard_arrow_left" direction="left" classNames="primary">
|
||||
</q-fab>
|
||||
<button class="primary circular raised gt-sm inline" @click="toImage()">
|
||||
<i>portrait</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<canvas ref="chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
import Chart from 'chart.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
type: 'horizontalBar',
|
||||
chart: '',
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
cardTitle: {
|
||||
default () { return 'Graph'}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
this.startChart()
|
||||
},
|
||||
type () {
|
||||
this.chart.destroy()
|
||||
this.startChart()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dataForChart () {
|
||||
return {
|
||||
labels: Object.keys(this.data),
|
||||
datasets: [{
|
||||
data: Object.values(this.data),
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255,99,132,1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)'
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startChart () {
|
||||
let axesStartFromZero = [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}
|
||||
}]
|
||||
this.chart = new Chart(this.$refs.chart,
|
||||
{
|
||||
type: this.type,
|
||||
data: this.dataForChart,
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
yAxes: axesStartFromZero,
|
||||
xAxes: axesStartFromZero
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
toImage () {
|
||||
window.open(this.chart.toBase64Image());
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
75
src/views/dashboard/one/cardTodo.vue
Normal file
75
src/views/dashboard/one/cardTodo.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="card bg-white">
|
||||
<div class="card-title bg-teal text-white">
|
||||
{{cardTitle}}
|
||||
<div class=" float-right">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="flex">
|
||||
<div class="list item-inset-delimiter auto">
|
||||
<q-infinite-scroll :handler="loadMore" :offset="7">
|
||||
<!-- Content, in this case some <p> tags -->
|
||||
<div class="item" v-for="(todo, index) in showingData">
|
||||
<div class="item-primary">{{index + 1}}</div>
|
||||
<div class="item-content has-secondary">
|
||||
<span v-show="todo.completed" class="completed-line">{{todo.title}}</span>
|
||||
<input v-show="!todo.completed" v-model.lazy="todo.title" class="fit" @change="changeTitle(todo)">
|
||||
</div>
|
||||
<q-toggle class="item-secondary"
|
||||
icon="done"
|
||||
@input="completeTodo(todo)"
|
||||
v-model="todo.completed"
|
||||
></q-toggle>
|
||||
</div>
|
||||
</q-infinite-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
import Chart from 'chart.js'
|
||||
|
||||
export default {
|
||||
mounted () {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
todos: [],
|
||||
actualMaxPosition: 10
|
||||
}
|
||||
},
|
||||
props: ['cardTitle', 'api'],
|
||||
watch: {
|
||||
},
|
||||
computed: {
|
||||
showingData () {
|
||||
return this.todos.slice(0, this.actualMaxPosition)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadMore (index, done) {
|
||||
setTimeout(() => {
|
||||
this.actualMaxPosition += 9
|
||||
done()
|
||||
}, 1000)
|
||||
|
||||
},
|
||||
completeTodo (todo) {
|
||||
},
|
||||
changeTitle (todo) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
input {
|
||||
padding: 7px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.completed-line {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
49
src/views/dashboard/one/cardTotal.vue
Normal file
49
src/views/dashboard/one/cardTotal.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="card text-white" :class="backgroundColor">
|
||||
<div class="card-content ">
|
||||
<div class="row">
|
||||
<div class="width-1of3">
|
||||
<i>{{iconName}}</i>
|
||||
</div>
|
||||
<div class="width-2of3">
|
||||
<p class="text-italic ">{{title}}</p>
|
||||
<h5 ref="number">
|
||||
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
import CountUp from 'countup.js'
|
||||
export default {
|
||||
props: ['title', 'total', 'backgroundColor', 'iconName'],
|
||||
mounted () {
|
||||
this.countUp.start()
|
||||
},
|
||||
computed: {
|
||||
countUp () {
|
||||
return new CountUp(this.$refs.number, 0, this.total, 0, 2.5, this.options)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
total () {
|
||||
this.countUp.start()
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: {
|
||||
separator: '.'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
i {
|
||||
font-size: 54px;
|
||||
}
|
||||
</style>
|
||||
92
src/views/dashboard/one/dashboard.vue
Normal file
92
src/views/dashboard/one/dashboard.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
|
||||
<div class="layout-padding ">
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-1of3 sm-auto">
|
||||
<cardTotal
|
||||
title="Total Posts"
|
||||
background-color="bg-teal-9"
|
||||
icon-name="local_post_office"
|
||||
:total="totalPosts">
|
||||
</cardTotal>
|
||||
</div>
|
||||
<div class="width-1of3 sm-auto">
|
||||
<cardTotal
|
||||
title="Total comments"
|
||||
background-color="bg-teal-7"
|
||||
icon-name="comment"
|
||||
:total="totalComments">
|
||||
</cardTotal>
|
||||
</div>
|
||||
<div class="width-1of3 sm-auto">
|
||||
<cardTotal
|
||||
title="Static total"
|
||||
background-color="bg-teal-5"
|
||||
icon-name="repeat_one"
|
||||
:total="50004">
|
||||
</cardTotal>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-1of2 lg-width-1of3 sm-auto">
|
||||
<card-chart
|
||||
card-title="Total Graph"
|
||||
:data="dataForGraph"
|
||||
></card-chart>
|
||||
</div>
|
||||
<div class="auto">
|
||||
<knob-statistics
|
||||
card-title="General statistics">
|
||||
</knob-statistics>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-4of5 sm-width-1of1">
|
||||
<card-todo
|
||||
card-title="Generic todos"
|
||||
api="todos">
|
||||
</card-todo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
import cardChart from './cardChart.vue'
|
||||
import cardTotal from './cardTotal.vue'
|
||||
import cardTodo from './cardTodo.vue'
|
||||
import knobStatistics from './knobStatistics.vue'
|
||||
import { mapActions } from 'vuex'
|
||||
import * as types from '../../../store/mutation-types'
|
||||
export default {
|
||||
name: 'Home',
|
||||
mounted () {
|
||||
// Axios.all not working
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
totalPosts: 0,
|
||||
totalComments: 0,
|
||||
totalTodos: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dataForGraph () {
|
||||
return {
|
||||
posts: this.totalPosts,
|
||||
todos: this.totalTodos,
|
||||
comments: this.totalComments
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions("glob", {'setPosts': types.SET_POSTS})
|
||||
},
|
||||
components: {
|
||||
cardTotal,
|
||||
cardChart,
|
||||
cardTodo,
|
||||
knobStatistics
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
41
src/views/dashboard/one/knobStatistics.vue
Normal file
41
src/views/dashboard/one/knobStatistics.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
//import { Toast } from 'quasar'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
minExpenses: 0,
|
||||
minIncome: 0,
|
||||
maxIncome: 5000,
|
||||
currentIncome: 998,
|
||||
currentExpenses: 125,
|
||||
doubleRangeMinMax: {
|
||||
min: 0,
|
||||
max: 5000
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentIncome () {
|
||||
if (this.currentIncome < this.currentExpenses){
|
||||
this.currentExpenses = this.currentIncome
|
||||
//Toast.create.negative({html: `You're in financial trouble.`})
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
maxExpenses () {
|
||||
return this.currentIncome
|
||||
}
|
||||
|
||||
},
|
||||
props: ['cardTitle'],
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
66
src/views/dashboard/one/tagKnob.vue
Normal file
66
src/views/dashboard/one/tagKnob.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<span class="tag label text-white rotate rotate-270 shadow-2" :class="tagClasses">
|
||||
<q-knob
|
||||
class="rotate-90"
|
||||
v-model="value"
|
||||
:size="size"
|
||||
style="font-size: 1.9rem"
|
||||
color="#fff"
|
||||
:track-color="trackColor"
|
||||
:min="min"
|
||||
:max="max"
|
||||
readonly
|
||||
:placeholder="fullPlaceHolder"
|
||||
></q-knob>
|
||||
</span>
|
||||
<span class="title block" :style="{color: titleColor}">{{title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
|
||||
props: {
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
size: {
|
||||
required: true
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
title: {},
|
||||
titleColor: {},
|
||||
tagClasses: {},
|
||||
trackColor: {},
|
||||
placeholderBefore: {}
|
||||
},
|
||||
computed: {
|
||||
fullPlaceHolder () {
|
||||
return this.placeholderBefore ? `${this.placeholderBefore}${this.value}` : this.value
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.label.tag{
|
||||
margin-left: 0;
|
||||
padding-left: 1rem;
|
||||
padding-right: 0.8rem;
|
||||
}
|
||||
.title {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user