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 PivotBranch = props =>
|
||||||
{
|
{
|
||||||
let row = props.node.Meta.Row;
|
let row = props.node.Meta.Row;
|
||||||
let displayCells = row.map(column=>h("td", null, column));
|
|
||||||
let displayCellsModify = row.map(column=>false);
|
let displayCellsModify = row.map(column=>false);
|
||||||
props.node.Meta.IndexSum.forEach(i=>
|
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`
|
let stylesLeaf = css`
|
||||||
background:#ddd;
|
background:#ddd;
|
||||||
color:#333;
|
color:#333;
|
||||||
@ -741,7 +754,7 @@ let PivotBranch = props =>
|
|||||||
<td>
|
<td>
|
||||||
<${ModificationsIcon} node=${props.node}><//>
|
<${ModificationsIcon} node=${props.node}><//>
|
||||||
</td>
|
</td>
|
||||||
${displayCells}
|
${displayCells(props.node, props.visible)}
|
||||||
</tr>
|
</tr>
|
||||||
${(N.Step(props.node, "Leaf")||[]).map(leaf =>
|
${(N.Step(props.node, "Leaf")||[]).map(leaf =>
|
||||||
{
|
{
|
||||||
@ -749,9 +762,7 @@ let PivotBranch = props =>
|
|||||||
<tr class=${stylesLeaf}>
|
<tr class=${stylesLeaf}>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><${ModificationsIcon} node=${leaf}><//></td>
|
<td><${ModificationsIcon} node=${leaf}><//></td>
|
||||||
${
|
${displayCells(leaf, props.visible)}
|
||||||
leaf.Meta.Row.map(column=>h("td", null, column))
|
|
||||||
}
|
|
||||||
</tr>
|
</tr>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -763,6 +774,9 @@ let PivotBranch = props =>
|
|||||||
let PivotRoot = ({pivot}) =>
|
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`
|
let stylesRoot = css`
|
||||||
display:block;
|
display:block;
|
||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
@ -784,13 +798,36 @@ let PivotRoot = ({pivot}) =>
|
|||||||
|
|
||||||
let rows = [];
|
let rows = [];
|
||||||
N.ID.Walk++;
|
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`
|
return html`
|
||||||
<div class=${stylesRoot}>
|
<div class=${stylesRoot}>
|
||||||
<div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
|
<div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
|
||||||
<${Section} key="settings" label=${`Settings`}>
|
<${Section} key="settings" label=${`Settings`}>
|
||||||
|
<h3>pivot</h3>
|
||||||
<button onClick=${handleDelete}>Destroy Pivot</button>
|
<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"}>
|
<${Section} key="tree" label=${"Tree"}>
|
||||||
<table>
|
<table>
|
||||||
|
Loading…
Reference in New Issue
Block a user