vaporous 0.0.10 → 0.0.11

package/Vaporous.js

@@ -85,7 +85,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     method(operation, name, options) {
-        return core.method.call(this, operation, name, options);
+        return processing.method.call(this, operation, name, options);
     }
 
     /**
@@ -108,13 +108,17 @@ class Vaporous {
 
     /**
      * Execute all queued operations
-    * @param {string}  [stageName] - Optional stage name for logging
-    * @returns {Promise<Vaporous>} - Returns this instance for chaining
+     * @param {string} [stageName] - Optional stage name for logging
+     * @returns {Promise<Vaporous>} - Returns this instance for chaining
      */
-    async begin(stageName) {
-        return await core.begin.call(this, stageName);
+    begin(stageName) {
+        return core.begin.call(this, stageName);
     }
 
+    /**
+     * Serialize the Vaporous instance to a plain object
+     * @returns {Object} - Serialized instance data
+     */
     serialise({ } = {}) {
         return core.serialise.call(this);
     }
@@ -167,6 +171,7 @@ class Vaporous {
     /**
      * Evaluate and modify each event
      * @param {Function} modifier - Function that receives an event and returns modifications to apply
+     * @param {boolean} [discard] - Whether to discard the event if modifier returns falsy
      * @returns {Vaporous} - Returns this instance for chaining
      */
     eval(modifier, discard) {
@@ -246,15 +251,15 @@ class Vaporous {
      * @private
      */
     _fileScan(directory) {
-        return fileOperations._fileScan?.call(this, directory);
+        return fileOperations._fileScan.call(this, directory);
     }
 
     /**
      * Internal file load helper
      * @private
      */
-    async _fileLoad(events, delim, parser) {
-        return await fileOperations._fileLoad?.call(this, events, delim, parser);
+    _fileLoad(events, delim, parser) {
+        return fileOperations._fileLoad.call(this, events, delim, parser);
     }
 
     /**
@@ -263,7 +268,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     fileScan(directory) {
-        return fileOperations.fileScan?.call(this, directory) || this;
+        return fileOperations.fileScan.call(this, directory);
     }
 
     /**
@@ -271,8 +276,8 @@ class Vaporous {
      * @param {Function} parser - Parser function for CSV rows
      * @returns {Vaporous} - Returns this instance for chaining
      */
-    async csvLoad(parser) {
-        return await fileOperations.csvLoad?.call(this, parser) || this;
+    csvLoad(parser) {
+        return fileOperations.csvLoad.call(this, parser);
     }
 
     /**
@@ -281,8 +286,8 @@ class Vaporous {
      * @param {Function} parser - Parser function for lines
      * @returns {Vaporous} - Returns this instance for chaining
      */
-    async fileLoad(delim, parser) {
-        return await fileOperations.fileLoad?.call(this, delim, parser) || this;
+    fileLoad(delim, parser) {
+        return fileOperations.fileLoad.call(this, delim, parser);
     }
 
     /**
@@ -291,7 +296,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     writeFile(title) {
-        return fileOperations.writeFile?.call(this, title) || this;
+        return fileOperations.writeFile.call(this, title);
     }
 
     /**
@@ -300,7 +305,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     output(...args) {
-        return fileOperations.output?.call(this, ...args) || this;
+        return fileOperations.output.call(this, ...args);
     }
 
     // ========================================
@@ -321,7 +326,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     stats(...args) {
-        return statistics.stats?.call(this, ...args) || this;
+        return statistics.stats.call(this, ...args);
     }
 
     /**
@@ -330,7 +335,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     eventstats(...args) {
-        return statistics.eventstats?.call(this, ...args) || this;
+        return statistics.eventstats.call(this, ...args);
     }
 
     /**
@@ -338,7 +343,7 @@ class Vaporous {
      * @private
      */
     _streamstats(...args) {
-        return statistics._streamstats?.call(this, ...args) || this;
+        return statistics._streamstats.call(this, ...args);
     }
 
     /**
@@ -347,7 +352,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     streamstats(...args) {
-        return statistics.streamstats?.call(this, ...args) || this;
+        return statistics.streamstats.call(this, ...args);
     }
 
     /**
@@ -358,7 +363,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     delta(field, remapField, ...bys) {
-        return statistics.delta?.call(this, field, remapField, ...bys) || this;
+        return statistics.delta.call(this, field, remapField, ...bys);
     }
 
     // ========================================
@@ -370,7 +375,7 @@ class Vaporous {
      * @private
      */
     _checkpoint(operation, name, data, options) {
-        return checkpoints._checkpoint?.call(this, operation, name, data, options) || this;
+        return checkpoints._checkpoint.call(this, operation, name, data, options);
     }
 
     /**
@@ -381,7 +386,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     checkpoint(operation, name, options) {
-        return checkpoints.checkpoint?.call(this, operation, name, options) || this;
+        return checkpoints.checkpoint.call(this, operation, name, options);
     }
 
     /**
@@ -392,7 +397,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     filterIntoCheckpoint(checkpointName, funct, options) {
-        return checkpoints.filterIntoCheckpoint?.call(this, checkpointName, funct, options) || this;
+        return checkpoints.filterIntoCheckpoint.call(this, checkpointName, funct, options);
     }
 
     /**
@@ -402,8 +407,8 @@ class Vaporous {
      * @param {string} partitionBy - Field to partition by
      * @returns {Vaporous} - Returns this instance for chaining
      */
-    async storedCheckpoint(operation, name, partitionBy) {
-        return await checkpoints.storedCheckpoint?.call(this, operation, name, partitionBy) || this;
+    storedCheckpoint(operation, name, partitionBy) {
+        return checkpoints.storedCheckpoint.call(this, operation, name, partitionBy);
     }
 
     // ========================================
@@ -416,7 +421,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     toGraph(...keys) {
-        return visualization.toGraph?.call(this, ...keys) || this;
+        return visualization.toGraph.call(this, ...keys);
     }
 
     /**
@@ -427,16 +432,17 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     build(title, type, options) {
-        return visualization.build?.call(this, title, type, options) || this;
+        return visualization.build.call(this, title, type, options);
     }
 
     /**
      * Render visualizations
+     * @param {string} location - Location to render visualizations
      * @param {Object} [options] - Optional render options
      * @returns {Vaporous} - Returns this instance for chaining
      */
-    render(options) {
-        return visualization.render?.call(this, options) || this;
+    render(location, options) {
+        return visualization.render.call(this, location, options);
     }
 
     // ========================================
@@ -449,7 +455,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     load_http(options) {
-        return http.load_http?.call(this, options) || this;
+        return http.load_http.call(this, options);
     }
 
     // ========================================
@@ -463,7 +469,7 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     interval(callback, ms) {
-        return processing.interval?.call(this, callback, ms) || this;
+        return processing.interval.call(this, callback, ms);
     }
 
     /**
@@ -474,19 +480,35 @@ class Vaporous {
      * @returns {Vaporous} - Returns this instance for chaining
      */
     parallel(concurrency, callback, options) {
-        return processing.parallel?.call(this, concurrency, callback, options) || this;
+        return processing.parallel.call(this, concurrency, callback, options);
     }
 
+    /**
+     * Recursively process events
+     * @param {Function} callback - Function to execute recursively
+     * @returns {Vaporous} - Returns this instance for chaining
+     */
     recurse(callback) {
-        return processing.recurse?.call(this, callback)
+        return processing.recurse.call(this, callback);
     }
 
+    /**
+     * Debug events by executing a callback
+     * @param {Function} callback - Debug callback function
+     * @returns {Vaporous} - Returns this instance for chaining
+     */
     debug(callback) {
-        return core.debug.call(this, callback)
+        return core.debug.call(this, callback);
     }
 
+    /**
+     * Conditionally execute a callback
+     * @param {Function|boolean} condition - Condition to evaluate or boolean value
+     * @param {Function} callback - Function to execute if condition is true
+     * @returns {Vaporous} - Returns this instance for chaining
+     */
     doIf(condition, callback) {
-        return processing.doIf.call(this, condition, callback)
+        return processing.doIf.call(this, condition, callback);
     }
 }
 

package/Vaporous_generation.html

@@ -0,0 +1,324 @@
+
+<html>
+        <head>
+        <meta name="viewport" content="width=device-width, initial-scale=0.5">
+            <style>
+                @import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
+
+/* Apply Roboto to all elements */
+* {
+    font-family: 'Roboto', Arial, sans-serif !important;
+}
+
+body {
+    font-family: 'Roboto', Arial, sans-serif;
+}
+
+/* Chart-specific styles */
+.chart,
+.chart-container,
+canvas,
+svg,
+.chartjs-render-monitor {
+    font-family: 'Roboto', Arial, sans-serif !important;
+}
+
+/* Third-party library overrides */
+.ag-theme-quartz,
+.ag-cell,
+.ag-header-cell,
+.tabulator,
+.tabulator-cell,
+.tabulator-header {
+    font-family: 'Roboto', Arial, sans-serif !important;
+}
+
+body {
+    margin: 0;
+    padding: 16px;
+}
+
+.tabBar {
+    display: flex;
+    overflow: auto;
+    box-shadow:
+        0 3px 12px rgba(0, 0, 0, 0.09),
+        0 6px 18px rgba(0, 0, 0, 0.06);
+    min-height: 32px;
+    margin-bottom: 24px;
+    margin-top: 8px;
+    margin-left: 8px;
+    margin-right: 8px;
+    position: relative;
+    background: #fff;
+    align-items: center;
+}
+
+.tabs {
+    border-radius: 8px;
+    padding: 8px 20px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    color: #555;
+    transition: all 0.3s ease-in-out;
+    text-align: center;
+    margin: 12px;
+    position: relative;
+    z-index: 1;
+}
+
+.tabs:not(.selectedTab):hover {
+    color: #1976d2;
+}
+
+.selectedTab {
+    color: #fff;
+    font-weight: bold;
+}
+
+.selectedTab::before {
+    content: '';
+    position: absolute;
+    background: #1976d2;
+    border-radius: 8px;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.3s ease-in-out;
+    box-shadow:
+        0 4px 16px rgba(25, 118, 210, 0.3),
+        0 8px 24px rgba(25, 118, 210, 0.2);
+    animation: slideInFromLeft 0.3s ease-in-out forwards;
+}
+
+.selectedTab.slideFromRight::before {
+    animation: slideInFromRight 0.3s ease-in-out forwards;
+}
+
+@keyframes slideInFromLeft {
+    0% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideInFromRight {
+    0% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+#content {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0px;
+    gap: 8px;
+    justify-content: flex-start;
+}
+
+.parentHolder {
+    display: flex;
+    margin: 2px;
+    border: 1px solid #d3d3d3;
+}
+
+.parentHolder::after {
+    border: 2px solid red;
+    /* Change color and width as needed */
+    pointer-events: none;
+    z-index: 2;
+}
+
+.tabContent {
+    opacity: 1;
+    transition: opacity 0.3s,
+}
+
+.graphTitle {
+    opacity: 0.7;
+    text-align: center;
+    display: 'flex';
+}
+
+.tableHolder {
+    margin-top: 8px;
+    width: 100%;
+    /* height: 600px; */
+    /* overflow: auto; */
+}
+
+#extendedDescription {
+    text-align: center;
+    opacity: 0.7;
+    margin-bottom: 16px;
+}
+            </style>
+            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+            <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@34.2.0/dist/ag-grid-community.min.js"></script>
+
+    
+    <script type="text/javascript">
+
+      const classSafe = (name) => name.replace(/[^a-zA-Z0-9]/g, "_")
+
+      var selectedTab = classSafe("User Stats")
+      var previousTab = null
+      const tokens = {}
+      const visualisationData = [[{"columnDefinitions":[{"field":"gender"},{"field":"avgHeight"}],"rowData":[{"gender":"female","avgHeight":177.5666666666667},{"gender":"male","avgHeight":173.15249999999997}],"title":"Average height"}],[{"type":"line","data":{"labels":["female","male"],"datasets":[{"label":"avgHeight","data":[177.5666666666667,173.15249999999997],"pointRadius":0}]},"options":{"scales":{"y":{"type":"linear","display":true,"position":"left","min":173.15249999999997,"max":[177.5666666666667]},"x":{"type":"category","ticks":{"display":false}}},"responsive":true,"plugins":{"legend":{"display":true,"position":"bottom"},"title":{"display":false,"text":"Average height"}}}}]]
+      const tabOrder = ["User_Stats"]
+
+      const _sort = (order, data, ...keys) => {
+    return data.sort((a, b) => {
+        let directive = 0;
+
+        keys.some(key => {
+            directive = typeof a[key] === 'number' ? a[key] - b[key] : a[key].localeCompare(b[key])
+            if (order === 'dsc') directive = directive * -1
+            if (directive !== 0) return true;
+        })
+
+        return directive;
+    })
+}
+      const createElement = (name, type, visualisationOptions, eventData, { trellis, trellisName = "", columnDefinitions }) => {
+
+            if (classSafe(visualisationOptions.tab) !== selectedTab) return;
+
+            if (visualisationOptions.extendedDescription) {
+                const descriptions = document.getElementById('extendedDescription')
+                const thisDescription = document.createElement('div')
+                thisDescription.innerHTML = visualisationOptions.extendedDescription
+                descriptions.appendChild(thisDescription)
+            }
+
+            eventData = visualisationData[eventData]
+
+            // TODO: migrate trellis functionality from here to tograph
+            if (trellis) {
+                let pairs = trellisName.map((name, i) => [name, eventData[i]]);
+                pairs = pairs.sort((a, b) => a[0].localeCompare(b[0]))
+
+                // Unzip back into separate arrays
+                trellisName = pairs.map(p => p[0]);
+                eventData = pairs.map(p => p[1]);
+            }
+
+            const columnCount = visualisationOptions.columns || 2
+
+            eventData.forEach((trellisData, i) => {
+                const parentHolder = document.createElement('div')
+
+                const titleDiv = document.createElement('div')
+                titleDiv.classList.add('graphTitle')
+                parentHolder.appendChild(titleDiv)
+
+                if (trellisData.options) {
+                    titleDiv.textContent = trellisData.options.plugins.title.text
+                } else {
+                    titleDiv.textContent = trellisData.title
+                }
+
+                document.getElementById('content').appendChild(parentHolder)
+
+                parentHolder.style = `flex: 0 0 calc(${100 / columnCount}% - 8px); max-width: calc(${100 / columnCount}% - 8px);`
+                if (type === 'Table') {
+                    const tableDiv = document.createElement('div')
+                    tableDiv.classList.add('tableHolder')
+                    document.documentElement.style.setProperty("--ag-spacing", `4px`);
+
+
+                    // Need to do column defintiions here
+                    parentHolder.appendChild(tableDiv)
+                    new agGrid.createGrid(tableDiv, {
+                        suppressFieldDotNotation: true,
+                        rowData: trellisData.rowData,
+                        // Columns to be displayed (Should match rowData properties)
+                        columnDefs: trellisData.columnDefinitions,
+                        defaultColDef: {
+                            flex: 1,
+                            resizable: true,
+                            sortable: true,
+                            filter: true
+                        },
+                        domLayout: 'autoHeight',
+                        enableCellTextSelection: true,
+                        // suppressHorizontalScroll: false,
+                        // autoSizeStrategy: {
+                        //     type: 'fitGridWidth',
+                        //     defaultMinWidth: 100
+                        // }
+                    });
+                } else {
+                    const graphEntity = document.createElement('canvas')
+                    parentHolder.appendChild(graphEntity)
+                    new Chart(graphEntity, trellisData)
+                }
+
+            })
+        }
+      
+      function drawVis(tab) {
+            if (tab) {
+                if (selectedTab) {
+                    document.getElementById(selectedTab).classList.remove('selectedTab')
+                    document.getElementById(selectedTab).classList.remove('slideFromRight')
+                    previousTab = selectedTab
+                }
+                selectedTab = tab
+            } else if (true) {
+                selectedTab = classSafe('User Stats')
+            }
+
+            if (selectedTab) {
+                const selectedElement = document.getElementById(selectedTab)
+                selectedElement.classList.add('selectedTab')
+                
+                // Determine slide direction based on tab positions
+                if (previousTab) {
+                    const previousIndex = tabOrder.indexOf(previousTab)
+                    const currentIndex = tabOrder.indexOf(selectedTab)
+                    
+                    if (currentIndex < previousIndex) {
+                        // Moving to left tab, slide from right
+                        selectedElement.classList.add('slideFromRight')
+                    }
+                    // For right movement or first load, use default slideFromLeft animation
+                }
+            }
+            document.getElementById('content').innerHTML = ''
+            document.getElementById('extendedDescription').innerHTML = ''
+            createElement('Average height', 'Table', {"tab":"User Stats","columns":2} ,0, {"xPrimary":"gender","columnDefinitions":[["gender","avgHeight"]]}),createElement('Average height', 'Line', {"tab":"User Stats","columns":2} ,1, {"xPrimary":"gender","columnDefinitions":[["gender","avgHeight"]]})
+      }
+
+        document.addEventListener("DOMContentLoaded", function(event) {
+            drawVis()
+        });
+      
+    </script>
+  </head>
+  <body>
+        <div class='tabBar'>
+            <div id=User_Stats class='tabs' onclick="drawVis('User_Stats')">User Stats</div>
+        </div>
+
+    <div id='extendedDescription'></div>
+    <div id='content'></div>
+  </body>
+</html>
+