@graphenedata/cli 0.0.17 → 0.0.19

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

@@ -22,6 +22,7 @@ export function enrich(config: EChartsConfig, rows: Record<string, any>[], field
 
   // Resolve axis metadata up front so row shaping (like explicit sorting) can use it.
   inferAxesFromEncodedFields(normalized, fields, rows)
+  hideDimensionAxisChrome(normalized)
   extendValueAxisDomainsForBars(normalized)
 
   // Mutate row/field data before dataset creation so synthesized fields are reflected in dataset dimensions.
@@ -284,18 +285,31 @@ function inferAxesFromEncodedFields(config: NormalConfig, fields: Field[], rows:
 
     config.yAxis[axisIndex] = {...inferred, ...axis, axisLabel: {...inferred.axisLabel, ...axis.axisLabel}, axisPointer: {...inferred.axisPointer, ...axis.axisPointer}}
   }
+}
 
-  // Ordinal x axes already use labels to communicate the bucket boundaries, so
-  // the y-axis line reads like an extra vertical grid line at the left edge.
-  // Hide the paired y-axis line unless the caller explicitly configured it.
-  for (let [axisIndex, axis] of config.xAxis.entries()) {
-    if (!axis?.field?.metadata?.timeOrdinal) continue
+// Hide vertical grid lines for line/bar charts. For horizontal bar charts, hide the horizontal lines.
+// Other chart types (like scatter) keep the grid lines as they're helpful.
+function hideDimensionAxisChrome(config: NormalConfig) {
+  for (let series of config.series) {
+    let xAxis = config.xAxis[Number(series?.xAxisIndex ?? 0)]
+    let yAxis = config.yAxis[Number(series?.yAxisIndex ?? 0)]
+
+    let isLineOrArea = series?.type === 'line'
+    let isVerticalBar = series?.type === 'bar' && yAxis?.type !== 'category'
+    let isHorizontalBar = series?.type === 'bar' && yAxis?.type === 'category'
+
+    if (isLineOrArea || isVerticalBar) {
+      if (xAxis?.type !== 'value') continue
+      if (xAxis.splitLine?.show == null) xAxis.splitLine = {...xAxis.splitLine, show: false}
+      if (xAxis.axisLine?.show == null) xAxis.axisLine = {...xAxis.axisLine, show: false}
+      if (xAxis.axisTick?.show == null) xAxis.axisTick = {...xAxis.axisTick, show: false}
+      if (yAxis && yAxis.axisLine?.show == null) yAxis.axisLine = {...yAxis.axisLine, show: false}
+    }
 
-    let yAxisIndexes = config.series.filter(entry => Number(entry?.xAxisIndex ?? 0) === axisIndex).map(entry => Number(entry?.yAxisIndex ?? 0))
-    for (let yAxisIndex of yAxisIndexes) {
-      let yAxis = config.yAxis[yAxisIndex]
-      if (!yAxis || yAxis.axisLine?.show != null) continue
-      yAxis.axisLine = {...yAxis.axisLine, show: false}
+    if (isHorizontalBar) {
+      if (yAxis.splitLine?.show == null) yAxis.splitLine = {...yAxis.splitLine, show: false}
+      if (yAxis.axisLine?.show == null) yAxis.axisLine = {...yAxis.axisLine, show: false}
+      if (yAxis.axisTick?.show == null) yAxis.axisTick = {...yAxis.axisTick, show: false}
     }
   }
 }
@@ -406,7 +420,7 @@ function valueFormatting(config: NormalConfig, fields: Field[]) {
   let valueAxes = [...config.xAxis, ...config.yAxis].filter(axis => axis?.type === 'value' && !axis.field?.metadata?.timeOrdinal)
   for (let axis of valueAxes) {
     if (axis.axisLabel?.formatter != null) continue
-    axis.axisLabel = {...axis.axisLabel, formatter: makeValueFormatter(axis.field ? [axis.field] : [])}
+    axis.axisLabel = {...axis.axisLabel, formatter: makeValueFormatter(axis.field ? [axis.field] : [], {unitStyle: 'axis'})}
   }
 
   for (let series of config.series) {
@@ -508,22 +522,24 @@ function barLabelPositioning(config: NormalConfig) {
   }
 }
 
-// Match series data labels to the assigned y-axis formatter when labels are enabled.
-// This keeps label formatting in sync with the y-axis without asking callers to repeat it.
-// labelsUseYAxisFormat depends on valueAxisFormatting running first so labels inherit axis formatting.
+// Match series data labels to the assigned value field when labels are enabled.
+// This keeps label formatting in sync with tooltips without asking callers to repeat it.
+// labelsUseYAxisFormat depends on valueFormatting running first so labels inherit axis formatting.
 function labelsUseYAxisFormat(config: NormalConfig, fields: Field[]) {
   for (let series of config.series) {
     // No-op when labels are off or already explicitly formatted.
     if (!series?.label || series.label.show !== true || series.label.formatter != null) continue
 
-    let yField = getSeriesValueField(series, fields)?.name
+    let valueField = getSeriesValueField(series, fields)
+    let yField = valueField?.name
     let axisIndex = Number(series.yAxisIndex ?? 0)
     let axisFormatter = config.yAxis[axisIndex]?.axisLabel?.formatter
-    if (typeof axisFormatter !== 'function') continue
+    let labelFormatter = valueField ? makeValueFormatter([valueField]) : axisFormatter
+    if (typeof labelFormatter !== 'function') continue
 
     // ECharts can pass different value shapes depending on series/transform shape.
     // We resolve the numeric value in a few fallback steps so labels always use the
-    // same value the y-axis is formatting.
+    // same field that tooltips format.
     series.label.formatter = (params: unknown) => {
       let typed = params as {value?: unknown; data?: Record<string, unknown>}
       let value = typed?.value
@@ -535,7 +551,7 @@ function labelsUseYAxisFormat(config: NormalConfig, fields: Field[]) {
         }
       }
 
-      return formatAxisValue(axisFormatter, value)
+      return formatAxisValue(labelFormatter, value)
     }
   }
 }
@@ -678,49 +694,78 @@ function inferAxisFromField(field: Field | undefined, rows: Record<string, any>[
       axis.max = domain[1]
     }
 
-    if (field.metadata?.timeOrdinal) {
-      axis.minInterval = 1
+    if (field.metadata?.timeGrain === 'year') {
+      // Pin year ticks to evenly-spaced integers so a domain like [2000, 2005]
+      // doesn't end up with the 2000/2002/2004/2005 stub-label pattern.
+      let ticks = domain ? niceIntegerTicks(domain[0], domain[1]) : []
+      axis.axisLabel = {customValues: ticks, formatter: (value: unknown) => (Number.isInteger(Number(value)) ? String(Number(value)) : '')}
+      axis.axisTick = {customValues: ticks}
+      return axis
+    }
 
+    if (field.metadata?.timeOrdinal) {
       // Ordinal values are numeric so we use a value axis with a fixed domain, but
-      // visually they are discrete buckets. Hide value-axis grid lines by default
-      // and ask ECharts for denser integer ticks than its generic value defaults.
-      axis.axisLine = {show: false}
-      axis.splitLine = {show: false}
-      axis.axisLabel = {hideOverlap: true, formatter: (value: unknown) => (domain && (Number(value) < domain[0] || Number(value) > domain[1]) ? '' : formatTimeOrdinal(field, value))}
-
-      // splitNumber is a hint rather than an exact spacing, but it works better
-      // with value-axis bars because interval can fight the half-bucket padding we
-      // add later. These defaults keep compact ordinals readable without forcing
-      // every possible day/week label.
-      let ordinal = field.metadata.timeOrdinal
-      if (ordinal === 'month_of_year' || ordinal === 'quarter_of_year' || ordinal === 'dow_0s' || ordinal === 'dow_1s' || ordinal === 'dow_1m')
-        axis.splitNumber = domain ? domain[1] - domain[0] + 1 : 5
-      if (ordinal === 'hour_of_day') axis.splitNumber = 8
-      if (ordinal === 'day_of_month') axis.splitNumber = 6
-      if (ordinal === 'week_of_year') axis.splitNumber = 13
-      if (ordinal === 'day_of_year') axis.splitNumber = 12
-
+      // visually they are discrete buckets. Pin tick positions to evenly-spaced
+      // integers so we never get a stub boundary label (e.g. weeks 1, 14, 27, 40, 53).
+      let ticks = domain ? niceIntegerTicks(domain[0], domain[1]) : []
+      axis.axisLabel = {
+        hideOverlap: true,
+        customValues: ticks,
+        formatter: (value: unknown) => (domain && (Number(value) < domain[0] || Number(value) > domain[1]) ? '' : formatTimeOrdinal(field, value)),
+      }
+      axis.axisTick = {customValues: ticks}
       axis.axisPointer = {label: {formatter: (value: unknown) => formatTimeOrdinal(field, value)}}
       return axis
     }
-
-    if (field.metadata?.timePart === 'year') {
-      axis.minInterval = 1
-      axis.axisLabel = {formatter: (value: unknown) => (Number.isInteger(Number(value)) ? String(Number(value)) : '')}
-    }
   }
 
-  if (type === 'category' && field.metadata?.timeOrdinal) {
-    axis.axisLabel = {formatter: (value: unknown) => formatTimeOrdinal(field, value)}
-    axis.axisPointer = {label: {formatter: (value: unknown) => formatTimeOrdinal(field, value)}}
+  return axis
+}
+
+// Pick evenly-spaced integer tick positions across [min, max] for ordinal/year value axes.
+// Strategy:
+//   1. If the range is small enough that labeling every value is readable
+//      (≤ denseLimit, sized to cover the 12-month ordinal), label every value.
+//   2. Otherwise prefer step sizes that divide the range exactly so the last tick
+//      lands on max (avoiding the stub-label problem where ECharts' auto-picked step
+//      doesn't reach max).
+//   3. If no candidate divides the range cleanly, fall back to the smallest step that
+//      fits inside targetMax ticks; the final tick may fall short of max, but the chart's
+//      domain still extends visually via half-bucket padding.
+function niceIntegerTicks(min: number, max: number, targetMin = 4, targetMax = 8, denseLimit = 13): number[] {
+  if (!Number.isFinite(min) || !Number.isFinite(max) || max < min) return []
+  let range = max - min
+  if (range === 0) return [min]
+  if (range + 1 <= denseLimit) return tickRange(min, max, 1)
+
+  let candidates = [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 25, 50, 100, 200, 250, 500, 1000, 2000, 5000]
+  for (let step of candidates) {
+    if (range % step !== 0) continue
+    let count = range / step + 1
+    if (count >= targetMin && count <= targetMax) return tickRange(min, max, step)
   }
+  for (let step of candidates) {
+    let count = Math.floor(range / step) + 1
+    if (count >= targetMin && count <= targetMax) return tickRange(min, max, step)
+  }
+  return [min, max]
+}
 
-  return axis
+function tickRange(min: number, max: number, step: number): number[] {
+  let values: number[] = []
+  for (let v = min; v <= max + 1e-9; v += step) values.push(Math.round(v))
+  return values
 }
 
 // Return the natural numeric domain for temporal values that are encoded as numbers.
 function temporalValueDomain(field: Field, rows: Record<string, any>[]): [number, number] | undefined {
   let ordinal = field.metadata?.timeOrdinal
+  if (field.metadata?.timeGrain === 'year') {
+    let values = rows.map(row => Number(row?.[field.name])).filter(value => Number.isFinite(value))
+    if (values.length === 0) return undefined
+    return [Math.min(...values), Math.max(...values)]
+  }
+
   if (ordinal === 'hour_of_day') return [0, 23]
   if (ordinal === 'day_of_month') return [1, 31]
   if (ordinal === 'day_of_year') return [1, 366]
@@ -729,12 +774,6 @@ function temporalValueDomain(field: Field, rows: Record<string, any>[]): [number
   if (ordinal === 'quarter_of_year') return [1, 4]
   if (ordinal === 'dow_0s') return [0, 6]
   if (ordinal === 'dow_1s' || ordinal === 'dow_1m') return [1, 7]
-
-  if (field.metadata?.timePart == 'year') {
-    let values = rows.map(row => Number(row?.[field.name])).filter(value => Number.isFinite(value))
-    if (values.length === 0) return undefined
-    return [Math.min(...values), Math.max(...values)]
-  }
 }
 
 // Series sometimes encode their value field as `y` and sometimes as `value` (pie, funnel, etc).

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

@@ -1,6 +1,6 @@
 import type {Field} from './types.ts'
 
-const currencySymbols = {usd: '$', eur: '€', gbp: '£', cad: 'C$', aud: 'A$', jpy: '¥'} as const
+const supportedCurrencyCodes = new Set(Intl.supportedValuesOf('currency'))
 const percent = new Intl.NumberFormat('en-US', {maximumFractionDigits: 0})
 const currencyCompact = new Intl.NumberFormat('en-US', {notation: 'compact', maximumFractionDigits: 1})
 const monthYearFormatter = new Intl.DateTimeFormat('en-US', {month: 'long', year: 'numeric'})
@@ -11,6 +11,8 @@ const yearMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep
 const titleCaseAcronyms = ['id', 'gdp']
 const titleCaseLowerWords = ['of', 'the', 'and', 'in', 'on']
 
+type ValueFormatterOptions = {unitStyle?: 'label' | 'axis'}
+
 // Formats a raw column name into a readable title.
 export function formatTitle(column: string) {
   let cleaned = column.replace(/"/g, '').replace(/_/g, ' ')
@@ -24,43 +26,56 @@ export function formatTitle(column: string) {
 // ECharts valueFormatter will take different arguments depending on the chart type.
 // For bar/line/area it's just a number
 // for scatter, it's [x,y], for candlestick [open, close, low, high], etc
-export function makeValueFormatter(fields: Field[] = []) {
+export function makeValueFormatter(fields: Field[] = [], options: ValueFormatterOptions = {}) {
   return (value: unknown) => {
-    if (Array.isArray(value)) return value.map((entry, index) => formatSingleValue(entry, fields[index] || fields[0])).join(', ')
-    return formatSingleValue(value, fields[0])
+    if (Array.isArray(value)) return value.map((entry, index) => formatSingleValue(entry, fields[index] || fields[0], options)).join(', ')
+    return formatSingleValue(value, fields[0], options)
   }
 }
 
-// Formats one numeric value with field metadata (units, ratio/pct, compact notation).
-export function formatSingleValue(value: any, field?: Field) {
+// Formats one numeric value with field metadata (currency, ratio/pct, compact notation).
+export function formatSingleValue(value: any, field?: Field, options: ValueFormatterOptions = {}) {
   let amount = Number(value)
   if (!Number.isFinite(amount)) return String(value ?? '')
 
   if (field?.metadata?.ratio) return `${percent.format(amount * 100)}%`
   if (field?.metadata?.pct) return `${percent.format(amount)}%`
 
-  let unit = field?.metadata?.units?.toLowerCase() as keyof typeof currencySymbols | undefined
-  let currencyUnit = unit != null && unit in currencySymbols ? unit : undefined
-  if (currencyUnit) {
+  let currency = field?.metadata?.currency?.toUpperCase()
+  if (currency && supportedCurrencyCodes.has(currency)) {
     let sign = amount < 0 ? '-' : ''
     let formatted = currencyCompact.format(Math.abs(amount)).replace('K', 'k').replace('M', 'm').replace('B', 'b')
-    return `${sign}${currencySymbols[currencyUnit]}${formatted}`
+    return `${sign}${formatCurrencySymbol(currency)}${formatted}`
   }
 
-  if (amount === 0) return '0'
+  if (amount === 0) return addUnit('0', field, options)
   let sign = amount < 0 ? '-' : ''
   let absolute = Math.abs(amount)
+  let formatted = ''
+
+  if (absolute >= 1e12) formatted = `${compactValue(absolute / 1e12)}T`
+  else if (absolute >= 1e9) formatted = `${compactValue(absolute / 1e9)}B`
+  else if (absolute >= 1e6) formatted = `${compactValue(absolute / 1e6)}M`
+  else if (absolute >= 1e3) formatted = `${compactValue(absolute / 1e3)}k`
+  else if (absolute >= 1) formatted = compactValue(absolute)
+  else if (absolute >= 1e-3) formatted = compactValue(absolute)
+  else if (absolute >= 1e-6) formatted = `${compactValue(absolute * 1e3)}m`
+  else if (absolute >= 1e-9) formatted = `${compactValue(absolute * 1e6)}u`
+  else if (absolute >= 1e-12) formatted = `${compactValue(absolute * 1e9)}n`
+  else formatted = compactValue(absolute)
+
+  return addUnit(`${sign}${formatted}`, field, options)
+}
+
+function formatCurrencySymbol(currency: string) {
+  let parts = new Intl.NumberFormat('en-US', {style: 'currency', currency, currencyDisplay: 'symbol', maximumFractionDigits: 0}).formatToParts(0)
+  return parts.find(part => part.type === 'currency')?.value || currency
+}
 
-  if (absolute >= 1e12) return `${sign}${compactValue(absolute / 1e12)}T`
-  if (absolute >= 1e9) return `${sign}${compactValue(absolute / 1e9)}B`
-  if (absolute >= 1e6) return `${sign}${compactValue(absolute / 1e6)}M`
-  if (absolute >= 1e3) return `${sign}${compactValue(absolute / 1e3)}k`
-  if (absolute >= 1) return `${sign}${compactValue(absolute)}`
-  if (absolute >= 1e-3) return `${sign}${compactValue(absolute)}`
-  if (absolute >= 1e-6) return `${sign}${compactValue(absolute * 1e3)}m`
-  if (absolute >= 1e-9) return `${sign}${compactValue(absolute * 1e6)}u`
-  if (absolute >= 1e-12) return `${sign}${compactValue(absolute * 1e9)}n`
-  return `${sign}${compactValue(absolute)}`
+function addUnit(value: string, field: Field | undefined, options: ValueFormatterOptions) {
+  let unit = field?.metadata?.unit?.trim()
+  if (!unit) return value
+  return options.unitStyle === 'axis' ? `${value} (${unit})` : `${value} ${unit}`
 }
 
 // Creates a formatter function that renders date/timestamp values based on field metadata.timeGrain.

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

@@ -111,7 +111,6 @@ registerTheme('graphene-theme', {
     containLabel: false,
   },
   line: {
-    smooth: true,
     symbol: 'emptyCircle',
     symbolSize: 6,
     lineStyle: {width: 2},

package/dist/ui/components/AreaChart.svelte

@@ -3,6 +3,7 @@
   import ECharts from './ECharts.svelte'
   import type {EChartsConfig, QueryResult} from '../component-utilities/types.ts'
   import {componentLogger, logExtraProps} from '../internal/telemetry.ts'
+  import {formatTitle} from '../component-utilities/format.ts'
   import {parseCommaList} from '../component-utilities/inputUtils.ts'
 
   interface Props {
@@ -49,17 +50,17 @@
       series = [{type: 'line' as const, areaStyle: {opacity: 0.2}, stack, stackPercentage, encode: {x, y: yFields[0], splitBy, ...sortHint}}]
     } else {
       // "wide" data, one area series per field listed in y
-      series = yFields.map(field => ({type: 'line' as const, name: field, areaStyle: {opacity: 0.2}, encode: {x, y: field, ...sortHint}}))
+      series = yFields.map(field => ({type: 'line' as const, name: formatTitle(field), areaStyle: {opacity: 0.2}, encode: {x, y: field, ...sortHint}}))
     }
 
-    if (y2) series.push({type: 'line' as const, name: y2, yAxisIndex: 1, encode: {x, y: y2, ...sortHint}})
+    if (y2) series.push({type: 'line' as const, name: formatTitle(y2), yAxisIndex: 1, encode: {x, y: y2, ...sortHint}})
 
     return {
       title: title ? {text: title} : undefined,
       tooltip: {trigger: 'axis'},
       legend: {show: Boolean(splitBy || y2 || yFields.length > 1)},
       xAxis: {},
-      yAxis: [{max: stackPercentage ? 1 : undefined}, ...(y2 ? [{}] : [])],
+      yAxis: [{max: stackPercentage ? 1 : undefined}, ...(y2 ? [{alignTicks: true}] : [])],
       series,
     }
   }

package/dist/ui/components/BarChart.svelte

@@ -3,6 +3,7 @@
   import ECharts from './ECharts.svelte'
   import type {EChartsConfig, QueryResult, SeriesWithGroupingHint} from '../component-utilities/types.ts'
   import {componentLogger, logExtraProps} from '../internal/telemetry.ts'
+  import {formatTitle} from '../component-utilities/format.ts'
   import {parseCommaList} from '../component-utilities/inputUtils.ts'
 
   interface Props {
@@ -61,21 +62,21 @@
     } else {
       // "wide" data, series are created for field listed in the y (or x, for horizontal) attribute
       if (horizontal) {
-        series = xFields.map(field => ({type: 'bar' as const, name: field, encode: {x: field, y, ...sortHint}, label: barLabel}))
+        series = xFields.map(field => ({type: 'bar' as const, name: formatTitle(field), encode: {x: field, y, ...sortHint}, label: barLabel}))
       } else {
-        series = yFields.map(field => ({type: 'bar' as const, name: field, encode: {x, y: field, ...sortHint}, label: barLabel}))
+        series = yFields.map(field => ({type: 'bar' as const, name: formatTitle(field), encode: {x, y: field, ...sortHint}, label: barLabel}))
       }
     }
 
     // y2 is a special shortcut for adding a line on top of a bar chart
-    if (y2) series.push({type: 'line' as const, name: y2, yAxisIndex: 1, encode: {x, y: y2, ...sortHint}})
+    if (y2) series.push({type: 'line' as const, name: formatTitle(y2), yAxisIndex: 1, encode: {x, y: y2, ...sortHint}})
 
     return {
       title: title ? {text: title} : undefined,
       tooltip: {trigger: 'axis'},
       legend: {show: Boolean(splitBy || y2 || (!horizontal && yFields.length > 1) || (horizontal && xFields.length > 1))},
       xAxis: {},
-      yAxis: [{max: stackPercentage ? 1 : undefined}, ...(y2 ? [{}] : [])],
+      yAxis: [{max: stackPercentage ? 1 : undefined}, ...(y2 ? [{alignTicks: true}] : [])],
       series,
     }
   }

package/dist/ui/components/LineChart.svelte

@@ -2,6 +2,7 @@
   import {untrack} from 'svelte'
   import ECharts from './ECharts.svelte'
   import {componentLogger, logExtraProps} from '../internal/telemetry.ts'
+  import {formatTitle} from '../component-utilities/format.ts'
   import {parseCommaList} from '../component-utilities/inputUtils.ts'
   import type {EChartsConfig, QueryResult, SeriesWithGroupingHint} from '../component-utilities/types.ts'
 
@@ -45,17 +46,17 @@
       series = [{type: 'line' as const, encode: {x, y: yFields[0], splitBy, ...sortHint}}]
     } else {
       // "wide" data, one line per field listed in y
-      series = yFields.map(field => ({type: 'line' as const, name: field, encode: {x, y: field, ...sortHint}}))
+      series = yFields.map(field => ({type: 'line' as const, name: formatTitle(field), encode: {x, y: field, ...sortHint}}))
     }
 
-    if (y2) series.push({type: 'line' as const, name: y2, yAxisIndex: 1, encode: {x, y: y2, ...sortHint}})
+    if (y2) series.push({type: 'line' as const, name: formatTitle(y2), yAxisIndex: 1, encode: {x, y: y2, ...sortHint}})
 
     return {
       title: title ? {text: title} : undefined,
       tooltip: {trigger: 'axis'},
       legend: {show: Boolean(splitBy || y2 || yFields.length > 1)},
       xAxis: {},
-      yAxis: [{}, ...(y2 ? [{}] : [])],
+      yAxis: [{}, ...(y2 ? [{alignTicks: true}] : [])],
       series,
     }
   }

package/dist/ui/components/ScatterPlot.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import ECharts from './ECharts.svelte'
+  import {formatTitle} from '../component-utilities/format.ts'
   import {parseCommaList} from '../component-utilities/inputUtils.ts'
   import type {EChartsConfig, QueryResult, SeriesWithGroupingHint} from '../component-utilities/types.ts'
 
@@ -34,7 +35,7 @@
       series = [{type: 'scatter' as const, encode: {x, y: yFields[0], splitBy}}]
     } else {
       // "wide" data, one scatter series per field listed in y
-      series = yFields.map(field => ({type: 'scatter' as const, name: field, encode: {x, y: field}}))
+      series = yFields.map(field => ({type: 'scatter' as const, name: formatTitle(field), encode: {x, y: field}}))
     }
 
     return {
@@ -42,8 +43,8 @@
       tooltip: {trigger: 'item'},
       legend: {show: Boolean(splitBy || yFields.length > 1)},
       grid: {left: 56, bottom: 52},
-      xAxis: {name: x, nameLocation: 'middle', nameGap: 28},
-      yAxis: {name: y, nameLocation: 'middle', nameGap: 40},
+      xAxis: {name: formatTitle(x), nameLocation: 'middle', nameGap: 28},
+      yAxis: {name: formatTitle(y), nameLocation: 'middle', nameGap: 40},
       series,
     }
   }

package/dist/ui/components/_Table.svelte

@@ -41,6 +41,7 @@
   }: Props = $props()
 
   let rowsNum = $derived.by(() => {
+    if (String(rows).toLowerCase() === 'all') return Infinity
     let parsed = Number.parseInt(String(rows), 10)
     return (!Number.isFinite(parsed) || parsed <= 0) ? 10 : parsed
   })
@@ -269,6 +270,7 @@
   let displayedPageLength = $derived(paginated
     ? Math.min(rowsNum, (dataForDisplay?.length ?? 0) - rowsNum * (currentPage - 1))
     : dataForDisplay?.length ?? 0)
+  let rowNumberOffset = $derived(paginated ? rowsNum * (currentPage - 1) : 0)
 
   const goToPage = (page: number) => {
     if (!paginated) return
@@ -457,7 +459,7 @@
             groupNamePosition={groupNamePosition}
             orderedColumns={orderedColumns}
             columnLookup={columnLookup}
-            index={rowsNum * (currentPage - 1)}
+            index={rowNumberOffset}
           />
         {/if}
 

package/dist/ui/internal/LocalApp.svelte

@@ -19,7 +19,11 @@
   let navData = $state(navFiles)
   import.meta.hot?.accept('virtual:nav', mod => navData = mod.default)
 
-  let pathName = window.location.pathname.replace(/^\//, '') || 'index'
+  let pathName = window.location.pathname.replace(/^\//, '').replace(/\/$/, '') || 'index'
+  // Mirror the server-side folder redirect: if /foo.md doesn't exist but /foo/index.md does, load that.
+  if (pathName != 'index' && !navFiles.some(f => f.path == pathName + '.md') && navFiles.some(f => f.path == pathName + '/index.md')) {
+    pathName += '/index'
+  }
 
   // Track compile errors from both initial load and subsequent HMR failures.
   let compileError = $state<GrapheneError | null>(null)

package/dist/ui/internal/PageNavGroup.svelte

@@ -115,8 +115,8 @@
     return nodes
       .map(n => n.type === 'folder' && n.children?.length ? {...n, children: sortNodes(n.children)} : n)
       .sort((a, b) => {
-        if (a.label === 'Home') return -1
-        if (b.label === 'Home') return 1
+        if (a.path?.toLowerCase() === 'index.md') return -1
+        if (b.path?.toLowerCase() === 'index.md') return 1
         if (a.type !== b.type) return a.type === 'folder' ? -1 : 1
         return a.label.localeCompare(b.label)
       })

package/dist/ui/internal/Sidebar.svelte

@@ -1,18 +1,18 @@
 <script>
-  // Content-agnostic sidebar shell. The panel slides in as an overlay when the
-  // user hovers the paired SidebarToggle button (rendered separately by the host)
-  // or the panel itself. Styling values are ported from shadcn-svelte's sidebar registry.
+  // Content-agnostic sidebar shell. By default the panel slides in as an overlay
+  // when the user hovers the paired SidebarToggle button or the panel itself;
+  // alwaysOpen keeps the same shell visible for persistent navigation.
   import {sidebar} from './sidebar.svelte.js'
-  let {children, width = '16rem'} = $props()
+  let {children, width = '16rem', alwaysOpen = false} = $props()
 </script>
 
 <nav
   id="nav"
   class="sb-panel pretty-scrollbar"
   style="--sb-w:{width}"
-  data-open={sidebar.open}
-  onmouseenter={sidebar.enter}
-  onmouseleave={sidebar.leave}
+  data-open={alwaysOpen || sidebar.open}
+  onmouseenter={() => { if (!alwaysOpen) sidebar.enter() }}
+  onmouseleave={() => { if (!alwaysOpen) sidebar.leave() }}
 >
   <div class="sb-inner">
     {@render children?.()}

package/dist/ui/internal/sidebar.svelte.js

@@ -1,4 +1,4 @@
-let state = $state({ open: false });
+let state = $state({ open: false, pinned: false });
 let closeTimer;
 const sidebar = {
   get open() {
@@ -10,7 +10,17 @@ const sidebar = {
   },
   leave() {
     clearTimeout(closeTimer);
+    if (state.pinned) return;
     closeTimer = setTimeout(() => state.open = false, 120);
+  },
+  pin() {
+    clearTimeout(closeTimer);
+    state.pinned = true;
+    state.open = true;
+  },
+  unpin() {
+    state.pinned = false;
+    this.leave();
   }
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphenedata/cli",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "license": "Elastic-2.0",
   "author": "Graphene Systems Inc",
   "repository": {
@@ -19,12 +19,17 @@
     }
   },
   "peerDependencies": {
+    "@aws-sdk/client-athena": "^3.1049.0",
     "@clickhouse/client": "^1.18.2",
     "@duckdb/node-api": "1.3.2-alpha.26",
     "@google-cloud/bigquery": "^8.2.0",
+    "pg": "8.13.3",
     "snowflake-sdk": "2.4.0"
   },
   "peerDependenciesMeta": {
+    "@aws-sdk/client-athena": {
+      "optional": true
+    },
     "@clickhouse/client": {
       "optional": true
     },
@@ -34,6 +39,9 @@
     "@google-cloud/bigquery": {
       "optional": true
     },
+    "pg": {
+      "optional": true
+    },
     "snowflake-sdk": {
       "optional": true
     }
@@ -63,11 +71,12 @@
     "js-yaml": "^3.14.2",
     "json5": "^2.2.3",
     "mdsvex": "^0.12.6",
-    "sanitize-html": "^2.17.0",
-    "svelte": "5.55.3",
+    "playwright-core": "1.58.2",
+    "sanitize-html": "^2.17.4",
+    "svelte": "5.55.7",
     "unified": "^11.0.5",
     "unist-util-visit": "4.1.2",
     "vite": "7.3.2",
-    "ws": "^8.18.0"
+    "ws": "^8.20.1"
   }
 }

package/dist/cli/chunk-56K2FF57.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../lang/config.ts"],
-  "sourcesContent": ["import {existsSync} from 'node:fs'\nimport {readFile} from 'node:fs/promises'\nimport path from 'path'\n\nexport interface Config {\n  root: string\n  dialect: string\n  defaultNamespace?: string\n  ignoredFiles: string[]\n  telemetry?: boolean\n  port?: number\n  host?: string\n  envFile: string[] // array of paths where we can look for the env file\n\n  bigquery?: {\n    projectId?: string\n    keyPath?: string\n  }\n\n  snowflake?: {\n    account: string\n    username: string\n    privateKeyPath: string\n    schema?: string\n    database?: string\n  }\n\n  clickhouse?: {\n    url?: string\n    username?: string\n    database?: string\n    requestTimeout?: number\n  }\n\n  duckdb?: {\n    path?: string\n  }\n}\n\nexport type ConfigInput = Omit<Config, 'root' | 'dialect' | 'ignoredFiles' | 'envFile'> & {\n  root?: string\n  dialect?: Config['dialect']\n  ignoredFiles?: Config['ignoredFiles']\n  envFile?: string | string[]\n  namespace?: string\n}\n\nexport let config: Config = {dialect: 'duckdb', root: ''} as Config\n\nexport function setGlobalConfig(cfg: ConfigInput) {\n  Object.keys(config).forEach(key => delete config[key])\n  Object.assign(config, normalizeConfig(cfg))\n}\n\nexport function normalizeConfig(input: ConfigInput, defaultRoot = process.cwd()): Config {\n  let cfg = {...input}\n  if (cfg.namespace && !cfg.defaultNamespace) cfg.defaultNamespace = cfg.namespace\n\n  let dialect = cfg.dialect || 'duckdb'\n  if (cfg.bigquery) dialect = 'bigquery'\n  else if (cfg.snowflake) dialect = 'snowflake'\n  else if (cfg.clickhouse) dialect = 'clickhouse'\n  else if (cfg.duckdb) dialect = 'duckdb'\n  let envFile = ['.env']\n  if (Array.isArray(cfg.envFile)) envFile = cfg.envFile\n  else if (cfg.envFile) envFile = [cfg.envFile]\n\n  return {\n    ...cfg,\n    dialect,\n    root: path.resolve(cfg.root || defaultRoot),\n    port: cfg.port || Number(process.env.GRAPHENE_PORT) || 4000,\n    ignoredFiles: cfg.ignoredFiles || ['**/agents.md', '**/claude.md'],\n    envFile,\n  } as Config\n}\n\n// Read graphene config from the nearest parent package.json.\nexport async function loadConfig(dir: string, envLoader: (envFiles: string[]) => void): Promise<Config> {\n  // seek upwards from dir looking for package.json\n  let configDir = path.resolve(dir)\n  while (!existsSync(path.join(configDir, 'package.json'))) {\n    let parent = path.dirname(configDir)\n    if (parent == configDir) throw new Error(`No package.json found in ${path.resolve(dir)} or its parents`)\n    configDir = parent\n  }\n\n  let txt = await readFile(path.join(configDir, 'package.json'), 'utf8')\n  let graphene = JSON.parse(txt).graphene\n  if (!graphene || typeof graphene != 'object' || Array.isArray(graphene)) {\n    throw new Error(`No graphene config found in ${path.join(configDir, 'package.json')}`)\n  }\n\n  // config can provide 1 or more env files that Graphene should load. Default to just `.env`\n  let envFiles = Array.isArray(graphene.envFile) ? graphene.envFile : [graphene.envFile || '.env']\n  envLoader(envFiles.map(file => path.resolve(configDir, file)))\n\n  let cfg = normalizeConfig({...graphene, root: configDir}, configDir)\n  return cfg\n}\n"],
-  "mappings": ";AAAA,SAAQ,kBAAiB;AACzB,SAAQ,gBAAe;AACvB,OAAO,UAAU;AA6CV,IAAI,SAAiB,EAAC,SAAS,UAAU,MAAM,GAAE;AAEjD,SAAS,gBAAgB,KAAkB;AAChD,SAAO,KAAK,MAAM,EAAE,QAAQ,SAAO,OAAO,OAAO,GAAG,CAAC;AACrD,SAAO,OAAO,QAAQ,gBAAgB,GAAG,CAAC;AAC5C;AAEO,SAAS,gBAAgB,OAAoB,cAAc,QAAQ,IAAI,GAAW;AACvF,MAAI,MAAM,EAAC,GAAG,MAAK;AACnB,MAAI,IAAI,aAAa,CAAC,IAAI,iBAAkB,KAAI,mBAAmB,IAAI;AAEvE,MAAI,UAAU,IAAI,WAAW;AAC7B,MAAI,IAAI,SAAU,WAAU;AAAA,WACnB,IAAI,UAAW,WAAU;AAAA,WACzB,IAAI,WAAY,WAAU;AAAA,WAC1B,IAAI,OAAQ,WAAU;AAC/B,MAAI,UAAU,CAAC,MAAM;AACrB,MAAI,MAAM,QAAQ,IAAI,OAAO,EAAG,WAAU,IAAI;AAAA,WACrC,IAAI,QAAS,WAAU,CAAC,IAAI,OAAO;AAE5C,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,MAAM,KAAK,QAAQ,IAAI,QAAQ,WAAW;AAAA,IAC1C,MAAM,IAAI,QAAQ,OAAO,QAAQ,IAAI,aAAa,KAAK;AAAA,IACvD,cAAc,IAAI,gBAAgB,CAAC,gBAAgB,cAAc;AAAA,IACjE;AAAA,EACF;AACF;AAGA,eAAsB,WAAW,KAAa,WAA0D;AAEtG,MAAI,YAAY,KAAK,QAAQ,GAAG;AAChC,SAAO,CAAC,WAAW,KAAK,KAAK,WAAW,cAAc,CAAC,GAAG;AACxD,QAAI,SAAS,KAAK,QAAQ,SAAS;AACnC,QAAI,UAAU,UAAW,OAAM,IAAI,MAAM,4BAA4B,KAAK,QAAQ,GAAG,CAAC,iBAAiB;AACvG,gBAAY;AAAA,EACd;AAEA,MAAI,MAAM,MAAM,SAAS,KAAK,KAAK,WAAW,cAAc,GAAG,MAAM;AACrE,MAAI,WAAW,KAAK,MAAM,GAAG,EAAE;AAC/B,MAAI,CAAC,YAAY,OAAO,YAAY,YAAY,MAAM,QAAQ,QAAQ,GAAG;AACvE,UAAM,IAAI,MAAM,+BAA+B,KAAK,KAAK,WAAW,cAAc,CAAC,EAAE;AAAA,EACvF;AAGA,MAAI,WAAW,MAAM,QAAQ,SAAS,OAAO,IAAI,SAAS,UAAU,CAAC,SAAS,WAAW,MAAM;AAC/F,YAAU,SAAS,IAAI,UAAQ,KAAK,QAAQ,WAAW,IAAI,CAAC,CAAC;AAE7D,MAAI,MAAM,gBAAgB,EAAC,GAAG,UAAU,MAAM,UAAS,GAAG,SAAS;AACnE,SAAO;AACT;",
-  "names": []
-}