Sparkline

import clsx from 'clsx'
import type React from 'react'

const padding = 2

export function Sparkline({
  series,
  label,
  width = 96,
  height = 24,
  color = 'text-zinc-900 dark:text-white',
  className,
  ...props
}: {
  series: number[]
  label: string
  width?: number
  height?: number
  color?: string
} & Omit<React.ComponentPropsWithoutRef<'svg'>, 'width' | 'height' | 'color' | 'children'>) {
  let values = series.filter(Number.isFinite)
  let points: { x: number; y: number }[] = []
  if (values.length >= 2) {
    let max = Math.max(...values)
    let min = Math.min(...values)
    let step = width / (values.length - 1)
    let usable = height - padding * 2
    points = values.map((value, index) => ({
      x: index * step,
      y: max === min ? height / 2 : padding + (1 - (value - min) / (max - min)) * usable,
    }))
  }
  let line = points.map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.x.toFixed(2)},${point.y.toFixed(2)}`).join(' ')
  let area = points.length === 0 ? '' : `M 0,${height} ${line.slice(1)} L ${width},${height} Z`

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      {...props}
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      role="img"
      aria-label={label}
      className={clsx(className, 'shrink-0', color)}
    >
      <path d={area} fill="currentColor" className="opacity-10" />
      <path
        d={line}
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        vectorEffect="non-scaling-stroke"
      />
    </svg>
  )
}

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

const props = withDefaults(
  defineProps<{
    series: number[]
    label: string
    width?: number
    height?: number
    color?: string
  }>(),
  { width: 96, height: 24, color: 'text-zinc-900 dark:text-white' }
)

const padding = 2

const points = computed(() => {
  const values = props.series.filter(Number.isFinite)
  if (values.length < 2) return []

  const max = Math.max(...values)
  const min = Math.min(...values)
  const step = props.width / (values.length - 1)
  const usable = props.height - padding * 2

  return values.map((value, index) => ({
    x: index * step,
    y: max === min ? props.height / 2 : padding + (1 - (value - min) / (max - min)) * usable,
  }))
})

const line = computed(() =>
  points.value.map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.x.toFixed(2)},${point.y.toFixed(2)}`).join(' ')
)

const area = computed(() =>
  points.value.length === 0 ? '' : `M 0,${props.height} ${line.value.slice(1)} L ${props.width},${props.height} Z`
)
</script>

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    :viewBox="`0 0 ${width} ${height}`"
    role="img"
    :aria-label="label"
    :class="['shrink-0', color]"
  >
    <path :d="area" fill="currentColor" class="opacity-10" />
    <path
      :d="line"
      fill="none"
      stroke="currentColor"
      stroke-width="1.5"
      stroke-linecap="round"
      stroke-linejoin="round"
      vector-effect="non-scaling-stroke"
    />
  </svg>
</template>