all files / src/components/views/ Access.vue

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <section class="content">
    <h1 class="text-center">Access</h1>
    <h4 class="text-center">Where our users are coming from.</h4>
 
    <div class="row">
      <div class="col-md-12">
        <!-- MAP & BOX PANE -->
        <div class="box box-success">
          <div class="box-header with-border">
            <h3 class="box-title">Visitors Report</h3>
 
            <div class="box-tools pull-right">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
              </button>
              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body no-padding">
            <div class="row no-gutters">
              <div class="col-md-8">
                  <!-- Map will be created here -->
                  <div id="world-map-markers"></div>
              </div>
              <!-- /.col -->
              <div class="col-md-4">
                <div class="pad box-pane-right bg-green" style="min-height: 400px">
                  <div v-for="stat in stats" class="description-block margin-bottom">
                    <div class="row" data-color="#fff"><i class="fa fa-bar-chart-o fa-3x"></i></div>
                    <h5 class="description-header">{{stat.header}}</h5>
                    <span class="description-text">{{stat.text}}</span>
                  </div>
                </div>
              </div>
              <!-- /.col -->
            </div>
            <!-- /.row -->
          </div>
          <!-- /.box-body -->
        </div>
        <link rel="stylesheet" href="/static/js/plugins/jvectormap/jquery-jvectormap-2.0.3.css" >
      </div>
    </div>
  </section>
</template>
<script>
import {stats} from '../../demo'
 
const pluginURL = '/static/js/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js'
const mapURL = '/static/js/plugins/jvectormap/jquery-jvectormap-world-mill.js'
 
export default {
  name: 'Access',
  data () {
    return {
      stats
    }
  },
  mounted () {
    this.$nextTick(() => {
      window.jQuery.getScript(pluginURL, () => {
        window.jQuery.getScript(mapURL, () => {
          window.jQuery('#world-map-markers').vectorMap({
            map: 'world_mill'
          })
        })
      })
    })
  }
}
</script>
 
<style>
.fake {
  color: 'red';
}
 
#world-map-markers svg {
  height: 355px;
}
 
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
 
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}
</style>