@slexn/codecenter-ui 1.0.0

package/src/components/ui/chart/Chart.vue

@@ -0,0 +1,1042 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { CSSProperties, HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+export type ChartType = "bar" | "line"
+export type ChartSize = "sm" | "default" | "lg"
+export type ChartValue = number | string | null | undefined
+export type ChartLineCurve = "linear" | "smooth"
+export type ChartLegendPosition = "bottom" | "top"
+
+export interface ChartDataPoint extends Record<string, unknown> {
+  id?: number | string
+  label?: number | string
+  value?: ChartValue
+  values?: Record<string, ChartValue>
+}
+
+export interface ChartSeries {
+  areaOpacity?: number
+  color?: string
+  curve?: ChartLineCurve
+  key: string
+  label?: string
+  showArea?: boolean
+  showPoints?: boolean
+  type?: ChartType
+}
+
+export interface ChartValueFormatterContext {
+  data: ChartDataPoint
+  index: number
+  key: string
+  label: string
+  series: ChartSeries
+}
+
+export type ChartValueFormatter = (
+  value: number,
+  context?: ChartValueFormatterContext,
+) => number | string
+
+export interface ChartSelectPayload extends ChartValueFormatterContext {
+  value: number
+}
+
+interface ChartProps {
+  areaOpacity?: number
+  class?: HTMLAttributes["class"]
+  data?: ChartDataPoint[]
+  description?: string
+  emptyLabel?: string
+  gridLineCount?: number
+  height?: number
+  includeZero?: boolean
+  legendLabel?: string
+  legendPosition?: ChartLegendPosition
+  lineCurve?: ChartLineCurve
+  maxXLabels?: number
+  modelValue?: string
+  selectable?: boolean
+  series?: ChartSeries[]
+  showArea?: boolean
+  showGrid?: boolean
+  showLegend?: boolean
+  showPoints?: boolean
+  showXAxis?: boolean
+  showYAxis?: boolean
+  size?: ChartSize
+  summary?: string
+  title?: string
+  type?: ChartType
+  valueFormatter?: ChartValueFormatter
+  xKey?: string
+  yMax?: number
+  yMin?: number
+}
+
+interface NormalizedChartPoint {
+  data: ChartDataPoint
+  id: string
+  index: number
+  label: string
+}
+
+interface NormalizedChartSeries extends ChartSeries {
+  areaOpacity: number
+  color: string
+  curve: ChartLineCurve
+  label: string
+  showArea: boolean
+  showPoints: boolean
+  type: ChartType
+}
+
+interface ChartSeriesValue {
+  data: ChartDataPoint
+  id: string
+  index: number
+  key: string
+  label: string
+  series: NormalizedChartSeries
+  value: number | null
+}
+
+interface ChartNode extends ChartSelectPayload {
+  color: string
+  id: string
+  x: number
+  y: number
+}
+
+interface BarNode extends ChartNode {
+  height: number
+  width: number
+}
+
+interface LinePath {
+  color: string
+  d: string
+  key: string
+  label: string
+}
+
+interface LineAreaPath extends LinePath {
+  opacity: number
+}
+
+const props = withDefaults(defineProps<ChartProps>(), {
+  areaOpacity: 0.16,
+  data: () => [],
+  emptyLabel: "No chart data.",
+  gridLineCount: undefined,
+  includeZero: true,
+  legendLabel: "Chart series",
+  legendPosition: "bottom",
+  lineCurve: "linear",
+  maxXLabels: undefined,
+  selectable: true,
+  showArea: false,
+  showGrid: true,
+  showLegend: true,
+  showPoints: true,
+  showXAxis: true,
+  showYAxis: true,
+  size: "default",
+  type: "bar",
+  xKey: "label",
+})
+
+const emit = defineEmits<{
+  "select": [payload: ChartSelectPayload]
+  "update:modelValue": [value: string]
+}>()
+
+const chartWidth = 720
+const defaultColors = [
+  "oklch(0.58 0.19 248)",
+  "oklch(0.6 0.16 153)",
+  "oklch(0.67 0.18 69)",
+  "oklch(0.59 0.21 338)",
+  "oklch(0.62 0.18 204)",
+  "oklch(0.58 0.2 27)",
+]
+
+const numberFormatter = computed(() =>
+  new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: 2,
+  }),
+)
+
+const sizeClasses = computed(() => {
+  if (props.size === "sm") {
+    return {
+      axis: "text-[10px]",
+      body: "p-3",
+      content: "text-xs",
+      description: "text-xs",
+      header: "gap-2 px-3 py-2.5",
+      height: 190,
+      legend: "gap-2 text-[11px]",
+      lineWidth: 2,
+      pointRadius: 3,
+      tickCount: 4,
+      title: "text-xs",
+      xLabels: 6,
+    }
+  }
+
+  if (props.size === "lg") {
+    return {
+      axis: "text-xs",
+      body: "p-5",
+      content: "text-sm",
+      description: "text-sm",
+      header: "gap-3 px-5 py-4",
+      height: 340,
+      legend: "gap-3 text-xs",
+      lineWidth: 3,
+      pointRadius: 4.5,
+      tickCount: 6,
+      title: "text-sm",
+      xLabels: 10,
+    }
+  }
+
+  return {
+    axis: "text-[11px]",
+    body: "p-4",
+    content: "text-[13px]",
+    description: "text-sm",
+    header: "gap-2.5 px-4 py-3",
+    height: 260,
+    legend: "gap-2.5 text-xs",
+    lineWidth: 2.5,
+    pointRadius: 3.75,
+    tickCount: 5,
+    title: "text-[13px]",
+    xLabels: 8,
+  }
+})
+
+const chartHeight = computed(() =>
+  Math.max(160, Math.trunc(props.height ?? sizeClasses.value.height)),
+)
+
+const geometry = computed(() => {
+  const bottom = props.showXAxis ? 40 : 16
+  const left = props.showYAxis ? yAxisWidth.value : 16
+  const right = 18
+  const top = 16
+
+  return {
+    bottom,
+    left,
+    plotHeight: Math.max(1, chartHeight.value - top - bottom),
+    plotWidth: Math.max(1, chartWidth - left - right),
+    right,
+    top,
+  }
+})
+
+const normalizedSeries = computed<NormalizedChartSeries[]>(() => {
+  const source = props.series?.length
+    ? props.series
+    : [{ key: "value", label: "Value" }]
+
+  return source
+    .filter((series) => series.key.trim().length > 0)
+    .map((series, index) => ({
+      ...series,
+      areaOpacity: clampOpacity(series.areaOpacity ?? props.areaOpacity),
+      color: series.color ?? defaultColors[index % defaultColors.length] ?? defaultColors[0],
+      curve: series.curve ?? props.lineCurve,
+      label: series.label ?? formatSeriesLabel(series.key),
+      showArea: series.showArea ?? props.showArea,
+      showPoints: series.showPoints ?? props.showPoints,
+      type: series.type ?? props.type,
+    }))
+})
+
+const normalizedData = computed<NormalizedChartPoint[]>(() =>
+  props.data.map((data, index) => {
+    const rawLabel = getDataValue(data, props.xKey)
+    const label = rawLabel === undefined || rawLabel === null || rawLabel === ""
+      ? `Item ${index + 1}`
+      : String(rawLabel)
+    const id = data.id === undefined || data.id === null
+      ? `${index}-${label}`
+      : String(data.id)
+
+    return {
+      data,
+      id,
+      index,
+      label,
+    }
+  }),
+)
+
+const seriesValues = computed(() =>
+  normalizedSeries.value.map((series) => ({
+    series,
+    values: normalizedData.value.map((point): ChartSeriesValue => ({
+      data: point.data,
+      id: `${point.id}:${series.key}`,
+      index: point.index,
+      key: series.key,
+      label: point.label,
+      series,
+      value: getSeriesValue(point.data, series.key),
+    })),
+  })),
+)
+
+const numericValues = computed(() =>
+  seriesValues.value.flatMap((group) =>
+    group.values
+      .map((point) => point.value)
+      .filter((value): value is number => value !== null),
+  ),
+)
+
+const rawDomain = computed(() => {
+  const values = numericValues.value
+
+  if (!values.length) {
+    return {
+      max: 1,
+      min: 0,
+    }
+  }
+
+  let min = props.yMin ?? Math.min(...values)
+  let max = props.yMax ?? Math.max(...values)
+
+  if (props.includeZero) {
+    min = Math.min(min, 0)
+    max = Math.max(max, 0)
+  }
+
+  if (min > max) {
+    const nextMin = max
+    max = min
+    min = nextMin
+  }
+
+  if (min === max) {
+    const delta = min === 0 ? 1 : Math.abs(min * 0.1)
+    min -= delta
+    max += delta
+  }
+
+  return {
+    max,
+    min,
+  }
+})
+
+const yTicks = computed(() =>
+  getNiceTicks(rawDomain.value.min, rawDomain.value.max, props.gridLineCount ?? sizeClasses.value.tickCount),
+)
+
+const yAxisWidth = computed(() => {
+  const longestLabel = yTicks.value.reduce((maxLength, value) =>
+    Math.max(maxLength, formatValue(value).length), 0)
+
+  return Math.min(132, Math.max(58, (longestLabel * 7) + 16))
+})
+
+const yDomain = computed(() => {
+  const ticks = yTicks.value
+
+  if (ticks.length >= 2) {
+    return {
+      max: ticks[ticks.length - 1] ?? rawDomain.value.max,
+      min: ticks[0] ?? rawDomain.value.min,
+    }
+  }
+
+  return rawDomain.value
+})
+
+const gridTicks = computed(() =>
+  yTicks.value.map((value) => ({
+    label: formatValue(value),
+    value,
+    y: yScale(value),
+  })),
+)
+
+const xLabels = computed(() => {
+  const points = normalizedData.value
+  const maxLabels = props.maxXLabels ?? sizeClasses.value.xLabels
+  const visibleIndexes = getVisibleLabelIndexes(points.length, maxLabels)
+
+  return points
+    .filter((_, index) => visibleIndexes.has(index))
+    .map((point) => ({
+      ...point,
+      x: categoryCenterX(point.index),
+    }))
+})
+
+const barSeriesGroups = computed(() =>
+  seriesValues.value.filter((group) => group.series.type === "bar"),
+)
+
+const lineSeriesGroups = computed(() =>
+  seriesValues.value.filter((group) => group.series.type === "line"),
+)
+
+const barNodes = computed<BarNode[]>(() => {
+  const groupCount = Math.max(1, barSeriesGroups.value.length)
+  const categoryStep = getCategoryStep()
+  const categoryPadding = Math.min(32, Math.max(10, categoryStep * 0.18))
+  const gap = groupCount > 1 ? Math.min(8, Math.max(3, categoryStep * 0.04)) : 0
+  const availableWidth = Math.max(2, categoryStep - (categoryPadding * 2) - (gap * (groupCount - 1)))
+  const width = Math.max(2, availableWidth / groupCount)
+  const baseline = yScale(0)
+  const nodes: BarNode[] = []
+
+  for (const [seriesIndex, group] of barSeriesGroups.value.entries()) {
+    for (const point of group.values) {
+      if (point.value === null) continue
+
+      const valueY = yScale(point.value)
+      const x = geometry.value.left +
+        (point.index * categoryStep) +
+        categoryPadding +
+        (seriesIndex * (width + gap))
+      const height = Math.max(1, Math.abs(baseline - valueY))
+      const y = point.value >= 0 ? valueY : baseline
+
+      nodes.push({
+        color: point.series.color,
+        data: point.data,
+        height,
+        id: point.id,
+        index: point.index,
+        key: point.key,
+        label: point.label,
+        series: point.series,
+        value: point.value,
+        width,
+        x,
+        y,
+      })
+    }
+  }
+
+  return nodes
+})
+
+const lineNodesBySeries = computed(() =>
+  lineSeriesGroups.value.map((group) => ({
+    series: group.series,
+    nodes: group.values
+      .filter((point): point is ChartSeriesValue & { value: number } => point.value !== null)
+      .map((point): ChartNode => ({
+        color: point.series.color,
+        data: point.data,
+        id: point.id,
+        index: point.index,
+        key: point.key,
+        label: point.label,
+        series: point.series,
+        value: point.value,
+        x: categoryCenterX(point.index),
+        y: yScale(point.value),
+      })),
+  })),
+)
+
+const linePaths = computed<LinePath[]>(() =>
+  lineNodesBySeries.value
+    .map((group) => ({
+      color: group.series.color,
+      d: buildLinePath(group.nodes, group.series.curve),
+      key: group.series.key,
+      label: group.series.label,
+    }))
+    .filter((path) => path.d.length > 0),
+)
+
+const lineAreaPaths = computed<LineAreaPath[]>(() =>
+  lineNodesBySeries.value
+    .filter((group) => group.series.showArea)
+    .map((group) => ({
+      color: group.series.color,
+      d: buildLineAreaPath(group.nodes, group.series.curve),
+      key: group.series.key,
+      label: group.series.label,
+      opacity: group.series.areaOpacity,
+    }))
+    .filter((path) => path.d.length > 0),
+)
+
+const lineNodes = computed(() =>
+  lineNodesBySeries.value.flatMap((group) => group.nodes),
+)
+
+const visibleLineNodes = computed(() =>
+  lineNodesBySeries.value.flatMap((group) =>
+    group.series.showPoints ? group.nodes : [],
+  ),
+)
+
+const lineHitNodes = computed(() =>
+  lineNodesBySeries.value.flatMap((group) =>
+    props.selectable && !group.series.showPoints ? group.nodes : [],
+  ),
+)
+
+const hasRenderableData = computed(() =>
+  barNodes.value.length > 0 || lineNodes.value.length > 0,
+)
+
+const hasHeader = computed(() =>
+  Boolean(props.title || props.description || props.summary),
+)
+
+const baselineY = computed(() => yScale(0))
+
+function getDataValue(data: ChartDataPoint, key: string) {
+  return (data as Record<string, unknown>)[key]
+}
+
+function getSeriesValue(data: ChartDataPoint, key: string) {
+  const nested = data.values
+  const rawValue = nested && Object.prototype.hasOwnProperty.call(nested, key)
+    ? nested[key]
+    : getDataValue(data, key)
+
+  return toFiniteNumber(rawValue)
+}
+
+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 yScale(value: number) {
+  const domain = yDomain.value
+  const span = domain.max - domain.min || 1
+
+  return geometry.value.top + ((domain.max - value) / span) * geometry.value.plotHeight
+}
+
+function getCategoryStep() {
+  const count = Math.max(1, normalizedData.value.length)
+
+  return geometry.value.plotWidth / count
+}
+
+function categoryCenterX(index: number) {
+  return geometry.value.left + (getCategoryStep() * index) + (getCategoryStep() / 2)
+}
+
+function buildLinePath(nodes: ChartNode[], curve: ChartLineCurve) {
+  if (curve === "smooth") return buildSmoothLinePath(nodes)
+
+  return buildLinearLinePath(nodes)
+}
+
+function buildLineAreaPath(nodes: ChartNode[], curve: ChartLineCurve) {
+  if (nodes.length < 2) return ""
+
+  const linePath = buildLinePath(nodes, curve)
+  const first = nodes[0]
+  const last = nodes[nodes.length - 1]
+  const bottomY = geometry.value.top + geometry.value.plotHeight
+
+  if (!first || !last || !linePath) return ""
+
+  return [
+    linePath,
+    "L",
+    roundCoordinate(last.x),
+    roundCoordinate(bottomY),
+    "L",
+    roundCoordinate(first.x),
+    roundCoordinate(bottomY),
+    "Z",
+  ].join(" ")
+}
+
+function buildLinearLinePath(nodes: ChartNode[]) {
+  return nodes
+    .map((node, index) => `${index === 0 ? "M" : "L"} ${roundCoordinate(node.x)} ${roundCoordinate(node.y)}`)
+    .join(" ")
+}
+
+function buildSmoothLinePath(nodes: ChartNode[]) {
+  if (nodes.length < 3) return buildLinearLinePath(nodes)
+
+  const commands = [`M ${roundCoordinate(nodes[0].x)} ${roundCoordinate(nodes[0].y)}`]
+
+  for (let index = 0; index < nodes.length - 1; index += 1) {
+    const previous = nodes[index - 1] ?? nodes[index]
+    const current = nodes[index]
+    const next = nodes[index + 1]
+    const following = nodes[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 getVisibleLabelIndexes(length: number, maxLabels: number) {
+  const count = Math.max(0, length)
+  const limit = Math.max(1, Math.trunc(maxLabels))
+  const indexes = new Set<number>()
+
+  if (count === 0) return indexes
+
+  if (count <= limit) {
+    for (let index = 0; index < count; index += 1) {
+      indexes.add(index)
+    }
+
+    return indexes
+  }
+
+  const slots = Math.max(1, limit - 1)
+
+  for (let index = 0; index < limit; index += 1) {
+    indexes.add(Math.round((index / slots) * (count - 1)))
+  }
+
+  indexes.add(count - 1)
+
+  return indexes
+}
+
+function formatSeriesLabel(key: string) {
+  return key
+    .replace(/[-_]/g, " ")
+    .replace(/\b\w/g, (letter) => letter.toUpperCase())
+}
+
+function formatValue(value: number, context?: ChartValueFormatterContext) {
+  const formatted = props.valueFormatter?.(value, context)
+
+  if (formatted !== undefined) return String(formatted)
+
+  return numberFormatter.value.format(value)
+}
+
+function formatNodeLabel(node: ChartNode) {
+  return `${node.label}, ${node.series.label}: ${formatValue(node.value, node)}`
+}
+
+function getNiceTicks(min: number, max: number, count: number) {
+  const tickCount = Math.max(2, Math.min(8, Math.trunc(count)))
+  const span = max - min
+
+  if (span <= 0 || !Number.isFinite(span)) return [min, max]
+
+  const step = niceNumber(span / (tickCount - 1), true)
+  const niceMin = Math.floor(min / step) * step
+  const niceMax = Math.ceil(max / step) * step
+  const precision = decimalPrecision(step)
+  const ticks: number[] = []
+
+  for (let value = niceMin; value <= niceMax + (step / 2); value += step) {
+    ticks.push(roundTo(value, precision))
+  }
+
+  return ticks
+}
+
+function niceNumber(value: number, round: boolean) {
+  const exponent = Math.floor(Math.log10(value))
+  const fraction = value / (10 ** exponent)
+  let niceFraction: number
+
+  if (round) {
+    if (fraction < 1.5) niceFraction = 1
+    else if (fraction < 3) niceFraction = 2
+    else if (fraction < 7) niceFraction = 5
+    else niceFraction = 10
+  } else if (fraction <= 1) niceFraction = 1
+  else if (fraction <= 2) niceFraction = 2
+  else if (fraction <= 5) niceFraction = 5
+  else niceFraction = 10
+
+  return niceFraction * (10 ** exponent)
+}
+
+function decimalPrecision(value: number) {
+  if (!Number.isFinite(value)) return 0
+
+  const exponent = Math.floor(Math.log10(Math.abs(value)))
+
+  return Math.max(0, -exponent + 1)
+}
+
+function roundTo(value: number, precision: number) {
+  const multiplier = 10 ** precision
+
+  return Math.round(value * multiplier) / multiplier
+}
+
+function roundCoordinate(value: number) {
+  return Math.round(value * 100) / 100
+}
+
+function clampOpacity(value: number) {
+  if (!Number.isFinite(value)) return 0.16
+
+  return Math.min(1, Math.max(0, value))
+}
+
+function isSelectedNode(node: ChartNode) {
+  return props.modelValue === node.id
+}
+
+function swatchStyle(color: string): CSSProperties {
+  return {
+    backgroundColor: color,
+  }
+}
+
+function isLineSeries(series: NormalizedChartSeries) {
+  return series.type === "line"
+}
+
+function handleSelect(node: ChartNode) {
+  if (!props.selectable) return
+
+  emit("update:modelValue", node.id)
+  emit("select", {
+    data: node.data,
+    index: node.index,
+    key: node.key,
+    label: node.label,
+    series: node.series,
+    value: node.value,
+  })
+}
+
+function handleNodeKeydown(event: KeyboardEvent, node: ChartNode) {
+  if (event.key !== "Enter" && event.key !== " ") return
+
+  event.preventDefault()
+  handleSelect(node)
+}
+</script>
+
+<template>
+  <article
+    data-slot="chart"
+    :data-size="props.size"
+    :data-type="props.type"
+    :class="cn('overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs', props.class)"
+  >
+    <header
+      v-if="hasHeader"
+      data-slot="chart-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="chart-title"
+          :class="cn('truncate font-semibold leading-tight tracking-normal', sizeClasses.title)"
+        >
+          {{ props.title }}
+        </h3>
+        <p
+          v-if="props.description"
+          data-slot="chart-description"
+          :class="cn('text-muted-foreground', sizeClasses.description)"
+        >
+          {{ props.description }}
+        </p>
+      </div>
+
+      <p
+        v-if="props.summary"
+        data-slot="chart-summary"
+        class="shrink-0 text-xs font-medium text-muted-foreground"
+      >
+        {{ props.summary }}
+      </p>
+    </header>
+
+    <div
+      v-if="hasRenderableData"
+      data-slot="chart-body"
+      :class="cn('flex min-w-0 flex-col gap-3', sizeClasses.body)"
+    >
+      <div
+        v-if="props.showLegend && normalizedSeries.length && props.legendPosition === 'top'"
+        data-slot="chart-legend"
+        data-position="top"
+        :class="cn('flex flex-wrap items-center justify-center text-muted-foreground', sizeClasses.legend)"
+        :aria-label="props.legendLabel"
+      >
+        <span
+          v-for="seriesItem in normalizedSeries"
+          :key="seriesItem.key"
+          data-slot="chart-legend-item"
+          class="inline-flex min-w-0 items-center gap-1.5"
+        >
+          <span
+            data-slot="chart-legend-swatch"
+            aria-hidden="true"
+            :class="cn('shrink-0', isLineSeries(seriesItem) ? 'h-0.5 w-5 rounded-full' : 'size-2.5 rounded-full')"
+            :style="swatchStyle(seriesItem.color)"
+          />
+          <span class="truncate">{{ seriesItem.label }}</span>
+        </span>
+      </div>
+
+      <div data-slot="chart-viewport" class="min-w-0 overflow-x-auto pb-1">
+        <svg
+          data-slot="chart-svg"
+          role="img"
+          :aria-label="props.title ?? 'Chart'"
+          class="block h-auto min-w-[34rem] max-w-none overflow-visible sm:min-w-0 sm:w-full"
+          :height="chartHeight"
+          :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
+          :width="chartWidth"
+        >
+          <g
+            v-if="props.showGrid"
+            data-slot="chart-grid"
+            aria-hidden="true"
+          >
+            <line
+              v-for="tick in gridTicks"
+              :key="`grid-${tick.value}`"
+              class="text-border"
+              fill="none"
+              stroke="currentColor"
+              stroke-dasharray="4 6"
+              stroke-linecap="round"
+              :stroke-width="tick.value === 0 ? 1.25 : 1"
+              :x1="geometry.left"
+              :x2="geometry.left + geometry.plotWidth"
+              :y1="tick.y"
+              :y2="tick.y"
+            />
+          </g>
+
+          <line
+            v-if="yDomain.min < 0 && yDomain.max > 0"
+            data-slot="chart-zero-line"
+            aria-hidden="true"
+            class="text-foreground/60"
+            fill="none"
+            stroke="currentColor"
+            :stroke-width="1.25"
+            :x1="geometry.left"
+            :x2="geometry.left + geometry.plotWidth"
+            :y1="baselineY"
+            :y2="baselineY"
+          />
+
+          <g
+            v-if="props.showYAxis"
+            data-slot="chart-y-axis"
+          >
+            <text
+              v-for="tick in gridTicks"
+              :key="`y-${tick.value}`"
+              :class="cn('text-muted-foreground', sizeClasses.axis)"
+              dominant-baseline="middle"
+              fill="currentColor"
+              text-anchor="end"
+              :x="geometry.left - 12"
+              :y="tick.y"
+            >
+              {{ tick.label }}
+            </text>
+          </g>
+
+          <g
+            v-if="props.showXAxis"
+            data-slot="chart-x-axis"
+          >
+            <line
+              class="text-border"
+              fill="none"
+              stroke="currentColor"
+              :stroke-width="1"
+              :x1="geometry.left"
+              :x2="geometry.left + geometry.plotWidth"
+              :y1="geometry.top + geometry.plotHeight"
+              :y2="geometry.top + geometry.plotHeight"
+            />
+            <text
+              v-for="label in xLabels"
+              :key="`x-${label.id}`"
+              :class="cn('text-muted-foreground', sizeClasses.axis)"
+              dominant-baseline="hanging"
+              fill="currentColor"
+              text-anchor="middle"
+              :x="label.x"
+              :y="geometry.top + geometry.plotHeight + 12"
+            >
+              {{ label.label }}
+            </text>
+          </g>
+
+          <g data-slot="chart-bars">
+            <rect
+              v-for="node in barNodes"
+              :key="node.id"
+              data-slot="chart-bar"
+              :aria-label="formatNodeLabel(node)"
+              :aria-selected="props.selectable ? isSelectedNode(node) : undefined"
+              :fill="node.color"
+              role="button"
+              :rx="Math.min(4, node.width / 2)"
+              stroke="transparent"
+              :stroke-width="0"
+              :tabindex="props.selectable ? 0 : undefined"
+              :width="node.width"
+              :height="node.height"
+              :x="node.x"
+              :y="node.y"
+              class="outline-none transition-opacity hover:opacity-80 focus-visible:opacity-80"
+              @click="handleSelect(node)"
+              @keydown="handleNodeKeydown($event, node)"
+            >
+              <title>{{ formatNodeLabel(node) }}</title>
+            </rect>
+          </g>
+
+          <g data-slot="chart-lines">
+            <path
+              v-for="path in lineAreaPaths"
+              :key="`${path.key}:area`"
+              data-slot="chart-line-area"
+              aria-hidden="true"
+              :d="path.d"
+              :fill="path.color"
+              :fill-opacity="path.opacity"
+              stroke="none"
+            />
+
+            <path
+              v-for="path in linePaths"
+              :key="path.key"
+              data-slot="chart-line"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              :aria-label="path.label"
+              :d="path.d"
+              :stroke="path.color"
+              :stroke-width="sizeClasses.lineWidth"
+            />
+
+            <template v-if="visibleLineNodes.length">
+              <circle
+                v-for="node in visibleLineNodes"
+                :key="node.id"
+                data-slot="chart-point"
+                :aria-label="formatNodeLabel(node)"
+                :aria-selected="props.selectable ? isSelectedNode(node) : undefined"
+                :cx="node.x"
+                :cy="node.y"
+                :fill="node.color"
+                role="button"
+                :r="isSelectedNode(node) ? sizeClasses.pointRadius + 1 : sizeClasses.pointRadius"
+                stroke="var(--card)"
+                :stroke-width="1.5"
+                :tabindex="props.selectable ? 0 : undefined"
+                class="outline-none transition-opacity hover:opacity-80 focus-visible:opacity-80"
+                @click="handleSelect(node)"
+                @keydown="handleNodeKeydown($event, node)"
+              >
+                <title>{{ formatNodeLabel(node) }}</title>
+              </circle>
+            </template>
+
+            <circle
+              v-for="node in lineHitNodes"
+              :key="`${node.id}:hit`"
+              data-slot="chart-line-hit-area"
+              :aria-label="formatNodeLabel(node)"
+              :aria-selected="props.selectable ? isSelectedNode(node) : undefined"
+              :cx="node.x"
+              :cy="node.y"
+              fill="transparent"
+              role="button"
+              :r="Math.max(8, sizeClasses.pointRadius + 4)"
+              stroke="transparent"
+              :stroke-width="0"
+              :tabindex="props.selectable ? 0 : undefined"
+              class="outline-none"
+              @click="handleSelect(node)"
+              @keydown="handleNodeKeydown($event, node)"
+            >
+              <title>{{ formatNodeLabel(node) }}</title>
+            </circle>
+          </g>
+        </svg>
+      </div>
+
+      <div
+        v-if="props.showLegend && normalizedSeries.length && props.legendPosition === 'bottom'"
+        data-slot="chart-legend"
+        data-position="bottom"
+        :class="cn('flex flex-wrap items-center justify-end text-muted-foreground', sizeClasses.legend)"
+        :aria-label="props.legendLabel"
+      >
+        <span
+          v-for="seriesItem in normalizedSeries"
+          :key="seriesItem.key"
+          data-slot="chart-legend-item"
+          class="inline-flex min-w-0 items-center gap-1.5"
+        >
+          <span
+            data-slot="chart-legend-swatch"
+            aria-hidden="true"
+            :class="cn('shrink-0', isLineSeries(seriesItem) ? 'h-0.5 w-5 rounded-full' : 'size-2.5 rounded-full')"
+            :style="swatchStyle(seriesItem.color)"
+          />
+          <span class="truncate">{{ seriesItem.label }}</span>
+        </span>
+      </div>
+    </div>
+
+    <div
+      v-else
+      data-slot="chart-empty"
+      :class="cn('text-muted-foreground', sizeClasses.body, sizeClasses.content)"
+    >
+      {{ props.emptyLabel }}
+    </div>
+  </article>
+</template>