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';
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user