nuxt-charts 3.0.0-beta.3 → 3.0.0

package/dist/runtime/components/FunnelChart.vue

@@ -8,6 +8,8 @@ import {
 import ChartContainer from "./internal/ChartContainer";
 import ChartSkeleton from "./internal/ChartSkeleton.vue";
 import ChartLegend from "./internal/ChartLegend.vue";
+import ChartEmptyState from "./internal/ChartEmptyState.vue";
+import ChartAccessibility from "./internal/ChartAccessibility.vue";
 import FunnelClassicShape from "./internal/FunnelClassicShape.vue";
 import FunnelTooltip from "./internal/FunnelTooltip.vue";
 import FunnelLayeredShape, {
@@ -16,8 +18,11 @@ import { categoriesToSeries } from "../utils/categories";
 import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../utils/legend";
 import { toCssProperties } from "../utils/style";
 import { themeToVars } from "../utils/theme";
+import { DEFAULT_MAX_DATA_POINTS, normalizeNamedValues, sampleData, warnDataLimit } from "../utils/data";
 const props = defineProps({
   data: { type: Array, required: true },
+  nameKey: { type: null, required: false },
+  valueKey: { type: null, required: false },
   categories: { type: Object, required: true },
   height: { type: Number, required: true },
   variant: { type: String, required: false },
@@ -33,9 +38,14 @@ const props = defineProps({
   legendStyle: { type: [String, Object], required: false },
   hideTooltip: { type: Boolean, required: false },
   tooltipTitleFormatter: { type: Function, required: false },
-  tooltip: { type: Object, required: false },
   theme: { type: Object, required: false },
   duration: { type: Number, required: false },
+  ariaLabel: { type: String, required: false },
+  ariaDescription: { type: String, required: false },
+  accessibleDataTable: { type: Boolean, required: false, default: true },
+  maxDataPoints: { type: Number, required: false },
+  emptyLabel: { type: String, required: false },
+  error: { type: String, required: false },
   legendVariant: { type: String, required: false },
   tooltipVariant: { type: String, required: false },
   tooltipRoundness: { type: String, required: false },
@@ -46,14 +56,19 @@ defineSlots();
 const themeVars = computed(() => themeToVars(props.theme));
 const stages = computed(() => {
   const cats = categoriesToSeries(props.categories);
-  return props.data.map((value, i) => ({
-    name: cats[i]?.name ?? String(i),
+  const normalized = normalizeNamedValues(props.data, cats.map((cat) => String(cat.name)), props.nameKey, props.valueKey);
+  const limit = props.maxDataPoints ?? DEFAULT_MAX_DATA_POINTS;
+  warnDataLimit("FunnelChart", normalized.length, limit);
+  return sampleData(normalized, limit).map(({ row, value, sourceIndex, name }) => ({
+    ...row && typeof row === "object" ? row : {},
+    name,
     value,
-    formattedValue: props.valueFormatter?.(value, i),
-    fill: cats[i]?.color ?? `var(--chart-color-${i})`,
-    color: cats[i]?.color ?? `var(--chart-color-${i})`
+    formattedValue: props.valueFormatter?.(value, sourceIndex),
+    fill: cats[sourceIndex]?.color ?? `var(--vc-series-${sourceIndex % 8})`,
+    color: cats[sourceIndex]?.color ?? `var(--vc-series-${sourceIndex % 8})`
   }));
 });
+const accessibleRows = computed(() => stages.value.map((stage) => ({ label: stage.name, values: [{ label: "Value", value: stage.formattedValue ?? stage.value }] })));
 const isLayered = computed(() => props.variant === "layered");
 const showValueLabel = computed(() => props.showValueLabel ?? true);
 const NAMED_LABEL_SIZES = { sm: 10, md: 12, lg: 14 };
@@ -112,7 +127,7 @@ function updateTooltipPosition(event) {
   };
 }
 function showTooltip(event, datum) {
-  activeDatum.value = datum;
+  activeDatum.value = props.tooltipTitleFormatter ? { ...datum, name: String(props.tooltipTitleFormatter(datum)) } : datum;
   updateTooltipPosition(event);
 }
 function clearTooltip() {
@@ -125,14 +140,18 @@ function clearTooltip() {
     v-if="isLayered"
     ref="chartContainer"
     class="vc-funnel-layered vue-chrts"
+    role="group"
+    :aria-label="ariaLabel ?? 'Funnel chart'"
     :style="{ height: `${height}px`, ...themeVars }"
   >
+    <ChartAccessibility :label="ariaLabel ?? 'Funnel chart'" :description="ariaDescription" :rows="accessibleRows" :show-table="accessibleDataTable !== false" />
     <ChartSkeleton
       v-if="loading"
       :height="height"
       shape="bars"
       :label="loadingLabel ?? 'Loading'"
     />
+    <ChartEmptyState v-else-if="error || stages.length === 0" :height="height" :message="error || emptyLabel" />
     <ChartContainer v-else width="100%" height="100%">
       <VccsFunnelChart :margin="{ top: 16, right: 0, bottom: 8, left: 0 }">
         <Funnel
@@ -142,6 +161,7 @@ function clearTooltip() {
           last-shape-type="rectangle"
           stroke="none"
           :is-animation-active="duration !== void 0 && duration !== 0"
+          :transition="{ duration: (duration ?? 800) / 1e3, ease: 'easeOut' }"
         >
           <template #shape="shapeProps">
             <!--
@@ -180,13 +200,15 @@ function clearTooltip() {
     />
   </div>
 
-  <div v-else ref="chartContainer" class="vc-funnel vue-chrts" :style="themeVars">
+  <div v-else ref="chartContainer" class="vc-funnel vue-chrts" role="group" :aria-label="ariaLabel ?? 'Funnel chart'" :style="themeVars">
+    <ChartAccessibility :label="ariaLabel ?? 'Funnel chart'" :description="ariaDescription" :rows="accessibleRows" :show-table="accessibleDataTable !== false" />
     <ChartSkeleton
       v-if="loading"
       :height="height"
       shape="bars"
       :label="loadingLabel ?? 'Loading'"
     />
+    <ChartEmptyState v-else-if="error || stages.length === 0" :height="height" :message="error || emptyLabel" />
     <ChartContainer v-else width="100%" :height="height">
     <VccsFunnelChart>
       <Funnel
@@ -196,6 +218,7 @@ function clearTooltip() {
         :last-shape-type="lastShapeType ?? 'triangle'"
         stroke="none"
         :is-animation-active="duration !== void 0 && duration !== 0"
+        :transition="{ duration: (duration ?? 800) / 1e3, ease: 'easeOut' }"
       >
         <template #shape="shapeProps">
           <slot

package/dist/runtime/components/LineChart.vue

@@ -52,7 +52,6 @@ const props = defineProps({
   xAxisConfig: { type: Object, required: false },
   yAxisConfig: { type: Object, required: false },
   yAxes: { type: Object, required: false },
-  tooltip: { type: Object, required: false },
   referenceLines: { type: Array, required: false },
   syncId: { type: String, required: false },
   minMaxTicksOnly: { type: Boolean, required: false },
@@ -61,6 +60,12 @@ const props = defineProps({
   crosshairConfig: { type: Object, required: false },
   theme: { type: Object, required: false },
   backgroundPattern: { type: String, required: false },
+  ariaLabel: { type: String, required: false },
+  ariaDescription: { type: String, required: false },
+  accessibleDataTable: { type: Boolean, required: false, default: true },
+  maxDataPoints: { type: Number, required: false },
+  emptyLabel: { type: String, required: false },
+  error: { type: String, required: false },
   legendVariant: { type: String, required: false },
   tooltipVariant: { type: String, required: false },
   tooltipRoundness: { type: String, required: false },
@@ -134,6 +139,7 @@ defineSlots();
       :dot="showDots || s.dot"
       :hide="s.hidden"
       :is-animation-active="duration !== void 0 && duration !== 0"
+      :transition="{ duration: (duration ?? 800) / 1e3, ease: 'easeOut' }"
     >
       <template v-if="showDots" #dot="dotProps">
         <ChartDot

package/dist/runtime/components/RadarChart.vue

@@ -12,6 +12,8 @@ import {
 import ChartContainer from "./internal/ChartContainer";
 import ChartSkeleton from "./internal/ChartSkeleton.vue";
 import ChartLegend from "./internal/ChartLegend.vue";
+import ChartEmptyState from "./internal/ChartEmptyState.vue";
+import ChartAccessibility from "./internal/ChartAccessibility.vue";
 import ChartDot from "./internal/ChartDot";
 import { tooltipContentFor } from "./internal/tooltipContent";
 import PolarCenterSync from "./internal/PolarCenterSync";
@@ -20,6 +22,7 @@ import { categoriesToSeries } from "../utils/categories";
 import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../utils/legend";
 import { toCssProperties } from "../utils/style";
 import { themeToVars } from "../utils/theme";
+import { DEFAULT_MAX_DATA_POINTS, normalizeNumericRows, sampleData, warnDataLimit } from "../utils/data";
 const props = defineProps({
   data: { type: Array, required: true },
   height: { type: Number, required: true },
@@ -41,9 +44,14 @@ const props = defineProps({
   outerRadius: { type: [Number, String], required: false },
   angleAxisTickSize: { type: Number, required: false },
   margin: { type: Object, required: false },
-  tooltip: { type: Object, required: false },
   theme: { type: Object, required: false },
   duration: { type: Number, required: false },
+  ariaLabel: { type: String, required: false },
+  ariaDescription: { type: String, required: false },
+  accessibleDataTable: { type: Boolean, required: false, default: true },
+  maxDataPoints: { type: Number, required: false },
+  emptyLabel: { type: String, required: false },
+  error: { type: String, required: false },
   legendVariant: { type: String, required: false },
   tooltipVariant: { type: String, required: false },
   tooltipRoundness: { type: String, required: false },
@@ -52,6 +60,16 @@ const props = defineProps({
 });
 const gradientScope = useId();
 const series = computed(() => categoriesToSeries(props.categories).filter((s) => !s.hidden));
+const chartData = computed(() => {
+  const normalized = normalizeNumericRows(props.data, series.value.map((item) => item.dataKey));
+  const limit = props.maxDataPoints ?? DEFAULT_MAX_DATA_POINTS;
+  warnDataLimit("RadarChart", normalized.length, limit);
+  return sampleData(normalized, limit);
+});
+const accessibleRows = computed(() => chartData.value.map((row, index) => ({
+  label: String(row[props.dataKey] ?? index + 1),
+  values: series.value.map((item) => ({ label: String(item.name), value: row[item.dataKey] }))
+})));
 const polygonFillOpacity = computed(
   () => props.variant === "lines" ? 0 : isGradient.value ? 1 : props.fillOpacity ?? 0.6
 );
@@ -63,7 +81,7 @@ function polygonFill(dataKey, color) {
 }
 const showDots = computed(() => props.dotVariant !== void 0);
 const tooltipContent = computed(
-  () => tooltipContentFor(props.tooltipVariant, props.tooltipRoundness)
+  () => tooltipContentFor(props.tooltipVariant, props.tooltipRoundness, props.tooltipTitleFormatter)
 );
 const angleKey = computed(() => String(props.dataKey));
 const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
@@ -89,16 +107,18 @@ const resolvedOuterRadius = computed(() => {
 </script>
 
 <template>
-  <div class="vue-chrts" :style="themeVars">
+  <div class="vue-chrts" role="group" :aria-label="ariaLabel ?? 'Radar chart'" :style="themeVars">
+    <ChartAccessibility :label="ariaLabel ?? 'Radar chart'" :description="ariaDescription" :rows="accessibleRows" :show-table="accessibleDataTable !== false" />
     <ChartSkeleton
       v-if="loading"
       :height="height ?? 200"
       shape="ring"
       :label="loadingLabel ?? 'Loading'"
     />
+    <ChartEmptyState v-else-if="error || chartData.length === 0" :height="height" :message="error || emptyLabel" />
     <ChartContainer v-else width="100%" :height="height">
     <VccsRadarChart
-      :data="data"
+      :data="chartData"
       :outer-radius="resolvedOuterRadius"
       :cx="center?.cx"
       :cy="center?.cy"
@@ -141,6 +161,7 @@ const resolvedOuterRadius = computed(() => {
         :fill-opacity="polygonFillOpacity"
         :dot="showDots"
         :is-animation-active="duration !== void 0 && duration !== 0"
+        :transition="{ duration: (duration ?? 800) / 1e3, ease: 'easeOut' }"
       >
         <template v-if="showDots" #dot="dotProps">
           <ChartDot

package/dist/runtime/components/RadialBarChart.vue

@@ -9,14 +9,19 @@ import {
 import ChartContainer from "./internal/ChartContainer";
 import ChartSkeleton from "./internal/ChartSkeleton.vue";
 import ChartLegend from "./internal/ChartLegend.vue";
+import ChartEmptyState from "./internal/ChartEmptyState.vue";
+import ChartAccessibility from "./internal/ChartAccessibility.vue";
 import { tooltipContentFor } from "./internal/tooltipContent";
 import PolarCenterSync from "./internal/PolarCenterSync";
 import { categoriesToSeries } from "../utils/categories";
 import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../utils/legend";
 import { toCssProperties } from "../utils/style";
-import { themeToVars } from "../utils/theme";
+import { resolveHoverVisible, themeToVars } from "../utils/theme";
+import { DEFAULT_MAX_DATA_POINTS, normalizeNamedValues, sampleData, warnDataLimit } from "../utils/data";
 const props = defineProps({
   data: { type: Array, required: true },
+  nameKey: { type: null, required: false },
+  valueKey: { type: null, required: false },
   categories: { type: Object, required: true },
   height: { type: Number, required: true },
   variant: { type: String, required: false },
@@ -31,9 +36,14 @@ const props = defineProps({
   legendStyle: { type: [String, Object], required: false },
   hideTooltip: { type: Boolean, required: false },
   tooltipTitleFormatter: { type: Function, required: false },
-  tooltip: { type: Object, required: false },
   theme: { type: Object, required: false },
   duration: { type: Number, required: false },
+  ariaLabel: { type: String, required: false },
+  ariaDescription: { type: String, required: false },
+  accessibleDataTable: { type: Boolean, required: false, default: true },
+  maxDataPoints: { type: Number, required: false },
+  emptyLabel: { type: String, required: false },
+  error: { type: String, required: false },
   legendVariant: { type: String, required: false },
   tooltipVariant: { type: String, required: false },
   tooltipRoundness: { type: String, required: false },
@@ -43,10 +53,14 @@ const props = defineProps({
 const themeVars = computed(() => themeToVars(props.theme));
 const bars = computed(() => {
   const cats = categoriesToSeries(props.categories);
-  return props.data.map((value, i) => ({
-    name: cats[i]?.name ?? String(i),
+  const normalized = normalizeNamedValues(props.data, cats.map((cat) => String(cat.name)), props.nameKey, props.valueKey);
+  const limit = props.maxDataPoints ?? DEFAULT_MAX_DATA_POINTS;
+  warnDataLimit("RadialBarChart", normalized.length, limit);
+  return sampleData(normalized, limit).map(({ row, value, sourceIndex, name }) => ({
+    ...row && typeof row === "object" ? row : {},
+    name,
     value,
-    fill: cats[i]?.color ?? `var(--chart-color-${i})`
+    fill: cats[sourceIndex]?.color ?? `var(--vc-series-${sourceIndex % 8})`
   }));
 });
 const angles = computed(() => {
@@ -57,7 +71,26 @@ const angles = computed(() => {
   };
 });
 const tooltipContent = computed(
-  () => tooltipContentFor(props.tooltipVariant, props.tooltipRoundness)
+  () => tooltipContentFor(props.tooltipVariant, props.tooltipRoundness, props.tooltipTitleFormatter)
+);
+const accessibleRows = computed(() => bars.value.map((bar) => ({ label: bar.name, values: [{ label: "Value", value: bar.value }] })));
+const hiddenTooltipContent = () => null;
+const radiusInPixels = (radius, fallback) => {
+  if (typeof radius === "number") return radius;
+  const percentage = Number.parseFloat(radius);
+  return Number.isFinite(percentage) ? props.height / 2 * percentage / 100 : fallback;
+};
+const hoverStrokeWidth = computed(() => {
+  const outer = radiusInPixels(props.outerRadius ?? "100%", props.height / 2);
+  const inner = radiusInPixels(props.innerRadius ?? "30%", props.height * 0.15);
+  return Math.max((outer - inner) / Math.max(bars.value.length, 1) * 0.9, 1);
+});
+const cursor = computed(
+  () => resolveHoverVisible(props.theme) ? {
+    fill: "none",
+    stroke: "var(--vc-hover-fill)",
+    strokeWidth: hoverStrokeWidth.value
+  } : false
 );
 const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
 const legendWrapperStyle = computed(
@@ -71,13 +104,15 @@ const onCenter = (next) => {
 </script>
 
 <template>
-  <div class="vue-chrts" :style="themeVars">
+  <div class="vue-chrts" role="group" :aria-label="ariaLabel ?? 'Radial bar chart'" :style="themeVars">
+    <ChartAccessibility :label="ariaLabel ?? 'Radial bar chart'" :description="ariaDescription" :rows="accessibleRows" :show-table="accessibleDataTable !== false" />
     <ChartSkeleton
       v-if="loading"
       :height="height ?? 200"
       shape="ring"
       :label="loadingLabel ?? 'Loading'"
     />
+    <ChartEmptyState v-else-if="error || bars.length === 0" :height="height" :message="error || emptyLabel" />
     <ChartContainer v-else width="100%" :height="height">
     <VccsRadialBarChart
       :data="bars"
@@ -94,8 +129,13 @@ const onCenter = (next) => {
         :background="background ?? true"
         :corner-radius="cornerRadius"
         :is-animation-active="duration !== void 0 && duration !== 0"
+        :transition="{ duration: (duration ?? 400) / 1e3, ease: 'easeOut' }"
+      />
+      <Tooltip
+        :content="hideTooltip ? hiddenTooltipContent : tooltipContent"
+        :cursor="cursor"
+        :is-animation-active="false"
       />
-      <Tooltip v-if="!hideTooltip" :content="tooltipContent" :is-animation-active="false" />
       <Legend
         v-if="!hideLegend"
         :align="legend.align"

package/dist/runtime/components/SankeyChart.vue

@@ -4,7 +4,10 @@ import { Sankey, Tooltip } from "vccs";
 import ChartContainer from "./internal/ChartContainer";
 import ChartSkeleton from "./internal/ChartSkeleton.vue";
 import ChartTooltip from "./internal/ChartTooltip.vue";
+import ChartEmptyState from "./internal/ChartEmptyState.vue";
+import ChartAccessibility from "./internal/ChartAccessibility.vue";
 import { themeToVars } from "../utils/theme";
+import { DEFAULT_MAX_DATA_POINTS, sampleData, toFiniteNumber, warnDataLimit } from "../utils/data";
 const props = defineProps({
   data: { type: Object, required: true },
   height: { type: Number, required: true },
@@ -22,9 +25,14 @@ const props = defineProps({
   nodePadding: { type: Number, required: false, default: 10 },
   iterations: { type: Number, required: false, default: 32 },
   hideTooltip: { type: Boolean, required: false },
-  tooltip: { type: Object, required: false },
   theme: { type: Object, required: false },
   duration: { type: Number, required: false, default: 800 },
+  ariaLabel: { type: String, required: false },
+  ariaDescription: { type: String, required: false },
+  accessibleDataTable: { type: Boolean, required: false, default: true },
+  maxDataPoints: { type: Number, required: false },
+  emptyLabel: { type: String, required: false },
+  error: { type: String, required: false },
   legendVariant: { type: String, required: false },
   tooltipVariant: { type: String, required: false },
   tooltipRoundness: { type: String, required: false },
@@ -47,11 +55,11 @@ const nodeLabel = (node) => {
   const input = node;
   return props.label?.(input) ?? String(input.name ?? input.id ?? "");
 };
-const resolvedNodeColor = (node) => props.nodeColor?.(node) ?? "var(--chart-color-0)";
+const resolvedNodeColor = (node) => props.nodeColor?.(node) ?? "var(--vc-series-0)";
 const resolvedLinkColor = (link) => {
   const layoutLink = link;
   const inputLink = layoutLink.__source === void 0 ? layoutLink : { ...layoutLink, source: layoutLink.__source };
-  return props.linkColor?.(inputLink) ?? "var(--chart-color-0)";
+  return props.linkColor?.(inputLink) ?? "var(--vc-series-0)";
 };
 function handleMouseEnter(item, type) {
   activeColor.value = type === "node" ? resolvedNodeColor(item) : resolvedLinkColor(item);
@@ -66,30 +74,45 @@ const chartData = computed(() => {
     if (node.id !== void 0) ids.set(node.id, index);
   });
   const resolveEndpoint = (endpoint) => ids.has(endpoint) ? ids.get(endpoint) : endpoint;
-  return {
-    nodes,
-    links: props.data.links.map((link) => ({
+  const links = props.data.links.flatMap((link) => {
+    const value = toFiniteNumber(props.linkValue?.(link) ?? link.value ?? 0);
+    if (value === void 0 || value < 0) return [];
+    return [{
       ...link,
       __source: link.source,
       source: resolveEndpoint(link.source),
       target: resolveEndpoint(link.target),
-      value: props.linkValue?.(link) ?? link.value ?? 0
-    }))
+      value
+    }];
+  });
+  const limit = props.maxDataPoints ?? DEFAULT_MAX_DATA_POINTS;
+  warnDataLimit("SankeyChart", links.length, limit);
+  return {
+    nodes,
+    links: sampleData(links, limit)
   };
 });
+const accessibleRows = computed(() => chartData.value.links.map((link) => ({
+  label: `${String(link.__source)} to ${String(link.target)}`,
+  values: [{ label: "Value", value: link.value }]
+})));
 </script>
 
 <template>
   <div
     class="vc-sankey vue-chrts"
+    role="group"
+    :aria-label="ariaLabel ?? 'Sankey chart'"
     :style="{ position: 'relative', width: '100%', height: `${height}px`, ...themeVars }"
   >
+    <ChartAccessibility :label="ariaLabel ?? 'Sankey chart'" :description="ariaDescription" :rows="accessibleRows" :show-table="accessibleDataTable !== false" />
     <ChartSkeleton
       v-if="loading"
       :height="height"
       shape="bars"
       :label="loadingLabel ?? 'Loading'"
     />
+    <ChartEmptyState v-else-if="error || chartData.links.length === 0" :height="height" :message="error || emptyLabel" />
     <ChartContainer v-else width="100%" height="100%">
       <Sankey
         :data="chartData"
@@ -112,7 +135,7 @@ const chartData = computed(() => {
               :width="nodeProps.width"
               :height="nodeProps.height"
               :fill="resolvedNodeColor(nodeProps.payload)"
-              stroke="var(--vc-surface, #fff)"
+              stroke="var(--vc-surface-bg, #fff)"
             />
             <text
               :x="nodeProps.payload.depth === 0 ? nodeProps.x - 8 : nodeProps.x + nodeProps.width + 8"

package/dist/runtime/components/StatusTrackerChart.vue

@@ -1,6 +1,11 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from "vue";
 import { categoriesToSeries } from "../utils/categories";
+import ChartAccessibility from "./internal/ChartAccessibility.vue";
+import ChartEmptyState from "./internal/ChartEmptyState.vue";
+import ChartSkeleton from "./internal/ChartSkeleton.vue";
+import { toFiniteNumber } from "../utils/data";
+import { formatNumber } from "../utils/format";
 const props = defineProps({
   data: { type: Array, required: true },
   categories: { type: Object, required: true },
@@ -21,7 +26,18 @@ const props = defineProps({
   hideHeader: { type: Boolean, required: false, default: false },
   hideLegend: { type: Boolean, required: false, default: false },
   hideTooltip: { type: Boolean, required: false, default: false },
-  rounded: { type: Boolean, required: false, default: true }
+  rounded: { type: Boolean, required: false, default: true },
+  ariaLabel: { type: String, required: false },
+  ariaDescription: { type: String, required: false },
+  accessibleDataTable: { type: Boolean, required: false, default: true },
+  maxDataPoints: { type: Number, required: false },
+  emptyLabel: { type: String, required: false },
+  error: { type: String, required: false },
+  legendVariant: { type: String, required: false },
+  tooltipVariant: { type: String, required: false },
+  tooltipRoundness: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  loadingLabel: { type: String, required: false }
 });
 const containerRef = ref(null);
 const containerWidth = ref(0);
@@ -59,9 +75,9 @@ const visibleBars = computed(() => {
       const dataIndex = start + visibleIndex;
       const status = props.statusAccessor?.(datum, dataIndex) ?? datum.status;
       const category = categoryMap.value.get(status);
-      const value = props.valueAccessor?.(datum, dataIndex) ?? datum.value;
+      const value = toFiniteNumber(props.valueAccessor?.(datum, dataIndex) ?? datum.value);
       const label = props.labelAccessor?.(datum, dataIndex) ?? datum.label ?? category?.name ?? status;
-      const formattedValue = typeof value === "number" ? props.valueFormatter?.(value, datum, dataIndex) ?? value.toLocaleString() : void 0;
+      const formattedValue = typeof value === "number" ? props.valueFormatter?.(value, datum, dataIndex) ?? formatNumber(value) : void 0;
       return {
         key: `${dataIndex}-${status}`,
         status,
@@ -81,10 +97,15 @@ const barStyle = computed(() => ({
   width: `${Math.max(1, props.barWidth)}px`
 }));
 const ariaLabel = computed(() => {
+  if (props.ariaLabel) return props.ariaLabel;
   const prefix = props.title ? `${props.title}: ` : "";
   const samples = props.data.length === 1 ? "1 status sample" : `${props.data.length} status samples`;
   return `${prefix}${samples}`;
 });
+const accessibleRows = computed(() => visibleBars.value.filter((bar) => !bar.isEmpty).map((bar) => ({
+  label: bar.label,
+  values: [{ label: "Status", value: bar.status }]
+})));
 function updateContainerWidth() {
   containerWidth.value = containerRef.value?.offsetWidth ?? 0;
 }
@@ -101,6 +122,7 @@ onUnmounted(() => {
 
 <template>
   <section class="vc-status-tracker vue-chrts" :aria-label="ariaLabel">
+    <ChartAccessibility :label="ariaLabel" :description="ariaDescription" :rows="accessibleRows" :show-table="accessibleDataTable !== false" />
     <header v-if="!hideHeader && (title || summary !== void 0)" class="vc-status-tracker__header">
       <h3 v-if="title" class="vc-status-tracker__title">
         {{ title }}
@@ -110,11 +132,13 @@ onUnmounted(() => {
       </p>
     </header>
 
+    <ChartSkeleton v-if="loading" :height="height" shape="bars" :label="loadingLabel ?? 'Loading'" />
+    <ChartEmptyState v-else-if="error || data.length === 0" :height="height" :message="error || emptyLabel" />
     <div
+      v-else
       ref="containerRef"
       class="vc-status-tracker__track"
-      role="img"
-      :aria-label="ariaLabel"
+      role="list"
       :style="trackerStyle"
     >
       <span
@@ -129,15 +153,17 @@ onUnmounted(() => {
         :style="{ ...barStyle, backgroundColor: bar.color }"
         :title="hideTooltip ? void 0 : bar.title"
         :aria-label="bar.title"
+        :tabindex="bar.isEmpty ? void 0 : 0"
+        role="listitem"
       />
     </div>
 
-    <div v-if="startLabel || endLabel" class="vc-status-tracker__labels">
+    <div v-if="!loading && !error && data.length && (startLabel || endLabel)" class="vc-status-tracker__labels">
       <span>{{ startLabel }}</span>
       <span>{{ endLabel }}</span>
     </div>
 
-    <ul v-if="!hideLegend && legendItems.length" class="vc-status-tracker__legend">
+    <ul v-if="!loading && !error && data.length && !hideLegend && legendItems.length" class="vc-status-tracker__legend">
       <li v-for="item in legendItems" :key="item.dataKey" class="vc-status-tracker__legend-item">
         <span class="vc-status-tracker__legend-dot" :style="{ backgroundColor: item.color }" />
         <span>{{ item.name }}</span>

package/dist/runtime/components/internal/CandlestickTooltip.vue

@@ -1,16 +1,18 @@
 <script setup>
 import { computed } from "vue";
+import { formatNumber } from "../../utils/format";
 const props = defineProps({
   row: { type: Object, required: true },
   upColor: { type: String, required: true },
   downColor: { type: String, required: true },
-  valueFormatter: { type: Function, required: false }
+  valueFormatter: { type: Function, required: false },
+  title: { type: [String, Number], required: false }
 });
 const directionColor = computed(
   () => props.row.close >= props.row.open ? props.upColor : props.downColor
 );
 function fmt(value) {
-  return props.valueFormatter ? props.valueFormatter(value) : value.toLocaleString();
+  return props.valueFormatter ? props.valueFormatter(value) : formatNumber(value);
 }
 const rows = computed(() => {
   const r = props.row;
@@ -19,14 +21,14 @@ const rows = computed(() => {
     { name: "High", value: fmt(r.high), color: props.upColor },
     { name: "Low", value: fmt(r.low), color: props.downColor },
     { name: "Close", value: fmt(r.close), color: directionColor.value },
-    ...r.volume != null && !Number.isNaN(r.volume) ? [{ name: "Volume", value: r.volume.toLocaleString(), color: "var(--vc-tooltip-muted, oklch(0.556 0 0))" }] : []
+    ...r.volume != null && !Number.isNaN(r.volume) ? [{ name: "Volume", value: formatNumber(r.volume), color: "var(--vc-tooltip-muted, oklch(0.556 0 0))" }] : []
   ];
 });
 </script>
 
 <template>
   <div class="vc-tooltip">
-    <p class="vc-tooltip__label">{{ row.label }}</p>
+    <p class="vc-tooltip__label">{{ title ?? row.label }}</p>
     <ul class="vc-tooltip__list">
       <li v-for="item in rows" :key="item.name" class="vc-tooltip__item">
         <span class="vc-tooltip__dot" :style="{ background: item.color }" />

package/dist/runtime/components/internal/CandlestickTooltip.vue.d.ts

@@ -11,6 +11,7 @@ type __VLS_Props = {
     upColor: string;
     downColor: string;
     valueFormatter?: (value: number) => string;
+    title?: string | number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;