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

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

@@ -12,5 +12,5 @@ export interface CandlestickChartOptionsInput {
     readonly splitLines?: boolean;
     readonly advancedOptions?: EChartsOption;
 }
-export declare function candlestickLegendItemBuilder(s: FluxStatisticsChartCandlestickSeries): readonly ChartLegendItem[];
+export declare function candlestickLegendItemBuilder(s: FluxStatisticsChartCandlestickSeries, _color: string, index: number): readonly ChartLegendItem[];
 export declare function buildCandlestickChartOptions(input: CandlestickChartOptionsInput): EChartsOption;

package/dist/util/tooltips/buildCandlestickTooltip.d.ts

@@ -0,0 +1,22 @@
+import { FluxIconName, FluxStatisticsChartColor } from '@flux-ui/types';
+import { EChartsOption } from '../../composable';
+import { TooltipStyleClasses, Translator } from './types';
+export interface CandlestickTooltipPoint {
+    readonly label?: string;
+    readonly open: number;
+    readonly close: number;
+    readonly low: number;
+    readonly high: number;
+}
+export interface CandlestickTooltipInput {
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly getSeries: () => readonly {
+        readonly name?: string;
+        readonly icon?: FluxIconName;
+        readonly positiveColor?: FluxStatisticsChartColor;
+        readonly negativeColor?: FluxStatisticsChartColor;
+        readonly data: readonly CandlestickTooltipPoint[];
+    }[];
+}
+export declare function buildCandlestickTooltip(input: CandlestickTooltipInput): EChartsOption;

package/dist/util/tooltips/buildTreemapTooltip.d.ts

@@ -3,7 +3,9 @@ import { TooltipStyleClasses, Translator } from './types';
 export interface TreemapTooltipNode {
     readonly name: string;
     readonly value?: number;
-    readonly color?: string;
+    readonly itemStyle?: {
+        readonly color?: string;
+    };
 }
 export interface TreemapTooltipInput {
     readonly t: Translator;

package/dist/util/tooltips/index.d.ts

@@ -1,5 +1,7 @@
 export type { BoxPlotTooltipInput, BoxPlotTooltipPoint } from './buildBoxPlotTooltip';
 export { buildBoxPlotTooltip } from './buildBoxPlotTooltip';
+export type { CandlestickTooltipInput, CandlestickTooltipPoint } from './buildCandlestickTooltip';
+export { buildCandlestickTooltip } from './buildCandlestickTooltip';
 export type { CartesianTooltipInput } from './buildCartesianTooltip';
 export { buildCartesianTooltip } from './buildCartesianTooltip';
 export type { GaugeTooltipInput } from './buildGaugeTooltip';

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",
     "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",
+        "@flux-ui/internals": "3.0.0",
+        "@flux-ui/types": "3.0.0",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {

package/src/component/FluxStatisticsChart.vue

@@ -10,7 +10,7 @@
     import { merge } from 'lodash-es';
     import { computed, useTemplateRef } from 'vue';
     import { type EChartsOption, useECharts } from '~flux/statistics/composable';
-    import { buildBaseOptions, deepResolveCssVars } from '~flux/statistics/util';
+    import { buildBaseOptions, deepResolveCssVars, useCssVarVersion } from '~flux/statistics/util';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
@@ -23,7 +23,11 @@
 
     const defaults = buildBaseOptions();
 
+    const themeVersion = useCssVarVersion();
+
     const mergedOptions = computed<EChartsOption>(() => {
+        themeVersion.value;
+
         const merged = merge({}, defaults, options) as EChartsOption & { color?: unknown; series?: unknown };
 
         if (options && (options as { color?: unknown }).color !== undefined) {

package/src/component/FluxStatisticsComparison.vue

@@ -73,12 +73,21 @@
     const formattedCurrent = computed(() => format ? format(current) : current);
     const formattedPrevious = computed(() => format ? format(previous) : previous);
 
+    const isDeltaIndeterminate = computed(() => previous === 0 && current !== 0);
+
     const deltaValue = computed(() => {
         if (previous === 0) {
             return 0;
         }
 
-        return ((current - previous) / Math.abs(previous)) * 100;
+        const delta = ((current - previous) / Math.abs(previous)) * 100;
+        const rounded = Math.round(delta * 10) / 10;
+
+        if (rounded === 0) {
+            return 0;
+        }
+
+        return delta;
     });
 
     const deltaColor = computed<FluxColor>(() => {
@@ -106,6 +115,10 @@
     });
 
     const formattedDelta = computed(() => {
+        if (isDeltaIndeterminate.value) {
+            return '—';
+        }
+
         const sign = deltaValue.value > 0 ? '+' : '';
 
         return `${sign}${deltaValue.value.toFixed(1)}%`;

package/src/component/FluxStatisticsLegend.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="$style.statisticsLegend">
+    <div :class="containerClass">
         <slot v-if="hasSlot"/>
         <FluxStatisticsLegendItem
             v-else
             v-for="(item, index) in autoItems"
-            :key="item.label"
+            :key="`${index}-${item.label}`"
             :color="item.color as `#${string}` | undefined"
             :icon="item.icon"
             :is-hovered="legendContext?.hoveredIndex.value === index"
@@ -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/useChartHoverSync.ts

@@ -23,13 +23,22 @@ export function useChartHoverSync(
     let attached: EChartsInstance | null = null;
     let syncing = false;
 
+    const toSeriesIndex = (itemIndex: number): number => {
+        return legendContext.items.value[itemIndex]?.seriesIndex ?? itemIndex;
+    };
+
+    const toItemIndex = (seriesIndex: number): number => {
+        const mapped = legendContext.items.value.findIndex(item => item.seriesIndex === seriesIndex);
+        return mapped !== -1 ? mapped : seriesIndex;
+    };
+
     const onMouseOver = (params: { seriesIndex?: number; dataIndex?: number }) => {
         if (syncing) {
             return;
         }
 
         const index = mode === 'series'
-            ? params.seriesIndex ?? null
+            ? (params.seriesIndex !== undefined ? toItemIndex(params.seriesIndex) : null)
             : params.dataIndex ?? null;
 
         legendContext.hoveredIndex.value = index;
@@ -51,7 +60,7 @@ export function useChartHoverSync(
 
             if (index !== null) {
                 if (mode === 'series') {
-                    instance.dispatchAction({ type: 'highlight', seriesIndex: index });
+                    instance.dispatchAction({ type: 'highlight', seriesIndex: toSeriesIndex(index) });
                 } else {
                     instance.dispatchAction({ type: 'highlight', seriesIndex: forcedSeriesIndex, dataIndex: index });
                 }

package/src/composable/useChartLegend.ts

@@ -5,6 +5,7 @@ export interface ChartLegendItem {
     readonly color?: string;
     readonly icon?: FluxIconName;
     readonly label: string;
+    readonly seriesIndex?: number;
     readonly value?: string | number;
 }
 

package/src/composable/useECharts.ts

@@ -1,6 +1,6 @@
 import { useResizeObserver } from '@basmilius/common';
 import { init, type EChartsCoreOption } from 'echarts/core';
-import { markRaw, onBeforeUnmount, onMounted, ref, toValue, type MaybeRefOrGetter, type Ref } from 'vue';
+import { markRaw, onBeforeUnmount, onMounted, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from 'vue';
 import '~flux/statistics/echarts';
 
 export type EChartsOption = EChartsCoreOption;
@@ -27,6 +27,10 @@ export function useECharts(
         chartInstance.value.setOption(toValue(options));
     });
 
+    watch(() => toValue(options), value => {
+        chartInstance.value?.setOption(value, {notMerge: true});
+    });
+
     onBeforeUnmount(() => {
         if (pendingResize !== null) {
             cancelAnimationFrame(pendingResize);

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/util/options/cartesian/buildCandlestickChartOptions.ts

@@ -3,7 +3,7 @@ import { merge } from 'lodash-es';
 import type { ChartLegendItem, EChartsOption } from '~flux/statistics/composable';
 import { resolveChartColor, toCandlestickSeries } from '../../series';
 import type { TooltipStyleClasses, Translator } from '../../tooltips';
-import { buildCartesianTooltip } from '../../tooltips';
+import { buildCandlestickTooltip } from '../../tooltips';
 import { buildCartesianBaseOptions } from '../buildCartesianBaseOptions';
 
 export interface CandlestickChartOptionsInput {
@@ -36,16 +36,18 @@ function resolveCandlestickLabels(
     return undefined;
 }
 
-export function candlestickLegendItemBuilder(s: FluxStatisticsChartCandlestickSeries): readonly ChartLegendItem[] {
+export function candlestickLegendItemBuilder(s: FluxStatisticsChartCandlestickSeries, _color: string, index: number): readonly ChartLegendItem[] {
     return [
         {
             color: resolveChartColor(s.positiveColor) ?? 'var(--success-500)',
             icon: s.icon,
-            label: 'Up'
+            label: 'Up',
+            seriesIndex: index
         },
         {
             color: resolveChartColor(s.negativeColor) ?? 'var(--danger-500)',
-            label: 'Down'
+            label: 'Down',
+            seriesIndex: index
         }
     ];
 }
@@ -65,7 +67,7 @@ export function buildCandlestickChartOptions(input: CandlestickChartOptionsInput
         : undefined;
 
     const tooltipOptions: EChartsOption = tooltip
-        ? buildCartesianTooltip({ t, styles, getSeriesIcons: () => series.map(s => s.icon) })
+        ? buildCandlestickTooltip({ t, styles, getSeries: () => series })
         : { tooltip: { show: false } };
 
     const echartsSeries = series.map(s =>

package/src/util/tooltips/buildCandlestickTooltip.ts

@@ -0,0 +1,65 @@
+import type { FluxIconName, FluxStatisticsChartColor } from '@flux-ui/types';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { resolveChartColor } from '../series';
+import { renderTooltip } from './render';
+import type { SharedTooltipItem, TooltipParam, TooltipStyleClasses, Translator } from './types';
+
+export interface CandlestickTooltipPoint {
+    readonly label?: string;
+    readonly open: number;
+    readonly close: number;
+    readonly low: number;
+    readonly high: number;
+}
+
+export interface CandlestickTooltipInput {
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly getSeries: () => readonly { readonly name?: string; readonly icon?: FluxIconName; readonly positiveColor?: FluxStatisticsChartColor; readonly negativeColor?: FluxStatisticsChartColor; readonly data: readonly CandlestickTooltipPoint[] }[];
+}
+
+export function buildCandlestickTooltip(input: CandlestickTooltipInput): EChartsOption {
+    const { t, styles, getSeries } = input;
+
+    const formatter = (params: TooltipParam | TooltipParam[]): string => {
+        const param = Array.isArray(params) ? params[0] : params;
+
+        if (!param) {
+            return '';
+        }
+
+        const series = getSeries();
+        const seriesIndex = param.seriesIndex ?? 0;
+        const dataIndex = param.dataIndex ?? 0;
+        const s = series[seriesIndex];
+        const point = s?.data[dataIndex];
+
+        if (!s || !point) {
+            return '';
+        }
+
+        const positive = resolveChartColor(s.positiveColor) ?? 'var(--success-500)';
+        const negative = resolveChartColor(s.negativeColor) ?? 'var(--danger-500)';
+        const color = point.close >= point.open ? positive : negative;
+        const seriesName = s.name ? t(String(s.name)) : '';
+        const pointLabel = point.label ? t(String(point.label)) : '';
+        const title = [seriesName, pointLabel].filter(Boolean).join(' — ');
+
+        const items: SharedTooltipItem[] = [
+            { name: 'Open', value: point.open, color },
+            { name: 'Close', value: point.close, color },
+            { name: 'Lowest', value: point.low, color },
+            { name: 'Highest', value: point.high, color }
+        ];
+
+        return renderTooltip(t, styles, title, items);
+    };
+
+    return {
+        tooltip: {
+            show: true,
+            trigger: 'item',
+            formatter: formatter as never
+        }
+    };
+}

package/src/util/tooltips/buildTreemapTooltip.ts

@@ -5,7 +5,9 @@ import type { SharedTooltipItem, TooltipParam, TooltipStyleClasses, Translator }
 export interface TreemapTooltipNode {
     readonly name: string;
     readonly value?: number;
-    readonly color?: string;
+    readonly itemStyle?: {
+        readonly color?: string;
+    };
 }
 
 export interface TreemapTooltipInput {
@@ -29,7 +31,7 @@ export function buildTreemapTooltip(input: TreemapTooltipInput): EChartsOption {
             return '';
         }
 
-        const color = data.color ?? 'var(--primary-600)';
+        const color = data.itemStyle?.color ?? param.color ?? 'var(--primary-600)';
         const title = data.name ? t(String(data.name)) : '';
 
         const items: SharedTooltipItem[] = [

package/src/util/tooltips/index.ts

@@ -1,5 +1,7 @@
 export type { BoxPlotTooltipInput, BoxPlotTooltipPoint } from './buildBoxPlotTooltip';
 export { buildBoxPlotTooltip } from './buildBoxPlotTooltip';
+export type { CandlestickTooltipInput, CandlestickTooltipPoint } from './buildCandlestickTooltip';
+export { buildCandlestickTooltip } from './buildCandlestickTooltip';
 export type { CartesianTooltipInput } from './buildCartesianTooltip';
 export { buildCartesianTooltip } from './buildCartesianTooltip';
 export type { GaugeTooltipInput } from './buildGaugeTooltip';