@graphenedata/cli 0.0.12 → 0.0.14

package/dist/ui/components/Chart.svelte

@@ -1,14 +1,7 @@
-<script>
-  import {writable} from 'svelte/store'
-  import {setContext} from 'svelte'
+<script lang="ts">
+  import {setContext, type Snippet} from 'svelte'
+  import {type Writable, writable, get} from 'svelte/store'
   import {propKey, configKey} from '../component-utilities/chartContext.js'
-  let props = writable({})
-  /** @type {import("svelte/store").Writable<import("echarts").Options>} */
-  let config = writable({})
-
-  setContext(propKey, props)
-  setContext(configKey, config)
-
   import ECharts from './ECharts.svelte'
   import getColumnSummary from '../component-utilities/getColumnSummary.js'
   import getDistinctValues from '../component-utilities/getDistinctValues.js'
@@ -26,23 +19,48 @@
   import {parseCommaList} from '../component-utilities/inputUtils.ts'
   import {logError} from '../internal/telemetry.ts'
 
+  interface Props {
+    data?: any, chartContext?: any, queryID?: any, x?: any, y?: any, y2?: any, series?: any, size?: any
+    tooltipTitle?: any, showAllXAxisLabels?: any, swapXY?: boolean | string, title?: string, subtitle?: string
+    chartType?: string, bubble?: boolean, hist?: boolean, boxplot?: boolean, xType?: string
+    xAxisTitle?: string, xBaseline?: boolean | string, xTickMarks?: boolean | string
+    xGridlines?: boolean | string, xAxisLabels?: boolean | string, sort?: boolean | string, xFmt?: any
+    xMin?: any, xMax?: any, yLog?: boolean | string, yType?: string, yLogBase?: number, yAxisTitle?: string
+    yBaseline?: boolean | string, yTickMarks?: boolean | string, yGridlines?: boolean | string
+    yAxisLabels?: boolean | string, yMin?: any, yMax?: any, yScale?: boolean | string, yFmt?: any
+    yAxisColor?: string, y2AxisTitle?: string, y2Baseline?: boolean | string, y2TickMarks?: boolean | string
+    y2Gridlines?: boolean | string, y2AxisLabels?: boolean | string, y2Min?: any, y2Max?: any
+    y2Scale?: boolean | string, y2Fmt?: any, y2AxisColor?: string, sizeFmt?: any, colorPalette?: string
+    legend?: any, echartsOptions?: any, seriesOptions?: any, seriesColors?: any, stackType?: string
+    stacked100?: boolean, chartAreaHeight?: any, connectGroup?: string, leftPadding?: any, rightPadding?: any
+    xLabelWrap?: boolean | string, children?: Snippet
+  }
+
+  // Note: renamed from 'props' to 'chartProps' to avoid conflict with $props() rune
+  let chartProps = writable({})
+  let config: Writable<any> = writable({})
+
+  setContext(propKey, chartProps)
+  setContext(configKey, config)
+
   const {theme, resolveColor, resolveColorsObject, resolveColorPalette} = getThemeStores()
 
-  // ---------------------------------------------------------------------------------------
-  // Input Props
-  // ---------------------------------------------------------------------------------------
-  // Data and columns:
-  export let data = undefined
-  export let chartContext = undefined
-  export let queryID = undefined
-  export let x = undefined
-  export let y = undefined
-  export let y2 = undefined
-  export let series = undefined
-  export let size = undefined
-  export let tooltipTitle = undefined
-
-  export let showAllXAxisLabels = undefined
+  let {
+    data = undefined, chartContext = undefined, queryID = undefined, x = undefined, y = undefined,
+    y2 = undefined, series = undefined, size = undefined, tooltipTitle = undefined,
+    showAllXAxisLabels = undefined, swapXY = false, title = undefined, subtitle = undefined,
+    chartType = 'Chart', bubble = false, hist = false, boxplot = false, xType = undefined,
+    xAxisTitle = 'false', xBaseline = true, xTickMarks = false, xGridlines = false, xAxisLabels = true,
+    sort = true, xFmt = undefined, xMin = undefined, xMax = undefined, yLog = false, yType = undefined,
+    yLogBase = 10, yAxisTitle = 'false', yBaseline = false, yTickMarks = false, yGridlines = true,
+    yAxisLabels = true, yMin = undefined, yMax = undefined, yScale = false, yFmt = undefined,
+    yAxisColor = 'true', y2AxisTitle = 'false', y2Baseline = false, y2TickMarks = false,
+    y2Gridlines = true, y2AxisLabels = true, y2Min = undefined, y2Max = undefined, y2Scale = false,
+    y2Fmt = undefined, y2AxisColor = 'true', sizeFmt = undefined, colorPalette = 'default',
+    legend = undefined, echartsOptions = undefined, seriesOptions = undefined, seriesColors = undefined,
+    stackType = undefined, stacked100 = false, chartAreaHeight = undefined, connectGroup = undefined,
+    leftPadding = undefined, rightPadding = undefined, xLabelWrap = false, children,
+  }: Props = $props()
 
   // This should be reworked to fit better with svelte's reactivity.
 
@@ -54,117 +72,41 @@
   // then we throw if the fallback column is now missing.
 
   // This is a hack to get around the above
-  // Reactively updated below to prevent circular reactivity
-  let ySet = y ? true : false
+  // Track whether x/y were initially set (not using fallbacks)
+  // These capture the initial values intentionally - they're set once on mount
+  // and updated in the effect. Using closure pattern to silence state_referenced_locally warning.
+  let ySet = $state((() => y ? true : false)())
   // const y2Set = y2 ? true : false;
-  let xSet = x ? true : false
-
-  export let swapXY = false // Flipped axis chart
-  $: swapXY = toBoolean(swapXY)
+  let xSet = $state((() => x ? true : false)())
+
+  // Convert boolean string props to actual booleans
+  let swapXY_bool = $derived(toBoolean(swapXY))
+  let xBaseline_bool = $derived(toBoolean(xBaseline))
+  let xTickMarks_bool = $derived(toBoolean(xTickMarks))
+  let xGridlines_bool = $derived(toBoolean(xGridlines))
+  let xAxisLabels_bool = $derived(toBoolean(xAxisLabels))
+  let sort_bool = $derived(toBoolean(sort))
+  let yLog_bool = $derived(toBoolean(yLog))
+  let yBaseline_bool = $derived(toBoolean(yBaseline))
+  let yTickMarks_bool = $derived(toBoolean(yTickMarks))
+  let yGridlines_bool = $derived(toBoolean(yGridlines))
+  let yAxisLabels_bool = $derived(toBoolean(yAxisLabels))
+  let yScale_bool = $derived(toBoolean(yScale))
+  let y2Baseline_bool = $derived(toBoolean(y2Baseline))
+  let y2TickMarks_bool = $derived(toBoolean(y2TickMarks))
+  let y2Gridlines_bool = $derived(toBoolean(y2Gridlines))
+  let y2AxisLabels_bool = $derived(toBoolean(y2AxisLabels))
+  let y2Scale_bool = $derived(toBoolean(y2Scale))
+  let xLabelWrap_bool = $derived(toBoolean(xLabelWrap))
+
+  let yAxisColorStore = $derived(resolveColor(yAxisColor))
+  let y2AxisColorStore = $derived(resolveColor(y2AxisColor))
+  let colorPaletteResolved = $derived(resolveColorPalette(colorPalette))
+  let seriesColorsResolved = $derived(resolveColorsObject(seriesColors))
 
-  // Chart titles:
-  export let title = undefined
-  export let subtitle = undefined
-
-  // Chart type:
-  export let chartType = 'Chart' // Used to label chart error messages
-  export let bubble = false
-  export let hist = false
-  export let boxplot = false
   let reqCols
 
-  // X axis:
-  export let xType = undefined // category or value
-  export let xAxisTitle = 'false' // Default false. If true, use formatTitle(x). Or you can supply a custom string
-  export let xBaseline = true
-  $: xBaseline = toBoolean(xBaseline)
-  export let xTickMarks = false
-  $: xTickMarks = toBoolean(xTickMarks)
-  export let xGridlines = false
-  $: xGridlines = toBoolean(xGridlines)
-  export let xAxisLabels = true
-  $: xAxisLabels = toBoolean(xAxisLabels)
-  export let sort = true // sorts x values in case x is out of order in dataset (e.g., would create line chart that is out of order)
-  $: sort = toBoolean(sort)
-  export let xFmt = undefined
-  export let xMin = undefined
-  export let xMax = undefined
-
-  // Y axis:
-  export let yLog = false
-  $: yLog = toBoolean(yLog)
-  export let yType = yLog === true ? 'log' : 'value' // value or log
-  export let yLogBase = 10
-  export let yAxisTitle = 'false' // Default false. If true, use formatTitle(x). Or you can supply a custom string
-  export let yBaseline = false
-  $: yBaseline = toBoolean(yBaseline)
-
-  export let yTickMarks = false
-  $: yTickMarks = toBoolean(yTickMarks)
-  export let yGridlines = true
-  $: yGridlines = toBoolean(yGridlines)
-  export let yAxisLabels = true
-  $: yAxisLabels = toBoolean(yAxisLabels)
-
-  export let yMin = undefined
-  export let yMax = undefined
-  export let yScale = false
-  $: yScale = toBoolean(yScale)
-  export let yFmt = undefined
-
-  export let yAxisColor = 'true'
-  $: yAxisColorStore = resolveColor(yAxisColor)
-
-  // Y2 axis:
-  export let y2AxisTitle = 'false' // Default false. If true, use formatTitle(x). Or you can supply a custom string
-  export let y2Baseline = false
-  $: y2Baseline = toBoolean(y2Baseline)
-  export let y2TickMarks = false
-  $: y2TickMarks = toBoolean(y2TickMarks)
-  export let y2Gridlines = true
-  $: y2Gridlines = toBoolean(y2Gridlines)
-  export let y2AxisLabels = true
-  $: y2AxisLabels = toBoolean(y2AxisLabels)
-  export let y2Min = undefined
-  export let y2Max = undefined
-  export let y2Scale = false
-  $: y2Scale = toBoolean(y2Scale)
-  export let y2Fmt = undefined
-
-  export let y2AxisColor = 'true'
-  $: y2AxisColorStore = resolveColor(y2AxisColor)
-
-  // Other column formats:
-  export let sizeFmt = undefined
-
-  // Color palette:
-  export let colorPalette = 'default'
-  $: colorPaletteStore = resolveColorPalette(colorPalette)
-
-  // Legend:
-  export let legend = undefined
-
-  // Additional Config Options:
-  export let echartsOptions = undefined // additional ECharts config object that will append to the config generated by our API
-  export let seriesOptions = undefined // additional ECharts config object that will be applied to every series in the config
-
-  export let seriesColors = undefined
-  $: seriesColorsStore = resolveColorsObject(seriesColors)
-
-  export let stackType = undefined // used in BarChart (stacked, grouped) and AreaChart (stacked)
-  export let stacked100 = false
-
-  export let chartAreaHeight = undefined
-
-  export let connectGroup = undefined // string represent name of group for connected charts. Charts with same connectGroup will have connected interactions
-
-  export let leftPadding = undefined
-  export let rightPadding = undefined
-
-  export let xLabelWrap = false // false = truncate, true = wrap
-  $: xLabelWrap = toBoolean(xLabelWrap)
-
-  const xAxisLabelOverflow = xLabelWrap ? 'break' : 'truncate'
+  let xAxisLabelOverflow = $derived(xLabelWrap_bool ? 'break' : 'truncate')
 
   // ---------------------------------------------------------------------------------------
   // Variable Declaration
@@ -223,8 +165,9 @@
   let heightMultiplier
 
   // Set final chart height:
-  let height
-  let width
+  // Using a separate writable store for dimensions so they're reactive in the template
+  // without causing infinite effect loops (which $state would cause since the effect reads+writes them).
+  let dimensions = writable<{height?: string, width?: string}>({})
 
   let missingCols = []
 
@@ -236,13 +179,14 @@
   let optCols = []
   let i
 
+  // svelte-ignore non_reactive_update
   let error
 
   // Date String Handling:
   let columnSummaryArray
   let dateCols
 
-  $: {
+  $effect(() => {
     try {
       error = undefined
       missingCols = []
@@ -251,10 +195,10 @@
       inputCols = []
       optCols = []
       uColName = []
-      // Normalize list-like inputs first
-      y = parseCommaList(y)
-      y2 = parseCommaList(y2)
-      ySet = y.length > 0
+      // Normalize list-like inputs first - use local variables instead of reassigning props
+      let yLocal = parseCommaList(y)
+      let y2Local = parseCommaList(y2)
+      ySet = yLocal.length > 0
       xSet = x ? true : false
 
       checkInputs(data) // check that dataset exists
@@ -272,14 +216,15 @@
       // Make assumptions to complete required props
       // ---------------------------------------------------------------------------------------
       // If no x column was supplied, assume first column in dataset is x
+      let xLocal = x
       if (!xSet) {
-        x = columnNames[0]
+        xLocal = columnNames[0]
       }
 
       // If no y column(s) supplied, assume all number columns other than x are the y columns:
       if (!ySet) {
         uColNames = columnNames.filter(function (col) {
-          return ![x, series, size].includes(col)
+          return ![xLocal, series, size].includes(col)
         })
 
         for (let i = 0; i < uColNames.length; i++) {
@@ -290,25 +235,25 @@
           }
         }
 
-        y = unusedColumns // always array; empty handled by required prop checks
+        yLocal = unusedColumns // always array; empty handled by required prop checks
       }
       // Establish required columns based on chart type:
       if (bubble) {
         reqCols = {
-          x: x,
-          y: y,
+          x: xLocal,
+          y: yLocal,
           size: size,
         }
       } else if (hist) {
         reqCols = {
-          x: x,
+          x: xLocal,
         }
       } else if (boxplot) {
         reqCols = {}
       } else {
         reqCols = {
-          x: x,
-          y: y,
+          x: xLocal,
+          y: yLocal,
         }
       }
 
@@ -326,17 +271,17 @@
       }
 
       // Fix for stacked100 overwriting y variable. Bandaid fix - not a long-term solution:
-      if (stacked100 === true && Array.isArray(y) && y.some(col => col.includes('_pct')) && originalRun === false) {
-        for (let i = 0; i < y.length; i++) y[i] = y[i].replace('_pct', '')
+      if (stacked100 === true && Array.isArray(yLocal) && yLocal.some(col => col.includes('_pct')) && originalRun === false) {
+        yLocal = yLocal.map(col => col.replace('_pct', ''))
         originalRun = false
       }
 
       // Check the inputs supplied to the chart:
-      if (x) {
-        inputCols.push(x)
+      if (xLocal) {
+        inputCols.push(xLocal)
       }
-      if (Array.isArray(y)) for (i = 0; i < y.length; i++) inputCols.push(y[i])
-      if (Array.isArray(y2)) for (i = 0; i < y2.length; i++) inputCols.push(y2[i])
+      if (Array.isArray(yLocal)) for (i = 0; i < yLocal.length; i++) inputCols.push(yLocal[i])
+      if (Array.isArray(y2Local)) for (i = 0; i < y2Local.length; i++) inputCols.push(y2Local[i])
       if (size) {
         inputCols.push(size)
       }
@@ -352,18 +297,18 @@
       // ---------------------------------------------------------------------------------------
       // Aggregate Data if Required
       // ---------------------------------------------------------------------------------------
-
+      let dataLocal = data
       if (stacked100 === true) {
-        data = getStackPercentages(data, x, y)
-        for (let i = 0; i < y.length; i++) y[i] = y[i] + '_pct'
+        dataLocal = getStackPercentages(dataLocal, xLocal, yLocal)
+        yLocal = yLocal.map(col => col + '_pct')
         originalRun = false
-        columnSummary = getColumnSummary(data)
+        columnSummary = getColumnSummary(dataLocal)
       }
 
       // ---------------------------------------------------------------------------------------
       // Define x axis type
       // ---------------------------------------------------------------------------------------
-      xDataType = columnSummary[x].type
+      xDataType = columnSummary[xLocal].type
 
       // Get xDataType into ECharts default types:
       switch (xDataType) {
@@ -380,67 +325,68 @@
           break
       }
 
-      xType = xType === 'category' ? 'category' : xDataType
+      let xTypeLocal = xType === 'category' ? 'category' : xDataType
 
       // Set xAxisLabel overflow behaviour based on column type
-      if (!showAllXAxisLabels) {
+      let showAllXAxisLabelsLocal = showAllXAxisLabels
+      if (!showAllXAxisLabelsLocal) {
         // if user has not set showXAxisLabels
-        showAllXAxisLabels = xType === 'category'
+        showAllXAxisLabelsLocal = xTypeLocal === 'category'
       } else {
         // if user has set showXAxisLabels, convert to boolean
-        showAllXAxisLabels = showAllXAxisLabels === 'true' || showAllXAxisLabels === true
+        showAllXAxisLabelsLocal = showAllXAxisLabelsLocal === 'true' || showAllXAxisLabelsLocal === true
       }
 
       // Throw error if attempting to plot value or time on horizontal x-axis:
-      if (swapXY && xType !== 'category') {
+      if (swapXY_bool && xTypeLocal !== 'category') {
         throw Error(
           'Horizontal charts do not support a value or time-based x-axis. You can either change your SQL query to output string values or set swapXY=false.',
         )
       }
 
       // Throw error if attempting to plot secondary y-axis on horizontal chart:
-      if (swapXY && y2.length) {
+      if (swapXY_bool && y2Local.length) {
         throw Error(
           'Horizontal charts do not support a secondary y-axis. You can either set swapXY=false or remove the y2 prop from your chart.',
         )
       }
 
       // Override xType if axes are swapped - only category enabled on horizontal axis
-      if (swapXY) {
-        xType = 'category'
+      if (swapXY_bool) {
+        xTypeLocal = 'category'
       }
 
       // Check for x mismatch:
-      xMismatch = xDataType === 'value' && xType === 'category'
+      xMismatch = xDataType === 'value' && xTypeLocal === 'category'
 
       // ---------------------------------------------------------------------------------------
       // Sort data based on xType
       // ---------------------------------------------------------------------------------------
-      if (sort) {
-        let sortColumn = x
+      if (sort_bool) {
+        let sortColumn = xLocal
         if (xDataType === 'category') {
-          sortColumn = Array.isArray(y) ? (y[0] ?? x) : x
+          sortColumn = Array.isArray(yLocal) ? (yLocal[0] ?? xLocal) : xLocal
         }
         let sortAscending = xDataType !== 'category'
-        data = getSortedData(data, sortColumn, sortAscending)
+        dataLocal = getSortedData(dataLocal, sortColumn, sortAscending)
       }
 
       // Always sort time axes by x - this prevents the lines from being drawn out of order
       if (xDataType === 'time') {
-        data = getSortedData(data, x, true)
+        dataLocal = getSortedData(dataLocal, xLocal, true)
       }
 
       // ---------------------------------------------------------------------------------------
       // Standardize date columns
       // ---------------------------------------------------------------------------------------
 
-      columnSummaryArray = getColumnSummary(data, 'array')
+      columnSummaryArray = getColumnSummary(dataLocal, 'array')
       dateCols = columnSummaryArray.filter((d) => d.type === 'date')
       dateCols = dateCols.map((d) => d.id)
 
       if (dateCols.length > 0) {
         for (let i = 0; i < dateCols.length; i++) {
-          data = standardizeDateColumn(data, dateCols[i])
+          dataLocal = standardizeDateColumn(dataLocal, dateCols[i])
         }
       }
 
@@ -448,21 +394,21 @@
       // Get format codes for axes
       // ---------------------------------------------------------------------------------------
       if (xFmt) {
-        xFormat = getFormatObjectFromString(xFmt, columnSummary[x].format?.valueType)
+        xFormat = getFormatObjectFromString(xFmt, columnSummary[xLocal].format?.valueType)
       } else {
-        xFormat = columnSummary[x].format
+        xFormat = columnSummary[xLocal].format
       }
 
-      if (y.length === 0) {
+      if (yLocal.length === 0) {
         yFormat = 'str'
       } else {
-        if (yFmt) yFormat = getFormatObjectFromString(yFmt, columnSummary[y[0]].format?.valueType)
-        else yFormat = columnSummary[y[0]].format
+        if (yFmt) yFormat = getFormatObjectFromString(yFmt, columnSummary[yLocal[0]].format?.valueType)
+        else yFormat = columnSummary[yLocal[0]].format
       }
 
-      if (y2.length) {
-        if (y2Fmt) y2Format = getFormatObjectFromString(y2Fmt, columnSummary[y2[0]].format?.valueType)
-        else y2Format = columnSummary[y2[0]].format
+      if (y2Local.length) {
+        if (y2Fmt) y2Format = getFormatObjectFromString(y2Fmt, columnSummary[y2Local[0]].format?.valueType)
+        else y2Format = columnSummary[y2Local[0]].format
       }
 
       if (size) {
@@ -473,97 +419,122 @@
         }
       }
 
-      xUnitSummary = columnSummary[x].columnUnitSummary
+      xUnitSummary = columnSummary[xLocal].columnUnitSummary
 
-      if (y.length) yUnitSummary = columnSummary[y[0]].columnUnitSummary
+      if (yLocal.length) yUnitSummary = columnSummary[yLocal[0]].columnUnitSummary
 
-      if (y2.length) y2UnitSummary = columnSummary[y2[0]].columnUnitSummary
+      if (y2Local.length) y2UnitSummary = columnSummary[y2Local[0]].columnUnitSummary
 
-      if (xAxisTitle === 'true') {
-        xAxisTitle = formatTitle(x, xFormat)
-      } else if (xAxisTitle === 'false') {
-        xAxisTitle = ''
+      let xAxisTitleLocal = xAxisTitle
+      if (xAxisTitleLocal === 'true') {
+        xAxisTitleLocal = formatTitle(xLocal, xFormat)
+      } else if (xAxisTitleLocal === 'false') {
+        xAxisTitleLocal = ''
       }
 
-      if (yAxisTitle === 'true') {
-        if (y.length === 1) {
-          yAxisTitle = formatTitle(y[0], yFormat)
+      let yAxisTitleLocal = yAxisTitle
+      if (yAxisTitleLocal === 'true') {
+        if (yLocal.length === 1) {
+          yAxisTitleLocal = formatTitle(yLocal[0], yFormat)
         } else {
-          yAxisTitle = ''
+          yAxisTitleLocal = ''
         }
-      } else if (yAxisTitle === 'false') {
-        yAxisTitle = ''
+      } else if (yAxisTitleLocal === 'false') {
+        yAxisTitleLocal = ''
       }
 
-      if (y2AxisTitle === 'true') {
-        if (y2.length === 1) {
-          y2AxisTitle = formatTitle(y2[0], y2Format)
+      let y2AxisTitleLocal = y2AxisTitle
+      if (y2AxisTitleLocal === 'true') {
+        if (y2Local.length === 1) {
+          y2AxisTitleLocal = formatTitle(y2Local[0], y2Format)
         } else {
-          y2AxisTitle = ''
+          y2AxisTitleLocal = ''
         }
-      } else if (y2AxisTitle === 'false') {
-        y2AxisTitle = ''
+      } else if (y2AxisTitleLocal === 'false') {
+        y2AxisTitleLocal = ''
       }
 
       // ---------------------------------------------------------------------------------------
       // Get total series count
       // ---------------------------------------------------------------------------------------
-      let yCount = y.length
-      let seriesCount = series ? getDistinctCount(data, series) : 1
+      let yCount = yLocal.length
+      let seriesCount = series ? getDistinctCount(dataLocal, series) : 1
       let ySeriesCount = yCount * seriesCount
 
       // y2Count may need to be adjusted to also factor in the series column. For now, we really
       // only need to know that it's multi-series, so > 1 is sufficient
-      let y2Count = y2.length
+      let y2Count = y2Local.length
       let totalSeriesCount = ySeriesCount + y2Count
 
       // ---------------------------------------------------------------------------------------
       // Set legend flag
       // ---------------------------------------------------------------------------------------
-      if (legend !== undefined) {
-        legend = legend === 'true' || legend === true
+      let legendLocal = legend
+      if (legendLocal !== undefined) {
+        legendLocal = legendLocal === 'true' || legendLocal === true
       }
 
-      legend = legend ?? totalSeriesCount > 1
+      legendLocal = legendLocal ?? totalSeriesCount > 1
 
       // ---------------------------------------------------------------------------------------
       // Handle errors for log axes (cannot be used with stacked charts)
       // ---------------------------------------------------------------------------------------
 
-      if (stacked100 === true && yLog === true) {
+      if (stacked100 === true && yLog_bool === true) {
         throw Error('Log axis cannot be used in a 100% stacked chart')
-      } else if (stackType === 'stacked' && totalSeriesCount > 1 && yLog === true) {
+      } else if (stackType === 'stacked' && totalSeriesCount > 1 && yLog_bool === true) {
         throw Error('Log axis cannot be used in a stacked chart')
       }
 
       let minYValue
-      if (y.length) {
-        minYValue = columnSummary[y[0]].columnUnitSummary.min
-        for (let i = 0; i < y.length; i++) {
-          if (columnSummary[y[i]].columnUnitSummary.min < minYValue) {
-            minYValue = columnSummary[y[i]].columnUnitSummary.min
+      if (yLocal.length) {
+        minYValue = columnSummary[yLocal[0]].columnUnitSummary.min
+        for (let i = 0; i < yLocal.length; i++) {
+          if (columnSummary[yLocal[i]].columnUnitSummary.min < minYValue) {
+            minYValue = columnSummary[yLocal[i]].columnUnitSummary.min
           }
         }
       }
 
-      if (yLog === true && minYValue <= 0 && minYValue !== null) {
+      if (yLog_bool === true && minYValue <= 0 && minYValue !== null) {
         throw Error('Log axis cannot display values less than or equal to zero')
       }
 
+      // ---------------------------------------------------------------------------------------
+      // Compute chartAreaHeight locally
+      // ---------------------------------------------------------------------------------------
+      let chartAreaHeightLocal = chartAreaHeight
+      if (chartAreaHeightLocal) {
+        // if chartAreaHeight was user-supplied
+        chartAreaHeightLocal = Number(chartAreaHeightLocal)
+        if (isNaN(chartAreaHeightLocal)) {
+          // input must be a number
+          throw Error('chartAreaHeight must be a number')
+        } else if (chartAreaHeightLocal <= 0) {
+          throw Error('chartAreaHeight must be a positive number')
+        }
+      } else {
+        chartAreaHeightLocal = 220
+      }
+
+      // Compute yType locally
+      let yTypeLocal = yLog_bool === true ? 'log' : (yType ?? 'value')
+
       // ---------------------------------------------------------------------------------------
       // Add props to store to let child components access them
       // ---------------------------------------------------------------------------------------
-      props.update((d) => {
+      chartProps.update((d) => {
         return {
           ...d,
-          data,
-          x,
-          y,
-          y2,
+          error: undefined,
+          data: dataLocal,
+          x: xLocal,
+          y: yLocal,
+          y2: y2Local,
           series,
-          swapXY,
-          sort,
-          xType,
+          swapXY: swapXY_bool,
+          sort: sort_bool,
+          xType: xTypeLocal,
           xFormat,
           yFormat,
           y2Format,
@@ -573,11 +544,11 @@
           yMin,
           y2Min,
           columnSummary,
-          xAxisTitle,
-          yAxisTitle,
-          y2AxisTitle,
+          xAxisTitle: xAxisTitleLocal,
+          yAxisTitle: yAxisTitleLocal,
+          y2AxisTitle: y2AxisTitleLocal,
           tooltipTitle,
-          chartAreaHeight,
+          chartAreaHeight: chartAreaHeightLocal,
           chartType,
           yCount,
           y2Count,
@@ -587,16 +558,16 @@
       // ---------------------------------------------------------------------------------------
       // Axis Configuration
       // ---------------------------------------------------------------------------------------
-      xDistinct = getDistinctValues(data, x)
+      xDistinct = getDistinctValues(dataLocal, xLocal)
       let secondaryAxis
 
-      if (swapXY) {
+      if (swapXY_bool) {
         horizAxisConfig = {
-          type: yType,
+          type: yTypeLocal,
           logBase: yLogBase,
           position: 'top',
           axisLabel: {
-            show: yAxisLabels,
+            show: yAxisLabels_bool,
             hideOverlap: true,
             showMaxLabel: true,
             formatter: function (value) {
@@ -606,23 +577,24 @@
           },
           min: yMin,
           max: yMax,
-          scale: yScale,
+          minInterval: yUnitSummary?.maxDecimals === 0 ? 1 : undefined,
+          scale: yScale_bool,
           splitLine: {
-            show: yGridlines,
+            show: yGridlines_bool,
           },
           axisLine: {
-            show: yBaseline,
+            show: yBaseline_bool,
             onZero: false,
           },
           axisTick: {
-            show: yTickMarks,
+            show: yTickMarks_bool,
           },
           boundaryGap: false,
           z: 2,
         }
       } else {
         horizAxisConfig = {
-          type: xType,
+          type: xTypeLocal,
           min: xMin,
           max: xMax,
           tooltip: {
@@ -635,20 +607,20 @@
             },
           },
           splitLine: {
-            show: xGridlines,
+            show: xGridlines_bool,
           },
           axisLine: {
-            show: xBaseline,
+            show: xBaseline_bool,
           },
           axisTick: {
-            show: xTickMarks,
+            show: xTickMarks_bool,
           },
           axisLabel: {
-            show: xAxisLabels,
+            show: xAxisLabels_bool,
             hideOverlap: true,
-            showMaxLabel: xType === 'category' || xType === 'value', // max label for ECharts' time axis is a stub - default for that is false
+            showMaxLabel: xTypeLocal === 'category' || xTypeLocal === 'value', // max label for ECharts' time axis is a stub - default for that is false
             formatter:
-              xType === 'time' || xType === 'category'
+              xTypeLocal === 'time' || xTypeLocal === 'category'
                 ? false
                 : function (value) {
                   return formatAxisValue(value, xFormat, xUnitSummary)
@@ -660,21 +632,21 @@
         }
       }
 
-      if (swapXY) {
+      if (swapXY_bool) {
         verticalAxisConfig = {
-          type: xType,
+          type: xTypeLocal,
           inverse: 'true',
           splitLine: {
-            show: xGridlines,
+            show: xGridlines_bool,
           },
           axisLine: {
-            show: xBaseline,
+            show: xBaseline_bool,
           },
           axisTick: {
-            show: xTickMarks,
+            show: xTickMarks_bool,
           },
           axisLabel: {
-            show: xAxisLabels,
+            show: xAxisLabels_bool,
             hideOverlap: true,
             // formatter:
             //     function(value){
@@ -688,32 +660,34 @@
         }
       } else {
         let primaryAxisColor = (() => {
-          if (!(Array.isArray(y2) && y2.length)) return undefined
-          if ($yAxisColorStore === 'true') return $colorPaletteStore[0]
-          if ($yAxisColorStore === 'false') return undefined
-          return $yAxisColorStore
+          if (!(Array.isArray(y2Local) && y2Local.length)) return undefined
+          let yColor = get(yAxisColorStore)
+          if (yColor === 'true') return $colorPaletteResolved?.[0]
+          if (yColor === 'false') return undefined
+          return yColor
         })()
         let secondaryAxisColor = (() => {
-          if ($y2AxisColorStore === 'true') return $colorPaletteStore[ySeriesCount]
-          if ($y2AxisColorStore === 'false') return undefined
-          return $y2AxisColorStore
+          let y2Color = get(y2AxisColorStore)
+          if (y2Color === 'true') return $colorPaletteResolved?.[ySeriesCount]
+          if (y2Color === 'false') return undefined
+          return y2Color
         })()
 
         verticalAxisConfig = {
-          type: yType,
+          type: yTypeLocal,
           logBase: yLogBase,
           splitLine: {
-            show: yGridlines,
+            show: yGridlines_bool,
           },
           axisLine: {
-            show: yBaseline,
+            show: yBaseline_bool,
             onZero: false,
           },
           axisTick: {
-            show: yTickMarks,
+            show: yTickMarks_bool,
           },
           axisLabel: {
-            show: yAxisLabels,
+            show: yAxisLabels_bool,
             hideOverlap: true,
             margin: 4,
             formatter: function (value) {
@@ -721,7 +695,7 @@
             },
             color: primaryAxisColor,
           },
-          name: yAxisTitle,
+          name: yAxisTitleLocal,
           nameLocation: 'end',
           nameTextStyle: {
             align: 'left',
@@ -732,27 +706,28 @@
           nameGap: 6,
           min: yMin,
           max: yMax,
-          scale: yScale,
-          boundaryGap: ['0%', '1%'],
+          minInterval: yUnitSummary?.maxDecimals === 0 ? 1 : undefined,
+          scale: yScale_bool,
+          boundaryGap: yUnitSummary?.maxDecimals === 0 ? false : ['0%', '1%'],
           z: 2,
         }
 
         secondaryAxis = {
           type: 'value',
-          show: false,
+          show: y2Count > 0,
           alignTicks: true,
           splitLine: {
-            show: y2Gridlines,
+            show: y2Gridlines_bool,
           },
           axisLine: {
-            show: y2Baseline,
+            show: y2Baseline_bool,
             onZero: false,
           },
           axisTick: {
-            show: y2TickMarks,
+            show: y2TickMarks_bool,
           },
           axisLabel: {
-            show: y2AxisLabels,
+            show: y2AxisLabels_bool,
             hideOverlap: true,
             margin: 4,
             formatter: function (value) {
@@ -760,7 +735,7 @@
             },
             color: secondaryAxisColor,
           },
-          name: y2AxisTitle,
+          name: y2AxisTitleLocal,
           nameLocation: 'end',
           nameTextStyle: {
             align: 'right',
@@ -771,8 +746,9 @@
           nameGap: 6,
           min: y2Min,
           max: y2Max,
-          scale: y2Scale,
-          boundaryGap: ['0%', '1%'],
+          minInterval: y2UnitSummary?.maxDecimals === 0 ? 1 : undefined,
+          scale: y2Scale_bool,
+          boundaryGap: y2UnitSummary?.maxDecimals === 0 ? false : ['0%', '1%'],
           z: 2,
         }
 
@@ -783,24 +759,11 @@
       // Set up chart area
       // ---------------------------------------------------------------------------------------
 
-      if (chartAreaHeight) {
-        // if chartAreaHeight was user-supplied
-        chartAreaHeight = Number(chartAreaHeight)
-        if (isNaN(chartAreaHeight)) {
-          // input must be a number
-          throw Error('chartAreaHeight must be a number')
-        } else if (chartAreaHeight <= 0) {
-          throw Error('chartAreaHeight must be a positive number')
-        }
-      } else {
-        chartAreaHeight = 220
-      }
-
       hasTitle = title ? true : false
       hasSubtitle = subtitle ? true : false
-      hasLegend = legend * (series !== null || (y.length > 1))
-      hasTopAxisTitle = yAxisTitle !== '' && swapXY
-      hasBottomAxisTitle = xAxisTitle !== '' && !swapXY
+      hasLegend = legendLocal * (series !== null || (yLocal.length > 1))
+      hasTopAxisTitle = yAxisTitleLocal !== '' && swapXY_bool
+      hasBottomAxisTitle = xAxisTitleLocal !== '' && !swapXY_bool
 
       titleFontSize = 15
       subtitleFontSize = 13
@@ -832,23 +795,22 @@
       // Small bars are allowed on normal bar chart (e.g., time series bar chart)
       maxBars = 8
       heightMultiplier = 1
-      if (swapXY) {
+      if (swapXY_bool) {
         barCount = xDistinct.length
         heightMultiplier = Math.max(1, barCount / maxBars)
       }
 
-      chartContainerHeight = chartAreaHeight * heightMultiplier + chartTop + chartBottom
+      chartContainerHeight = chartAreaHeightLocal * heightMultiplier + chartTop + chartBottom
 
       topAxisTitleTop = legendTop + legendHeight + 7
 
       // Set final chart height:
-      height = chartContainerHeight + 'px'
-      width = '100%'
+      dimensions.set({height: chartContainerHeight + 'px', width: '100%'})
 
       // ---------------------------------------------------------------------------------------
       // Set up horizontal axis title (custom graphic)
       // ---------------------------------------------------------------------------------------
-      horizAxisTitle = swapXY ? yAxisTitle : xAxisTitle
+      horizAxisTitle = swapXY_bool ? yAxisTitleLocal : xAxisTitleLocal
       if (horizAxisTitle !== '') {
         horizAxisTitle = horizAxisTitle + ' →' // u2192 is js escaped version of &rarr;
       }
@@ -863,9 +825,9 @@
         },
         cursor: 'auto',
         // Positioning (if swapXY, top right; otherwise bottom right)
-        right: swapXY ? '2%' : '3%',
-        top: swapXY ? topAxisTitleTop : null,
-        bottom: swapXY ? null : '2%',
+        right: swapXY_bool ? '2%' : '3%',
+        top: swapXY_bool ? topAxisTitleTop : null,
+        bottom: swapXY_bool ? null : '2%',
       }
 
       // ---------------------------------------------------------------------------------------
@@ -877,7 +839,7 @@
           text: title,
           subtext: subtitle,
           subtextStyle: {
-            width: width,
+            width: '100%',
           },
         },
         tooltip: {
@@ -891,14 +853,14 @@
             let yCol
             if (totalSeriesCount > 1) {
               // If multi-series, add series name as title of tooltip
-              xVal = params[0].value[swapXY ? 1 : 0]
+              xVal = params[0].value[swapXY_bool ? 1 : 0]
               output = `<span id="tooltip" style='font-weight: 600;'>${formatValue(
                 xVal,
                 xFormat,
               )}</span>`
               for (let i = params.length - 1; i >= 0; i--) {
                 if (params[i].seriesName !== 'stackTotal') {
-                  yVal = params[i].value[swapXY ? 0 : 1]
+                  yVal = params[i].value[swapXY_bool ? 0 : 1]
                   output =
                     output +
                     `<br> <span style='font-size: 11px;'>${params[i].marker} ${
@@ -913,13 +875,13 @@
                     )}</span>`
                 }
               }
-            } else if (xType === 'value') {
+            } else if (xTypeLocal === 'value') {
               // If single-series and a numerical x-axis, include x column as a normal column rather than title (so as not to show a number as the title)
-              xVal = params[0].value[swapXY ? 1 : 0]
-              yVal = params[0].value[swapXY ? 0 : 1]
+              xVal = params[0].value[swapXY_bool ? 1 : 0]
+              yVal = params[0].value[swapXY_bool ? 0 : 1]
               yCol = params[0].seriesName
               output = `<span id="tooltip" style='font-weight: 600;'>${formatTitle(
-                x,
+                xLocal,
                 xFormat,
               )}: </span><span style='float:right; margin-left: 10px;'>${formatValue(
                 xVal,
@@ -933,8 +895,8 @@
               )}</span>`
             } else {
               // If single series and categorical or date x-axis, use x value as title of tooltip
-              xVal = params[0].value[swapXY ? 1 : 0]
-              yVal = params[0].value[swapXY ? 0 : 1]
+              xVal = params[0].value[swapXY_bool ? 1 : 0]
+              yVal = params[0].value[swapXY_bool ? 0 : 1]
               yCol = params[0].seriesName
               output = `<span id="tooltip" style='font-weight: 600;'>${formatValue(
                 xVal,
@@ -959,15 +921,15 @@
           order: 'valueDesc',
         },
         legend: {
-          show: legend,
+          show: legendLocal,
           type: 'scroll',
           top: legendTop,
           padding: [0, 0, 0, 0],
           data: [],
         },
         grid: {
-          left: leftPadding ?? (swapXY ? '1%' : '0.8%'),
-          right: rightPadding ?? (swapXY ? '4%' : '3%'),
+          left: leftPadding ?? (swapXY_bool ? '1%' : '0.8%'),
+          right: rightPadding ?? (swapXY_bool ? '4%' : '3%'),
           bottom: chartBottom,
           top: chartTop,
           containLabel: true,
@@ -975,15 +937,16 @@
         xAxis: horizAxisConfig,
         yAxis: verticalAxisConfig,
         series: [],
-        animation: true,
+        animation: false,
         graphic: horizAxisTitleConfig,
-        color: $colorPaletteStore,
+        color: $colorPaletteResolved,
       }
 
       config.update(() => {
         return chartConfig
       })
     } catch (e) {
+      // svelte-ignore non_reactive_update
       error = e.message
       let setTextRed = '\x1b[31m%s\x1b[0m'
       console.error(setTextRed, `Error in ${chartType}: ${e.message}`)
@@ -999,19 +962,19 @@
       let id = `${title || chartType} (${fieldStr.join(' ')})`
       logError(e, {id})
 
-      props.update((d) => {
+      chartProps.update((d) => {
         return {...d, error}
       })
     }
-  }
+  })
 </script>
 
-{#if !error}
-  <slot />
+{#if !$chartProps.error}
+  {@render children?.()}
   <ECharts
     config={$config}
-    {height}
-    {width}
+    height={$dimensions.height}
+    width={$dimensions.width}
     {data}
     {queryID}
     chartTitle={title}
@@ -1019,8 +982,8 @@
     {seriesOptions}
     {connectGroup}
     {xAxisLabelOverflow}
-    seriesColors={$seriesColorsStore}
+    seriesColors={$seriesColorsResolved}
   />
 {:else}
-  <ErrorChart {error} title={chartType} />
+  <ErrorChart error={$chartProps.error} title={chartType} />
 {/if}