@flux-ui/statistics 3.1.12 → 3.2.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/statistics",
     "description": "Statistics components for the Flux UI library.",
-    "version": "3.1.12",
+    "version": "3.2.0-beta.1",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,21 +51,21 @@
     "dependencies": {
         "@basmilius/common": "^3.45.0",
         "@basmilius/utils": "^3.45.0",
-        "@flux-ui/components": "3.1.12",
-        "@flux-ui/internals": "3.1.12",
-        "@flux-ui/types": "3.1.12",
+        "@flux-ui/components": "3.2.0-beta.1",
+        "@flux-ui/internals": "3.2.0-beta.1",
+        "@flux-ui/types": "3.2.0-beta.1",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {
         "echarts": "^6.1.0",
         "lodash-es": "^4.18.1",
-        "vue": "^3.6.0-beta.16",
+        "vue": "^3.6.0-beta.17",
         "vue-i18n": "^11.4.6"
     },
     "devDependencies": {
         "@basmilius/vite-preset": "^3.45.0",
         "@types/lodash-es": "^4.17.12",
-        "@types/node": "^26.0.0",
+        "@types/node": "^26.0.1",
         "@vitejs/plugin-vue": "^6.0.7",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.100.0",

package/src/component/FluxStatisticsDetailsTable.vue

@@ -1,10 +1,15 @@
 <template>
-    <div :class="$style.detailsTable">
+    <div
+        role="table"
+        :aria-label="title"
+        :class="$style.detailsTable">
         <div :class="$style.detailsTableTitle">
             {{ title }}
         </div>
 
-        <div :class="$style.detailsTableRows">
+        <div
+            role="rowgroup"
+            :class="$style.detailsTableRows">
             <slot/>
         </div>
     </div>

package/src/component/FluxStatisticsDetailsTableRow.vue

@@ -1,10 +1,16 @@
 <template>
-    <div :class="$style.detailsTableRow">
-        <span :class="$style.detailsTableRowLabel">
+    <div
+        role="row"
+        :class="$style.detailsTableRow">
+        <span
+            role="rowheader"
+            :class="$style.detailsTableRowLabel">
             {{ label }}
         </span>
 
-        <span :class="$style.detailsTableRowValue">
+        <span
+            role="cell"
+            :class="$style.detailsTableRowValue">
             {{ value }}
         </span>
     </div>

package/src/component/FluxStatisticsLegend.vue

@@ -1,5 +1,8 @@
 <template>
-    <div :class="containerClass">
+    <div
+        ref="list"
+        role="list"
+        :class="containerClass">
         <slot v-if="hasSlot"/>
         <FluxStatisticsLegendItem
             v-else
@@ -11,16 +14,19 @@
             :label="item.label"
             :value="item.value"
             @mouseenter="onItemMouseEnter(index)"
-            @mouseleave="onItemMouseLeave"/>
+            @mouseleave="onItemMouseLeave"
+            @focus="onItemMouseEnter(index)"
+            @blur="onItemMouseLeave"/>
     </div>
 </template>
 
 <script
     lang="ts"
     setup>
+    import { useFocusZone } from '@flux-ui/internals';
     import type { FluxDirection } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { computed, inject, provide, toRef, useSlots } from 'vue';
+    import { computed, inject, provide, toRef, useSlots, useTemplateRef } from 'vue';
     import { FluxStatisticsChartLegendInjectionKey, type FluxStatisticsLegendVariant, FluxStatisticsLegendVariantInjectionKey } from '~flux/statistics/composable';
     import FluxStatisticsLegendItem from './FluxStatisticsLegendItem.vue';
     import $style from '~flux/statistics/css/Legend.module.scss';
@@ -35,6 +41,12 @@
 
     const slots = useSlots();
     const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
+    const listRef = useTemplateRef('list');
+
+    // One tab stop for the whole legend; arrow keys move focus between items. Bidirectional handles
+    // every layout (detailed column, compact row/wrap/column) since it resolves the next item
+    // geometrically. Focusing an item drives the same hover sync as the mouse.
+    useFocusZone(listRef, {direction: 'bidirectional'});
 
     const hasSlot = computed(() => !!slots.default);
     const autoItems = computed(() => legendContext?.items.value ?? []);

package/src/component/FluxStatisticsLegendItem.vue

@@ -1,5 +1,7 @@
 <template>
-    <div
+    <button
+        type="button"
+        role="listitem"
         :class="clsx(
             variant === 'compact' ? $style.statisticsLegendItemCompact : $style.statisticsLegendItem,
             variant !== 'compact' && isHovered && $style.isHovered
@@ -28,7 +30,7 @@
             :class="$style.statisticsLegendItemValue">
             {{ value }}
         </span>
-    </div>
+    </button>
 </template>
 
 <script
@@ -39,6 +41,7 @@
     import { clsx } from 'clsx';
     import { computed, inject } from 'vue';
     import { FluxStatisticsLegendVariantInjectionKey } from '~flux/statistics/composable';
+    import { resolveChartColor } from '~flux/statistics/util';
     import $style from '~flux/statistics/css/Legend.module.scss';
 
     const {
@@ -54,15 +57,5 @@
     const variantRef = inject(FluxStatisticsLegendVariantInjectionKey, null);
     const variant = computed(() => variantRef?.value ?? 'detailed');
 
-    const colorValue = computed(() => {
-        if (!color) {
-            return;
-        }
-
-        if (['gray', 'primary', 'danger', 'info', 'success', 'warning'].includes(color)) {
-            return `var(--${color}-600)`;
-        }
-
-        return color;
-    });
+    const colorValue = computed(() => resolveChartColor(color));
 </script>

package/src/component/FluxStatisticsPercentageBar.vue

@@ -1,8 +1,11 @@
 <template>
-    <div :class="$style.statisticsPercentageBar">
+    <div
+        role="img"
+        :aria-label="ariaLabel"
+        :class="$style.statisticsPercentageBar">
         <div :class="clsx($style.statisticsPercentageBarTrack, hoveredIndex !== null && $style.isHoverActive)">
             <FluxTooltip
-                v-for="(item, index) of items"
+                v-for="(item, index) of normalizedItems"
                 :key="index">
                 <template #content>
                     <div :class="$style.statisticsPercentageBarTooltip">
@@ -37,16 +40,22 @@
     import { clsx } from 'clsx';
     import { computed, inject, watchEffect } from 'vue';
     import { type ChartLegendItem, FluxStatisticsChartLegendInjectionKey } from '~flux/statistics/composable';
+    import { resolveChartColor } from '~flux/statistics/util';
     import $style from '~flux/statistics/css/PercentageBar.module.scss';
 
-    const SEMANTIC_COLORS = ['gray', 'primary', 'danger', 'info', 'success', 'warning'] as const;
-
     const props = defineProps<{
         readonly items: FluxStatisticsPercentageBarItemObject[];
     }>();
 
     const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
 
+    const normalizedItems = computed(() =>
+        props.items.map(item => ({
+            ...item,
+            value: Math.max(0, item.value)
+        }))
+    );
+
     const legendItems = computed<ChartLegendItem[]>(() =>
         props.items.map(item => ({
             color: resolveColor(item.color),
@@ -56,6 +65,10 @@
         }))
     );
 
+    const ariaLabel = computed(() =>
+        props.items.map(item => `${formatPercentage(Math.max(0, item.value))} ${item.label}`).join(', ')
+    );
+
     const hoveredIndex = computed<number | null>(() => legendContext?.hoveredIndex.value ?? null);
 
     watchEffect(() => {
@@ -65,15 +78,7 @@
     });
 
     function resolveColor(color?: FluxStatisticsChartColor): string | undefined {
-        if (!color) {
-            return;
-        }
-
-        if (SEMANTIC_COLORS.includes(color as typeof SEMANTIC_COLORS[number])) {
-            return `var(--${color}-600)`;
-        }
-
-        return color;
+        return resolveChartColor(color);
     }
 
     function onSegmentEnter(index: number): void {

package/src/css/Legend.module.scss

@@ -18,17 +18,27 @@
     --color: var(--primary-600);
 
     position: relative;
+    appearance: none;
     display: flex;
     padding: 6px;
     margin: 0 -9px;
     align-items: flex-start;
     flex-flow: row nowrap;
     gap: 9px;
+    color: inherit;
+    font: inherit;
     font-size: 14px;
     line-height: 20px;
+    text-align: inherit;
     white-space: nowrap;
+    background: none;
+    border: 0;
     border-radius: var(--radius-half);
+    cursor: default;
     transition: background 120ms var(--swift-out);
+    z-index: 0;
+
+    @include mixin.focus-ring();
 }
 
 .statisticsLegendItem.isHovered {
@@ -61,13 +71,14 @@
     text-align: right;
 }
 
-.statisticsLegendItem + .statisticsLegendItem::before {
+.statisticsLegendItem:not(:focus-visible) + .statisticsLegendItem:not(:focus-visible)::before {
     position: absolute;
     top: -2px;
     left: 0;
     right: 0;
     content: '';
     border-top: 1px dashed var(--surface-stroke);
+    z-index: -1;
 }
 
 .statisticsLegendCompact {
@@ -88,13 +99,23 @@
 .statisticsLegendItemCompact {
     --color: var(--primary-600);
 
+    appearance: none;
     display: flex;
+    padding: 0;
     align-items: center;
     flex-flow: row nowrap;
     gap: 6px;
+    color: inherit;
+    font: inherit;
     font-size: 14px;
     line-height: 1;
+    text-align: inherit;
     white-space: nowrap;
+    background: none;
+    border: 0;
+    cursor: default;
+
+    @include mixin.focus-ring();
 
     .statisticsLegendItemColor {
         margin: 0;