@graphenedata/cli 0.0.14 → 0.0.16

package/dist/ui/components/ECharts.svelte

@@ -1,86 +1,205 @@
 <script lang="ts">
-  import echarts from '../component-utilities/echarts.js'
-  import {getThemeStores} from '../component-utilities/themeStores'
+  import {init} from 'echarts'
+  import {onDestroy, onMount, untrack} from 'svelte'
+  import ErrorDisplay from '../internal/ErrorDisplay.svelte'
+  import {componentLogger, logExtraProps} from '../internal/telemetry.ts'
+  import {enrich, horizontalBarCount} from '../component-utilities/enrich.ts'
+  import type {EChartsConfig, NormalConfig, QueryResult} from '../component-utilities/types.ts'
+  import '../component-utilities/theme.ts'
+  import Skeleton from './Skeleton.svelte'
 
   interface Props {
-    config: any
+    config: EChartsConfig
+    data: string | QueryResult
     height?: string | number
     width?: string | number
-    data: any
-    queryID?: any
     renderer?: 'canvas' | 'svg'
-    echartsOptions?: any
-    seriesOptions?: any
-    seriesColors?: any
-    connectGroup?: string
-    xAxisLabelOverflow?: 'truncate' | 'break'
-    chartTitle?: string
-    onclick?: (params: any) => void
+    componentId?: string
   }
 
-  const {activeAppearance} = getThemeStores()
-
   let {
-    config, height = '240px', width = '100%', data, queryID = undefined, renderer = undefined,
-    echartsOptions = undefined, seriesOptions = undefined, seriesColors = undefined,
-    connectGroup = undefined, xAxisLabelOverflow = undefined, chartTitle = undefined, onclick = undefined,
-  }: Props = $props()
+    config = {},
+    data,
+    height = undefined,
+    width = '100%',
+    renderer = 'svg',
+    componentId = undefined,
+    ...extraProps
+  }: Props & Record<string, unknown> = $props()
+
+  config ||= {}
+
+  let queryFieldsForLogger = untrack(() => typeof data == 'string' ? queryFields(config) : {})
+  let chartLogger = untrack(() => componentLogger(componentId || 'ECharts', componentId ? {} : {data: typeof data == 'string' ? data : undefined, ...queryFieldsForLogger}))
+  let displayId = untrack(() => componentId || chartLogger.id)
+  untrack(() => logExtraProps(chartLogger, 'ECharts', extraProps))
+
+  // not state, because we don't want `$effect` to run when they change
+  let node: HTMLDivElement | null = null
+  let chart: any
+  let resizeObserver: ResizeObserver | null = null
+
+  // Use `raw` because data can be big, and there's little upside to making it reactive
+  let loaded = $state.raw<QueryResult | null>(null)
+  let chartError: Error | null = $state(null)
+  let mountedComponentId: string | null = $state(displayId)
+  let chartTitle: string | undefined = $state(undefined)
+  let chartSizeStyle: string = $state(calculateChartSize())
+
+  function handleResults (res: QueryResult) {
+    chartError = null
+    loaded = res
+    if (res?.error) chartLogger.error(res.error, {...res.error, componentId: displayId})
+  }
+
+  // If `data` is just a string, kick off a query to fetch the data.
+  // This maybe could be an effect, but we'd have to ensure we don't double-subscribe.
+  onMount(() => {
+    resizeObserver = new ResizeObserver(() => chart?.resize())
+    if (node) resizeObserver.observe(node)
+
+    if (typeof data == 'string') {
+      try {
+        mountedComponentId = window.$GRAPHENE.query(data, queryFieldsForLogger, handleResults, displayId)
+      } catch (error) {
+        chartError = error instanceof Error ? error : new Error(String(error))
+      }
+    } else {
+      loaded = data
+    }
+  })
+
+  onDestroy(() => {
+    resizeObserver?.disconnect()
+    resizeObserver = null
+    window.$GRAPHENE.unsubscribe(handleResults)
+    destroyChart()
+  })
+
+  $effect(() => {
+    if (chartError) return
+
+    if (!loaded || loaded.error || loaded.rows.length == 0) {
+      destroyChart()
+      return
+    }
+
+    if (!chart) {
+      chart = init(node, 'graphene-theme', {renderer})
+      chart.on('legendselectchanged', renderChart)
+    }
+
+    try {
+      window.$GRAPHENE?.renderStart?.(`chart:${chart.id}`)
+      renderChart()
+      chartError = null
+      window.$GRAPHENE?.renderComplete?.(`chart:${chart.id}`)
+    } catch (error) {
+      console.error('Chart failed to render', error)
+      chartError = error instanceof Error ? error : new Error(String(error))
+      chartLogger.error(chartError, {componentId: displayId})
+      window.$GRAPHENE?.renderComplete?.(`chart:${chart.id}`)
+      destroyChart()
+    }
+  })
+
+  // Build a fresh enriched option each render so legend-driven stack rounding
+  // always reflects the currently visible series.
+  function renderChart() {
+    if (!chart || !loaded) return
+
+    // clone config, since enriching mutates the config, and mutating a prop is weird
+    // structuredClone doesn't like proxies, so use state.snapshot
+    let cloned = structuredClone($state.snapshot(config)) as EChartsConfig
+    let rows = loaded.rows
+    let fields = loaded.fields || []
+    cloned.legendSelection = chart.getOption()?.legend?.[0]?.selected
+    let enriched = enrich(cloned, rows, fields)
+
+    chartTitle = enriched.title.find(t => t?.text)?.text
+    chartSizeStyle = calculateChartSize(enriched, rows, fields)
+    chart.setOption({...enriched, animation: false, animationDuration: 0, animationDurationUpdate: 0}, true)
+  }
 
-  const isBrowser = typeof window !== 'undefined'
+  function destroyChart() {
+    if (!chart) return
+    chart.off('legendselectchanged', renderChart)
+    chart.dispose()
+    chart = null
+  }
+
+  function queryFields(config: EChartsConfig) {
+    let fields: Record<string, string[]> = {}
+    let series = Array.isArray(config.series) ? config.series : [config.series]
+    let entries = series.flatMap(s => Object.entries(s?.encode || {}))
+
+    for (let [attr, col] of entries) {
+      let value = queryableEncodeValue(attr, col)
+      if (!value) continue
+      fields[attr] ||= []
+      if (!fields[attr].includes(value)) fields[attr].push(value)
+    }
+
+    return fields
+  }
+
+  function queryableEncodeValue(attr: string, value: unknown) {
+    if (typeof value !== 'string') return undefined
+    let trimmed = value.trim()
+    if (!trimmed) return undefined
+
+    // sort supports "column" or "column asc|desc". We only need the field in SELECT.
+    if (attr === 'sort') return trimmed.split(/\s+/)[0]
+    return trimmed
+  }
+
+  function calculateChartSize(config?: NormalConfig, rows: Record<string, any>[] = [], fields: any[] = []) {
+    let threshold = 8 // over this many bars, start to grow
+    let resolvedHeight: string | number = height ?? '320px'
+    let barSeries = config?.series.find(s => s.type == 'bar')
+    let categoricalY = config?.yAxis[0]?.type == 'category'
 
-  const toDimension = (dimension: string | number | undefined, fallback: string) => {
-    if (typeof dimension === 'number') return `${dimension}px`
-    if (!dimension) return fallback
-    return dimension
+    if (config && barSeries && categoricalY) {
+      let distinctX = horizontalBarCount(config, rows, fields)
+      if (distinctX > threshold) resolvedHeight = 320 * Math.max(1, distinctX / threshold)
+    }
+
+    return `height:${toDim(resolvedHeight)};width:${toDim(width ?? '100%')};`
+  }
+
+  function toDim(dim: string | number) {
+    let t = typeof dim
+    if (t == 'number' || (t == 'string' && (dim as string).match(/^\d+$/))) return `${dim}px`
+    return dim
   }
+
 </script>
 
-<div class="echarts-container">
-  {#if !isBrowser}
-    <div class="echarts-loading" style={`height:${toDimension(height, '240px')}`}>Loading…</div>
-  {: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={{
-        config,
-        data,
-        echartsOptions,
-        seriesOptions,
-        onclick,
-        renderer,
-        connectGroup,
-        xAxisLabelOverflow,
-        seriesColors,
-        theme: $activeAppearance,
-      }}
-    ></div>
+<div class="echarts" bind:this={node} style={chartSizeStyle} data-component-id={mountedComponentId} data-chart-title={chartTitle}>
+  {#if loaded?.error || chartError}
+    <ErrorDisplay error={loaded?.error || chartError} />
+  {:else if !loaded}
+    <Skeleton />
+  {:else if loaded.rows.length == 0}
+    <div class="empty-chart" role="note">Dataset is empty - query ran successfully, but no data was returned from the database</div>
   {/if}
 </div>
 
 <style>
-  .echarts-container {
+  .echarts {
     position: relative;
-    margin: 8px 0;
   }
 
-  .echarts-chart {
+  .empty-chart {
     width: 100%;
-    overflow: visible;
-    user-select: none;
-  }
-
-  .echarts-loading {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid rgba(209, 213, 219, 0.8);
+    height: 100%;
+    padding: 12px;
+    margin: 8px 0;
+    border: 1px dashed rgba(107, 114, 128, 0.6);
     border-radius: 4px;
-    background: rgba(249, 250, 251, 0.6);
-    color: rgba(107, 114, 128, 0.95);
     font-size: 12px;
+    color: rgba(75, 85, 99, 0.9);
+    text-align: center;
+    background: rgba(243, 244, 246, 0.6);
   }
 </style>

package/dist/ui/components/InlineDelta.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-  import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
+  import {formatFromField} from '../component-utilities/format.ts'
   import {getThemeStores} from '../component-utilities/themeStores'
-  import {toBoolean} from '../component-utilities/convert'
+  import {toBoolean} from '../component-utilities/inputUtils'
 
   interface Props {
     value?: number | string | null
-    fmt?: string
-    formatObject?: any
-    columnUnitSummary?: any
+    field?: any
     downIsGood?: boolean
     showValue?: boolean
     showSymbol?: boolean
@@ -22,9 +20,7 @@
 
   let {
     value = undefined,
-    fmt = undefined,
-    formatObject = undefined,
-    columnUnitSummary = undefined,
+    field = undefined,
     downIsGood: downIsGoodProp = false,
     showValue: showValueProp = true,
     showSymbol: showSymbolProp = true,
@@ -58,11 +54,6 @@
     return neutral
   }
 
-  let symbol = $derived((() => {
-    if (status === 'positive') return '▲'
-    if (status === 'negative') return '▼'
-    return '–'
-  })())
   let symbolColor = $derived(pickColor(
     downIsGood ? $theme.colors.negative : $theme.colors.positive,
     downIsGood ? $theme.colors.positive : $theme.colors.negative,
@@ -75,13 +66,11 @@
     $theme.colors['base-content-muted'],
   ))
 
-  let chipClass = $derived(pickColor('delta-chip--positive', 'delta-chip--negative', 'delta-chip--neutral'))
-
-  let resolvedFormat = $derived((() => {
-    if (formatObject) return formatObject
-    if (fmt) return getFormatObjectFromString(fmt, 'number')
-    return undefined
-  })())
+  let chipClass = $derived(pickColor(
+    downIsGood ? 'delta-chip--negative' : 'delta-chip--positive',
+    downIsGood ? 'delta-chip--positive' : 'delta-chip--negative',
+    'delta-chip--neutral',
+  ))
 
   let deltaClass = $derived((() => {
     let classes = ['delta']
@@ -95,27 +84,41 @@
   const renderValue = () => {
     if (numericValue === null) return '–'
     try {
-      return formatValue(numericValue, resolvedFormat, columnUnitSummary)
-    } catch (error) {
+      return formatFromField(field, numericValue)
+    } catch(error) {
       console.error('Failed to format delta value', error)
       return String(numericValue)
     }
   }
 </script>
 
+{#snippet deltaSymbol()}
+  {#if showSymbol}
+    <span class="delta-symbol" style={`color:${symbolColor}`} aria-hidden="true">
+      {#if status === 'positive'}
+        <svg viewBox="0 0 16 16" focusable="false">
+          <path d="M8 3 14 13H2Z" fill="currentColor" />
+        </svg>
+      {:else if status === 'negative'}
+        <svg viewBox="0 0 16 16" focusable="false">
+          <path d="M2 3h12L8 13Z" fill="currentColor" />
+        </svg>
+      {:else}
+        <span class="delta-symbol__neutral">–</span>
+      {/if}
+    </span>
+  {/if}
+{/snippet}
+
 <span class={deltaClass} style={`text-align:${resolvedAlign}`}>
   {#if symbolPosition === 'left'}
-    {#if showSymbol}
-      <span class="delta-symbol" style={`color:${symbolColor}`}>{symbol}</span>
-    {/if}
+    {@render deltaSymbol()}
   {/if}
   {#if showValue}
     <span class="delta-value" style={`color:${textColor}`}>{renderValue()}</span>
   {/if}
   {#if symbolPosition === 'right'}
-    {#if showSymbol}
-      <span class="delta-symbol" style={`color:${symbolColor}`}>{symbol}</span>
-    {/if}
+    {@render deltaSymbol()}
   {/if}
   {#if text}
     <span class="delta-text">{text}</span>
@@ -135,6 +138,22 @@
   }
 
   .delta-symbol {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 0.75em;
+    height: 0.75em;
+    line-height: 1;
+    flex: 0 0 0.75em;
+  }
+
+  .delta-symbol svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .delta-symbol__neutral {
     font-size: 0.75em;
     line-height: 1;
   }
@@ -153,13 +172,13 @@
   }
 
   .delta-chip--positive {
-    background: rgba(22, 163, 74, 0.1);
-    border-color: rgba(22, 163, 74, 0.2);
+    background: rgba(135, 166, 140, 0.15);
+    border-color: rgba(135, 166, 140, 0.3);
   }
 
   .delta-chip--negative {
-    background: rgba(220, 38, 38, 0.1);
-    border-color: rgba(220, 38, 38, 0.2);
+    background: rgba(184, 116, 112, 0.15);
+    border-color: rgba(184, 116, 112, 0.3);
   }
 
   .delta-chip--neutral {

package/dist/ui/components/LineChart.svelte

@@ -1,136 +1,65 @@
 <script lang="ts">
-  import type {Snippet} from 'svelte'
-  import Chart from './Chart.svelte'
-  import Line from './Line.svelte'
-  import QueryLoad from './QueryLoad.svelte'
-  import {getThemeStores} from '../component-utilities/themeStores'
+  import {untrack} from 'svelte'
+  import ECharts from './ECharts.svelte'
+  import {componentLogger, logExtraProps} from '../internal/telemetry.ts'
   import {parseCommaList} from '../component-utilities/inputUtils.ts'
+  import type {EChartsConfig, QueryResult, SeriesWithGroupingHint} from '../component-utilities/types.ts'
 
   interface Props {
-    data?: any, x?: any, y?: any, y2?: any, series?: any, xType?: any, yLog?: any, yLogBase?: any
-    y2SeriesType?: any, yFmt?: any, xFmt?: any, y2Fmt?: any, title?: any, subtitle?: any, legend?: any
-    xAxisTitle?: any, yAxisTitle?: any, y2AxisTitle?: any, xGridlines?: any, yGridlines?: any
-    y2Gridlines?: any, xAxisLabels?: any, yAxisLabels?: any, y2AxisLabels?: any, xBaseline?: any
-    yBaseline?: any, y2Baseline?: any, xTickMarks?: any, yTickMarks?: any, y2TickMarks?: any
-    yMin?: any, yMax?: any, yScale?: any, y2Min?: any, y2Max?: any, y2Scale?: any, sort?: any
-    lineColor?: any, lineType?: any, lineWidth?: any, lineOpacity?: any, chartAreaHeight?: any
-    markers?: any, markerShape?: any, markerSize?: any, handleMissing?: any, step?: any
-    stepPosition?: any, colorPalette?: string, labels?: any, labelSize?: any, labelPosition?: any
-    labelColor?: any, labelFmt?: any, yLabelFmt?: any, y2LabelFmt?: any, showAllLabels?: any
-    yAxisColor?: any, y2AxisColor?: any, echartsOptions?: any, seriesOptions?: any, seriesColors?: any
-    seriesOrder?: any, connectGroup?: any, seriesLabelFmt?: any, leftPadding?: any, rightPadding?: any
-    xLabelWrap?: any, children?: Snippet
+    data: string | QueryResult
+    x: string
+    y: string
+    y2?: string
+    splitBy?: string
+    sort?: string
+    title?: string
+    height?: string | number
+    width?: string | number
   }
 
-  const {resolveColor, resolveColorsObject, resolveColorPalette} = getThemeStores()
-
   let {
-    data = undefined, x = undefined, y = undefined, y2 = undefined, series = undefined, xType = undefined,
-    yLog = undefined, yLogBase = undefined, y2SeriesType = undefined, yFmt = undefined, xFmt = undefined,
-    y2Fmt = undefined, title = undefined, subtitle = undefined, legend = undefined, xAxisTitle = undefined,
-    yAxisTitle = undefined, y2AxisTitle = undefined, xGridlines = undefined, yGridlines = undefined,
-    y2Gridlines = undefined, xAxisLabels = undefined, yAxisLabels = undefined, y2AxisLabels = undefined,
-    xBaseline = undefined, yBaseline = undefined, y2Baseline = undefined, xTickMarks = undefined,
-    yTickMarks = undefined, y2TickMarks = undefined, yMin = undefined, yMax = undefined, yScale = undefined,
-    y2Min = undefined, y2Max = undefined, y2Scale = undefined, sort = undefined, lineColor = undefined,
-    lineType = undefined, lineWidth = undefined, lineOpacity = undefined, chartAreaHeight = undefined,
-    markers = undefined, markerShape = undefined, markerSize = undefined, handleMissing = undefined,
-    step = undefined, stepPosition = undefined, colorPalette = 'default', labels = undefined,
-    labelSize = undefined, labelPosition = undefined, labelColor = undefined, labelFmt = undefined,
-    yLabelFmt = undefined, y2LabelFmt = undefined, showAllLabels = undefined, yAxisColor = undefined,
-    y2AxisColor = undefined, echartsOptions = undefined, seriesOptions = undefined, seriesColors = undefined,
-    seriesOrder = undefined, connectGroup = undefined, seriesLabelFmt = undefined, leftPadding = undefined,
-    rightPadding = undefined, xLabelWrap = undefined, children,
-  }: Props = $props()
+    data,
+    x,
+    y,
+    y2 = undefined,
+    splitBy = undefined,
+    sort = undefined,
+    title = undefined,
+    height = undefined,
+    width = undefined,
+    ...extraProps
+  }: Props & Record<string, unknown> = $props()
 
-  let lineColorStore = $derived(resolveColor(lineColor))
-  let colorPaletteStore = $derived(resolveColorPalette(colorPalette))
-  let labelColorStore = $derived(resolveColor(labelColor))
-  let yAxisColorStore = $derived(resolveColor(yAxisColor))
-  let y2AxisColorStore = $derived(resolveColor(y2AxisColor))
-  let seriesColorsStore = $derived(resolveColorsObject(seriesColors))
+  let logger = untrack(() => componentLogger('LineChart', {data: typeof data == 'string' ? data : undefined, x, y}))
+  untrack(() => logExtraProps(logger, 'LineChart', extraProps))
 
-  let derivedYAxisTitle = $derived(yAxisTitle ?? (y2 ? 'true' : undefined))
-  let derivedY2AxisTitle = $derived(y2AxisTitle ?? (y2 ? 'true' : undefined))
-</script>
+  function buildConfig(): EChartsConfig {
+    let yFields = parseCommaList(y)
+    if (splitBy && yFields.length > 1) throw new Error('LineChart does not support splitBy with multiple y fields')
+
+    let sortHint = typeof sort === 'string' && sort.trim().length > 0 ? {sort} : {}
+    let series: SeriesWithGroupingHint[]
+
+    if (splitBy) {
+      // "tall" data, one template split into one series per splitBy value by enrich()
+      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}}))
+    }
 
-{#snippet lineChartContent(loaded: any[])}
-  <Chart
-    data={loaded}
-    chartContext={{data, x, y, series}}
-    {x}
-    {y}
-    {y2}
-    {xFmt}
-    {yFmt}
-    {y2Fmt}
-    {series}
-    {xType}
-    {yLog}
-    {yLogBase}
-    {legend}
-    {xAxisTitle}
-    yAxisTitle={derivedYAxisTitle}
-    y2AxisTitle={derivedY2AxisTitle}
-    {xGridlines}
-    {yGridlines}
-    {y2Gridlines}
-    {xAxisLabels}
-    {yAxisLabels}
-    {y2AxisLabels}
-    {xBaseline}
-    {yBaseline}
-    {y2Baseline}
-    {xTickMarks}
-    {yTickMarks}
-    {y2TickMarks}
-    yAxisColor={yAxisColorStore}
-    y2AxisColor={y2AxisColorStore}
-    {yMin}
-    {yMax}
-    {yScale}
-    {y2Min}
-    {y2Max}
-    {y2Scale}
-    {title}
-    {subtitle}
-    chartType="Line Chart"
-    {sort}
-    {chartAreaHeight}
-    colorPalette={colorPaletteStore}
-    {echartsOptions}
-    {seriesOptions}
-    {connectGroup}
-    seriesColors={seriesColorsStore}
-    {leftPadding}
-    {rightPadding}
-    {xLabelWrap}
-  >
-    <Line
-      lineColor={lineColorStore}
-      {lineWidth}
-      {lineOpacity}
-      {lineType}
-      {markers}
-      {markerShape}
-      {markerSize}
-      {handleMissing}
-      {step}
-      {stepPosition}
-      {labels}
-      {labelSize}
-      {labelPosition}
-      labelColor={labelColorStore}
-      {labelFmt}
-      {yLabelFmt}
-      {y2LabelFmt}
-      {showAllLabels}
-      {y2SeriesType}
-      {seriesOrder}
-      {seriesLabelFmt}
-    />
-    {@render children?.()}
-  </Chart>
-{/snippet}
+    if (y2) series.push({type: 'line' as const, name: 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 ? [{}] : [])],
+      series,
+    }
+  }
+
+</script>
 
-<QueryLoad data={data} fields={{x, y: parseCommaList(y), y2: parseCommaList(y2), series}} children={lineChartContent} />
+<ECharts data={data} config={buildConfig()} {height} {width} componentId={logger.id} />

package/dist/ui/components/PieChart.svelte

@@ -1,47 +1,37 @@
 <script lang="ts">
+  import {untrack} from 'svelte'
   import ECharts from './ECharts.svelte'
-  import QueryLoad from './QueryLoad.svelte'
+  import type {EChartsConfig, QueryResult} from '../component-utilities/types.ts'
+  import {componentLogger, logExtraProps} from '../internal/telemetry.ts'
 
   interface Props {
-    data: any
-    category: any
-    value: any
-    title?: any
-    subtitle?: any
-    printEchartsConfig?: any
-    echartsOptions?: any
-    seriesOptions?: any
-    seriesColors?: any
+    data: string | QueryResult
+    category: string
+    value: string
+    title?: string
+    height?: string | number
+    width?: string | number
   }
 
   let {
-    data, category, value, title = undefined, subtitle = undefined, printEchartsConfig = undefined,
-    echartsOptions = undefined, seriesOptions = undefined, seriesColors = undefined,
-  }: Props = $props()
+    data,
+    category,
+    value,
+    title = undefined,
+    height = undefined,
+    width = undefined,
+    ...extraProps
+  }: Props & Record<string, unknown> = $props()
 
-  // printEchartsConfig is intentionally unused - it's a debug prop that
-  // users can pass but we don't implement it yet. Using $derived to read
-  // it reactively and suppress state_referenced_locally warning.
-  $effect(() => { void printEchartsConfig })
-</script>
+  let logger = untrack(() => componentLogger('PieChart', {data: typeof data == 'string' ? data : undefined, category, value}))
+  untrack(() => logExtraProps(logger, 'PieChart', extraProps))
 
-{#snippet pieChartContent(loaded: any[])}
-  <ECharts data={loaded} {echartsOptions} {seriesOptions} {seriesColors} config={{
-    title: {
-      text: title,
-      subtext: subtitle,
-    },
-    tooltip: {
-      formatter: '{b}: {c} ({d}%)',
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: ['40%', '70%'],
-        data: [...loaded.map(r => ({name: r[category], value: r[value]}))],
-      },
-    ],
-  }} />
-{/snippet}
+  function buildConfig(): EChartsConfig {
+    return {
+      title: title ? {text: title} : undefined,
+      series: [{type: 'pie', encode: {itemName: category, value}}],
+    }
+  }
+</script>
 
-<QueryLoad data={data} fields={{category, value}} children={pieChartContent} />
+<ECharts data={data} config={buildConfig()} {height} {width} componentId={logger.id} />