installed plugin Easy Digital Downloads version 3.1.0.3
This commit is contained in:
Gitium
@ -0,0 +1,31 @@
|
||||
/* global eddAdminReportsCharts */
|
||||
|
||||
/**
|
||||
* Internal dependencies.
|
||||
*/
|
||||
import moment from 'moment';
|
||||
import { render as lineChartRender } from './line.js';
|
||||
import { render as pieChartRender } from './pie.js';
|
||||
import { isPieChart } from './utils.js';
|
||||
|
||||
// Access existing global `edd` variable, or create a new object.
|
||||
window.edd = window.edd || {};
|
||||
|
||||
/**
|
||||
* Render a chart based on config.
|
||||
*
|
||||
* This function is attached to the `edd` property attached to the `window`.
|
||||
*
|
||||
* @param {Object} config Chart config.
|
||||
*/
|
||||
window.edd.renderChart = ( config ) => {
|
||||
const isPie = isPieChart( config );
|
||||
|
||||
Chart.defaults.global.pointHitDetectionRadius = 5;
|
||||
|
||||
if ( isPieChart( config ) ) {
|
||||
pieChartRender( config );
|
||||
} else {
|
||||
lineChartRender( config );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,94 @@
|
||||
/* global Chart */
|
||||
|
||||
/**
|
||||
* Internal dependencies.
|
||||
*/
|
||||
import { NumberFormat } from '@easy-digital-downloads/currency';
|
||||
import moment, { utc } from 'moment';
|
||||
import momentTimezone from 'moment-timezone';
|
||||
import { getLabelWithTypeCondition, toolTipBaseConfig } from './utils';
|
||||
|
||||
/**
|
||||
* Render a line chart.
|
||||
*
|
||||
* @param {Object} config Global chart config.
|
||||
* @return {Chart}
|
||||
*/
|
||||
export const render = ( config ) => {
|
||||
const { target } = config;
|
||||
const {
|
||||
dates: {
|
||||
utc_offset: utcOffset,
|
||||
hour_by_hour: hourByHour,
|
||||
day_by_day: dayByDay,
|
||||
},
|
||||
} = config;
|
||||
const number = new NumberFormat();
|
||||
|
||||
const lineConfig = {
|
||||
...config,
|
||||
options: {
|
||||
...config.options,
|
||||
maintainAspectRatio: false,
|
||||
tooltips: tooltipConfig( config ),
|
||||
scales: {
|
||||
...config.options.scales,
|
||||
yAxes: [
|
||||
{
|
||||
...config.options.scales.yAxes[0],
|
||||
ticks: {
|
||||
callback: ( value, index, values ) => {
|
||||
return number.format( value );
|
||||
},
|
||||
suggestedMin: 0,
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
...config.options.scales.xAxes[0],
|
||||
ticks: {
|
||||
...config.options.scales.xAxes[0].ticks,
|
||||
maxTicksLimit:12,
|
||||
autoSkip: true,
|
||||
callback( value, index, ticks ) {
|
||||
return moment.tz( ticks[index].value, config.dates.timezone ).format( config.dates.time_format );
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Render
|
||||
return new Chart( document.getElementById( target ), lineConfig );
|
||||
};
|
||||
|
||||
/**
|
||||
* Get custom tooltip config for line charts.
|
||||
*
|
||||
* @param {Object} config Global chart config.
|
||||
* @return {Object}
|
||||
*/
|
||||
export const tooltipConfig = ( config ) => ( {
|
||||
...toolTipBaseConfig,
|
||||
|
||||
callbacks: {
|
||||
/**
|
||||
* Generate a label.
|
||||
*
|
||||
* @param {Object} t
|
||||
* @param {Object} d
|
||||
*/
|
||||
label: function( t, d ) {
|
||||
const { options: { datasets } } = config;
|
||||
|
||||
const datasetConfig = datasets[ Object.keys( datasets )[ t.datasetIndex ] ];
|
||||
const label = getLabelWithTypeCondition( t.yLabel, datasetConfig );
|
||||
|
||||
return `${ d.datasets[ t.datasetIndex ].label }: ${ label }`;
|
||||
},
|
||||
},
|
||||
} );
|
||||
@ -0,0 +1,56 @@
|
||||
/* global Chart */
|
||||
|
||||
/**
|
||||
* Internal dependencies.
|
||||
*/
|
||||
import { toolTipBaseConfig, getLabelWithTypeCondition } from './utils';
|
||||
|
||||
/**
|
||||
* Render a line chart.
|
||||
*
|
||||
* @param {Object} config Global chart config.
|
||||
* @return {Chart}
|
||||
*/
|
||||
export const render = ( config ) => {
|
||||
const { target } = config;
|
||||
|
||||
// Config tooltips.
|
||||
config.options.tooltips = tooltipConfig( config );
|
||||
|
||||
// Render
|
||||
return new Chart( document.getElementById( target ), config );
|
||||
};
|
||||
|
||||
/**
|
||||
* Get custom tooltip config for pie charts.
|
||||
*
|
||||
* @param {Object} config Global chart config.
|
||||
* @return {Object}
|
||||
*/
|
||||
export const tooltipConfig = ( config ) => ( {
|
||||
...toolTipBaseConfig,
|
||||
|
||||
callbacks: {
|
||||
/**
|
||||
* Generate a label.
|
||||
*
|
||||
* @param {Object} t
|
||||
* @param {Object} d
|
||||
*/
|
||||
label: function( t, d ) {
|
||||
const { options: { datasets } } = config;
|
||||
const datasetConfig = datasets[ Object.keys( datasets )[ t.datasetIndex ] ];
|
||||
const dataset = d.datasets[ t.datasetIndex ];
|
||||
|
||||
const total = dataset.data.reduce( function( previousValue, currentValue, currentIndex, array ) {
|
||||
return previousValue + currentValue;
|
||||
} );
|
||||
|
||||
const currentValue = dataset.data[ t.index ];
|
||||
const label = getLabelWithTypeCondition( currentValue, datasetConfig );
|
||||
const precentage = Math.floor( ( ( currentValue / total ) * 100 ) + 0.5 );
|
||||
|
||||
return `${ d.labels[ t.index ] }: ${ label } (${ precentage }%)`;
|
||||
},
|
||||
},
|
||||
} );
|
||||
@ -0,0 +1,134 @@
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Currency } from '@easy-digital-downloads/currency';
|
||||
|
||||
/**
|
||||
* Determine if a pie graph.
|
||||
*
|
||||
* @todo maybe pass from data?
|
||||
*
|
||||
* @param {Object} config Global chart config.
|
||||
* @return {Bool}
|
||||
*/
|
||||
export const isPieChart = ( config ) => {
|
||||
const { type } = config;
|
||||
|
||||
return type === 'pie' || type === 'doughnut';
|
||||
};
|
||||
|
||||
/**
|
||||
* Determine if a chart's dataset has a special conditional type.
|
||||
*
|
||||
* Currently just checks for currency.
|
||||
*
|
||||
* @param {string} label Current label.
|
||||
* @param {Object} config Global chart config.
|
||||
*/
|
||||
export const getLabelWithTypeCondition = ( label, datasetConfig ) => {
|
||||
let newLabel = label;
|
||||
const { type } = datasetConfig;
|
||||
|
||||
if ( 'currency' === type ) {
|
||||
const currency = new Currency();
|
||||
|
||||
newLabel = currency.format( label, false );
|
||||
}
|
||||
|
||||
return newLabel;
|
||||
};
|
||||
|
||||
/**
|
||||
* Shared tooltip configuration.
|
||||
*/
|
||||
export const toolTipBaseConfig = {
|
||||
enabled: false,
|
||||
mode: 'index',
|
||||
position: 'nearest',
|
||||
|
||||
/**
|
||||
* Output a a custom tooltip.
|
||||
*
|
||||
* @param {Object} tooltip Tooltip data.
|
||||
*/
|
||||
custom: function( tooltip ) {
|
||||
// Tooltip element.
|
||||
let tooltipEl = document.getElementById( 'edd-chartjs-tooltip' );
|
||||
|
||||
if ( ! tooltipEl ) {
|
||||
tooltipEl = document.createElement( 'div' );
|
||||
tooltipEl.id = 'edd-chartjs-tooltip';
|
||||
tooltipEl.innerHTML = '<table></table>';
|
||||
|
||||
this._chart.canvas.parentNode.appendChild( tooltipEl );
|
||||
}
|
||||
|
||||
// Hide if no tooltip.
|
||||
if ( tooltip.opacity === 0 ) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// Set caret position.
|
||||
tooltipEl.classList.remove( 'above', 'below', 'no-transform' );
|
||||
|
||||
if ( tooltip.yAlign ) {
|
||||
tooltipEl.classList.add( tooltip.yAlign );
|
||||
} else {
|
||||
tooltipEl.classList.add( 'no-transform' );
|
||||
}
|
||||
|
||||
function getBody( bodyItem ) {
|
||||
return bodyItem.lines;
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if ( tooltip.body ) {
|
||||
const titleLines = tooltip.title || [];
|
||||
const bodyLines = tooltip.body.map( getBody );
|
||||
|
||||
let innerHtml = '<thead>';
|
||||
|
||||
innerHtml += '</thead><tbody>';
|
||||
|
||||
bodyLines.forEach( function( body, i ) {
|
||||
const colors = tooltip.labelColors[ i ];
|
||||
const { borderColor, backgroundColor } = colors;
|
||||
|
||||
// Super dirty check to use the legend's color.
|
||||
let fill = borderColor;
|
||||
|
||||
if ( fill === 'rgb(230, 230, 230)' || fill === '#fff' ) {
|
||||
fill = backgroundColor;
|
||||
}
|
||||
|
||||
const style = [
|
||||
`background: ${ fill }`,
|
||||
`border-color: ${ fill }`,
|
||||
'border-width: 2px',
|
||||
];
|
||||
|
||||
const span = '<span class="edd-chartjs-tooltip-key" style="' + style.join( ';' ) + '"></span>';
|
||||
|
||||
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
||||
} );
|
||||
|
||||
innerHtml += '</tbody>';
|
||||
|
||||
const tableRoot = tooltipEl.querySelector( 'table' );
|
||||
tableRoot.innerHTML = innerHtml;
|
||||
}
|
||||
|
||||
const positionY = this._chart.canvas.offsetTop;
|
||||
const positionX = this._chart.canvas.offsetLeft;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
||||
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
||||
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
|
||||
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
|
||||
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
|
||||
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,26 @@
|
||||
|
||||
export var eddLabelFormatter = function( label, series ) {
|
||||
return '<div style="font-size:12px; text-align:center; padding:2px">' + label + '</div>';
|
||||
};
|
||||
|
||||
export var eddLegendFormatterSales = function( label, series ) {
|
||||
const slug = label.toLowerCase().replace( /\s/g, '-' ),
|
||||
color = '<div class="edd-legend-color" style="background-color: ' + series.color + '"></div>',
|
||||
value = '<div class="edd-pie-legend-item">' + label + ': ' + Math.round( series.percent ) + '% (' + eddFormatNumber( series.data[ 0 ][ 1 ] ) + ')</div>',
|
||||
item = '<div id="' + series.edd_vars.id + slug + '" class="edd-legend-item-wrapper">' + color + value + '</div>';
|
||||
|
||||
jQuery( '#edd-pie-legend-' + series.edd_vars.id ).append( item );
|
||||
|
||||
return item;
|
||||
};
|
||||
|
||||
export var eddLegendFormatterEarnings = function( label, series ) {
|
||||
const slug = label.toLowerCase().replace( /\s/g, '-' ),
|
||||
color = '<div class="edd-legend-color" style="background-color: ' + series.color + '"></div>',
|
||||
value = '<div class="edd-pie-legend-item">' + label + ': ' + Math.round( series.percent ) + '% (' + eddFormatCurrency( series.data[ 0 ][ 1 ] ) + ')</div>',
|
||||
item = '<div id="' + series.edd_vars.id + slug + '" class="edd-legend-item-wrapper">' + color + value + '</div>';
|
||||
|
||||
jQuery( '#edd-pie-legend-' + series.edd_vars.id ).append( item );
|
||||
|
||||
return item;
|
||||
};
|
||||
@ -0,0 +1,85 @@
|
||||
/* global pagenow, postboxes */
|
||||
|
||||
/**
|
||||
* Internal dependencies.
|
||||
*/
|
||||
import { eddLabelFormatter, eddLegendFormatterSales, eddLegendFormatterEarnings } from './formatting.js';
|
||||
import './charts';
|
||||
|
||||
// Enable reports meta box toggle states.
|
||||
if ( typeof postboxes !== 'undefined' && /edd-reports/.test( pagenow ) ) {
|
||||
postboxes.add_postbox_toggles( pagenow );
|
||||
}
|
||||
|
||||
/**
|
||||
* Reports / Exports screen JS
|
||||
*/
|
||||
const EDD_Reports = {
|
||||
|
||||
init: function() {
|
||||
this.meta_boxes();
|
||||
this.date_options();
|
||||
this.customers_export();
|
||||
},
|
||||
|
||||
meta_boxes: function() {
|
||||
$( '.edd-reports-wrapper .postbox .handlediv' ).remove();
|
||||
$( '.edd-reports-wrapper .postbox' ).removeClass( 'closed' );
|
||||
|
||||
// Use a timeout to ensure this happens after core binding
|
||||
setTimeout( function() {
|
||||
$( '.edd-reports-wrapper .postbox .hndle' ).unbind( 'click.postboxes' );
|
||||
}, 1 );
|
||||
},
|
||||
|
||||
date_options: function() {
|
||||
// Show hide extended date options
|
||||
$( 'select.edd-graphs-date-options' ).on( 'change', function( event ) {
|
||||
const select = $( this ),
|
||||
date_range_options = select.parent().siblings( '.edd-date-range-options' );
|
||||
|
||||
if ( 'other' === select.val() ) {
|
||||
date_range_options.removeClass( 'screen-reader-text' );
|
||||
} else {
|
||||
date_range_options.addClass( 'screen-reader-text' );
|
||||
}
|
||||
} );
|
||||
},
|
||||
|
||||
customers_export: function() {
|
||||
// Show / hide Download option when exporting customers
|
||||
$( '#edd_customer_export_download' ).change( function() {
|
||||
const $this = $( this ),
|
||||
download_id = $( 'option:selected', $this ).val(),
|
||||
customer_export_option = $( '#edd_customer_export_option' );
|
||||
|
||||
if ( '0' === $this.val() ) {
|
||||
customer_export_option.show();
|
||||
} else {
|
||||
customer_export_option.hide();
|
||||
}
|
||||
|
||||
// On Download Select, Check if Variable Prices Exist
|
||||
if ( parseInt( download_id ) !== 0 ) {
|
||||
const data = {
|
||||
action: 'edd_check_for_download_price_variations',
|
||||
download_id: download_id,
|
||||
all_prices: true,
|
||||
};
|
||||
|
||||
var price_options_select = $( '.edd_price_options_select' );
|
||||
|
||||
$.post( ajaxurl, data, function( response ) {
|
||||
price_options_select.remove();
|
||||
$( '#edd_customer_export_download_chosen' ).after( response );
|
||||
} );
|
||||
} else {
|
||||
price_options_select.remove();
|
||||
}
|
||||
} );
|
||||
},
|
||||
};
|
||||
|
||||
jQuery( document ).ready( function( $ ) {
|
||||
EDD_Reports.init();
|
||||
} );
|
||||
Reference in New Issue
Block a user