vendor
6 years ago
admin.js
6 years ago
chart.js
6 years ago
wpp.js
6 years ago
wpp.min.js
6 years ago
chart.js
192 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: 5, |
| 74 | bottom: 0, |
| 75 | left: 5 |
| 76 | } |
| 77 | }, |
| 78 | scales: { |
| 79 | xAxes: [{ |
| 80 | display: true, |
| 81 | gridLines: { |
| 82 | display: false, |
| 83 | }, |
| 84 | ticks: { |
| 85 | fontSize: 10, |
| 86 | fontColor: '#23282d', |
| 87 | autoSkip: false, |
| 88 | maxRotation: 90, |
| 89 | minRotation: 90 |
| 90 | } |
| 91 | }], |
| 92 | yAxes: [{ |
| 93 | display: false |
| 94 | }] |
| 95 | } |
| 96 | } |
| 97 | }, |
| 98 | chart = null, |
| 99 | canRender = !! window.CanvasRenderingContext2D, |
| 100 | element = null, |
| 101 | cvs = null; |
| 102 | |
| 103 | var canRender = function(){ |
| 104 | return canRender; |
| 105 | }; |
| 106 | |
| 107 | // Source: http://stackoverflow.com/a/5624139 |
| 108 | var HexToRGB = function( hex ){ |
| 109 | var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; |
| 110 | |
| 111 | hex = hex.replace(shorthandRegex, function( m, r, g, b ) { |
| 112 | return r + r + g + g + b + b; |
| 113 | }); |
| 114 | |
| 115 | var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); |
| 116 | |
| 117 | return result ? { |
| 118 | r: parseInt( result[1], 16 ), |
| 119 | g: parseInt( result[2], 16 ), |
| 120 | b: parseInt( result[3], 16 ) |
| 121 | } : null; |
| 122 | }; |
| 123 | |
| 124 | /** |
| 125 | * Public functions |
| 126 | */ |
| 127 | |
| 128 | var init = function(container, options){ |
| 129 | if ( ! canRender() ) { |
| 130 | throw new Error('Your browser is too old, WPPChart cannot create its data chart.'); |
| 131 | } |
| 132 | |
| 133 | if ( 'undefined' == typeof container ) { |
| 134 | throw new Error('Please tell WPPChart where to inject the chart.'); |
| 135 | } |
| 136 | |
| 137 | element = document.getElementById(container); |
| 138 | |
| 139 | if ( ! element ) { |
| 140 | throw new Error('WPPChart cannot find ' + container); |
| 141 | } |
| 142 | |
| 143 | if ( 'undefined' == typeof Chart ) { |
| 144 | throw new Error('ChartJS library not found'); |
| 145 | } |
| 146 | |
| 147 | cvs = document.createElement('canvas'); |
| 148 | element.appendChild(cvs); |
| 149 | }; |
| 150 | |
| 151 | var populate = function(data){ |
| 152 | if ( chart ) { |
| 153 | chart.destroy(); |
| 154 | } |
| 155 | |
| 156 | var config = defaults; |
| 157 | |
| 158 | config.data.labels = data.labels; |
| 159 | config.data.datasets[0].label = data.datasets[0].label; |
| 160 | config.data.datasets[0].data = data.datasets[0].data; |
| 161 | config.data.datasets[1].label = data.datasets[1].label; |
| 162 | config.data.datasets[1].data = data.datasets[1].data; |
| 163 | |
| 164 | |
| 165 | var rgb_comments = HexToRGB(wpp_chart_params.colors[2]); |
| 166 | config.data.datasets[1].backgroundColor = "rgba(" + rgb_comments.r + ", " + rgb_comments.g + ", " + rgb_comments.b + ", 0.9)"; |
| 167 | config.data.datasets[1].borderColor = wpp_chart_params.colors[2]; |
| 168 | config.data.datasets[1].pointBorderColor = wpp_chart_params.colors[2]; |
| 169 | config.data.datasets[1].pointHoverBackgroundColor = wpp_chart_params.colors[2]; |
| 170 | config.data.datasets[1].pointHoverBorderColor = wpp_chart_params.colors[2]; |
| 171 | |
| 172 | var rgb_views = HexToRGB(wpp_chart_params.colors[3]); |
| 173 | config.data.datasets[0].backgroundColor = "rgba(" + rgb_views.r + ", " + rgb_views.g + ", " + rgb_views.b + ", 0.7)"; |
| 174 | config.data.datasets[0].borderColor = wpp_chart_params.colors[3]; |
| 175 | config.data.datasets[0].pointBorderColor = wpp_chart_params.colors[3]; |
| 176 | config.data.datasets[0].pointHoverBackgroundColor = wpp_chart_params.colors[3]; |
| 177 | config.data.datasets[0].pointHoverBorderColor = wpp_chart_params.colors[3]; |
| 178 | |
| 179 | chart = new Chart(cvs, config); |
| 180 | }; |
| 181 | |
| 182 | /** |
| 183 | * Provide access to public methods |
| 184 | */ |
| 185 | |
| 186 | return { |
| 187 | init: init, |
| 188 | populate: populate, |
| 189 | canRender: canRender |
| 190 | }; |
| 191 | })(); |
| 192 |