vaporous 0.0.3 → 0.0.5

package/Vaporous.js

@@ -14,7 +14,6 @@ const styles = fs.readFileSync(__dirname + '/styles.css')
 const Papa = require('papaparse')
 
 // These globals allow us to write functions from the HTML page directly without needing to stringify
-class google { }
 const document = {}
 
 const keyFromEvent = (event, bys) => bys.map(i => event[i.bySplit]).join('|')
@@ -35,7 +34,7 @@ const _sort = (order, data, ...keys) => {
 
 class Vaporous {
 
-    constructor() {
+    constructor({ loggers } = {}) {
         this.events = [];
         this.visualisations = [];
         this.visualisationData = []
@@ -44,9 +43,50 @@ class Vaporous {
 
         this.savedMethods = {}
         this.checkpoints = {}
+
+        this.loggers = loggers
+        this.perf = null
+        this.totalTime = 0
+    }
+
+    manageEntry() {
+        if (this.loggers?.perf) {
+            const [, , method, ...origination] = new Error().stack.split('\n')
+            const invokedMethod = method.match(/Vaporous.(.+?) /)
+
+            let orig = origination.find(orig => {
+                const originator = orig.split("/").at(-1)
+                return !originator.includes("Vaporous")
+            })
+
+            orig = orig.split("/").at(-1)
+            const logLine = "(" + orig + " BEGIN " + invokedMethod[1]
+            this.loggers.perf('info', logLine)
+            this.perf = { time: new Date().valueOf(), logLine }
+        }
+    }
+
+    manageExit() {
+        if (this.loggers?.perf) {
+            let { logLine, time } = this.perf;
+            const executionTime = new Date() - time
+            this.totalTime += executionTime
+
+            const match = logLine.match(/^.*?BEGIN/);
+            const prepend = "END"
+            if (match) {
+                const toReplace = match[0]; // the matched substring
+                const spaces = " ".repeat(toReplace.length - prepend.length); // same length, all spaces
+                logLine = spaces + prepend + logLine.replace(toReplace, "");
+            }
+
+            this.loggers.perf('info', logLine + " (" + executionTime + "ms)")
+        }
+        return this
     }
 
     method(operation, name, options) {
+        if (operation != 'retrieve') this.manageEntry()
         const operations = {
             create: () => {
                 this.savedMethods[name] = options
@@ -61,70 +101,91 @@ class Vaporous {
 
 
         operations[operation]()
-        return this
+        if (operation !== 'retrieve') return this.manageExit()
+        return this;
+    }
+
+    filterIntoCheckpoint(checkpointName, funct, destroy) {
+        this.manageEntry()
+        const dataCheckpoint = this.events.filter(funct)
+        this._checkpoint('create', checkpointName, dataCheckpoint)
+        if (destroy) this.events = this.events.filter(event => !funct(event))
+        return this.manageExit()
     }
 
     filter(...args) {
+        this.manageEntry()
         this.events = this.events.filter(...args)
-        return this
+        return this.manageExit()
     }
 
     append(entities) {
+        this.manageEntry()
         this.events = this.events.concat(entities)
-        return this;
+        return this.manageExit()
     }
 
     eval(modifier) {
+        this.manageEntry()
         this.events.forEach(event => {
             const vals = modifier(event)
             if (vals) Object.assign(event, vals)
         })
-        return this;
+        return this.manageExit()
     }
 
-    table(modifier) {
+    _table(modifier) {
         this.events = this.events.map(event => {
             const vals = modifier(event)
             return vals;
         })
-        return this;
+    }
+    table(modifier) {
+        this.manageEntry()
+        this._table(modifier)
+        return this.manageExit()
     }
 
     rename(...entities) {
+        this.manageEntry()
         this.events.forEach(event => {
             entities.forEach(([from, to]) => {
                 event[to] = event[from]
                 delete event[from]
             })
         })
-        return this;
+        return this.manageExit()
     }
 
     parseTime(value, customFormat) {
+        this.manageEntry()
         this.events.forEach(event => {
             event[value] = dayjs(event[value], customFormat).valueOf()
         })
-        return this;
+        return this.manageExit()
     }
 
     bin(value, span) {
+        this.manageEntry()
         this.events.forEach(event => {
             event[value] = Math.floor(event[value] / span) * span
         })
-        return this;
+        return this.manageExit()
     }
 
     fileScan(directory) {
+        this.manageEntry()
         const items = fs.readdirSync(directory)
         this.events = items.map(item => {
             return {
                 _fileInput: path.resolve(directory, item)
             }
         })
-        return this;
+        return this.manageExit()
     }
 
     async csvLoad(parser) {
+        this.manageEntry()
         const tasks = this.events.map(obj => {
             const content = []
 
@@ -151,10 +212,11 @@ class Vaporous {
         })
 
         await Promise.all(tasks)
-        return this;
+        return this.manageExit()
     }
 
     async fileLoad(delim, parser) {
+        this.manageEntry()
         const tasks = this.events.map(obj => {
             const content = []
 
@@ -178,10 +240,11 @@ class Vaporous {
         })
 
         await Promise.all(tasks)
-        return this;
+        return this.manageExit()
     }
 
     output(...args) {
+        this.manageEntry()
         if (args.length) {
             console.log(this.events.map(event => {
                 return args.map(item => event[item])
@@ -190,10 +253,11 @@ class Vaporous {
             console.log(this.events)
         }
 
-        return this;
+        return this.manageExit()
     }
 
     flatten() {
+        this.manageEntry()
         const arraySize = this.events.reduce((acc, obj) => acc + obj._raw.length, 0)
         let flattened = new Array(arraySize)
         let i = 0
@@ -211,7 +275,7 @@ class Vaporous {
 
         })
         this.events = flattened;
-        return this;
+        return this.manageExit()
     }
 
     _stats(args, events) {
@@ -245,11 +309,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
@@ -260,11 +332,13 @@ class Vaporous {
     }
 
     stats(...args) {
+        this.manageEntry()
         this.events = this._stats(args, this.events).arr
-        return this;
+        return this.manageExit()
     }
 
     eventstats(...args) {
+        this.manageEntry()
         const stats = this._stats(args, this.events)
 
         this.events.forEach(event => {
@@ -276,7 +350,7 @@ class Vaporous {
         return this
     }
 
-    streamstats(...args) {
+    _streamstats(...args) {
         const backwardIterate = (event, i, by, maxBoundary = 0) => {
             let backwardIndex = 0
             const thisKey = keyFromEvent(event, by)
@@ -324,32 +398,186 @@ class Vaporous {
             delete event._streamstats
         })
 
-        return this;
+        return this
+    }
+
+    streamstats(...args) {
+        this.manageEntry()
+        this._streamstats(...args)
+        return this.manageExit()
     }
 
     delta(field, remapField, ...bys) {
-        this.streamstats(new Aggregation(field, 'range', remapField), new Window(2), ...bys)
-        return this;
+        this.manageEntry()
+        this._streamstats(new Aggregation(field, 'range', remapField), new Window(2), ...bys)
+        return this.manageExit()
     }
 
     sort(order, ...keys) {
+        this.manageEntry()
         this.events = _sort(order, this.events, ...keys)
-        return this;
+        return this.manageExit()
     }
 
     assert(funct) {
+        this.manageEntry()
         const expect = (funct) => { if (!funct) throw new Error('Assertion failed') }
         this.events.forEach((event, i) => {
             funct(event, i, { expect })
         })
-        return this;
+        return this.manageExit()
     }
 
-    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", legend } = {}) {
+        this.manageEntry()
 
         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: {
+                            display: legend || true,
+                            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)
@@ -360,22 +588,29 @@ class Vaporous {
             this.tabs = this.tabs.sort((a, b) => a.localeCompare(b))
         }
 
-        return this;
+        return this.manageExit()
     }
 
-    checkpoint(operation, name) {
+    _checkpoint(operation, name, data) {
 
         const operations = {
-            create: () => this.checkpoints[name] = structuredClone(this.events),
+            create: () => this.checkpoints[name] = structuredClone(data),
             retrieve: () => this.events = structuredClone(this.checkpoints[name]),
             delete: () => delete this.checkpoints[name]
         }
 
         operations[operation]()
-        return this;
+        return this
+    }
+
+    checkpoint(operation, name) {
+        this.manageEntry()
+        this._checkpoint(operation, name, this.events)
+        return this.manageExit()
     }
 
     mvexpand(target) {
+        this.manageEntry()
         const arr = []
         this.events.forEach(event => {
             if (!event[target]) return arr.push(event)
@@ -389,31 +624,33 @@ class Vaporous {
         })
 
         this.events = arr
-        return this;
+        return this.manageExit()
     }
 
     writeFile(title) {
+        this.manageEntry()
         fs.writeFileSync('./' + title, JSON.stringify(this.events))
-        return this;
+        return this.manageExit()
     }
 
-    toGraph(x, y, series, trellis = false, options = {}) {
-
+    toGraph(x, y, series, trellis = false) {
+        this.manageEntry()
         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(
+        this.events = this._stats([
             ...yAggregations,
             new Aggregation(series, 'list', series),
             new Aggregation(trellis, 'values', 'trellis'),
-            new By(x), trellis ? new By(trellis) : null
-        )
+            new By(x), trellis ? new By(trellis) : null], this.events
+        ).arr
 
         const trellisMap = {}, columnDefinitions = {}
 
-        this.table(event => {
+        this._table(event => {
             const _time = event[x]
             if (_time === null || _time === undefined) throw new Error(`To graph operation with params ${x}, ${y.join(',')} looks corrupt. x value resolves to null - the graph will not render`)
             const obj = {
@@ -422,7 +659,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 +691,7 @@ class Vaporous {
         })
 
         const graphFlags = {}
+
         if (trellis) {
             graphFlags.trellis = true;
             graphFlags.trellisName = Object.keys(trellisMap)
@@ -464,23 +709,15 @@ class Vaporous {
             graphFlags.columnDefinitions = [adjColumns]
         }
 
-        Object.assign(graphFlags, options)
         this.graphFlags.push(graphFlags)
-        return this;
+        return this.manageExit()
     }
 
-    render() {
+    render(location = './Vaporous_generation.html') {
+        this.manageEntry()
         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 +733,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()}
 
@@ -615,8 +805,9 @@ class Vaporous {
   </body>
 </html>
         `)
-
         console.log('File ouput created ', path.resolve(filePath))
+        if (this.totalTime) console.log("File completed in " + this.totalTime)
+        return this.manageExit()
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vaporous",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "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: 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,
 }

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) {