table layout started

This commit is contained in:
TreetopFlyer 2021-05-24 17:03:44 -04:00
parent 6e1c170ff6
commit 858cb8cd45
2 changed files with 71 additions and 10 deletions

View File

@ -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` return html`
<tr> <tbody>
<td></td> <tr>
${sumCells} <td colspan=${displayCells.length+1}><hr/></td>
</tr> </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` let stylesRoot = css`
@ -223,13 +279,16 @@ let PivotRoot = ({pivot, children}) =>
`; `;
let modifiers = N.Step(pivot, "ModifyUp", false) || []; let modifiers = N.Step(pivot, "ModifyUp", false) || [];
let handleDelete = ()=> let handleDelete = ()=>
{ {
Pivot.Delete(pivot); Pivot.Delete(pivot);
Render(); Render();
}; };
let rows = [];
N.ID.Walk++;
N.Walk(n=>rows.push(h(PivotBranch, {node:n}, 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>
@ -240,7 +299,9 @@ let PivotRoot = ({pivot, children}) =>
${ !modifiers.length ? html`<em>No modifiers</em>` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)} ${ !modifiers.length ? html`<em>No modifiers</em>` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)}
<//> <//>
<${Section} key="tree" label=${"Tree"}> <${Section} key="tree" label=${"Tree"}>
${children} <table>
${rows}
</table>
<//> <//>
</div> </div>
`; `;

View File

@ -366,7 +366,7 @@ import {PivotRoot, PivotForm} from './components.js';
Pivot.Init( Pivot.Init(
["id", "type-a", "type-b", "count", "extra"], ["id", "type-a", "type-b", "count", "extra"],
["", "label", "label", "sum", "sum"], ["label", "label", "label", "sum", "sum"],
[ [
["#1", "a", "long", 1, 4], ["#1", "a", "long", 1, 4],
["#2", "b", "long", 2, 4], ["#2", "b", "long", 2, 4],