You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
325 lines
13 KiB
325 lines
13 KiB
var defaultSettings;
|
|
|
|
function showControls(pivotTableID,id)
|
|
{
|
|
//saving default config
|
|
//checking if default settings are not saved
|
|
defaultSettings=saveCurrentConfig(pivotTableID);
|
|
|
|
var hiddenControls=new Array(".pvtVals",".pvtAxisContainer",".pvtUnused",".pvtRenderer",".pvtAxisContainer");
|
|
|
|
for(i=0;i<hiddenControls.length;i++) {
|
|
$(pivotTableID+' '+hiddenControls[i]).fadeIn('slow');
|
|
}
|
|
|
|
//display restore and save button
|
|
$(pivotTableID+"_opControls").fadeIn();
|
|
//hide edit button
|
|
$("#pivotControls_"+id).fadeOut();
|
|
}
|
|
|
|
|
|
|
|
|
|
function createEditBtn(pivotTableID){
|
|
|
|
var pivotTable="#output_"+pivotTableID;
|
|
var edit_btn_div="#pivotControls_"+pivotTableID;
|
|
var edit_btn="#pivotEditBtn_"+pivotTableID;
|
|
|
|
$("#container_"+pivotTableID).hover(function () {
|
|
if(!$(pivotTable+"_opControls").is(":visible"))
|
|
{
|
|
var bleft = Math.round($(pivotTable+" .pvtUi").width()-$(edit_btn_div).width()+10);
|
|
var btop = Math.round($(pivotTable).offset().top - $(pivotTable).offsetParent().offset().top + $(pivotTable+" .pvtUi").height()-5);
|
|
|
|
//checking if not in edit mode then show edit button
|
|
$(edit_btn_div).css({top: btop, left: bleft, position:'absolute'});
|
|
$(edit_btn_div).show();
|
|
}
|
|
}, function(){ //mouseleave
|
|
$(edit_btn_div).hide();
|
|
});
|
|
|
|
}
|
|
|
|
//function to save current configuration for restore button
|
|
|
|
function saveCurrentConfig(pivotTableID){
|
|
|
|
var config = $(pivotTableID).data("pivotUIOptions");
|
|
var config_copy = JSON.parse(JSON.stringify(config));
|
|
//delete some bulky default values
|
|
delete config_copy["aggregators"];
|
|
delete config_copy["renderers"];
|
|
delete config_copy["localeStrings"];
|
|
return JSON.stringify(config_copy, undefined, 2);
|
|
|
|
}
|
|
|
|
function saveConfig(pivotTableID,page,index,dataSource,fieldsArr){
|
|
var config = $(pivotTableID).data("pivotUIOptions");
|
|
var config_copy = JSON.parse(JSON.stringify(config));
|
|
|
|
//formatting data
|
|
var rows=(config_copy['rows']).toString().split(',');
|
|
var cols=(config_copy['cols']).toString().split(',');
|
|
var vals=(config_copy['vals']).toString().split(',');
|
|
|
|
//mapping data from title to param name
|
|
rows = $.map(rows, function(name) {
|
|
return fieldsArr[name] || name;
|
|
}).join(':');
|
|
cols = $.map(cols, function(name) {
|
|
return fieldsArr[name] || name;
|
|
}).join(':');
|
|
vals = $.map(vals, function(name) {
|
|
return fieldsArr[name] || name;
|
|
}).join(':');
|
|
|
|
//formatting arguments
|
|
var params = {
|
|
data: dataSource,
|
|
rows: rows,
|
|
cols: cols,
|
|
vals: vals,
|
|
colOrder: config_copy["colOrder"],
|
|
rowOrder: config_copy["rowOrder"],
|
|
width: config_copy["width"],
|
|
height: config_copy["height"],
|
|
rendererName: config_copy["rendererName"],
|
|
aggregatorName: config_copy["aggregatorName"],
|
|
inclusions: JSON.stringify(config_copy["inclusions"]),
|
|
menuLimit: config_copy["menuLimit"],
|
|
aggregateDetails: config_copy["aggregateDetails"],
|
|
aggregateDetailsFormat: config_copy["aggregateDetailsFormat"],
|
|
aggregateDetailsCallback: config_copy["aggregateDetailsCallback"],
|
|
highlightMine: config_copy["highlightMine"],
|
|
highlightGroup: config_copy["highlightGroup"],
|
|
xAxisLabel: config_copy["xAxisLabel"],
|
|
yAxisLabel: config_copy["yAxisLabel"],
|
|
chartTitle: config_copy["chartTitle"],
|
|
chartHoverBar: config_copy["chartHoverBar"]
|
|
};
|
|
ajaxLoadingShow("output_pivottable"+index);
|
|
|
|
//calling ajax edit plugin function
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: 'tiki-ajax_services.php',
|
|
dataType: 'json',
|
|
data: {
|
|
controller: 'plugin',
|
|
action: 'replace',
|
|
ticket: $('#pivottable-ticket').val(),
|
|
page: page,
|
|
message:"Modified by Pivot Table Plugin",
|
|
type: 'pivottable',
|
|
content: '~same~',
|
|
index: index,
|
|
params: params,
|
|
appendParams: 1
|
|
},
|
|
complete: function(){
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
|
|
(function ($) {
|
|
'use strict'
|
|
|
|
var titleFormatter = function (text) {
|
|
if (text && stringStartsWith(text, "[") && stringEndsWith(text, "]")) {
|
|
text = text.substring(text.lastIndexOf("[") + 1)
|
|
text = text.substring(0, text.length - 1);
|
|
}
|
|
return text;
|
|
}
|
|
var stringStartsWith = function (string, prefix) {
|
|
return string.slice(0, prefix.length) == prefix;
|
|
};
|
|
var stringEndsWith = function (string, suffix) {
|
|
return suffix == '' || string.slice(-suffix.length) == suffix;
|
|
};
|
|
|
|
var makePlotly = function (chartOpts) {
|
|
return function (pivotData, opts) {
|
|
var rowKeys = pivotData.getRowKeys();
|
|
if (rowKeys.length === 0) {
|
|
rowKeys.push([]);
|
|
}
|
|
var colKeys = pivotData.getColKeys();
|
|
if (colKeys.length === 0) {
|
|
colKeys.push([]);
|
|
}
|
|
|
|
var data = [];
|
|
for (var _i = 0, _len = rowKeys.length; _i < _len; _i++) {
|
|
var rowKey = rowKeys[_i];
|
|
var trace = $.extend({
|
|
x: [],
|
|
y: [],
|
|
name: rowKey.length > 0 ? rowKey.join("-") : ( opts.highlight && opts.highlight.length > 0 ? opts.localeStrings.all : '' )
|
|
}, chartOpts.data);
|
|
for (var _j = 0, _len1 = colKeys.length; _j < _len1; _j++) {
|
|
var colKey = colKeys[_j];
|
|
var agg = pivotData.getAggregator(rowKey, colKey);
|
|
if (agg.value() != null) {
|
|
trace.y.push(agg.value());
|
|
} else {
|
|
trace.y.push(null);
|
|
}
|
|
trace.x.push(colKey.join("-"));
|
|
}
|
|
if( trace.type == 'box' ) {
|
|
delete trace.x;
|
|
}
|
|
data.push(trace);
|
|
}
|
|
|
|
if( opts.highlight && opts.highlight.length > 0 ) {
|
|
var traces = {};
|
|
for (var _i = 0, _len = opts.highlight.length; _i < _len; _i++) {
|
|
var entry = opts.highlight[_i].item;
|
|
var group = opts.highlight[_i].group;
|
|
if( !group ) {
|
|
group = opts.localeStrings.mine;
|
|
}
|
|
var color = opts.highlight[_i].color;
|
|
if(!traces[group] ) {
|
|
traces[group] = {
|
|
type: 'scatter',
|
|
mode: 'markers',
|
|
x: [],
|
|
y: [],
|
|
text: [],
|
|
name: group
|
|
};
|
|
if( opts.highlight[_i].color ) {
|
|
traces[group].marker = {color: opts.highlight[_i].color};
|
|
}
|
|
}
|
|
var colKey = [];
|
|
for( var _j = 0, _len1 = pivotData.colAttrs.length; _j < _len1; _j++ ) {
|
|
colKey.push(entry[pivotData.colAttrs[_j]]);
|
|
}
|
|
var rowKey = [];
|
|
for( var _j = 0, _len1 = pivotData.rowAttrs.length; _j < _len1; _j++ ) {
|
|
rowKey.push(entry[pivotData.rowAttrs[_j]]);
|
|
}
|
|
try {
|
|
traces[group].y.push(pivotData.getAggregator(rowKey, colKey).value());
|
|
} catch(e) {
|
|
continue;
|
|
}
|
|
if( chartOpts.data.type == 'box' ) {
|
|
if( rowKeys.length < 1 ) {
|
|
traces[group].x.push(opts.localeStrings.all);
|
|
} else {
|
|
if( rowKeys.length == 1 && rowKeys[0].length == 0 ) {
|
|
traces[group].x.push(opts.localeStrings.all);
|
|
} else {
|
|
traces[group].x.push(rowKey.join('-'));
|
|
}
|
|
}
|
|
} else {
|
|
traces[group].x.push(colKey.join("-"));
|
|
}
|
|
if (entry.pivotLink) {
|
|
var pivotLinkText = $(entry.pivotLink).text();
|
|
traces[group].text.push(pivotLinkText ? pivotLinkText : entry.pivotLink);
|
|
}
|
|
}
|
|
for( var k in traces ) {
|
|
data.push(traces[k]);
|
|
}
|
|
}
|
|
|
|
var layout = $.extend({}, chartOpts.layout);
|
|
|
|
layout.title = titleFormatter(pivotData.aggregatorName);
|
|
|
|
var hAxisTitle = pivotData.rowAttrs.map(titleFormatter).join(",");
|
|
if (hAxisTitle !== "") {
|
|
layout.title += " " + opts.localeStrings.by + " " + hAxisTitle;
|
|
}
|
|
|
|
var groupByTitle = pivotData.colAttrs.map(titleFormatter).join(",");
|
|
if (groupByTitle !== "") {
|
|
if (hAxisTitle) {
|
|
layout.title += " " + opts.localeStrings.and + " " + groupByTitle;
|
|
} else {
|
|
layout.title += " " + opts.localeStrings.by + " " + groupByTitle;
|
|
}
|
|
}
|
|
|
|
layout.xaxis = {
|
|
title: opts.xAxisLabel ? opts.xAxisLabel : groupByTitle
|
|
}
|
|
|
|
layout.yaxis = {
|
|
title: opts.yAxisLabel ? opts.yAxisLabel : pivotData.aggregatorName + (pivotData.valAttrs.length ? "(" + (pivotData.valAttrs.join(", ")) + ")" : "")
|
|
}
|
|
|
|
if( opts.chartTitle ) {
|
|
layout.title = opts.chartTitle;
|
|
}
|
|
|
|
if( opts.chartHoverBar === 'n' ) {
|
|
layout.hovermode = 'closest';
|
|
}
|
|
|
|
$("<div id='pivotchart_"+opts.pivotId+"'>").appendTo('#output_'+opts.pivotId+' .pvtRendererArea');
|
|
|
|
var d3 = Plotly.d3;
|
|
var img_png = d3.select('#png_container_'+opts.pivotId);
|
|
|
|
// Added into the configuration options displayLogo no and removed the "Edit with plotly graphic editor link". Maybe we could add a link to our editing function later !
|
|
Plotly.newPlot('pivotchart_'+opts.pivotId, data, layout, {displayModeBar: opts.chartHoverBar !== 'n', modeBarButtonsToRemove: ['sendDataToCloud'], displaylogo: false }).then(
|
|
function(gd)
|
|
{
|
|
Plotly.toImage(gd,{format:'png',width:1000})
|
|
.then(
|
|
function(url)
|
|
{
|
|
img_png.attr("src", url);
|
|
return Plotly.toImage(gd,{format:'png',width:1000});
|
|
}
|
|
)
|
|
});
|
|
|
|
return $('#pivotchart_'+opts.pivotId);
|
|
};
|
|
};
|
|
|
|
return $.pivotUtilities.plotly_renderers = {
|
|
"Line Chart": makePlotly({ data: { type: 'scatter' } }),
|
|
"Bar Chart": makePlotly({ data: { type: 'bar' } }),
|
|
"Overlay Bar Chart": makePlotly({ data: { type: 'bar' }, layout: { barmode: 'overlay' } }),
|
|
"Stacked Bar Chart": makePlotly({ data: { type: 'bar' }, layout: { barmode: 'stack' } }),
|
|
"Relative Bar Chart": makePlotly({ data: { type: 'bar' }, layout: { barmode: 'relative' } }),
|
|
"Horizontal Bar Chart": makePlotly({ data: { type: 'bar', orientation: 'h' } }),
|
|
"Area Chart": makePlotly({ data: { type: 'scatter', fill: 'tonexty' } }),
|
|
"Scatter Chart": makePlotly({ data: { type: 'scatter', mode: 'markers' } }),
|
|
"Boxplot Chart": makePlotly({ data: { type: 'box', boxpoints: 'Outliers' } }),
|
|
"Histogram": makePlotly({ data: { type: 'histogram' } }),
|
|
"Density Histogram": makePlotly({ data: { type: 'histogram', histnorm: 'density' } }),
|
|
"Percent Histogram": makePlotly({ data: { type: 'histogram', histnorm: 'percent' } }),
|
|
"Probability Histogram": makePlotly({ data: { type: 'histogram', histnorm: 'probability' } }),
|
|
"Density Histogram Horizontal": makePlotly({ data: { type: 'histogram', histnorm: 'density', orientation: 'h' } }),
|
|
"Percent Histogram Horizontal": makePlotly({ data: { type: 'histogram', histnorm: 'percent', orientation: 'h' } }),
|
|
"Probability Histogram Horizontal": makePlotly({ data: { type: 'histogram', histnorm: 'probability', orientation: 'h' } }),
|
|
"Horizontal Histogram": makePlotly({ data: { type: 'histogram', orientation: 'h' } }),
|
|
"Histogram2D": makePlotly({ data: { type: 'histogram2D' } }),
|
|
"Density Histogram2D": makePlotly({ data: { type: 'histogram2D', histnorm: 'density' } }),
|
|
"Percent Histogram2D": makePlotly({ data: { type: 'histogram2D', histnorm: 'percent' } }),
|
|
"Probability Histogram2D": makePlotly({ data: { type: 'histogram2D', histnorm: 'probability' } }),
|
|
"Density Histogram2D Horizontal": makePlotly({ data: { type: 'histogram2D', histnorm: 'density', orientation: 'h' } }),
|
|
"Percent Histogram2D Horizontal": makePlotly({ data: { type: 'histogram2D', histnorm: 'percent', orientation: 'h' } }),
|
|
"Probability Histogram2D Horizontal": makePlotly({ data: { type: 'histogram2D', histnorm: 'probability', orientation: 'h' } }),
|
|
"Horizontal Histogram2D": makePlotly({ data: { type: 'histogram2D', orientation: 'h' } }),
|
|
"Horizontal Boxplot Chart": makePlotly({ data: { type: 'box', boxpoints: 'Outliers', orientation: 'h' } }),
|
|
};
|
|
})(jQuery);
|
|
|