column visibility
This commit is contained in:
parent
ba14ee656c
commit
ede7f35c87
49
index.html
49
index.html
@ -713,7 +713,6 @@ let ModificationsIcon = ({node}) =>
|
||||
let PivotBranch = props =>
|
||||
{
|
||||
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=>
|
||||
{
|
||||
@ -727,6 +726,20 @@ let PivotBranch = props =>
|
||||
}
|
||||
});
|
||||
|
||||
let displayCells = (node, visible) =>
|
||||
{
|
||||
let output = [];
|
||||
node.Meta.Row.forEach((column, i)=>
|
||||
{
|
||||
if(visible[i])
|
||||
{
|
||||
output.push( h("td", null, column) );
|
||||
}
|
||||
}
|
||||
);
|
||||
return output;
|
||||
}
|
||||
|
||||
let stylesLeaf = css`
|
||||
background:#ddd;
|
||||
color:#333;
|
||||
@ -741,7 +754,7 @@ let PivotBranch = props =>
|
||||
<td>
|
||||
<${ModificationsIcon} node=${props.node}><//>
|
||||
</td>
|
||||
${displayCells}
|
||||
${displayCells(props.node, props.visible)}
|
||||
</tr>
|
||||
${(N.Step(props.node, "Leaf")||[]).map(leaf =>
|
||||
{
|
||||
@ -749,9 +762,7 @@ let PivotBranch = props =>
|
||||
<tr class=${stylesLeaf}>
|
||||
<td></td>
|
||||
<td><${ModificationsIcon} node=${leaf}><//></td>
|
||||
${
|
||||
leaf.Meta.Row.map(column=>h("td", null, column))
|
||||
}
|
||||
${displayCells(leaf, props.visible)}
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
@ -763,6 +774,9 @@ let PivotBranch = props =>
|
||||
let PivotRoot = ({pivot}) =>
|
||||
{
|
||||
|
||||
let labels = (N.Step(Pivot.Schema, "all")||[]).map(column => column.Meta.Label);
|
||||
let [visibleGet, visibleSet] = useState(labels.map(column=>true));
|
||||
|
||||
let stylesRoot = css`
|
||||
display:block;
|
||||
box-sizing:border-box;
|
||||
@ -784,13 +798,36 @@ let PivotRoot = ({pivot}) =>
|
||||
|
||||
let rows = [];
|
||||
N.ID.Walk++;
|
||||
N.Walk(n=>rows.push(h(PivotBranch, {node:n}, null)), pivot, "Hierarchy");
|
||||
N.Walk(n=>rows.push(h(PivotBranch, {node:n, visible:visibleGet}, null)), pivot, "Hierarchy");
|
||||
|
||||
return html`
|
||||
<div class=${stylesRoot}>
|
||||
<div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
|
||||
<${Section} key="settings" label=${`Settings`}>
|
||||
<h3>pivot</h3>
|
||||
<button onClick=${handleDelete}>Destroy Pivot</button>
|
||||
<h3>columns</h3>
|
||||
<div>
|
||||
<button onClick=${e =>
|
||||
{
|
||||
visibleSet(visibleGet.map(v=>true))
|
||||
}
|
||||
}>Show All</button>
|
||||
<button onClick=${e =>
|
||||
{
|
||||
visibleSet(visibleGet.map(v=>false))
|
||||
}
|
||||
}>Hide All</button>
|
||||
</div>
|
||||
<div>
|
||||
${visibleGet.map((v, i) => html`<button onClick=${e=>
|
||||
{
|
||||
let clone = [...visibleGet];
|
||||
clone[i] = !v;
|
||||
visibleSet(clone);
|
||||
}
|
||||
}>${labels[i]} ${v ? `visible`:`hidden`}</button>`)}
|
||||
</div>
|
||||
<//>
|
||||
<${Section} key="tree" label=${"Tree"}>
|
||||
<table>
|
||||
|
Loading…
Reference in New Issue
Block a user