@graphenedata/cli 0.0.1

package/dist/ui/components/Column.svelte

@@ -0,0 +1,172 @@
+<script context="module">
+  export const evidenceInclude = true
+</script>
+
+<script lang="ts">
+  import {getContext, onDestroy} from 'svelte'
+  import {propKey, strictBuild} from '../component-utilities/chartContext.js'
+  import {getThemeStores} from '../component-utilities/themeStores'
+  import {toBoolean} from '../component-utilities/convert'
+
+  export let id: string
+  export let description: string | undefined = undefined
+  export let contentType: string | undefined = undefined
+  export let title: string | undefined = undefined
+  export let align: string | undefined = undefined
+  export let wrap: boolean | string | undefined = undefined
+  export let wrapTitle: boolean | string | undefined = undefined
+  export let height: string | undefined = undefined
+  export let width: string | undefined = undefined
+  export let alt: string | undefined = undefined
+  export let openInNewTab: boolean | string | undefined = undefined
+  export let linkLabel: string | undefined = undefined
+  export let fmt: string | undefined = undefined
+  export let totalAgg: string | undefined = undefined
+  export let totalFmt: string | undefined = undefined
+  export let weightCol: string | undefined = undefined
+  export let subtotalFmt: string | undefined = undefined
+  export let colorMax: string | undefined = undefined
+  export let colorMin: string | undefined = undefined
+  export let colorMid: string | undefined = undefined
+  export let colorBreakpoints: string[] | undefined = undefined
+  export let colorScale: any = 'default'
+  export let scaleColumn: string | undefined = undefined
+  export let downIsGood: boolean | string | undefined = undefined
+  export let showValue: boolean | string | undefined = undefined
+  export let deltaSymbol: boolean | string | undefined = undefined
+  export let neutralMin: number | string | undefined = 0
+  export let neutralMax: number | string | undefined = 0
+  export let chip: boolean | string | undefined = undefined
+  export let sparkWidth: number | string | undefined = undefined
+  export let sparkHeight: number | string | undefined = undefined
+  export let sparkColor: string | undefined = undefined
+  export let sparkX: string | undefined = undefined
+  export let sparkY: string | undefined = undefined
+  export let sparkYScale: boolean | string | undefined = undefined
+  export let barColor: string | undefined = '#a5cdee'
+  export let negativeBarColor: string | undefined = '#fca5a5'
+  export let backgroundColor: string | undefined = 'transparent'
+  export let hideLabels: boolean | string | undefined = undefined
+  export let colGroup: string | undefined = undefined
+  export let fmtColumn: string | undefined = undefined
+  export let redNegatives: boolean | string | undefined = undefined
+
+  const {resolveColor, resolveColorPalette} = getThemeStores()
+
+  let barColorStore = resolveColor(barColor)
+  let negativeBarColorStore = resolveColor(negativeBarColor)
+  let backgroundColorStore = resolveColor(backgroundColor)
+  let colorScaleStore = resolveColorPalette(colorScale)
+
+  $: barColorStore = resolveColor(barColor)
+  $: negativeBarColorStore = resolveColor(negativeBarColor)
+  $: backgroundColorStore = resolveColor(backgroundColor)
+  $: colorScaleStore = resolveColorPalette(colorScale)
+
+  const props = getContext(propKey)
+
+  const identifier = Symbol('GrapheneColumn')
+
+  wrap = toBoolean(wrap) ?? false
+  wrapTitle = toBoolean(wrapTitle) ?? false
+  openInNewTab = toBoolean(openInNewTab) ?? false
+  downIsGood = toBoolean(downIsGood) ?? false
+  showValue = toBoolean(showValue) ?? true
+  deltaSymbol = toBoolean(deltaSymbol) ?? true
+  chip = toBoolean(chip) ?? false
+  sparkYScale = toBoolean(sparkYScale) ?? false
+  hideLabels = toBoolean(hideLabels) ?? false
+  redNegatives = toBoolean(redNegatives) ?? false
+
+  const coerceNumber = (value: number | string | undefined): number | undefined => {
+    if (value === undefined || value === null || value === '') return undefined
+    let parsed = Number(value)
+    return Number.isNaN(parsed) ? undefined : parsed
+  }
+
+  const checkColumnName = () => {
+    try {
+      let data = $props.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
+    }
+  }
+
+  const options = () => ({
+    identifier,
+    id,
+    title,
+    align,
+    wrap,
+    wrapTitle,
+    contentType,
+    height,
+    width,
+    alt,
+    openInNewTab,
+    linkLabel,
+    fmt,
+    fmtColumn,
+    totalAgg,
+    totalFmt,
+    subtotalFmt,
+    weightCol,
+    downIsGood,
+    deltaSymbol,
+    chip,
+    neutralMin: coerceNumber(neutralMin) ?? 0,
+    neutralMax: coerceNumber(neutralMax) ?? 0,
+    showValue,
+    colorMax,
+    colorMin,
+    colorMid,
+    colorScale: $colorScaleStore,
+    colorBreakpoints,
+    scaleColumn,
+    colGroup,
+    description,
+    redNegatives,
+    sparkWidth,
+    sparkHeight,
+    sparkColor,
+    sparkX,
+    sparkY,
+    sparkYScale,
+    barColor: $barColorStore,
+    negativeBarColor: $negativeBarColorStore,
+    backgroundColor: $backgroundColorStore,
+    hideLabels,
+  })
+
+  const updateProps = () => {
+    checkColumnName()
+    props.update((state: any) => {
+      let next = {...state}
+      let existing = next.columns.findIndex((column: any) => column.identifier === identifier)
+      let option = options()
+      if (existing === -1) {
+        next.columns = [...next.columns, option]
+      } else {
+        next.columns = [
+          ...next.columns.slice(0, existing),
+          option,
+          ...next.columns.slice(existing + 1),
+        ]
+      }
+      return next
+    })
+  }
+
+  $: updateProps()
+
+  onDestroy(() => {
+    props.update((state: any) => {
+      return {...state, columns: state.columns.filter((column: any) => column.identifier !== identifier)}
+    })
+  })
+</script>

package/dist/ui/components/DateRange.svelte

@@ -0,0 +1,324 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import {toBoolean} from '../component-utilities/inputUtils'
+
+  export let name: string
+  export let label: string | undefined = undefined
+  export let title: string | undefined = undefined
+  export let description: string | undefined = undefined
+  export let start: string | Date | undefined = undefined
+  export let end: string | Date | undefined = undefined
+  export let defaultValue: string | undefined = undefined
+  export let presetRanges: string | string[] | undefined = undefined
+  export let data: string | undefined = undefined
+  export let dates: string | undefined = undefined
+  export let hideDuringPrint: boolean | string = true
+
+  const DEFAULT_PRESETS = ['Last 7 Days', 'Last 30 Days', 'Last 90 Days', 'Last 365 Days', 'Last Month', 'Last Year', 'Month to Date', 'Month to Today', 'Year to Date', 'Year to Today', 'All Time']
+
+  let mounted = false
+  let queryKey = ''
+  let queryHandler: ((res: {rows?: any[]; error?: any}) => void) | null = null
+
+  let domainStart: string | null = null
+  let domainEnd: string | null = null
+
+  let currentStart: string | null = null
+  let currentEnd: string | null = null
+  let currentPreset: string = ''
+  let touched = false
+
+  $: hidePrint = toBoolean(hideDuringPrint)
+  $: presetList = (() => {
+    if (Array.isArray(presetRanges)) return presetRanges
+    if (presetRanges) return [presetRanges]
+    return DEFAULT_PRESETS
+  })()
+  $: displayLabel = title || label
+
+  onMount(() => {
+    mounted = true
+    currentStart = normalizeInput(start)
+    currentEnd = normalizeInput(end)
+    if (defaultValue && presetList.includes(defaultValue)) {
+      applyPreset(defaultValue, false)
+    } else {
+      updateParams()
+    }
+    refreshQuery()
+    return () => {
+      mounted = false
+      if (queryHandler) {
+        window.$GRAPHENE?.unsubscribe?.(queryHandler)
+        queryHandler = null
+      }
+    }
+  })
+
+  $: refreshQuery()
+
+  function refreshQuery () {
+    if (!mounted) return
+    let key = data && dates ? `${data}::${dates}` : ''
+    if (key === queryKey) return
+    if (queryHandler) {
+      window.$GRAPHENE?.unsubscribe?.(queryHandler)
+      queryHandler = null
+    }
+    queryKey = key
+    if (!data || !dates) return
+    let handler = (res: {rows?: any[]; error?: any}) => {
+      if (res.error || !res.rows?.length) return
+      let values = res.rows
+        .map(row => normalizeInput(row[dates]))
+        .filter((val): val is string => !!val)
+      if (!values.length) return
+      values.sort()
+      domainStart = values[0]
+      domainEnd = values[values.length - 1]
+      if (!touched) {
+        if (defaultValue && presetList.includes(defaultValue)) {
+          applyPreset(defaultValue, false)
+        } else {
+          let startCandidate = currentStart ?? domainStart
+          let endCandidate = currentEnd ?? (domainEnd ? addDaysString(domainEnd, 1) : null)
+          setRange(startCandidate, endCandidate, currentPreset, false)
+        }
+      }
+    }
+    if (typeof window !== 'undefined' && window.$GRAPHENE?.query) {
+      window.$GRAPHENE.query(data, [dates], handler)
+      queryHandler = handler
+    }
+  }
+
+  function normalizeInput (value: string | Date | null | undefined): string | null {
+    if (value === null || value === undefined) return null
+    if (value instanceof Date) return formatDate(value)
+    let parsed = new Date(value)
+    if (Number.isNaN(parsed.getTime())) return null
+    return formatDate(parsed)
+  }
+
+  function formatDate (value: Date): string {
+    let year = value.getFullYear()
+    let month = String(value.getMonth() + 1).padStart(2, '0')
+    let day = String(value.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+  }
+
+  function addDays (value: Date, days: number): Date {
+    let copy = new Date(value)
+    copy.setDate(copy.getDate() + days)
+    return copy
+  }
+
+  function addDaysString (value: string, days: number): string {
+    let parsed = new Date(value)
+    if (Number.isNaN(parsed.getTime())) return value
+    return formatDate(addDays(parsed, days))
+  }
+
+  function startOfMonth (value: Date): Date {
+    return new Date(value.getFullYear(), value.getMonth(), 1)
+  }
+
+  function startOfYear (value: Date): Date {
+    return new Date(value.getFullYear(), 0, 1)
+  }
+
+  function addMonths (value: Date, months: number): Date {
+    let copy = new Date(value)
+    copy.setMonth(copy.getMonth() + months)
+    return copy
+  }
+
+  function addYears (value: Date, years: number): Date {
+    let copy = new Date(value)
+    copy.setFullYear(copy.getFullYear() + years)
+    return copy
+  }
+
+  function setRange (startValue: string | null, endValue: string | null, preset: string, markTouched: boolean) {
+    currentStart = startValue
+    currentEnd = endValue
+    currentPreset = preset
+    if (markTouched) touched = true
+    updateParams()
+  }
+
+  function updateParams () {
+    window.$GRAPHENE.updateParam(`${name}_start`, currentStart)
+    window.$GRAPHENE.updateParam(`${name}_end`, currentEnd)
+  }
+
+  function onStartChange (event: Event) {
+    let value = (event.currentTarget as HTMLInputElement).value || null
+    setRange(value, currentEnd, '', true)
+  }
+
+  function onEndChange (event: Event) {
+    let value = (event.currentTarget as HTMLInputElement).value || null
+    setRange(currentStart, value, '', true)
+  }
+
+  function applyPreset (preset: string, markTouched = true) {
+    let baseEnd = (() => {
+      if (currentEnd) return new Date(currentEnd)
+      if (domainEnd) return new Date(domainEnd)
+      return new Date()
+    })()
+    if (Number.isNaN(baseEnd.getTime())) baseEnd = new Date()
+    let range = computePresetRange(preset, baseEnd)
+    if (!range) return
+    let startVal = range.start ? formatDate(range.start) : null
+    let endVal = range.end ? formatDate(range.end) : null
+    setRange(startVal, endVal, preset, markTouched)
+  }
+
+  function computePresetRange (preset: string, baseEndInclusive: Date): {start: Date | null; end: Date | null} | null {
+    let label = preset.trim()
+    let today = new Date()
+    let endExclusive = addDays(baseEndInclusive, 1)
+
+    let lastDaysMatch = label.match(/^Last (\d+) Days$/i)
+    if (lastDaysMatch) {
+      let days = parseInt(lastDaysMatch[1], 10)
+      let startDate = addDays(endExclusive, -days)
+      return {start: startDate, end: endExclusive}
+    }
+
+    let lastMonthsMatch = label.match(/^Last (\d+) Months$/i)
+    if (lastMonthsMatch) {
+      let months = parseInt(lastMonthsMatch[1], 10)
+      let monthEnd = startOfMonth(endExclusive)
+      let startDate = addMonths(monthEnd, -months)
+      return {start: startDate, end: monthEnd}
+    }
+
+    if (label === 'Last Month') {
+      let monthEnd = startOfMonth(endExclusive)
+      let startDate = addMonths(monthEnd, -1)
+      return {start: startDate, end: monthEnd}
+    }
+
+    if (label === 'Last Year') {
+      let yearEnd = startOfYear(endExclusive)
+      let startDate = addYears(yearEnd, -1)
+      return {start: startDate, end: yearEnd}
+    }
+
+    if (label === 'Last 365 Days') {
+      let startDate = addDays(endExclusive, -365)
+      return {start: startDate, end: endExclusive}
+    }
+
+    if (label === 'Month to Date') {
+      let startDate = startOfMonth(endExclusive)
+      return {start: startDate, end: endExclusive}
+    }
+
+    if (label === 'Month to Today') {
+      let startDate = startOfMonth(today)
+      let endDate = addDays(today, 1)
+      return {start: startDate, end: endDate}
+    }
+
+    if (label === 'Year to Date') {
+      let startDate = startOfYear(endExclusive)
+      return {start: startDate, end: endExclusive}
+    }
+
+    if (label === 'Year to Today') {
+      let startDate = startOfYear(today)
+      let endDate = addDays(today, 1)
+      return {start: startDate, end: endDate}
+    }
+
+    if (label === 'All Time') {
+      let startDate = domainStart ? new Date(domainStart) : null
+      let endDate = domainEnd ? addDays(new Date(domainEnd), 1) : endExclusive
+      return {start: startDate, end: endDate}
+    }
+
+    return null
+  }
+
+  function onPresetChange (event: Event) {
+    let value = (event.currentTarget as HTMLSelectElement).value
+    if (!value) {
+      currentPreset = ''
+      touched = true
+      return
+    }
+    applyPreset(value, true)
+  }
+</script>
+
+<div class={`input-block${hidePrint ? ' hide-print' : ''}`}>
+  {#if displayLabel}
+    <label class="input-label" for={`daterange-${name}-start`}>{displayLabel}</label>
+  {/if}
+  {#if description}
+    <div class="input-description">{description}</div>
+  {/if}
+  <div class="range-row">
+    <input id={`daterange-${name}-start`} class="date-input" type="date" value={currentStart || ''} on:change={onStartChange} />
+    <span class="range-separator">to</span>
+    <input id={`daterange-${name}-end`} class="date-input" type="date" value={currentEnd || ''} on:change={onEndChange} />
+  </div>
+  {#if presetList.length}
+    <select class="preset-select" on:change={onPresetChange}>
+      <option value="">Custom range</option>
+      {#each presetList as preset (preset)}
+        <option value={preset} selected={preset === currentPreset}>{preset}</option>
+      {/each}
+    </select>
+  {/if}
+</div>
+
+<style>
+  .input-block {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin: 8px 0;
+  }
+  @media print {
+    .hide-print {
+      display: none !important;
+    }
+  }
+  .input-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--input-label-color, #374151);
+  }
+  .input-description {
+    font-size: 12px;
+    color: rgba(55, 65, 81, 0.8);
+  }
+  .range-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .range-separator {
+    font-size: 12px;
+    color: rgba(55, 65, 81, 0.9);
+  }
+  .date-input {
+    padding: 6px 8px;
+    border-radius: 6px;
+    border: 1px solid rgba(107, 114, 128, 0.4);
+    font-size: 14px;
+    min-width: 150px;
+  }
+  .preset-select {
+    max-width: 220px;
+    padding: 6px 8px;
+    border-radius: 6px;
+    border: 1px solid rgba(107, 114, 128, 0.4);
+    font-size: 13px;
+  }
+</style>