vaporous 0.0.3 → 0.0.4

package/Vaporous.js

@@ -245,11 +245,19 @@ class Vaporous {
         const arr = Object.keys(map).map(key => {
             const result = map[key]
 
+            let sortedCache = {}
             aggregations.forEach(aggregation => {
-                if (aggregation.sortable) map[key]._statsRaw[aggregation.field].sort((a, b) => a - b)
+                const outputField = aggregation.outputField
+                const reference = map[key]._statsRaw[aggregation.field]
+
+                if (aggregation.sortable) {
+                    sortedCache[aggregation.field] = reference.slice().sort((a, b) => a - b)
+                    result[outputField] = aggregation.calculate(sortedCache[aggregation.field])
+                } else {
+                    result[outputField] = aggregation.calculate(reference)
+                }
+
 
-                const aggregationField = aggregation.outputField
-                result[aggregationField] = aggregation.calculate(map[key])
             })
 
             delete map[key]._statsRaw
@@ -345,11 +353,154 @@ class Vaporous {
         return this;
     }
 
-    build(name, type, { tab = 'Default', columns = 2 } = {}) {
+    build(name, type, { tab = 'Default', columns = 2, y2, y1Type, y2Type, y1Stacked, y2Stacked, sortX = 'asc', xTicks = false, trellisAxis = "shared" } = {}) {
 
         const visualisationOptions = { tab, columns }
 
-        const data = JSON.stringify(this.events)
+
+        let bounds = {}
+
+        const isY2 = (data) => {
+            let y2Mapped = false;
+
+            if (y2 instanceof Array) {
+                y2Mapped = y2.includes(data)
+            }
+            else if (y2 instanceof RegExp) {
+                y2Mapped = y2.test(data)
+            }
+
+            return y2Mapped
+        }
+        const graphData = this.events.map((trellis, i) => {
+            if (type === 'Table') {
+                return trellis;
+            }
+
+            const dataOptions = {}
+
+            // For every event in this trellis restructure to chart.js
+            if (sortX) trellis = _sort(sortX, trellis, '_time')
+
+            const trellisName = this.graphFlags.at(-1).trellisName?.[i] || ""
+            const columnDefinitions = this.graphFlags.at(-1).columnDefinitions[i]
+
+            trellis.forEach(event => {
+                columnDefinitions.forEach(prop => {
+                    if (!dataOptions[prop]) dataOptions[prop] = []
+                    const val = event[prop]
+                    dataOptions[prop].push(val)
+
+                    if (!bounds[prop]) bounds[prop] = {
+                        min: val,
+                        max: val
+                    }
+
+                    if (val < bounds[prop].min) bounds[prop].min = val;
+                    if (val > bounds[prop].max) bounds[prop].max = val
+
+                })
+            })
+
+
+            const _time = dataOptions._time
+            delete dataOptions._time
+
+            let y2WasMapped = false
+            const data = {
+                labels: _time,
+                datasets: Object.keys(dataOptions).map(data => {
+                    const y2Mapped = isY2(data)
+                    if (y2Mapped) y2WasMapped = y2Mapped
+
+                    const base = {
+                        label: data,
+                        yAxisID: y2Mapped ? 'y2' : undefined,
+                        data: dataOptions[data],
+                        type: y2Mapped ? y2Type : y1Type,
+                        // borderColor: 'red',
+                        // backgroundColor: 'red',
+                    }
+
+                    if (type === 'Scatter') {
+                        base.showLine = false
+                        base.pointRadius = 8
+                        base.pointStyle = 'rect'
+                    } else if (type === 'Area') {
+                        base.fill = 'origin'
+                    } else if (type === 'Line') {
+                        base.pointRadius = 0;
+                    }
+                    return base
+                })
+            };
+
+            const scales = {
+                y: {
+                    type: 'linear',
+                    display: true,
+                    position: 'left',
+                    stacked: y1Stacked
+                },
+                x: {
+                    type: 'linear',
+                    ticks: {
+                        display: xTicks
+                    }
+                }
+            }
+
+            if (y2WasMapped) scales.y2 = {
+                type: 'linear',
+                display: true,
+                position: 'right',
+                grid: {
+                    drawOnChartArea: false
+                },
+                stacked: y2Stacked
+            }
+
+            return {
+                type: 'line',
+                data: data,
+                options: {
+                    scales,
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'bottom',
+                        },
+                        title: {
+                            display: true,
+                            text: name + trellisName
+                        }
+                    }
+                }
+            }
+        })
+
+        if (trellisAxis === 'shared') {
+            // Do a second iteration to implement bounds
+            graphData.forEach(trellisGraph => {
+                Object.keys(bounds).forEach(bound => {
+                    let axis = isY2(bound) ? 'y2' : 'y'
+                    if (bound === '_time') axis = 'x';
+
+                    const thisAxis = trellisGraph.options.scales[axis]
+                    const { min, max } = bounds[bound]
+                    if (!thisAxis.min) {
+                        thisAxis.min = min
+                        thisAxis.max = max
+                    }
+                    if (min < thisAxis.min) thisAxis.min = min
+                    if (max > thisAxis.max) thisAxis.max = max
+
+                })
+
+            })
+        }
+
+        const data = JSON.stringify(graphData)
         const lastData = this.visualisationData.at(-1)
 
         if (lastData !== data) this.visualisationData.push(data)
@@ -397,12 +548,13 @@ class Vaporous {
         return this;
     }
 
-    toGraph(x, y, series, trellis = false, options = {}) {
+    toGraph(x, y, series, trellis = false) {
 
         if (!(y instanceof Array)) y = [y]
-        if (options.y2 instanceof RegExp) options.y2 = options.y2.toString()
 
-        const yAggregations = y.map(item => new Aggregation(item, 'list', item))
+        const yAggregations = y.map(item => [
+            new Aggregation(item, 'list', item),
+        ]).flat()
 
         this.stats(
             ...yAggregations,
@@ -422,7 +574,14 @@ class Vaporous {
 
             event[series].forEach((series, i) => {
                 y.forEach(item => {
-                    const name = y.length === 1 ? series : `${series}_${item}`
+                    let name;
+                    if (y.length === 1) {
+                        if (series === undefined) name = item
+                        else name = series
+                    } else {
+                        if (series !== undefined) name = `${series}_${item}`
+                        else name = item
+                    }
                     obj[name] = event[item][i]
                 })
             })
@@ -447,6 +606,7 @@ class Vaporous {
         })
 
         const graphFlags = {}
+
         if (trellis) {
             graphFlags.trellis = true;
             graphFlags.trellisName = Object.keys(trellisMap)
@@ -464,23 +624,14 @@ class Vaporous {
             graphFlags.columnDefinitions = [adjColumns]
         }
 
-        Object.assign(graphFlags, options)
         this.graphFlags.push(graphFlags)
         return this;
     }
 
-    render() {
+    render(location = './Vaporous_generation.html') {
         const classSafe = (name) => name.replace(/[^a-zA-Z0-9]/g, "_")
 
-        const createElement = (name, type, visualisationOptions, eventData, { trellis, y2, sortX, trellisName = "", y2Type, y1Type, stacked, y1Min, y2Min, columnDefinitions }) => {
-
-            if (typeof y2 === 'string') {
-                y2 = y2.split("/")
-                const flags = y2.at(-1)
-                y2.pop()
-                const content = y2.splice(1).join("/")
-                y2 = new RegExp(content, flags)
-            }
+        const createElement = (name, type, visualisationOptions, eventData, { trellis, trellisName = "" }) => {
 
             if (classSafe(visualisationOptions.tab) !== selectedTab) return;
 
@@ -496,88 +647,41 @@ class Vaporous {
                 eventData = pairs.map(p => p[1]);
             }
 
-            eventData.forEach((trellisData, i) => {
-                const data = new google.visualization.DataTable();
-
-                const series = {}, axis0 = { targetAxisIndex: 0 }, axis1 = { targetAxisIndex: 1 }
-
-                if (y1Type) axis0.type = y1Type
-                if (y2Type) axis1.type = y2Type
-
-                // Create columns
-                const columns = columnDefinitions[i]
-
-                columns.forEach((key, i) => {
-                    // TODO: we might have to iterate the dataseries to find this information - most likely update the column definition references 
-                    const colType = typeof trellisData[0][key]
-                    data.addColumn(colType === 'undefined' ? "number" : colType, key)
-
-                    if (y2 && i !== 0) {
-                        let match = false;
-                        if (y2 instanceof Array) { match = y2.includes(key) }
-                        else if (y2 instanceof RegExp) { match = y2.test(key) }
-
-                        if (match) series[i - 1] = axis1
-                    }
-
-                    if (!series[i - 1]) series[i - 1] = axis0
-                })
-
-                let rows = trellisData.map(event => {
-                    return columns.map(key => event[key])
-                })
-
-                rows = _sort(sortX, rows, 0)
-
-                data.addRows(rows);
-
-                const columnCount = visualisationOptions.columns || 2
-                const thisEntity = document.createElement('div')
-                thisEntity.className = "parentHolder"
-                thisEntity.style = `flex: 1 0 calc(${100 / columns}% - 6px); max-width: calc(${100 / columnCount}% - 6px);`
+            const columnCount = visualisationOptions.columns || 2
 
+            eventData.forEach((trellisData, i) => {
+                const parentHolder = document.createElement('div')
 
-                const thisGraph = document.createElement('div')
-                thisGraph.className = "graphHolder"
-                thisEntity.appendChild(thisGraph)
-                document.getElementById('content').appendChild(thisEntity)
 
-                const chartElement = new google.visualization[type](thisGraph)
 
-                google.visualization.events.addListener(chartElement, 'select', (e) => {
-                    console.log(chartElement.getSelection()[1], chartElement.getSelection()[0])
-                    tokens[name] = trellisData[chartElement.getSelection()[0].row]
-                    console.log(tokens[name])
-                });
+                document.getElementById('content').appendChild(parentHolder)
 
-                const title = trellis ? name + trellisName[i] : name
+                parentHolder.style = `flex: 0 0 calc(${100 / columnCount}% - 8px); max-width: calc(${100 / columnCount}% - 8px);`
+                if (type === 'Table') {
+                    new Tabulator(parentHolder, { data: trellisData, autoColumns: 'full', layout: "fitDataStretch", })
+                } else {
+                    const graphEntity = document.createElement('canvas')
+                    parentHolder.appendChild(graphEntity)
+                    new Chart(graphEntity, trellisData)
+                }
 
-                chartElement.draw(data, {
-                    series, showRowNumber: false, legend: { position: 'bottom' }, title, isStacked: stacked,
-                    width: document.body.scrollWidth / columnCount - (type === "LineChart" ? 12 : 24),
-                    animation: { duration: 500, startup: true },
-                    chartArea: { width: '85%', height: '75%' },
-                    vAxis: {
-                        viewWindow: {
-                            min: y1Min
-                        }
-                    },
-                    pointSize: type === 'ScatterChart' ? 2 : undefined
-                })
             })
         }
 
-        const filePath = './Vaporous_generation.html'
+        const filePath = location
         fs.writeFileSync(filePath, `
 <html>
         <head>
+        <meta name="viewport" content="width=device-width, initial-scale=0.5">
             <style>
                 ${styles}
             </style>
-    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+    
+            <link href="https://unpkg.com/tabulator-tables@6.3.1/dist/css/tabulator.min.css" rel="stylesheet">
+            <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.3.1/dist/js/tabulator.min.js"></script>
+            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    
     <script type="text/javascript">
-      google.charts.load('current', {'packages':['table', 'corechart']});
-      google.charts.setOnLoadCallback(drawVis);
 
       const classSafe = ${classSafe.toString()}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vaporous",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Transition data to different structured states for analytical processing",
   "main": "Vaporous.js",
   "scripts": {

package/readme.md

@@ -1,22 +1,22 @@
-# Vaporous
-Vaporous provides a chained query syntax for accessing unstructured data and converting it into interpretable analytics. 
-
-The tool is still in its early phases of development and is missing quality of life features for query writers
-
-
-
-## Examples
-You can find example queries [via git in the examples folder](https://github.com/lkashl/vaporous/tree/main/examples)
-
-Interactive previews are available here:
-
-- [Virtualised temperature sensor data](https://lkashl.github.io/vaporous/pages/temp_sensors.html)
-- [CSV delimited virtruvian data](https://lkashl.github.io/vaporous/pages/gym.html)
-
-
-## TODO List
-- Support web page embedded Vaporous so clients can use browser folder storage as file input
-- Add an error for if a user tries to generate a graph without first calling toGraph
-- Intercept structual errors earlier and add validation to functions - not necessarily data as this casues overhaead
-- Migrate reponsibility for tabular conversion from create element to the primary library to reduce overhead of graph generation
-
+# Vaporous
+Vaporous provides a chained query syntax for accessing unstructured data and converting it into interpretable analytics
+
+The tool is still in its early phases of development and is missing some quality of life features
+
+The query syntax is heavily inspired by splunk with more bias towards programmitic functionality
+
+## Examples
+
+Interactive previews for two datasources are available
+
+- [Virtualised temperature sensor data](https://lkashl.github.io/vaporous/pages/temp_sensors.html)
+- [CSV delimited virtruvian data](https://lkashl.github.io/vaporous/pages/gym.html)
+
+Examples of the source queries used can be referenced in the [examples folder](https://github.com/lkashl/vaporous/tree/main/examples)
+
+## TODO List
+- Support web page embedded Vaporous so clients can use browser folder storage as file input
+- Add an error for if a user tries to generate a graph without first calling toGraph
+- Intercept structual errors earlier and add validation to functions - not necessarily data as this casues overhaead
+- Migrate reponsibility for tabular conversion from create element to the primary library to reduce overhead of graph generation
+

package/styles.css

@@ -1,79 +1,83 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
-
-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;
-}
-
-body {
-    margin: 0;
-    padding: 0;
-}
-
-.tabBar {
-    display: flex;
-    background: #dcdcdc;
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
-    margin-bottom: 8px;
-    width: 100%;
-    height: 32px;
-}
-
-.tabs {
-    flex: 1;
-    padding: 8px 20px;
-    cursor: pointer;
-    background: none;
-    border: none;
-    outline: none;
-    font-size: 1rem;
-    color: #555;
-    transition: background 0.3s, color 0.3s;
-    text-align: center;
-}
-
-.tabs:not(.selectedTab):hover {
-    background: #e0e0e0;
-    color: #222;
-}
-
-.selectedTab {
-    background: #1976d2;
-    color: #fff;
-    font-weight: bold;
-    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15);
-    transition: background 0.3s, color 0.3s;
-}
-
-#content {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0px;
-}
-
-.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,
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
+
+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;
+}
+
+body {
+    margin: 0;
+    padding: 16px;
+}
+
+.tabBar {
+    display: flex;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
+    min-height: 32px;
+    margin-bottom: 8px;
+    margin-top: 8px;
+    margin-left: 8px;
+    margin-right: 8px;
+}
+
+.tabs {
+    border-radius: 8px;
+    padding: 8px 20px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    color: #555;
+    transition: background 0.3s, color 0.3s;
+    text-align: center;
+    margin: 12px;
+}
+
+.tabs:not(.selectedTab):hover {
+    background: #e0e0e0;
+    color: #222;
+}
+
+.selectedTab {
+    background: #1976d2;
+    color: #fff;
+    font-weight: bold;
+    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15);
+    transition: background 0.3s, color 0.3s;
+}
+
+#content {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0px;
+    gap: 8px;
+    justify-content: space-between;
+}
+
+.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,
 }

package/types/Aggregation.js

@@ -23,8 +23,8 @@ class Aggregation {
         return [...new Set(values)];
     }
 
-    calculate(statObj) {
-        return this[this.type](statObj._statsRaw[this.field])
+    calculate(val) {
+        return this[this.type](val)
     }
 
     max(values) {