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

package/dist/util/options/cartesian/buildCandlestickChartOptions.d.ts

@@ -1,6 +1,5 @@
 import { FluxStatisticsChartCandlestickSeries } from '@flux-ui/types';
-import { ChartLegendItem } from '../../../composable/useChartLegend';
-import { EChartsOption } from '../../../composable/useECharts';
+import { ChartLegendItem, EChartsOption } from '../../../composable';
 import { TooltipStyleClasses, Translator } from '../../tooltips';
 export interface CandlestickChartOptionsInput {
     readonly series: readonly FluxStatisticsChartCandlestickSeries[];

package/dist/util/options/circular/buildGaugeChartOptions.d.ts

@@ -1,6 +1,5 @@
 import { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
-import { ChartLegendItem } from '../../../composable/useChartLegend';
-import { EChartsOption } from '../../../composable/useECharts';
+import { ChartLegendItem, EChartsOption } from '../../../composable';
 import { TooltipStyleClasses, Translator } from '../../tooltips';
 export interface GaugeChartOptionsInput {
     readonly series: readonly FluxStatisticsChartGaugeSeries[];

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/statistics",
     "description": "Statistics components for the Flux UI library.",
-    "version": "3.0.0-next.73",
+    "version": "3.0.0-next.75",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -49,28 +49,28 @@
     "types": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/common": "^3.37.0",
-        "@basmilius/utils": "^3.37.0",
-        "@flux-ui/components": "3.0.0-next.73",
-        "@flux-ui/internals": "3.0.0-next.73",
-        "@flux-ui/types": "3.0.0-next.73",
+        "@basmilius/common": "^3.40.0",
+        "@basmilius/utils": "^3.40.0",
+        "@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": {
         "echarts": "^6.1.0",
         "lodash-es": "^4.18.1",
-        "vue": "^3.6.0-beta.12",
+        "vue": "^3.6.0-beta.13",
         "vue-i18n": "^11.4.4"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.37.0",
+        "@basmilius/vite-preset": "^3.40.0",
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^25.9.1",
         "@vitejs/plugin-vue": "^6.0.7",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.100.0",
         "typescript": "^6.0.3",
-        "vite": "^8.0.14",
-        "vue-tsc": "^3.3.2"
+        "vite": "^8.0.16",
+        "vue-tsc": "^3.3.3"
     }
 }

package/src/component/FluxStatisticsAreaChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartAreaSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildAreaChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsBarChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartBarSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildBarChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsBoxPlotChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartBoxPlotSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildBoxPlotChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsBubbleChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildBubbleChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsCandlestickChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartCandlestickSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildCandlestickChartOptions, candlestickLegendItemBuilder } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsDonutChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSlicesSetup } from '~flux/statistics/composable';
     import { buildDonutChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsHeatmapChart.vue

@@ -8,7 +8,7 @@
     setup>
     import type { FluxStatisticsChartHeatmapSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartBaseSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartBaseSetup } from '~flux/statistics/composable';
     import { buildHeatmapChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

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/component/FluxStatisticsLineChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartLineSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildLineChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsMixedChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartMixedSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildMixedChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsPercentageBar.vue

@@ -36,7 +36,7 @@
     import type { FluxStatisticsChartColor, FluxStatisticsPercentageBarItemObject } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { computed, inject, watchEffect } from 'vue';
-    import { FluxStatisticsChartLegendInjectionKey, type ChartLegendItem } from '~flux/statistics/composable';
+    import { type ChartLegendItem, FluxStatisticsChartLegendInjectionKey } from '~flux/statistics/composable';
     import $style from '~flux/statistics/css/PercentageBar.module.scss';
 
     const SEMANTIC_COLORS = ['gray', 'primary', 'danger', 'info', 'success', 'warning'] as const;

package/src/component/FluxStatisticsPieChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSlicesSetup } from '~flux/statistics/composable';
     import { buildPieChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsPolarAreaChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSlicesSetup } from '~flux/statistics/composable';
     import { buildPolarAreaChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsRadarChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartRadarIndicator, FluxStatisticsChartRadarSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildRadarChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsRadialBar.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildGaugeChartOptions, gaugeLegendItemBuilder } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsScatterChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildScatterChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsTreemapChart.vue

@@ -8,7 +8,7 @@
     setup>
     import type { FluxStatisticsChartTreemapNode } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartBaseSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartBaseSetup } from '~flux/statistics/composable';
     import { buildTreemapChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/index.ts

@@ -14,8 +14,8 @@ export { default as FluxStatisticsDonutChart } from './FluxStatisticsDonutChart.
 export { default as FluxStatisticsEmpty } from './FluxStatisticsEmpty.vue';
 export { default as FluxStatisticsGrid } from './FluxStatisticsGrid.vue';
 export { default as FluxStatisticsHeatmapChart } from './FluxStatisticsHeatmapChart.vue';
-export { default as FluxStatisticsLineChart } from './FluxStatisticsLineChart.vue';
 export { default as FluxStatisticsKpi } from './FluxStatisticsKpi.vue';
+export { default as FluxStatisticsLineChart } from './FluxStatisticsLineChart.vue';
 export { default as FluxStatisticsLegend } from './FluxStatisticsLegend.vue';
 export { default as FluxStatisticsLegendItem } from './FluxStatisticsLegendItem.vue';
 export { default as FluxStatisticsLegendScope } from './FluxStatisticsLegendScope.vue';

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;
+    }
+}

package/src/index.ts

@@ -1,4 +1,4 @@
-import { amber500, blue500, cyan500, emerald500, fuchsia500, green500, indigo500, lime500, orange500, pink500, purple500, red500, rose50, sky500, teal500, violet500, yellow500 } from '@flux-ui/internals';
+import { amber500, blue500, cyan500, emerald500, fuchsia500, green500, indigo500, lime500, orange500, pink500, purple500, red500, rose500, sky500, teal500, violet500, yellow500 } from '@flux-ui/internals';
 import type { FluxStatisticsChartColor } from '@flux-ui/types';
 
 export * from './component';
@@ -30,5 +30,5 @@ export const CHART_COLORFUL_COLORS: readonly FluxStatisticsChartColor[] = [
     purple500,
     fuchsia500,
     pink500,
-    rose50
+    rose500
 ] as FluxStatisticsChartColor[];

package/src/util/options/cartesian/buildCandlestickChartOptions.ts

@@ -1,7 +1,6 @@
 import type { FluxStatisticsChartCandlestickSeries } from '@flux-ui/types';
 import { merge } from 'lodash-es';
-import type { ChartLegendItem } from '~flux/statistics/composable/useChartLegend';
-import type { EChartsOption } from '~flux/statistics/composable/useECharts';
+import type { ChartLegendItem, EChartsOption } from '~flux/statistics/composable';
 import { resolveChartColor, toCandlestickSeries } from '../../series';
 import type { TooltipStyleClasses, Translator } from '../../tooltips';
 import { buildCartesianTooltip } from '../../tooltips';

package/src/util/options/circular/buildGaugeChartOptions.ts

@@ -1,7 +1,6 @@
 import type { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
 import { merge } from 'lodash-es';
-import type { ChartLegendItem } from '~flux/statistics/composable/useChartLegend';
-import type { EChartsOption } from '~flux/statistics/composable/useECharts';
+import type { ChartLegendItem, EChartsOption } from '~flux/statistics/composable';
 import { toGaugeSeries } from '../../series';
 import type { TooltipStyleClasses, Translator } from '../../tooltips';
 import { buildGaugeTooltip } from '../../tooltips';