@flux-ui/statistics 3.0.0-next.74 → 3.0.0-next.75

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/statistics",
     "description": "Statistics components for the Flux UI library.",
-    "version": "3.0.0-next.74",
+    "version": "3.0.0-next.75",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,9 +51,9 @@
     "dependencies": {
         "@basmilius/common": "^3.40.0",
         "@basmilius/utils": "^3.40.0",
-        "@flux-ui/components": "3.0.0-next.74",
-        "@flux-ui/internals": "3.0.0-next.74",
-        "@flux-ui/types": "3.0.0-next.74",
+        "@flux-ui/components": "3.0.0-next.75",
+        "@flux-ui/internals": "3.0.0-next.75",
+        "@flux-ui/types": "3.0.0-next.75",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {

package/src/component/FluxStatisticsLegend.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="$style.statisticsLegend">
+    <div :class="containerClass">
         <slot v-if="hasSlot"/>
         <FluxStatisticsLegendItem
             v-else
@@ -18,17 +18,37 @@
 <script
     lang="ts"
     setup>
-    import { computed, inject, useSlots } from 'vue';
-    import { FluxStatisticsChartLegendInjectionKey } from '~flux/statistics/composable';
+    import type { FluxDirection } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, inject, provide, toRef, useSlots } 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';
 
+    const {
+        direction = 'horizontal',
+        variant = 'detailed'
+    } = defineProps<{
+        readonly direction?: FluxDirection;
+        readonly variant?: FluxStatisticsLegendVariant;
+    }>();
+
     const slots = useSlots();
     const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
 
     const hasSlot = computed(() => !!slots.default);
     const autoItems = computed(() => legendContext?.items.value ?? []);
 
+    const containerClass = computed(() => {
+        if (variant === 'compact') {
+            return clsx($style.statisticsLegendCompact, direction === 'vertical' ? $style.isVertical : $style.isHorizontal);
+        }
+
+        return $style.statisticsLegend;
+    });
+
+    provide(FluxStatisticsLegendVariantInjectionKey, toRef(() => variant));
+
     function onItemMouseEnter(index: number): void {
         if (legendContext) {
             legendContext.hoveredIndex.value = index;

package/src/component/FluxStatisticsLegendItem.vue

@@ -1,6 +1,9 @@
 <template>
     <div
-        :class="clsx($style.statisticsLegendItem, isHovered && $style.isHovered)"
+        :class="clsx(
+            variant === 'compact' ? $style.statisticsLegendItemCompact : $style.statisticsLegendItem,
+            variant !== 'compact' && isHovered && $style.isHovered
+        )"
         :style="{
             '--color': colorValue
         }">
@@ -34,7 +37,8 @@
     import { FluxIcon } from '@flux-ui/components';
     import type { FluxColor, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { computed } from 'vue';
+    import { computed, inject } from 'vue';
+    import { FluxStatisticsLegendVariantInjectionKey } from '~flux/statistics/composable';
     import $style from '~flux/statistics/css/Legend.module.scss';
 
     const {
@@ -47,6 +51,9 @@
         readonly value?: string | number;
     }>();
 
+    const variantRef = inject(FluxStatisticsLegendVariantInjectionKey, null);
+    const variant = computed(() => variantRef?.value ?? 'detailed');
+
     const colorValue = computed(() => {
         if (!color) {
             return;

package/src/composable/index.ts

@@ -10,3 +10,5 @@ export type { UseChartSlicesSetupReturn } from './useChartSlicesSetup';
 export { useChartSlicesSetup } from './useChartSlicesSetup';
 export type { EChartsInstance, EChartsOption, UseEChartsReturn } from './useECharts';
 export { useECharts } from './useECharts';
+export type { FluxStatisticsLegendVariant } from './useLegendVariant';
+export { FluxStatisticsLegendVariantInjectionKey } from './useLegendVariant';

package/src/composable/useLegendVariant.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export type FluxStatisticsLegendVariant = 'detailed' | 'compact';
+
+export const FluxStatisticsLegendVariantInjectionKey: InjectionKey<Ref<FluxStatisticsLegendVariant>> = Symbol('flux-statistics-legend-variant');

package/src/css/Legend.module.scss

@@ -68,3 +68,48 @@
     content: '';
     border-top: 1px dashed var(--surface-stroke);
 }
+
+.statisticsLegendCompact {
+    display: flex;
+    user-select: none;
+
+    &.isHorizontal {
+        flex-flow: row wrap;
+        gap: 12px 18px;
+    }
+
+    &.isVertical {
+        flex-flow: column;
+        gap: 12px;
+    }
+}
+
+.statisticsLegendItemCompact {
+    --color: var(--primary-600);
+
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    gap: 6px;
+    font-size: 14px;
+    line-height: 1;
+    white-space: nowrap;
+
+    .statisticsLegendItemColor {
+        margin: 0;
+        border-radius: var(--radius-full);
+    }
+
+    .statisticsLegendItemIcon {
+        margin: 0;
+    }
+
+    .statisticsLegendItemLabel {
+        flex-grow: 0;
+        font-weight: 400;
+    }
+
+    .statisticsLegendItemValue {
+        margin-left: 0;
+    }
+}