GPQAPP

1
/*
2
 * Author: Abdullah A Almsaeed
3
 * Date: 4 Jan 2014
4
 * Description:
5
 *      This is a demo file used only for the main dashboard (index.html)
6
 **/
7

8
/* global moment:false, Chart:false, Sparkline:false */
9

10
$(function () {
11
  'use strict'
12

13
  // Make the dashboard widgets sortable Using jquery UI
14
  $('.connectedSortable').sortable({
15
    placeholder: 'sort-highlight',
16
    connectWith: '.connectedSortable',
17
    handle: '.card-header, .nav-tabs',
18
    forcePlaceholderSize: true,
19
    zIndex: 999999
20
  })
21
  $('.connectedSortable .card-header').css('cursor', 'move')
22

23
  // jQuery UI sortable for the todo list
24
  $('.todo-list').sortable({
25
    placeholder: 'sort-highlight',
26
    handle: '.handle',
27
    forcePlaceholderSize: true,
28
    zIndex: 999999
29
  })
30

31
  // bootstrap WYSIHTML5 - text editor
32
  $('.textarea').summernote()
33

34
  $('.daterange').daterangepicker({
35
    ranges: {
36
      Today: [moment(), moment()],
37
      Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
38
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
39
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
40
      'This Month': [moment().startOf('month'), moment().endOf('month')],
41
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
42
    },
43
    startDate: moment().subtract(29, 'days'),
44
    endDate: moment()
45
  }, function (start, end) {
46
    // eslint-disable-next-line no-alert
47
    alert('You chose: ' + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
48
  })
49

50
  /* jQueryKnob */
51
  $('.knob').knob()
52

53
  // jvectormap data
54
  var visitorsData = {
55
    US: 398, // USA
56
    SA: 400, // Saudi Arabia
57
    CA: 1000, // Canada
58
    DE: 500, // Germany
59
    FR: 760, // France
60
    CN: 300, // China
61
    AU: 700, // Australia
62
    BR: 600, // Brazil
63
    IN: 800, // India
64
    GB: 320, // Great Britain
65
    RU: 3000 // Russia
66
  }
67
  // World map by jvectormap
68
  $('#world-map').vectorMap({
69
    map: 'usa_en',
70
    backgroundColor: 'transparent',
71
    regionStyle: {
72
      initial: {
73
        fill: 'rgba(255, 255, 255, 0.7)',
74
        'fill-opacity': 1,
75
        stroke: 'rgba(0,0,0,.2)',
76
        'stroke-width': 1,
77
        'stroke-opacity': 1
78
      }
79
    },
80
    series: {
81
      regions: [{
82
        values: visitorsData,
83
        scale: ['#ffffff', '#0154ad'],
84
        normalizeFunction: 'polynomial'
85
      }]
86
    },
87
    onRegionLabelShow: function (e, el, code) {
88
      if (typeof visitorsData[code] !== 'undefined') {
89
        el.html(el.html() + ': ' + visitorsData[code] + ' new visitors')
90
      }
91
    }
92
  })
93

94
  // Sparkline charts
95
  var sparkline1 = new Sparkline($('#sparkline-1')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' })
96
  var sparkline2 = new Sparkline($('#sparkline-2')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' })
97
  var sparkline3 = new Sparkline($('#sparkline-3')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' })
98

99
  sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021])
100
  sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921])
101
  sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21])
102

103
  // The Calender
104
  $('#calendar').datetimepicker({
105
    format: 'L',
106
    inline: true
107
  })
108

109
  // SLIMSCROLL FOR CHAT WIDGET
110
  $('#chat-box').overlayScrollbars({
111
    height: '250px'
112
  })
113

114
  /* Chart.js Charts */
115
  // Sales chart
116
  var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d')
117
  // $('#revenue-chart').get(0).getContext('2d');
118

119
  var salesChartData = {
120
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
121
    datasets: [
122
      {
123
        label: 'Digital Goods',
124
        backgroundColor: 'rgba(60,141,188,0.9)',
125
        borderColor: 'rgba(60,141,188,0.8)',
126
        pointRadius: false,
127
        pointColor: '#3b8bba',
128
        pointStrokeColor: 'rgba(60,141,188,1)',
129
        pointHighlightFill: '#fff',
130
        pointHighlightStroke: 'rgba(60,141,188,1)',
131
        data: [28, 48, 40, 19, 86, 27, 90]
132
      },
133
      {
134
        label: 'Electronics',
135
        backgroundColor: 'rgba(210, 214, 222, 1)',
136
        borderColor: 'rgba(210, 214, 222, 1)',
137
        pointRadius: false,
138
        pointColor: 'rgba(210, 214, 222, 1)',
139
        pointStrokeColor: '#c1c7d1',
140
        pointHighlightFill: '#fff',
141
        pointHighlightStroke: 'rgba(220,220,220,1)',
142
        data: [65, 59, 80, 81, 56, 55, 40]
143
      }
144
    ]
145
  }
146

147
  var salesChartOptions = {
148
    maintainAspectRatio: false,
149
    responsive: true,
150
    legend: {
151
      display: false
152
    },
153
    scales: {
154
      xAxes: [{
155
        gridLines: {
156
          display: false
157
        }
158
      }],
159
      yAxes: [{
160
        gridLines: {
161
          display: false
162
        }
163
      }]
164
    }
165
  }
166

167
  // This will get the first returned node in the jQuery collection.
168
  // eslint-disable-next-line no-unused-vars
169
  var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
170
    type: 'line',
171
    data: salesChartData,
172
    options: salesChartOptions
173
  })
174

175
  // Donut Chart
176
  var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d')
177
  var pieData = {
178
    labels: [
179
      'Instore Sales',
180
      'Download Sales',
181
      'Mail-Order Sales'
182
    ],
183
    datasets: [
184
      {
185
        data: [30, 12, 20],
186
        backgroundColor: ['#f56954', '#00a65a', '#f39c12']
187
      }
188
    ]
189
  }
190
  var pieOptions = {
191
    legend: {
192
      display: false
193
    },
194
    maintainAspectRatio: false,
195
    responsive: true
196
  }
197
  // Create pie or douhnut chart
198
  // You can switch between pie and douhnut using the method below.
199
  // eslint-disable-next-line no-unused-vars
200
  var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
201
    type: 'doughnut',
202
    data: pieData,
203
    options: pieOptions
204
  })
205

206
  // Sales graph chart
207
  var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d')
208
  // $('#revenue-chart').get(0).getContext('2d');
209

210
  var salesGraphChartData = {
211
    labels: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4', '2013 Q1', '2013 Q2'],
212
    datasets: [
213
      {
214
        label: 'Digital Goods',
215
        fill: false,
216
        borderWidth: 2,
217
        lineTension: 0,
218
        spanGaps: true,
219
        borderColor: '#efefef',
220
        pointRadius: 3,
221
        pointHoverRadius: 7,
222
        pointColor: '#efefef',
223
        pointBackgroundColor: '#efefef',
224
        data: [2666, 2778, 4912, 3767, 6810, 5670, 4820, 15073, 10687, 8432]
225
      }
226
    ]
227
  }
228

229
  var salesGraphChartOptions = {
230
    maintainAspectRatio: false,
231
    responsive: true,
232
    legend: {
233
      display: false
234
    },
235
    scales: {
236
      xAxes: [{
237
        ticks: {
238
          fontColor: '#efefef'
239
        },
240
        gridLines: {
241
          display: false,
242
          color: '#efefef',
243
          drawBorder: false
244
        }
245
      }],
246
      yAxes: [{
247
        ticks: {
248
          stepSize: 5000,
249
          fontColor: '#efefef'
250
        },
251
        gridLines: {
252
          display: true,
253
          color: '#efefef',
254
          drawBorder: false
255
        }
256
      }]
257
    }
258
  }
259

260
  // This will get the first returned node in the jQuery collection.
261
  // eslint-disable-next-line no-unused-vars
262
  var salesGraphChart = new Chart(salesGraphChartCanvas, { // lgtm[js/unused-local-variable]
263
    type: 'line',
264
    data: salesGraphChartData,
265
    options: salesGraphChartOptions
266
  })
267
})
268