@graphenedata/cli 0.0.12 → 0.0.14

package/dist/ui/components/BarChart.svelte

@@ -1,121 +1,65 @@
-<script>
+<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 {parseCommaList} from '../component-utilities/inputUtils.ts'
 
-  const {resolveColor, resolveColorsObject, resolveColorPalette} = getThemeStores()
-
-  export let data = undefined
-  export let x = undefined
-  export let y = undefined
-  export let y2 = undefined
-  export let series = undefined
-  export let xType = undefined
-  export let yLog = undefined
-  export let yLogBase = undefined
-
-  export let y2SeriesType = undefined
-
-  export let yFmt = undefined
-  export let y2Fmt = undefined
-  export let xFmt = undefined
-
-  export let title = undefined
-  export let subtitle = undefined
-  export let legend = undefined
-  export let xAxisTitle = undefined
-  export let yAxisTitle = y2 ? 'true' : undefined
-  export let y2AxisTitle = y2 ? 'true' : undefined
-  export let xGridlines = undefined
-  export let yGridlines = undefined
-  export let y2Gridlines = undefined
-  export let xAxisLabels = undefined
-  export let yAxisLabels = undefined
-  export let y2AxisLabels = undefined
-  export let xBaseline = undefined
-  export let yBaseline = undefined
-  export let y2Baseline = undefined
-  export let xTickMarks = undefined
-  export let yTickMarks = undefined
-  export let y2TickMarks = undefined
-  export let yMin = undefined
-  export let yMax = undefined
-  export let yScale = undefined
-  export let y2Min = undefined
-  export let y2Max = undefined
-  export let y2Scale = undefined
-  export let swapXY = false
-
-  /** @type {boolean} */
-  export let showAllXAxisLabels = undefined
-
-  $: {
-    if (swapXY === 'true' || swapXY === true) {
-      swapXY = true
-    } else {
-      swapXY = false
-    }
+  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
   }
 
-  export let type = 'stacked' // stacked, grouped, or stacked100
-  let stacked100 = type === 'stacked100'
-
-  export let fillColor = undefined
-  $: fillColorStore = resolveColor(fillColor)
-
-  export let fillOpacity = undefined
-
-  export let outlineColor = undefined
-  $: outlineColorStore = resolveColor(outlineColor)
-
-  export let outlineWidth = undefined
-  export let chartAreaHeight = undefined
-
-  export let sort = undefined
-
-  export let colorPalette = 'default'
-  $: colorPaletteStore = resolveColorPalette(colorPalette)
-
-  export let labels = undefined
-  export let labelSize = undefined
-  export let labelPosition = undefined
-
-  export let labelColor = undefined
-  $: labelColorStore = resolveColor(labelColor)
-
-  export let labelFmt = undefined
-  export let yLabelFmt = undefined
-  export let y2LabelFmt = undefined
-
-  export let stackTotalLabel = undefined
-  export let seriesLabels = undefined
-  export let showAllLabels = undefined
-
-  export let yAxisColor = undefined
-  $: yAxisColorStore = resolveColor(yAxisColor)
-
-  export let y2AxisColor = undefined
-  $: y2AxisColorStore = resolveColor(y2AxisColor)
-
-  export let echartsOptions = undefined
-  export let seriesOptions = undefined
-  export let seriesColors = undefined
-  $: seriesColorsStore = resolveColorsObject(seriesColors)
-
-  export let seriesOrder = undefined
-  export let connectGroup = undefined
-
-  export let seriesLabelFmt = undefined
-
-  export let leftPadding = undefined
-  export let rightPadding = undefined
+  const {resolveColor, resolveColorsObject, resolveColorPalette} = getThemeStores()
 
-  export let xLabelWrap = undefined
+  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()
+
+  let normalizedSwapXY = $derived(swapXY === 'true' || swapXY === true)
+
+  let stacked100 = $derived(type === 'stacked100')
+
+  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))
+
+  let derivedYAxisTitle = $derived(yAxisTitle ?? (y2 ? 'true' : undefined))
+  let derivedY2AxisTitle = $derived(y2AxisTitle ?? (y2 ? 'true' : undefined))
 </script>
 
-<QueryLoad data={data} fields={{x, y: parseCommaList(y), y2: parseCommaList(y2), series}} let:loaded>
+{#snippet barChartContent(loaded: any[])}
   <Chart
     data={loaded}
     chartContext={{data, x, y, series}}
@@ -131,8 +75,8 @@
     {yLogBase}
     {legend}
     {xAxisTitle}
-    {yAxisTitle}
-    {y2AxisTitle}
+    yAxisTitle={derivedYAxisTitle}
+    y2AxisTitle={derivedY2AxisTitle}
     {xGridlines}
     {yGridlines}
     {y2Gridlines}
@@ -153,7 +97,7 @@
     {y2Min}
     {y2Max}
     {y2Scale}
-    {swapXY}
+    swapXY={normalizedSwapXY}
     {title}
     {subtitle}
     chartType="Bar Chart"
@@ -191,6 +135,8 @@
       {seriesOrder}
       {seriesLabelFmt}
     />
-    <slot />
+    {@render children?.()}
   </Chart>
-</QueryLoad>
+{/snippet}
+
+<QueryLoad data={data} fields={{x, y: parseCommaList(y), y2: parseCommaList(y2), series}} children={barChartContent} />

package/dist/ui/components/BigValue.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
   import QueryLoad from './QueryLoad.svelte'
 
-  export let data: string | {rows?: any[]}
-  export let value: string | undefined = undefined
-  export let fmt: string | undefined = undefined
-  export let title: string | undefined = undefined
-  export let subtitle: string | undefined = undefined
+  interface Props {
+    data: string | {rows?: any[]}
+    value?: string
+    fmt?: string
+    title?: string
+    subtitle?: string
+  }
+
+  let {data, value = undefined, fmt = undefined, title = undefined, subtitle = undefined}: Props = $props()
 
   function formatValue (input: any) {
     if (input === null || input === undefined) return '—'
@@ -34,13 +38,15 @@
   }
 </script>
 
-<QueryLoad {data} fields={{value}} let:loaded>
+{#snippet bigValueContent(loaded: any[])}
   <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>
-</QueryLoad>
+{/snippet}
+
+<QueryLoad {data} fields={{value}} children={bigValueContent} />
 
 <style>
   .big-value {