@graphenedata/cli 0.0.1

package/dist/ui/components/Bar.svelte

@@ -0,0 +1,326 @@
+<script>
+  import {getContext, beforeUpdate} from 'svelte'
+  import {propKey, configKey} from '../component-utilities/chartContext.js'
+  const props = getContext(propKey)
+  const config = getContext(configKey)
+
+  import getSeriesConfig from '../component-utilities/getSeriesConfig.js'
+  import getStackedData from '../component-utilities/getStackedData.js'
+  import getSortedData from '../component-utilities/getSortedData.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'
+
+  const {resolveColor} = getThemeStores()
+
+  export let y = undefined
+  const ySet = y ? true : false // Hack, see chart.svelte
+  export let y2 = undefined
+  const y2Set = y2 ? true : false // Hack, see chart.svelte
+  export let series = undefined
+  const seriesSet = series ? true : false // Hack, see chart.svelte
+  export let options = undefined
+  export let name = undefined // name to appear in legend (for single series graphics)
+  export let type = 'stacked' // stacked, grouped, or stacked100
+  export let stackName = undefined
+
+  export let fillColor = undefined
+  $: fillColorStore = resolveColor(fillColor)
+
+  export let fillOpacity = undefined
+
+  export let outlineColor = undefined
+  $: outlineColorStore = resolveColor(outlineColor)
+
+  export let outlineWidth = undefined
+
+  export let labels = false
+  $: labels = labels === 'true' || labels === true
+  export let seriesLabels = true
+  $: seriesLabels = seriesLabels === 'true' || seriesLabels === true
+  export let labelSize = 11
+  export let labelPosition = undefined
+
+  export let labelColor = undefined
+  $: labelColorStore = resolveColor(labelColor)
+
+  export let labelFmt = undefined
+  let labelFormat
+  if (labelFmt) {
+    labelFormat = getFormatObjectFromString(labelFmt)
+  }
+  export let yLabelFmt = undefined
+  let yLabelFormat
+  if (yLabelFmt) {
+    yLabelFormat = getFormatObjectFromString(yLabelFmt)
+  }
+  export let y2LabelFmt = undefined
+  let y2LabelFormat
+  if (y2LabelFmt) {
+    y2LabelFormat = getFormatObjectFromString(y2LabelFmt)
+  }
+
+  export let y2SeriesType = 'bar'
+
+  export let stackTotalLabel = true
+  $: stackTotalLabel = stackTotalLabel === 'true' || stackTotalLabel === true
+  export let showAllLabels = false
+  export let seriesOrder = undefined
+  let barMaxWidth = 60
+
+  // Prop check. If local props supplied, use those. Otherwise fall back to global props.
+  $: data = $props.data
+  $: x = $props.x
+  $: y = ySet ? y : $props.y
+  $: y2 = y2Set ? y2 : $props.y2
+  $: yFormat = $props.yFormat
+  $: y2Format = $props.y2Format
+  $: yCount = $props.yCount
+  $: y2Count = $props.y2Count
+  $: swapXY = $props.swapXY
+  $: xType = $props.xType
+  $: xMismatch = $props.xMismatch
+  $: columnSummary = $props.columnSummary
+  $: sort = $props.sort
+  $: series = seriesSet ? series : $props.series
+
+  let stackedData
+  let sortOrder
+  let defaultLabelPosition
+
+  $: if (!series && typeof y !== 'object') {
+    // Single Series
+    name = name ?? formatTitle(y, columnSummary[y].title)
+
+    if (swapXY && xType !== 'category') {
+      data = getCompletedData(data, x, y, series, true, xType !== 'time')
+      xType = 'category'
+    }
+
+    stackName = 'stack1'
+
+    defaultLabelPosition = swapXY ? 'right' : 'top'
+  } else {
+    // Multi Series
+    // Sort by stack total for category axis
+    if (sort === true && xType === 'category') {
+      stackedData = getStackedData(data, x, y)
+
+      if (typeof y === 'object') {
+        stackedData = getSortedData(stackedData, 'stackTotal', false)
+      } else {
+        stackedData = getSortedData(stackedData, y, false)
+      }
+
+      sortOrder = stackedData.map((d) => d[x])
+      data = [...data].sort(function (a, b) {
+        return sortOrder.indexOf(a[x]) - sortOrder.indexOf(b[x])
+      })
+    }
+
+    // Run fill for missing series entries, only if it's a stacked bar
+    if (swapXY || ((xType === 'value' || xType === 'category') && type.includes('stacked'))) {
+      data = getCompletedData(data, x, y, series, true, xType === 'value')
+      xType = 'category'
+    } else if (xType === 'time' && type.includes('stacked')) {
+      data = getCompletedData(data, x, y, series, true, true)
+    }
+
+    if (type.includes('stacked')) {
+      // Set up stacks
+      stackName = stackName ?? 'stack1'
+      defaultLabelPosition = 'inside'
+    } else {
+      stackName = undefined
+      defaultLabelPosition = swapXY ? 'right' : 'top'
+    }
+  }
+
+  let stackTotalSeries
+  $: if (type === 'stacked') {
+    stackTotalSeries = getStackedData(data, x, y)
+  }
+
+  // Value label positions:
+  const labelPositions = {
+    outside: 'top',
+    inside: 'inside',
+  }
+
+  const swapXYLabelPositions = {
+    outside: 'right',
+    inside: 'inside',
+  }
+
+  $: labelPosition =
+    (swapXY ? swapXYLabelPositions[labelPosition] : labelPositions[labelPosition]) ??
+    defaultLabelPosition
+
+  $: baseConfig = {
+    type: 'bar',
+    stack: stackName,
+    label: {
+      show: labels && seriesLabels,
+      // formatter: function (params) {
+      //   let output;
+      //   output =
+      //     params.value[swapXY ? 0 : 1] === 0
+      //       ? ''
+      //       : formatValue(params.value[swapXY ? 0 : 1], labelFormat ?? yFormat);
+      //   return output;
+      // },
+      formatter: function (params) {
+        return params.value[swapXY ? 0 : 1] === 0
+          ? ''
+          : formatValue(
+            params.value[swapXY ? 0 : 1],
+            [yLabelFormat ?? labelFormat ?? yFormat, y2LabelFormat ?? labelFormat ?? y2Format][
+              getYAxisIndex(params.componentIndex, yCount, y2Count)
+            ],
+          )
+      },
+      position: labelPosition,
+      fontSize: labelSize,
+      color: $labelColorStore,
+    },
+    labelLayout: {
+      hideOverlap: showAllLabels ? false : true,
+    },
+    emphasis: {
+      focus: 'series',
+    },
+    barMaxWidth: barMaxWidth,
+    itemStyle: {
+      color: $fillColorStore,
+      opacity: fillOpacity,
+      borderColor: $outlineColorStore,
+      borderWidth: outlineWidth,
+    },
+  }
+
+  export let seriesLabelFmt = undefined
+
+  $: seriesConfig = getSeriesConfig(
+    data,
+    x,
+    y,
+    series,
+    swapXY,
+    baseConfig,
+    name,
+    xMismatch,
+    columnSummary,
+    seriesOrder,
+    undefined,
+    undefined,
+    y2,
+    seriesLabelFmt,
+  )
+
+  $: config.update((d) => {
+    d.series.push(...seriesConfig)
+    // Push series into legend:
+    d.legend.data.push(...seriesConfig.map((d) => d.name.toString()))
+
+    // Stacked chart total label:
+    // series !== x is to avoid an issue where same column is used for both - stackTotalLabel can't handle that
+    if (
+      labels === true &&
+      type === 'stacked' &&
+      (typeof y === 'object') | (series !== undefined) &&
+      stackTotalLabel === true &&
+      series !== x
+    ) {
+      // push stack total series for total label
+      d.series.push({
+        type: 'bar',
+        stack: stackName,
+        name: 'stackTotal',
+        color: 'none',
+        data: stackTotalSeries.map((row) => {
+          let axisValue = xMismatch ? row[x].toString() : row[x]
+          if (swapXY) return [0, axisValue]
+          return [axisValue, 0]
+        }),
+        label: {
+          show: true,
+          position: swapXY ? 'right' : 'top',
+          formatter: function (params) {
+            let sum = 0
+            seriesConfig.forEach((s) => {
+              sum += s.data[params.dataIndex][swapXY ? 0 : 1]
+            })
+            return sum === 0 ? '' : formatValue(sum, labelFormat ?? yFormat)
+          },
+          fontWeight: 'bold',
+          fontSize: labelSize,
+          padding: swapXY ? [0, 0, 0, 5] : undefined,
+        },
+      })
+
+      // disable legend selected mode when stackTotalLabel is displayed:
+      d.legend.selectedMode = false
+    }
+    return d
+  })
+
+  $: chartOverrides = {
+    // Evidence definition of axes (yAxis = dependent, xAxis = independent)
+    xAxis: {
+      boundaryGap: ['1%', '2%'],
+      type: xType,
+    },
+  }
+
+  beforeUpdate(() => {
+    // beforeUpdate ensures that these overrides always run before we render the chart.
+    // otherwise, this block won't re-execute after a change to the data object, and
+    // the chart will re-render using the base config from Chart.svelte
+
+    if (options) {
+      config.update((d) => {
+        return {...d, ...options}
+      })
+    }
+
+    if (chartOverrides) {
+      config.update((d) => {
+        if (type.includes('stacked')) {
+          d.tooltip = {...d.tooltip, order: 'seriesDesc'}
+        } else {
+          d.tooltip = {...d.tooltip, order: 'seriesAsc'}
+        }
+        if (type === 'stacked100') {
+          if (swapXY) {
+            d.xAxis = {...d.xAxis, max: 1}
+          } else {
+            d.yAxis[0] = {...d.yAxis[0], max: 1}
+          }
+        }
+        if (swapXY) {
+          d.yAxis = {...d.yAxis, ...chartOverrides.xAxis}
+          d.xAxis = {...d.xAxis, ...chartOverrides.yAxis}
+        } else {
+          d.yAxis[0] = {...d.yAxis[0], ...chartOverrides.yAxis}
+          d.xAxis = {...d.xAxis, ...chartOverrides.xAxis}
+          if (y2) {
+            d.yAxis[1] = {...d.yAxis[1], show: true}
+            if (['line', 'bar', 'scatter'].includes(y2SeriesType)) {
+              for (let i = 0; i < y2Count; i++) {
+                d.series[yCount + i].type = y2SeriesType
+                d.series[yCount + i].stack = undefined
+              }
+            }
+          }
+        }
+        return d
+      })
+    }
+  })
+</script>

package/dist/ui/components/BarChart.svelte

@@ -0,0 +1,194 @@
+<script>
+  import Chart from './Chart.svelte'
+  import Bar from './Bar.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 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
+    }
+  }
+
+  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
+
+  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}
+    {swapXY}
+    {title}
+    {subtitle}
+    chartType="Bar Chart"
+    stackType={type}
+    {sort}
+    {stacked100}
+    {chartAreaHeight}
+    {showAllXAxisLabels}
+    colorPalette={colorPaletteStore}
+    {echartsOptions}
+    {seriesOptions}
+    {connectGroup}
+    {xLabelWrap}
+    seriesColors={seriesColorsStore}
+    {leftPadding}
+    {rightPadding}
+  >
+    <Bar
+      {type}
+      fillColor={fillColorStore}
+      {fillOpacity}
+      outlineColor={outlineColorStore}
+      {outlineWidth}
+      {labels}
+      {labelSize}
+      {labelPosition}
+      labelColor={labelColorStore}
+      {labelFmt}
+      {yLabelFmt}
+      {y2LabelFmt}
+      {stackTotalLabel}
+      {seriesLabels}
+      {showAllLabels}
+      {y2SeriesType}
+      {seriesOrder}
+      {seriesLabelFmt}
+    />
+    <slot />
+  </Chart>
+</QueryLoad>

package/dist/ui/components/BigValue.svelte

@@ -0,0 +1,69 @@
+<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
+
+  function formatValue (input: any) {
+    if (input === null || input === undefined) return '—'
+    if (!fmt) return String(input)
+
+    if (fmt.startsWith('num')) {
+      let fraction = parseInt(fmt.replace(/[^0-9]/g, '') || '0', 10)
+      let formatter = new Intl.NumberFormat('en-US', {
+        maximumFractionDigits: fraction,
+        minimumFractionDigits: fraction,
+      })
+      return formatter.format(Number(input))
+    }
+
+    if (fmt.startsWith('pct')) {
+      let fraction = parseInt(fmt.replace(/[^0-9]/g, '') || '0', 10)
+      let formatter = new Intl.NumberFormat('en-US', {
+        style: 'percent',
+        maximumFractionDigits: fraction,
+        minimumFractionDigits: fraction,
+      })
+      return formatter.format(Number(input))
+    }
+
+    return String(input)
+  }
+</script>
+
+<QueryLoad {data} fields={[value]} let:loaded>
+  <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>
+
+<style>
+  .big-value {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin: 8px 0;
+  }
+
+  .big-value__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--graphene-big-value-title, #111827);
+  }
+
+  .big-value__subtitle {
+    font-size: 13px;
+    color: var(--graphene-big-value-subtitle, #4b5563);
+  }
+
+  .big-value__value {
+    font-size: 32px;
+    font-weight: 600;
+    color: var(--graphene-big-value-value, #111827);
+  }
+</style>