pivots #2
123
index.html
123
index.html
@ -172,14 +172,19 @@ var N =
|
|||||||
var Pivot =
|
var Pivot =
|
||||||
{
|
{
|
||||||
Leaves:{},
|
Leaves:{},
|
||||||
Root:N.Create({}),
|
Root:N.Create({Label:"All Pivots"}),
|
||||||
|
Schema:N.Create({Label:"Column Details"}),
|
||||||
Init(inRows)
|
Proto:N.Create({Label:"User Form"}),
|
||||||
{
|
Init(inColumnNames, inColumnTypes, inRows)
|
||||||
|
{
|
||||||
|
for(let i=0; i<inColumnNames.length; i++)
|
||||||
|
{
|
||||||
|
N.Connect(Pivot.Schema, N.Create({Label:inColumnNames[i], Index:i}), inColumnTypes[i]);
|
||||||
|
}
|
||||||
Pivot.Leaves = inRows.map(r => N.Create({Row:r}));
|
Pivot.Leaves = inRows.map(r => N.Create({Row:r}));
|
||||||
Pivot.Init = ()=>{};
|
Pivot.Init = ()=>{};
|
||||||
},
|
},
|
||||||
Pivot(inParent, inPivotIndicies, inSumIndicies, inDepth)
|
Pivot(inRoot, inParent, inPivotIndicies, inSumIndicies, inDepth)
|
||||||
{
|
{
|
||||||
//arguments:
|
//arguments:
|
||||||
// - a Node with leaf Nodes temporarily stored in its Meta.Leaves
|
// - a Node with leaf Nodes temporarily stored in its Meta.Leaves
|
||||||
@ -226,6 +231,7 @@ var Pivot =
|
|||||||
{
|
{
|
||||||
iterator = inLastBranch =>
|
iterator = inLastBranch =>
|
||||||
{
|
{
|
||||||
|
N.Connect(inRoot, inLastBranch, "Terminal");
|
||||||
inLastBranch.Meta.Leaves.forEach( inLeaf =>
|
inLastBranch.Meta.Leaves.forEach( inLeaf =>
|
||||||
{
|
{
|
||||||
// collect modifiers effecting leaves
|
// collect modifiers effecting leaves
|
||||||
@ -247,7 +253,7 @@ var Pivot =
|
|||||||
inLastBranch.ID.Walk = N.ID.Walk;
|
inLastBranch.ID.Walk = N.ID.Walk;
|
||||||
modifiers.forEach( inModifier => N.Connect(inModifier, inLastBranch, "ModifyUp") )
|
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=>
|
N.Walk( inNode=>
|
||||||
{
|
{
|
||||||
modifiers.forEach( inModifier => N.Connect(inModifier, inNode, "ModifyUp", true) )
|
modifiers.forEach( inModifier => N.Connect(inModifier, inNode, "ModifyUp", true) )
|
||||||
@ -263,7 +269,7 @@ var Pivot =
|
|||||||
}
|
}
|
||||||
else
|
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);
|
N.Step(inParent, "Hierarchy").forEach(iterator);
|
||||||
return inParent;
|
return inParent;
|
||||||
@ -274,10 +280,11 @@ var Pivot =
|
|||||||
|
|
||||||
let pivotRoot = N.Create({Label:"Pivot Root", Leaves:Pivot.Leaves});
|
let pivotRoot = N.Create({Label:"Pivot Root", Leaves:Pivot.Leaves});
|
||||||
N.Connect(Pivot.Root, pivotRoot, "Pivot");
|
N.Connect(Pivot.Root, pivotRoot, "Pivot");
|
||||||
return Pivot.Pivot(pivotRoot, inPivotIndicies, inSumIndicies);
|
return Pivot.Pivot(pivotRoot, pivotRoot, inPivotIndicies, inSumIndicies);
|
||||||
},
|
},
|
||||||
Delete(inRoot)
|
Delete(inRoot)
|
||||||
{
|
{
|
||||||
|
// disconnect modifiers
|
||||||
let check = N.Step(inRoot, "Modifier");
|
let check = N.Step(inRoot, "Modifier");
|
||||||
if(check)
|
if(check)
|
||||||
{
|
{
|
||||||
@ -286,6 +293,14 @@ var Pivot =
|
|||||||
Pivot.Unmodify(check[0]);
|
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)
|
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 { useReducer } from 'https://cdn.skypack.dev/preact/hooks';
|
||||||
import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
|
import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
|
||||||
|
|
||||||
Pivot.Init([
|
Pivot.Init(
|
||||||
["#1", "a", "long", 1],
|
["number", "type-a", "type-b", "count"],
|
||||||
["#2", "b", "long", 2],
|
["label", "label", "label", "sum"],
|
||||||
["#3", "b", "short", 2],
|
[
|
||||||
["#4", "a", "long", 3],
|
["#1", "a", "long", 1, 4],
|
||||||
["#5", "b", "short", 1],
|
["#2", "b", "long", 2, 4],
|
||||||
["#6", "a", "short", 0],
|
["#3", "b", "short", 2, 4],
|
||||||
["#7", "b", "short", 7],
|
["#4", "a", "long", 3, 4],
|
||||||
]);
|
["#5", "b", "short", 1, 4],
|
||||||
Pivot.Create([1, 2], [3]);
|
["#6", "a", "short", 0, 4],
|
||||||
|
["#7", "b", "short", 7, 4]
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
let AddNewPivot = () =>
|
let ElForm = props =>
|
||||||
{
|
{
|
||||||
Pivot.Create([2], [3]);
|
let labelColumns = N.Step(Pivot.Schema, "label")||[];
|
||||||
Render();
|
|
||||||
|
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}) =>
|
let ElNode = ({node, depth}) =>
|
||||||
@ -439,7 +509,7 @@ let ElNode = ({node, depth}) =>
|
|||||||
};
|
};
|
||||||
let ElPivot = ({pivot}) =>
|
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("button", {onClick:e=>{Pivot.Delete(pivot);Render();}}, "delete?"),
|
||||||
h(ElModifiers, {node:pivot}),
|
h(ElModifiers, {node:pivot}),
|
||||||
h(ElNode, {node:pivot, depth:0})
|
h(ElNode, {node:pivot, depth:0})
|
||||||
@ -461,15 +531,12 @@ let ElModifiers = ({node}) =>
|
|||||||
};
|
};
|
||||||
let ElRoot = props =>
|
let ElRoot = props =>
|
||||||
{
|
{
|
||||||
|
let pivots = N.Step(Pivot.Root, "Pivot")||[];
|
||||||
return h("div", null, [
|
return h("div", null, [
|
||||||
h("h3", null, "tree view"),
|
h("h3", null, "tree view"),
|
||||||
|
h(ElForm),
|
||||||
h(ElModifiers, {node:Pivot.Root}),
|
h(ElModifiers, {node:Pivot.Root}),
|
||||||
h("button", { onClick:e=>
|
pivots.map(pivot=>h(ElPivot, {pivot}))
|
||||||
{
|
|
||||||
AddNewPivot();
|
|
||||||
}
|
|
||||||
}, "add new pivot"),
|
|
||||||
...N.Step(Pivot.Root, "Pivot").map(pivot=>h(ElPivot, {pivot}))
|
|
||||||
])
|
])
|
||||||
};
|
};
|
||||||
let Render = () => render(h(ElRoot), document.querySelector("#app"));
|
let Render = () => render(h(ElRoot), document.querySelector("#app"));
|
||||||
|
Loading…
Reference in New Issue
Block a user