@graphenedata/cli 0.0.14 → 0.0.16

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

@@ -0,0 +1,177 @@
+import type {Field} from './types.ts'
+
+const currencySymbols = {usd: '$', eur: '€', gbp: '£', cad: 'C$', aud: 'A$', jpy: '¥'} as const
+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'})
+const monthDayYearFormatter = new Intl.DateTimeFormat('en-US', {month: 'short', day: 'numeric', year: 'numeric'})
+const sundayWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const
+const mondayWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as const
+const yearMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] as const
+const titleCaseAcronyms = ['id', 'gdp']
+const titleCaseLowerWords = ['of', 'the', 'and', 'in', 'on']
+
+// Formats a raw column name into a readable title.
+export function formatTitle(column: string) {
+  let cleaned = column.replace(/"/g, '').replace(/_/g, ' ')
+  return cleaned.replace(/\S*/g, token => {
+    if (titleCaseAcronyms.includes(token)) return token.toUpperCase()
+    if (titleCaseLowerWords.includes(token)) return token.toLowerCase()
+    return token.charAt(0).toUpperCase() + token.substr(1).toLowerCase()
+  })
+}
+
+// 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[] = []) {
+  return (value: unknown) => {
+    if (Array.isArray(value)) return value.map((entry, index) => formatSingleValue(entry, fields[index] || fields[0])).join(', ')
+    return formatSingleValue(value, fields[0])
+  }
+}
+
+// Formats one numeric value with field metadata (units, ratio/pct, compact notation).
+export function formatSingleValue(value: any, field?: Field) {
+  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 sign = amount < 0 ? '-' : ''
+    let formatted = currencyCompact.format(Math.abs(amount)).replace('K', 'k').replace('M', 'm').replace('B', 'b')
+    return `${sign}${currencySymbols[currencyUnit]}${formatted}`
+  }
+
+  if (amount === 0) return '0'
+  let sign = amount < 0 ? '-' : ''
+  let absolute = Math.abs(amount)
+
+  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)}`
+}
+
+// Creates a formatter function that renders date/timestamp values based on field metadata.timeGrain.
+export function makeTimeFormatter(field?: Field) {
+  let timeGrain = String(field?.metadata?.timeGrain || '').toLowerCase()
+
+  return (input: unknown) => {
+    let value = input
+    if (value && typeof value === 'object' && 'value' in (value as Record<string, unknown>)) {
+      value = (value as Record<string, unknown>).value
+    }
+
+    let date = value instanceof Date ? value : new Date(Number(value))
+    if (!Number.isFinite(date.getTime())) return String(value ?? '')
+
+    let y = date.getFullYear()
+    let m = pad2(date.getMonth() + 1)
+    let d = pad2(date.getDate())
+    let h = pad2(date.getHours())
+    let min = pad2(date.getMinutes())
+    let s = pad2(date.getSeconds())
+
+    if (timeGrain === 'year') return String(y)
+    if (timeGrain === 'quarter') return `Q${Math.floor(date.getMonth() / 3) + 1} ${y}`
+    if (timeGrain === 'month') return monthYearFormatter.format(date)
+    if (timeGrain === 'week' || timeGrain === 'day') return monthDayYearFormatter.format(date)
+    if (timeGrain === 'hour') return `${y}-${m}-${d} ${h}:00`
+    if (timeGrain === 'minute') return `${y}-${m}-${d} ${h}:${min}`
+    if (timeGrain === 'second') return `${y}-${m}-${d} ${h}:${min}:${s}`
+
+    return monthDayYearFormatter.format(date)
+  }
+}
+
+// Formats one value by selecting the right formatter from the field type.
+export function formatFromField(field: Field | undefined, value: unknown) {
+  if (value === null || value === undefined) return '-'
+
+  let type = String(field?.type || '').toLowerCase()
+  if (type === 'number') return formatSingleValue(value, field)
+  if (type === 'date' || type === 'timestamp') return makeTimeFormatter(field)(value)
+  return String(value)
+}
+
+// Formats ordinal time buckets like hour_of_day and day_of_week variants.
+export function formatTimeOrdinal(field: Field | undefined, input: unknown) {
+  let value = extractFormatterValue(input)
+  let ordinal = String(field?.metadata?.timeOrdinal || '').toLowerCase()
+  if (!ordinal) return String(value ?? '')
+
+  if (ordinal === 'hour_of_day') {
+    let hour = Number(value)
+    if (!Number.isInteger(hour) || hour < 0 || hour > 23) return String(value ?? '')
+    let normalized = hour % 12 || 12
+    return `${normalized}${hour < 12 ? 'am' : 'pm'}`
+  }
+
+  if (ordinal === 'dow_1s') {
+    let day = Number(value)
+    if (!Number.isInteger(day) || day < 1 || day > 7) return String(value ?? '')
+    return sundayWeek[day - 1]
+  }
+
+  if (ordinal === 'dow_0s') {
+    let day = Number(value)
+    if (!Number.isInteger(day) || day < 0 || day > 6) return String(value ?? '')
+    return sundayWeek[day]
+  }
+
+  if (ordinal === 'dow_1m') {
+    let day = Number(value)
+    if (!Number.isInteger(day) || day < 1 || day > 7) return String(value ?? '')
+    return mondayWeek[day - 1]
+  }
+
+  if (ordinal === 'month_of_year') {
+    let month = Number(value)
+    if (!Number.isInteger(month) || month < 1 || month > 12) return String(value ?? '')
+    return yearMonths[month - 1]
+  }
+
+  if (ordinal === 'quarter_of_year') {
+    let quarter = Number(value)
+    if (!Number.isInteger(quarter) || quarter < 1 || quarter > 4) return String(value ?? '')
+    return `Q${quarter}`
+  }
+
+  return String(value ?? '')
+}
+
+function extractFormatterValue(input: unknown) {
+  if (input && typeof input === 'object' && 'value' in (input as Record<string, unknown>)) {
+    return (input as Record<string, unknown>).value
+  }
+  return input
+}
+
+function pad2(value: number) {
+  return String(value).padStart(2, '0')
+}
+
+function compactValue(num: number) {
+  let exponent = Math.floor(Math.log10(Math.abs(num)))
+  let scale = Math.pow(10, exponent - 1)
+  let rounded = Math.round(num / scale) * scale
+  if (!Number.isFinite(rounded)) return String(num)
+  let magnitude = Math.floor(Math.log10(rounded))
+  let decimals = Math.max(0, 1 - magnitude)
+  return rounded
+    .toFixed(decimals)
+    .replace(/\.0+$/, '')
+    .replace(/(\.[0-9]*[1-9])0+$/, '$1')
+    .replace(/\.$/, '')
+}

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

@@ -1,5 +1,5 @@
-
-export function toBoolean (value: any): boolean {
+export function toBoolean(value: any): boolean | undefined {
+  if (value === undefined || value === null) return undefined
   if (typeof value === 'boolean') return value
   if (typeof value === 'number') return value !== 0
   if (typeof value === 'string') {
@@ -10,13 +10,13 @@ export function toBoolean (value: any): boolean {
   return Boolean(value)
 }
 
-export function ensureArray<T> (value: T | T[] | undefined | null): T[] {
+export function ensureArray<T>(value: T | T[] | undefined | null): T[] {
   if (Array.isArray(value)) return value
   if (value === undefined || value === null) return []
   return [value]
 }
 
-export function serializeValue (value: unknown): string {
+export function serializeValue(value: unknown): string {
   if (value === null || value === undefined) return 'NULL'
   if (typeof value === 'number' || typeof value === 'bigint') return String(value)
   if (typeof value === 'boolean') return value ? 'TRUE' : 'FALSE'
@@ -25,12 +25,51 @@ export function serializeValue (value: unknown): string {
 }
 
 // Parse a comma-separated list into an array of trimmed strings.
-// - Strings are split on commas; whitespace trimmed; empty entries removed.
+// - Strings are split on top-level commas, ignoring commas inside calls and quoted strings.
 // - Arrays are normalized by trimming string items and String()-ing non-strings.
 // - null/undefined -> []
-export function parseCommaList (value: unknown): string[] {
+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)
+  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 [String(value).trim()].filter(v => v.length > 0)
+
+  let parts: string[] = []
+  let current = ''
+  let quote: string | undefined
+  let depth = 0
+
+  for (let i = 0; i < value.length; i++) {
+    let char = value[i]
+
+    if (quote) {
+      current += char
+      if (char === quote) {
+        if (quote === "'" && value[i + 1] === "'") current += value[++i]
+        else quote = undefined
+      }
+      continue
+    }
+
+    if (char === "'" || char === '"' || char === '`') {
+      quote = char
+      current += char
+      continue
+    }
+
+    if (char === '(' || char === '[' || char === '{') depth++
+    if ((char === ')' || char === ']' || char === '}') && depth > 0) depth--
+
+    if (char === ',' && depth === 0) {
+      let trimmed = current.trim()
+      if (trimmed) parts.push(trimmed)
+      current = ''
+      continue
+    }
+
+    current += char
+  }
+
+  let trimmed = current.trim()
+  if (trimmed) parts.push(trimmed)
+  return parts
 }

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

@@ -0,0 +1,200 @@
+// @ts-expect-error ECharts CJS typings don't expose named exports cleanly, but bundling works.
+import {registerTheme} from 'echarts'
+
+// ── Color tokens ────────────────────────────────────────────────────────
+// Palette C · Fjord Dusk
+export const colorPalette = [
+  '#3D6B7E', // deep teal    — Scandinavian twilight anchor
+  '#C87F5A', // warm amber   — accent warmth, kiln-fired
+  '#87A68C', // sage green   — twilight foliage
+  '#8E7AA0', // muted mauve  — dusk shadow
+  '#D4A94C', // amber gold   — last light on water
+  '#5B8F9E', // fjord blue   — mid-tone companion
+  '#C4868E', // dusty rose   — fading alpine glow
+]
+
+// Rotate a palette by a deterministic page offset so pages don't always start on the same color.
+// We keep this pure and reusable so enrichments can apply it onto config.color.
+export function paletteForPath(pathname?: string) {
+  if (import.meta.env.VITE_TEST) return [...colorPalette] // Keep screenshot baselines stable in UI tests.
+
+  let rawPath = pathname ?? location.pathname
+  let key = String(rawPath)
+    .split('?')[0]
+    .split('#')[0]
+    .replace(/\\/g, '/')
+    .replace(/^\/+|\/+$/g, '')
+  key = key.replace(/\/index$/i, '') || 'index'
+
+  let hash = 2166136261
+  for (let i = 0; i < key.length; i++) {
+    hash ^= key.charCodeAt(i)
+    hash = Math.imul(hash, 16777619)
+  }
+
+  let offset = (hash >>> 0) % colorPalette.length
+  if (offset === 0) return [...colorPalette]
+  return [...colorPalette.slice(offset), ...colorPalette.slice(0, offset)]
+}
+
+let clr = {
+  white: '#ffffff',
+  tooltipTxt: '#111827',
+  textDark: '#374151',
+  textMid: '#6b7280',
+  textLight: '#9ca3af',
+  lineSubtle: '#d1d5db',
+  splitLine: '#dde0e4',
+  border: '#e5e7eb',
+  seqStart: '#e4eff3',
+  statusBad: '#B87470', // muted brick red — in-theme with Fjord Dusk's cool desaturation
+}
+
+let axisCommon = {
+  axisLine: {lineStyle: {color: clr.border}},
+  axisLabel: {color: clr.textLight},
+  axisTick: {show: false},
+  splitLine: {show: false, lineStyle: {color: clr.splitLine, type: 'dashed'}},
+}
+
+registerTheme('graphene-theme', {
+  color: colorPalette,
+  backgroundColor: 'transparent',
+  textStyle: {
+    fontFamily: "'Source Sans 3', sans-serif",
+    color: clr.textMid,
+    fontSize: 13,
+  },
+  title: {
+    left: 'left',
+    padding: 0,
+    textStyle: {color: clr.textDark, fontSize: 15},
+  },
+  categoryAxis: {
+    ...axisCommon,
+  },
+  valueAxis: {
+    ...axisCommon,
+    splitLine: {lineStyle: {color: clr.splitLine}},
+    splitNumber: 3,
+  },
+  timeAxis: {
+    ...axisCommon,
+  },
+  logAxis: {
+    ...axisCommon,
+  },
+  tooltip: {
+    backgroundColor: clr.white,
+    borderColor: clr.border,
+    textStyle: {color: clr.tooltipTxt},
+  },
+
+  visualMap: {
+    show: false,
+    textStyle: {color: clr.textLight},
+  },
+  legend: {
+    type: 'scroll',
+    icon: 'circle',
+    itemWidth: 8,
+    itemHeight: 8,
+    top: 24,
+    left: 0,
+    textStyle: {color: clr.textMid},
+  },
+  grid: {
+    top: 75,
+    left: 40,
+    right: 16,
+    bottom: 36,
+    containLabel: false,
+  },
+  line: {
+    smooth: true,
+    symbol: 'emptyCircle',
+    symbolSize: 6,
+    lineStyle: {width: 2},
+  },
+  bar: {},
+  pie: {
+    radius: ['30%', '58%'],
+    label: {color: clr.textMid},
+    itemStyle: {borderColor: 'var(--color-bg)', borderWidth: 1},
+  },
+  scatter: {
+    symbolSize: 8,
+    itemStyle: {opacity: 0.8},
+  },
+  radar: {
+    axisName: {color: clr.textLight},
+    splitLine: {lineStyle: {color: clr.border}},
+    splitArea: {show: false},
+    axisLine: {lineStyle: {color: clr.border}},
+    areaStyle: {opacity: 0.15},
+    lineStyle: {width: 1.5},
+  },
+  boxplot: {
+    itemStyle: {
+      color: clr.seqStart,
+      borderColor: colorPalette[0],
+      borderWidth: 1.5,
+    },
+  },
+  candlestick: {
+    itemStyle: {
+      color: colorPalette[2], // up candle   — sage green
+      color0: clr.statusBad, // down candle — brick red
+      borderColor: colorPalette[2],
+      borderColor0: clr.statusBad,
+      borderWidth: 1.5,
+    },
+  },
+  gauge: {
+    progress: {show: true, width: 14, roundCap: true},
+    axisLine: {roundCap: true, lineStyle: {width: 14, color: [[1, clr.border]]}},
+    axisTick: {show: false},
+    splitLine: {show: false},
+    axisLabel: {show: false},
+    pointer: {show: false},
+    detail: {valueAnimation: true, fontSize: 24, color: clr.textDark, offsetCenter: [0, '0%']},
+  },
+  funnel: {
+    left: '10%',
+    width: '80%',
+    label: {position: 'inside', color: clr.white, fontSize: 12},
+    itemStyle: {borderColor: clr.white, borderWidth: 1},
+  },
+  heatmap: {
+    label: {show: true, color: clr.textDark, fontSize: 11},
+  },
+  graph: {
+    lineStyle: {color: clr.lineSubtle, width: 1.5, opacity: 1},
+    label: {show: true, color: clr.textDark, fontSize: 11, position: 'right'},
+  },
+  tree: {
+    orient: 'LR',
+    symbolSize: 10,
+    lineStyle: {color: colorPalette[0], width: 2},
+    itemStyle: {color: colorPalette[0], borderColor: colorPalette[0]},
+    label: {color: clr.textDark, fontSize: 11, position: 'top', verticalAlign: 'middle', align: 'center'},
+    leaves: {label: {position: 'right', verticalAlign: 'middle', align: 'left'}},
+    emphasis: {focus: 'descendant'},
+  },
+  treemap: {
+    roam: false,
+    breadcrumb: {show: false},
+    label: {color: clr.white, fontSize: 12},
+    itemStyle: {borderColor: clr.white, borderWidth: 0, gapWidth: 1},
+  },
+  sunburst: {
+    label: {color: clr.textDark, fontSize: 10, rotateLabel: true},
+    itemStyle: {borderColor: clr.white, borderWidth: 1},
+  },
+  sankey: {
+    nodeWidth: 8,
+    nodeGap: 12,
+    lineStyle: {color: 'gradient', opacity: 0.3},
+    label: {color: clr.textDark, fontSize: 11},
+  },
+})

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

@@ -18,18 +18,7 @@ type ThemeStores = {
 
 const THEME_CONTEXT = Symbol('GrapheneThemeStores')
 
-const DEFAULT_PALETTE = [
-  '#4C78A8',
-  '#F58518',
-  '#E45756',
-  '#72B7B2',
-  '#54A24B',
-  '#EECA3B',
-  '#B279A2',
-  '#FF9DA6',
-  '#9D755D',
-  '#BAB0AC',
-]
+const DEFAULT_PALETTE = ['#4C78A8', '#F58518', '#E45756', '#72B7B2', '#54A24B', '#EECA3B', '#B279A2', '#FF9DA6', '#9D755D', '#BAB0AC']
 
 const DEFAULT_THEME: Theme = {
   colors: {
@@ -38,10 +27,10 @@ const DEFAULT_THEME: Theme = {
     'base-300': '#e5e7eb',
     'base-content': '#1f2937',
     'base-content-muted': '#6b7280',
-    primary: '#2563eb',
-    positive: '#16a34a',
-    negative: '#dc2626',
-    warning: '#d97706',
+    primary: '#3D6B7E',
+    positive: '#87A68C',
+    negative: '#B87470',
+    warning: '#D4A94C',
   },
   colorPalettes: {
     default: DEFAULT_PALETTE,
@@ -103,6 +92,19 @@ export const resolveColorsObject = (input: Record<string, unknown> | string | un
   return readable(Object.fromEntries(entries))
 }
 
+const cssVar = (name: string): string | undefined => {
+  if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') return undefined
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || undefined
+}
+
+// A single color makes a flat scale; expand to a bg→color gradient so heatmaps work.
+// chroma.scale needs a real color, so resolve the CSS var before building the palette.
+const finalizePalette = (values: string[]): string[] => {
+  if (values.length === 0) return DEFAULT_PALETTE
+  if (values.length === 1) return [cssVar('--color-bg') ?? DEFAULT_THEME.colors['base-100'], values[0]]
+  return values
+}
+
 export const resolveColorPalette = (input: unknown): Readable<string[] | undefined> => {
   if (isReadable<string[] | undefined>(input)) return input
   if (input == null) return readable(DEFAULT_PALETTE)
@@ -115,20 +117,23 @@ export const resolveColorPalette = (input: unknown): Readable<string[] | undefin
       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)
+        return readable(finalizePalette(values))
       }
     }
     if (key.includes(',')) {
-      let values = key.split(',').map(part => normalizeColor(part)).filter(Boolean) as string[]
-      return readable(values.length ? values : DEFAULT_PALETTE)
+      let values = key
+        .split(',')
+        .map(part => normalizeColor(part))
+        .filter(Boolean) as string[]
+      return readable(finalizePalette(values))
     }
     let normalized = normalizeColor(key)
-    return readable(normalized ? [normalized] : DEFAULT_PALETTE)
+    return readable(normalized ? finalizePalette([normalized]) : DEFAULT_PALETTE)
   }
 
   if (Array.isArray(input)) {
     let values = input.map(item => normalizeColor(item)).filter(Boolean) as string[]
-    return readable(values.length ? values : DEFAULT_PALETTE)
+    return readable(finalizePalette(values))
   }
 
   return readable(DEFAULT_PALETTE)

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

@@ -0,0 +1,70 @@
+import type {
+  DatasetComponentOption,
+  EChartsOption,
+  GridComponentOption,
+  LegendComponentOption,
+  SeriesOption,
+  TitleComponentOption,
+  TooltipComponentOption,
+  XAXisComponentOption,
+  YAXisComponentOption,
+} from 'echarts/types/dist/echarts'
+
+import type {Field as ApiField, QueryResult as ApiQueryResult} from '../../lang/index.d.ts'
+
+type SingleOrArray<T> = T | T[]
+type SeriesEncode = Record<string, unknown>
+
+export type Field = ApiField
+export type QueryResult = ApiQueryResult
+
+type CommonSeriesFields = {
+  type?: string
+  name?: string
+  color?: string
+  stack?: string
+  datasetId?: string
+  data?: unknown
+  links?: unknown
+  xAxisIndex?: number
+  yAxisIndex?: number
+  label?: Record<string, any>
+  labelLayout?: Record<string, any> | ((...args: any[]) => any)
+  itemStyle?: Record<string, any>
+  lineStyle?: Record<string, any>
+  areaStyle?: Record<string, any>
+  showSymbol?: boolean
+}
+
+// ECharts supports a lightweight split hint so configs stay concise.
+// - `encode.splitBy: "field"` splits one template into one series per distinct field value.
+// - `encode.splitBy: ["groupBy", "stackBy"]` is bar-only grouped+stacked shorthand.
+// - with a single split field, use native `series.stack` to choose stacked vs grouped behavior.
+export type SeriesWithGroupingHint = Omit<SeriesOption, 'encode'> &
+  CommonSeriesFields & {
+    stackPercentage?: boolean
+    encode?: SeriesEncode & {
+      splitBy?: string | string[]
+      sort?: string
+    }
+  }
+
+export type EChartsConfig = Omit<EChartsOption, 'series'> & {
+  series?: SingleOrArray<SeriesWithGroupingHint>
+  legendSelection?: any
+}
+
+type AxisWithField<TAxis> = TAxis & {field?: Field}
+
+// Config shape after enrich() normalization runs.
+// We keep this mutable and array-based because enrichments mutate in place.
+export type NormalConfig = Omit<EChartsConfig, 'series' | 'xAxis' | 'yAxis' | 'dataset' | 'grid' | 'legend' | 'title' | 'tooltip'> & {
+  series: SeriesWithGroupingHint[]
+  xAxis: AxisWithField<XAXisComponentOption>[]
+  yAxis: AxisWithField<YAXisComponentOption>[]
+  dataset: DatasetComponentOption[]
+  grid: GridComponentOption[]
+  legend: LegendComponentOption[]
+  title: TitleComponentOption[]
+  tooltip: TooltipComponentOption[]
+}