@graphenedata/cli 0.0.1

package/dist/ui/components/PieChart.svelte

@@ -0,0 +1,36 @@
+<script>
+  import ECharts from './ECharts.svelte'
+  import QueryLoad from './QueryLoad.svelte'
+
+  export let data
+  export let category
+  export let value
+  export let title = undefined
+  export let subtitle = undefined
+  export let printEchartsConfig = undefined
+  export let echartsOptions = undefined
+  export let seriesOptions = undefined
+  export let seriesColors = undefined
+  $: void printEchartsConfig
+</script>
+
+<style></style>
+
+<QueryLoad data={data} fields={[category, value]} let:loaded>
+  <ECharts data={loaded} {echartsOptions} {seriesOptions} {seriesColors} config={{
+    title: {
+      text: title,
+      subtext: subtitle,
+    },
+    tooltip: {
+      formatter: '{b}: {c} ({d}%)',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['40%', '70%'],
+        data: [...loaded.map(r => ({name: r[category], value: r[value]}))],
+      },
+    ],
+  }} />
+</QueryLoad>

package/dist/ui/components/QueryLoad.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import ErrorChart from './ErrorChart.svelte'
+  import {onDestroy, onMount} from 'svelte'
+
+  export let data: string | {rows?: any[]}
+  export let height = 200
+  export let fields: string[] = []
+
+  let errors: Error[] | null = null
+  let loaded: any[] | null = null
+
+  let handleResults = (data) => {
+    errors = data.errors
+    loaded = data.rows
+  }
+
+  onMount(() => {
+    if (typeof data !== 'string') {
+      loaded = data.rows
+    } else {
+      let usedFields = fields.filter(f => !!f)
+      if (usedFields.length == 0) usedFields = ['*']
+      window.$GRAPHENE.query(data, usedFields, handleResults)
+    }
+  })
+
+  onDestroy(() => {
+    window.$GRAPHENE.unsubscribe(handleResults)
+  })
+</script>
+
+{#if errors}
+  <ErrorChart title="Error" error={errors[0]} />
+{:else if !loaded}
+  <div class='ql-skeleton' style={`height:${height}px`} role="status" aria-live="polite">
+    <span class="ql-skeleton__pulse" />
+  </div>
+{:else if loaded.length == 0}
+  <div class="empty-chart" role="note">Dataset is empty - query ran successfully, but no data was returned from the database</div>
+{:else}
+  <slot loaded={loaded} />
+{/if}
+
+<style>
+  .ql-skeleton {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background: var(--chart-skeleton-bg, #f3f4f6);
+    border-radius: 4px;
+  }
+
+  .ql-skeleton__pulse {
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
+    animation: ql-pulse 1.4s ease-in-out infinite;
+    content: '';
+  }
+
+  @keyframes ql-pulse {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .empty-chart {
+    width: 100%;
+    padding: 12px;
+    margin: 8px 0;
+    border: 1px dashed rgba(107, 114, 128, 0.6);
+    border-radius: 4px;
+    font-size: 12px;
+    color: rgba(75, 85, 99, 0.9);
+    text-align: center;
+    background: rgba(243, 244, 246, 0.6);
+  }
+</style>

package/dist/ui/components/Row.svelte

@@ -0,0 +1,14 @@
+<div><slot></slot></div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+  }
+
+  /* Ensure styles apply to slotted children (not scoped) */
+  div > :global(*) {
+    flex: 1 1 0;
+  }
+</style>

package/dist/ui/components/SortIcon.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  export let ascending: boolean | undefined = undefined
+</script>
+
+<svg
+  class="sort-icon"
+  viewBox="0 0 16 16"
+  aria-hidden="true"
+>
+  {#if ascending}
+    <path
+      d="M8 5.2 3.2 10a.75.75 0 0 0 1.06 1.06L8 7.32l3.74 3.74a.75.75 0 1 0 1.06-1.06Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    />
+  {:else}
+    <path
+      d="M8 10.8 12.8 6a.75.75 0 0 0-1.06-1.06L8 8.68 4.26 4.94A.75.75 0 0 0 3.2 6Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    />
+  {/if}
+</svg>
+
+<style>
+  .sort-icon {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-bottom: 2px;
+  }
+</style>

package/dist/ui/components/Table.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import QueryLoad from './QueryLoad.svelte'
+  import TableInner from './_Table.svelte'
+
+  export let data: string
+
+  const restProps: Record<string, unknown> = $$restProps
+  $: spreadProps = Object.fromEntries(Object.entries(restProps).filter(([, value]) => value !== undefined))
+</script>
+
+<QueryLoad {data} let:loaded>
+  {#if $$slots.default}
+    <TableInner {...spreadProps} data={loaded}>
+      <slot />
+    </TableInner>
+  {:else}
+    <TableInner {...spreadProps} data={loaded} />
+  {/if}
+</QueryLoad>

package/dist/ui/components/TableCell.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  export let dataType: string | undefined = undefined
+  export let align: string | undefined = undefined
+  export let height: string | number | undefined = undefined
+  export let width: string | number | undefined = undefined
+  export let wrap: boolean | undefined = undefined
+  export let verticalAlign: 'top' | 'middle' | 'bottom' | string = 'middle'
+  export let rowSpan = 1
+  export let colSpan = 1
+  export let show = true
+  export let cellColor: string | undefined = undefined
+  export let fontColor: string | undefined = undefined
+  export let topBorder: string | undefined = undefined
+  export let paddingLeft: string | undefined = undefined
+  export let borderBottom: string | undefined = undefined
+  export let compact = false
+</script>
+
+<td
+  role="cell"
+  rowspan={rowSpan}
+  colspan={colSpan}
+  class={`table-cell ${dataType ?? ''} ${compact ? 'table-cell--compact' : ''} ${topBorder ?? ''} ${$$restProps.class ?? ''}`.trim()}
+  style:text-align={align}
+  style:height={height}
+  style:width={width}
+  style:white-space={wrap ? 'normal' : 'nowrap'}
+  style:vertical-align={verticalAlign}
+  style:display={show ? undefined : 'none'}
+  style:background-color={cellColor}
+  style:color={fontColor}
+  style:padding-left={paddingLeft}
+  style:border-top={topBorder}
+  style:border-bottom={borderBottom}
+>
+  <slot />
+</td>
+
+<style>
+  .table-cell {
+    padding: 2px 13px 2px 6px;
+    font-variant-numeric: tabular-nums;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .table-cell:first-child {
+    padding-left: 3px;
+  }
+
+  .table-cell--compact {
+    padding: 1px 16.5px 1px 1px;
+    font-size: 12px;
+  }
+
+  .string,
+  .date,
+  .boolean {
+    text-align: left;
+  }
+
+  .number {
+    text-align: right;
+  }
+
+  .index {
+    color: var(--color-base-content-muted, #6b7280);
+    text-align: left;
+    max-width: min-content;
+  }
+
+  td:focus {
+    outline: none;
+  }
+</style>

package/dist/ui/components/TableGroupRow.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import {createEventDispatcher} from 'svelte'
+  import TableCell from './TableCell.svelte'
+  import TableGroupToggle from './TableGroupToggle.svelte'
+  import InlineDelta from './InlineDelta.svelte'
+  import {aggregateColumn, safeExtractColumn} from '../component-utilities/tableUtils'
+  import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
+  import {toBoolean} from '../component-utilities/convert'
+
+  export let groupName: string
+  export let currentGroupData: any[] = []
+  export let toggled = true
+  export let columnSummary: any[] = []
+  export let rowNumbers: boolean | string | undefined = undefined
+  export let rowColor: string | undefined = undefined
+  export let subtotals: boolean | string | undefined = true
+  export let orderedColumns: any[] = []
+  export let compact: boolean | string | undefined = undefined
+
+  rowNumbers = toBoolean(rowNumbers) ?? false
+  subtotals = toBoolean(subtotals) ?? true
+  compact = toBoolean(compact)
+
+  const dispatch = createEventDispatcher<{toggle: {groupName: string}}>()
+  const toggleGroup = () => dispatch('toggle', {groupName})
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      toggleGroup()
+    }
+  }
+
+  const resolveFormat = (column, summary) => {
+    if (column.subtotalFmt) return getFormatObjectFromString(column.subtotalFmt)
+    if (column.totalFmt) return getFormatObjectFromString(column.totalFmt)
+    if (column.fmt) return getFormatObjectFromString(column.fmt, summary.format?.valueType)
+    return summary.format
+  }
+</script>
+
+<tr
+  class="group-row"
+  tabindex="0"
+  on:click={toggleGroup}
+  on:keydown={handleKeydown}
+  style:background-color={rowColor}
+>
+  {#if rowNumbers}
+    <TableCell class="group-row__label" {compact} colSpan={2}>
+      <div class="group-row__title">
+        <span class="group-row__icon"><TableGroupToggle {toggled} /></span>
+        {groupName}
+      </div>
+    </TableCell>
+  {/if}
+
+  {#each orderedColumns as column, index (index)}
+    {@const summary = safeExtractColumn(column, columnSummary)}
+    {@const format = resolveFormat(column, summary)}
+    {#if index === 0}
+      {#if rowNumbers}
+        <!-- Covered by the row-number label cell -->
+      {:else}
+      <TableCell class="group-row__label" {compact} paddingLeft="1px">
+        <div class="group-row__title">
+          <span class="group-row__icon"><TableGroupToggle {toggled} /></span>
+          {groupName}
+        </div>
+      </TableCell>
+      {/if}
+    {:else if subtotals}
+      <TableCell class={summary.type} {compact} align={column.align}>
+        {#if ['sum', 'mean', 'median', 'min', 'max', 'weightedMean', 'count', 'countDistinct', undefined].includes(column.totalAgg) || column.subtotalFmt}
+          {#if column.contentType === 'delta'}
+            <InlineDelta
+              value={aggregateColumn(currentGroupData, column.id, column.totalAgg, summary.type, column.weightCol)}
+              downIsGood={column.downIsGood}
+              formatObject={format}
+              columnUnitSummary={summary.columnUnitSummary}
+              showValue={column.showValue}
+              showSymbol={column.deltaSymbol}
+              align={column.align}
+              neutralMin={column.neutralMin ?? 0}
+              neutralMax={column.neutralMax ?? 0}
+              chip={column.chip}
+            />
+          {:else}
+            {formatValue(
+              aggregateColumn(currentGroupData, column.id, column.totalAgg, summary.type, column.weightCol),
+              format,
+              summary.columnUnitSummary,
+            )}
+          {/if}
+        {:else}
+          {column.totalAgg}
+        {/if}
+      </TableCell>
+    {:else}
+      <TableCell />
+    {/if}
+  {/each}
+</tr>
+
+<style>
+  .group-row {
+    font-weight: 600;
+    border-top: 1px solid rgba(229, 231, 235, 1);
+    cursor: pointer;
+  }
+
+  .group-row:focus {
+    outline: 2px solid var(--color-primary, #2563eb);
+    outline-offset: 1px;
+  }
+
+  :global(.group-row__label) {
+    padding: 3px 6px;
+  }
+
+  .group-row__title {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .group-row__icon {
+    display: inline-flex;
+  }
+
+  @media print {
+    .group-row__icon {
+      display: none;
+    }
+  }
+</style>

package/dist/ui/components/TableGroupToggle.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import {getThemeStores} from '../component-utilities/themeStores'
+
+  export let toggled = false
+  export let color: string | undefined = undefined
+  export let size = 10
+
+  const {theme, resolveColor} = getThemeStores()
+  let colorStore = resolveColor(color)
+
+  $: colorStore = resolveColor(color)
+  $: fill = $colorStore ?? $theme.colors['base-content']
+</script>
+
+<span aria-expanded={toggled} class="group-toggle">
+  <svg viewBox="0 0 16 16" width={size} height={size}>
+    <path
+      fill={fill}
+      fill-rule="evenodd"
+      d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06z"
+    />
+  </svg>
+</span>
+
+<style>
+  .group-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: auto 0 auto 0;
+  }
+
+  svg {
+    display: inline-block;
+    vertical-align: middle;
+    transition: transform 0.15s ease-in;
+  }
+
+  [aria-expanded='true'] svg {
+    transform: rotate(90deg);
+  }
+</style>

package/dist/ui/components/TableHeader.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+  import SortIcon from './SortIcon.svelte'
+  import {safeExtractColumn} from '../component-utilities/tableUtils'
+  import {toBoolean} from '../component-utilities/convert'
+
+  export let rowNumbers: boolean | string | undefined = false
+  export let headerColor: string | undefined = undefined
+  export let headerFontColor: string | undefined = undefined
+  export let orderedColumns: any[] = []
+  export let columnSummary: any[] = []
+  export let sortable: boolean | string | undefined = true
+  export let sortClick: (columnId: string) => () => void = () => () => {}
+  export let formatColumnTitles: boolean | string | undefined = true
+  export let sortObj: {col: string | null; ascending: boolean | null} = {col: null, ascending: null}
+  export let wrapTitles: boolean | string | undefined = false
+  export let compact: boolean | string | undefined = false
+  export let link: string | undefined = undefined
+
+  rowNumbers = toBoolean(rowNumbers) ?? false
+  sortable = toBoolean(sortable) ?? true
+  formatColumnTitles = toBoolean(formatColumnTitles) ?? true
+  wrapTitles = toBoolean(wrapTitles) ?? false
+  compact = toBoolean(compact) ?? false
+
+  const getWrapTitleAlignment = (column: any) => {
+    if (column.align === 'right') return 'header-title--align-end'
+    if (column.align === 'center') return 'header-title--align-center'
+    let extracted = safeExtractColumn(column, columnSummary)
+    if (extracted.type === 'number') return 'header-title--align-end'
+    return 'header-title--align-start'
+  }
+
+  const computeGroupSpans = () => {
+    return orderedColumns.map((column, index, array) => {
+      let isNewGroup = index === 0 || column.colGroup !== array[index - 1].colGroup
+      let span = 1
+      if (column.colGroup) {
+        for (let i = index + 1; i < array.length && array[i].colGroup === column.colGroup; i++) span += 1
+      }
+      return {...column, isNewGroup, span: isNewGroup ? span : 0}
+    })
+  }
+
+  const getAriaSortValue = (columnId: string) => {
+    if (sortObj.col !== columnId) return 'none'
+    return sortObj.ascending ? 'ascending' : 'descending'
+  }
+
+  const resolveHeaderTitle = (column: any, summary: any) => {
+    if (column.title) return column.title
+    if (formatColumnTitles) return summary.title
+    return summary.id
+  }
+
+  $: columnsWithGroupSpan = computeGroupSpans()
+</script>
+
+<thead>
+  {#if columnsWithGroupSpan.length}
+    <tr class="header-group-row" style:background-color={headerColor}>
+      {#if rowNumbers}
+        <th class={`header-index ${compact ? 'header-index--compact' : ''}`} style:background-color={headerColor} />
+      {/if}
+      {#each columnsWithGroupSpan as column (column.id)}
+        {#if column.colGroup && column.isNewGroup}
+          <th class="header-group" colspan={column.span}>
+            <div class="header-group__label">{column.colGroup}</div>
+          </th>
+        {:else}
+          <th class="header-group--spacer" />
+        {/if}
+      {/each}
+      {#if link}
+        <th class="header-group--spacer" />
+      {/if}
+    </tr>
+  {/if}
+
+  <tr class="header-row">
+    {#if rowNumbers}
+      <th
+        role="columnheader"
+        class={`header-index ${compact ? 'header-index--compact' : ''}`}
+        style:background-color={headerColor}
+        style:color={headerFontColor}
+      />
+    {/if}
+    {#each orderedColumns as column (column.id)}
+      {@const summary = safeExtractColumn(column, columnSummary)}
+      <th
+        role="columnheader"
+        class={`header-cell ${summary.type ?? ''} ${compact ? 'header-cell--compact' : ''}`}
+        style:color={headerFontColor}
+        style:background={headerColor}
+        style:text-align={column.align ?? (['sparkline', 'sparkbar', 'sparkarea', 'bar'].includes(column.contentType) ? 'center' : undefined)}
+        style:cursor={sortable ? 'pointer' : 'auto'}
+        on:click={sortable ? sortClick(column.id) : undefined}
+        aria-sort={getAriaSortValue(column.id)}
+      >
+        <div class={`header-title ${wrapTitles || column.wrapTitle ? 'header-title--wrap' : ''} ${wrapTitles || column.wrapTitle ? getWrapTitleAlignment(column) : ''}`.trim()}>
+          <span class={`header-title__text ${wrapTitles || column.wrapTitle ? 'header-title__text--wrap' : ''}`}>
+            {resolveHeaderTitle(column, summary)}
+            {#if column.description}
+              <span class="header-title__info" title={column.description}>ⓘ</span>
+            {/if}
+          </span>
+          <span class="header-sort-indicator">
+            {#if sortObj.col === column.id}
+              <SortIcon ascending={sortObj.ascending ?? undefined} />
+            {:else}
+              <span class="header-sort-placeholder"><SortIcon ascending /></span>
+            {/if}
+          </span>
+        </div>
+      </th>
+    {/each}
+    {#if link}
+      <th class="header-link-cell"><span class="sr-only">Links</span></th>
+    {/if}
+  </tr>
+</thead>
+
+<style>
+  thead {
+    background: var(--table-header-background, inherit);
+  }
+
+  .header-group-row {
+    height: 26px;
+  }
+
+  .header-group {
+    padding: 0;
+  }
+
+  .header-group__label {
+    padding: 4px 6px 2px;
+    border-bottom: 1px solid rgba(107, 114, 128, 0.4);
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .header-group--spacer {
+    padding: 0;
+  }
+
+  .header-row {
+    border-bottom: 1px solid rgba(107, 114, 128, 0.6);
+  }
+
+  th {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 500;
+  }
+
+  .header-index {
+    color: var(--color-base-content-muted, #6b7280);
+    text-align: left;
+    padding: 2px 8px 2px 3px;
+    max-width: min-content;
+  }
+
+  .header-index--compact {
+    padding: 1px 4px;
+    font-size: 12px;
+  }
+
+  .header-cell {
+    padding: 2px 13px 2px 6px;
+    vertical-align: bottom;
+  }
+
+  .header-cell--compact {
+    padding: 1px 6px 1px 1px;
+    font-size: 12px;
+  }
+
+  .header-title {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 4px;
+  }
+
+  .header-title--wrap {
+    align-items: stretch;
+  }
+
+  .header-title--align-end {
+    justify-content: flex-end;
+  }
+
+  .header-title--align-center {
+    justify-content: center;
+  }
+
+  .header-title--align-start {
+    justify-content: flex-start;
+  }
+
+  .header-title__text {
+    display: inline-block;
+    letter-spacing: -0.015em;
+  }
+
+  .header-title__text--wrap {
+    white-space: normal;
+  }
+
+  .header-title__info {
+    margin-left: 4px;
+    cursor: help;
+    font-size: 0.75em;
+    color: var(--color-base-content-muted, #6b7280);
+  }
+
+  .header-sort-indicator {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .header-sort-placeholder {
+    visibility: hidden;
+  }
+
+  .header-link-cell {
+    width: 24px;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+</style>