Stat

<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    /** The values, oldest first. */
    data: readonly number[]
    width?: number
    height?: number
  }>(),
  { width: 96, height: 32 },
)

// Room for the 2px line and the end dot, so neither is cut off at the edges.
const PAD = 4

const points = computed(() => {
  const values = props.data.filter((value) => Number.isFinite(value))
  if (values.length < 2) return []
  const min = Math.min(...values)
  const span = Math.max(...values) - min || 1
  const step = (props.width - PAD * 2) / (values.length - 1)
  return values.map((value, index) => ({
    x: PAD + index * step,
    y: props.height - PAD - ((value - min) / span) * (props.height - PAD * 2),
  }))
})
const line = computed(() => points.value.map((point, index) => `${index ? 'L' : 'M'}${point.x},${point.y}`).join(''))
const last = computed(() => points.value[points.value.length - 1])
</script>

<template>
  <!-- A shape, not a readout: the number beside it carries the value, so this is hidden from screen readers. -->
  <svg class="er-sparkline" :width="width" :height="height" aria-hidden="true">
    <path :d="line" />
    <circle v-if="last" :cx="last.x" :cy="last.y" r="3" />
  </svg>
</template>

<style>
@layer components {
  .er-sparkline {
    display: block;
    flex-shrink: 0;
    overflow: visible;
  }

  /* The history stays quiet; only the latest point takes the accent colour. */
  .er-sparkline path {
    fill: none;
    stroke: var(--er-muted-foreground);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
  }

  .er-sparkline circle {
    fill: var(--er-chart-1, var(--er-primary));
  }
}
</style>

<script setup lang="ts">
import { computed } from 'vue'
import { CountUp } from '../count-up'
import Sparkline from './Sparkline.vue'

const props = withDefaults(
  defineProps<{
    /** What the number is. */
    label: string
    /** A number is shortened (12.9K, 4.2M); a string is shown exactly as given. */
    value: number | string
    /** Change since the comparison period, in percent: 12.4 for +12.4%. */
    delta?: number
    /** What the change is measured against, e.g. "vs last month". */
    deltaLabel?: string
    /** Whether going up is good news. Turn off for things like error rate or build time. */
    upIsGood?: boolean
    /** Recent values, oldest first, drawn as a small line. */
    trend?: readonly number[]
    /** Run a number value up from zero when the tile scrolls into view. */
    countUp?: boolean
  }>(),
  { upIsGood: true },
)

// Fixed locale, so server and browser write numbers the same way.
const compact = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
const percent = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1, signDisplay: 'exceptZero' })

const shown = computed(() => (typeof props.value === 'number' ? compact.format(props.value) : props.value))
const direction = computed(() => (!props.delta ? 'flat' : props.delta > 0 ? 'up' : 'down'))
const tone = computed(() => {
  if (direction.value === 'flat') return 'neutral'
  return (direction.value === 'up') === props.upIsGood ? 'good' : 'bad'
})
</script>

<template>
  <div class="er-stat">
    <div class="er-stat-label">{{ label }}</div>
    <div class="er-stat-row">
      <div class="er-stat-value">
        <CountUp v-if="countUp && typeof value === 'number'" :value="value" :format="compact.format" />
        <template v-else>{{ shown }}</template>
      </div>
      <Sparkline v-if="trend?.length" :data="trend" />
    </div>
    <div v-if="delta !== undefined" class="er-stat-delta" :data-tone="tone">
      <!-- The arrow and the sign say which way it went, so the colour is never the only cue. -->
      <svg v-if="direction !== 'flat'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path v-if="direction === 'up'" d="M12 19V5M6 11l6-6 6 6" />
        <path v-else d="M12 5v14M6 13l6 6 6-6" />
      </svg>
      <strong>{{ percent.format(delta) }}%</strong>
      <span v-if="deltaLabel">{{ deltaLabel }}</span>
    </div>
  </div>
</template>

<style>
@layer components {
  .er-stat {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
  }

  .er-stat-label {
    color: var(--er-muted-foreground);
    font-size: 0.8125rem;
  }

  .er-stat-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
  }

  .er-stat-value {
    font-size: 1.75rem;
    font-weight: var(--er-weight-semibold);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  .er-stat-delta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--er-muted-foreground);
    font-size: 0.8125rem;
  }

  .er-stat-delta svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .er-stat-delta strong {
    margin-right: 0.125rem;
    font-weight: var(--er-weight-medium);
    font-variant-numeric: tabular-nums;
  }

  .er-stat-delta[data-tone='good'] svg,
  .er-stat-delta[data-tone='good'] strong {
    color: var(--er-success);
  }

  .er-stat-delta[data-tone='bad'] svg,
  .er-stat-delta[data-tone='bad'] strong {
    color: var(--er-destructive);
  }
}
</style>

/** Stat — one headline number with its label, the change since last period, and an optional sparkline. */
export { default as Sparkline } from './Sparkline.vue'
export { default as Stat } from './Stat.vue'