GPQAPP

1
/* global Chart:false */
2

3
$(function () {
4
  'use strict'
5

6
  var ticksStyle = {
7
    fontColor: '#495057',
8
    fontStyle: 'bold'
9
  }
10

11
  var mode = 'index'
12
  var intersect = true
13

14
  var $salesChart = $('#sales-chart')
15
  // eslint-disable-next-line no-unused-vars
16
  var salesChart = new Chart($salesChart, {
17
    type: 'bar',
18
    data: {
19
      labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
20
      datasets: [
21
        {
22
          backgroundColor: '#007bff',
23
          borderColor: '#007bff',
24
          data: [1000, 2000, 3000, 2500, 2700, 2500, 3000]
25
        },
26
        {
27
          backgroundColor: '#ced4da',
28
          borderColor: '#ced4da',
29
          data: [700, 1700, 2700, 2000, 1800, 1500, 2000]
30
        }
31
      ]
32
    },
33
    options: {
34
      maintainAspectRatio: false,
35
      tooltips: {
36
        mode: mode,
37
        intersect: intersect
38
      },
39
      hover: {
40
        mode: mode,
41
        intersect: intersect
42
      },
43
      legend: {
44
        display: false
45
      },
46
      scales: {
47
        yAxes: [{
48
          // display: false,
49
          gridLines: {
50
            display: true,
51
            lineWidth: '4px',
52
            color: 'rgba(0, 0, 0, .2)',
53
            zeroLineColor: 'transparent'
54
          },
55
          ticks: $.extend({
56
            beginAtZero: true,
57

58
            // Include a dollar sign in the ticks
59
            callback: function (value) {
60
              if (value >= 1000) {
61
                value /= 1000
62
                value += 'k'
63
              }
64

65
              return '$' + value
66
            }
67
          }, ticksStyle)
68
        }],
69
        xAxes: [{
70
          display: true,
71
          gridLines: {
72
            display: false
73
          },
74
          ticks: ticksStyle
75
        }]
76
      }
77
    }
78
  })
79

80
  var $visitorsChart = $('#visitors-chart')
81
  // eslint-disable-next-line no-unused-vars
82
  var visitorsChart = new Chart($visitorsChart, {
83
    data: {
84
      labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
85
      datasets: [{
86
        type: 'line',
87
        data: [100, 120, 170, 167, 180, 177, 160],
88
        backgroundColor: 'transparent',
89
        borderColor: '#007bff',
90
        pointBorderColor: '#007bff',
91
        pointBackgroundColor: '#007bff',
92
        fill: false
93
        // pointHoverBackgroundColor: '#007bff',
94
        // pointHoverBorderColor    : '#007bff'
95
      },
96
      {
97
        type: 'line',
98
        data: [60, 80, 70, 67, 80, 77, 100],
99
        backgroundColor: 'tansparent',
100
        borderColor: '#ced4da',
101
        pointBorderColor: '#ced4da',
102
        pointBackgroundColor: '#ced4da',
103
        fill: false
104
        // pointHoverBackgroundColor: '#ced4da',
105
        // pointHoverBorderColor    : '#ced4da'
106
      }]
107
    },
108
    options: {
109
      maintainAspectRatio: false,
110
      tooltips: {
111
        mode: mode,
112
        intersect: intersect
113
      },
114
      hover: {
115
        mode: mode,
116
        intersect: intersect
117
      },
118
      legend: {
119
        display: false
120
      },
121
      scales: {
122
        yAxes: [{
123
          // display: false,
124
          gridLines: {
125
            display: true,
126
            lineWidth: '4px',
127
            color: 'rgba(0, 0, 0, .2)',
128
            zeroLineColor: 'transparent'
129
          },
130
          ticks: $.extend({
131
            beginAtZero: true,
132
            suggestedMax: 200
133
          }, ticksStyle)
134
        }],
135
        xAxes: [{
136
          display: true,
137
          gridLines: {
138
            display: false
139
          },
140
          ticks: ticksStyle
141
        }]
142
      }
143
    }
144
  })
145
})
146

147
// lgtm [js/unused-local-variable]
148