@graphenedata/cli 0.0.5 → 0.0.7

package/dist/ui/components/Bar.svelte

@@ -16,6 +16,7 @@
     getFormatObjectFromString,
   } from '../component-utilities/formatting.js'
   import {getThemeStores} from '../component-utilities/themeStores'
+  import {parseCommaList} from '../component-utilities/inputUtils.ts'
 
   const {resolveColor} = getThemeStores()
 
@@ -77,8 +78,8 @@
   // Prop check. If local props supplied, use those. Otherwise fall back to global props.
   $: data = $props.data
   $: x = $props.x
-  $: y = ySet ? y : $props.y
-  $: y2 = y2Set ? y2 : $props.y2
+  $: y = ySet ? parseCommaList(y) : $props.y
+  $: y2 = y2Set ? parseCommaList(y2) : $props.y2
   $: yFormat = $props.yFormat
   $: y2Format = $props.y2Format
   $: yCount = $props.yCount
@@ -89,14 +90,18 @@
   $: columnSummary = $props.columnSummary
   $: sort = $props.sort
   $: series = seriesSet ? series : $props.series
+  $: seriesOrder = parseCommaList(seriesOrder)
 
   let stackedData
   let sortOrder
   let defaultLabelPosition
 
-  $: if (!series && typeof y !== 'object') {
+  $: if (!series && (!Array.isArray(y) || y.length === 1)) {
     // Single Series
-    name = name ?? formatTitle(y, columnSummary[y].title)
+    {
+      let col = Array.isArray(y) ? y[0] : y
+      name = name ?? formatTitle(col, columnSummary[col].title)
+    }
 
     if (swapXY && xType !== 'category') {
       data = getCompletedData(data, x, y, series, true, xType !== 'time')
@@ -112,10 +117,11 @@
     if (sort === true && xType === 'category') {
       stackedData = getStackedData(data, x, y)
 
-      if (typeof y === 'object') {
+      if (Array.isArray(y) && y.length > 1) {
         stackedData = getSortedData(stackedData, 'stackTotal', false)
       } else {
-        stackedData = getSortedData(stackedData, y, false)
+        let col = Array.isArray(y) ? y[0] : y
+        stackedData = getSortedData(stackedData, col, false)
       }
 
       sortOrder = stackedData.map((d) => d[x])
@@ -233,7 +239,7 @@
     if (
       labels === true &&
       type === 'stacked' &&
-      (typeof y === 'object') | (series !== undefined) &&
+      ((Array.isArray(y) && y.length > 1) || (series !== undefined)) &&
       stackTotalLabel === true &&
       series !== x
     ) {
@@ -309,7 +315,7 @@
         } else {
           d.yAxis[0] = {...d.yAxis[0], ...chartOverrides.yAxis}
           d.xAxis = {...d.xAxis, ...chartOverrides.xAxis}
-          if (y2) {
+          if (y2Count > 0) {
             d.yAxis[1] = {...d.yAxis[1], show: true}
             if (['line', 'bar', 'scatter'].includes(y2SeriesType)) {
               for (let i = 0; i < y2Count; i++) {

package/dist/ui/components/BarChart.svelte

@@ -3,6 +3,7 @@
   import Bar from './Bar.svelte'
   import QueryLoad from './QueryLoad.svelte'
   import {getThemeStores} from '../component-utilities/themeStores'
+  import {parseCommaList} from '../component-utilities/inputUtils.ts'
 
   const {resolveColor, resolveColorsObject, resolveColorPalette} = getThemeStores()
 
@@ -114,10 +115,10 @@
   export let xLabelWrap = undefined
 </script>
 
-<QueryLoad data={data} fields={{x, y, y2, series}} let:loaded>
+<QueryLoad data={data} fields={{x, y: parseCommaList(y), y2: parseCommaList(y2), series}} let:loaded>
   <Chart
     data={loaded}
-    chartContext={{data, x, y, y2, series}}
+    chartContext={{data, x, y, series}}
     {x}
     {y}
     {y2}

package/dist/ui/components/Chart.svelte

@@ -23,6 +23,7 @@
   import checkInputs from '../component-utilities/checkInputs.js'
   import {getThemeStores} from '../component-utilities/themeStores'
   import {toBoolean} from '../component-utilities/convert'
+  import {parseCommaList} from '../component-utilities/inputUtils.ts'
   import {logError} from '../internal/telemetry.ts'
 
   const {theme, resolveColor, resolveColorsObject, resolveColorPalette} = getThemeStores()
@@ -250,7 +251,10 @@
       inputCols = []
       optCols = []
       uColName = []
-      ySet = y ? true : false
+      // Normalize list-like inputs first
+      y = parseCommaList(y)
+      y2 = parseCommaList(y2)
+      ySet = y.length > 0
       xSet = x ? true : false
 
       checkInputs(data) // check that dataset exists
@@ -286,7 +290,7 @@
           }
         }
 
-        y = unusedColumns.length > 1 ? unusedColumns : unusedColumns[0]
+        y = unusedColumns // always array; empty handled by required prop checks
       }
       // Establish required columns based on chart type:
       if (bubble) {
@@ -322,40 +326,17 @@
       }
 
       // Fix for stacked100 overwriting y variable. Bandaid fix - not a long-term solution:
-      if (stacked100 === true && y.includes('_pct') && originalRun === false) {
-        if (typeof y === 'object') {
-          for (let i = 0; i < y.length; i++) {
-            y[i] = y[i].replace('_pct', '')
-          }
-          originalRun = false
-        } else {
-          y = y.replace('_pct', '')
-          originalRun = false
-        }
+      if (stacked100 === true && Array.isArray(y) && y.some(col => col.includes('_pct')) && originalRun === false) {
+        for (let i = 0; i < y.length; i++) y[i] = y[i].replace('_pct', '')
+        originalRun = false
       }
 
       // Check the inputs supplied to the chart:
       if (x) {
         inputCols.push(x)
       }
-      if (y) {
-        if (typeof y === 'object') {
-          for (i = 0; i < y.length; i++) {
-            inputCols.push(y[i])
-          }
-        } else {
-          inputCols.push(y)
-        }
-      }
-      if (y2) {
-        if (typeof y2 === 'object') {
-          for (i = 0; i < y2.length; i++) {
-            inputCols.push(y2[i])
-          }
-        } else {
-          inputCols.push(y2)
-        }
-      }
+      if (Array.isArray(y)) for (i = 0; i < y.length; i++) inputCols.push(y[i])
+      if (Array.isArray(y2)) for (i = 0; i < y2.length; i++) inputCols.push(y2[i])
       if (size) {
         inputCols.push(size)
       }
@@ -374,18 +355,8 @@
 
       if (stacked100 === true) {
         data = getStackPercentages(data, x, y)
-
-        if (typeof y === 'object') {
-          for (let i = 0; i < y.length; i++) {
-            y[i] = y[i] + '_pct'
-          }
-          originalRun = false
-        } else {
-          y = y + '_pct'
-          originalRun = false
-        }
-
-        // Re-run column summary for new columns (not ideal):
+        for (let i = 0; i < y.length; i++) y[i] = y[i] + '_pct'
+        originalRun = false
         columnSummary = getColumnSummary(data)
       }
 
@@ -428,7 +399,7 @@
       }
 
       // Throw error if attempting to plot secondary y-axis on horizontal chart:
-      if (swapXY && y2) {
+      if (swapXY && y2.length) {
         throw Error(
           'Horizontal charts do not support a secondary y-axis. You can either set swapXY=false or remove the y2 prop from your chart.',
         )
@@ -446,7 +417,10 @@
       // Sort data based on xType
       // ---------------------------------------------------------------------------------------
       if (sort) {
-        let sortColumn = xDataType === 'category' ? y : x
+        let sortColumn = x
+        if (xDataType === 'category') {
+          sortColumn = Array.isArray(y) ? (y[0] ?? x) : x
+        }
         let sortAscending = xDataType !== 'category'
         data = getSortedData(data, sortColumn, sortAscending)
       }
@@ -479,38 +453,16 @@
         xFormat = columnSummary[x].format
       }
 
-      if (!y) {
+      if (y.length === 0) {
         yFormat = 'str'
       } else {
-        if (yFmt) {
-          if (typeof y === 'object') {
-            yFormat = getFormatObjectFromString(yFmt, columnSummary[y[0]].format?.valueType)
-          } else {
-            yFormat = getFormatObjectFromString(yFmt, columnSummary[y].format?.valueType)
-          }
-        } else {
-          if (typeof y === 'object') {
-            yFormat = columnSummary[y[0]].format
-          } else {
-            yFormat = columnSummary[y].format
-          }
-        }
+        if (yFmt) yFormat = getFormatObjectFromString(yFmt, columnSummary[y[0]].format?.valueType)
+        else yFormat = columnSummary[y[0]].format
       }
 
-      if (y2) {
-        if (y2Fmt) {
-          if (typeof y2 === 'object') {
-            y2Format = getFormatObjectFromString(y2Fmt, columnSummary[y2[0]].format?.valueType)
-          } else {
-            y2Format = getFormatObjectFromString(y2Fmt, columnSummary[y2].format?.valueType)
-          }
-        } else {
-          if (typeof y2 === 'object') {
-            y2Format = columnSummary[y2[0]].format
-          } else {
-            y2Format = columnSummary[y2].format
-          }
-        }
+      if (y2.length) {
+        if (y2Fmt) y2Format = getFormatObjectFromString(y2Fmt, columnSummary[y2[0]].format?.valueType)
+        else y2Format = columnSummary[y2[0]].format
       }
 
       if (size) {
@@ -523,21 +475,9 @@
 
       xUnitSummary = columnSummary[x].columnUnitSummary
 
-      if (y) {
-        if (typeof y === 'object') {
-          yUnitSummary = columnSummary[y[0]].columnUnitSummary
-        } else {
-          yUnitSummary = columnSummary[y].columnUnitSummary
-        }
-      }
+      if (y.length) yUnitSummary = columnSummary[y[0]].columnUnitSummary
 
-      if (y2) {
-        if (typeof y2 === 'object') {
-          y2UnitSummary = columnSummary[y2[0]].columnUnitSummary
-        } else {
-          y2UnitSummary = columnSummary[y2].columnUnitSummary
-        }
-      }
+      if (y2.length) y2UnitSummary = columnSummary[y2[0]].columnUnitSummary
 
       if (xAxisTitle === 'true') {
         xAxisTitle = formatTitle(x, xFormat)
@@ -546,13 +486,21 @@
       }
 
       if (yAxisTitle === 'true') {
-        yAxisTitle = typeof y === 'object' ? '' : formatTitle(y, yFormat)
+        if (y.length === 1) {
+          yAxisTitle = formatTitle(y[0], yFormat)
+        } else {
+          yAxisTitle = ''
+        }
       } else if (yAxisTitle === 'false') {
         yAxisTitle = ''
       }
 
       if (y2AxisTitle === 'true') {
-        y2AxisTitle = typeof y2 === 'object' ? '' : formatTitle(y2, y2Format)
+        if (y2.length === 1) {
+          y2AxisTitle = formatTitle(y2[0], y2Format)
+        } else {
+          y2AxisTitle = ''
+        }
       } else if (y2AxisTitle === 'false') {
         y2AxisTitle = ''
       }
@@ -560,18 +508,13 @@
       // ---------------------------------------------------------------------------------------
       // Get total series count
       // ---------------------------------------------------------------------------------------
-      let yCount = typeof y === 'object' ? y.length : 1
+      let yCount = y.length
       let seriesCount = series ? getDistinctCount(data, series) : 1
       let ySeriesCount = yCount * seriesCount
 
       // y2Count may need to be adjusted to also factor in the series column. For now, we really
       // only need to know that it's multi-series, so > 1 is sufficient
-      let y2Count = 0
-      if (typeof y2 === 'object') {
-        y2Count = y2.length
-      } else if (y2) {
-        y2Count = 1
-      }
+      let y2Count = y2.length
       let totalSeriesCount = ySeriesCount + y2Count
 
       // ---------------------------------------------------------------------------------------
@@ -594,15 +537,13 @@
       }
 
       let minYValue
-      if (typeof y === 'object') {
+      if (y.length) {
         minYValue = columnSummary[y[0]].columnUnitSummary.min
         for (let i = 0; i < y.length; i++) {
           if (columnSummary[y[i]].columnUnitSummary.min < minYValue) {
             minYValue = columnSummary[y[i]].columnUnitSummary.min
           }
         }
-      } else if (y) {
-        minYValue = columnSummary[y].columnUnitSummary.min
       }
 
       if (yLog === true && minYValue <= 0 && minYValue !== null) {
@@ -747,7 +688,7 @@
         }
       } else {
         let primaryAxisColor = (() => {
-          if (!y2) return undefined
+          if (!(Array.isArray(y2) && y2.length)) return undefined
           if ($yAxisColorStore === 'true') return $colorPaletteStore[0]
           if ($yAxisColorStore === 'false') return undefined
           return $yAxisColorStore
@@ -857,7 +798,7 @@
 
       hasTitle = title ? true : false
       hasSubtitle = subtitle ? true : false
-      hasLegend = legend * (series !== null || (typeof y === 'object' && y.length > 1))
+      hasLegend = legend * (series !== null || (y.length > 1))
       hasTopAxisTitle = yAxisTitle !== '' && swapXY
       hasBottomAxisTitle = xAxisTitle !== '' && !swapXY
 
@@ -1048,7 +989,13 @@
       console.error(setTextRed, `Error in ${chartType}: ${e.message}`)
 
       // Make an "id" for the chart so its clear to users/agents exactly which caused an error.
-      let fieldStr = Object.entries(chartContext || {}).filter(([_, val]) => !!val).map(([name, val]) => `${name}="${val}"`)
+      let fieldStr = Object.entries(chartContext || {})
+        .filter(([_, val]) => {
+          if (Array.isArray(val)) return val.length > 0
+          if (typeof val === 'string') return val.trim().length > 0
+          return Boolean(val)
+        })
+        .map(([name, val]) => `${name}="${Array.isArray(val) ? val.join(', ') : val}"`)
       let id = `${title || chartType} (${fieldStr.join(' ')})`
       logError(e, {id})
 

package/dist/ui/components/Column.svelte

@@ -7,6 +7,7 @@
   import {propKey, strictBuild} from '../component-utilities/chartContext.js'
   import {getThemeStores} from '../component-utilities/themeStores'
   import {toBoolean} from '../component-utilities/convert'
+  import {parseCommaList} from '../component-utilities/inputUtils.ts'
 
   export let id: string
   export let description: string | undefined = undefined
@@ -64,6 +65,7 @@
   $: colorScaleStore = resolveColorPalette(colorScale)
 
   const props = getContext(propKey)
+  $: colorBreakpoints = parseCommaList(colorBreakpoints)
 
   const identifier = Symbol('GrapheneColumn')
 

package/dist/ui/components/Line.svelte

@@ -8,6 +8,7 @@
   import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
   import {getThemeStores} from '../component-utilities/themeStores'
   import {toBoolean} from '../component-utilities/convert'
+  import {parseCommaList} from '../component-utilities/inputUtils.ts'
 
   const {resolveColor} = getThemeStores()
   const props = getContext(propKey)
@@ -90,12 +91,14 @@
   $: xMismatch = $props.xMismatch
   $: columnSummary = $props.columnSummary
   $: series = seriesSet ? series : $props.series
-  $: resolvedY = ySet ? y : $props.y
-  $: resolvedY2 = y2Set ? y2 : $props.y2
+  $: resolvedY = ySet ? parseCommaList(y) : $props.y
+  $: resolvedY2 = y2Set ? parseCommaList(y2) : $props.y2
+  $: seriesOrder = parseCommaList(seriesOrder)
 
   $: {
-    if (!series && typeof resolvedY !== 'object') {
-      if (columnSummary?.[resolvedY]) name = name ?? formatTitle(resolvedY, columnSummary[resolvedY].title)
+    if (!series && (!Array.isArray(resolvedY) || resolvedY.length === 1)) {
+      let col = Array.isArray(resolvedY) ? resolvedY[0] : resolvedY
+      if (columnSummary?.[col]) name = name ?? formatTitle(col, columnSummary[col].title)
     } else {
       try {
         data = getCompletedData(data, x, resolvedY, series)
@@ -194,7 +197,7 @@
       } else {
         value.yAxis[0] = {...value.yAxis[0], ...chartOverrides.yAxis}
         value.xAxis = {...value.xAxis, ...chartOverrides.xAxis}
-        if (resolvedY2) {
+        if (y2Count > 0) {
           value.yAxis[1] = {...value.yAxis[1], show: true}
           if (['line', 'bar', 'scatter'].includes(y2SeriesType)) {
             for (let index = 0; index < y2Count; index++) {

package/dist/ui/components/LineChart.svelte

@@ -3,6 +3,7 @@
   import Line from './Line.svelte'
   import QueryLoad from './QueryLoad.svelte'
   import {getThemeStores} from '../component-utilities/themeStores'
+  import {parseCommaList} from '../component-utilities/inputUtils.ts'
 
   const {resolveColor, resolveColorsObject, resolveColorPalette} = getThemeStores()
 
@@ -98,11 +99,10 @@
   export let xLabelWrap = undefined
 </script>
 
-
-<QueryLoad data={data} fields={{x, y, y2, series}} let:loaded>
+<QueryLoad data={data} fields={{x, y: parseCommaList(y), y2: parseCommaList(y2), series}} let:loaded>
   <Chart
     data={loaded}
-    chartContext={{data, x, y, y2, series}}
+    chartContext={{data, x, y, series}}
     {x}
     {y}
     {y2}

package/dist/ui/components/QueryLoad.svelte

@@ -4,7 +4,7 @@
 
   export let data: string | {rows?: any[]}
   export let height = 200
-  export let fields: Record<string, string> = {}
+  export let fields: Record<string, string | string[]> = {}
 
   let errors: Error[] | null = null
   let loaded: any[] | null = null

package/dist/ui/internal/queryEngine.ts

@@ -23,7 +23,7 @@ interface QueryNode {
   contents: string
   callback?: ResultHandler
   loading: boolean
-  fields: Map<string, string>
+  fields: Map<string, string | string[]>
   errors: Error[]
 }
 
@@ -41,10 +41,18 @@ function updateParam (name: string, value: any) {
   runAll() // for now, do the easy thing and reload it all
 }
 
-function query (source: string, fields: Record<string, string>, callback: ResultHandler) {
+function query (source: string, fields: Record<string, string | string[]>, callback: ResultHandler) {
   // using Map here because it preserves the order in which we add fields to the select, which we use when we get the result.
   let map = new Map(Object.entries(fields))
-  let exprs = map.size > 0 ? Array.from(map.values()) : ['*']
+  let exprs: string[] = []
+  if (map.size > 0) {
+    map.forEach((value) => {
+      if (Array.isArray(value)) exprs.push(...value)
+      else exprs.push(value)
+    })
+  } else {
+    exprs = ['*']
+  }
   let contents = `from ${source} select ${exprs.join(', ')}`
   queries.push({contents, callback, loading: false, fields: map, errors: [], source})
   runAll()
@@ -87,13 +95,22 @@ async function runNode (n: QueryNode) {
       let body = isJson ? await response.json() : await response.text()
       n.errors = Array.isArray(body) ? body : [{message: body}]
 
-      let fieldIds = Array.from(n.fields.entries()).map(([name, val]) => `${name}="${val}"`)
+      let fieldIds = Array.from(n.fields.entries()).flatMap(([name, val]) => {
+        if (Array.isArray(val)) {
+          if (val.length === 0) return [] as string[]
+          if (val.length === 1) return [`${name}="${val[0]}"`]
+          return [`${name}="${val.join(', ')}"`]
+        }
+        if (typeof val === 'string' && val.trim().length === 0) return [] as string[]
+        if (val == null) return [] as string[]
+        return [`${name}="${val}"`]
+      })
       let idStr = `Query (data="${n.source}" ` + fieldIds.join(' ') + ')'
-      n.errors.forEach(e => e.id = idStr)
+      n.errors.forEach(e => (e as any).id = idStr)
       n.callback({errors: n.errors})
     }
   } catch (e) {
-    n.errors = [e]
+    n.errors = [e as Error]
   } finally {
     n.loading = false
   }
@@ -115,7 +132,11 @@ function translateData (data: any, node: QueryNode) {
   let rows = data.rows || []
   rows.dataLoaded = true // evidence components need this to be set
   rows._evidenceColumnTypes = []
-  let requestFields = Array.from(node.fields.values())
+  let requestFields: string[] = []
+  node.fields.forEach((value) => {
+    if (Array.isArray(value)) requestFields.push(...value)
+    else requestFields.push(value)
+  })
 
   data.fields.forEach((field, index) => {
     let name = field.name
@@ -143,7 +164,7 @@ errorProvider('queryEngine', () => {
   queries.flatMap(q => q.errors).filter(q => !!q).forEach(e => {
     unique[e.message + String((e as any).from?.lineText)] = e
   })
-  return Object.values(unique)
+  return Object.values(unique) as Error[]
 })
 
 async function waitForQueries (timeout = 20_000) {

package/dist/ui/web.js

@@ -86,10 +86,11 @@ async function captureChart (chartTitle) {
 async function takeScreenshot () {
   await waitForQueriesToFinish()
   if (!window.html2canvas) {
-    let html2canvas = await import('html2canvas')
+    let html2canvas = await import('@graphenedata/html2canvas')
     window.html2canvas = html2canvas.default
   }
-  let canvas = await window.html2canvas(document.body, {useCORS: true, allowTaint: true, scale: 1})
+
+  let canvas = await window.html2canvas(document.body, {useCORS: true, allowTaint: true, scale: 1, liveDOM: true})
   let errors = getErrors().map(e => ({message: e.message, id: e.id}))
   return {stillLoading: isLoading(), screenshot: canvas?.toDataURL('image/png'), errors}
 }

package/package.json

@@ -3,7 +3,7 @@
   "main": "cli.ts",
   "type": "module",
   "author": "Graphene Systems Inc",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "license": "Elastic-2.0",
   "engines": {
     "node": ">=16"
@@ -25,6 +25,7 @@
   "dependencies": {
     "@duckdb/node-api": "1.3.2-alpha.26",
     "@google-cloud/bigquery": "^8.1.1",
+    "@graphenedata/html2canvas": "^1.4.1",
     "@graphenedata/malloy": "0.0.304",
     "@lezer/common": "^1.2.3",
     "@lezer/lr": "^1.4.2",
@@ -36,10 +37,10 @@
     "cli-table3": "^0.6.3",
     "commander": "^11.0.0",
     "debounce": "^1.2.1",
+    "dotenv": "^17.2.3",
     "echarts": "^5.5.0",
     "fs-extra": "11.2.0",
     "glob": "^11.0.3",
-    "html2canvas": "^1.4.1",
     "marked": "^16.3.0",
     "mdsvex": "^0.12.6",
     "nanoid": "3.3.8",