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

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

@@ -1,12 +1,13 @@
 import { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
 import { EChartsOption } from '../../../composable';
-import { TooltipStyleClasses, Translator } from '../../tooltips';
+import { ChartTooltipValueFormatter, TooltipStyleClasses, Translator } from '../../tooltips';
 export interface BubbleChartOptionsInput {
     readonly series: readonly FluxStatisticsChartBubbleSeries[];
     readonly palette: readonly string[];
     readonly t: Translator;
     readonly styles: TooltipStyleClasses;
     readonly tooltip?: boolean;
+    readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
     readonly xAxisLabels?: boolean;
     readonly yAxisLabels?: boolean;
     readonly splitLines?: boolean;

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

@@ -1,12 +1,13 @@
 import { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
 import { EChartsOption } from '../../../composable';
-import { TooltipStyleClasses, Translator } from '../../tooltips';
+import { ChartTooltipValueFormatter, TooltipStyleClasses, Translator } from '../../tooltips';
 export interface ScatterChartOptionsInput {
     readonly series: readonly FluxStatisticsChartScatterSeries[];
     readonly palette: readonly string[];
     readonly t: Translator;
     readonly styles: TooltipStyleClasses;
     readonly tooltip?: boolean;
+    readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
     readonly xAxisLabels?: boolean;
     readonly yAxisLabels?: boolean;
     readonly splitLines?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/statistics",
     "description": "Statistics components for the Flux UI library.",
-    "version": "3.2.0-beta.1",
+    "version": "3.2.0-beta.11",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -49,11 +49,11 @@
     "types": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/common": "^3.45.0",
-        "@basmilius/utils": "^3.45.0",
-        "@flux-ui/components": "3.2.0-beta.1",
-        "@flux-ui/internals": "3.2.0-beta.1",
-        "@flux-ui/types": "3.2.0-beta.1",
+        "@basmilius/common": "^3.50.0",
+        "@basmilius/utils": "^3.50.0",
+        "@flux-ui/components": "3.2.0-beta.11",
+        "@flux-ui/internals": "3.2.0-beta.11",
+        "@flux-ui/types": "3.2.0-beta.11",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {
@@ -63,14 +63,14 @@
         "vue-i18n": "^11.4.6"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.45.0",
+        "@basmilius/vite-preset": "^3.50.0",
         "@types/lodash-es": "^4.17.12",
-        "@types/node": "^26.0.1",
+        "@types/node": "^26.1.0",
         "@vitejs/plugin-vue": "^6.0.7",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.100.0",
         "typescript": "^6.0.3",
-        "vite": "^8.1.0",
-        "vue-tsc": "^3.3.5"
+        "vite": "^8.1.3",
+        "vue-tsc": "^3.3.6"
     }
 }

package/src/component/FluxStatisticsBase.vue

@@ -1,9 +1,11 @@
 <template>
     <FluxPane :class="isSmall ? $style.statisticsBaseSmall : $style.statisticsBase">
         <div
-            v-if="title"
+            v-if="title || icon || slots.info"
             :class="$style.statisticsBaseHeader">
-            <span :class="$style.statisticsBaseHeaderTitle">
+            <span
+                v-if="title"
+                :class="$style.statisticsBaseHeaderTitle">
                 {{ title }}
             </span>
 

package/src/component/FluxStatisticsBubbleChart.vue

@@ -10,7 +10,7 @@
     import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
     import { computed } from 'vue';
     import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
-    import { buildBubbleChartOptions } from '~flux/statistics/util';
+    import { buildBubbleChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
@@ -19,6 +19,7 @@
         series,
         splitLines = false,
         tooltip = false,
+        tooltipValueFormatter,
         xAxisLabels = false,
         yAxisLabels = false
     } = defineProps<{
@@ -26,6 +27,7 @@
         readonly series: readonly FluxStatisticsChartBubbleSeries[];
         readonly splitLines?: boolean;
         readonly tooltip?: boolean;
+        readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
         readonly xAxisLabels?: boolean;
         readonly yAxisLabels?: boolean;
     }>();
@@ -38,6 +40,7 @@
         t,
         styles: $style,
         tooltip,
+        tooltipValueFormatter,
         xAxisLabels,
         yAxisLabels,
         splitLines,

package/src/component/FluxStatisticsDetailsTable.vue

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

package/src/component/FluxStatisticsLegend.vue

@@ -3,7 +3,7 @@
         ref="list"
         role="list"
         :class="containerClass">
-        <slot v-if="hasSlot"/>
+        <slot v-if="slots.default"/>
         <FluxStatisticsLegendItem
             v-else
             v-for="(item, index) in autoItems"
@@ -48,7 +48,6 @@
     // 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 ?? []);
 
     const containerClass = computed(() => {

package/src/component/FluxStatisticsScatterChart.vue

@@ -10,7 +10,7 @@
     import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
     import { computed } from 'vue';
     import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
-    import { buildScatterChartOptions } from '~flux/statistics/util';
+    import { buildScatterChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
@@ -19,6 +19,7 @@
         series,
         splitLines = false,
         tooltip = false,
+        tooltipValueFormatter,
         xAxisLabels = false,
         yAxisLabels = false
     } = defineProps<{
@@ -26,6 +27,7 @@
         readonly series: readonly FluxStatisticsChartScatterSeries[];
         readonly splitLines?: boolean;
         readonly tooltip?: boolean;
+        readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
         readonly xAxisLabels?: boolean;
         readonly yAxisLabels?: boolean;
     }>();
@@ -38,6 +40,7 @@
         t,
         styles: $style,
         tooltip,
+        tooltipValueFormatter,
         xAxisLabels,
         yAxisLabels,
         splitLines,

package/src/composable/useChartBaseSetup.ts

@@ -1,16 +1,11 @@
-import { computed, useTemplateRef, type ComputedRef } from 'vue';
 import { useI18n } from 'vue-i18n';
-import type { EChartsInstance } from './useECharts';
 
 export interface UseChartBaseSetupReturn {
     readonly t: ReturnType<typeof useI18n>['t'];
-    readonly chartInstance: ComputedRef<EChartsInstance | null>;
 }
 
 export function useChartBaseSetup(): UseChartBaseSetupReturn {
     const { t } = useI18n({ useScope: 'parent' });
-    const chartRef = useTemplateRef<{ chartInstance: EChartsInstance | null } | null>('chartRef');
-    const chartInstance = computed<EChartsInstance | null>(() => chartRef.value?.chartInstance ?? null);
 
-    return { t, chartInstance };
+    return { t };
 }

package/src/css/ChartPane.module.scss

@@ -39,6 +39,8 @@
     position: relative;
     display: block;
     align-self: center;
+    min-height: var(--min-height, auto);
+    max-height: var(--max-height, none);
 }
 
 :local(.paneHeader) + .statisticsChartPaneContainer {

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

@@ -2,7 +2,7 @@ import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
 import { merge } from 'lodash-es';
 import type { EChartsOption } from '~flux/statistics/composable';
 import { toBubbleSeries } from '../../series';
-import type { TooltipStyleClasses, Translator } from '../../tooltips';
+import type { ChartTooltipValueFormatter, TooltipStyleClasses, Translator } from '../../tooltips';
 import { buildCartesianTooltip } from '../../tooltips';
 import { buildCartesianBaseOptions } from '../buildCartesianBaseOptions';
 
@@ -12,6 +12,7 @@ export interface BubbleChartOptionsInput {
     readonly t: Translator;
     readonly styles: TooltipStyleClasses;
     readonly tooltip?: boolean;
+    readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
     readonly xAxisLabels?: boolean;
     readonly yAxisLabels?: boolean;
     readonly splitLines?: boolean;
@@ -21,7 +22,7 @@ export interface BubbleChartOptionsInput {
 export function buildBubbleChartOptions(input: BubbleChartOptionsInput): EChartsOption {
     const {
         series, palette, t, styles,
-        tooltip = false,
+        tooltip = false, tooltipValueFormatter,
         xAxisLabels = false, yAxisLabels = false, splitLines = false,
         advancedOptions = {}
     } = input;
@@ -37,7 +38,7 @@ export function buildBubbleChartOptions(input: BubbleChartOptionsInput): ECharts
     });
 
     const tooltipOptions: EChartsOption = tooltip
-        ? buildCartesianTooltip({ t, styles, getSeriesIcons: () => series.map(s => s.icon) })
+        ? buildCartesianTooltip({ t, styles, getSeriesIcons: () => series.map(s => s.icon), valueFormatter: tooltipValueFormatter })
         : { tooltip: { show: false } };
 
     const echartsSeries = series.map((s, i) =>

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

@@ -2,7 +2,7 @@ import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
 import { merge } from 'lodash-es';
 import type { EChartsOption } from '~flux/statistics/composable';
 import { toScatterSeries } from '../../series';
-import type { TooltipStyleClasses, Translator } from '../../tooltips';
+import type { ChartTooltipValueFormatter, TooltipStyleClasses, Translator } from '../../tooltips';
 import { buildCartesianTooltip } from '../../tooltips';
 import { buildCartesianBaseOptions } from '../buildCartesianBaseOptions';
 
@@ -12,6 +12,7 @@ export interface ScatterChartOptionsInput {
     readonly t: Translator;
     readonly styles: TooltipStyleClasses;
     readonly tooltip?: boolean;
+    readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
     readonly xAxisLabels?: boolean;
     readonly yAxisLabels?: boolean;
     readonly splitLines?: boolean;
@@ -21,7 +22,7 @@ export interface ScatterChartOptionsInput {
 export function buildScatterChartOptions(input: ScatterChartOptionsInput): EChartsOption {
     const {
         series, palette, t, styles,
-        tooltip = false,
+        tooltip = false, tooltipValueFormatter,
         xAxisLabels = false, yAxisLabels = false, splitLines = false,
         advancedOptions = {}
     } = input;
@@ -37,7 +38,7 @@ export function buildScatterChartOptions(input: ScatterChartOptionsInput): EChar
     });
 
     const tooltipOptions: EChartsOption = tooltip
-        ? buildCartesianTooltip({ t, styles, getSeriesIcons: () => series.map(s => s.icon) })
+        ? buildCartesianTooltip({ t, styles, getSeriesIcons: () => series.map(s => s.icon), valueFormatter: tooltipValueFormatter })
         : { tooltip: { show: false } };
 
     const echartsSeries = series.map((s, i) =>