@flux-ui/statistics 3.0.0-next.67 → 3.0.0-next.68

package/src/composable/useChartHoverSync.ts

@@ -0,0 +1,92 @@
+import { onBeforeUnmount, watch, type Ref } from 'vue';
+import type { ChartLegendContext } from './useChartLegend';
+import type { EChartsInstance } from './useECharts';
+
+export type ChartHoverSyncMode = 'series' | 'data';
+
+export interface UseChartHoverSyncOptions {
+    readonly mode: ChartHoverSyncMode;
+    readonly seriesIndex?: number;
+}
+
+export function useChartHoverSync(
+    chartInstance: Ref<EChartsInstance | null>,
+    legendContext: ChartLegendContext | null,
+    options: UseChartHoverSyncOptions
+): void {
+    if (!legendContext) {
+        return;
+    }
+
+    const { mode, seriesIndex: forcedSeriesIndex = 0 } = options;
+
+    let attached: EChartsInstance | null = null;
+    let syncing = false;
+
+    const onMouseOver = (params: { seriesIndex?: number; dataIndex?: number }) => {
+        if (syncing) {
+            return;
+        }
+
+        const index = mode === 'series'
+            ? params.seriesIndex ?? null
+            : params.dataIndex ?? null;
+
+        legendContext.hoveredIndex.value = index;
+    };
+
+    const onMouseOut = () => {
+        if (syncing) {
+            return;
+        }
+
+        legendContext.hoveredIndex.value = null;
+    };
+
+    const dispatchHighlight = (instance: EChartsInstance, index: number | null) => {
+        syncing = true;
+
+        try {
+            instance.dispatchAction({ type: 'downplay' });
+
+            if (index !== null) {
+                if (mode === 'series') {
+                    instance.dispatchAction({ type: 'highlight', seriesIndex: index });
+                } else {
+                    instance.dispatchAction({ type: 'highlight', seriesIndex: forcedSeriesIndex, dataIndex: index });
+                }
+            }
+        } finally {
+            syncing = false;
+        }
+    };
+
+    watch(chartInstance, instance => {
+        if (attached) {
+            attached.off('mouseover', onMouseOver as never);
+            attached.off('mouseout', onMouseOut as never);
+            attached = null;
+        }
+
+        if (instance) {
+            instance.on('mouseover', onMouseOver as never);
+            instance.on('mouseout', onMouseOut as never);
+            attached = instance;
+            dispatchHighlight(instance, legendContext.hoveredIndex.value);
+        }
+    }, { immediate: true });
+
+    watch(() => legendContext.hoveredIndex.value, index => {
+        if (chartInstance.value) {
+            dispatchHighlight(chartInstance.value, index);
+        }
+    });
+
+    onBeforeUnmount(() => {
+        if (attached) {
+            attached.off('mouseover', onMouseOver as never);
+            attached.off('mouseout', onMouseOut as never);
+            attached = null;
+        }
+    });
+}

package/src/composable/useChartLegend.ts

@@ -0,0 +1,23 @@
+import type { FluxIconName } from '@flux-ui/types';
+import { ref, type InjectionKey, type Ref } from 'vue';
+
+export interface ChartLegendItem {
+    readonly color?: string;
+    readonly icon?: FluxIconName;
+    readonly label: string;
+    readonly value?: string | number;
+}
+
+export interface ChartLegendContext {
+    readonly items: Ref<readonly ChartLegendItem[]>;
+    readonly hoveredIndex: Ref<number | null>;
+}
+
+export const FluxStatisticsChartLegendInjectionKey: InjectionKey<ChartLegendContext> = Symbol('flux-statistics-chart-legend');
+
+export function createChartLegendContext(): ChartLegendContext {
+    return {
+        items: ref<readonly ChartLegendItem[]>([]),
+        hoveredIndex: ref<number | null>(null)
+    };
+}

package/src/composable/useChartSeriesSetup.ts

@@ -0,0 +1,75 @@
+import type { FluxIconName, FluxStatisticsChartColor } from '@flux-ui/types';
+import { computed, inject, useTemplateRef, watchEffect, type ComputedRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { CHART_DEFAULT_COLORS, resolveChartColor } from '~flux/statistics/util';
+import { type ChartHoverSyncMode, useChartHoverSync } from './useChartHoverSync';
+import { type ChartLegendContext, type ChartLegendItem, FluxStatisticsChartLegendInjectionKey } from './useChartLegend';
+import type { EChartsInstance } from './useECharts';
+
+export interface ChartSeriesShape {
+    readonly name?: string;
+    readonly icon?: FluxIconName;
+    readonly color?: FluxStatisticsChartColor;
+}
+
+export type ChartLegendItemBuilder<S> = (
+    series: S,
+    color: string,
+    index: number,
+    t: ReturnType<typeof useI18n>['t']
+) => ChartLegendItem | readonly ChartLegendItem[];
+
+export interface UseChartSeriesSetupOptions<S extends ChartSeriesShape> {
+    readonly mode?: ChartHoverSyncMode;
+    readonly getLegendItem?: ChartLegendItemBuilder<S>;
+}
+
+export interface UseChartSeriesSetupReturn {
+    readonly t: ReturnType<typeof useI18n>['t'];
+    readonly palette: ComputedRef<readonly string[]>;
+    readonly legendContext: ChartLegendContext | null;
+    readonly chartInstance: ComputedRef<EChartsInstance | null>;
+}
+
+const defaultLegendItem = <S extends ChartSeriesShape>(
+    s: S,
+    color: string,
+    _index: number,
+    t: ReturnType<typeof useI18n>['t']
+): ChartLegendItem => ({
+    color,
+    icon: s.icon,
+    label: s.name ? t(String(s.name)) : ''
+});
+
+export function useChartSeriesSetup<S extends ChartSeriesShape>(
+    seriesGetter: () => readonly S[],
+    options: UseChartSeriesSetupOptions<S> = {}
+): UseChartSeriesSetupReturn {
+    const { mode = 'series', getLegendItem = defaultLegendItem } = options;
+    const { t } = useI18n({ useScope: 'parent' });
+    const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
+    const chartRef = useTemplateRef<{ chartInstance: EChartsInstance | null } | null>('chartRef');
+    const chartInstance = computed<EChartsInstance | null>(() => chartRef.value?.chartInstance ?? null);
+
+    useChartHoverSync(chartInstance, legendContext, { mode });
+
+    const palette = computed<readonly string[]>(() =>
+        seriesGetter().map((s, i) => resolveChartColor(s.color) ?? CHART_DEFAULT_COLORS[i % CHART_DEFAULT_COLORS.length])
+    );
+
+    const legendItems = computed<readonly ChartLegendItem[]>(() =>
+        seriesGetter().flatMap((s, i) => {
+            const item = getLegendItem(s, palette.value[i], i, t);
+            return Array.isArray(item) ? item : [item as ChartLegendItem];
+        })
+    );
+
+    watchEffect(() => {
+        if (legendContext) {
+            legendContext.items.value = legendItems.value;
+        }
+    });
+
+    return { t, palette, legendContext, chartInstance };
+}

package/src/composable/useECharts.ts

@@ -0,0 +1,55 @@
+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 '~flux/statistics/echarts';
+
+export type EChartsOption = EChartsCoreOption;
+export type EChartsInstance = ReturnType<typeof init>;
+
+export interface UseEChartsReturn {
+    readonly chartInstance: Ref<EChartsInstance | null>;
+    resize(): void;
+}
+
+export function useECharts(
+    target: Ref<HTMLElement | null>,
+    options: MaybeRefOrGetter<EChartsOption>
+): UseEChartsReturn {
+    const chartInstance = ref<EChartsInstance | null>(null);
+    let pendingResize: number | null = null;
+
+    onMounted(() => {
+        if (!target.value) {
+            return;
+        }
+
+        chartInstance.value = markRaw(init(target.value));
+        chartInstance.value.setOption(toValue(options));
+    });
+
+    onBeforeUnmount(() => {
+        if (pendingResize !== null) {
+            cancelAnimationFrame(pendingResize);
+            pendingResize = null;
+        }
+
+        chartInstance.value?.dispose();
+        chartInstance.value = null;
+    });
+
+    useResizeObserver(target as any, () => {
+        if (pendingResize !== null) {
+            return;
+        }
+
+        pendingResize = requestAnimationFrame(() => {
+            pendingResize = null;
+            chartInstance.value?.resize();
+        });
+    });
+
+    return {
+        chartInstance: chartInstance as Ref<EChartsInstance | null>,
+        resize: () => chartInstance.value?.resize()
+    };
+}

package/src/composable/usePieSlicesSetup.ts

@@ -0,0 +1,58 @@
+import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
+import { computed, inject, useTemplateRef, watchEffect, type ComputedRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { CHART_DEFAULT_COLORS, resolveChartColor, type SharedTooltipItem } from '~flux/statistics/util';
+import { useChartHoverSync } from './useChartHoverSync';
+import { type ChartLegendContext, type ChartLegendItem, FluxStatisticsChartLegendInjectionKey } from './useChartLegend';
+import type { EChartsInstance } from './useECharts';
+
+export interface UsePieSlicesSetupReturn {
+    readonly t: ReturnType<typeof useI18n>['t'];
+    readonly palette: ComputedRef<readonly string[]>;
+    readonly tooltipItems: ComputedRef<readonly SharedTooltipItem[]>;
+    readonly legendContext: ChartLegendContext | null;
+    readonly chartInstance: ComputedRef<EChartsInstance | null>;
+}
+
+export function usePieSlicesSetup(
+    slicesGetter: () => readonly FluxStatisticsChartPieSlice[]
+): UsePieSlicesSetupReturn {
+    const { t } = useI18n({ useScope: 'parent' });
+    const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
+    const chartRef = useTemplateRef<{ chartInstance: EChartsInstance | null } | null>('chartRef');
+    const chartInstance = computed<EChartsInstance | null>(() => chartRef.value?.chartInstance ?? null);
+
+    useChartHoverSync(chartInstance, legendContext, { mode: 'data' });
+
+    const palette = computed<readonly string[]>(() =>
+        slicesGetter().map((slice, i) => resolveChartColor(slice.color) ?? CHART_DEFAULT_COLORS[i % CHART_DEFAULT_COLORS.length])
+    );
+
+    const tooltipItems = computed<readonly SharedTooltipItem[]>(() =>
+        slicesGetter().map((slice, i) => ({
+            name: slice.label,
+            value: slice.formatted ?? slice.value,
+            color: palette.value[i],
+            icon: slice.icon,
+            seriesIndex: 0,
+            dataIndex: i
+        }))
+    );
+
+    const legendItems = computed<readonly ChartLegendItem[]>(() =>
+        slicesGetter().map((slice, i) => ({
+            color: palette.value[i],
+            icon: slice.icon,
+            label: slice.label ? t(String(slice.label)) : '',
+            value: slice.formatted ?? slice.value
+        }))
+    );
+
+    watchEffect(() => {
+        if (legendContext) {
+            legendContext.items.value = legendItems.value;
+        }
+    });
+
+    return { t, palette, tooltipItems, legendContext, chartInstance };
+}

package/src/css/Base.module.scss

@@ -18,6 +18,7 @@
 .statisticsBaseHeader {
     display: flex;
     padding: 18px 18px 0;
+    gap: 9px;
     align-items: flex-start;
 }
 
@@ -29,10 +30,31 @@
     word-break: break-word;
 }
 
+.statisticsBaseHeaderIcon,
+.statisticsBaseHeaderInfo {
+    font-size: 20px;
+    line-height: 24px;
+}
+
+.statisticsBaseHeaderInfo {
+    margin-left: auto;
+    color: var(--foreground-secondary);
+    cursor: help;
+    scale: .75;
+    transition: color .2s var(--swift-out);
+
+    &:hover {
+        color: var(--foreground-prominent);
+    }
+}
+
+.statisticsBaseHeaderInfo + .statisticsBaseHeaderIcon {
+    margin-left: 6px;
+}
+
 .statisticsBaseHeaderIcon {
     margin-left: auto;
     color: var(--primary-600);
-    font-size: 20px;
 }
 
 .statisticsBaseSmall .statisticsBaseHeaderTitle {
@@ -41,6 +63,11 @@
     line-height: 18px;
 }
 
+.statisticsBaseSmall .statisticsBaseHeaderInfo {
+    font-size: 14px;
+    line-height: 18px;
+}
+
 .statisticsBaseSmall .statisticsBaseHeaderIcon {
     font-size: 18px;
 }

package/src/css/Chart.module.scss

@@ -20,42 +20,10 @@
     position: absolute;
     display: block;
     inset: 0;
-    //inset: -3px -2px -4px -2px;
     height: unset;
     width: unset;
 
-    :global(svg) {
-        overflow: hidden;
-    }
-
     --stroke: rgb(from var(--surface-stroke) r g b / .5);
-
-    :global(.apexcharts-canvas) {
-        :global(.apexcharts-grid-borders) {
-            display: none;
-        }
-
-        :global(.apexcharts-yaxis-texts-g) {
-            display: none;
-        }
-
-        :global(.apexcharts-tooltip) {
-            background: rgb(from var(--surface) r g b / .975);
-            background-clip: padding-box;
-            backdrop-filter: blur(3px) saturate(180%);
-            border: 1px solid var(--surface-stroke-out-hover);
-            border-radius: var(--radius-double);
-            box-shadow: var(--shadow-lg);
-            color: var(--foreground);
-            contain: paint;
-        }
-    }
-}
-
-.statisticsChartElement {
-    position: absolute;
-    display: block;
-    inset: 0;
 }
 
 .statisticsChartTooltipTitle {
@@ -81,13 +49,79 @@
     border-radius: 6px;
 }
 
+.statisticsChartTooltipSeriesIcon {
+    display: flex;
+    height: 14px;
+    width: 14px;
+    color: var(--danger-600);
+    align-items: center;
+    justify-content: center;
+
+    & > svg {
+        height: 100%;
+        width: 100%;
+    }
+}
+
 .statisticsChartTooltipSeriesName {
+    color: var(--foreground-secondary);
     font-size: 14px;
     font-weight: 700;
+    transition: color .15s ease-out;
 }
 
 .statisticsChartTooltipSeriesValue {
+    color: var(--foreground-secondary);
     font-size: 14px;
     font-weight: 500;
     text-align: right;
+    transition: color .15s ease-out;
+}
+
+.statisticsChartTooltipSeriesName.isActive,
+.statisticsChartTooltipSeriesValue.isActive {
+    color: var(--foreground-prominent);
+}
+
+.statisticsChartTooltipSection {
+    padding: 12px 18px;
+    transition: opacity .15s ease-out;
+
+    & + & {
+        border-top: 1px solid var(--surface-stroke);
+    }
+}
+
+.statisticsChartTooltipSection.isDimmed {
+    opacity: .55;
+}
+
+.statisticsChartTooltipSectionTitle {
+    color: var(--foreground-prominent);
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: 9px;
+}
+
+.statisticsChartTooltipSectionBody {
+    display: grid;
+    align-items: center;
+    gap: 6px 15px;
+    grid-template-columns: repeat(3, auto);
+}
+
+:global(.flux-statistics-tooltip) {
+    background: rgb(from var(--surface) r g b / .975) !important;
+    background-clip: padding-box;
+    backdrop-filter: blur(3px) saturate(180%);
+    border: 1px solid var(--surface-stroke-out-hover) !important;
+    border-radius: var(--radius-double) !important;
+    box-shadow: var(--shadow-lg) !important;
+    color: var(--foreground);
+    contain: paint;
+
+    &:empty {
+        display: none;
+    }
 }

package/src/css/ChartPane.module.scss

@@ -3,36 +3,51 @@
 .statisticsChartPane {
     --aspect-ratio: unset;
 
+    container: chart-pane / inline-size;
     max-width: 100%;
-    aspect-ratio: var(--aspect-ratio);
 }
 
 .statisticsChartPaneBody {
     display: grid;
+    align-content: start;
     flex-grow: 1;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
 
-    &:has(.statisticsLegend) {
-        grid-template-columns: 1fr 1fr;
+    .statisticsChartPaneContainer {
+        height: calc(100cqw / var(--aspect-ratio, 1));
     }
-}
 
-.statisticsChartPaneContainer {
-    position: relative;
-    display: block;
+    &:has(.statisticsLegend) {
+        grid-template-columns: .4fr .6fr;
+
+        @container chart-pane (max-width: 390px) {
+            grid-template-columns: 1fr;
+            grid-template-rows: auto auto;
+        }
 
-    &:first-child :global(svg) {
+        .statisticsChartPaneContainer {
+            height: calc(40cqw / var(--aspect-ratio, 1));
+        }
+    }
+
+    &:first-child :global(canvas) {
         border-top-left-radius: var(--radius);
         border-top-right-radius: var(--radius);
     }
 
-    &:last-child :global(svg) {
+    &:last-child :global(canvas) {
         border-bottom-left-radius: var(--radius);
         border-bottom-right-radius: var(--radius);
     }
 }
 
+.statisticsChartPaneContainer {
+    position: relative;
+    display: block;
+    align-self: center;
+}
+
 :local(.paneHeader) + .statisticsChartPaneContainer {
     margin-top: 18px;
 }

package/src/css/Comparison.module.scss

@@ -0,0 +1,52 @@
+.statisticsComparison {
+    display: grid;
+    margin-top: 18px;
+    gap: 12px;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+}
+
+.statisticsComparisonDivider {
+    width: 1px;
+    height: 36px;
+    background: var(--stroke);
+}
+
+.statisticsComparisonItem {
+    display: flex;
+    flex-flow: column;
+    gap: 3px;
+}
+
+.statisticsComparisonItemLabel {
+    color: var(--foreground-secondary);
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.statisticsComparisonItemValue {
+    color: var(--foreground-prominent);
+    font-size: 21px;
+    font-weight: 800;
+    line-height: 28px;
+}
+
+.statisticsComparisonItemValueMuted {
+    color: var(--foreground-secondary);
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px;
+}
+
+.statisticsComparisonBottom {
+    display: flex;
+    margin-top: 9px;
+    align-items: center;
+    gap: 9px;
+    line-height: 18px;
+}
+
+.statisticsComparisonFooter {
+    color: var(--foreground-secondary);
+    font-size: 14px;
+}

package/src/css/Empty.module.scss

@@ -0,0 +1,39 @@
+.statisticsEmpty {
+    position: absolute;
+    display: flex;
+    inset: 0;
+    padding: 24px 18px;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 9px;
+}
+
+.statisticsEmptyIcon {
+    color: var(--foreground-secondary);
+    font-size: 32px;
+    opacity: 0.5;
+}
+
+.statisticsEmptyTitle {
+    color: var(--foreground-prominent);
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+}
+
+.statisticsEmptyDescription {
+    max-width: 320px;
+    color: var(--foreground-secondary);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+}
+
+.statisticsEmptyActions {
+    display: flex;
+    margin-top: 9px;
+    align-items: center;
+    gap: 9px;
+}

package/src/css/Grid.module.scss

@@ -10,6 +10,7 @@
 
 .statisticsGridContent {
     display: grid;
+    align-items: start;
     gap: var(--gap);
     grid-template-columns: repeat(var(--columns), 1fr);
 }

package/src/css/Legend.module.scss

@@ -2,24 +2,34 @@
 
 .statisticsLegend {
     display: flex;
+    max-height: 360px;
     min-width: 0;
     padding: 15px 18px 15px;
     align-self: center;
     flex-flow: column;
     flex-grow: 1;
+    overflow: auto;
+    user-select: none;
 }
 
 .statisticsLegendItem {
     --color: var(--primary-600);
 
     display: flex;
-    padding: 6px 0;
+    padding: 6px 9px;
+    margin: 0 -9px;
     align-items: flex-start;
     flex-flow: row nowrap;
     gap: 9px;
     font-size: 14px;
     line-height: 20px;
     white-space: nowrap;
+    border-radius: var(--radius-small);
+    transition: background var(--swift-out);
+}
+
+.statisticsLegendItem.isHovered {
+    background: var(--surface-active);
 }
 
 .statisticsLegendItemColor {

package/src/css/Metric.module.scss

@@ -39,6 +39,12 @@
     :global(small):not(:first-child) {
         margin-top: 15px;
     }
+
+    :global([data-sparkline]) {
+        margin-inline: -18px;
+        width: calc(100% + 36px);
+        max-width: none;
+    }
 }
 
 .statisticsMetricFooter {