blocks
2 years ago
vendor
2 years ago
admin-notices.js
2 years ago
admin.js
2 years ago
chart.js
2 years ago
wpp.js
2 years ago
wpp.min.js
2 years ago
chart.js
201 lines
| 1 | var WPPChart = (function() { |
| 2 | "use strict"; |
| 3 | |
| 4 | /** |
| 5 | * Private functions and variables |
| 6 | */ |
| 7 | |
| 8 | var defaults = { |
| 9 | type: 'line', |
| 10 | data: { |
| 11 | labels: [], |
| 12 | datasets: [ |
| 13 | { |
| 14 | label: "", |
| 15 | fill: true, |
| 16 | lineTension: 0.2, |
| 17 | borderWidth: 3, |
| 18 | backgroundColor: "rgba(221, 66, 66, 0.8)", |
| 19 | borderColor: "#881111", |
| 20 | borderCapStyle: 'butt', |
| 21 | borderDash: [], |
| 22 | borderDashOffset: 0.0, |
| 23 | borderJoinStyle: 'miter', |
| 24 | pointBorderColor: "#881111", |
| 25 | pointBackgroundColor: "#fff", |
| 26 | pointBorderWidth: 2, |
| 27 | pointHoverRadius: 4, |
| 28 | pointHoverBackgroundColor: "#881111", |
| 29 | pointHoverBorderColor: "#881111", |
| 30 | pointHoverBorderWidth: 3, |
| 31 | pointRadius: 3, |
| 32 | pointHitRadius: 10, |
| 33 | data: [], |
| 34 | }, |
| 35 | { |
| 36 | label: "", |
| 37 | fill: true, |
| 38 | lineTension: 0.2, |
| 39 | borderWidth: 3, |
| 40 | backgroundColor: "rgba(136, 17, 17, 0.3)", |
| 41 | borderColor: "#a80000", |
| 42 | borderCapStyle: 'butt', |
| 43 | borderDash: [], |
| 44 | borderDashOffset: 0.0, |
| 45 | borderJoinStyle: 'miter', |
| 46 | pointBorderColor: "#a80000", |
| 47 | pointBackgroundColor: "#fff", |
| 48 | pointBorderWidth: 2, |
| 49 | pointHoverRadius: 4, |
| 50 | pointHoverBackgroundColor: "#a80000", |
| 51 | pointHoverBorderColor: "#a80000", |
| 52 | pointHoverBorderWidth: 3, |
| 53 | pointRadius: 3, |
| 54 | pointHitRadius: 10, |
| 55 | data: [], |
| 56 | } |
| 57 | ] |
| 58 | }, |
| 59 | options: { |
| 60 | legend: { |
| 61 | display: true, |
| 62 | labels: { |
| 63 | fontColor: '#23282d', |
| 64 | fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', |
| 65 | fontSize: 12 |
| 66 | } |
| 67 | }, |
| 68 | responsive: true, |
| 69 | maintainAspectRatio: false, |
| 70 | layout: { |
| 71 | padding: { |
| 72 | top: 2, |
| 73 | right: 0, |
| 74 | bottom: 5, |
| 75 | left: 0 |
| 76 | } |
| 77 | }, |
| 78 | scales: { |
| 79 | x: { |
| 80 | grid: { |
| 81 | display: false |
| 82 | }, |
| 83 | ticks: { |
| 84 | font: { |
| 85 | lineHeight: 1, |
| 86 | size: 10 |
| 87 | }, |
| 88 | color: '#23282d', |
| 89 | autoSkip: false, |
| 90 | maxRotation: 90, |
| 91 | minRotation: 90 |
| 92 | } |
| 93 | }, |
| 94 | y: { |
| 95 | grid: { |
| 96 | display: false, |
| 97 | drawBorder: false |
| 98 | }, |
| 99 | ticks: { |
| 100 | display: false |
| 101 | } |
| 102 | } |
| 103 | } |
| 104 | } |
| 105 | }, |
| 106 | chart = null, |
| 107 | canRender = !! window.CanvasRenderingContext2D, |
| 108 | element = null, |
| 109 | cvs = null; |
| 110 | |
| 111 | var canRender = function(){ |
| 112 | return canRender; |
| 113 | }; |
| 114 | |
| 115 | // Source: http://stackoverflow.com/a/5624139 |
| 116 | var HexToRGB = function( hex ){ |
| 117 | var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; |
| 118 | |
| 119 | hex = hex.replace(shorthandRegex, function( m, r, g, b ) { |
| 120 | return r + r + g + g + b + b; |
| 121 | }); |
| 122 | |
| 123 | var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); |
| 124 | |
| 125 | return result ? { |
| 126 | r: parseInt( result[1], 16 ), |
| 127 | g: parseInt( result[2], 16 ), |
| 128 | b: parseInt( result[3], 16 ) |
| 129 | } : null; |
| 130 | }; |
| 131 | |
| 132 | /** |
| 133 | * Public functions |
| 134 | */ |
| 135 | |
| 136 | var init = function(container, options){ |
| 137 | if ( ! canRender() ) { |
| 138 | throw new Error('Your browser is too old, WPPChart cannot create its data chart.'); |
| 139 | } |
| 140 | |
| 141 | if ( 'undefined' == typeof container ) { |
| 142 | throw new Error('Please tell WPPChart where to inject the chart.'); |
| 143 | } |
| 144 | |
| 145 | element = document.getElementById(container); |
| 146 | |
| 147 | if ( ! element ) { |
| 148 | throw new Error('WPPChart cannot find ' + container); |
| 149 | } |
| 150 | |
| 151 | if ( 'undefined' == typeof Chart ) { |
| 152 | throw new Error('ChartJS library not found'); |
| 153 | } |
| 154 | |
| 155 | cvs = document.createElement('canvas'); |
| 156 | element.appendChild(cvs); |
| 157 | }; |
| 158 | |
| 159 | var populate = function(data){ |
| 160 | if ( chart ) { |
| 161 | chart.destroy(); |
| 162 | } |
| 163 | |
| 164 | var config = defaults; |
| 165 | |
| 166 | config.data.labels = data.labels; |
| 167 | config.data.datasets[0].label = data.datasets[0].label; |
| 168 | config.data.datasets[0].data = data.datasets[0].data; |
| 169 | config.data.datasets[1].label = data.datasets[1].label; |
| 170 | config.data.datasets[1].data = data.datasets[1].data; |
| 171 | |
| 172 | var colors_arr = wpp_chart_params.colors.slice(-2); |
| 173 | |
| 174 | var rgb_comments = HexToRGB(colors_arr[0]); |
| 175 | config.data.datasets[1].backgroundColor = "rgba(" + rgb_comments.r + ", " + rgb_comments.g + ", " + rgb_comments.b + ", 0.9)"; |
| 176 | config.data.datasets[1].borderColor = colors_arr[0]; |
| 177 | config.data.datasets[1].pointBorderColor = colors_arr[0]; |
| 178 | config.data.datasets[1].pointHoverBackgroundColor = colors_arr[0]; |
| 179 | config.data.datasets[1].pointHoverBorderColor = colors_arr[0]; |
| 180 | |
| 181 | var rgb_views = HexToRGB(colors_arr[1]); |
| 182 | config.data.datasets[0].backgroundColor = "rgba(" + rgb_views.r + ", " + rgb_views.g + ", " + rgb_views.b + ", 0.7)"; |
| 183 | config.data.datasets[0].borderColor = colors_arr[1]; |
| 184 | config.data.datasets[0].pointBorderColor = colors_arr[1]; |
| 185 | config.data.datasets[0].pointHoverBackgroundColor = colors_arr[1]; |
| 186 | config.data.datasets[0].pointHoverBorderColor = colors_arr[1]; |
| 187 | |
| 188 | chart = new Chart(cvs, config); |
| 189 | }; |
| 190 | |
| 191 | /** |
| 192 | * Provide access to public methods |
| 193 | */ |
| 194 | |
| 195 | return { |
| 196 | init: init, |
| 197 | populate: populate, |
| 198 | canRender: canRender |
| 199 | }; |
| 200 | })(); |
| 201 |