@graphenedata/cli 0.0.1

package/dist/ui/component-utilities/themeStores.ts

@@ -0,0 +1,116 @@
+import {getContext, setContext} from 'svelte'
+import {readable, type Readable} from 'svelte/store'
+
+type Appearance = 'light'
+
+type Theme = {
+  colors: Record<string, string>
+  colorPalettes: Record<string, string[]>
+}
+
+type ThemeStores = {
+  activeAppearance: Readable<Appearance>
+  theme: Readable<Theme>
+  resolveColor: <T>(input: T) => Readable<T | string | undefined>
+  resolveColorsObject: (input: Record<string, unknown> | undefined) => Readable<Record<string, string | undefined> | undefined>
+  resolveColorPalette: (input: unknown) => Readable<string[] | undefined>
+}
+
+const THEME_CONTEXT = Symbol('GrapheneThemeStores')
+
+const DEFAULT_PALETTE = [
+  '#4C78A8',
+  '#F58518',
+  '#E45756',
+  '#72B7B2',
+  '#54A24B',
+  '#EECA3B',
+  '#B279A2',
+  '#FF9DA6',
+  '#9D755D',
+  '#BAB0AC',
+]
+
+const DEFAULT_THEME: Theme = {
+  colors: {
+    'base-100': '#ffffff',
+    'base-200': '#f6f6f6',
+    'base-300': '#e5e7eb',
+    'base-content': '#1f2937',
+    'base-content-muted': '#6b7280',
+    primary: '#2563eb',
+    positive: '#16a34a',
+    negative: '#dc2626',
+    warning: '#d97706',
+  },
+  colorPalettes: {
+    default: DEFAULT_PALETTE,
+  },
+}
+
+const activeAppearance = readable<Appearance>('light')
+const theme = readable<Theme>(DEFAULT_THEME)
+
+const isReadable = <T>(value: unknown): value is Readable<T> => {
+  return Boolean(value && typeof value === 'object' && 'subscribe' in (value as any))
+}
+
+const normalizeColor = (value: unknown): string | undefined => {
+  if (value == null) return undefined
+  if (Array.isArray(value)) return normalizeColor(value[0])
+  if (typeof value !== 'string') return String(value)
+
+  let trimmed = value.trim()
+  if (!trimmed) return undefined
+  if (trimmed === 'true' || trimmed === 'false') return trimmed
+  if (DEFAULT_THEME.colors[trimmed]) return DEFAULT_THEME.colors[trimmed]
+  if (trimmed.startsWith('#') || trimmed.startsWith('rgb') || trimmed.startsWith('hsl') || trimmed.startsWith('var(')) return trimmed
+  if (/^[a-zA-Z0-9_-]+$/.test(trimmed)) return `var(--color-${trimmed})`
+  return trimmed
+}
+
+const resolveColor = <T>(input: T): Readable<T | string | undefined> => {
+  if (isReadable<T | string | undefined>(input)) return input
+  return readable(normalizeColor(input) as T | string | undefined)
+}
+
+const resolveColorsObject = (input: Record<string, unknown> | undefined): Readable<Record<string, string | undefined> | undefined> => {
+  if (isReadable<Record<string, string | undefined> | undefined>(input)) return input
+  if (!input) return readable(undefined)
+
+  let entries = Object.entries(input).map(([key, value]) => [key, normalizeColor(value)] as const)
+  return readable(Object.fromEntries(entries))
+}
+
+const resolveColorPalette = (input: unknown): Readable<string[] | undefined> => {
+  if (isReadable<string[] | undefined>(input)) return input
+  if (input == null) return readable(DEFAULT_PALETTE)
+
+  if (typeof input === 'string') {
+    let key = input.trim()
+    if (!key || key === 'default') return readable(DEFAULT_PALETTE)
+    if (DEFAULT_THEME.colorPalettes[key]) return readable(DEFAULT_THEME.colorPalettes[key])
+    if (key.includes(',')) {
+      let values = key.split(',').map(part => normalizeColor(part)).filter(Boolean) as string[]
+      return readable(values.length ? values : DEFAULT_PALETTE)
+    }
+    let normalized = normalizeColor(key)
+    return readable(normalized ? [normalized] : DEFAULT_PALETTE)
+  }
+
+  if (Array.isArray(input)) {
+    let values = input.map(item => normalizeColor(item)).filter(Boolean) as string[]
+    return readable(values.length ? values : DEFAULT_PALETTE)
+  }
+
+  return readable(DEFAULT_PALETTE)
+}
+
+export const getThemeStores = (): ThemeStores => {
+  let stores = getContext<ThemeStores | undefined>(THEME_CONTEXT)
+  if (!stores) {
+    stores = {activeAppearance, theme, resolveColor, resolveColorsObject, resolveColorPalette}
+    setContext(THEME_CONTEXT, stores)
+  }
+  return stores
+}

package/dist/ui/components/Area.svelte

@@ -0,0 +1,174 @@
+<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 replaceNulls from '../component-utilities/replaceNulls.js'
+  import getCompletedData from '../component-utilities/getCompletedData.js'
+  import {
+    formatValue,
+    getFormatObjectFromString,
+  } from '../component-utilities/formatting.js'
+  import {getThemeStores} from '../component-utilities/themeStores'
+
+  const {resolveColor} = getThemeStores()
+  const props = getContext(propKey)
+  const config = getContext(configKey)
+
+  export let y = undefined
+  const ySet = !!y
+  export let series = undefined
+  const seriesSet = !!series
+  export let options = undefined
+  export let name = undefined
+  export let type = 'stacked'
+  export let fillColor = undefined
+  $: fillColorStore = resolveColor(fillColor)
+  export let lineColor = undefined
+  $: lineColorStore = resolveColor(lineColor)
+  export let fillOpacity = undefined
+  export let line = true
+  $: line = line === 'true' || line === true
+  export let markers = false
+  $: markers = markers === 'true' || markers === true
+  export let markerShape = 'circle'
+  export let markerSize = 8
+  export let handleMissing = 'gap'
+  export let step = false
+  $: step = step === 'true' || step === true
+  export let stepPosition = 'end'
+  export let labels = false
+  $: labels = labels === 'true' || labels === true
+  export let labelSize = 11
+  export let labelPosition = 'top'
+  export let labelColor = undefined
+  $: labelColorStore = resolveColor(labelColor)
+  export let labelFmt = undefined
+  export let showAllLabels = false
+  export let seriesOrder = undefined
+  export let seriesLabelFmt = undefined
+
+  let labelFormat
+  let data
+  let x
+  let swapXY
+  let yFormat
+  let xType
+  let xMismatch
+  let columnSummary
+  let seriesConfig
+  let chartOverrides
+  let defaultLabelPosition
+  let resolvedY
+  let stackName
+
+  if (labelFmt) labelFormat = getFormatObjectFromString(labelFmt)
+
+  $: data = $props.data
+  $: x = $props.x
+  $: swapXY = $props.swapXY
+  $: yFormat = $props.yFormat
+  $: xType = $props.xType
+  $: xMismatch = $props.xMismatch
+  $: columnSummary = $props.columnSummary
+  $: series = seriesSet ? series : $props.series
+  $: resolvedY = ySet ? y : $props.y
+
+  $: {
+    if (!series && typeof resolvedY !== 'object') {
+      stackName = undefined
+      if (columnSummary?.[resolvedY]) name = name ?? formatTitle(resolvedY, columnSummary[resolvedY].title)
+    } else {
+      stackName = 'area'
+      data = getCompletedData(data, x, resolvedY, series, false, xType === 'value')
+      data = replaceNulls(data, resolvedY)
+      xType = xType === 'value' ? 'category' : xType
+    }
+  }
+
+  $: if (handleMissing === 'zero') data = replaceNulls(data, resolvedY)
+
+  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',
+    stack: stackName,
+    areaStyle: {color: $fillColorStore, opacity: fillOpacity},
+    connectNulls: handleMissing === 'connect',
+    lineStyle: {width: line ? 1 : 0, color: $lineColorStore},
+    label: {
+      show: labels,
+      formatter: (params) =>
+        params.value[swapXY ? 0 : 1] === 0
+          ? ''
+          : formatValue(params.value[swapXY ? 0 : 1], labelFormat ?? yFormat),
+      fontSize: labelSize,
+      color: $labelColorStore,
+      position: labelPosition,
+      padding: 3,
+    },
+    labelLayout: {hideOverlap: showAllLabels ? false : true},
+    emphasis: {focus: 'series'},
+    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,
+    undefined,
+    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: ['4%', '4%'], type: xType},
+  }
+
+  beforeUpdate(() => {
+    config.update((value) => {
+      value.tooltip = {...value.tooltip, order: 'seriesDesc'}
+      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 (type === 'stacked100') {
+        if (swapXY) value.xAxis = {...value.xAxis, max: 1}
+        else value.yAxis[0] = {...value.yAxis[0], max: 1}
+      }
+      if (labels) value.axisPointer = {triggerEmphasis: false}
+      return value
+    })
+  })
+</script>

package/dist/ui/components/AreaChart.svelte

@@ -0,0 +1,150 @@
+<script>
+  import Chart from './Chart.svelte'
+  import Area from './Area.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 series = undefined
+  export let xType = undefined
+  export let yLog = undefined
+  export let yLogBase = undefined
+
+  export let yFmt = undefined
+  export let xFmt = undefined
+
+  export let title = undefined
+  export let subtitle = undefined
+  export let legend = undefined
+  export let xAxisTitle = undefined
+  export let yAxisTitle = undefined
+  export let xGridlines = undefined
+  export let yGridlines = undefined
+  export let xAxisLabels = undefined
+  export let yAxisLabels = undefined
+  export let xBaseline = undefined
+  export let yBaseline = undefined
+  export let xTickMarks = undefined
+  export let yTickMarks = undefined
+  export let yMin = undefined
+  export let yMax = undefined
+  export let yScale = undefined
+  export let sort = undefined
+
+  export let line = undefined
+
+  export let fillColor = undefined
+  $: fillColorStore = resolveColor(fillColor)
+
+  export let lineColor = undefined
+  $: lineColorStore = resolveColor(lineColor)
+
+  export let fillOpacity = 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 type = 'stacked'
+  let stacked100 = type === 'stacked100'
+
+  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 showAllLabels = undefined
+
+  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, series]} let:loaded>
+  <Chart
+    data={loaded}
+    {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}
+    />
+    <slot />
+  </Chart>
+</QueryLoad>