@graphenedata/cli 0.0.14 → 0.0.16

package/dist/ui/components/AreaChart.svelte

@@ -1,116 +1,68 @@
 <script lang="ts">
-  import type {Snippet} from 'svelte'
-  import Chart from './Chart.svelte'
-  import Area from './Area.svelte'
-  import QueryLoad from './QueryLoad.svelte'
-  import {getThemeStores} from '../component-utilities/themeStores'
+  import {untrack} from 'svelte'
+  import ECharts from './ECharts.svelte'
+  import type {EChartsConfig, QueryResult} from '../component-utilities/types.ts'
+  import {componentLogger, logExtraProps} from '../internal/telemetry.ts'
   import {parseCommaList} from '../component-utilities/inputUtils.ts'
 
   interface Props {
-    data?: any, x?: any, y?: any, series?: any, xType?: any, yLog?: any, yLogBase?: any
-    yFmt?: any, xFmt?: any, title?: any, subtitle?: any, legend?: any, xAxisTitle?: any, yAxisTitle?: any
-    xGridlines?: any, yGridlines?: any, xAxisLabels?: any, yAxisLabels?: any, xBaseline?: any, yBaseline?: any
-    xTickMarks?: any, yTickMarks?: any, yMin?: any, yMax?: any, yScale?: any, sort?: any, line?: any
-    fillColor?: any, lineColor?: any, fillOpacity?: any, chartAreaHeight?: any, markers?: any
-    markerShape?: any, markerSize?: any, handleMissing?: any, step?: any, stepPosition?: any, type?: string
-    colorPalette?: string, labels?: any, labelSize?: any, labelPosition?: any, labelColor?: any
-    labelFmt?: any, showAllLabels?: 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
+    arrange?: 'stack' | 'stack100'
+    sort?: string
+    title?: string
+    height?: string | number
+    width?: string | number
   }
 
-  const {resolveColor, resolveColorsObject, resolveColorPalette} = getThemeStores()
-
   let {
-    data = undefined, x = undefined, y = undefined, series = undefined, xType = undefined, yLog = undefined,
-    yLogBase = undefined, yFmt = undefined, xFmt = undefined, title = undefined, subtitle = undefined,
-    legend = undefined, xAxisTitle = undefined, yAxisTitle = undefined, xGridlines = undefined,
-    yGridlines = undefined, xAxisLabels = undefined, yAxisLabels = undefined, xBaseline = undefined,
-    yBaseline = undefined, xTickMarks = undefined, yTickMarks = undefined, yMin = undefined, yMax = undefined,
-    yScale = undefined, sort = undefined, line = undefined, fillColor = undefined, lineColor = undefined,
-    fillOpacity = undefined, chartAreaHeight = undefined, markers = undefined, markerShape = undefined,
-    markerSize = undefined, handleMissing = undefined, step = undefined, stepPosition = undefined,
-    type = 'stacked', colorPalette = 'default', labels = undefined, labelSize = undefined,
-    labelPosition = undefined, labelColor = undefined, labelFmt = undefined, showAllLabels = 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,
+    arrange = 'stack',
+    sort = undefined,
+    title = undefined,
+    height = undefined,
+    width = undefined,
+    ...extraProps
+  }: Props & Record<string, unknown> = $props()
 
-  let stacked100 = $derived(type === 'stacked100')
+  let logger = untrack(() => componentLogger('AreaChart', {data: typeof data == 'string' ? data : undefined, x, y}))
+  untrack(() => logExtraProps(logger, 'AreaChart', extraProps))
 
-  let fillColorStore = $derived(resolveColor(fillColor))
-  let lineColorStore = $derived(resolveColor(lineColor))
-  let colorPaletteStore = $derived(resolveColorPalette(colorPalette))
-  let labelColorStore = $derived(resolveColor(labelColor))
-  let seriesColorsStore = $derived(resolveColorsObject(seriesColors))
-</script>
+  function buildConfig(): EChartsConfig {
+    let yFields = parseCommaList(y)
+    if (splitBy && yFields.length > 1) throw new Error('AreaChart does not support splitBy with multiple y fields')
+
+    let stack = arrange === 'stack' || arrange === 'stack100' ? 'area-stack' : undefined
+    let stackPercentage = arrange === 'stack100' ? true : undefined
+    let sortHint = typeof sort === 'string' && sort.trim().length > 0 ? {sort} : {}
+
+    let series
+    if (splitBy) {
+      // "tall" data, one template split into one series per splitBy value by enrich()
+      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}}))
+    }
 
-{#snippet areaChartContent(loaded: any[])}
-  <Chart
-    data={loaded}
-    chartContext={{data, x, y, series}}
-    {x}
-    {y}
-    {xFmt}
-    {yFmt}
-    {series}
-    {xType}
-    {yLog}
-    {yLogBase}
-    {legend}
-    {xAxisTitle}
-    {yAxisTitle}
-    {xGridlines}
-    {yGridlines}
-    {xAxisLabels}
-    {yAxisLabels}
-    {xBaseline}
-    {yBaseline}
-    {xTickMarks}
-    {yTickMarks}
-    {yMin}
-    {yMax}
-    {yScale}
-    {title}
-    {subtitle}
-    chartType="Area Chart"
-    stackType={type}
-    {stacked100}
-    {sort}
-    {chartAreaHeight}
-    colorPalette={colorPaletteStore}
-    {echartsOptions}
-    {seriesOptions}
-    {connectGroup}
-    seriesColors={seriesColorsStore}
-    {leftPadding}
-    {rightPadding}
-    {xLabelWrap}
-  >
-    <Area
-      {line}
-      fillColor={fillColorStore}
-      lineColor={lineColorStore}
-      {fillOpacity}
-      {handleMissing}
-      {type}
-      {step}
-      {stepPosition}
-      {markers}
-      {markerShape}
-      {markerSize}
-      {labels}
-      {labelSize}
-      {labelPosition}
-      labelColor={labelColorStore}
-      {labelFmt}
-      {showAllLabels}
-      {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: [{max: stackPercentage ? 1 : undefined}, ...(y2 ? [{}] : [])],
+      series,
+    }
+  }
+</script>
 
-<QueryLoad data={data} fields={{x, y: parseCommaList(y), series}} children={areaChartContent} />
+<ECharts data={data} config={buildConfig()} {height} {width} componentId={logger.id} />

package/dist/ui/components/BarChart.svelte

@@ -1,142 +1,84 @@
 <script lang="ts">
-  import type {Snippet} from 'svelte'
-  import Chart from './Chart.svelte'
-  import Bar from './Bar.svelte'
-  import QueryLoad from './QueryLoad.svelte'
-  import {getThemeStores} from '../component-utilities/themeStores'
+  import {untrack} from 'svelte'
+  import ECharts from './ECharts.svelte'
+  import type {EChartsConfig, QueryResult, SeriesWithGroupingHint} from '../component-utilities/types.ts'
+  import {componentLogger, logExtraProps} from '../internal/telemetry.ts'
   import {parseCommaList} from '../component-utilities/inputUtils.ts'
 
   interface Props {
-    data?: any, x?: any, y?: any, y2?: any, series?: any, xType?: any, yLog?: any, yLogBase?: any
-    y2SeriesType?: any, yFmt?: any, y2Fmt?: any, xFmt?: 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
-    swapXY?: boolean | string, showAllXAxisLabels?: boolean, type?: string, fillColor?: any
-    fillOpacity?: any, outlineColor?: any, outlineWidth?: any, chartAreaHeight?: any, sort?: any
-    colorPalette?: string, labels?: any, labelSize?: any, labelPosition?: any, labelColor?: any
-    labelFmt?: any, yLabelFmt?: any, y2LabelFmt?: any, stackTotalLabel?: any, seriesLabels?: 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
+    arrange?: 'stack' | 'group' | 'stack100'
+    label?: boolean
+    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, y2Fmt = undefined,
-    xFmt = 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, swapXY = false, showAllXAxisLabels = undefined,
-    type = 'stacked', fillColor = undefined, fillOpacity = undefined, outlineColor = undefined,
-    outlineWidth = undefined, chartAreaHeight = undefined, sort = undefined, colorPalette = 'default',
-    labels = undefined, labelSize = undefined, labelPosition = undefined, labelColor = undefined,
-    labelFmt = undefined, yLabelFmt = undefined, y2LabelFmt = undefined, stackTotalLabel = undefined,
-    seriesLabels = 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,
+    arrange = 'stack',
+    label = false,
+    sort = undefined,
+    title = undefined,
+    height = undefined,
+    width = undefined,
+    ...extraProps
+  }: Props & Record<string, unknown> = $props()
 
-  let normalizedSwapXY = $derived(swapXY === 'true' || swapXY === true)
+  let logger = untrack(() => componentLogger('BarChart', {data: typeof data == 'string' ? data : undefined, x, y}))
+  untrack(() => logExtraProps(logger, 'BarChart', extraProps))
 
-  let stacked100 = $derived(type === 'stacked100')
+  function buildConfig(): EChartsConfig {
+    let xFields = parseCommaList(x)
+    let yFields = parseCommaList(y)
+    let horizontal = xFields.length > 1
 
-  let fillColorStore = $derived(resolveColor(fillColor))
-  let outlineColorStore = $derived(resolveColor(outlineColor))
-  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))
+    if (xFields.length > 1 && yFields.length !== 1) throw new Error('BarChart only supports multiple x fields for horizontal charts with a single y field')
+    if (splitBy && horizontal && xFields.length > 1) throw new Error('BarChart does not support splitBy with multiple x fields')
+    if (splitBy && !horizontal && yFields.length > 1) throw new Error('BarChart does not support splitBy with multiple y fields')
 
-  let derivedYAxisTitle = $derived(yAxisTitle ?? (y2 ? 'true' : undefined))
-  let derivedY2AxisTitle = $derived(y2AxisTitle ?? (y2 ? 'true' : undefined))
-</script>
+    let barLabel = label ? {show: true} : undefined
+    let stack = arrange === 'stack' || arrange === 'stack100' ? 'bar-stack' : undefined
+    let stackPercentage = arrange === 'stack100' ? true : undefined
+    let sortHint = typeof sort === 'string' && sort.trim().length > 0 ? {sort} : {}
+
+    let series: SeriesWithGroupingHint[]
+
+    if (splitBy) {
+      // "tall" data, series are created for unique values of the valueField (handled by an enrichment)
+      let valueField = horizontal ? xFields[0] : yFields[0]
+      let encode = {x: horizontal ? valueField : x, y: horizontal ? y : valueField, splitBy, ...sortHint}
+      series = [{type: 'bar' as const, encode, stack, stackPercentage, label: barLabel}]
+    } 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}))
+      } else {
+        series = yFields.map(field => ({type: 'bar' as const, name: field, encode: {x, y: field, ...sortHint}, label: barLabel}))
+      }
+    }
 
-{#snippet barChartContent(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}
-    swapXY={normalizedSwapXY}
-    {title}
-    {subtitle}
-    chartType="Bar Chart"
-    stackType={type}
-    {sort}
-    {stacked100}
-    {chartAreaHeight}
-    {showAllXAxisLabels}
-    colorPalette={colorPaletteStore}
-    {echartsOptions}
-    {seriesOptions}
-    {connectGroup}
-    {xLabelWrap}
-    seriesColors={seriesColorsStore}
-    {leftPadding}
-    {rightPadding}
-  >
-    <Bar
-      {type}
-      fillColor={fillColorStore}
-      {fillOpacity}
-      outlineColor={outlineColorStore}
-      {outlineWidth}
-      {labels}
-      {labelSize}
-      {labelPosition}
-      labelColor={labelColorStore}
-      {labelFmt}
-      {yLabelFmt}
-      {y2LabelFmt}
-      {stackTotalLabel}
-      {seriesLabels}
-      {showAllLabels}
-      {y2SeriesType}
-      {seriesOrder}
-      {seriesLabelFmt}
-    />
-    {@render children?.()}
-  </Chart>
-{/snippet}
+    // 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}})
+
+    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 ? [{}] : [])],
+      series,
+    }
+  }
+</script>
 
-<QueryLoad data={data} fields={{x, y: parseCommaList(y), y2: parseCommaList(y2), series}} children={barChartContent} />
+<ECharts data={data} config={buildConfig()} {height} {width} componentId={logger.id} />

package/dist/ui/components/BigValue.svelte

@@ -1,52 +1,34 @@
 <script lang="ts">
+  import {untrack} from 'svelte'
   import QueryLoad from './QueryLoad.svelte'
+  import {formatFromField} from '../component-utilities/format.ts'
+  import type {QueryResult} from '../component-utilities/types.ts'
+  import {componentLogger} from '../internal/telemetry.ts'
 
   interface Props {
-    data: string | {rows?: any[]}
+    data: string | QueryResult
     value?: string
-    fmt?: string
     title?: string
-    subtitle?: string
   }
 
-  let {data, value = undefined, fmt = undefined, title = undefined, subtitle = undefined}: Props = $props()
+  let {data, value = undefined, title = undefined}: Props = $props()
+  let logger = untrack(() => componentLogger('BigValue', {data: typeof data == 'string' ? data : undefined, value}))
 
-  function formatValue (input: any) {
+  function formatValue(input: any, loaded: QueryResult) {
     if (input === null || input === undefined) return '—'
-    if (!fmt) return String(input)
-
-    if (fmt.startsWith('num')) {
-      let fraction = parseInt(fmt.replace(/[^0-9]/g, '') || '0', 10)
-      let formatter = new Intl.NumberFormat('en-US', {
-        maximumFractionDigits: fraction,
-        minimumFractionDigits: fraction,
-      })
-      return formatter.format(Number(input))
-    }
-
-    if (fmt.startsWith('pct')) {
-      let fraction = parseInt(fmt.replace(/[^0-9]/g, '') || '0', 10)
-      let formatter = new Intl.NumberFormat('en-US', {
-        style: 'percent',
-        maximumFractionDigits: fraction,
-        minimumFractionDigits: fraction,
-      })
-      return formatter.format(Number(input))
-    }
-
-    return String(input)
+    let field = loaded?.fields?.find((entry: any) => entry?.name === value)
+    return formatFromField(field as any, input)
   }
 </script>
 
-{#snippet bigValueContent(loaded: any[])}
+{#snippet bigValueContent(loaded: QueryResult)}
   <div class="big-value">
     {#if title}<div class="big-value__title">{title}</div>{/if}
-    {#if subtitle}<div class="big-value__subtitle">{subtitle}</div>{/if}
-    <div class="big-value__value">{formatValue(loaded?.[0]?.[value])}</div>
+    <div class="big-value__value">{formatValue(loaded?.rows?.[0]?.[value], loaded)}</div>
   </div>
 {/snippet}
 
-<QueryLoad {data} fields={{value}} children={bigValueContent} />
+<QueryLoad {data} fields={{value}} children={bigValueContent} componentId={logger.id} />
 
 <style>
   .big-value {
@@ -57,19 +39,21 @@
   }
 
   .big-value__title {
-    font-size: 14px;
+    font-family: var(--font-ui);
+    font-size: 11px;
     font-weight: 600;
-    color: var(--graphene-big-value-title, #111827);
-  }
-
-  .big-value__subtitle {
-    font-size: 13px;
-    color: var(--graphene-big-value-subtitle, #4b5563);
+    color: #aaa;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
   }
 
   .big-value__value {
-    font-size: 32px;
+    font-size: 28px;
+    letter-spacing: -0.02em;
+    line-height: 1;
+    font-family: var(--font-ui);
+    font-optical-sizing: auto;
     font-weight: 600;
-    color: var(--graphene-big-value-value, #111827);
+    color: #111;
   }
 </style>

package/dist/ui/components/Column.svelte

@@ -5,35 +5,33 @@
 <script lang="ts">
   import {getContext, onDestroy, onMount, untrack} from 'svelte'
   import {type Writable, get} from 'svelte/store'
-  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'
+  import {parseCommaList, toBoolean} from '../component-utilities/inputUtils.ts'
 
   interface Props {
     id: string, description?: string, contentType?: string, title?: string, align?: string
     wrap?: boolean | string, wrapTitle?: boolean | string, height?: string, width?: string, alt?: string
-    openInNewTab?: boolean | string, linkLabel?: string, fmt?: string, totalAgg?: string, totalFmt?: string
-    weightCol?: string, subtotalFmt?: string, colorMax?: string, colorMin?: string, colorMid?: string
+    openInNewTab?: boolean | string, linkLabel?: string, totalAgg?: string
+    colorMax?: string, colorMin?: string, colorMid?: string
     colorBreakpoints?: string[], colorScale?: any, scaleColumn?: string, downIsGood?: boolean | string
     showValue?: boolean | string, deltaSymbol?: boolean | string, neutralMin?: number | string
     neutralMax?: number | string, chip?: boolean | string, sparkWidth?: number | string
     sparkHeight?: number | string, sparkColor?: string, sparkX?: string, sparkY?: string
     sparkYScale?: boolean | string, barColor?: string, negativeBarColor?: string, backgroundColor?: string
-    hideLabels?: boolean | string, colGroup?: string, fmtColumn?: string, redNegatives?: boolean | string
+    hideLabels?: boolean | string, colGroup?: string, redNegatives?: boolean | string
   }
 
   let {
     id, description = undefined, contentType = undefined, title = undefined, align = undefined,
     wrap = undefined, wrapTitle = undefined, height = undefined, width = undefined, alt = undefined,
-    openInNewTab = undefined, linkLabel = undefined, fmt = undefined, totalAgg = undefined,
-    totalFmt = undefined, weightCol = undefined, subtotalFmt = undefined, colorMax = undefined,
+    openInNewTab = undefined, linkLabel = undefined, totalAgg = undefined,
+    colorMax = undefined,
     colorMin = undefined, colorMid = undefined, colorBreakpoints = undefined, colorScale = 'default',
     scaleColumn = undefined, downIsGood = undefined, showValue = undefined, deltaSymbol = undefined,
     neutralMin = 0, neutralMax = 0, chip = undefined, sparkWidth = undefined, sparkHeight = undefined,
     sparkColor = undefined, sparkX = undefined, sparkY = undefined, sparkYScale = undefined,
     barColor = '#a5cdee', negativeBarColor = '#fca5a5', backgroundColor = 'transparent',
-    hideLabels = undefined, colGroup = undefined, fmtColumn = undefined, redNegatives = undefined,
+    hideLabels = undefined, colGroup = undefined, redNegatives = undefined,
   }: Props = $props()
 
   const {resolveColor, resolveColorPalette} = getThemeStores()
@@ -44,7 +42,7 @@
   let backgroundColorStore = $derived(resolveColor(backgroundColor))
   let colorScaleStore = $derived(resolveColorPalette(colorScale))
 
-  const chartProps = getContext<Writable<any>>(propKey)
+  const chartProps = getContext<Writable<any>>('tableProps')
 
   const identifier = Symbol('GrapheneColumn')
 
@@ -68,12 +66,7 @@
     alt,
     openInNewTab: toBoolean(openInNewTab) ?? false,
     linkLabel,
-    fmt,
-    fmtColumn,
     totalAgg,
-    totalFmt,
-    subtotalFmt,
-    weightCol,
     downIsGood: toBoolean(downIsGood) ?? false,
     deltaSymbol: toBoolean(deltaSymbol) ?? true,
     chip: toBoolean(chip) ?? false,
@@ -108,11 +101,10 @@
       let data = get(chartProps).data?.[0]
       if (data && !Object.keys(data).includes(id)) {
         let error = `Error in table: ${id} does not exist in the dataset`
-        if (strictBuild) throw new Error(error)
         console.warn(error)
       }
-    } catch (error) {
-      if (strictBuild) throw error
+    } catch(error) {
+      console.warn(error)
     }
 
     // Initial registration
@@ -127,7 +119,7 @@
   $effect(() => {
     // Read all props that could change
     void [id, title, align, wrap, wrapTitle, contentType, height, width, alt, openInNewTab,
-      linkLabel, fmt, fmtColumn, totalAgg, totalFmt, subtotalFmt, weightCol, downIsGood,
+      linkLabel, totalAgg, downIsGood,
       deltaSymbol, chip, neutralMin, neutralMax, showValue, colorMax, colorMin, colorMid,
       colorScale, colorBreakpoints, scaleColumn, colGroup, description, redNegatives,
       sparkWidth, sparkHeight, sparkColor, sparkX, sparkY, sparkYScale, barColor,