| 1 |
/* global console */ |
| 2 |
/* global visualizer */ |
| 3 |
|
| 4 |
(function($) { |
| 5 |
var all_charts; |
| 6 |
// so that we know which charts belong to our library. |
| 7 |
var rendered_charts = []; |
| 8 |
|
| 9 |
// save the settings corresponding to cssClassNames so that when a table is being edited, they stripes etc. don't get reset |
| 10 |
var cssClassNames; |
| 11 |
|
| 12 |
function renderChart(id, v) { |
| 13 |
var chart = all_charts[id]; |
| 14 |
if(chart.library !== 'datatables'){ |
| 15 |
return; |
| 16 |
} |
| 17 |
cssClassNames = null; |
| 18 |
renderSpecificChart(id, chart, v); |
| 19 |
} |
| 20 |
|
| 21 |
function renderSpecificChart(id, chart, v) { |
| 22 |
var render, container, series, data, table, settings, i, j, row, date, axis, property, format, formatter, type, rows, cols; |
| 23 |
|
| 24 |
if(chart.library !== 'datatables'){ |
| 25 |
return; |
| 26 |
} |
| 27 |
rendered_charts[id] = 'yes'; |
| 28 |
|
| 29 |
series = chart.series; |
| 30 |
data = chart.data; |
| 31 |
|
| 32 |
container = document.getElementById(id); |
| 33 |
if (container == null) { |
| 34 |
return; |
| 35 |
} |
| 36 |
|
| 37 |
if($('#' + id).find('table.visualizer-data-table').length > 0){ |
| 38 |
$('#' + id).empty(); |
| 39 |
} |
| 40 |
|
| 41 |
settings = { |
| 42 |
destroy: true, |
| 43 |
paging: false, |
| 44 |
searching: false, |
| 45 |
ordering: true, |
| 46 |
select: false, |
| 47 |
lengthChange: false, |
| 48 |
buttons: { |
| 49 |
buttons: [{ |
| 50 |
extend: 'print', |
| 51 |
text: '', |
| 52 |
title: '' |
| 53 |
}] |
| 54 |
}, |
| 55 |
dom: 'Bfrtip', |
| 56 |
}; |
| 57 |
|
| 58 |
var $classes = 'dataTable visualizer-data-table table table-striped'; |
| 59 |
|
| 60 |
if(typeof v.page_type !== 'undefined'){ |
| 61 |
switch(v.page_type){ |
| 62 |
case 'post': |
| 63 |
// fall-through. |
| 64 |
case 'library': |
| 65 |
// for smaller screens... |
| 66 |
if(window.innerWidth < 1500){ |
| 67 |
delete chart.settings['scrollX']; |
| 68 |
delete chart.settings['scrollY']; |
| 69 |
delete chart.settings['scrollY_int']; |
| 70 |
$.extend( settings, { |
| 71 |
scrollX: 150, |
| 72 |
scrollY: (( chart.settings['responsive_bool'] === 'true' ? 0.8 : 0.5 ) * parseInt($(container).css('height').replace('px',''))), |
| 73 |
scrollCollapse: true |
| 74 |
} ); |
| 75 |
}else{ |
| 76 |
if(parseInt(chart.settings['scrollY_int']) > 180){ |
| 77 |
chart.settings['scrollY_int']; |
| 78 |
} |
| 79 |
delete chart.settings['scrollX']; |
| 80 |
$.extend( settings, { |
| 81 |
scrollX: 150, |
| 82 |
scrollY: 180, |
| 83 |
} ); |
| 84 |
} |
| 85 |
break; |
| 86 |
case 'chart': |
| 87 |
delete chart.settings['scrollX']; // jshint ignore:line |
| 88 |
// fall-through. |
| 89 |
case 'frontend': |
| 90 |
// empty. |
| 91 |
break; |
| 92 |
} |
| 93 |
} |
| 94 |
|
| 95 |
if(typeof chart.settings['scrollX'] !== 'undefined'){ |
| 96 |
if(chart.settings['scrollX'] == 'true'){ // jshint ignore:line |
| 97 |
$classes = $classes + ' nowrap'; |
| 98 |
} |
| 99 |
} |
| 100 |
|
| 101 |
$('#' + id).append($('<table class="' + $classes + '"></table>')); |
| 102 |
|
| 103 |
var select = { |
| 104 |
info: false |
| 105 |
}; |
| 106 |
// we cannot use { select } below because https://github.com/Codeinwp/visualizer/issues/357 |
| 107 |
$.extend( settings, { info: false } ); // jshint ignore:line |
| 108 |
|
| 109 |
var stripe = ['', '']; |
| 110 |
|
| 111 |
if(cssClassNames !== null){ |
| 112 |
chart.settings['cssClassNames'] = cssClassNames; |
| 113 |
} |
| 114 |
|
| 115 |
// in preview mode, cssClassNames will not exist when a color is changed. |
| 116 |
if(typeof chart.settings['cssClassNames'] !== 'undefined'){ |
| 117 |
cssClassNames = chart.settings['cssClassNames']; |
| 118 |
if(typeof chart.settings['cssClassNames']['oddTableRow'] !== 'undefined'){ |
| 119 |
stripe[0] = chart.settings['cssClassNames']['oddTableRow']; |
| 120 |
} |
| 121 |
|
| 122 |
if(typeof chart.settings['cssClassNames']['evenTableRow'] !== 'undefined'){ |
| 123 |
stripe[1] = chart.settings['cssClassNames']['evenTableRow']; |
| 124 |
} |
| 125 |
|
| 126 |
if(typeof chart.settings['cssClassNames']['selectedTableItem'] !== 'undefined'){ |
| 127 |
$.extend( select, { |
| 128 |
className: chart.settings['cssClassNames']['selectedTableItem'] |
| 129 |
} ); |
| 130 |
} |
| 131 |
} |
| 132 |
|
| 133 |
// remove this so that the eval does not fail. |
| 134 |
delete chart.settings['internal_title']; |
| 135 |
|
| 136 |
var additional = []; |
| 137 |
for (i in chart.settings) { |
| 138 |
var valoo = chart.settings[i]; |
| 139 |
|
| 140 |
// remove the type suffix to get the name of the setting. |
| 141 |
i = i.replace(/_bool/g, '').replace(/_int/g, ''); |
| 142 |
|
| 143 |
switch(valoo){ |
| 144 |
case 'true': |
| 145 |
valoo = true; |
| 146 |
break; |
| 147 |
case 'false': |
| 148 |
valoo = false; |
| 149 |
break; |
| 150 |
default: |
| 151 |
if(parseInt(valoo) > 0){ |
| 152 |
valoo = parseInt(valoo); |
| 153 |
} |
| 154 |
if(i === 'pageLength' && (valoo === '' || parseInt(valoo) < 0)){ |
| 155 |
valoo = 1; |
| 156 |
} |
| 157 |
} |
| 158 |
|
| 159 |
// if the setting name has an '_' this means it is a sub-setting e.g. select_items means { select: { items: ... } }. |
| 160 |
var array = i.split('_'); |
| 161 |
if(array.length === 2){ |
| 162 |
i = eval( array[0] ); // jshint ignore:line |
| 163 |
i[ array[1] ] = valoo; |
| 164 |
additional[ array[0] ] = i; |
| 165 |
if(array[0] === 'select' && array[1] === 'info' ){ |
| 166 |
// enable main info or the selection info will not show. |
| 167 |
$.extend( settings, {info: true} ); |
| 168 |
} |
| 169 |
} else { |
| 170 |
settings[i] = valoo; |
| 171 |
} |
| 172 |
} |
| 173 |
$.extend( settings, additional ); |
| 174 |
|
| 175 |
cols = []; |
| 176 |
for (j = 0; j < series.length; j++) { |
| 177 |
type = series[j].type; |
| 178 |
switch(type){ |
| 179 |
case 'number': |
| 180 |
type = 'num'; |
| 181 |
break; |
| 182 |
case 'date': |
| 183 |
case 'datetime': |
| 184 |
case 'timeofday': |
| 185 |
type = 'date'; |
| 186 |
break; |
| 187 |
} |
| 188 |
|
| 189 |
render = addRenderer(series[j].type, settings.series, j); |
| 190 |
|
| 191 |
var col = { title: series[j].label, data: series[j].label, type: type, render: render }; |
| 192 |
if(typeof chart.settings['cssClassNames'] !== 'undefined' && typeof chart.settings['cssClassNames']['tableCell'] !== 'undefined'){ |
| 193 |
col['className'] = chart.settings['cssClassNames']['tableCell']; |
| 194 |
} |
| 195 |
cols.push(col); |
| 196 |
} |
| 197 |
|
| 198 |
rows = []; |
| 199 |
for (i = 0; i < data.length; i++) { |
| 200 |
row = []; |
| 201 |
for (j = 0; j < series.length; j++) { |
| 202 |
var datum = data[i][j]; |
| 203 |
// datum could be undefined for dynamic data (e.g. through json). |
| 204 |
if(typeof datum === 'undefined'){ |
| 205 |
datum = data[i][series[j].label]; |
| 206 |
} |
| 207 |
row[ series[j].label ] = datum; |
| 208 |
} |
| 209 |
rows.push(row); |
| 210 |
} |
| 211 |
|
| 212 |
$.extend( settings, { |
| 213 |
data: rows, |
| 214 |
columns: cols, |
| 215 |
stripeClasses: stripe, |
| 216 |
} ); |
| 217 |
|
| 218 |
// allow user to extend the settings. |
| 219 |
$('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings}); |
| 220 |
|
| 221 |
table = $('#' + id + ' table.visualizer-data-table'); |
| 222 |
table.DataTable( settings ); |
| 223 |
|
| 224 |
// header row is handled here as the class is added dynamically to it (after the table is rendered). |
| 225 |
if(typeof chart.settings['cssClassNames'] !== 'undefined'){ |
| 226 |
if(typeof chart.settings['cssClassNames']['headerRow'] !== 'undefined'){ |
| 227 |
$('#' + id + ' table thead tr').addClass( chart.settings['cssClassNames']['headerRow'] ); |
| 228 |
} |
| 229 |
} |
| 230 |
|
| 231 |
$('.loader').remove(); |
| 232 |
} |
| 233 |
|
| 234 |
function addRenderer(type, series, index){ |
| 235 |
var render = null; |
| 236 |
if(typeof series === 'undefined' || typeof series[index] === 'undefined' || typeof series[index].format === 'undefined' ){ |
| 237 |
return render; |
| 238 |
} |
| 239 |
|
| 240 |
series = series[index]; |
| 241 |
|
| 242 |
/* jshint ignore:start */ |
| 243 |
switch(type){ |
| 244 |
case 'number': |
| 245 |
var parts = ['', '', '', '', '']; |
| 246 |
if(typeof series.format.thousands !== ''){ |
| 247 |
parts[0] = series.format.thousands; |
| 248 |
} |
| 249 |
if(typeof series.format.decimal !== ''){ |
| 250 |
parts[1] = series.format.decimal; |
| 251 |
} |
| 252 |
if(typeof series.format.precision !== ''){ |
| 253 |
parts[2] = series.format.precision; |
| 254 |
} |
| 255 |
if(typeof series.format.prefix !== ''){ |
| 256 |
parts[3] = series.format.prefix; |
| 257 |
} |
| 258 |
if(typeof series.format.suffix !== ''){ |
| 259 |
parts[4] = series.format.suffix; |
| 260 |
} |
| 261 |
render = $.fn.dataTable.render.number(parts[0], parts[1], parts[2], parts[3], parts[4]); |
| 262 |
break; |
| 263 |
case 'date': |
| 264 |
case 'datetime': |
| 265 |
case 'timeofday': |
| 266 |
if(typeof series.format.to !== 'undefined' && typeof series.format.from !== 'undefined' && series.format.from != '' && series.format.to !== ''){ |
| 267 |
render = $.fn.dataTable.render.moment(series.format.from, series.format.to); |
| 268 |
} |
| 269 |
break; |
| 270 |
} |
| 271 |
/* jshint ignore:end */ |
| 272 |
return render; |
| 273 |
} |
| 274 |
|
| 275 |
function render(v) { |
| 276 |
for (var id in (all_charts || {})) { |
| 277 |
renderChart(id, v); |
| 278 |
} |
| 279 |
} |
| 280 |
|
| 281 |
$('body').on('visualizer:render:chart:start', function(event, v){ |
| 282 |
all_charts = v.charts; |
| 283 |
render(v); |
| 284 |
}); |
| 285 |
|
| 286 |
$('body').on('visualizer:render:specificchart:start', function(event, v){ |
| 287 |
renderSpecificChart(v.id, v.chart, v.v); |
| 288 |
}); |
| 289 |
|
| 290 |
$('body').on('visualizer:render:currentchart:update', function(event, v){ |
| 291 |
var data = v || event.detail; |
| 292 |
renderSpecificChart('canvas', all_charts['canvas'], data.visualizer); |
| 293 |
}); |
| 294 |
|
| 295 |
// front end actions |
| 296 |
$('body').on('visualizer:action:specificchart', function(event, v){ |
| 297 |
switch(v.action){ |
| 298 |
case 'print': |
| 299 |
var id = v.id; |
| 300 |
if(typeof rendered_charts[id] === 'undefined'){ |
| 301 |
return; |
| 302 |
} |
| 303 |
$('#' + id + ' .buttons-print').trigger('click'); |
| 304 |
break; |
| 305 |
} |
| 306 |
}); |
| 307 |
|
| 308 |
})(jQuery); |
| 309 |
|
| 310 |
|
| 311 |
/* jshint ignore:start */ |
| 312 |
|
| 313 |
/** |
| 314 |
* Date / time formats often from back from server APIs in a format that you |
| 315 |
* don't wish to display to your end users (ISO8601 for example). This rendering |
| 316 |
* helper can be used to transform any source date / time format into something |
| 317 |
* which can be easily understood by your users when reading the table, and also |
| 318 |
* by DataTables for sorting the table. |
| 319 |
* |
| 320 |
* The [MomentJS library](http://momentjs.com/) is used to accomplish this and |
| 321 |
* you simply need to tell it which format to transfer from, to and specify a |
| 322 |
* locale if required. |
| 323 |
* |
| 324 |
* This function should be used with the `dt-init columns.render` configuration |
| 325 |
* option of DataTables. |
| 326 |
* |
| 327 |
* It accepts one, two or three parameters: |
| 328 |
* |
| 329 |
* $.fn.dataTable.render.moment( to ); |
| 330 |
* $.fn.dataTable.render.moment( from, to ); |
| 331 |
* $.fn.dataTable.render.moment( from, to, locale ); |
| 332 |
* |
| 333 |
* Where: |
| 334 |
* |
| 335 |
* * `to` - the format that will be displayed to the end user |
| 336 |
* * `from` - the format that is supplied in the data (the default is ISO8601 - |
| 337 |
* `YYYY-MM-DD`) |
| 338 |
* * `locale` - the locale which MomentJS should use - the default is `en` |
| 339 |
* (English). |
| 340 |
* |
| 341 |
* @name datetime |
| 342 |
* @summary Convert date / time source data into one suitable for display |
| 343 |
* @author [Allan Jardine](http://datatables.net) |
| 344 |
* @requires DataTables 1.10+ |
| 345 |
* |
| 346 |
* @example |
| 347 |
* // Convert ISO8601 dates into a simple human readable format |
| 348 |
* $('#example').DataTable( { |
| 349 |
* columnDefs: [ { |
| 350 |
* targets: 1, |
| 351 |
* render: $.fn.dataTable.render.moment( 'Do MMM YYYYY' ) |
| 352 |
* } ] |
| 353 |
* } ); |
| 354 |
* |
| 355 |
* @example |
| 356 |
* // Specify a source format - in this case a unix timestamp |
| 357 |
* $('#example').DataTable( { |
| 358 |
* columnDefs: [ { |
| 359 |
* targets: 2, |
| 360 |
* render: $.fn.dataTable.render.moment( 'X', 'Do MMM YY' ) |
| 361 |
* } ] |
| 362 |
* } ); |
| 363 |
* |
| 364 |
* @example |
| 365 |
* // Specify a source format and locale |
| 366 |
* $('#example').DataTable( { |
| 367 |
* columnDefs: [ { |
| 368 |
* targets: 2, |
| 369 |
* render: $.fn.dataTable.render.moment( 'YYYY/MM/DD', 'Do MMM YY', 'fr' ) |
| 370 |
* } ] |
| 371 |
* } ); |
| 372 |
*/ |
| 373 |
(function( factory ) { |
| 374 |
"use strict"; |
| 375 |
|
| 376 |
if ( typeof define === 'function' && define.amd ) { |
| 377 |
// AMD |
| 378 |
define( ['jquery'], function ( $ ) { |
| 379 |
return factory( $, window, document ); |
| 380 |
} ); |
| 381 |
} |
| 382 |
else if ( typeof exports === 'object' ) { |
| 383 |
// CommonJS |
| 384 |
module.exports = function (root, $) { |
| 385 |
if ( ! root ) { |
| 386 |
root = window; |
| 387 |
} |
| 388 |
|
| 389 |
if ( ! $ ) { |
| 390 |
$ = typeof window !== 'undefined' ? |
| 391 |
require('jquery') : |
| 392 |
require('jquery')( root ); |
| 393 |
} |
| 394 |
|
| 395 |
return factory( $, root, root.document ); |
| 396 |
}; |
| 397 |
} |
| 398 |
else { |
| 399 |
// Browser |
| 400 |
factory( jQuery, window, document ); |
| 401 |
} |
| 402 |
} |
| 403 |
(function( $, window, document ) { |
| 404 |
|
| 405 |
|
| 406 |
$.fn.dataTable.render.moment = function ( from, to, locale ) { |
| 407 |
// Argument shifting |
| 408 |
if ( arguments.length === 1 ) { |
| 409 |
locale = 'en'; |
| 410 |
to = from; |
| 411 |
from = 'YYYY-MM-DD'; |
| 412 |
} |
| 413 |
else if ( arguments.length === 2 ) { |
| 414 |
locale = 'en'; |
| 415 |
} |
| 416 |
|
| 417 |
return function ( d, type, row ) { |
| 418 |
if (!d) return null; |
| 419 |
var m = window.moment( d, from, locale, true ); |
| 420 |
|
| 421 |
// Order and type get a number value from Moment, everything else |
| 422 |
// sees the rendered value |
| 423 |
return m.format( type === 'sort' || type === 'type' ? 'x' : to ); |
| 424 |
}; |
| 425 |
}; |
| 426 |
|
| 427 |
|
| 428 |
})); |
| 429 |
|
| 430 |
/* jshint ignore:end */ |
