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