Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Alternative PivotUI2 function #1046

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Alternative PivotUI2 function #1046

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7520422
Added alternative PivotUI2
bseddon Nov 9, 2018
0e1638f
Adds styles to provide a default presentation for PivotUI2
bseddon Nov 9, 2018
b1de9d7
Update gulp-git reference version number
bseddon Nov 9, 2018
f7fe3db
Slightly improved layout
bseddon Nov 9, 2018
bda356a
The 'natives' package is required
bseddon Nov 9, 2018
052b926
Updated pivot.coffee
bseddon Nov 12, 2018
6e6e382
Update pivot.coffee
bseddon Nov 12, 2018
be84cce
Update pivot.coffee
bseddon Nov 12, 2018
e05654b
Update pivot.css
bseddon Nov 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 143 additions & 1 deletion dist/pivot.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.pvtUi { color: #333; }


table.pvtTable {
font-size: 8pt;
text-align: left;
Expand Down Expand Up @@ -112,3 +111,146 @@ table.pvtTable tbody tr td {
.pvtCheckContainer p{ margin: 5px; }

.pvtRendererArea { padding: 5px;}

.pvtUI2
{
display: grid;
grid-template-columns: [rowGroups] auto [reportArea] auto [nargin ] 1fr [end];
grid-template-rows: 34px 34px auto;
}

.pvtUI2 > div:first-child
{
grid-column: 1;
grid-row: 1;
margin-top: 4px;

}
.pvtUI2 > div:nth-child(2)
{
grid-column: 2;
grid-row: 1;
margin-top: 4px;
}
.pvtUI2 > div:nth-child(3)
{
grid-column: 1;
grid-row: 2;
margin-top: 4px;
}
.pvtUI2 > div:nth-child(4)
{
grid-column: 2;
grid-row: 2;
margin-top: 4px;
}
.pvtUI2 > div:nth-child(5)
{
grid-column: 1;
grid-row: 5;
margin-top: 4px;
}
.pvtUI2 > div:nth-child(6)
{
grid-column: 2;
grid-row: 5;
margin-top: 4px;
}

.pvtUI2 > .pvtVals
{
text-align: left;
}

.pvtUI2 > div:first-child
{
margin-top: 8px;
}

.pvtUI2 > .pvtRendererArea
{
overflow: auto;
}

@media handheld, only screen and (max-width: 800px)
{
.pvtUIResponsive
{
display: grid;
grid-template-columns: auto [margin ] 1fr [end];
}

.pvtUIResponsive > div:first-child,
.pvtUIResponsive > .pvtUnused,
.pvtUIResponsive > .pvtVals,
.pvtUIResponsive > .pvtCols,
.pvtUIResponsive > .pvtRows,
.pvtUIResponsive > .pvtRendererArea
{
grid-column: 1;
margin-top: 4px;
}

}

@media only screen and (min-width: 801px)
{
.pvtUIResponsive
{
display: grid;
grid-template-columns: [left] auto [reportArea] auto [margin ] 1fr [end];
grid-template-rows: [rendererControl] 34px [columnGroups] 34px [reportArea] auto [end];
}

.pvtUIResponsive > div:first-child
{
grid-column: 1;
grid-row: 1;
margin-top: 4px;
}

.pvtUIResponsive > .pvtUnused
{
grid-column: 2;
grid-row: 1;
margin-top: 4px;
}

.pvtUIResponsive > .pvtVals
{
grid-column: 1;
grid-row: 2;
margin-top: 4px;
}

.pvtUIResponsive > .pvtCols
{
grid-column: 2;
grid-row: 2;
margin-top: 4px;
}

.pvtUIResponsive > .pvtRows
{
grid-column: 1;
grid-row: 5;
margin-top: 4px;
}

.pvtUIResponsive > .pvtRendererArea
{
grid-column: 2;
grid-row: 5;
margin-top: 4px;
}

}

.pvtUIResponsive .pvtVals
{
text-align: left;
}

.pvtUIResponsive .pvtRendererArea {
overflow: auto;
}
5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,13 @@
"gulp": "^3.8.10",
"run-sequence": "^1.0.2",
"gulp-tag-version": "^1.2.1",
"gulp-git": "^0.5.5",
"gulp-git": "^2.8.0",
"gulp-bump": "^0.1.11",
"gulp-filter": "^1.0.2",
"gulp-util": "^3.0.1",
"gulp-rename": "^1.2.0",
"gulp-minify-css": "^0.3.11",
"gulp-concat": "^2.4.2"
"gulp-concat": "^2.4.2",
"natives": "^1.1.6"
}
}
69 changes: 49 additions & 20 deletions src/pivot.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -652,7 +652,11 @@ callWithJQuery ($) ->


###
Pivot Table UI: calls Pivot Table core above with options set by user
Pivot Table UI: calls Pivot Table core above with options set by user.
Set the 'tag' option to 'table' (the default) to have the layout HTML
use the <table> and related tags. Use a value of 'div' to hve the layout
HTML use a series of <div> tags for the renderer, page fields, aggregator,
columns, rows and report areas.
###

$.fn.pivotUI = (input, inputOpts, overwrite = false, locale="en") ->
Expand All @@ -676,6 +680,8 @@ callWithJQuery ($) ->
showUI: true
filter: -> true
sorters: {}
tag: 'table'
responsive: false

localeStrings = $.extend(true, {}, locales.en.localeStrings, locales[locale].localeStrings)
localeDefaults =
Expand Down Expand Up @@ -709,21 +715,31 @@ callWithJQuery ($) ->
recordsProcessed++

#start building the output
uiTable = $("<table>", "class": "pvtUi").attr("cellpadding", 5)
if opts.tag == 'div'
uiTable = $("<div>", "class": "pvtUi")
if opts.responsive
uiTable.addClass('pvtUIResponsive')
else
uiTable.addClass('pvtUI2');
else
uiTable = $("<table>", "class": "pvtUi").attr("cellpadding", 5)

#renderer control
rendererControl = $("<td>").addClass("pvtUiCell")
rendererControl = $(if opts.tag == 'div' then "<div>" else "<td>").addClass("pvtUiCell")
if ( opts.responsive )
rendererControl.addClass('pvtAxisContainer');

renderer = $("<select>")
.addClass('pvtRenderer')
.appendTo(rendererControl)
.bind "change", -> refresh() #capture reference

for own x of opts.renderers
$("<option>").val(x).html(x).appendTo(renderer)


#axis list, including the double-click menu
unused = $("<td>").addClass('pvtAxisContainer pvtUnused pvtUiCell')
unused = $(if opts.tag == 'div' then "<div>" else "<td>").addClass('pvtAxisContainer pvtUnused pvtUiCell')
shownAttributes = (a for a of attrValues when a not in opts.hiddenAttributes)
shownInAggregators = (c for c in shownAttributes when c not in opts.hiddenFromAggregators)
shownInDragDrop = (c for c in shownAttributes when c not in opts.hiddenFromDragDrop)
Expand Down Expand Up @@ -858,7 +874,8 @@ callWithJQuery ($) ->
attrElem.addClass('pvtFilteredAttribute') if hasExcludedItem
unused.append(attrElem).append(valueList)

tr1 = $("<tr>").appendTo(uiTable)
if not opts.tag? or opts.tag != 'div'
tr1 = $("<tr>").appendTo(uiTable)

#aggregator menu and value area

Expand Down Expand Up @@ -886,33 +903,45 @@ callWithJQuery ($) ->
$(this).html(ordering[$(this).data("order")].colSymbol)
refresh()

$("<td>").addClass('pvtVals pvtUiCell')
.appendTo(tr1)
.append(aggregator)
.append(rowOrderArrow)
.append(colOrderArrow)
.append($("<br>"))
$(if opts.tag == 'div' then "<div>" else "<td>")
.addClass('pvtVals pvtUiCell')
.appendTo(if opts.tag == 'div' then uiTable else tr1)
.append(aggregator)
.append(rowOrderArrow)
.append(colOrderArrow)
.append($("<br>"))

#column axes
$("<td>").addClass('pvtAxisContainer pvtHorizList pvtCols pvtUiCell').appendTo(tr1)
$(if opts.tag == 'div' then "<div>" else "<td>")
.addClass('pvtAxisContainer pvtHorizList pvtCols pvtUiCell')
.appendTo(if opts.tag == 'div' then uiTable else tr1)

tr2 = $("<tr>").appendTo(uiTable)
if opts.tag != 'div'
tr2 = $("<tr>").appendTo(uiTable)

#row axes
tr2.append $("<td>").addClass('pvtAxisContainer pvtRows pvtUiCell').attr("valign", "top")
if opts.tag == 'div'
uiTable.append $("<div>").addClass('pvtAxisContainer pvtRows pvtUiCell').attr("valign", "top")
else
tr2.append $("<td>").addClass('pvtAxisContainer pvtRows pvtUiCell').attr("valign", "top")

#the actual pivot table container
pivotTable = $("<td>")
pivotTable = $(if opts.tag == 'div' then "<div>" else "<td>")
.attr("valign", "top")
.addClass('pvtRendererArea')
.appendTo(tr2)
.appendTo(if opts.tag == 'div' then uiTable else tr2)

#finally the renderer dropdown and unused attribs are inserted at the requested location
if opts.unusedAttrsVertical == true or unusedAttrsVerticalAutoOverride
uiTable.find('tr:nth-child(1)').prepend rendererControl
uiTable.find('tr:nth-child(2)').prepend unused
#When the tag is set to 'div' the the 'unusedAttrsVertical' option is not relevant because
#the position of the layout components is determined by CSS
if opts.tag == 'div'
uiTable.prepend(unused).prepend(rendererControl)
else
uiTable.prepend $("<tr>").append(rendererControl).append(unused)
if opts.unusedAttrsVertical == true or unusedAttrsVerticalAutoOverride
uiTable.find('tr:nth-child(1)').prepend rendererControl
uiTable.find('tr:nth-child(2)').prepend unused
else
uiTable.prepend $("<tr>").append(rendererControl).append(unused)

#render the UI in its default state
@html uiTable
Expand Down