week9/index.html at master · Anyway214/week9 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
<head>
	<title>Single File Vue Charts</title>
</head>
<body>
	<div id="app">
    <!--<pre>{{charts}}</pre>-->

    <h3> 123 Charts by Minern
		</h3>
  Current route <b>{{currentRoute}}</b>
	<p>
		<!-- use router-link component for navigation. -->
		<!-- specify the link by passing the `to` prop. -->
		<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
		<router-link to="bar">Bar</router-link>
		<router-link to="line">Line</router-link>
	  <router-link to="local">Local</router-link>
	</p>

    <div v-if="charts.barData2 && currentRoute === '/bar'">
      Chart: {{charts.barData2.title }}
      <column-chart :data="charts.barData2.data"></column-chart>
    </div>

    <div v-if="charts.lineData2 && currentRoute === '/line'">
	    Chart: {{charts.lineData2.title}}
      <line-chart :data="charts.lineData2.data"></line-chart>
    </div>

		<div v-if="currentRoute === '/local'">
		  Chart: Local Bar Data
      <column-chart :data="localBarData"></column-chart>
      <br>
      Chart: Local Line Data
		  <line-chart :data="localLineData"></line-chart>
    </div>
	</div>
	<script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	<script src="https://unpkg.com/chart.js@2.7.2/dist/Chart.bundle.js"></script>
	<script src="https://unpkg.com/vue-chartkick@0.4.0"></script>
	<script src="https://gstatic.com/firebasejs/4.2.0/firebase.js"></script>
	<script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>


  <script>

const Bar = { template: '<div>TEMP</div>' }

// 2. Define some routes
// Each route should map to a component.
const routes = [
  { path: '/bar', component: Bar },
  { path: '/line', component: Bar },
  { path: '/local', component: Bar }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for `routes: routes`
})
		var db = firebase.initializeApp({
        databaseURL: 'https://hello-148a4.firebaseio.com/'
      }).database()
      var chartsRef = db.ref('charts')
      new Vue({
        el: '#app',
       router,
        data: {
          newTodoText: '',
          username:'anonymous',
         	localBarData: [["Jan", 4], ["Feb", 2], ["Mar", 10], ["Apr", 5], ["May", 3]],
          localLineData: [["Sun", 32], ["Mon", 46], ["Tue", 28]]
        },
        firebase: {
        charts: {
            source: db.ref('charts'),
          // optionally bind as an object
            asObject: true,
       }},

        computed: {
          currentRoute () {
          // We will see what `params` is shortly
            return this.$route.path
          }
        }
      })
	</script>
</body>
</html>