@graphenedata/cli 0.0.1

package/dist/ui/components/DropdownOption.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import {getContext, onDestroy, onMount} from 'svelte'
+  import {DROPDOWN_CONTEXT} from '../component-utilities/dropdownContext'
+
+  export let value: any
+  export let valueLabel: string | undefined = undefined
+
+  type RegisterFn = ((option: {value: any; label: string}) => (() => void) | void) | undefined
+  const register = getContext<RegisterFn>(DROPDOWN_CONTEXT)
+
+  let unregister: (() => void) | void
+
+  onMount(() => {
+    if (!register) return
+    unregister = register({value, label: valueLabel ?? String(value)})
+  })
+
+  onDestroy(() => {
+    if (typeof unregister === 'function') unregister()
+  })
+</script>

package/dist/ui/components/ECharts.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import echarts from '../component-utilities/echarts.js'
+  import {createEventDispatcher} from 'svelte'
+  import {getThemeStores} from '../component-utilities/themeStores'
+
+  const {activeAppearance} = getThemeStores()
+
+  export let config: any
+  export let height: string | number = '291px'
+  export let width: string | number = '100%'
+  export let data: any
+  export let queryID: any = undefined
+  export let renderer: 'canvas' | 'svg' | undefined = undefined
+  export let echartsOptions: any = undefined
+  export let seriesOptions: any = undefined
+  export let seriesColors: any = undefined
+  export let connectGroup: string | undefined = undefined
+  export let xAxisLabelOverflow: 'truncate' | 'break' | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+  const isBrowser = typeof window !== 'undefined'
+
+  const toDimension = (dimension: string | number | undefined, fallback: string) => {
+    if (typeof dimension === 'number') return `${dimension}px`
+    if (!dimension) return fallback
+    return dimension
+  }
+</script>
+
+<div class="echarts-container">
+  {#if !isBrowser}
+    <div class="echarts-loading" style={`height:${toDimension(height, '240px')}`}>Loading…</div>
+  {:else}
+    <div
+      class="echarts-chart"
+      data-query-id={queryID}
+      style={`height:${toDimension(height, '240px')};width:${toDimension(width, '100%')}`}
+      use:echarts={{
+        config,
+        data,
+        echartsOptions,
+        seriesOptions,
+        dispatch,
+        renderer,
+        connectGroup,
+        xAxisLabelOverflow,
+        seriesColors,
+        theme: $activeAppearance,
+      }}
+    />
+  {/if}
+</div>
+
+<style>
+  .echarts-container {
+    position: relative;
+    margin: 8px 0;
+  }
+
+  .echarts-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);
+    border-radius: 4px;
+    background: rgba(249, 250, 251, 0.6);
+    color: rgba(107, 114, 128, 0.95);
+    font-size: 12px;
+  }
+</style>

package/dist/ui/components/ErrorChart.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  export let error: unknown
+  export let title: string
+  export let height = 200
+
+  let message: string
+
+  $: message = (() => {
+    if (error instanceof Error) return error.message
+    if (typeof error === 'string') return error
+    try {
+      return JSON.stringify(error, null, 2)
+    } catch {
+      return String(error)
+    }
+  })()
+</script>
+
+<div class="error-chart" style={`min-height:${height}px`} role="alert">
+  <div class="error-chart__title">{title}</div>
+  <pre class="error-chart__message">{message}</pre>
+</div>
+
+<style>
+  .error-chart {
+    width: 100%;
+    display: grid;
+    place-items: center;
+    padding: 16px;
+    margin: 12px 0;
+    border-radius: 6px;
+    border: 1px solid rgba(220, 38, 38, 0.4);
+    background: rgba(254, 226, 226, 0.7);
+    color: #991b1b;
+    box-sizing: border-box;
+  }
+
+  .error-chart__title {
+    font-weight: 600;
+    font-size: 16px;
+    margin-bottom: 8px;
+  }
+
+  .error-chart__message {
+    margin: 0;
+    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-size: 12px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    max-width: 100%;
+    color: inherit;
+    background: transparent;
+  }
+</style>

package/dist/ui/components/GrapheneQuery.svelte

@@ -0,0 +1,12 @@
+<script>
+  import {onMount} from 'svelte'
+
+  export let name
+  export let code
+
+  onMount(() => {
+    if (typeof window !== 'undefined' && window.$GRAPHENE) {
+      window.$GRAPHENE.registerQuery(name, code)
+    }
+  })
+</script>

package/dist/ui/components/InlineDelta.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
+  import {getThemeStores} from '../component-utilities/themeStores'
+  import {toBoolean} from '../component-utilities/convert'
+
+  export let value: number | string | null | undefined = undefined
+  export let fmt: string | undefined = undefined
+  export let formatObject: any = undefined
+  export let columnUnitSummary: any = undefined
+  export let downIsGood = false
+  export let showValue = true
+  export let showSymbol = true
+  export let symbolPosition: 'left' | 'right' = 'right'
+  export let neutralMin = 0
+  export let neutralMax = 0
+  export let chip = false
+  export let align: 'left' | 'right' | 'center' | string = 'right'
+  export let text: string | undefined = undefined
+  export let className: string | undefined = undefined
+
+  downIsGood = toBoolean(downIsGood) ?? false
+  showValue = toBoolean(showValue) ?? true
+  showSymbol = toBoolean(showSymbol) ?? true
+  chip = toBoolean(chip) ?? false
+
+  const {theme} = getThemeStores()
+
+  $: numericValue = value === null || value === undefined ? null : Number(value)
+  $: status = (() => {
+    if (numericValue === null) return 'neutral'
+    if (numericValue > neutralMax) return 'positive'
+    if (numericValue < neutralMin) return 'negative'
+    return 'neutral'
+  })()
+
+  const pickColor = (positive: string, negative: string, neutral: string) => {
+    if (status === 'positive') return positive
+    if (status === 'negative') return negative
+    return neutral
+  }
+
+  $: symbol = (() => {
+    if (status === 'positive') return '▲'
+    if (status === 'negative') return '▼'
+    return '–'
+  })()
+  $: symbolColor = pickColor(
+    downIsGood ? $theme.colors.negative : $theme.colors.positive,
+    downIsGood ? $theme.colors.positive : $theme.colors.negative,
+    $theme.colors['base-content-muted'],
+  )
+
+  $: textColor = pickColor(
+    downIsGood ? $theme.colors.negative : $theme.colors.positive,
+    downIsGood ? $theme.colors.positive : $theme.colors.negative,
+    $theme.colors['base-content-muted'],
+  )
+
+  $: chipClass = pickColor('delta-chip--positive', 'delta-chip--negative', 'delta-chip--neutral')
+
+  $: resolvedFormat = (() => {
+    if (formatObject) return formatObject
+    if (fmt) return getFormatObjectFromString(fmt, 'number')
+    return undefined
+  })()
+
+  $: deltaClass = (() => {
+    let classes = ['delta']
+    if (chip) classes = [...classes, 'delta-chip', chipClass]
+    if (className) classes.push(className)
+    return classes.join(' ')
+  })()
+
+  $: resolvedAlign = align ?? 'right'
+
+  const renderValue = () => {
+    if (numericValue === null) return '–'
+    try {
+      return formatValue(numericValue, resolvedFormat, columnUnitSummary)
+    } catch (error) {
+      console.error('Failed to format delta value', error)
+      return String(numericValue)
+    }
+  }
+</script>
+
+<span class={deltaClass} style={`text-align:${resolvedAlign}`}>
+  {#if symbolPosition === 'left'}
+    {#if showSymbol}
+      <span class="delta-symbol" style={`color:${symbolColor}`}>{symbol}</span>
+    {/if}
+  {/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}
+  {/if}
+  {#if text}
+    <span class="delta-text">{text}</span>
+  {/if}
+</span>
+
+<style>
+  .delta {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .delta-value {
+    font-family: inherit;
+  }
+
+  .delta-symbol {
+    font-size: 0.75em;
+    line-height: 1;
+  }
+
+  .delta-text {
+    margin-left: 2px;
+    color: var(--color-base-content-muted, #6b7280);
+    font-size: 0.85em;
+  }
+
+  .delta-chip {
+    border: 1px solid transparent;
+    border-radius: 4px;
+    padding: 1px 4px;
+    font-size: 0.9em;
+  }
+
+  .delta-chip--positive {
+    background: rgba(22, 163, 74, 0.1);
+    border-color: rgba(22, 163, 74, 0.2);
+  }
+
+  .delta-chip--negative {
+    background: rgba(220, 38, 38, 0.1);
+    border-color: rgba(220, 38, 38, 0.2);
+  }
+
+  .delta-chip--neutral {
+    background: rgba(107, 114, 128, 0.1);
+    border-color: rgba(107, 114, 128, 0.2);
+  }
+</style>

package/dist/ui/components/Line.svelte

@@ -0,0 +1,210 @@
+<script>
+  import {beforeUpdate, getContext} from 'svelte'
+  import {propKey, configKey} from '../component-utilities/chartContext.js'
+  import getSeriesConfig from '../component-utilities/getSeriesConfig.js'
+  import formatTitle from '../component-utilities/formatTitle.js'
+  import getCompletedData from '../component-utilities/getCompletedData.js'
+  import getYAxisIndex from '../component-utilities/getYAxisIndex.js'
+  import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
+  import {getThemeStores} from '../component-utilities/themeStores'
+  import {toBoolean} from '../component-utilities/convert'
+
+  const {resolveColor} = getThemeStores()
+  const props = getContext(propKey)
+  const config = getContext(configKey)
+
+  export let y = undefined
+  const ySet = !!y
+  export let y2 = undefined
+  const y2Set = !!y2
+  export let series = undefined
+  const seriesSet = !!series
+  export let options = undefined
+  export let name = undefined
+
+  export let lineColor = undefined
+  $: lineColorStore = resolveColor(lineColor)
+
+  export let lineWidth = 2
+  export let lineType = 'solid'
+  export let lineOpacity = undefined
+
+  export let markers = false
+  $: markers = toBoolean(markers)
+  export let markerShape = 'circle'
+  export let markerSize = 8
+
+  export let labels = false
+  $: labels = toBoolean(labels)
+  export let labelSize = 11
+  export let labelPosition = 'top'
+
+  export let labelColor = undefined
+  $: labelColorStore = resolveColor(labelColor)
+
+  export let labelFmt = undefined
+  export let yLabelFmt = undefined
+  export let y2LabelFmt = undefined
+  export let showAllLabels = false
+  $: showAllLabels = toBoolean(showAllLabels)
+
+  export let y2SeriesType = undefined
+  export let handleMissing = 'gap'
+  export let step = false
+  $: step = toBoolean(step)
+  export let stepPosition = 'end'
+  export let seriesOrder = undefined
+  export let seriesLabelFmt = undefined
+
+  let data
+  let x
+  let swapXY
+  let yFormat
+  let y2Format
+  let yCount
+  let y2Count
+  let xType
+  let xMismatch
+  let columnSummary
+  let resolvedY
+  let resolvedY2
+  let labelFormat
+  let yLabelFormat
+  let y2LabelFormat
+  let defaultLabelPosition
+  let chartOverrides
+  let seriesConfig
+
+  if (labelFmt) labelFormat = getFormatObjectFromString(labelFmt)
+  if (yLabelFmt) yLabelFormat = getFormatObjectFromString(yLabelFmt)
+  if (y2LabelFmt) y2LabelFormat = getFormatObjectFromString(y2LabelFmt)
+
+  $: data = $props.data
+  $: x = $props.x
+  $: swapXY = $props.swapXY
+  $: yFormat = $props.yFormat
+  $: y2Format = $props.y2Format
+  $: yCount = $props.yCount
+  $: y2Count = $props.y2Count
+  $: xType = $props.xType
+  $: xMismatch = $props.xMismatch
+  $: columnSummary = $props.columnSummary
+  $: series = seriesSet ? series : $props.series
+  $: resolvedY = ySet ? y : $props.y
+  $: resolvedY2 = y2Set ? y2 : $props.y2
+
+  $: {
+    if (!series && typeof resolvedY !== 'object') {
+      if (columnSummary?.[resolvedY]) name = name ?? formatTitle(resolvedY, columnSummary[resolvedY].title)
+    } else {
+      try {
+        data = getCompletedData(data, x, resolvedY, series)
+      } catch (error) {
+        globalThis.console?.warn('Failed to complete data', {error})
+        data = []
+      }
+    }
+  }
+
+  $: if (handleMissing === 'zero') {
+    try {
+      data = getCompletedData(data, x, resolvedY, series, true)
+    } catch (error) {
+      globalThis.console?.warn('Failed to complete data', {error})
+      data = []
+    }
+  }
+
+  const labelPositions = {above: 'top', below: 'bottom', middle: 'inside'}
+  const swapXYLabelPositions = {above: 'right', below: 'left', middle: 'inside'}
+
+  $: {
+    defaultLabelPosition = swapXY ? 'right' : 'top'
+    labelPosition = (swapXY ? swapXYLabelPositions[labelPosition] : labelPositions[labelPosition]) ?? defaultLabelPosition
+  }
+
+  $: baseConfig = {
+    type: 'line',
+    label: {
+      show: labels,
+      formatter: (params) =>
+        params.value[swapXY ? 0 : 1] === 0
+          ? ''
+          : formatValue(
+            params.value[swapXY ? 0 : 1],
+            [yLabelFormat ?? labelFormat ?? yFormat, y2LabelFormat ?? labelFormat ?? y2Format][
+              getYAxisIndex(params.componentIndex, yCount, y2Count)
+            ],
+          ),
+      fontSize: labelSize,
+      color: $labelColorStore,
+      position: labelPosition,
+      padding: 3,
+    },
+    labelLayout: {hideOverlap: showAllLabels ? false : true},
+    connectNulls: handleMissing === 'connect',
+    emphasis: {
+      focus: 'series',
+      endLabel: {show: false},
+      lineStyle: {opacity: 1, width: 3},
+    },
+    lineStyle: {width: parseInt(lineWidth), type: lineType, opacity: lineOpacity},
+    itemStyle: {color: $lineColorStore, opacity: lineOpacity},
+    showSymbol: labels || markers,
+    symbol: markerShape,
+    symbolSize: labels && !markers ? 0 : markerSize,
+    step: step ? stepPosition : false,
+  }
+
+  $: seriesConfig = getSeriesConfig(
+    data,
+    x,
+    resolvedY,
+    series,
+    swapXY,
+    baseConfig,
+    name,
+    xMismatch,
+    columnSummary,
+    seriesOrder,
+    undefined,
+    undefined,
+    resolvedY2,
+    seriesLabelFmt,
+  )
+
+  $: config.update((value) => {
+    value.series.push(...seriesConfig)
+    value.legend.data.push(...seriesConfig.map((entry) => entry.name.toString()))
+    return value
+  })
+
+  $: if (options) config.update((value) => ({...value, ...options}))
+
+  $: chartOverrides = {
+    yAxis: {boundaryGap: ['0%', '1%']},
+    xAxis: {boundaryGap: [xType === 'time' ? '2%' : '0%', '2%']},
+  }
+
+  beforeUpdate(() => {
+    config.update((value) => {
+      if (swapXY) {
+        value.yAxis = {...value.yAxis, ...chartOverrides.xAxis}
+        value.xAxis = {...value.xAxis, ...chartOverrides.yAxis}
+      } else {
+        value.yAxis[0] = {...value.yAxis[0], ...chartOverrides.yAxis}
+        value.xAxis = {...value.xAxis, ...chartOverrides.xAxis}
+        if (resolvedY2) {
+          value.yAxis[1] = {...value.yAxis[1], show: true}
+          if (['line', 'bar', 'scatter'].includes(y2SeriesType)) {
+            for (let index = 0; index < y2Count; index++) {
+              value.series[yCount + index].type = y2SeriesType
+            }
+          }
+        }
+      }
+      if (labels) value.axisPointer = {triggerEmphasis: false}
+      return value
+    })
+  })
+</script>

package/dist/ui/components/LineChart.svelte

@@ -0,0 +1,178 @@
+<script>
+  import Chart from './Chart.svelte'
+  import Line from './Line.svelte'
+  import QueryLoad from './QueryLoad.svelte'
+  import {getThemeStores} from '../component-utilities/themeStores'
+
+  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 xFmt = undefined
+  export let y2Fmt = 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 sort = undefined
+
+  export let lineColor = undefined
+  $: lineColorStore = resolveColor(lineColor)
+
+  export let lineType = undefined
+  export let lineWidth = undefined
+  export let lineOpacity = undefined
+  export let chartAreaHeight = undefined
+
+  export let markers = undefined
+  export let markerShape = undefined
+  export let markerSize = undefined
+  export let handleMissing = undefined
+  export let step = undefined
+  export let stepPosition = 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 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
+  export let xLabelWrap = undefined
+</script>
+
+
+<QueryLoad data={data} fields={[x, y, y2, series]} let:loaded>
+  <Chart
+    data={loaded}
+    {x}
+    {y}
+    {y2}
+    {xFmt}
+    {yFmt}
+    {y2Fmt}
+    {series}
+    {xType}
+    {yLog}
+    {yLogBase}
+    {legend}
+    {xAxisTitle}
+    {yAxisTitle}
+    {y2AxisTitle}
+    {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}
+    />
+    <slot />
+  </Chart>
+</QueryLoad>