@vestow/vue 0.1.0

package/src/components/chart/RadarChart.vue

@@ -0,0 +1,291 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import type { ClassProps } from '../../lib/types'
+import type { ChartConfig, ChartValueFormatter } from './types'
+import { computed, ref } from 'vue'
+import { cn } from '../../lib/utils'
+import ChartContainer from './ChartContainer.vue'
+import ChartLegend from './ChartLegend.vue'
+import { polarToCartesian, polygonPoints, toPointsAttr } from './polar'
+import { formatChartValue } from './tooltip'
+
+/**
+ * Radar: mỗi hàng dữ liệu là một nan hoa, mỗi chuỗi là một đa giác.
+ *
+ * Vẽ tay — Unovis không có radar. Hình học giống SpeedDial: chia đều 360° cho
+ * số nan, rồi đặt điểm theo (góc, bán kính tỉ lệ với giá trị).
+ *
+ * MỘT CẢNH BÁO ĐI KÈM, và nó là thật chứ không phải câu khách sáo: radar đánh
+ * lừa mắt theo hai kiểu. Diện tích tăng theo BÌNH PHƯƠNG bán kính, nên một
+ * chuỗi hơn 40% trông như hơn gấp đôi; và đổi THỨ TỰ các nan là đổi luôn hình
+ * dạng dù dữ liệu y nguyên. Chỉ dùng khi các trục thật sự cùng đơn vị và thứ tự
+ * của chúng có nghĩa; còn lại thì cột nhóm đọc chính xác hơn.
+ */
+const props = withDefaults(defineProps<ClassProps & {
+  data: T[]
+  /** Khoá làm nhãn của từng nan hoa. */
+  index: Extract<keyof T, string>
+  /** Các chuỗi cần vẽ. Bỏ trống thì lấy các khoá trong `config`. */
+  categories?: Extract<keyof T, string>[]
+  config: ChartConfig
+  /** Giá trị ứng với mép ngoài. Bỏ trống thì lấy giá trị lớn nhất trong dữ liệu. */
+  max?: number
+  /** Số vòng lưới. @default 4 */
+  gridLevels?: number
+  /**
+   * Bán kính vòng ngoài cùng, pixel trong khung 340×260.
+   *
+   * Hạ xuống khi nhãn nan hoa cần nhiều hơn một dòng: khung là cố định, nên chỗ
+   * cho nhãn chỉ lấy được từ bán kính. Với nhãn hai dòng thì 86 là vừa — nan
+   * dưới cùng rơi vào y = 130 + 86 + 16 = 232, còn đủ chỗ cho dòng thứ hai.
+   * @default 100
+   */
+  radius?: number
+  /**
+   * Hình vòng lưới. `polygon` nối thẳng giữa các nan nên đếm được số trục;
+   * `circle` là đường tròn, gọn hơn nhưng giấu mất số trục.
+   * @default 'polygon'
+   */
+  gridShape?: 'polygon' | 'circle'
+  /** Vẽ các vòng lưới. @default true */
+  showGrid?: boolean
+  /** Vẽ nan hoa từ tâm ra. @default true */
+  showSpokes?: boolean
+  /**
+   * Tô nền vùng lưới bằng **màu của chuỗi đầu** ở 20%.
+   *
+   * Không phải `--muted`: shadcn khai `fill-(--color-desktop) opacity-20`, tức
+   * nền lưới ăn theo chính màu đang vẽ. Dùng màu trung tính thì hai ô
+   * `Grid Filled` và `Grid Circle Filled` trông y hệt bản không tô, chỉ xám hơn
+   * một chút — mất hẳn ý nghĩa của biến thể.
+   * @default false
+   */
+  gridFill?: boolean
+  /** Tô nền đa giác. @default true */
+  showArea?: boolean
+  /**
+   * Độ đục của nền đa giác.
+   *
+   * 0,6 là mặc định của `<Radar>` bên Recharts, tức thứ mà mọi biến thể radar của
+   * shadcn nhìn ra — trừ hai ô `*-fill` (0,5). Con số 0,22 mà bản trước dùng là
+   * tôi tự đặt, không đo đạc gì.
+   * @default 0.6
+   */
+  fillOpacity?: number
+  /** Chấm tại mỗi đỉnh. @default false */
+  showDots?: boolean
+  /** @default true */
+  showLegend?: boolean
+  valueFormatter?: ChartValueFormatter
+}>(), {
+  gridLevels: 4,
+  radius: 100,
+  gridShape: 'polygon',
+  showGrid: true,
+  showSpokes: true,
+  gridFill: false,
+  showArea: true,
+  fillOpacity: 0.6,
+  showDots: false,
+  showLegend: true,
+})
+
+/**
+ * Khung vẽ CỐ Ý rộng hơn cao. Nhãn nan hoa nằm ngang nên chỗ thiếu là chiều
+ * NGANG, không phải chiều dọc: với khung vuông 260px, "Support" và "Uptime" ở
+ * hai mép trái/phải bị xén mất chữ đầu — đã dính đúng vậy.
+ * Đặt ngắn nhãn nan hoa; khung này chừa khoảng 54px mỗi bên.
+ */
+const VIEW_W = 340
+const VIEW_H = 260
+const CX = VIEW_W / 2
+const CY = VIEW_H / 2
+/** Khoảng cách từ mép lưới ra tới nhãn. */
+const LABEL_GAP = 16
+const RADIUS = computed(() => props.radius)
+
+const hidden = ref<string[]>([])
+
+const categories = computed(() => (props.categories ?? Object.keys(props.config)) as string[])
+
+/**
+ * Màu nền vùng lưới: chuỗi ĐẦU ở 20%.
+ *
+ * Chuỗi đầu chứ không phải trộn nhiều chuỗi — cả hai ô dùng `gridFill` bên
+ * shadcn đều chỉ có một chuỗi, và với nhiều chuỗi thì nền lưới mang màu của một
+ * chuỗi cụ thể sẽ đọc ra như chuỗi đó được ưu tiên. Rơi về `--muted` khi chưa
+ * có chuỗi nào để không vẽ ra một mảng trong suốt.
+ */
+const gridFillColor = computed(() => {
+  const key = categories.value[0]
+  return key === undefined
+    ? 'var(--muted)'
+    : `color-mix(in oklab, var(--color-${key}) 20%, transparent)`
+})
+const axes = computed(() => props.data.map(row => String(row[props.index])))
+const axisCount = computed(() => axes.value.length)
+
+const maxValue = computed(() => {
+  if (props.max !== undefined)
+    return props.max
+  const values = props.data.flatMap(row => categories.value.map(key => Number(row[key]) || 0))
+  return Math.max(...values, 1)
+})
+
+/**
+ * Vòng lưới. Mặc định là ĐA GIÁC chứ không phải đường tròn: cạnh thẳng nối giữa
+ * hai nan cho mắt đếm được số trục, còn đường tròn thì giấu mất điều đó.
+ * `gridShape="circle"` trả về bán kính để vẽ `<circle>`.
+ */
+const gridRings = computed(() => Array.from({ length: props.gridLevels }, (_, i) => {
+  const r = (RADIUS.value * (i + 1)) / props.gridLevels
+  return { r, points: toPointsAttr(polygonPoints(CX, CY, r, Math.max(3, axisCount.value))) }
+}))
+
+const spokes = computed(() => axes.value.map((label, i) => {
+  const angle = (360 / axisCount.value) * i
+  const end = polarToCartesian(CX, CY, RADIUS.value, angle)
+  // Nhãn đẩy ra ngoài mép một chút, căn theo phía để không đè lên lưới.
+  const at = polarToCartesian(CX, CY, RADIUS.value + LABEL_GAP, angle)
+  const anchor = Math.abs(angle % 360) < 1 || Math.abs((angle % 360) - 180) < 1
+    ? 'middle'
+    : (angle % 360) < 180 ? 'start' : 'end'
+  return { label, end, labelAt: at, anchor, row: props.data[i] as T, index: i }
+}))
+
+const series = computed(() => categories.value.map((key) => {
+  const points = props.data.map((row, i) => {
+    const raw = Number(row[key]) || 0
+    const r = maxValue.value === 0 ? 0 : (RADIUS.value * Math.min(1, raw / maxValue.value))
+    return { ...polarToCartesian(CX, CY, r, (360 / axisCount.value) * i), raw }
+  })
+  return {
+    key,
+    label: props.config[key]?.label ?? key,
+    color: `var(--color-${key})`,
+    inactive: hidden.value.includes(key),
+    points: toPointsAttr(points),
+    dots: points,
+  }
+}))
+
+function toggle(key: string): void {
+  hidden.value = hidden.value.includes(key)
+    ? hidden.value.filter(k => k !== key)
+    : [...hidden.value, key]
+}
+
+function describe(label: string, raw: number, key: string): string {
+  const v = props.valueFormatter ? props.valueFormatter(raw, key) : formatChartValue(raw)
+  return `${label}: ${v}`
+}
+</script>
+
+<template>
+  <ChartContainer :config="props.config" :class="cn(props.class)">
+    <div class="flex min-h-0 flex-1 items-center justify-center">
+      <svg
+        :viewBox="`0 0 ${VIEW_W} ${VIEW_H}`"
+        class="h-full max-h-full w-auto max-w-full"
+        role="img"
+        aria-label="Radar chart"
+      >
+        <!-- Nền lưới vẽ TRƯỚC để nằm dưới các vòng kẻ. -->
+        <template v-if="props.gridFill">
+          <circle v-if="props.gridShape === 'circle'" :cx="CX" :cy="CY" :r="RADIUS" :fill="gridFillColor" />
+          <polygon v-else :points="gridRings[gridRings.length - 1]?.points" :fill="gridFillColor" />
+        </template>
+
+        <!-- Lưới và nan hoa dùng --border, cùng màu với kẻ lưới của chart XY. -->
+        <template v-if="props.showGrid && props.gridShape === 'circle'">
+          <circle
+            v-for="(ring, i) in gridRings"
+            :key="`ring-${i}`"
+            :cx="CX"
+            :cy="CY"
+            :r="ring.r"
+            fill="none"
+            stroke="var(--border)"
+            stroke-width="1"
+          />
+        </template>
+        <template v-else-if="props.showGrid">
+          <polygon
+            v-for="(ring, i) in gridRings"
+            :key="`poly-${i}`"
+            :points="ring.points"
+            fill="none"
+            stroke="var(--border)"
+            stroke-width="1"
+          />
+        </template>
+        <line
+          v-for="(spoke, i) in (props.showSpokes ? spokes : [])"
+          :key="`spoke-${i}`"
+          :x1="CX"
+          :y1="CY"
+          :x2="spoke.end.x"
+          :y2="spoke.end.y"
+          stroke="var(--border)"
+          stroke-width="1"
+        />
+
+        <!--
+          Nhãn nan hoa mở thành slot có phạm vi — đúng vai của prop `tick` mà
+          Recharts nhận: biến thể "custom label" của shadcn thay hẳn nội dung
+          nhãn bằng hai dòng (số/số rồi tên tháng), không phải chỉ đổi cách viết
+          một dòng. Slot thì đoạn mã hiện trên trang docs NÓI ĐÚNG thứ đang vẽ.
+
+          Nhãn nhiều dòng thì hạ `radius` để lấy chỗ — xem prop đó.
+        -->
+        <template v-for="(spoke, i) in spokes" :key="`label-${i}`">
+          <slot
+            name="spokeLabel"
+            :row="spoke.row"
+            :index="i"
+            :label="spoke.label"
+            :x="spoke.labelAt.x"
+            :y="spoke.labelAt.y"
+            :anchor="spoke.anchor"
+          >
+            <text
+              :x="spoke.labelAt.x"
+              :y="spoke.labelAt.y"
+              :text-anchor="spoke.anchor"
+              dominant-baseline="middle"
+              class="fill-muted-foreground text-[11px]"
+            >{{ spoke.label }}</text>
+          </slot>
+        </template>
+
+        <g v-for="s in series" :key="s.key" :opacity="s.inactive ? 0.12 : 1">
+          <polygon
+            :points="s.points"
+            :fill="props.showArea ? s.color : 'none'"
+            :fill-opacity="props.showArea ? props.fillOpacity : 0"
+            :stroke="s.color"
+            stroke-width="2"
+            stroke-linejoin="round"
+          />
+          <circle
+            v-for="(dot, i) in (props.showDots ? s.dots : [])"
+            :key="i"
+            :cx="dot.x"
+            :cy="dot.y"
+            r="3"
+            :fill="s.color"
+          >
+            <title>{{ describe(s.label, dot.raw, s.key) }}</title>
+          </circle>
+        </g>
+      </svg>
+    </div>
+
+    <ChartLegend
+      v-if="props.showLegend"
+      :categories="categories"
+      :hidden="hidden"
+      interactive
+      @toggle="toggle"
+    />
+  </ChartContainer>
+</template>

package/src/components/chart/RadialChart.vue

@@ -0,0 +1,354 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import type { ClassProps } from '../../lib/types'
+import type { ChartConfig, ChartTooltipOptions, ChartTooltipRow, ChartValueFormatter } from './types'
+import { computed, ref } from 'vue'
+import { cn } from '../../lib/utils'
+import ChartContainer from './ChartContainer.vue'
+import ChartLegend from './ChartLegend.vue'
+import ChartTooltipCard from './ChartTooltipCard.vue'
+import { arcBounds, arcPath, polarToCartesian } from './polar'
+import { formatChartValue } from './tooltip'
+
+/**
+ * Radial bar. Hai cách đọc, chọn bằng `stacked`:
+ *
+ * - mặc định — mỗi HÀNG dữ liệu một vòng đồng tâm, độ dài cung theo giá trị;
+ * - `stacked` — MỘT vòng duy nhất, mỗi chuỗi một đoạn cung nối tiếp nhau.
+ *
+ * Hình học lấy theo `RadialBarChart` của Recharts, tức đúng thứ shadcn dùng:
+ * khai `innerRadius` / `outerRadius` cho CẢ biểu đồ rồi chia dải đó cho N vòng,
+ * chứ không khai bề dày từng vòng. Khác biệt quan trọng nhất: luôn có LỖ Ở GIỮA
+ * (mặc định bán kính 30) — bản trước vẽ kín tới tâm nên ra hình cái bia bắn.
+ *
+ * Vẽ tay vì Unovis không có loại này: `nested-donut` của nó là sunburst chia
+ * theo GÓC, còn radial bar chia theo BÁN KÍNH.
+ */
+const props = withDefaults(defineProps<ClassProps & {
+  data: T[]
+  /** Khoá chứa tên vòng. Bỏ qua khi `stacked`. */
+  index: Extract<keyof T, string>
+  /** Khoá chứa giá trị. Bỏ qua khi `stacked`. */
+  value: Extract<keyof T, string>
+  config: ChartConfig
+  /** Gộp mọi chuỗi vào MỘT vòng. Khi đó chỉ đọc hàng đầu của `data`. @default false */
+  stacked?: boolean
+  /** Các khoá làm đoạn cung khi `stacked`. Bỏ trống thì lấy khoá của `config`. */
+  categories?: Extract<keyof T, string>[]
+  /** Giá trị ứng với cung đầy. Bỏ trống thì lấy giá trị lớn nhất trong dữ liệu. */
+  max?: number
+  /** Bán kính lỗ giữa. @default 30 */
+  innerRadius?: number
+  /** Bán kính mép ngoài. @default 110 */
+  outerRadius?: number
+  /** Bo tròn hai đầu cung. Số nào lớn hơn 0 cũng cho đầu tròn. @default 0 */
+  cornerRadius?: number
+  /** Góc bắt đầu, độ, 0 ở đỉnh. @default 0 */
+  startAngle?: number
+  /** Góc kết thúc. Để 180 cho bán nguyệt. @default 360 */
+  endAngle?: number
+  /** Vệt nền mờ cho phần cung còn thiếu. @default true */
+  showTrack?: boolean
+  /** Vòng kẻ tròn làm mốc. @default false */
+  showGrid?: boolean
+  /** In tên hạng mục bên trong cung. @default false */
+  showLabels?: boolean
+  /** Chữ lớn ở giữa. */
+  centralLabel?: string
+  /** Dòng nhỏ dưới `centralLabel`. */
+  centralSubLabel?: string
+  /** @default true */
+  showTooltip?: boolean
+  /** @default false */
+  showLegend?: boolean
+  valueFormatter?: ChartValueFormatter
+  tooltip?: ChartTooltipOptions
+}>(), {
+  stacked: false,
+  innerRadius: 30,
+  outerRadius: 110,
+  cornerRadius: 0,
+  startAngle: 0,
+  endAngle: 360,
+  showTrack: true,
+  showGrid: false,
+  showLabels: false,
+  showTooltip: true,
+  showLegend: false,
+})
+
+/** Lề quanh mép ngoài, đủ để nét vẽ không bị viewBox cắt. */
+const PAD = 8
+
+const hidden = ref<string[]>([])
+const hoverKey = ref<string | null>(null)
+const pointer = ref({ x: 0, y: 0 })
+
+const center = computed(() => props.outerRadius + PAD)
+
+const categories = computed(() => (props.categories ?? Object.keys(props.config)) as string[])
+
+const names = computed(() => (props.stacked
+  ? categories.value
+  : props.data.map(row => String(row[props.index]))))
+
+function colorOf(name: string): string {
+  return `var(--color-${name})`
+}
+
+function labelOf(name: string): string {
+  return props.config[name]?.label ?? name
+}
+
+function formatValue(raw: number, name: string): string {
+  return props.valueFormatter ? props.valueFormatter(raw, name) : formatChartValue(raw)
+}
+
+const sweep = computed(() => props.endAngle - props.startAngle)
+
+const maxValue = computed(() => {
+  if (props.max !== undefined)
+    return props.max
+  if (props.stacked) {
+    const row = props.data[0]
+    return categories.value.reduce((sum, key) => sum + (Number(row?.[key]) || 0), 0) || 1
+  }
+  return Math.max(...props.data.map(row => Number(row[props.value]) || 0), 1)
+})
+
+/**
+ * Chia dải `[innerRadius, outerRadius]` cho N vòng, vòng ĐẦU nằm ngoài cùng —
+ * đúng thứ tự Recharts xếp. Chừa 12% làm khe giữa hai vòng.
+ */
+function band(i: number, count: number): { mid: number, width: number } {
+  const per = (props.outerRadius - props.innerRadius) / Math.max(1, count)
+  const outer = props.outerRadius - i * per
+  const width = per * 0.88
+  return { mid: outer - width / 2, width }
+}
+
+interface Segment {
+  key: string
+  label: string
+  color: string
+  value: string
+  raw: number
+  mid: number
+  width: number
+  trackPath: string
+  valuePath: string
+  labelAt: { x: number, y: number }
+  labelFits: boolean
+  inactive: boolean
+}
+
+const segments = computed<Segment[]>(() => {
+  const c = center.value
+
+  if (props.stacked) {
+    // MỘT vòng, các đoạn nối tiếp: đoạn sau bắt đầu ở chỗ đoạn trước dừng lại.
+    const row = props.data[0]
+    const b = band(0, 1)
+    let acc = 0
+    return categories.value.map((key, i) => {
+      const raw = Number(row?.[key]) || 0
+      const from = props.startAngle + (acc / maxValue.value) * sweep.value
+      acc += raw
+      const to = props.startAngle + (acc / maxValue.value) * sweep.value
+      const arcLen = ((to - from) / 360) * 2 * Math.PI * b.mid
+      return {
+        key,
+        label: labelOf(key),
+        color: colorOf(key),
+        raw,
+        value: formatValue(raw, key),
+        mid: b.mid,
+        width: b.width,
+        trackPath: i === 0 ? arcPath(c, c, b.mid, props.startAngle, props.endAngle) : '',
+        valuePath: arcPath(c, c, b.mid, from, to),
+        labelAt: polarToCartesian(c, c, b.mid, (from + to) / 2),
+        labelFits: arcLen > 46,
+        inactive: hidden.value.includes(key),
+      }
+    })
+  }
+
+  return props.data.map((row, i) => {
+    const name = String(row[props.index])
+    const raw = Number(row[props.value]) || 0
+    const ratio = maxValue.value === 0 ? 0 : Math.min(1, raw / maxValue.value)
+    const b = band(i, props.data.length)
+    // Nhãn đặt ở ĐẦU cung, thụt vào một chút — đúng `insideStart` của shadcn.
+    // Mọi vòng cùng góc bắt đầu nhưng khác bán kính nên chúng xếp thành một cột
+    // theo hướng đó. HƯỚNG ẤY PHẢI LÀ DỌC: đặt góc bắt đầu ở 9 hoặc 3 giờ thì
+    // các nhãn nằm ngang cùng một hàng và đè lên nhau (bán kính chỉ cách nhau
+    // ~17px trong khi chữ rộng ~35px). Ví dụ Label vì vậy bắt đầu ở 6 giờ.
+    const arcLen = ((sweep.value * ratio) / 360) * 2 * Math.PI * b.mid
+    const insetDeg = (10 / (2 * Math.PI * b.mid)) * 360
+    const labelAngle = props.startAngle + insetDeg
+    return {
+      key: name,
+      label: labelOf(name),
+      color: colorOf(name),
+      raw,
+      value: formatValue(raw, name),
+      mid: b.mid,
+      width: b.width,
+      trackPath: arcPath(c, c, b.mid, props.startAngle, props.endAngle),
+      valuePath: arcPath(c, c, b.mid, props.startAngle, props.startAngle + sweep.value * ratio),
+      labelAt: polarToCartesian(c, c, b.mid, labelAngle),
+      labelFits: arcLen > 46,
+      inactive: hidden.value.includes(name),
+    }
+  })
+})
+
+/** Vòng kẻ tròn ở mép ngoài của từng vòng dữ liệu. */
+const gridRadii = computed(() => (props.showGrid
+  ? segments.value.map(s => s.mid + s.width / 2)
+  : []))
+
+/**
+ * viewBox cắt theo cung THẬT SỰ được vẽ, cộng lề.
+ * Để nguyên khung vuông thì biểu đồ bán nguyệt dạt lên trên và bỏ trống nửa
+ * dưới — trông như bị lệch chứ không phải như một cái đồng hồ đo.
+ */
+const bounds = computed(() => {
+  const c = center.value
+  return arcBounds(c, c, props.outerRadius, props.innerRadius, props.startAngle, props.endAngle)
+})
+
+const viewBox = computed(() => {
+  const b = bounds.value
+  return `${b.x - PAD} ${b.y - PAD} ${b.width + PAD * 2} ${b.height + PAD * 2}`
+})
+
+/**
+ * Chữ giữa đặt ở tâm KHUNG NHÌN THẤY, không phải tâm cực.
+ *
+ * Với cung không trọn vòng, viewBox bị cắt lệch nên tâm cực rơi ra sát mép —
+ * biểu đồ bán nguyệt vẽ ra là chữ "1.830" nằm ngoài khung và bị xén mất nửa.
+ * Lấy tâm của khung đã cắt thì chữ luôn nằm giữa phần nhìn thấy.
+ */
+const labelCenter = computed(() => {
+  const b = bounds.value
+  return { x: b.x + b.width / 2, y: b.y + b.height / 2 }
+})
+
+const hovered = computed(() => segments.value.find(s => s.key === hoverKey.value) ?? null)
+
+const tooltipRows = computed<ChartTooltipRow[]>(() => {
+  const s = hovered.value
+  return s ? [{ key: s.key, label: s.label, color: s.color, value: s.value, raw: s.raw }] : []
+})
+
+function onMove(event: MouseEvent): void {
+  const host = (event.currentTarget as HTMLElement).getBoundingClientRect()
+  pointer.value = { x: event.clientX - host.left, y: event.clientY - host.top }
+}
+
+function toggle(name: string): void {
+  hidden.value = hidden.value.includes(name)
+    ? hidden.value.filter(n => n !== name)
+    : [...hidden.value, name]
+}
+</script>
+
+<template>
+  <ChartContainer :config="props.config" :class="cn(props.class)">
+    <div class="relative flex min-h-0 flex-1 items-center justify-center" @mousemove="onMove">
+      <svg
+        :viewBox="viewBox"
+        class="h-full max-h-full w-auto max-w-full"
+        role="img"
+        :aria-label="props.centralLabel ?? 'Radial chart'"
+      >
+        <circle
+          v-for="(r, i) in gridRadii"
+          :key="`grid-${i}`"
+          :cx="center"
+          :cy="center"
+          :r="r"
+          fill="none"
+          stroke="var(--border)"
+          stroke-width="1"
+        />
+
+        <g
+          v-for="segment in segments"
+          :key="segment.key"
+          @mouseenter="hoverKey = segment.key"
+          @mouseleave="hoverKey = null"
+        >
+          <!--
+            Cung vẽ bằng NÉT DÀY chạy dọc đường tâm của vành, không phải hình
+            quạt được tô. Nhờ vậy `stroke-linecap="round"` cho hai đầu bo tròn
+            mà không phải dựng path bo góc.
+            Vệt nền dùng --muted chứ không phải màu chuỗi pha loãng: pha loãng
+            thì phần thiếu vẫn mang sắc của chuỗi và đọc ra như đã đạt.
+          -->
+          <path
+            v-if="props.showTrack && segment.trackPath"
+            :d="segment.trackPath"
+            fill="none"
+            stroke="var(--muted)"
+            :stroke-width="segment.width"
+            :stroke-linecap="props.cornerRadius > 0 ? 'round' : 'butt'"
+          />
+          <path
+            v-if="segment.valuePath"
+            :d="segment.valuePath"
+            fill="none"
+            :stroke="segment.color"
+            :stroke-width="segment.width"
+            :stroke-linecap="props.cornerRadius > 0 ? 'round' : 'butt'"
+            :opacity="segment.inactive ? 0.15 : 1"
+          >
+            <title>{{ segment.label }}: {{ segment.value }}</title>
+          </path>
+          <text
+            v-if="props.showLabels && segment.labelFits && !segment.inactive"
+            :x="segment.labelAt.x"
+            :y="segment.labelAt.y"
+            text-anchor="middle"
+            dominant-baseline="middle"
+            class="pointer-events-none text-[10px] font-medium"
+            :fill="`var(--color-${segment.key}-foreground)`"
+          >{{ segment.label }}</text>
+        </g>
+
+        <text
+          v-if="props.centralLabel"
+          :x="labelCenter.x"
+          :y="props.centralSubLabel ? labelCenter.y - 4 : labelCenter.y"
+          text-anchor="middle"
+          dominant-baseline="middle"
+          class="fill-foreground text-[24px] font-semibold tabular-nums"
+        >{{ props.centralLabel }}</text>
+        <text
+          v-if="props.centralSubLabel"
+          :x="labelCenter.x"
+          :y="labelCenter.y + 18"
+          text-anchor="middle"
+          dominant-baseline="middle"
+          class="fill-muted-foreground text-[12px]"
+        >{{ props.centralSubLabel }}</text>
+      </svg>
+
+      <div
+        v-if="props.showTooltip && hovered"
+        class="pointer-events-none absolute z-(--z-raised)"
+        :style="{ left: `${pointer.x + 14}px`, top: `${pointer.y + 14}px` }"
+      >
+        <ChartTooltipCard :rows="tooltipRows" :options="{ hideLabel: true, ...props.tooltip }" />
+      </div>
+    </div>
+
+    <ChartLegend
+      v-if="props.showLegend"
+      :categories="names"
+      :hidden="hidden"
+      interactive
+      @toggle="toggle"
+    />
+  </ChartContainer>
+</template>

package/src/components/chart/index.ts

@@ -0,0 +1,30 @@
+export { default as AreaChart } from './AreaChart.vue'
+export { default as BarChart } from './BarChart.vue'
+export { default as ChartContainer } from './ChartContainer.vue'
+export { default as ChartCrosshair } from './ChartCrosshair.vue'
+export { default as ChartLegend } from './ChartLegend.vue'
+export { default as ChartTooltipCard } from './ChartTooltipCard.vue'
+export { default as LineChart } from './LineChart.vue'
+export { default as PieChart } from './PieChart.vue'
+export { annularArcPath, arcBounds, arcPath, polarToCartesian, polygonPoints, toPointsAttr } from './polar'
+export type { Point } from './polar'
+
+export { default as RadarChart } from './RadarChart.vue'
+export { default as RadialChart } from './RadialChart.vue'
+export { escapeHtml, formatChartValue, renderTooltip } from './tooltip'
+export type {
+  ChartBaseProps,
+  ChartConfig,
+  ChartContext,
+  ChartCurve,
+  ChartLabelKey,
+  ChartSeriesConfig,
+  ChartTickFormatter,
+  ChartTooltipOptions,
+  ChartTooltipRow,
+  ChartValueFormatter,
+} from './types'
+export { CHART_CONTEXT_KEY } from './types'
+export { toCurveType, useChartSeries } from './useChartSeries'
+export { xyLabelHtml } from './xy-label'
+export type { XYLabelOffset } from './xy-label'

package/src/components/chart/polar.ts

@@ -0,0 +1,5 @@
+/**
+ * Lên `src/variants/lib/chart/polar` — hình học / ghép chuỗi thuần,
+ * không dính framework nào, nên cả hai cây đọc chung một bản.
+ */
+export * from '../../variants/lib/chart/polar'

package/src/components/chart/tooltip.ts

@@ -0,0 +1,5 @@
+/**
+ * Lên `src/variants/lib/chart/tooltip` — hình học / ghép chuỗi thuần,
+ * không dính framework nào, nên cả hai cây đọc chung một bản.
+ */
+export * from '../../variants/lib/chart/tooltip'