pivot builder
node-based, ElForm needs clean up
This commit is contained in:
parent
d855e86706
commit
ae22e995f2
100
index.html
100
index.html
@ -173,9 +173,14 @@ var Pivot =
|
||||
{
|
||||
Leaves:{},
|
||||
Root:N.Create({Label:"All Pivots"}),
|
||||
|
||||
Init(inRows)
|
||||
{
|
||||
Schema:N.Create({Label:"Column Details"}),
|
||||
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.Init = ()=>{};
|
||||
},
|
||||
@ -349,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}) =>
|
||||
@ -449,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})
|
||||
@ -474,12 +534,8 @@ 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"),
|
||||
pivots.map(pivot=>h(ElPivot, {pivot}))
|
||||
])
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user