table layout started
This commit is contained in:
parent
6e1c170ff6
commit
858cb8cd45
@ -196,18 +196,74 @@ let Modifier = props =>
|
||||
`;
|
||||
}
|
||||
|
||||
let PivotBranch = ({node, widths}) =>
|
||||
let PivotBranch = props =>
|
||||
{
|
||||
let sumCells = node.Meta.Row.map(column=>h("td", null, column));
|
||||
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=>
|
||||
{
|
||||
displayCellsModify[i] = html`<td><input type="number" value=${row[i]}/></td>`;
|
||||
});
|
||||
displayCellsModify.forEach((cell, i)=>
|
||||
{
|
||||
if(!cell)
|
||||
{
|
||||
displayCellsModify[i] = html`<td>${row[i]}</td>`
|
||||
}
|
||||
});
|
||||
|
||||
return html`
|
||||
<tr>
|
||||
<td></td>
|
||||
${sumCells}
|
||||
</tr>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan=${displayCells.length+1}><hr/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>${props.node.Meta.Label}</strong>
|
||||
</td>
|
||||
${displayCells}
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=${displayCells.length+1}>Modifications</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>At</td>
|
||||
${displayCellsModify}
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Below</td>
|
||||
${displayCells}
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Above</td>
|
||||
${displayCells}
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Outside</td>
|
||||
${displayCells}
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Computed</td>
|
||||
${displayCells}
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=${displayCells.length+1}>Goals</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Max</td>
|
||||
${displayCells}
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Min</td>
|
||||
${displayCells}
|
||||
</tr>
|
||||
</tbody>
|
||||
`;
|
||||
};
|
||||
|
||||
let PivotRoot = ({pivot, children}) =>
|
||||
|
||||
let PivotRoot = ({pivot}) =>
|
||||
{
|
||||
|
||||
let stylesRoot = css`
|
||||
@ -223,13 +279,16 @@ let PivotRoot = ({pivot, children}) =>
|
||||
`;
|
||||
|
||||
let modifiers = N.Step(pivot, "ModifyUp", false) || [];
|
||||
|
||||
let handleDelete = ()=>
|
||||
{
|
||||
Pivot.Delete(pivot);
|
||||
Render();
|
||||
};
|
||||
|
||||
let rows = [];
|
||||
N.ID.Walk++;
|
||||
N.Walk(n=>rows.push(h(PivotBranch, {node:n}, null)), pivot, "Hierarchy");
|
||||
|
||||
return html`
|
||||
<div class=${stylesRoot}>
|
||||
<div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
|
||||
@ -240,7 +299,9 @@ let PivotRoot = ({pivot, children}) =>
|
||||
${ !modifiers.length ? html`<em>No modifiers</em>` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)}
|
||||
<//>
|
||||
<${Section} key="tree" label=${"Tree"}>
|
||||
${children}
|
||||
<table>
|
||||
${rows}
|
||||
</table>
|
||||
<//>
|
||||
</div>
|
||||
`;
|
||||
|
@ -366,7 +366,7 @@ import {PivotRoot, PivotForm} from './components.js';
|
||||
|
||||
Pivot.Init(
|
||||
["id", "type-a", "type-b", "count", "extra"],
|
||||
["", "label", "label", "sum", "sum"],
|
||||
["label", "label", "label", "sum", "sum"],
|
||||
[
|
||||
["#1", "a", "long", 1, 4],
|
||||
["#2", "b", "long", 2, 4],
|
||||
|
Loading…
Reference in New Issue
Block a user