From ed6c5ca779cc5d29f7c3f0e7e503c16c893c807d Mon Sep 17 00:00:00 2001 From: SethTrowbridge <> Date: Sat, 9 Apr 2022 12:32:25 -0400 Subject: [PATCH 1/4] use js import like a normal person.... --- index.html | 25 +++--- libraries/n.js | 172 ----------------------------------- libraries/papaparse.min.js | 7 -- src/app.js | 0 src/n.js | 174 ++++++++++++++++++++++++++++++++++++ {libraries => src}/pivot.js | 8 +- 6 files changed, 193 insertions(+), 193 deletions(-) delete mode 100644 libraries/n.js delete mode 100644 libraries/papaparse.min.js create mode 100644 src/app.js create mode 100644 src/n.js rename {libraries => src}/pivot.js (99%) diff --git a/index.html b/index.html index 5ca13ce..c3dee7b 100755 --- a/index.html +++ b/index.html @@ -2,15 +2,22 @@ - - -
- - - @@ -9,12 +21,11 @@ From 0007b9f6ef0d82bc75425cb7dc69f1bf603b52ad Mon Sep 17 00:00:00 2001 From: SethTrowbridge <> Date: Sat, 9 Apr 2022 13:01:33 -0400 Subject: [PATCH 3/4] use app.js --- index.html | 494 +---------------------------------------------------- src/app.js | 478 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 484 insertions(+), 488 deletions(-) diff --git a/index.html b/index.html index cb15cbe..69f3456 100755 --- a/index.html +++ b/index.html @@ -6,11 +6,11 @@ { "imports": { - "react": "https://esm.sh/react@18", - "react-dom/client": "https://esm.sh/react-dom/client", - "@emotion": "https://esm.sh/@emotion", - "@emotion/": "https://esm.sh/@emotion/", - "htm": "https://esm.sh/htm/react" + "react": "https://esm.sh/react@18", +"react-dom/client": "https://esm.sh/react-dom/client", + "@emotion": "https://esm.sh/@emotion", + "@emotion/": "https://esm.sh/@emotion/", + "htm": "https://esm.sh/htm/react" } } @@ -18,488 +18,6 @@
- - + diff --git a/src/app.js b/src/app.js index e69de29..e27e828 100644 --- a/src/app.js +++ b/src/app.js @@ -0,0 +1,478 @@ +import { createRoot } from "react-dom/client"; +import { createElement as h, createContext, Fragment, useReducer, useState } from 'react'; +import { css, cx } from '@emotion/css'; +import { html } from 'htm'; + +import N from "./n.js"; +import Pivot from "./pivot.js"; + + +let columnNames = CSV.shift(); +let columnTypes = ([...columnNames]).fill("hidden"); +columnTypes[29] = "sum"; +columnTypes[30] = "sum"; +columnTypes[31] = "sum"; +columnTypes[32] = "sum"; +columnTypes[33] = "sum"; +columnTypes[7 ] = "label"; +columnTypes[8 ] = "label"; +columnTypes[9 ] = "label"; +columnTypes[10] = "label"; +columnTypes[11] = "label"; +Pivot.Init( + columnTypes, + columnNames, + CSV +); + +let PivotForm = props => +{ + let styles = css` + position:realtive; + box-sizing: border-box; + padding: 10px; + color:black; + font-family:sans-serif; + + .Title + { + font-size:24px; + font-weight:100; + } + + .Section + { + padding:10px 0 10px 0; + + .Heading + { + display:inline-block; + color:#666; + font-family:sans-serif; + font-size:12px; + font-weight:900; + text-transform:uppercase; + } + .Group + { + display:inline-block; + padding:5px; + border-radius:5px; + margin:3px; + background:rgba(0, 0, 0, 0.3) + } + } + `; + + + let pivotColumns = N.Step(Pivot.Schema, "label")||[]; + let pivotColumnsUsed = N.Step(Pivot.Proto, "used-pivot")||[]; + + let sumColumns = N.Step(Pivot.Schema, "sum")||[]; + //let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[]; + + let indiciesPivot = pivotColumnsUsed.map(node=>node.Meta.Index); + let indiciesSum = sumColumns.map(node=>node.Meta.Index); + //let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index); + + let displayPivotsAll = html` +
+
Available Columns
+
+ ${pivotColumns.map( columnPivot => + { + let attributes = {}; + if(N.Step(columnPivot, "used-pivot", false)) + { + attributes.disabled = true; + } + else + { + attributes.onClick = e=> + { + N.Connect(Pivot.Proto, columnPivot, "used-pivot"); + Render(); + } + } + return html``; + })} +
+
+ `; + + let displayPivotsPending = null; + if(pivotColumnsUsed.length) + { + displayPivotsPending = html` +
+
Pending Pivot
+
+ ${pivotColumnsUsed.map(columnPivot=>html` + + `)} +
+ + +
+ `; + } + + return html` +
+
Create New Pivot
+ ${displayPivotsAll} + ${displayPivotsPending} +
+ `; +} + +let Section = props => +{ + let styles = css` + .Heading + { + padding:6px 0 6px 0; + color:#666; + font-weight:900; + font-size:12px; + text-transform:uppercase; + cursor:pointer; + + span + { + display:inline-block; + width:20px; + height:20px; + margin-right:10px; + border-radius:20px; + background:black; + color:white; + text-align:center; + } + } + .Heading:hover + { + color:black; + } + .Body + { + position:relative; + padding:10px 0 20px 30px; + &::before + { + content: " "; + display:block; + position:absolute; + top:-8px; + left:8px; + width:3px; + height:100%; + background:black; + } + } + `; + + let [openGet, openSet] = useState(false); + return html` +
+
openSet(!openGet)}> + ${openGet ? `−` : `+`} + ${props.label} +
+ ${ openGet ? html`
${props.children}
` : null } +
+ `; +} + +let ModificationsIcon = ({node}) => +{ + let modsUp = N.Step(node, "ModifyUp", false)||[]; + let modsDown = N.Step(node, "ModifyDown", false)||[]; + let modsAt = N.Step(node, "ModifyAt", false)||[]; + let modsOut = N.Step(node, "ModifyOut", false)||[]; + + var button = null; + if(modsAt.length) + { + button = html``; + } + else + { + button = html``; + } + + let padding = 7; + let icon = 0; + let styles = css` + position:relative; + display:inline-block; + vertical-align:middle; + width:${padding*2 + icon}px; + height:${padding*2 + icon}px; + margin:${padding*2}; + .Icon + { + position:absolute; + display:inline-block; + width:${padding*2 + icon}px; + height:${padding*2 + icon}px; + text-align:center; + font-size:9px; + font-family:sans-serif; + font-weight:900; + line-height:${padding*2 + icon}px; + + &::after + { + content:" "; + display:block; + position:absolute; + width:${icon}px; + height:${icon}px; + border:${padding}px solid transparent; + } + + &.Down + { + left:0; + bottom:100%; + &::after + { + top:100%; + border-top-color:green; + border-bottom:0px solid transparent; + } + } + &.At + { + top:0; + left:100%; + &::after + { + top:0; + right:100%; + border-right-color:red; + border-left:0px solid transparent; + } + } + &.Up + { + left:0; + top:100%; + &::after + { + bottom:100%; + border-bottom-color:orange; + border-top:0px solid transparent; + } + } + + &.Out + { + top:0; + right:100%; + &::after + { + top:0; + left:100%; + border-left-color:grey; + border-right:0px solid transparent; + } + } + } + + `; + + return html` +
+ ${modsDown.length ? html`
${modsDown.length}
` : null} + ${modsAt.length ? html`${modsAt.length}` : null} + ${modsUp.length ? html`${modsUp.length}` : null} + ${modsOut.length ? html`${modsOut.length}` : null} +
+ ${button} + `; + +}; + +let PivotBranch = props => +{ + let row = props.node.Meta.Row; + let displayCellsModify = row.map(column=>false); + props.node.Meta.IndexSum.forEach(i=> + { + displayCellsModify[i] = html``; + }); + displayCellsModify.forEach((cell, i)=> + { + if(!cell) + { + displayCellsModify[i] = html`${row[i]}` + } + }); + + 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; + `; + + return html` + + + + ${props.node.Meta.Label} + + + <${ModificationsIcon} node=${props.node}> + + ${displayCells(props.node, props.visible)} + + ${(N.Step(props.node, "Leaf")||[]).map(leaf => + { + return html` + + + <${ModificationsIcon} node=${leaf}> + ${displayCells(leaf, props.visible)} + + `; + } + )} + + `; +}; + +let PivotRoot = ({pivot}) => +{ + let labelsDefault = (N.Step(Pivot.Schema, "hidden")||[]).map(column => column.Meta.Index); + let labelsSum = (N.Step(Pivot.Schema, "sum")||[]).map(column => column.Meta.Index); + let labelsPivot = (N.Step(Pivot.Schema, "label")||[]).map(column => column.Meta.Index); + let labelsAll = (N.Step(Pivot.Schema, "all")||[]).map(column => column.Meta.Label); + + let labelsAllState = useState(labelsAll.map(column=>true)) + + let headersDisplay = []; + labelsAllState[0].forEach((visible, index)=> + { + if(visible) + { + headersDisplay.push(html`${labelsAll[index]}`); + } + } + ); + + let stylesRoot = css` + display:block; + box-sizing:border-box; + padding:15px; + font-family:sans-serif; + `; + let stylesHeading = css` + margin: 0 0 15px 0; + font-weight:0; + font-size:24px; + `; + + let modifiers = N.Step(pivot, "ModifyUp", false) || []; + let handleDelete = ()=> + { + Pivot.Delete(pivot); + Render(); + }; + + + let displayColumnGroup = (inAllLabels, inAllState, inIndicies) => + { + return html` +
+ + +
+
+ ${inIndicies.map((index) => html``)} +
`; + }; + + let rows = []; + N.ID.Walk++; + N.Walk(n=>rows.push(h(PivotBranch, {node:n, visible:labelsAllState[0]}, null)), pivot, "Hierarchy"); + + return html` +
+
${pivot.Meta.Label}
+ <${Section} key="settings" label=${`Settings`}> + + + <${Section} key="columns" label="Columns"> +

Unused

+ ${displayColumnGroup(labelsAll, labelsAllState, labelsDefault)} +

Summation

+ ${displayColumnGroup(labelsAll, labelsAllState, labelsSum)} +

Pivot

+ ${displayColumnGroup(labelsAll, labelsAllState, labelsPivot)} + + <${Section} key="tree" label=${"Tree"}> + + + + ${headersDisplay} + + + ${rows} +
LabelModifications
+ +
+ `; +}; + +let ElRoot = props => +{ + let pivots = N.Step(Pivot.Root, "Pivot")||[]; + return h("div", null, [ + h(PivotForm), + pivots.map(pivot=>h(PivotRoot, {key:pivot.Meta.Label, pivot})) + ]) +}; + +const Root = createRoot(document.querySelector("#app")); +const Render = () => Root.render(h(ElRoot)); +Render(); \ No newline at end of file From 1436269b7a404abb88a78c2e64a8cc893f9d2056 Mon Sep 17 00:00:00 2001 From: SethTrowbridge <> Date: Sat, 9 Apr 2022 13:13:26 -0400 Subject: [PATCH 4/4] use es module json importer --- data/{csv.js => csv.json} | 2 +- index.html | 1 - src/app.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) rename data/{csv.js => csv.json} (99%) diff --git a/data/csv.js b/data/csv.json similarity index 99% rename from data/csv.js rename to data/csv.json index f24ed1a..4a4fd27 100644 --- a/data/csv.js +++ b/data/csv.json @@ -1,4 +1,4 @@ -var CSV = [ +[ ["fspr","plnt","promo","terms","bill_cust_descr","ship_cust_descr","dsm","quota_rep_descr","director","billto_group","shipto_group","chan","chansub","chan_retail","part","part_descr","part_group","branding","majg_descr","ming_descr","majs_descr","mins_descr","segm","substance","fs_line","r_currency","r_rate","c_currency","c_rate","units","value_loc","value_usd","cost_loc","cost_usd","calc_status","flag","order_date","order_month","order_season","request_date","request_month","request_season","ship_date","ship_month","ship_season","version","iter","logid","tag","comment","module"], ["2102","152","NONE","1A","BWIC0001 - BWI COMPANIES INC","BLOO0017 - BLOOMING COLOR","10032","BRYAN HILL","Baggetta","BWI","BLOOMING COLOR","DRP","DRP","DRP","HZP3E100G18D050","HZP3E100G18D050 - E-10 3 STRAND HGR BLACK","HZP3E100","","110 - INJECTION","000 - NON BRANDED","108 - ACCESSORIES","A06 - HANGERS","Greenhouse","Plastic","41010","US","1.0000000000","US","1.0000000000","25600.0000000000","2099.2000000000","2099.20","1697.2800000000","1697.28","CLOSED","SHIPMENT","2020-06-08","01 - Jun","2021","2020-06-15","01 - Jun","2021","2020-07-09","02 - Jul","2021","15mo","actuals","1","Initial Build","don't undo","build_pool"], ["2211","152","NONE","1A","PAST0002 - PASTANCH LLC","PAST0002 - PASTANCH LLC","13028","RICHARD MEULE","Soltis","PASTANCH LLC","PASTANCH LLC","WHS","WHS","WHS","AMK12000G18D050","AMK12000G18D050 - 3G 1200 REG BM POT BLACK","AMK12000","","210 - BLOW MOLD","000 - NON BRANDED","104 - ROUND POTS AND TRAYS","A19 - NURSERY POTS >= 1 GAL","Nursery","Plastic","41010","US","1.0000000000","US","1.0000000000","24000.0000000000","9144.0000000000","9144.00","4936.0800000000","4936.08","OPEN","REMAINDER","2022-03-26","10 - Mar","2022","2022-04-28","11 - Apr","2022","2022-04-28","11 - Apr","2022","b22","copy","1","Initial Build","don't undo","build_pool"], diff --git a/index.html b/index.html index 69f3456..e49dfdb 100755 --- a/index.html +++ b/index.html @@ -14,7 +14,6 @@ } } -
diff --git a/src/app.js b/src/app.js index e27e828..856c9e6 100644 --- a/src/app.js +++ b/src/app.js @@ -6,7 +6,7 @@ import { html } from 'htm'; import N from "./n.js"; import Pivot from "./pivot.js"; - +import CSV from "../data/csv.json" assert { type: "json" }; let columnNames = CSV.shift(); let columnTypes = ([...columnNames]).fill("hidden"); columnTypes[29] = "sum";