diff --git a/components.js b/components.js index d7c03f6..5d57125 100644 --- a/components.js +++ b/components.js @@ -196,18 +196,74 @@ let Modifier = props => `; } -let PivotBranch = ({node, widths}) => +let PivotBranch = props => { - let sumCells = node.Meta.Row.map(column=>h("td", null, column)); + let row = props.node.Meta.Row; + let displayCells = row.map(column=>h("td", null, column)); + let displayCellsModify = row.map(column=>false); + props.node.Meta.IndexSum.forEach(i=> + { + displayCellsModify[i] = html``; + }); + displayCellsModify.forEach((cell, i)=> + { + if(!cell) + { + displayCellsModify[i] = html`${row[i]}` + } + }); + return html` - - - ${sumCells} - + + +
+ + + + ${props.node.Meta.Label} + + ${displayCells} + + + Modifications + + + At + ${displayCellsModify} + + + Below + ${displayCells} + + + Above + ${displayCells} + + + Outside + ${displayCells} + + + Computed + ${displayCells} + + + Goals + + + Max + ${displayCells} + + + Min + ${displayCells} + + `; }; -let PivotRoot = ({pivot, children}) => + +let PivotRoot = ({pivot}) => { let stylesRoot = css` @@ -223,13 +279,16 @@ let PivotRoot = ({pivot, children}) => `; let modifiers = N.Step(pivot, "ModifyUp", false) || []; - let handleDelete = ()=> { Pivot.Delete(pivot); Render(); }; + let rows = []; + N.ID.Walk++; + N.Walk(n=>rows.push(h(PivotBranch, {node:n}, null)), pivot, "Hierarchy"); + return html`
${pivot.Meta.Label}
@@ -240,7 +299,9 @@ let PivotRoot = ({pivot, children}) => ${ !modifiers.length ? html`No modifiers` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)} <${Section} key="tree" label=${"Tree"}> - ${children} + + ${rows} +
`; diff --git a/index.html b/index.html index 365c982..26205e4 100755 --- a/index.html +++ b/index.html @@ -366,7 +366,7 @@ import {PivotRoot, PivotForm} from './components.js'; Pivot.Init( ["id", "type-a", "type-b", "count", "extra"], - ["", "label", "label", "sum", "sum"], + ["label", "label", "label", "sum", "sum"], [ ["#1", "a", "long", 1, 4], ["#2", "b", "long", 2, 4],