@slexn/codecenter-ui 1.0.0

package/src/components/ui/kpi-line-card/KpiLineCard.vue

@@ -0,0 +1,622 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import type { Component, HTMLAttributes } from "vue"
+import { ArrowDownRightIcon, ArrowUpRightIcon, MinusIcon } from "@lucide/vue"
+import { cn } from "@/lib/utils"
+
+export type KpiLineCardSize = "sm" | "default" | "lg"
+export type KpiLineCardChartPosition = "bottom" | "right"
+export type KpiLineCardTone = "default" | "success" | "warning" | "danger" | "info"
+export type KpiLineCardTrend = "up" | "down" | "neutral"
+export type KpiLineCardValue = number | string | null | undefined
+export type KpiLineCardValueFormatter = (value: number | string) => number | string
+
+export interface KpiLineCardDataPoint extends Record<string, unknown> {
+  id?: number | string
+  label?: number | string
+  value?: KpiLineCardValue
+}
+
+export interface KpiLineCardProps {
+  chartLabel?: string
+  chartPosition?: KpiLineCardChartPosition
+  class?: HTMLAttributes["class"]
+  data?: KpiLineCardDataPoint[]
+  description?: string
+  emptyLabel?: string
+  loading?: boolean
+  showArea?: boolean
+  showPoints?: boolean
+  size?: KpiLineCardSize
+  summary?: string
+  title?: string
+  tone?: KpiLineCardTone
+  trend?: KpiLineCardTrend
+  trendLabel?: string
+  trendValue?: number | string | null
+  value?: KpiLineCardValue
+  valueFormatter?: KpiLineCardValueFormatter
+  xKey?: string
+  yKey?: string
+}
+
+interface NormalizedPoint {
+  id: string
+  label: string
+  value: number
+  x: number
+  y: number
+}
+
+const props = withDefaults(defineProps<KpiLineCardProps>(), {
+  chartPosition: "bottom",
+  data: () => [],
+  emptyLabel: "No data",
+  showArea: true,
+  showPoints: false,
+  size: "default",
+  tone: "default",
+  xKey: "label",
+  yKey: "value",
+})
+
+const slots = useSlots()
+
+const chartWidth = 240
+const chartHeight = 72
+const chartPadding = {
+  bottom: 8,
+  left: 6,
+  right: 6,
+  top: 8,
+}
+
+const isChartRight = computed(() => props.chartPosition === "right")
+
+const numberFormatter = computed(() =>
+  new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: 2,
+  }),
+)
+
+const sizeClasses = computed(() => {
+  if (props.size === "sm") {
+    return {
+      chart: "h-12",
+      chartBottom: "h-14",
+      description: "text-xs",
+      gap: "gap-2.5",
+      icon: "size-7",
+      root: "min-h-40 p-3",
+      title: "text-xs",
+      trend: "text-[11px]",
+      value: "text-xl",
+    }
+  }
+
+  if (props.size === "lg") {
+    return {
+      chart: "h-16",
+      chartBottom: "h-20",
+      description: "text-sm",
+      gap: "gap-4",
+      icon: "size-10",
+      root: "min-h-56 p-5",
+      title: "text-sm",
+      trend: "text-xs",
+      value: "text-3xl",
+    }
+  }
+
+  return {
+    chart: "h-14",
+    chartBottom: "h-16",
+    description: "text-sm",
+    gap: "gap-3",
+    icon: "size-8",
+    root: "min-h-48 p-4",
+    title: "text-sm",
+    trend: "text-xs",
+    value: "text-2xl",
+  }
+})
+
+const rootClass = computed(() =>
+  cn(
+    "relative flex min-w-0 flex-col rounded-lg border bg-card text-card-foreground shadow-xs transition-colors",
+    sizeClasses.value.root,
+    props.class,
+  ),
+)
+
+const contentClass = computed(() =>
+  cn(
+    "flex min-w-0 flex-1 flex-col",
+    sizeClasses.value.gap,
+    isChartRight.value && "sm:flex-row sm:items-stretch",
+  ),
+)
+
+const mainClass = computed(() =>
+  cn(
+    "flex min-w-0 flex-col",
+    sizeClasses.value.gap,
+    isChartRight.value && "sm:min-w-0 sm:flex-1 sm:justify-between",
+  ),
+)
+
+const chartSlotClass = computed(() =>
+  cn(
+    "min-w-0",
+    isChartRight.value
+      ? [sizeClasses.value.chart, "sm:h-auto sm:w-2/5 sm:min-w-32 sm:self-stretch"]
+      : [sizeClasses.value.chartBottom, "mt-auto"],
+  ),
+)
+
+const chartClass = computed(() =>
+  cn(
+    "block h-full w-full overflow-visible",
+    toneTextClass(effectiveTrendTone.value),
+  ),
+)
+
+const hasHeader = computed(() =>
+  Boolean(slots.icon || slots.title || props.title),
+)
+
+const rawPoints = computed(() =>
+  props.data
+    .map((point, index) => {
+      const rawValue = getDataValue(point, props.yKey)
+      const value = toFiniteNumber(rawValue)
+
+      if (value === null) return null
+
+      const rawLabel = getDataValue(point, props.xKey)
+      const label = rawLabel === undefined || rawLabel === null || rawLabel === ""
+        ? `Item ${index + 1}`
+        : String(rawLabel)
+      const id = point.id === undefined || point.id === null
+        ? `${index}-${label}`
+        : String(point.id)
+
+      return {
+        id,
+        label,
+        value,
+      }
+    })
+    .filter((point): point is Omit<NormalizedPoint, "x" | "y"> => point !== null),
+)
+
+const domain = computed(() => {
+  const values = rawPoints.value.map((point) => point.value)
+
+  if (!values.length) {
+    return {
+      max: 1,
+      min: 0,
+    }
+  }
+
+  let min = Math.min(...values)
+  let max = Math.max(...values)
+
+  if (min === max) {
+    const delta = min === 0 ? 1 : Math.abs(min * 0.1)
+    min -= delta
+    max += delta
+  }
+
+  return {
+    max,
+    min,
+  }
+})
+
+const chartPoints = computed<NormalizedPoint[]>(() => {
+  const points = rawPoints.value
+  const plotWidth = chartWidth - chartPadding.left - chartPadding.right
+  const plotHeight = chartHeight - chartPadding.top - chartPadding.bottom
+  const denominator = Math.max(1, points.length - 1)
+
+  return points.map((point, index) => {
+    const valueRange = domain.value.max - domain.value.min || 1
+    const x = chartPadding.left + ((index / denominator) * plotWidth)
+    const y = chartPadding.top + (((domain.value.max - point.value) / valueRange) * plotHeight)
+
+    return {
+      ...point,
+      x,
+      y,
+    }
+  })
+})
+
+const hasChart = computed(() => chartPoints.value.length > 1)
+
+const linePath = computed(() => buildSmoothLinePath(chartPoints.value))
+
+const areaPath = computed(() => {
+  const points = chartPoints.value
+
+  if (!props.showArea || !linePath.value || points.length < 2) return ""
+
+  const first = points[0]
+  const last = points[points.length - 1]
+  const baseline = chartHeight - chartPadding.bottom
+
+  if (!first || !last) return ""
+
+  return `${linePath.value} L ${roundCoordinate(last.x)} ${baseline} L ${roundCoordinate(first.x)} ${baseline} Z`
+})
+
+const inferredTrend = computed<KpiLineCardTrend>(() => {
+  const points = rawPoints.value
+  const first = points[0]
+  const last = points[points.length - 1]
+
+  if (!first || !last) return "neutral"
+  if (last.value > first.value) return "up"
+  if (last.value < first.value) return "down"
+
+  return "neutral"
+})
+
+const trendDirection = computed<KpiLineCardTrend>(() => props.trend ?? inferredTrend.value)
+
+const trendIcon = computed<Component>(() => {
+  if (trendDirection.value === "up") return ArrowUpRightIcon
+  if (trendDirection.value === "down") return ArrowDownRightIcon
+
+  return MinusIcon
+})
+
+const hasTrendValue = computed(() => hasDisplayValue(props.trendValue))
+
+const hasTrend = computed(() =>
+  Boolean(props.trend || props.trendLabel || hasTrendValue.value),
+)
+
+const hasFooter = computed(() =>
+  Boolean(slots.footer || props.summary || hasTrend.value),
+)
+
+const formattedValue = computed(() => {
+  const value = props.value
+
+  if (!hasDisplayValue(value)) return props.emptyLabel
+  if (props.valueFormatter) return props.valueFormatter(value)
+  if (typeof value === "number") return numberFormatter.value.format(value)
+
+  return value
+})
+
+const formattedTrendValue = computed(() => {
+  const value = props.trendValue
+
+  if (!hasDisplayValue(value)) return ""
+  if (typeof value === "number") return numberFormatter.value.format(value)
+
+  return value
+})
+
+const trendAccessibleLabel = computed(() =>
+  [formattedTrendValue.value, props.trendLabel]
+    .filter((part) => Boolean(part))
+    .join(" "),
+)
+
+const chartAccessibleLabel = computed(() => {
+  if (props.chartLabel) return props.chartLabel
+
+  const title = props.title ?? "KPI"
+  const first = rawPoints.value[0]
+  const last = rawPoints.value[rawPoints.value.length - 1]
+
+  if (!first || !last) return `${title} trend`
+
+  return `${title} trend from ${formatNumber(first.value)} to ${formatNumber(last.value)}`
+})
+
+const effectiveTrendTone = computed<KpiLineCardTone>(() => {
+  if (props.tone !== "default") return props.tone
+  if (trendDirection.value === "up") return "success"
+  if (trendDirection.value === "down") return "danger"
+
+  return "default"
+})
+
+const iconClass = computed(() =>
+  cn(
+    "inline-flex shrink-0 items-center justify-center rounded-md border bg-muted/60",
+    sizeClasses.value.icon,
+    toneTextClass(props.tone),
+  ),
+)
+
+const trendClass = computed(() =>
+  cn(
+    "inline-flex min-h-6 w-fit max-w-full items-center gap-1 rounded-md border px-1.5 font-medium leading-none tabular-nums",
+    sizeClasses.value.trend,
+    tonePillClass(effectiveTrendTone.value),
+  ),
+)
+
+function getDataValue(data: KpiLineCardDataPoint, key: string) {
+  return (data as Record<string, unknown>)[key]
+}
+
+function toFiniteNumber(value: unknown) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : null
+  }
+
+  if (typeof value === "string" && value.trim().length > 0) {
+    const parsed = Number(value)
+
+    return Number.isFinite(parsed) ? parsed : null
+  }
+
+  return null
+}
+
+function hasDisplayValue(value: KpiLineCardValue): value is number | string {
+  return value !== null && value !== undefined && value !== ""
+}
+
+function buildSmoothLinePath(points: NormalizedPoint[]) {
+  if (points.length < 2) return ""
+  if (points.length < 3) return buildLinearLinePath(points)
+
+  const commands = [`M ${roundCoordinate(points[0].x)} ${roundCoordinate(points[0].y)}`]
+
+  for (let index = 0; index < points.length - 1; index += 1) {
+    const previous = points[index - 1] ?? points[index]
+    const current = points[index]
+    const next = points[index + 1]
+    const following = points[index + 2] ?? next
+
+    if (!previous || !current || !next || !following) continue
+
+    const controlPoint1X = current.x + ((next.x - previous.x) / 6)
+    const controlPoint1Y = current.y + ((next.y - previous.y) / 6)
+    const controlPoint2X = next.x - ((following.x - current.x) / 6)
+    const controlPoint2Y = next.y - ((following.y - current.y) / 6)
+
+    commands.push([
+      "C",
+      roundCoordinate(controlPoint1X),
+      roundCoordinate(controlPoint1Y),
+      roundCoordinate(controlPoint2X),
+      roundCoordinate(controlPoint2Y),
+      roundCoordinate(next.x),
+      roundCoordinate(next.y),
+    ].join(" "))
+  }
+
+  return commands.join(" ")
+}
+
+function buildLinearLinePath(points: NormalizedPoint[]) {
+  return points
+    .map((point, index) => `${index === 0 ? "M" : "L"} ${roundCoordinate(point.x)} ${roundCoordinate(point.y)}`)
+    .join(" ")
+}
+
+function roundCoordinate(value: number) {
+  return Math.round(value * 100) / 100
+}
+
+function formatNumber(value: number) {
+  return numberFormatter.value.format(value)
+}
+
+function toneTextClass(tone: KpiLineCardTone) {
+  const classes: Record<KpiLineCardTone, string> = {
+    danger: "text-red-600 dark:text-red-400",
+    default: "text-muted-foreground",
+    info: "text-sky-600 dark:text-sky-400",
+    success: "text-emerald-600 dark:text-emerald-400",
+    warning: "text-amber-600 dark:text-amber-400",
+  }
+
+  return classes[tone]
+}
+
+function tonePillClass(tone: KpiLineCardTone) {
+  const classes: Record<KpiLineCardTone, string> = {
+    danger: "border-red-500/20 bg-red-500/10 text-red-700 dark:text-red-300",
+    default: "border-border bg-muted/50 text-muted-foreground",
+    info: "border-sky-500/20 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+    success: "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+    warning: "border-amber-500/25 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  }
+
+  return classes[tone]
+}
+</script>
+
+<template>
+  <article
+    data-slot="kpi-line-card"
+    :data-size="props.size"
+    :data-tone="props.tone"
+    :data-chart-position="props.chartPosition"
+    :aria-busy="props.loading ? 'true' : undefined"
+    :class="rootClass"
+  >
+    <div
+      v-if="props.loading"
+      data-slot="kpi-line-card-loading"
+      :class="contentClass"
+    >
+      <div :class="mainClass">
+        <div class="flex min-w-0 items-start justify-between gap-3">
+          <div class="min-w-0 flex-1">
+            <div class="h-3.5 w-24 rounded-sm bg-muted" />
+            <div class="mt-2 h-8 w-32 rounded-sm bg-muted" />
+          </div>
+          <div :class="cn('rounded-md border bg-muted/60', sizeClasses.icon)" />
+        </div>
+        <div class="h-3 w-40 max-w-full rounded-sm bg-muted" />
+        <div class="h-6 w-36 max-w-full rounded-md bg-muted" />
+      </div>
+      <div :class="cn('rounded-md bg-muted', chartSlotClass)" />
+    </div>
+
+    <template v-else>
+      <div
+        data-slot="kpi-line-card-content"
+        :class="contentClass"
+      >
+        <div
+          data-slot="kpi-line-card-main"
+          :class="mainClass"
+        >
+          <div
+            v-if="hasHeader"
+            data-slot="kpi-line-card-header"
+            class="flex min-w-0 items-start justify-between gap-3"
+          >
+            <div class="min-w-0">
+              <p
+                v-if="$slots.title || props.title"
+                data-slot="kpi-line-card-title"
+                :class="cn('truncate font-medium text-muted-foreground', sizeClasses.title)"
+              >
+                <slot name="title">{{ props.title }}</slot>
+              </p>
+              <div
+                data-slot="kpi-line-card-value"
+                :class="cn(($slots.title || props.title) ? 'mt-2' : '', 'truncate font-semibold leading-none tabular-nums', sizeClasses.value)"
+              >
+                <slot name="value">{{ formattedValue }}</slot>
+              </div>
+            </div>
+
+            <div
+              v-if="$slots.icon"
+              data-slot="kpi-line-card-icon"
+              :class="iconClass"
+            >
+              <slot name="icon" />
+            </div>
+          </div>
+
+          <div
+            v-else
+            data-slot="kpi-line-card-value"
+            :class="cn('truncate font-semibold leading-none tabular-nums', sizeClasses.value)"
+          >
+            <slot name="value">{{ formattedValue }}</slot>
+          </div>
+
+          <p
+            v-if="$slots.description || props.description"
+            data-slot="kpi-line-card-description"
+            :class="cn('leading-relaxed text-muted-foreground', sizeClasses.description)"
+          >
+            <slot name="description">{{ props.description }}</slot>
+          </p>
+
+          <div
+            v-if="hasFooter"
+            data-slot="kpi-line-card-footer"
+            class="flex min-w-0 flex-wrap items-center gap-2"
+          >
+            <slot name="footer">
+              <div
+                v-if="hasTrend"
+                data-slot="kpi-line-card-trend"
+                :aria-label="trendAccessibleLabel || undefined"
+                :class="trendClass"
+              >
+                <component
+                  :is="trendIcon"
+                  class="size-3.5 shrink-0"
+                  aria-hidden="true"
+                />
+                <span v-if="hasTrendValue">{{ formattedTrendValue }}</span>
+                <span v-if="props.trendLabel" class="text-current/75">{{ props.trendLabel }}</span>
+              </div>
+              <p
+                v-if="props.summary"
+                data-slot="kpi-line-card-summary"
+                class="min-w-0 truncate text-xs text-muted-foreground"
+              >
+                {{ props.summary }}
+              </p>
+            </slot>
+          </div>
+        </div>
+
+        <div
+          data-slot="kpi-line-card-chart"
+          :class="chartSlotClass"
+        >
+          <svg
+            v-if="hasChart"
+            role="img"
+            :aria-label="chartAccessibleLabel"
+            :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
+            preserveAspectRatio="none"
+            :class="chartClass"
+          >
+            <line
+              x1="0"
+              :y1="chartPadding.top"
+              :x2="chartWidth"
+              :y2="chartPadding.top"
+              stroke="currentColor"
+              stroke-width="1"
+              opacity="0.08"
+            />
+            <line
+              x1="0"
+              :y1="chartHeight - chartPadding.bottom"
+              :x2="chartWidth"
+              :y2="chartHeight - chartPadding.bottom"
+              stroke="currentColor"
+              stroke-width="1"
+              opacity="0.08"
+            />
+            <path
+              v-if="areaPath"
+              :d="areaPath"
+              fill="currentColor"
+              opacity="0.1"
+            />
+            <path
+              :d="linePath"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="3.5"
+              vector-effect="non-scaling-stroke"
+            />
+            <circle
+              v-for="point in props.showPoints ? chartPoints : []"
+              :key="point.id"
+              :cx="point.x"
+              :cy="point.y"
+              r="3"
+              fill="currentColor"
+            >
+              <title>{{ point.label }}: {{ formatNumber(point.value) }}</title>
+            </circle>
+          </svg>
+          <div
+            v-else
+            data-slot="kpi-line-card-empty-chart"
+            class="flex h-full items-center rounded-md bg-muted/40 px-3 text-xs text-muted-foreground"
+          >
+            {{ props.emptyLabel }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </article>
+</template>

package/src/components/ui/kpi-line-card/index.ts

@@ -0,0 +1,11 @@
+export { default as KpiLineCard } from "./KpiLineCard.vue"
+export type {
+  KpiLineCardChartPosition,
+  KpiLineCardDataPoint,
+  KpiLineCardProps,
+  KpiLineCardSize,
+  KpiLineCardTone,
+  KpiLineCardTrend,
+  KpiLineCardValue,
+  KpiLineCardValueFormatter,
+} from "./KpiLineCard.vue"