diff --git a/index.html b/index.html index 6ebb739..b7ecf28 100755 --- a/index.html +++ b/index.html @@ -172,14 +172,19 @@ var N = var Pivot = { Leaves:{}, - Root:N.Create({}), - - Init(inRows) - { + Root:N.Create({Label:"All Pivots"}), + Schema:N.Create({Label:"Column Details"}), + Proto:N.Create({Label:"User Form"}), + Init(inColumnNames, inColumnTypes, inRows) + { + for(let i=0; i N.Create({Row:r})); Pivot.Init = ()=>{}; }, - Pivot(inParent, inPivotIndicies, inSumIndicies, inDepth) + Pivot(inRoot, inParent, inPivotIndicies, inSumIndicies, inDepth) { //arguments: // - a Node with leaf Nodes temporarily stored in its Meta.Leaves @@ -226,6 +231,7 @@ var Pivot = { iterator = inLastBranch => { + N.Connect(inRoot, inLastBranch, "Terminal"); inLastBranch.Meta.Leaves.forEach( inLeaf => { // collect modifiers effecting leaves @@ -247,7 +253,7 @@ var Pivot = inLastBranch.ID.Walk = N.ID.Walk; modifiers.forEach( inModifier => N.Connect(inModifier, inLastBranch, "ModifyUp") ) - // also walk them up, but with a unique check connection + // also walk them up and connect, but with "check unique" enabled N.Walk( inNode=> { modifiers.forEach( inModifier => N.Connect(inModifier, inNode, "ModifyUp", true) ) @@ -263,7 +269,7 @@ var Pivot = } else { - iterator = child => Pivot.Pivot(child, inPivotIndicies, inSumIndicies, depth+1); + iterator = child => Pivot.Pivot(inRoot, child, inPivotIndicies, inSumIndicies, depth+1); } N.Step(inParent, "Hierarchy").forEach(iterator); return inParent; @@ -274,10 +280,11 @@ var Pivot = let pivotRoot = N.Create({Label:"Pivot Root", Leaves:Pivot.Leaves}); N.Connect(Pivot.Root, pivotRoot, "Pivot"); - return Pivot.Pivot(pivotRoot, inPivotIndicies, inSumIndicies); + return Pivot.Pivot(pivotRoot, pivotRoot, inPivotIndicies, inSumIndicies); }, Delete(inRoot) { + // disconnect modifiers let check = N.Step(inRoot, "Modifier"); if(check) { @@ -286,6 +293,14 @@ var Pivot = Pivot.Unmodify(check[0]); } } + + // disconnect terminal branches + N.Walk(()=>{}, inRoot, "Terminal", inNode=>{ + N.Disconnect(inNode, null, "Hierarchy"); + }); + + // disconnect from app + N.Disconnect(null, inRoot, "Pivot") }, Modify(inNode) { @@ -339,21 +354,76 @@ import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/prea import { useReducer } from 'https://cdn.skypack.dev/preact/hooks'; import { css, cx } from 'https://cdn.skypack.dev/@emotion/css'; -Pivot.Init([ - ["#1", "a", "long", 1], - ["#2", "b", "long", 2], - ["#3", "b", "short", 2], - ["#4", "a", "long", 3], - ["#5", "b", "short", 1], - ["#6", "a", "short", 0], - ["#7", "b", "short", 7], -]); -Pivot.Create([1, 2], [3]); +Pivot.Init( + ["number", "type-a", "type-b", "count"], + ["label", "label", "label", "sum"], + [ + ["#1", "a", "long", 1, 4], + ["#2", "b", "long", 2, 4], + ["#3", "b", "short", 2, 4], + ["#4", "a", "long", 3, 4], + ["#5", "b", "short", 1, 4], + ["#6", "a", "short", 0, 4], + ["#7", "b", "short", 7, 4] + ] +); -let AddNewPivot = () => +let ElForm = props => { - Pivot.Create([2], [3]); - Render(); + let labelColumns = N.Step(Pivot.Schema, "label")||[]; + + let used = N.Step(Pivot.Proto, "used")||[]; + let unused = N.Step(Pivot.Schema, "label").filter( columnLabel => !N.Step(columnLabel, "used", false) ); + let indicies = used.map(node=>node.Meta.Index); + + var action; + if(indicies.length) + { + action = h("div", null, [ + h("span", null, "Build"), + h("button", {onClick:e=> + { + N.Disconnect(Pivot.Proto, null, "used"); + Pivot.Create(indicies, [3, 4]); + Render(); + } + }, indicies) + ]); + } + else + { + action = h("div", null, "(select columns)") + } + + return h("div", {}, [ + h("div", null, [ + h("span", null, "available"), + ...unused.map( node=> + { + return h("button", {onClick:e=> + { + N.Connect(Pivot.Proto, node, "used"); + Render(); + } + }, node.Meta.Label); + } + ) + ]), + h("div", null, [ + h("span", null, "taken"), + ...used.map( node=> + { + return h("button", {onClick:e=> + { + N.Disconnect(Pivot.Proto, node, "used"); + Render(); + } + }, node.Meta.Label); + } + ) + ]), + action + ]) }; let ElNode = ({node, depth}) => @@ -439,7 +509,7 @@ let ElNode = ({node, depth}) => }; let ElPivot = ({pivot}) => { - return h("div", {style:{display:"inline-block", width:"500px"}}, [ + return h("div", {style:{display:"inline-block", width:"800px"}}, [ h("button", {onClick:e=>{Pivot.Delete(pivot);Render();}}, "delete?"), h(ElModifiers, {node:pivot}), h(ElNode, {node:pivot, depth:0}) @@ -461,15 +531,12 @@ let ElModifiers = ({node}) => }; let ElRoot = props => { + let pivots = N.Step(Pivot.Root, "Pivot")||[]; return h("div", null, [ h("h3", null, "tree view"), + h(ElForm), h(ElModifiers, {node:Pivot.Root}), - h("button", { onClick:e=> - { - AddNewPivot(); - } - }, "add new pivot"), - ...N.Step(Pivot.Root, "Pivot").map(pivot=>h(ElPivot, {pivot})) + pivots.map(pivot=>h(ElPivot, {pivot})) ]) }; let Render = () => render(h(ElRoot), document.querySelector("#app"));