@slexn/codecenter-ui 1.0.0

package/src/components/ui/gauge/Gauge.vue

@@ -0,0 +1,725 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { CSSProperties, HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+export type GaugeType = "gauge" | "meter"
+export type GaugeSize = "sm" | "default" | "lg"
+export type GaugeValue = number | string | null | undefined
+
+export interface GaugeSegment {
+  color?: string
+  label?: string
+  max?: number
+  min?: number
+}
+
+export interface GaugeValueFormatterContext {
+  markerValue?: number | null
+  max: number
+  min: number
+  percent: number
+  type: GaugeType
+}
+
+export type GaugeValueFormatter = (
+  value: number,
+  context?: GaugeValueFormatterContext,
+) => number | string
+
+interface GaugeProps {
+  class?: HTMLAttributes["class"]
+  color?: string
+  description?: string
+  emptyLabel?: string
+  framed?: boolean
+  label?: string
+  markerColor?: string
+  markerLabel?: string
+  markerValue?: GaugeValue
+  max?: number
+  maxLabel?: string
+  min?: number
+  minLabel?: string
+  segments?: GaugeSegment[]
+  showLabels?: boolean
+  showMarker?: boolean
+  showNeedle?: boolean
+  showValue?: boolean
+  size?: GaugeSize
+  summary?: string
+  title?: string
+  trackColor?: string
+  type?: GaugeType
+  unit?: string
+  value?: GaugeValue
+  valueFormatter?: GaugeValueFormatter
+}
+
+interface NormalizedGaugeSegment {
+  color: string
+  label?: string
+  max: number
+  min: number
+}
+
+interface RadialPoint {
+  x: number
+  y: number
+}
+
+const props = withDefaults(defineProps<GaugeProps>(), {
+  color: "oklch(0.3 0.11 255)",
+  emptyLabel: "No gauge value.",
+  framed: true,
+  markerColor: "oklch(0.58 0 0)",
+  max: 100,
+  min: 0,
+  showLabels: true,
+  showMarker: true,
+  showNeedle: false,
+  showValue: true,
+  size: "default",
+  trackColor: "oklch(0.88 0 0)",
+  type: "gauge",
+})
+
+const gaugeCenter = {
+  x: 130,
+  y: 128,
+}
+const gaugeRadius = 100
+const radialViewBox = "0 0 286 162"
+
+const numberFormatter = computed(() =>
+  new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: 2,
+  }),
+)
+
+const sizeClasses = computed(() => {
+  if (props.size === "sm") {
+    return {
+      body: "gap-3 p-3",
+      description: "text-xs",
+      header: "gap-2 px-3 py-2.5",
+      labelClass: "text-[11px]",
+      markerFontSize: 11,
+      meter: "h-2",
+      radial: "max-w-[15rem]",
+      scaleFontSize: 12,
+      strokeWidth: 18,
+      summary: "text-xs",
+      title: "text-xs",
+      valueFontSize: 28,
+    }
+  }
+
+  if (props.size === "lg") {
+    return {
+      body: "gap-5 p-5",
+      description: "text-sm",
+      header: "gap-3 px-5 py-4",
+      labelClass: "text-sm",
+      markerFontSize: 13,
+      meter: "h-3",
+      radial: "max-w-[22rem]",
+      scaleFontSize: 13,
+      strokeWidth: 24,
+      summary: "text-sm",
+      title: "text-sm",
+      valueFontSize: 40,
+    }
+  }
+
+  return {
+    body: "gap-4 p-4",
+    description: "text-sm",
+    header: "gap-2.5 px-4 py-3",
+    labelClass: "text-xs",
+    markerFontSize: 12,
+    meter: "h-2.5",
+    radial: "max-w-[18rem]",
+    scaleFontSize: 12,
+    strokeWidth: 22,
+    summary: "text-xs",
+    title: "text-[13px]",
+    valueFontSize: 34,
+  }
+})
+
+const rootClass = computed(() =>
+  cn(
+    "text-card-foreground",
+    props.framed
+      ? "overflow-hidden rounded-lg border bg-card shadow-xs"
+      : "w-full",
+    props.class,
+  ),
+)
+
+const hasHeader = computed(() =>
+  Boolean(props.title || props.description || props.summary),
+)
+
+const domain = computed(() => {
+  let min = normalizeBoundary(props.min, 0)
+  let max = normalizeBoundary(props.max, 100)
+
+  if (min > max) {
+    const nextMin = max
+    max = min
+    min = nextMin
+  }
+
+  if (min === max) {
+    max = min + 1
+  }
+
+  return {
+    max,
+    min,
+  }
+})
+
+const numericValue = computed(() => toFiniteNumber(props.value))
+const numericMarkerValue = computed(() => toFiniteNumber(props.markerValue))
+
+const clampedValue = computed(() => {
+  const value = numericValue.value
+  const { max, min } = domain.value
+
+  if (value === null) return null
+
+  return Math.min(max, Math.max(min, value))
+})
+
+const clampedMarkerValue = computed(() => {
+  const value = numericMarkerValue.value
+  const { max, min } = domain.value
+
+  if (value === null) return null
+
+  return Math.min(max, Math.max(min, value))
+})
+
+const percent = computed(() => {
+  const value = clampedValue.value
+
+  if (value === null) return 0
+
+  return valueToPercent(value)
+})
+
+const markerPercent = computed(() => {
+  const value = clampedMarkerValue.value
+
+  if (value === null) return null
+
+  return valueToPercent(value)
+})
+
+const normalizedSegments = computed<NormalizedGaugeSegment[]>(() => {
+  const segments = props.segments ?? []
+  const { max, min } = domain.value
+  const colors = [
+    "oklch(0.63 0.16 150)",
+    "oklch(0.74 0.17 80)",
+    "oklch(0.62 0.2 28)",
+  ]
+
+  return segments
+    .map((segment, index) => {
+      const rawMin = segment.min ?? (index === 0
+        ? min
+        : segments[index - 1]?.max ?? min)
+      const rawMax = segment.max ?? max
+      const segmentMin = Math.min(max, Math.max(min, rawMin))
+      const segmentMax = Math.min(max, Math.max(min, rawMax))
+      const normalizedMin = Math.min(segmentMin, segmentMax)
+      const normalizedMax = Math.max(segmentMin, segmentMax)
+
+      return {
+        color: segment.color ?? colors[index % colors.length] ?? props.color,
+        label: segment.label,
+        max: normalizedMax,
+        min: normalizedMin,
+      }
+    })
+    .filter((segment) => segment.max > segment.min)
+})
+
+const activeColor = computed(() => {
+  const value = clampedValue.value
+
+  if (value !== null) {
+    const segment = normalizedSegments.value.find((item) =>
+      value >= item.min && value <= item.max,
+    )
+
+    if (segment) return segment.color
+  }
+
+  return props.color
+})
+
+const formattedValue = computed(() => {
+  const value = clampedValue.value
+
+  if (value === null) return ""
+
+  return formatGaugeValue(value)
+})
+
+const minLabel = computed(() =>
+  props.minLabel ?? formatGaugeValue(domain.value.min),
+)
+const maxLabel = computed(() =>
+  props.maxLabel ?? formatGaugeValue(domain.value.max),
+)
+
+const markerLabel = computed(() => {
+  const value = clampedMarkerValue.value
+
+  if (value === null) return ""
+
+  return props.markerLabel ?? formatGaugeValue(value)
+})
+
+const gaugeTrackPath = computed(() => buildArcPath(0, 1))
+const gaugeValuePath = computed(() => buildArcPath(0, percent.value))
+
+const radialMarker = computed(() => {
+  if (!props.showMarker || markerPercent.value === null) return null
+
+  const marker = markerPercent.value
+  const strokeOffset = sizeClasses.value.strokeWidth / 2
+  const inner = radialPoint(marker, gaugeRadius - strokeOffset - 5)
+  const outer = radialPoint(marker, gaugeRadius + strokeOffset + 9)
+  const label = radialPoint(marker, gaugeRadius + strokeOffset + 31)
+  const labelX = clampCoordinate(label.x, 20, 266)
+  const labelY = clampCoordinate(label.y, 16, 136)
+
+  return {
+    anchor: "middle",
+    labelX,
+    labelY,
+    x1: inner.x,
+    x2: outer.x,
+    y1: inner.y,
+    y2: outer.y,
+  }
+})
+
+const needle = computed(() => {
+  const point = radialPoint(percent.value, gaugeRadius - 30)
+
+  return {
+    x1: gaugeCenter.x,
+    x2: point.x,
+    y1: gaugeCenter.y,
+    y2: point.y,
+  }
+})
+
+const meterFillStyle = computed<CSSProperties>(() => ({
+  backgroundColor: activeColor.value,
+  width: `${roundPercent(percent.value)}%`,
+}))
+
+const meterTrackStyle = computed<CSSProperties>(() => ({
+  backgroundColor: props.trackColor,
+}))
+
+const meterMarkerStyle = computed<CSSProperties>(() => ({
+  backgroundColor: props.markerColor,
+  left: markerPercent.value === null ? "0%" : `${roundPercent(markerPercent.value)}%`,
+}))
+
+const valueTextStyle = computed<CSSProperties>(() => ({
+  fontSize: `${sizeClasses.value.valueFontSize}px`,
+  fontWeight: "400",
+  letterSpacing: "0",
+}))
+
+const labelTextStyle = computed<CSSProperties>(() => ({
+  fontSize: `${sizeClasses.value.scaleFontSize + 4}px`,
+  letterSpacing: "0",
+}))
+
+const scaleTextStyle = computed<CSSProperties>(() => ({
+  fontSize: `${sizeClasses.value.scaleFontSize}px`,
+  letterSpacing: "0",
+}))
+
+const scaleLabelPosition = computed(() => ({
+  maxX: roundCoordinate(radialPoint(1, gaugeRadius).x),
+  minX: roundCoordinate(radialPoint(0, gaugeRadius).x),
+  y: 150,
+}))
+
+const markerTextStyle = computed<CSSProperties>(() => ({
+  fontSize: `${sizeClasses.value.markerFontSize}px`,
+  fontWeight: "600",
+  letterSpacing: "0",
+}))
+
+const ariaValueText = computed(() =>
+  formattedValue.value || props.emptyLabel,
+)
+
+function normalizeBoundary(value: number | undefined, fallback: number) {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback
+}
+
+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 valueToPercent(value: number) {
+  const { max, min } = domain.value
+
+  return Math.min(1, Math.max(0, (value - min) / (max - min)))
+}
+
+function formatGaugeValue(value: number) {
+  const valuePercent = valueToPercent(value)
+  const formatted = props.valueFormatter?.(value, {
+    markerValue: clampedMarkerValue.value,
+    max: domain.value.max,
+    min: domain.value.min,
+    percent: valuePercent,
+    type: props.type,
+  })
+
+  return formatted === undefined
+    ? `${numberFormatter.value.format(value)}${props.unit ?? ""}`
+    : String(formatted)
+}
+
+function buildArcPath(startPercent: number, endPercent: number) {
+  const start = Math.min(1, Math.max(0, startPercent))
+  const end = Math.min(1, Math.max(0, endPercent))
+
+  if (end <= start) return ""
+
+  const startPoint = radialPoint(start, gaugeRadius)
+  const endPoint = radialPoint(end, gaugeRadius)
+
+  return [
+    `M ${roundCoordinate(startPoint.x)} ${roundCoordinate(startPoint.y)}`,
+    `A ${gaugeRadius} ${gaugeRadius} 0 0 1 ${roundCoordinate(endPoint.x)} ${roundCoordinate(endPoint.y)}`,
+  ].join(" ")
+}
+
+function radialPoint(pointPercent: number, radius: number): RadialPoint {
+  const angle = Math.PI - (Math.PI * pointPercent)
+
+  return {
+    x: gaugeCenter.x + (Math.cos(angle) * radius),
+    y: gaugeCenter.y - (Math.sin(angle) * radius),
+  }
+}
+
+function roundCoordinate(value: number) {
+  return Math.round(value * 100) / 100
+}
+
+function roundPercent(value: number) {
+  return Math.round(value * 10000) / 100
+}
+
+function clampCoordinate(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+</script>
+
+<template>
+  <article
+    data-slot="gauge"
+    :data-size="props.size"
+    :data-type="props.type"
+    :class="rootClass"
+  >
+    <header
+      v-if="hasHeader"
+      data-slot="gauge-header"
+      :class="cn('flex flex-wrap items-start justify-between border-b', sizeClasses.header)"
+    >
+      <div v-if="props.title || props.description" class="flex min-w-0 flex-col gap-1">
+        <h3
+          v-if="props.title"
+          data-slot="gauge-title"
+          :class="cn('truncate font-semibold leading-tight tracking-normal', sizeClasses.title)"
+        >
+          {{ props.title }}
+        </h3>
+        <p
+          v-if="props.description"
+          data-slot="gauge-description"
+          :class="cn('text-muted-foreground', sizeClasses.description)"
+        >
+          {{ props.description }}
+        </p>
+      </div>
+
+      <p
+        v-if="props.summary"
+        data-slot="gauge-summary"
+        :class="cn('shrink-0 font-medium text-muted-foreground', sizeClasses.summary)"
+      >
+        {{ props.summary }}
+      </p>
+    </header>
+
+    <div
+      data-slot="gauge-body"
+      :class="cn('flex min-w-0 flex-col', sizeClasses.body)"
+    >
+      <div
+        v-if="clampedValue !== null"
+        data-slot="gauge-visual"
+        class="min-w-0"
+        role="meter"
+        :aria-label="props.title ?? props.label ?? 'Gauge'"
+        :aria-valuemax="domain.max"
+        :aria-valuemin="domain.min"
+        :aria-valuenow="clampedValue"
+        :aria-valuetext="ariaValueText"
+      >
+        <div
+          v-if="props.type === 'gauge'"
+          data-slot="gauge-radial"
+          :class="cn('relative mx-auto w-full', sizeClasses.radial)"
+        >
+          <svg
+            data-slot="gauge-svg"
+            class="block h-auto w-full overflow-visible"
+            role="presentation"
+            :viewBox="radialViewBox"
+          >
+            <path
+              data-slot="gauge-track"
+              :d="gaugeTrackPath"
+              fill="none"
+              :stroke="props.trackColor"
+              stroke-linecap="round"
+              :stroke-width="sizeClasses.strokeWidth"
+            />
+
+            <path
+              data-slot="gauge-value-arc"
+              :d="gaugeValuePath"
+              fill="none"
+              :stroke="activeColor"
+              stroke-linecap="round"
+              :stroke-width="sizeClasses.strokeWidth"
+            />
+
+            <g
+              v-if="radialMarker"
+              data-slot="gauge-marker"
+              class="text-muted-foreground"
+            >
+              <line
+                data-slot="gauge-marker-line"
+                :x1="radialMarker.x1"
+                :x2="radialMarker.x2"
+                :y1="radialMarker.y1"
+                :y2="radialMarker.y2"
+                :stroke="props.markerColor"
+                stroke-linecap="square"
+                stroke-width="4"
+              />
+              <text
+                v-if="markerLabel"
+                data-slot="gauge-marker-label"
+                class="fill-current"
+                dominant-baseline="middle"
+                :style="markerTextStyle"
+                :text-anchor="radialMarker.anchor"
+                :x="radialMarker.labelX"
+                :y="radialMarker.labelY"
+              >
+                {{ markerLabel }}
+              </text>
+            </g>
+
+            <g
+              v-if="props.showNeedle"
+              data-slot="gauge-needle"
+            >
+              <line
+                :x1="needle.x1"
+                :x2="needle.x2"
+                :y1="needle.y1"
+                :y2="needle.y2"
+                :stroke="activeColor"
+                stroke-linecap="round"
+                stroke-width="3"
+              />
+              <circle
+                :cx="gaugeCenter.x"
+                :cy="gaugeCenter.y"
+                fill="var(--card)"
+                :stroke="activeColor"
+                stroke-width="3"
+                r="6"
+              />
+            </g>
+
+            <text
+              v-if="props.showValue"
+              data-slot="gauge-value"
+              class="fill-current text-foreground"
+              dominant-baseline="middle"
+              text-anchor="middle"
+              :style="valueTextStyle"
+              :x="gaugeCenter.x"
+              y="90"
+            >
+              {{ formattedValue }}
+            </text>
+            <text
+              v-if="props.label"
+              data-slot="gauge-label"
+              class="fill-current text-muted-foreground"
+              dominant-baseline="middle"
+              text-anchor="middle"
+              :style="labelTextStyle"
+              :x="gaugeCenter.x"
+              y="118"
+            >
+              {{ props.label }}
+            </text>
+
+            <g
+              v-if="props.showLabels"
+              data-slot="gauge-scale"
+              class="fill-current text-muted-foreground"
+              :style="scaleTextStyle"
+            >
+              <text
+                data-slot="gauge-min-label"
+                dominant-baseline="middle"
+                text-anchor="middle"
+                :x="scaleLabelPosition.minX"
+                :y="scaleLabelPosition.y"
+              >
+                {{ minLabel }}
+              </text>
+              <text
+                data-slot="gauge-max-label"
+                dominant-baseline="middle"
+                text-anchor="middle"
+                :x="scaleLabelPosition.maxX"
+                :y="scaleLabelPosition.y"
+              >
+                {{ maxLabel }}
+              </text>
+            </g>
+          </svg>
+        </div>
+
+        <div
+          v-else
+          data-slot="gauge-meter"
+          class="flex min-w-0 flex-col gap-3"
+        >
+          <div class="flex min-w-0 items-end justify-between gap-4">
+            <div class="min-w-0">
+              <p
+                v-if="props.label"
+                data-slot="gauge-label"
+                :class="cn('truncate leading-none text-muted-foreground', sizeClasses.labelClass)"
+              >
+                {{ props.label }}
+              </p>
+              <p
+                v-if="props.showValue"
+                data-slot="gauge-value"
+                class="mt-1 font-semibold leading-none tracking-normal text-foreground"
+              >
+                {{ formattedValue }}
+              </p>
+            </div>
+            <p
+              data-slot="gauge-percent"
+              class="shrink-0 text-xs font-medium text-muted-foreground"
+            >
+              {{ Math.round(percent * 100) }}%
+            </p>
+          </div>
+
+          <div
+            data-slot="gauge-meter-track"
+            :class="cn('relative rounded-full', sizeClasses.meter)"
+            :style="meterTrackStyle"
+          >
+            <div
+              data-slot="gauge-meter-fill"
+              class="h-full rounded-full transition-[width]"
+              :style="meterFillStyle"
+            />
+            <span
+              v-if="props.showMarker && markerPercent !== null"
+              data-slot="gauge-meter-marker"
+              class="absolute top-1/2 h-[calc(100%_+_0.5rem)] w-1 -translate-x-1/2 -translate-y-1/2 rounded-full"
+              :style="meterMarkerStyle"
+            />
+          </div>
+
+          <div
+            v-if="props.showLabels"
+            data-slot="gauge-scale"
+            :class="cn('flex items-center justify-between text-muted-foreground', sizeClasses.labelClass)"
+          >
+            <span>{{ minLabel }}</span>
+            <span v-if="markerLabel">{{ markerLabel }}</span>
+            <span>{{ maxLabel }}</span>
+          </div>
+        </div>
+      </div>
+
+      <p
+        v-else
+        data-slot="gauge-empty"
+        :class="cn('text-muted-foreground', sizeClasses.labelClass)"
+      >
+        {{ props.emptyLabel }}
+      </p>
+
+      <div
+        v-if="normalizedSegments.length"
+        data-slot="gauge-legend"
+        :class="cn('flex flex-wrap items-center justify-end gap-2 text-muted-foreground', sizeClasses.labelClass)"
+      >
+        <span
+          v-for="segment in normalizedSegments"
+          :key="`legend-${segment.min}-${segment.max}`"
+          data-slot="gauge-legend-item"
+          class="inline-flex min-w-0 items-center gap-1.5"
+        >
+          <span
+            data-slot="gauge-legend-swatch"
+            class="size-2 shrink-0 rounded-full"
+            :style="{ backgroundColor: segment.color }"
+          />
+          <span class="truncate">
+            {{ segment.label ?? `${numberFormatter.format(segment.min)}-${numberFormatter.format(segment.max)}` }}
+          </span>
+        </span>
+      </div>
+    </div>
+  </article>
+</template>