@vestow/vue 0.1.0

package/src/components/chart/ChartTooltipCard.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { ChartTooltipOptions, ChartTooltipRow } from './types'
+
+/**
+ * Bản COMPONENT của hộp tooltip, dùng cho các biểu đồ tự vẽ (Pie, Radial, Radar).
+ *
+ * Vì sao có hai bản cùng một hộp: Unovis chỉ nhận `template` trả về CHUỖI HTML
+ * nên phần XY phải đi qua `renderTooltip()`; còn ở đây ta tự vẽ SVG nên dựng
+ * bằng Vue được — và bắt buộc phải vậy, repo bật `vue/no-v-html` ở mức error.
+ *
+ * Hai bản phải giữ CÙNG markup. Sửa một bên thì sửa cả bên kia.
+ */
+const props = defineProps<{
+  title?: string
+  rows: ChartTooltipRow[]
+  options?: ChartTooltipOptions
+}>()
+
+/** Ba kiểu chỉ báo, khớp `INDICATOR_CLASS` trong `tooltip.ts`. */
+const INDICATOR = {
+  dot: 'size-2.5 rounded-[2px]',
+  line: 'h-3 w-1 rounded-[2px]',
+  dashed: 'h-3 w-0 border-[1.5px] border-dashed',
+} as const
+</script>
+
+<template>
+  <div class="grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-popover px-2.5 py-1.5 text-xs shadow-xl">
+    <div v-if="props.title && !props.options?.hideLabel" class="font-medium text-popover-foreground">
+      {{ props.title }}
+    </div>
+    <div class="grid gap-1.5">
+      <div v-for="row in props.rows" :key="row.key" class="flex w-full items-center gap-2">
+        <div
+          v-if="!props.options?.hideIndicator"
+          class="shrink-0"
+          :class="INDICATOR[props.options?.indicator ?? 'dot']"
+          :style="(props.options?.indicator ?? 'dot') === 'dashed'
+            ? { borderColor: row.color }
+            : { background: row.color }"
+        />
+        <div class="flex flex-1 items-center justify-between gap-4 leading-none">
+          <span class="text-muted-foreground">{{ row.label }}</span>
+          <span class="font-mono font-medium tabular-nums text-foreground">{{ row.value }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/chart/LineChart.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import type { ClassProps } from '../../lib/types'
+import type { ChartBaseProps, ChartCurve, ChartLabelKey } from './types'
+import { VisAxis, VisLine, VisScatter, VisXYContainer, VisXYLabels } from '@unovis/vue'
+import { computed, ref } from 'vue'
+import { cn } from '../../lib/utils'
+import ChartContainer from './ChartContainer.vue'
+import ChartCrosshair from './ChartCrosshair.vue'
+import ChartLegend from './ChartLegend.vue'
+import { toCurveType, useChartSeries } from './useChartSeries'
+import { xyLabelHtml } from './xy-label'
+
+const props = withDefaults(defineProps<ClassProps & ChartBaseProps<T> & {
+  /** @default 'monotone' */
+  curve?: ChartCurve
+  /** Vẽ chấm tại từng điểm dữ liệu. @default false */
+  showDots?: boolean
+  /** Bán kính chấm, pixel. @default 4 */
+  dotSize?: number
+  /** Chấm rỗng ruột — viền theo màu chuỗi, ruột theo màu nền. @default false */
+  hollowDots?: boolean
+  /** In nhãn phía trên từng điểm. @default false */
+  showLabels?: boolean
+  /** Nhãn đó in giá trị hay tên hạng mục. @default 'value' */
+  labelKey?: ChartLabelKey
+  /** Bấm vào legend để ẩn/hiện chuỗi. @default false */
+  interactiveLegend?: boolean
+  /**
+   * Thời lượng animation vào trang, mili giây. Mặc định **0**: 68 biểu đồ cùng
+   * mount một lúc, animation từ 0 làm cả trang trông như cột bị nén dí xuống
+   * đáy trong ~0,7 giây đầu — đã đo, và đã khiến chính tôi lẫn người dùng tưởng
+   * là lỗi hình học. Đặt 400–600 nếu muốn hiệu ứng ở màn dashboard chỉ có vài
+   * biểu đồ.
+   * @default 0
+   */
+  duration?: number
+}>(), {
+  duration: 0,
+  curve: 'monotone',
+  showDots: false,
+  dotSize: 4,
+  hollowDots: false,
+  showLabels: false,
+  labelKey: 'value',
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: false,
+  showGridLine: true,
+  showCursor: true,
+  interactiveLegend: false,
+  margin: () => ({ top: 8, right: 8, bottom: 0, left: 0 }),
+})
+
+const hidden = ref<string[]>([])
+
+const { categories, plotData, xTicks, isMounted, topOf } = useChartSeries(props)
+
+const curveType = computed(() => toCurveType(props.curve))
+
+function colorOf(key: string): string {
+  return `var(--color-${key})`
+}
+
+function labelOf(key: string): string {
+  return props.config[key]?.label ?? key
+}
+
+/**
+ * Chuỗi bị tắt thì làm mờ bằng chính MÀU, không dùng `stroke-opacity`:
+ * `_renderLines` của Unovis đặt cứng `stroke-opacity: 1` ở mỗi lần vẽ nên ghi
+ * đè thuộc tính đó sẽ bị xoá ngay lần render kế tiếp.
+ */
+function strokeOf(key: string): string {
+  return hidden.value.includes(key)
+    ? `color-mix(in oklab, var(--color-${key}) 12%, transparent)`
+    : `var(--color-${key})`
+}
+
+/**
+ * Kẻ lưới không đi kèm việc có hiện trục tung hay không — xem ghi chú cùng tên
+ * trong `BarChart.vue`. Trục vẫn dựng nhưng nhãn để rỗng.
+ */
+const showY = computed(() => props.showYAxis || props.showGridLine)
+
+/** Nhãn rỗng cho trục chỉ tồn tại để mang kẻ lưới. */
+function blankTick(): string {
+  return ''
+}
+
+function formatX(tick: number | Date, i: number, ticks: number[] | Date[]): string {
+  if (props.xFormatter)
+    return props.xFormatter(tick, i, ticks)
+  return String(props.data[Number(tick)]?.[props.index] ?? '')
+}
+
+/**
+ * Nhãn phía trên điểm, cách 12px — đúng `position="top" offset={12}` của shadcn.
+ * Lệch theo pixel nên phải đi qua `xyLabelHtml`; xem ghi chú ở `xy-label.ts`.
+ *
+ * Cộng thêm nửa chiều cao chữ vì `offset` của Recharts đo mép chữ, còn `dy` đo tâm.
+ */
+const LABEL_GAP_Y = 12 + 12 / 2
+function labelAt(key: string) {
+  return (d: Record<string, unknown>): string => {
+    if (props.labelKey === 'name') {
+      const raw = String(d[props.index] ?? '')
+      return xyLabelHtml(props.config[raw]?.label ?? raw, { dy: -LABEL_GAP_Y })
+    }
+    const raw = Number(d[key]) || 0
+    const text = props.valueFormatter ? props.valueFormatter(raw, key) : String(raw)
+    return xyLabelHtml(text, { dy: -LABEL_GAP_Y })
+  }
+}
+
+function toggle(key: string): void {
+  hidden.value = hidden.value.includes(key)
+    ? hidden.value.filter(k => k !== key)
+    : [...hidden.value, key]
+}
+</script>
+
+<template>
+  <ChartContainer :config="props.config" :show-cursor="props.showCursor" :class="cn(props.class)">
+    <VisXYContainer
+      :data="plotData"
+      :margin="props.margin"
+      :duration="props.duration"
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+    >
+      <VisLine
+        v-for="key in categories"
+        :key="key"
+        :x="(_d: Record<string, unknown>, i: number) => i"
+        :y="topOf(key)"
+        :color="strokeOf(key)"
+        :curve-type="curveType"
+        :line-width="2"
+      />
+
+      <!--
+        Chấm vẽ bằng VisScatter chồng lên đường: `VisLine` của Unovis không có
+        tuỳ chọn chấm nào. Đặt SAU đường để chấm nằm trên.
+      -->
+      <template v-if="props.showDots">
+        <VisScatter
+          v-for="key in categories"
+          :key="`dot-${key}`"
+          :x="(_d: Record<string, unknown>, i: number) => i"
+          :y="topOf(key)"
+          :color="props.hollowDots ? 'var(--background)' : strokeOf(key)"
+          :stroke-color="strokeOf(key)"
+          :stroke-width="2"
+          :size="props.dotSize * 2"
+        />
+      </template>
+
+      <template v-if="props.showLabels">
+        <VisXYLabels
+          v-for="key in categories"
+          :key="`label-${key}`"
+          :x="(d: Record<string, unknown>) => Number(d.__i)"
+          :y="topOf(key)"
+          :label="labelAt(key)"
+          :label-font-size="12"
+          :clustering="false"
+          background-color="none"
+          color="var(--foreground)"
+        />
+      </template>
+
+      <ChartCrosshair
+        v-if="props.showTooltip"
+        :index="props.index"
+        :categories="categories as Extract<keyof T, string>[]"
+        :hidden="hidden"
+        :color-of="colorOf"
+        :label-of="labelOf"
+        :value-formatter="props.valueFormatter"
+        :options="props.tooltip"
+        :default-index="props.defaultIndex"
+        :show-cursor="props.showCursor"
+      />
+
+      <VisAxis
+        v-if="props.showXAxis"
+        type="x"
+        :tick-values="xTicks"
+        :tick-format="formatX"
+        :grid-line="false"
+        :tick-line="false"
+        :domain-line="false"
+      />
+      <VisAxis
+        v-if="showY"
+        type="y"
+        :tick-format="props.showYAxis ? props.yFormatter : blankTick"
+        :grid-line="props.showGridLine"
+        :tick-line="false"
+        :domain-line="false"
+      />
+
+      <slot />
+    </VisXYContainer>
+
+    <ChartLegend
+      v-if="props.showLegend"
+      :categories="categories"
+      :hidden="hidden"
+      :interactive="props.interactiveLegend"
+      @toggle="toggle"
+    />
+  </ChartContainer>
+</template>

package/src/components/chart/PieChart.vue

@@ -0,0 +1,280 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import type { ClassProps } from '../../lib/types'
+import type { ChartConfig, ChartLabelKey, 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 { annularArcPath, polarToCartesian } from './polar'
+import { formatChartValue } from './tooltip'
+
+/**
+ * Pie và Donut là CÙNG một component, khác đúng một con số: `arcWidth`.
+ *
+ * VẼ TAY chứ không dùng `VisDonut`. Lý do cụ thể: Unovis Donut không có tuỳ chọn
+ * nhãn nào, mà nhãn trên lát là thứ một nửa số biến thể cần (nhãn giữa lát, danh
+ * sách nhãn ngoài rìa, lát được làm nổi). Tự vẽ thì `annularArcPath` đã có sẵn
+ * cho Radial dùng lại được, và ba biểu đồ tròn trong bộ này cùng một cách dựng.
+ */
+const props = withDefaults(defineProps<ClassProps & {
+  data: T[]
+  /** Khoá chứa TÊN của lát cắt. Tên đó cũng là khoá tra vào `config`. */
+  index: Extract<keyof T, string>
+  /** Khoá chứa giá trị số của lát cắt. */
+  value: Extract<keyof T, string>
+  /** Nhãn, màu và icon, khoá theo giá trị của `index`. */
+  config: ChartConfig
+  /** Bề dày vành, pixel. `0` cho ra hình quạt đặc. @default 0 */
+  arcWidth?: number
+  /**
+   * Bề rộng đường tách giữa hai lát, pixel. Đặt `0` thì các lát dính liền.
+   *
+   * Là VIỀN chứ không phải khe hở theo góc — đây là chỗ bản trước sai. Khe hở
+   * theo góc rộng ở vành và thu về 0 ở tâm, nên vệt trắng có hình cái nêm và
+   * nhìn lệch; viền thì rộng đều suốt chiều dài mép, đúng cách shadcn (Recharts
+   * tách lát bằng `stroke`, và `separator-none` chỉ là `stroke="0"`).
+   * @default 2
+   */
+  separatorWidth?: number
+  /** In nhãn cho từng lát. @default false */
+  showLabels?: boolean
+  /** Nội dung nhãn: giá trị hay tên hạng mục. @default 'value' */
+  labelKey?: ChartLabelKey
+  /**
+   * Nhãn nằm TRONG lát hay NGOÀI vành.
+   *
+   * Hai chỗ này không thay thế nhau được: nhãn trong lát vẽ trên nền màu chuỗi
+   * nên lấy màu chữ dẫn xuất của chính chuỗi đó, còn nhãn ngoài vành nằm trên
+   * nền card nên lấy `--foreground`. Chọn nhầm là chữ chìm mất.
+   * @default 'inside'
+   */
+  labelPosition?: 'inside' | 'outside'
+  /** Kẻ đường dẫn từ lát ra nhãn ngoài. Chỉ có nghĩa với `labelPosition="outside"`. @default true */
+  labelLine?: boolean
+  /** Chỉ số lát được làm nổi (bán kính lớn hơn). */
+  activeIndex?: number
+  /** Chữ lớn ở giữa. Chỉ vẽ khi `arcWidth > 0`. */
+  centralLabel?: string
+  /** Dòng nhỏ dưới `centralLabel`. */
+  centralSubLabel?: string
+  /** @default true */
+  showTooltip?: boolean
+  /** @default false */
+  showLegend?: boolean
+  valueFormatter?: ChartValueFormatter
+  tooltip?: ChartTooltipOptions
+}>(), {
+  arcWidth: 0,
+  separatorWidth: 2,
+  showLabels: false,
+  labelKey: 'value',
+  labelPosition: 'inside',
+  labelLine: true,
+  showTooltip: true,
+  showLegend: false,
+})
+
+/**
+ * Khung vẽ. Nhãn ngoài vành thì phải NỚI NGANG: nhãn nằm ngang nên chỗ thiếu là
+ * chiều ngang, đúng như ở RadarChart — khung vuông xén mất "Chrome" và "Edge" ở
+ * hai mép.
+ */
+const VIEW_H = 260
+const CENTER = VIEW_H / 2
+/** Nhãn nằm ngoài vành. */
+const outside = computed(() => props.showLabels && props.labelPosition === 'outside')
+/** Chừa 10px cho lát `activeIndex` phình ra; nhãn ngoài thì chừa 30px. */
+const outerRadius = computed(() => CENTER - (outside.value ? 30 : 10))
+const viewWidth = computed(() => (outside.value ? 380 : VIEW_H))
+/** Tâm lệch sang giữa khung rộng, nhưng bán kính vẫn tính theo chiều cao. */
+const cx = computed(() => viewWidth.value / 2)
+/** Lát được làm nổi phình thêm chừng này. */
+const ACTIVE_GROW = 8
+
+const hidden = ref<string[]>([])
+const hoverIndex = ref<number | null>(null)
+const pointer = ref({ x: 0, y: 0 })
+
+const names = computed(() => props.data.map(row => String(row[props.index])))
+
+const visibleRows = computed(() =>
+  props.data.filter(row => !hidden.value.includes(String(row[props.index]))))
+
+const total = computed(() =>
+  visibleRows.value.reduce((sum, row) => sum + (Number(row[props.value]) || 0), 0))
+
+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)
+}
+
+/**
+ * Các lát, kèm sẵn góc và path.
+ *
+ * Khe hở tính bằng ĐỘ rồi trừ vào hai đầu mỗi lát, chứ không cộng thêm vào tổng:
+ * cộng thêm sẽ làm tổng vượt 360° và lát cuối tràn qua lát đầu.
+ */
+const slices = computed(() => {
+  const rows = visibleRows.value
+  const sum = total.value
+  let angle = 0
+
+  return rows.map((row, i) => {
+    const name = String(row[props.index])
+    const raw = Number(row[props.value]) || 0
+    const span = sum === 0 ? 0 : (raw / sum) * 360
+    const start = angle
+    angle += span
+
+    const active = props.activeIndex === i
+    const outer = outerRadius.value + (active ? ACTIVE_GROW : 0)
+    const inner = props.arcWidth > 0 ? Math.max(0, outer - props.arcWidth - (active ? ACTIVE_GROW : 0)) : 0
+    const mid = start + span / 2
+
+    return {
+      key: name,
+      name,
+      label: labelOf(name),
+      color: colorOf(name),
+      raw,
+      value: formatValue(raw, name),
+      share: sum === 0 ? 0 : raw / sum,
+      path: annularArcPath(cx.value, CENTER, outer, inner, start, start + span),
+      // Tâm lát: giữa bán kính trong và ngoài, để nhãn không đè lên mép.
+      centroid: polarToCartesian(cx.value, CENTER, (outer + inner) / 2, mid),
+      outerAt: polarToCartesian(cx.value, CENTER, outer + 6, mid),
+      leaderAt: polarToCartesian(cx.value, CENTER, outer + 18, mid),
+      mid,
+      span,
+    }
+  })
+})
+
+const hovered = computed(() => (hoverIndex.value === null ? null : slices.value[hoverIndex.value] ?? null))
+
+const tooltipRows = computed<ChartTooltipRow[]>(() => {
+  const s = hovered.value
+  return s ? [{ key: s.key, label: s.label, color: s.color, value: s.value }] : []
+})
+
+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 textOf(slice: { value: string, label: string }): string {
+  return props.labelKey === 'name' ? slice.label : slice.value
+}
+
+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="`0 0 ${viewWidth} ${VIEW_H}`"
+        class="h-full max-h-full w-auto max-w-full"
+        role="img"
+        aria-label="Pie chart"
+      >
+        <g
+          v-for="(slice, i) in slices"
+          :key="slice.key"
+          @mouseenter="hoverIndex = i"
+          @mouseleave="hoverIndex = null"
+        >
+          <path
+            :d="slice.path"
+            :fill="slice.color"
+            :stroke="props.separatorWidth > 0 ? 'var(--card)' : 'none'"
+            :stroke-width="props.separatorWidth"
+            stroke-linejoin="round"
+            :opacity="hoverIndex === null || hoverIndex === i ? 1 : 0.72"
+            class="transition-opacity"
+          >
+            <title>{{ slice.label }}: {{ slice.value }}</title>
+          </path>
+
+          <!-- Nhãn giữa lát. Bỏ qua lát quá mỏng, chữ sẽ tràn ra ngoài. -->
+          <text
+            v-if="props.showLabels && !outside && slice.span > 18"
+            :x="slice.centroid.x"
+            :y="slice.centroid.y"
+            text-anchor="middle"
+            dominant-baseline="middle"
+            class="pointer-events-none text-[11px] font-medium"
+            :fill="`var(--color-${slice.name}-foreground)`"
+          >{{ textOf(slice) }}</text>
+
+          <!-- Nhãn ngoài vành, đường dẫn tuỳ chọn. -->
+          <template v-if="outside && slice.span > 10">
+            <line
+              v-if="props.labelLine"
+              :x1="slice.outerAt.x"
+              :y1="slice.outerAt.y"
+              :x2="slice.leaderAt.x"
+              :y2="slice.leaderAt.y"
+              stroke="var(--border)"
+              stroke-width="1"
+            />
+            <text
+              :x="slice.leaderAt.x + (slice.mid % 360 < 180 ? 3 : -3)"
+              :y="slice.leaderAt.y"
+              :text-anchor="slice.mid % 360 < 180 ? 'start' : 'end'"
+              dominant-baseline="middle"
+              class="pointer-events-none fill-foreground text-[12px]"
+            >{{ textOf(slice) }}</text>
+          </template>
+        </g>
+
+        <template v-if="props.arcWidth > 0 && props.centralLabel">
+          <text
+            :x="cx"
+            :y="props.centralSubLabel ? CENTER - 4 : CENTER"
+            text-anchor="middle"
+            dominant-baseline="middle"
+            class="fill-foreground text-[24px] font-semibold tabular-nums"
+          >{{ props.centralLabel }}</text>
+          <text
+            v-if="props.centralSubLabel"
+            :x="cx"
+            :y="CENTER + 18"
+            text-anchor="middle"
+            dominant-baseline="middle"
+            class="fill-muted-foreground text-[12px]"
+          >{{ props.centralSubLabel }}</text>
+        </template>
+      </svg>
+
+      <!-- Tooltip bám con trỏ. `pointer-events-none` để nó không tự cướp hover. -->
+      <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>