{
"$schema": "https://shadcn-vue.com/schema/registry-item.json",
"name": "radar-chart",
"title": "Radar Chart",
"type": "registry:ui",
"files": [
{
"path": "packages/registry-vue/components/charts/radar-chart/RadarChart.vue",
"content": "\n\n\n \n \n \n\n",
"type": "registry:ui",
"target": "~/app/components/ui/charts/radar-chart/RadarChart.vue"
},
{
"path": "packages/registry-vue/components/charts/radar-chart/index.ts",
"content": "export { default as RadarChart } from './RadarChart.vue'\n",
"type": "registry:ui",
"target": "~/app/components/ui/charts/radar-chart/index.ts"
},
{
"path": "packages/registry-vue/components/charts/useChartTheme.ts",
"content": "import { computed, ref, type ComputedRef } from 'vue'\n\n// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,\n// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips\n// happen automatically when the consumer toggles their theme class. The\n// values resolve at runtime via `getComputedStyle`, so they pick up whatever\n// the consumer set in their own `tailwind.css` -- no fork required.\n//\n// We bump `themeKey` whenever `` class/style changes (the typical\n// shadcn dark-mode pivot) so every consuming `computed` re-resolves and\n// downstream ECharts options re-paint.\n\nconst themeKey = ref(0)\n\nif (typeof window !== 'undefined') {\n // Bump once on the first paint so post-hydration getComputedStyle reads\n // the *resolved* CSS values (during SSR-built bundles the very first\n // computed pass returns the fallbacks below).\n requestAnimationFrame(() => themeKey.value++)\n new MutationObserver(() => themeKey.value++).observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class', 'style', 'data-theme'],\n })\n}\n\n// Lazy canvas context used to normalize any CSS color string (including\n// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba\n// string ECharts' canvas renderer can consume. Without this, code that\n// does `color + '40'` (8-digit hex alpha trick) produces invalid color\n// strings like `oklch(...)40` and the canvas API throws.\nlet _hexCanvas: CanvasRenderingContext2D | null = null\nfunction toHex(cssColor: string): string {\n if (typeof document === 'undefined') return cssColor\n if (!_hexCanvas) {\n _hexCanvas = document.createElement('canvas').getContext('2d')\n }\n if (!_hexCanvas) return cssColor\n // Reset, then assign; the browser normalizes whatever it accepted into\n // the canonical hex/rgba form when read back.\n _hexCanvas.fillStyle = '#000'\n _hexCanvas.fillStyle = cssColor\n return _hexCanvas.fillStyle as string\n}\n\n// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a\n// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)\n// only works when `colorString` is `#rrggbb`; once tokens resolve to\n// oklch() post-hydration the gradient stops break and the canvas paint\n// throws every frame. Stay defensive and always return rgba.\nexport function toRgba(cssColor: string, alpha: number): string {\n if (typeof document === 'undefined') return cssColor\n if (!_hexCanvas) {\n _hexCanvas = document.createElement('canvas').getContext('2d')\n }\n if (!_hexCanvas) return cssColor\n _hexCanvas.fillStyle = '#000'\n _hexCanvas.fillStyle = cssColor\n const normalized = _hexCanvas.fillStyle as string\n if (normalized.startsWith('#') && normalized.length === 7) {\n const r = parseInt(normalized.slice(1, 3), 16)\n const g = parseInt(normalized.slice(3, 5), 16)\n const b = parseInt(normalized.slice(5, 7), 16)\n return `rgba(${r},${g},${b},${alpha})`\n }\n if (normalized.startsWith('rgba(')) {\n return normalized.replace(/,\\s*[\\d.]+\\s*\\)$/, `,${alpha})`)\n }\n if (normalized.startsWith('rgb(')) {\n return normalized.replace(/^rgb\\(/, 'rgba(').replace(/\\)$/, `,${alpha})`)\n }\n // Canvas refused to parse this color -- ship the original string and\n // let ECharts complain (better than crashing the paint loop).\n return cssColor\n}\n\nfunction resolveVar(name: string, fallback: string): string {\n if (typeof window === 'undefined') return fallback\n const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()\n if (!v) return fallback\n return toHex(v)\n}\n\n// SSR / pre-hydration fallback palette. Hex values picked to roughly\n// match the shadcn Neutral defaults in `tailwind.css` so the first paint\n// doesn't flicker.\nconst CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']\n\nexport const chartColors: ComputedRef = computed(() => {\n themeKey.value\n return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))\n})\n\nexport const chartTextColor: ComputedRef = computed(() => {\n themeKey.value\n return resolveVar('--muted-foreground', '#888888')\n})\n\nexport const chartAxisColor: ComputedRef = computed(() => {\n themeKey.value\n return resolveVar('--border', '#e5e5e5')\n})\n\nexport const chartSplitLineColor: ComputedRef = computed(() => {\n themeKey.value\n return resolveVar('--border', '#f0f0f0')\n})\n\nexport const chartTooltipBg: ComputedRef = computed(() => {\n themeKey.value\n return resolveVar('--popover', 'rgba(255,255,255,0.96)')\n})\n\nexport const chartTooltipBorder: ComputedRef = computed(() => {\n themeKey.value\n return resolveVar('--border', '#e5e5e5')\n})\n\nexport const chartTooltipText: ComputedRef = computed(() => {\n themeKey.value\n return resolveVar('--popover-foreground', '#333333')\n})\n\n// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,\n// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge\n// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)\n// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`\n// doesn't blow away the wrapper's `color` + base font defaults on the same\n// axisLabel block. Arrays + primitives replace outright.\n//\n// This is the merge strategy the chart wrappers use to fold `props.option`\n// onto their computed base option without forcing consumers to spell out\n// every default they want to preserve.\nexport function mergeOptionBlock>(base: T, user: Partial | undefined): T {\n if (!user) return base\n const out: any = { ...base }\n for (const k of Object.keys(user)) {\n const bv = (base as any)[k]\n const uv = (user as any)[k]\n if (\n bv != null &&\n uv != null &&\n typeof bv === 'object' &&\n typeof uv === 'object' &&\n !Array.isArray(bv) &&\n !Array.isArray(uv)\n ) {\n out[k] = { ...bv, ...uv }\n } else {\n out[k] = uv\n }\n }\n return out\n}\n\n// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).\n// Pulled off saturated green and onto teal so the gauge ties back to the\n// dashboard palette; red is kept as the universal \"limit reached\" cue.\n// GaugeChart consumes this via its `thresholds` prop default; consumers\n// pass their own array to override. Static because gauges have semantic\n// meaning (green safe / red danger) that we deliberately don't theme-flip.\nexport const gaugeThresholds: [number, string][] = [\n [0.6, '#14b8a6'],\n [0.85, '#f59e0b'],\n [1, '#dc2626'],\n]\n",
"type": "registry:ui",
"target": "~/app/components/ui/charts/useChartTheme.ts"
}
],
"dependencies": [
"echarts",
"vue-echarts"
],
"devDependencies": [],
"registryDependencies": [],
"description": "Radar (spider) chart wrapper around Apache ECharts. Multi-series with optional fill. Theme-aware via registry tokens.",
"categories": [
"chart"
]
}