@godxjp/ui 33.25.2 → 33.26.0

package/agent/tokens.json

@@ -13337,6 +13337,120 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-card-size-ratio",
+    "tier": "component",
+    "value": "1.4"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-card-width",
+    "tier": "component",
+    "value": "clamp(3.25rem, 6.6vw, 5.625rem)"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-compact-card-width",
+    "tier": "component",
+    "value": "clamp(1.875rem, 3.3vw, 2.8125rem)"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-orientation-duration",
+    "tier": "component",
+    "value": "180ms"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-background",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-foreground",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-muted-foreground",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-focus-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-control-border-alpha",
+    "tier": "component",
+    "value": "0.65"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-track-alpha",
+    "tier": "component",
+    "value": "0.8"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-grain-width",
+    "tier": "component",
+    "value": "1px"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-highlight-size",
+    "tier": "component",
+    "value": "72%"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-grain-size",
+    "tier": "component",
+    "value": "3px"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-grain-alpha",
+    "tier": "component",
+    "value": "0.025"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-felt-highlight-alpha",
+    "tier": "component",
+    "value": "0.045"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-etched-border-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-etched-border-alpha",
+    "tier": "component",
+    "value": "0.5"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-etched-border-size",
+    "tier": "component",
+    "value": "var(--stroke-hairline)"
+  },
+  {
+    "description": "Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs.",
+    "name": "--flex-etched-radius",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "THE TWO CORNER INSETS gh#558 ASKED FOR BY NAME. Ant Design's are `marginXXL` (48px) from the bottom and `marginLG` (24px) from the inline end. Spelled here in this library's own stack/inline steps, which land on the same two numbers: --space-stack-xl = --space-10 = 40px, --space-6 = 24px. The block inset is the one a service actually has to move — a sticky action bar, a cookie strip, a mobile tab bar all live in that corner — and moving it is now retuning ONE custom property, not writing a media query at the call site (which is `no-arbitrary-spacing` and has no legal spelling).",
     "name": "--float-button-offset-block-end",
@@ -15701,6 +15815,90 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "RadarChart tokens. Radii and font sizes use intrinsic SVG coordinates; colors resolve in the local theme scope.",
+    "name": "--radar-chart-label-inset",
+    "tier": "component",
+    "value": "8px"
+  },
+  {
+    "description": "Unitless scale of the normalized polar geometry.",
+    "name": "--radar-chart-plot-radius",
+    "tier": "component",
+    "value": "96"
+  },
+  {
+    "description": "scale-exempt: polar distance in viewBox user units, not a corner radius",
+    "name": "--radar-chart-label-radius",
+    "tier": "component",
+    "value": "124px"
+  },
+  {
+    "description": "RadarChart tokens. Radii and font sizes use intrinsic SVG coordinates; colors resolve in the local theme scope.",
+    "name": "--radar-chart-grid-alpha",
+    "tier": "component",
+    "value": "0.16"
+  },
+  {
+    "description": "RadarChart tokens. Radii and font sizes use intrinsic SVG coordinates; colors resolve in the local theme scope.",
+    "name": "--radar-chart-boundary-alpha",
+    "tier": "component",
+    "value": "0.32"
+  },
+  {
+    "description": "RadarChart tokens. Radii and font sizes use intrinsic SVG coordinates; colors resolve in the local theme scope.",
+    "name": "--radar-chart-axis-alpha",
+    "tier": "component",
+    "value": "0.2"
+  },
+  {
+    "description": "scale-exempt: viewBox user units, scaled with the SVG, not CSS type",
+    "name": "--radar-chart-label-font-size",
+    "tier": "component",
+    "value": "16px"
+  },
+  {
+    "description": "Unitless second-line leading, multiplied by the resolved label font size.",
+    "name": "--radar-chart-label-line-height",
+    "tier": "component",
+    "value": "1.25"
+  },
+  {
+    "description": "RadarChart tokens. Radii and font sizes use intrinsic SVG coordinates; colors resolve in the local theme scope.",
+    "name": "--radar-chart-tick-offset",
+    "tier": "component",
+    "value": "6px"
+  },
+  {
+    "description": "scale-exempt: viewBox user units, scaled with the SVG, not CSS type",
+    "name": "--radar-chart-tick-font-size",
+    "tier": "component",
+    "value": "10px"
+  },
+  {
+    "description": "scale-exempt: SVG circle r in viewBox user units, not a corner radius",
+    "name": "--radar-chart-point-radius",
+    "tier": "component",
+    "value": "3px"
+  },
+  {
+    "description": "HSL channels; default muted-foreground resolves at the chart.",
+    "name": "--radar-chart-grid-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "HSL channels; default foreground resolves at the chart.",
+    "name": "--radar-chart-label-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "RadarChart tokens. Radii and font sizes use intrinsic SVG coordinates; colors resolve in the local theme scope.",
+    "name": "--radar-chart-grid-stroke-width",
+    "tier": "component",
+    "value": "1px"
+  },
   {
     "description": "Separator layout thickness; focus paint must not reserve extra space.",
     "name": "--resizable-handle-size",

package/dist/components/charts/index.d.ts

@@ -18,3 +18,5 @@ export { PieChart } from "./pie-chart.js";
 export type { PieChartProp, PieChartProps } from "./pie-chart.js";
 export type { ChartSeriesProp, ChartDatum, ChartDatumSelect } from "../../props/components/charts.prop.js";
 export { CHART_COLORS } from "./chart-frame.js";
+export { RadarChart } from "./radar-chart.js";
+export type { RadarChartProp, RadarChartProps } from "./radar-chart.js";

package/dist/components/charts/index.js

@@ -5,6 +5,7 @@ import { HeatmapChart } from "./heatmap-chart.js";
 import { AreaChart } from "./area-chart.js";
 import { PieChart } from "./pie-chart.js";
 import { CHART_COLORS } from "./chart-frame.js";
+import { RadarChart } from "./radar-chart.js";
 export {
   AreaChart,
   BarChart,
@@ -12,5 +13,6 @@ export {
   CompactBarTrend,
   HeatmapChart,
   LineChart,
-  PieChart
+  PieChart,
+  RadarChart
 };

package/dist/components/charts/radar-chart.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { RadarChartProp } from "../../props/components/charts.prop.js";
+export type { RadarChartProp, RadarChartProp as RadarChartProps, } from "../../props/components/charts.prop.js";
+/** Shared-scale profile. SVG geometry is intrinsic, never consumer CSS or inferred scores. */
+export declare function RadarChart({ data, categoryKey, valueKey, valueMax, valueTicks, label, showCaption, description, size, numberFormat, emptyMessage, footer, className, id, ref, }: RadarChartProp): React.JSX.Element;

package/dist/components/charts/radar-chart.js

@@ -0,0 +1,273 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { EmptyState } from "../data-display/empty-state.js";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { ChartFrame, chartColor, chartHeight, useChartNumberFormat } from "./chart-frame.js";
+function wrapLabel(text, locale, width, measure) {
+  const words = new Intl.Segmenter(locale, { granularity: "word" });
+  const graphemes = new Intl.Segmenter(locale, { granularity: "grapheme" });
+  const lines = [];
+  let line = "";
+  for (const { segment } of words.segment(text)) {
+    if (measure(line + segment) <= width) {
+      line += segment;
+      continue;
+    }
+    if (line.trim()) {
+      lines.push(line.trim());
+      line = "";
+    }
+    for (const { segment: char } of graphemes.segment(segment.trimStart())) {
+      if (line && measure(line + char) > width) {
+        lines.push(line);
+        line = "";
+      }
+      line += char;
+    }
+  }
+  if (line.trim()) lines.push(line.trim());
+  if (lines.length <= 2) return lines;
+  const last = Array.from(graphemes.segment(lines[1]), (part) => part.segment);
+  while (last.length && measure(last.join("") + "\u2026") > width) last.pop();
+  return [lines[0], last.join("") + "\u2026"];
+}
+function RadarChart({
+  data,
+  categoryKey,
+  valueKey,
+  valueMax,
+  valueTicks,
+  label,
+  showCaption = true,
+  description,
+  size = "md",
+  numberFormat,
+  emptyMessage,
+  footer,
+  className,
+  id,
+  ref
+}) {
+  const { t, locale } = useTranslation();
+  const fmt = useChartNumberFormat(numberFormat ?? { maximumSignificantDigits: 21 });
+  const uid = React.useId();
+  const svgRef = React.useRef(null);
+  const [measuredLabels, setMeasuredLabels] = React.useState([]);
+  React.useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg || typeof svg.getBBox !== "function") return;
+    let disposed = false;
+    const context = document.createElement("canvas").getContext("2d");
+    if (!context) return;
+    const update = () => {
+      if (disposed) return;
+      const lines = Array.from(
+        svg.querySelectorAll('[data-slot="radar-label"]'),
+        (node, index) => {
+          const style = getComputedStyle(node);
+          context.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+          const transform = new DOMMatrix(style.transform);
+          const inset = parseFloat(style.getPropertyValue("--radar-chart-label-inset")) || 0;
+          const width = Math.abs(transform.e) > 1 ? 240 - Math.abs(transform.e) - inset : 480 - inset * 2;
+          return {
+            lines: wrapLabel(
+              String(data[index][categoryKey] ?? ""),
+              locale,
+              Math.max(1, width),
+              (text) => context.measureText(text).width
+            ),
+            lineHeight: parseFloat(style.getPropertyValue("--radar-chart-label-line-height")) || 1.25
+          };
+        }
+      );
+      setMeasuredLabels(
+        (previous) => JSON.stringify(previous) === JSON.stringify(lines) ? previous : lines
+      );
+    };
+    update();
+    const resize = new ResizeObserver(update);
+    resize.observe(svg);
+    const theme = new MutationObserver(update);
+    for (let node = svg; node; node = node.parentElement) {
+      theme.observe(node, {
+        attributes: true,
+        attributeFilter: ["class", "style", "data-theme", "data-tenant"]
+      });
+    }
+    void document.fonts?.ready.then(update);
+    return () => {
+      disposed = true;
+      resize.disconnect();
+      theme.disconnect();
+    };
+  }, [data, categoryKey, locale, size, valueMax]);
+  const valid = data.length >= 3 && data.length <= 6 && Number.isFinite(valueMax) && valueMax > 0 && data.every(
+    (d) => typeof d[valueKey] === "number" && Number.isFinite(d[valueKey]) && Number(d[valueKey]) >= 0 && Number(d[valueKey]) <= valueMax
+  );
+  const point = (index, fraction, radius = 1) => {
+    const angle = -Math.PI / 2 + index * Math.PI * 2 / data.length;
+    return [Math.cos(angle) * radius * fraction, Math.sin(angle) * radius * fraction];
+  };
+  const polygon = (fraction) => data.map((_, i) => point(i, fraction).join(",")).join(" ");
+  const rows = data.map(
+    (d) => `${String(d[categoryKey] ?? "")}: ${fmt.format(Number(d[valueKey]))}`
+  );
+  const summary = t("chart.summaryRadar", {
+    maximum: fmt.format(valueMax),
+    points: fmt.format(data.length)
+  });
+  const ticks = valueTicks?.filter((v) => Number.isFinite(v) && v > 0 && v <= valueMax).map((v) => v / valueMax) ?? [0.25, 0.5, 0.75, 1];
+  const stroke = "hsl(var(--radar-chart-grid-color, var(--muted-foreground)))";
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ref,
+      label,
+      showCaption,
+      description,
+      summaryRows: rows,
+      imgSummary: summary,
+      hasData: valid,
+      size,
+      footer,
+      className,
+      id,
+      children: valid ? /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          ref: svgRef,
+          width: "100%",
+          style: { maxHeight: chartHeight(size), display: "block" },
+          viewBox: "0 0 480 320",
+          "aria-hidden": "true",
+          "data-slot": "radar-plot",
+          children: [
+            /* @__PURE__ */ jsx("title", { id: `${uid}-radar-title`, children: typeof label === "string" ? label : summary }),
+            /* @__PURE__ */ jsx("desc", { children: rows.join("; ") }),
+            /* @__PURE__ */ jsxs("g", { transform: "translate(240 160)", children: [
+              ticks.map((f) => /* @__PURE__ */ jsx(
+                "polygon",
+                {
+                  points: polygon(f),
+                  fill: "none",
+                  style: { transform: "scale(var(--radar-chart-plot-radius))" },
+                  vectorEffect: "non-scaling-stroke",
+                  strokeWidth: "var(--radar-chart-grid-stroke-width)",
+                  stroke,
+                  opacity: f === 1 ? "var(--radar-chart-boundary-alpha)" : "var(--radar-chart-grid-alpha)"
+                },
+                f
+              )),
+              data.map((_, i) => {
+                const [x, y] = point(i, 1);
+                return /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    strokeWidth: "var(--radar-chart-grid-stroke-width)",
+                    x1: 0,
+                    y1: 0,
+                    x2: x,
+                    y2: y,
+                    stroke,
+                    opacity: "var(--radar-chart-axis-alpha)",
+                    vectorEffect: "non-scaling-stroke",
+                    style: { transform: "scale(var(--radar-chart-plot-radius))" }
+                  },
+                  i
+                );
+              }),
+              ticks.map((f) => /* @__PURE__ */ jsx(
+                "text",
+                {
+                  "data-slot": "radar-tick",
+                  style: {
+                    transform: `translate(calc(-1 * var(--radar-chart-tick-offset)), calc(-${f} * var(--radar-chart-plot-radius) * 1px))`
+                  },
+                  textAnchor: "end",
+                  fill: stroke,
+                  fontSize: "var(--radar-chart-tick-font-size)",
+                  children: fmt.format(valueMax * f)
+                },
+                f
+              )),
+              /* @__PURE__ */ jsx(
+                "polygon",
+                {
+                  "data-slot": "radar-area",
+                  style: { transform: "scale(var(--radar-chart-plot-radius))" },
+                  vectorEffect: "non-scaling-stroke",
+                  points: data.map((d, i) => point(i, Number(d[valueKey]) / valueMax).join(",")).join(" "),
+                  fill: chartColor(0),
+                  fillOpacity: "var(--chart-area-fill-alpha)",
+                  stroke: chartColor(0),
+                  strokeWidth: "var(--chart-series-stroke-width)",
+                  strokeLinejoin: "round"
+                }
+              ),
+              data.map((d, i) => {
+                const [x, y] = point(i, Number(d[valueKey]) / valueMax);
+                const [lx, ly] = point(i, 1);
+                const fullLabel = String(d[categoryKey] ?? "");
+                const shown = measuredLabels[i]?.lines ?? wrapLabel(
+                  fullLabel,
+                  locale,
+                  Math.abs(lx) > 0.1 ? 104 : 400,
+                  (text) => Array.from(text).reduce(
+                    (width, char) => width + (char.codePointAt(0) > 255 ? 16 : 9),
+                    0
+                  )
+                );
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      r: "var(--radar-chart-point-radius)",
+                      style: {
+                        transform: `translate(calc(${x} * var(--radar-chart-plot-radius) * 1px), calc(${y} * var(--radar-chart-plot-radius) * 1px))`
+                      },
+                      fill: chartColor(0)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "text",
+                    {
+                      "data-slot": "radar-label",
+                      style: {
+                        transform: `translate(calc(${lx} * var(--radar-chart-label-radius)), calc(${ly} * var(--radar-chart-label-radius)))`
+                      },
+                      textAnchor: lx > 0.1 ? "start" : lx < -0.1 ? "end" : "middle",
+                      dominantBaseline: "middle",
+                      fill: "hsl(var(--radar-chart-label-color, var(--foreground)))",
+                      fontSize: "var(--radar-chart-label-font-size)",
+                      fontFamily: "inherit",
+                      children: [
+                        /* @__PURE__ */ jsxs("title", { children: [
+                          fullLabel,
+                          ": ",
+                          fmt.format(Number(d[valueKey]))
+                        ] }),
+                        shown.map((line, index) => /* @__PURE__ */ jsx(
+                          "tspan",
+                          {
+                            x: 0,
+                            dy: index ? `${measuredLabels[i]?.lineHeight ?? 1.25}em` : 0,
+                            children: line
+                          },
+                          index
+                        ))
+                      ]
+                    }
+                  )
+                ] }, i);
+              })
+            ] })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx(EmptyState, { title: emptyMessage ?? t("chart.empty") })
+    }
+  );
+}
+export {
+  RadarChart
+};

package/dist/components/layout/flex.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children } from "react";
+import { Children, useEffect, useRef } from "react";
 import { mergeAriaIds } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { flexGapClass, padStyle, padStepToken } from "../../lib/variants.js";
@@ -18,6 +18,12 @@ function Flex(props) {
 }
 function LayoutFlex({
   as: Element = "div",
+  viewport,
+  ref: forwardedRef,
+  basis,
+  overflow,
+  rotate,
+  animated,
   direction = "row",
   marker,
   grow,
@@ -47,6 +53,31 @@ function LayoutFlex({
   children,
   ...props
 }) {
+  const viewportRef = useRef(null);
+  useEffect(() => {
+    const node = viewportRef.current;
+    if (!viewport || !node) return;
+    const update = () => {
+      const visual = window.visualViewport;
+      const bottom = visual ? visual.height + visual.offsetTop : window.innerHeight;
+      const available = Math.max(0, bottom - Math.max(0, node.getBoundingClientRect().top));
+      node.style.setProperty("--flex-viewport-available", `${available}px`);
+    };
+    update();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(document.documentElement);
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    window.visualViewport?.addEventListener("resize", update);
+    window.visualViewport?.addEventListener("scroll", update);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+      window.visualViewport?.removeEventListener("resize", update);
+      window.visualViewport?.removeEventListener("scroll", update);
+    };
+  }, [viewport, Element]);
   let domProps = props;
   if (props.role === void 0 && !HAS_IMPLICIT_ROLE.has(typeof Element === "string" ? Element : "") && (props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0)) {
     const {
@@ -75,6 +106,16 @@ function LayoutFlex({
   return /* @__PURE__ */ jsxs(
     Element,
     {
+      ref: (node) => {
+        viewportRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      "data-viewport": viewport ? "" : void 0,
+      "data-basis": basis,
+      "data-overflow": overflow,
+      "data-rotate": rotate,
+      "data-animated": animated ? "" : void 0,
       "data-direction": responsive ? "responsive" : direction,
       "data-grow": grow ? "" : void 0,
       "data-shrink": shrink === false ? "false" : void 0,
@@ -112,6 +153,11 @@ function LayoutFlex({
   );
 }
 function AttachedFlex({
+  viewport: _viewport,
+  basis: _basis,
+  overflow: _overflow,
+  rotate: _rotate,
+  animated: _animated,
   as: _as,
   direction,
   marker: _marker,

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "33.25.2",
+  "version": "33.26.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -805,6 +805,7 @@
   "chart": {
     "datumLabel": "{label}, {series}: {value}",
     "empty": "No data to display",
+    "summaryRadar": "Profile with {points} axes on a common scale from 0 to {maximum}",
     "summaryCartesian": "Chart with {series} series across {points} data points",
     "summaryPie": "Pie chart with {slices} slices",
     "summaryTrend": "Bar trend with {points} data points",

package/dist/i18n/messages/ja.json

@@ -779,6 +779,7 @@
   "chart": {
     "datumLabel": "{label}, {series}: {value}",
     "empty": "データがありません",
+    "summaryRadar": "{points}軸のプロファイル（共通尺度：0〜{maximum}）",
     "summaryCartesian": "{series}系列・{points}データ点のグラフ",
     "summaryPie": "{slices}区分の円グラフ",
     "summaryTrend": "{points}データ点の推移棒グラフ",

package/dist/i18n/messages/vi.json

@@ -780,6 +780,7 @@
   "chart": {
     "datumLabel": "{label}, {series}: {value}",
     "empty": "Không có dữ liệu",
+    "summaryRadar": "Hồ sơ {points} trục trên thang chung từ 0 đến {maximum}",
     "summaryCartesian": "Biểu đồ gồm {series} chuỗi trên {points} điểm dữ liệu",
     "summaryPie": "Biểu đồ tròn gồm {slices} phần",
     "summaryTrend": "Biểu đồ cột xu hướng gồm {points} điểm dữ liệu",

package/dist/props/components/charts.prop.d.ts

@@ -252,4 +252,23 @@ export type PieChartProp = {
     className?: ClassNameProp;
     id?: IdProp;
 };
+/** Single quantitative profile on a shared zero-based scale; incomplete data is never zero-filled. */
+export type RadarChartProp = {
+    data: ChartDatum[];
+    categoryKey: string;
+    valueKey: string;
+    /** Required common ceiling, strictly positive; values outside [0,valueMax] are invalid. */
+    valueMax: number;
+    valueTicks?: number[];
+    label: LabelProp;
+    showCaption?: boolean;
+    description?: DescriptionProp;
+    size?: SizeProp;
+    numberFormat?: Intl.NumberFormatOptions;
+    emptyMessage?: EmptyMessageProp;
+    footer?: FooterProp;
+    className?: ClassNameProp;
+    id?: IdProp;
+    ref?: React.Ref<HTMLElement>;
+};
 export {};