@graphenedata/cli 0.0.4 → 0.0.6

package/dist/ui/component-utilities/echarts.js

@@ -12,7 +12,7 @@ import * as chartWindowDebug from './chartWindowDebug'
  * } EChartsActionOptions
  */
 
-const ANIMATION_DURATION = 500
+const ANIMATION_DURATION = 0
 const pendingChartsKey = Symbol.for('graphene.pendingCharts')
 
 /** @returns {Set<number> | null} */
@@ -139,6 +139,7 @@ const echartsAction = (node, options) => {
   // Initial options set:
   chart.setOption({
     ...options.config,
+    animation: false,
     animationDuration: ANIMATION_DURATION,
     animationDurationUpdate: ANIMATION_DURATION,
   })
@@ -219,6 +220,7 @@ const echartsAction = (node, options) => {
     chart.setOption(
       {
         ...options.config,
+        animation: false,
         animationDuration: ANIMATION_DURATION,
         animationDurationUpdate: ANIMATION_DURATION,
       },

package/dist/ui/component-utilities/inputUtils.ts

@@ -23,3 +23,14 @@ export function serializeValue (value: unknown): string {
   let str = String(value)
   return `'${str.replace(/'/g, "''")}'`
 }
+
+// Parse a comma-separated list into an array of trimmed strings.
+// - Strings are split on commas; whitespace trimmed; empty entries removed.
+// - Arrays are normalized by trimming string items and String()-ing non-strings.
+// - null/undefined -> []
+export function parseCommaList (value: unknown): string[] {
+  if (value === undefined || value === null) return []
+  if (Array.isArray(value)) return value.map(v => typeof v === 'string' ? v.trim() : String(v)).filter(v => v.length > 0)
+  if (typeof value === 'string') return value.split(',').map(v => v.trim()).filter(v => v.length > 0)
+  return [String(value).trim()].filter(v => v.length > 0)
+}

package/dist/ui/component-utilities/themeStores.ts

@@ -12,7 +12,7 @@ type ThemeStores = {
   activeAppearance: Readable<Appearance>
   theme: Readable<Theme>
   resolveColor: <T>(input: T) => Readable<T | string | undefined>
-  resolveColorsObject: (input: Record<string, unknown> | undefined) => Readable<Record<string, string | undefined> | undefined>
+  resolveColorsObject: (input: Record<string, unknown> | string | undefined) => Readable<Record<string, string | undefined> | undefined>
   resolveColorPalette: (input: unknown) => Readable<string[] | undefined>
 }
 
@@ -55,6 +55,14 @@ const isReadable = <T>(value: unknown): value is Readable<T> => {
   return Boolean(value && typeof value === 'object' && 'subscribe' in (value as any))
 }
 
+const parseJson = (value: string): unknown => {
+  try {
+    return JSON.parse(value)
+  } catch {
+    return undefined
+  }
+}
+
 const normalizeColor = (value: unknown): string | undefined => {
   if (value == null) return undefined
   if (Array.isArray(value)) return normalizeColor(value[0])
@@ -64,25 +72,38 @@ const normalizeColor = (value: unknown): string | undefined => {
   if (!trimmed) return undefined
   if (trimmed === 'true' || trimmed === 'false') return trimmed
   if (DEFAULT_THEME.colors[trimmed]) return DEFAULT_THEME.colors[trimmed]
-  if (trimmed.startsWith('#') || trimmed.startsWith('rgb') || trimmed.startsWith('hsl') || trimmed.startsWith('var(')) return trimmed
-  if (/^[a-zA-Z0-9_-]+$/.test(trimmed)) return `var(--color-${trimmed})`
+  let lower = trimmed.toLowerCase()
+  if (trimmed.startsWith('#')) return trimmed
+  if (lower.startsWith('rgb') || lower.startsWith('hsl')) return trimmed
   return trimmed
 }
 
-const resolveColor = <T>(input: T): Readable<T | string | undefined> => {
+export const resolveColor = <T>(input: T): Readable<T | string | undefined> => {
   if (isReadable<T | string | undefined>(input)) return input
   return readable(normalizeColor(input) as T | string | undefined)
 }
 
-const resolveColorsObject = (input: Record<string, unknown> | undefined): Readable<Record<string, string | undefined> | undefined> => {
+export const resolveColorsObject = (input: Record<string, unknown> | string | undefined): Readable<Record<string, string | undefined> | undefined> => {
   if (isReadable<Record<string, string | undefined> | undefined>(input)) return input
   if (!input) return readable(undefined)
 
-  let entries = Object.entries(input).map(([key, value]) => [key, normalizeColor(value)] as const)
+  let record: Record<string, unknown> | undefined = input as Record<string, unknown>
+  if (typeof input === 'string') {
+    let parsed = parseJson(input.trim())
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      record = parsed as Record<string, unknown>
+    } else {
+      return readable(undefined)
+    }
+  }
+
+  if (!record) return readable(undefined)
+
+  let entries = Object.entries(record).map(([key, value]) => [key, normalizeColor(value)] as const)
   return readable(Object.fromEntries(entries))
 }
 
-const resolveColorPalette = (input: unknown): Readable<string[] | undefined> => {
+export const resolveColorPalette = (input: unknown): Readable<string[] | undefined> => {
   if (isReadable<string[] | undefined>(input)) return input
   if (input == null) return readable(DEFAULT_PALETTE)
 
@@ -90,6 +111,13 @@ const resolveColorPalette = (input: unknown): Readable<string[] | undefined> =>
     let key = input.trim()
     if (!key || key === 'default') return readable(DEFAULT_PALETTE)
     if (DEFAULT_THEME.colorPalettes[key]) return readable(DEFAULT_THEME.colorPalettes[key])
+    if (key.startsWith('[')) {
+      let parsed = parseJson(key)
+      if (Array.isArray(parsed)) {
+        let values = parsed.map(item => normalizeColor(item)).filter(Boolean) as string[]
+        return readable(values.length ? values : DEFAULT_PALETTE)
+      }
+    }
     if (key.includes(',')) {
       let values = key.split(',').map(part => normalizeColor(part)).filter(Boolean) as string[]
       return readable(values.length ? values : DEFAULT_PALETTE)

package/dist/ui/components/Area.svelte

@@ -10,6 +10,7 @@
     getFormatObjectFromString,
   } from '../component-utilities/formatting.js'
   import {getThemeStores} from '../component-utilities/themeStores'
+  import {parseCommaList} from '../component-utilities/inputUtils.ts'
 
   const {resolveColor} = getThemeStores()
   const props = getContext(propKey)
@@ -72,12 +73,14 @@
   $: xMismatch = $props.xMismatch
   $: columnSummary = $props.columnSummary
   $: series = seriesSet ? series : $props.series
-  $: resolvedY = ySet ? y : $props.y
+  $: resolvedY = ySet ? parseCommaList(y) : $props.y
+  $: seriesOrder = parseCommaList(seriesOrder)
 
   $: {
-    if (!series && typeof resolvedY !== 'object') {
+    if (!series && (!Array.isArray(resolvedY) || resolvedY.length === 1)) {
       stackName = undefined
-      if (columnSummary?.[resolvedY]) name = name ?? formatTitle(resolvedY, columnSummary[resolvedY].title)
+      let col = Array.isArray(resolvedY) ? resolvedY[0] : resolvedY
+      if (columnSummary?.[col]) name = name ?? formatTitle(col, columnSummary[col].title)
     } else {
       stackName = 'area'
       data = getCompletedData(data, x, resolvedY, series, false, xType === 'value')

package/dist/ui/components/AreaChart.svelte

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

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,9 +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, series}}
     {x}
     {y}
     {y2}

package/dist/ui/components/BigValue.svelte

@@ -34,7 +34,7 @@
   }
 </script>
 
-<QueryLoad {data} fields={[value]} let:loaded>
+<QueryLoad {data} fields={{value}} let:loaded>
   <div class="big-value">
     {#if title}<div class="big-value__title">{title}</div>{/if}
     {#if subtitle}<div class="big-value__subtitle">{subtitle}</div>{/if}

package/dist/ui/components/Chart.svelte

@@ -23,6 +23,8 @@
   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()
 
@@ -31,6 +33,7 @@
   // ---------------------------------------------------------------------------------------
   // Data and columns:
   export let data = undefined
+  export let chartContext = undefined
   export let queryID = undefined
   export let x = undefined
   export let y = undefined
@@ -248,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
@@ -284,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) {
@@ -320,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)
       }
@@ -372,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)
       }
 
@@ -426,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.',
         )
@@ -444,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)
       }
@@ -477,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) {
@@ -521,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)
@@ -544,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 = ''
       }
@@ -558,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
 
       // ---------------------------------------------------------------------------------------
@@ -592,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) {
@@ -745,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
@@ -855,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
 
@@ -1044,6 +987,18 @@
       error = e.message
       let setTextRed = '\x1b[31m%s\x1b[0m'
       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]) => {
+          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})
+
       props.update((d) => {
         return {...d, error}
       })
@@ -1059,11 +1014,12 @@
     {width}
     {data}
     {queryID}
+    chartTitle={title}
     {echartsOptions}
     {seriesOptions}
     {connectGroup}
     {xAxisLabelOverflow}
-    seriesColors={seriesColorsStore}
+    seriesColors={$seriesColorsStore}
   />
 {:else}
   <ErrorChart {error} title={chartType} />

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/ECharts.svelte

@@ -16,6 +16,7 @@
   export let seriesColors: any = undefined
   export let connectGroup: string | undefined = undefined
   export let xAxisLabelOverflow: 'truncate' | 'break' | undefined = undefined
+  export let chartTitle: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
   const isBrowser = typeof window !== 'undefined'
@@ -33,6 +34,7 @@
   {:else}
     <div
       class="echarts-chart"
+      data-chart-title={chartTitle ?? undefined}
       data-query-id={queryID}
       style={`height:${toDimension(height, '240px')};width:${toDimension(width, '100%')}`}
       use:echarts={{

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,10 +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, series}}
     {x}
     {y}
     {y2}