@gunjo/ui 0.0.1-alpha.1 → 0.0.1-alpha.2

package/src/components/display/RadarChart.tsx

@@ -0,0 +1,335 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import type { ChartColor, ChartDataPoint } from "./chart-utils"
+import {
+    chartLabelToString,
+    defaultChartValueFormatter,
+    getChartColor,
+    normalizeChartValue,
+} from "./chart-utils"
+import { ChartTooltip } from "./chart-tooltip"
+import type { RadarChartVariantKey } from "./generated/variant-keys"
+import { radarChartDefaultVariantKey } from "./generated/default-variant-keys"
+
+interface RadarPoint {
+    index: number
+    label: React.ReactNode
+    value: number
+    x: number
+    y: number
+}
+
+export interface RadarChartSeries {
+    id?: string
+    label?: React.ReactNode
+    data: ChartDataPoint[]
+    color?: ChartColor
+    fillOpacity?: number
+}
+
+export interface RadarChartProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    data: ChartDataPoint[]
+    series?: RadarChartSeries[]
+    variant?: RadarChartVariantKey
+    max?: number
+    color?: ChartColor
+    showGrid?: boolean
+    showLabels?: boolean
+    showDots?: boolean
+    fillOpacity?: number
+    formatValue?: (value: number) => React.ReactNode
+    maxLabel?: React.ReactNode
+}
+
+const radarChartVariantClasses: Record<RadarChartVariantKey, string> = {
+    compact: "h-[208px] w-full p-0",
+    default: "h-[256px] w-full p-0",
+}
+
+const chartCenter = 50
+const chartRadius = 34
+const labelRadius = 45
+const minimumAxisCount = 3
+
+function getRadarPosition(index: number, count: number, ratio = 1, radius = chartRadius) {
+    const angle = -90 + (index / count) * 360
+    const radians = (angle * Math.PI) / 180
+    return {
+        angle,
+        x: chartCenter + Math.cos(radians) * radius * ratio,
+        y: chartCenter + Math.sin(radians) * radius * ratio,
+    }
+}
+
+function normalizeRadarData(data: ChartDataPoint[]) {
+    return data.filter((item) => Number.isFinite(item.value))
+}
+
+function buildRadarPoints(data: ChartDataPoint[], maxValue: number, axisCount?: number) {
+    const normalizedData = normalizeRadarData(data)
+    const count = axisCount ?? Math.max(normalizedData.length, minimumAxisCount)
+
+    return normalizedData.map((item, index) => {
+        const position = getRadarPosition(
+            index,
+            count,
+            normalizeChartValue(item.value, maxValue) / 100
+        )
+
+        return {
+            index,
+            label: item.label,
+            value: item.value,
+            x: position.x,
+            y: position.y,
+        }
+    })
+}
+
+function buildRingPoints(count: number, ratio: number) {
+    return Array.from({ length: count }, (_, index) =>
+        getRadarPosition(index, count, ratio)
+    )
+}
+
+function formatChartNumber(value: number) {
+    return Number(value.toFixed(3))
+}
+
+function buildSvgPointList(points: Array<{ x: number; y: number }>) {
+    if (points.length < minimumAxisCount) return undefined
+    return [...points, points[0]]
+        .map((point) => `${formatChartNumber(point.x)},${formatChartNumber(point.y)}`)
+        .join(" ")
+}
+
+function normalizeRadarSeries(
+    data: ChartDataPoint[],
+    series?: RadarChartSeries[]
+): Array<RadarChartSeries & { id: string; data: ChartDataPoint[] }> {
+    if (series?.length) {
+        return series
+            .map((item, index) => ({
+                ...item,
+                id: item.id ?? `series-${index}`,
+                data: normalizeRadarData(item.data),
+            }))
+            .filter((item) => item.data.length > 0)
+    }
+
+    return [
+        {
+            id: "data",
+            data: normalizeRadarData(data),
+        },
+    ].filter((item) => item.data.length > 0)
+}
+
+const RadarChart = React.forwardRef<HTMLDivElement, RadarChartProps>(
+    (
+        {
+            className,
+            data,
+            series,
+            variant = radarChartDefaultVariantKey,
+            max,
+            color,
+            showGrid = true,
+            showLabels = true,
+            showDots = true,
+            fillOpacity = 0.16,
+            formatValue = defaultChartValueFormatter,
+            maxLabel = "Max",
+            ...props
+        },
+        ref
+    ) => {
+        const normalizedSeries = normalizeRadarSeries(data, series)
+        const labelData = normalizedSeries[0]?.data ?? []
+        const axisCount = Math.max(
+            ...normalizedSeries.map((item) => item.data.length),
+            minimumAxisCount
+        )
+        const maxValue = Math.max(
+            max ?? 0,
+            ...normalizedSeries.flatMap((item) => item.data.map((point) => point.value)),
+            1
+        )
+        const renderedSeries = normalizedSeries.map((item, index) => {
+            const points = buildRadarPoints(item.data, maxValue, axisCount)
+            const activeColor = getChartColor(item.color ?? color, index)
+
+            return {
+                ...item,
+                seriesIndex: index,
+                color: activeColor,
+                fillOpacity: item.fillOpacity ?? fillOpacity,
+                points,
+                svgPoints: buildSvgPointList(points),
+            }
+        })
+        const gridRings = [0.25, 0.5, 0.75, 1].map((ratio) => ({
+            ratio,
+            points: buildSvgPointList(buildRingPoints(axisCount, ratio)),
+        }))
+        const axisLines = Array.from({ length: axisCount }, (_, index) =>
+            getRadarPosition(index, axisCount, 1)
+        )
+
+        return (
+            <div
+                ref={ref}
+                role="img"
+                className={cn(
+                    radarChartVariantClasses[variant],
+                    "flex items-center justify-center overflow-hidden",
+                    className
+                )}
+                {...props}
+            >
+                <div className="relative aspect-square h-full max-h-full max-w-full">
+                    <svg
+                        className="pointer-events-none absolute inset-0 h-full w-full overflow-visible"
+                        viewBox="0 0 100 100"
+                        preserveAspectRatio="none"
+                        aria-hidden="true"
+                    >
+                        {showGrid
+                            ? gridRings.map((ring) =>
+                                  ring.points ? (
+                                      <polyline
+                                          key={`ring-${ring.ratio}`}
+                                          points={ring.points}
+                                          fill="none"
+                                          stroke="hsl(var(--border) / 0.7)"
+                                          strokeWidth={1}
+                                          vectorEffect="non-scaling-stroke"
+                                      />
+                                  ) : null
+                              )
+                            : null}
+                        {showGrid
+                            ? axisLines.map((point, index) => (
+                                  <line
+                                      key={`axis-${index}`}
+                                      x1={chartCenter}
+                                      y1={chartCenter}
+                                      x2={formatChartNumber(point.x)}
+                                      y2={formatChartNumber(point.y)}
+                                      stroke="hsl(var(--border) / 0.5)"
+                                      strokeWidth={1}
+                                      vectorEffect="non-scaling-stroke"
+                                  />
+                              ))
+                            : null}
+                        {renderedSeries.map((item) =>
+                            item.svgPoints ? (
+                                <polygon
+                                    key={`${item.id}-fill`}
+                                    points={item.svgPoints}
+                                    fill={item.color}
+                                    opacity={item.fillOpacity}
+                                />
+                            ) : null
+                        )}
+                        {renderedSeries.map((item) =>
+                            item.svgPoints ? (
+                                <polyline
+                                    key={`${item.id}-line`}
+                                    points={item.svgPoints}
+                                    fill="none"
+                                    stroke={item.color}
+                                    strokeWidth={2}
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    vectorEffect="non-scaling-stroke"
+                                />
+                            ) : null
+                        )}
+                        {showDots
+                            ? renderedSeries.flatMap((item) =>
+                                  item.points.map((point, index) => (
+                                      <circle
+                                          key={`${item.id}-dot-${index}`}
+                                          cx={formatChartNumber(point.x)}
+                                          cy={formatChartNumber(point.y)}
+                                          r={1.4}
+                                          fill="hsl(var(--background))"
+                                          stroke={item.color}
+                                          strokeWidth={2}
+                                          vectorEffect="non-scaling-stroke"
+                                      />
+                                  ))
+                              )
+                            : null}
+                    </svg>
+                    {showLabels
+                        ? labelData.map((item, index) => {
+                              const position = getRadarPosition(
+                                  index,
+                                  axisCount,
+                                  1,
+                                  labelRadius
+                              )
+                              return (
+                                  <span
+                                      key={`${String(item.label)}-label-${index}`}
+                                      className="pointer-events-none absolute max-w-20 -translate-x-1/2 -translate-y-1/2 truncate text-center text-xs text-muted-foreground"
+                                      style={{
+                                          left: `${position.x}%`,
+                                          top: `${position.y}%`,
+                                      }}
+                                      aria-hidden="true"
+                                  >
+                                      {item.label}
+                                  </span>
+                              )
+                          })
+                        : null}
+                    {renderedSeries.flatMap((item) =>
+                        item.points.map((point, index) => {
+                            const seriesLabel = chartLabelToString(
+                                item.label,
+                                renderedSeries.length > 1
+                                    ? `Series ${item.seriesIndex + 1}`
+                                    : ""
+                            )
+                            const description =
+                                renderedSeries.length > 1 && item.label
+                                    ? [item.label, " / ", maxLabel, ": ", formatValue(maxValue)]
+                                    : [maxLabel, ": ", formatValue(maxValue)]
+
+                            return (
+                                <ChartTooltip
+                                    key={`${item.id}-${String(point.label)}-${index}`}
+                                    label={point.label}
+                                    value={formatValue(point.value)}
+                                    description={description}
+                                >
+                                    <span
+                                        className="absolute z-10 h-7 w-7 -translate-x-1/2 -translate-y-1/2 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                                        style={{
+                                            left: `${point.x}%`,
+                                            top: `${point.y}%`,
+                                        }}
+                                        tabIndex={0}
+                                        aria-label={`${seriesLabel ? `${seriesLabel} ` : ""}${chartLabelToString(point.label)}: ${formatValue(point.value)} (${chartLabelToString(maxLabel, "Max")}: ${formatValue(maxValue)})`}
+                                    >
+                                        <span className="sr-only">{point.label}</span>
+                                    </span>
+                                </ChartTooltip>
+                            )
+                        })
+                    )}
+                </div>
+            </div>
+        )
+    }
+)
+RadarChart.displayName = "RadarChart"
+
+export { RadarChart }

package/src/components/display/RadialBarChart.tsx

@@ -0,0 +1,264 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import type { ChartDataPoint } from "./chart-utils"
+import {
+    clamp,
+    chartLabelToString,
+    defaultChartValueFormatter,
+    getChartColor,
+    normalizeChartValue,
+} from "./chart-utils"
+import { ChartLegend } from "./ChartLegend"
+import { ChartFloatingTooltip } from "./chart-tooltip"
+import type { RadialBarChartVariantKey } from "./generated/variant-keys"
+import { radialBarChartDefaultVariantKey } from "./generated/default-variant-keys"
+
+export interface RadialBarChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    data: ChartDataPoint[]
+    variant?: RadialBarChartVariantKey
+    max?: number
+    centerLabel?: React.ReactNode
+    centerValue?: React.ReactNode
+    thickness?: number
+    gap?: number
+    showLegend?: boolean
+    formatValue?: (value: number) => React.ReactNode
+    maxLabel?: React.ReactNode
+}
+
+const radialBarChartVariantClasses: Record<RadialBarChartVariantKey, string> = {
+    compact: "min-h-[176px] w-full p-0",
+    default: "min-h-[224px] w-full p-0",
+}
+
+const radialBarChartSizeClasses: Record<RadialBarChartVariantKey, string> = {
+    compact: "max-w-44",
+    default: "max-w-56",
+}
+
+function getPositiveValue(value: number) {
+    return Number.isFinite(value) ? Math.max(0, value) : 0
+}
+
+const RadialBarChart = React.forwardRef<HTMLDivElement, RadialBarChartProps>(
+    (
+        {
+            className,
+            data,
+            variant = radialBarChartDefaultVariantKey,
+            max = 100,
+            centerLabel,
+            centerValue,
+            thickness = variant === "compact" ? 14 : 18,
+            gap = variant === "compact" ? 6 : 8,
+            showLegend = false,
+            formatValue = defaultChartValueFormatter,
+            maxLabel = "Max",
+            ...props
+        },
+        ref
+    ) => {
+        const maxValue = Math.max(max, ...data.map((item) => getPositiveValue(item.value)), 1)
+        const step = thickness + gap
+        const centerInset = data.length * step
+        const centerClearance = variant === "compact" ? 4 : 6
+        const [activeIndex, setActiveIndex] = React.useState(0)
+        const [tooltipOpen, setTooltipOpen] = React.useState(false)
+        const [tooltipPosition, setTooltipPosition] = React.useState({
+            x: 50,
+            y: 12,
+        })
+        const chartRef = React.useRef<HTMLDivElement | null>(null)
+        const touchTooltipStickyRef = React.useRef(false)
+        const tooltipItem = data[activeIndex] ?? data[0]
+        const tooltipPercent = tooltipItem
+            ? normalizeChartValue(getPositiveValue(tooltipItem.value), maxValue)
+            : 0
+        const tooltipPercentLabel = `${defaultChartValueFormatter(tooltipPercent)}%`
+        const legendItems = data.map((item, index) => ({
+            label: item.label,
+            value: formatValue(item.value),
+            color: item.color ?? getChartColor(undefined, index),
+            description: [maxLabel, ": ", formatValue(maxValue)],
+        }))
+
+        const updateTooltipAtPoint = (
+            element: HTMLDivElement,
+            clientX: number,
+            clientY: number
+        ) => {
+            const rect = element.getBoundingClientRect()
+            const center = rect.width / 2
+            const dx = clientX - rect.left - center
+            const dy = clientY - rect.top - center
+            const distance = Math.sqrt(dx * dx + dy * dy)
+            const hitSlop = Math.max(2, gap / 2)
+            const anglePercent =
+                (((Math.atan2(dx, -dy) * 180) / Math.PI + 360) % 360) / 360 * 100
+            const angleSlop = 1.5
+            const nextActiveIndex = data.findIndex((item, index) => {
+                const outerRadius = center - index * step
+                const innerRadius = outerRadius - thickness
+                const activePercent = normalizeChartValue(
+                    getPositiveValue(item.value),
+                    maxValue
+                )
+
+                return (
+                    distance <= outerRadius + hitSlop &&
+                    distance >= innerRadius - hitSlop &&
+                    activePercent > 0 &&
+                    anglePercent <= Math.min(100, activePercent + angleSlop)
+                )
+            })
+
+            if (nextActiveIndex < 0) {
+                setTooltipOpen(false)
+                return
+            }
+
+            setActiveIndex(nextActiveIndex)
+            setTooltipPosition({
+                x: clamp(((clientX - rect.left) / rect.width) * 100),
+                y: clamp(((clientY - rect.top) / rect.height) * 100),
+            })
+            setTooltipOpen(true)
+        }
+        const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+            if (event.pointerType !== "touch") {
+                touchTooltipStickyRef.current = false
+            }
+            updateTooltipAtPoint(event.currentTarget, event.clientX, event.clientY)
+        }
+        const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+            touchTooltipStickyRef.current = event.pointerType === "touch"
+            if (event.pointerType === "touch") {
+                event.preventDefault()
+            }
+            event.currentTarget.focus({ preventScroll: true })
+            updateTooltipAtPoint(event.currentTarget, event.clientX, event.clientY)
+        }
+        const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
+            const touch = event.touches[0]
+            if (!touch) return
+            touchTooltipStickyRef.current = true
+            event.preventDefault()
+            event.currentTarget.focus({ preventScroll: true })
+            updateTooltipAtPoint(event.currentTarget, touch.clientX, touch.clientY)
+        }
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    radialBarChartVariantClasses[variant],
+                    "flex flex-col items-center justify-center gap-4",
+                    className
+                )}
+                {...props}
+            >
+                <div
+                    ref={chartRef}
+                    className={cn(
+                        "relative aspect-square w-full rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                        radialBarChartSizeClasses[variant]
+                    )}
+                    role="img"
+                    aria-label={
+                        tooltipItem
+                            ? `${chartLabelToString(tooltipItem.label)}: ${formatValue(tooltipItem.value)} (${tooltipPercentLabel} / ${chartLabelToString(maxLabel, "Max")}: ${formatValue(maxValue)})`
+                            : props["aria-label"]
+                    }
+                    tabIndex={0}
+                    onFocus={() => {
+                        setActiveIndex(0)
+                        setTooltipPosition({ x: 50, y: 12 })
+                        setTooltipOpen(true)
+                    }}
+                    onBlur={() => {
+                        touchTooltipStickyRef.current = false
+                        setTooltipOpen(false)
+                    }}
+                    onPointerDown={handlePointerDown}
+                    onPointerMove={handlePointerMove}
+                    onTouchStart={handleTouchStart}
+                    onPointerLeave={() => {
+                        if (touchTooltipStickyRef.current) return
+                        setTooltipOpen(false)
+                    }}
+                    onPointerCancel={() => {
+                        touchTooltipStickyRef.current = false
+                        setTooltipOpen(false)
+                    }}
+                >
+                    {data.map((item, index) => {
+                        const inset = index * step
+                        const value = getPositiveValue(item.value)
+                        const percent = normalizeChartValue(value, maxValue)
+                        const color = getChartColor(item.color, index)
+                        const background = `conic-gradient(${color} 0% ${percent}%, hsl(var(--muted)) ${percent}% 100%)`
+                        const ringMask = `radial-gradient(circle closest-side, transparent calc(100% - ${thickness}px), hsl(var(--palette-black)) calc(100% - ${thickness}px))`
+
+                        return (
+                            <React.Fragment key={`${chartLabelToString(item.label, "Item")}-${index}`}>
+                                <span
+                                    className="pointer-events-none absolute rounded-full"
+                                    style={{
+                                        inset,
+                                        background,
+                                        WebkitMaskImage: ringMask,
+                                        maskImage: ringMask,
+                                        zIndex: data.length - index,
+                                    }}
+                                    aria-hidden="true"
+                                />
+                            </React.Fragment>
+                        )
+                    })}
+                    {centerLabel !== undefined || centerValue !== undefined ? (
+                        <div
+                            className="absolute flex flex-col items-center justify-center rounded-full px-3 text-center"
+                            style={{
+                                inset: Math.max(centerInset - gap + centerClearance, thickness),
+                                zIndex: data.length + 1,
+                            }}
+                        >
+                            {centerValue !== undefined ? (
+                                <span className="text-2xl font-semibold tracking-tight">
+                                    {centerValue}
+                                </span>
+                            ) : null}
+                            {centerLabel !== undefined ? (
+                                <span className="text-xs text-muted-foreground">
+                                    {centerLabel}
+                                </span>
+                            ) : null}
+                        </div>
+                    ) : null}
+                    <ChartFloatingTooltip
+                        label={tooltipItem?.label}
+                        value={tooltipItem ? formatValue(tooltipItem.value) : undefined}
+                        description={[
+                            tooltipPercentLabel,
+                            " / ",
+                            maxLabel,
+                            ": ",
+                            formatValue(maxValue),
+                        ]}
+                        position={tooltipPosition}
+                        open={tooltipOpen}
+                        anchorRef={chartRef}
+                        onOpenChange={setTooltipOpen}
+                    />
+                </div>
+                {showLegend ? <ChartLegend className="justify-center" items={legendItems} /> : null}
+            </div>
+        )
+    }
+)
+RadialBarChart.displayName = "RadialBarChart"
+
+export { RadialBarChart }