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

package/src/util/series/defaults.ts

@@ -0,0 +1,210 @@
+import type {
+    BarSeriesOption,
+    BoxplotSeriesOption,
+    CandlestickSeriesOption,
+    GaugeSeriesOption,
+    HeatmapSeriesOption,
+    LineSeriesOption,
+    PieSeriesOption,
+    RadarSeriesOption,
+    ScatterSeriesOption,
+    TreemapSeriesOption
+} from 'echarts/charts';
+
+const SOFT_EMPHASIS = { focus: 'none' } as const;
+const PIE_EMPHASIS = { focus: 'none', scale: true, scaleSize: 6 } as const;
+const NO_EMPHASIS = { disabled: true } as const;
+const PIE_SLICE_BORDER = { borderColor: 'var(--surface)', borderWidth: 2 };
+
+const stagger = (step: number) => (idx: number) => idx * step;
+
+export const LINE_SERIES_DEFAULTS: Partial<LineSeriesOption> = {
+    type: 'line',
+    smooth: true,
+    showSymbol: false,
+    emphasis: SOFT_EMPHASIS
+};
+
+export const AREA_SERIES_DEFAULTS: Partial<LineSeriesOption> = {
+    type: 'line',
+    smooth: true,
+    showSymbol: false,
+    areaStyle: { opacity: 0.25 },
+    lineStyle: { width: 2 },
+    emphasis: SOFT_EMPHASIS
+};
+
+export const BAR_SERIES_DEFAULTS: Partial<BarSeriesOption> = {
+    type: 'bar',
+    itemStyle: { borderRadius: 6 },
+    barCategoryGap: '25%',
+    emphasis: SOFT_EMPHASIS,
+    animationDelay: stagger(40),
+    animationDelayUpdate: stagger(20)
+};
+
+export const PIE_SERIES_DEFAULTS: Partial<PieSeriesOption> = {
+    type: 'pie',
+    radius: '75%',
+    label: { show: false },
+    itemStyle: { ...PIE_SLICE_BORDER, borderRadius: 6 },
+    selectedMode: false,
+    emphasis: PIE_EMPHASIS
+};
+
+export const DONUT_SERIES_DEFAULTS: Partial<PieSeriesOption> = {
+    type: 'pie',
+    radius: ['55%', '75%'],
+    padAngle: 1,
+    label: { show: false },
+    itemStyle: { ...PIE_SLICE_BORDER, borderRadius: 6 },
+    selectedMode: false,
+    emphasis: PIE_EMPHASIS
+};
+
+export const POLAR_AREA_SERIES_DEFAULTS: Partial<PieSeriesOption> = {
+    type: 'pie',
+    roseType: 'area',
+    radius: ['10%', '75%'],
+    padAngle: 1,
+    label: { show: false },
+    itemStyle: { ...PIE_SLICE_BORDER, opacity: 0.85, borderRadius: 6 },
+    selectedMode: false,
+    emphasis: PIE_EMPHASIS
+};
+
+export const RADAR_SERIES_DEFAULTS: Partial<RadarSeriesOption> = {
+    type: 'radar',
+    areaStyle: { opacity: 0.25 },
+    lineStyle: { width: 2.5 },
+    symbolSize: 6,
+    emphasis: SOFT_EMPHASIS
+};
+
+export const HEATMAP_SERIES_DEFAULTS: Partial<HeatmapSeriesOption> = {
+    type: 'heatmap',
+    itemStyle: {
+        borderColor: 'var(--surface)',
+        borderWidth: 2,
+        borderRadius: 6
+    },
+    label: { show: false },
+    emphasis: SOFT_EMPHASIS,
+    animationDelay: stagger(8),
+    animationDelayUpdate: stagger(4)
+};
+
+export const SCATTER_SERIES_DEFAULTS: Partial<ScatterSeriesOption> = {
+    type: 'scatter',
+    symbolSize: 14,
+    itemStyle: {
+        borderColor: 'var(--surface)',
+        borderWidth: 2,
+        opacity: 0.9
+    },
+    emphasis: SOFT_EMPHASIS,
+    animationDelay: stagger(25),
+    animationDelayUpdate: stagger(15)
+};
+
+export const BUBBLE_SERIES_DEFAULTS: Partial<ScatterSeriesOption> = {
+    type: 'scatter',
+    itemStyle: {
+        borderColor: 'var(--surface)',
+        borderWidth: 2,
+        opacity: 0.65
+    },
+    emphasis: SOFT_EMPHASIS,
+    animationDelay: stagger(25),
+    animationDelayUpdate: stagger(15)
+};
+
+export const BOXPLOT_SERIES_DEFAULTS: Partial<BoxplotSeriesOption> = {
+    type: 'boxplot',
+    itemStyle: {
+        color: 'var(--chart-1)',
+        borderColor: 'var(--foreground-prominent)',
+        borderWidth: 1
+    },
+    emphasis: SOFT_EMPHASIS,
+    animationDelay: stagger(60),
+    animationDelayUpdate: stagger(30)
+};
+
+export const CANDLESTICK_SERIES_DEFAULTS: Partial<CandlestickSeriesOption> = {
+    type: 'candlestick',
+    itemStyle: {
+        color: 'var(--success-500)',
+        color0: 'var(--danger-500)',
+        borderColor: 'var(--success-500)',
+        borderColor0: 'var(--danger-500)'
+    },
+    emphasis: SOFT_EMPHASIS,
+    animationDelay: stagger(30),
+    animationDelayUpdate: stagger(15)
+};
+
+export const TREEMAP_SERIES_DEFAULTS: Partial<TreemapSeriesOption> = {
+    type: 'treemap',
+    roam: false,
+    nodeClick: false,
+    breadcrumb: { show: false },
+    itemStyle: {
+        borderColor: 'var(--surface)',
+        borderWidth: 3,
+        borderRadius: 6,
+        gapWidth: 0
+    },
+    label: {
+        show: true,
+        color: 'var(--white)',
+        fontSize: 13,
+        fontWeight: 600,
+        fontFamily: 'inherit'
+    },
+    emphasis: SOFT_EMPHASIS
+};
+
+export const GAUGE_SERIES_DEFAULTS: Partial<GaugeSeriesOption> = {
+    type: 'gauge',
+    startAngle: 225,
+    endAngle: -45,
+    min: 0,
+    max: 100,
+    radius: '90%',
+    emphasis: NO_EMPHASIS,
+    progress: {
+        show: true,
+        width: 14,
+        roundCap: true
+    },
+    axisLine: {
+        lineStyle: {
+            width: 14,
+            color: [[1, 'var(--gray-100)']]
+        },
+        roundCap: true
+    },
+    axisTick: { show: false },
+    splitLine: { show: false },
+    axisLabel: { show: false },
+    pointer: { show: false },
+    anchor: { show: false },
+    title: {
+        show: true,
+        color: 'var(--foreground-secondary)',
+        fontSize: 12,
+        fontWeight: 500,
+        fontFamily: 'inherit',
+        offsetCenter: [0, '-30%']
+    },
+    detail: {
+        show: true,
+        color: 'var(--foreground-prominent)',
+        fontSize: 28,
+        fontWeight: 800,
+        fontFamily: 'inherit',
+        offsetCenter: [0, '10%'],
+        formatter: '{value}%'
+    }
+};

package/src/util/series/index.ts

@@ -0,0 +1,4 @@
+export { CHART_DEFAULT_COLORS, resolveChartColor } from './chartColors';
+export * from './converters';
+export * from './defaults';
+export { cartesianFallbackLabels, extractLabels } from './labels';

package/src/util/series/labels.ts

@@ -0,0 +1,30 @@
+import type { FluxStatisticsChartCartesianSeries, FluxStatisticsChartCategoryPoint } from '@flux-ui/types';
+
+export function extractLabels(
+    series: readonly { readonly data: readonly (number | FluxStatisticsChartCategoryPoint)[] }[]
+): readonly string[] | undefined {
+    for (const s of series) {
+        const labels: string[] = [];
+        let hasAny = false;
+
+        for (const point of s.data) {
+            if (typeof point === 'object' && point !== null && typeof point.label === 'string') {
+                labels.push(point.label);
+                hasAny = true;
+            } else {
+                labels.push('');
+            }
+        }
+
+        if (hasAny) {
+            return labels;
+        }
+    }
+
+    return undefined;
+}
+
+export function cartesianFallbackLabels(series: readonly FluxStatisticsChartCartesianSeries[]): string[] {
+    const longest = series.reduce((max, s) => Math.max(max, s.data.length), 0);
+    return Array.from({ length: longest }, (_, i) => String(i + 1));
+}

package/src/util/sparkline.ts

@@ -0,0 +1,67 @@
+import type { EChartsOption } from '~flux/statistics/composable';
+
+export type SparklineVariant = 'line' | 'bar' | 'area';
+
+export interface SparklineSeriesItem {
+    readonly name?: string;
+    readonly data: (number | string | null)[];
+}
+
+export function buildSparklineOptions(
+    variant: SparklineVariant,
+    color: string,
+    series: readonly SparklineSeriesItem[]
+): EChartsOption {
+    const data = series[0]?.data ?? [];
+
+    const base: EChartsOption = {
+        animation: false,
+        grid: {
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            containLabel: false
+        },
+        tooltip: { show: false },
+        xAxis: {
+            type: 'category',
+            show: false,
+            boundaryGap: variant === 'bar'
+        },
+        yAxis: {
+            type: 'value',
+            show: false,
+            scale: true
+        },
+        color: [color]
+    };
+
+    if (variant === 'bar') {
+        return {
+            ...base,
+            series: [{
+                type: 'bar',
+                data: data as never,
+                itemStyle: { borderRadius: 2 },
+                barCategoryGap: '40%',
+                emphasis: { disabled: true },
+                silent: true
+            }]
+        };
+    }
+
+    return {
+        ...base,
+        series: [{
+            type: 'line',
+            data: data as never,
+            smooth: true,
+            showSymbol: false,
+            lineStyle: { width: 2 },
+            areaStyle: variant === 'area' ? { opacity: 0.25 } : undefined,
+            emphasis: { disabled: true },
+            silent: true
+        }]
+    };
+}

package/src/util/tooltips/buildBoxPlotTooltip.ts

@@ -0,0 +1,66 @@
+import type { FluxIconName } from '@flux-ui/types';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { renderTooltip } from './render';
+import type { SharedTooltipItem, TooltipParam, TooltipStyleClasses, Translator } from './types';
+
+export interface BoxPlotTooltipPoint {
+    readonly label?: string;
+    readonly min: number;
+    readonly q1: number;
+    readonly median: number;
+    readonly q3: number;
+    readonly max: number;
+}
+
+export interface BoxPlotTooltipInput {
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly getSeries: () => readonly { readonly name?: string; readonly icon?: FluxIconName; readonly data: readonly BoxPlotTooltipPoint[] }[];
+    readonly getPalette: () => readonly string[];
+}
+
+export function buildBoxPlotTooltip(input: BoxPlotTooltipInput): EChartsOption {
+    const { t, styles, getSeries, getPalette } = input;
+
+    const formatter = (params: TooltipParam | TooltipParam[]): string => {
+        const param = Array.isArray(params) ? params[0] : params;
+
+        if (!param) {
+            return '';
+        }
+
+        const series = getSeries();
+        const palette = getPalette();
+        const seriesIndex = param.seriesIndex ?? 0;
+        const dataIndex = param.dataIndex ?? 0;
+        const s = series[seriesIndex];
+        const point = s?.data[dataIndex];
+
+        if (!s || !point) {
+            return '';
+        }
+
+        const color = palette[seriesIndex % palette.length];
+        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: 'Min', value: point.min, color },
+            { name: 'Q1', value: point.q1, color },
+            { name: 'Median', value: point.median, color },
+            { name: 'Q3', value: point.q3, color },
+            { name: 'Max', value: point.max, color }
+        ];
+
+        return renderTooltip(t, styles, title, items);
+    };
+
+    return {
+        tooltip: {
+            show: true,
+            trigger: 'item',
+            formatter: formatter as never
+        }
+    };
+}

package/src/util/tooltips/buildCartesianTooltip.ts

@@ -0,0 +1,44 @@
+import type { FluxIconName } from '@flux-ui/types';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { extractValue, renderTooltip } from './render';
+import type { ChartTooltipValueFormatter, TooltipParam, TooltipStyleClasses, Translator } from './types';
+
+export interface CartesianTooltipInput {
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly getSeriesIcons: () => readonly (FluxIconName | undefined)[];
+    readonly valueFormatter?: ChartTooltipValueFormatter;
+}
+
+export function buildCartesianTooltip(input: CartesianTooltipInput): EChartsOption {
+    const { t, styles, getSeriesIcons, valueFormatter } = input;
+
+    const formatter = (params: TooltipParam | TooltipParam[]): string => {
+        const items = Array.isArray(params) ? params : [params];
+
+        if (items.length === 0) {
+            return '';
+        }
+
+        const rawTitle = items[0].axisValueLabel ?? items[0].axisValue ?? items[0].name ?? '';
+        const title = rawTitle ? t(String(rawTitle)) : '';
+        const icons = getSeriesIcons();
+
+        return renderTooltip(t, styles, title, items.map(param => ({
+            name: param.seriesName ?? '',
+            value: extractValue(param.value),
+            color: param.color,
+            icon: icons[param.seriesIndex],
+            seriesIndex: param.seriesIndex,
+            dataIndex: param.dataIndex
+        })), -1, valueFormatter);
+    };
+
+    return {
+        tooltip: {
+            show: true,
+            trigger: 'axis',
+            formatter: formatter as never
+        }
+    };
+}

package/src/util/tooltips/buildGaugeTooltip.ts

@@ -0,0 +1,49 @@
+import type { FluxIconName } from '@flux-ui/types';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { renderTooltip } from './render';
+import type { SharedTooltipItem, TooltipParam, TooltipStyleClasses, Translator } from './types';
+
+export interface GaugeTooltipInput {
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly getSeries: () => readonly { readonly name?: string; readonly value: number; readonly icon?: FluxIconName }[];
+    readonly getPalette: () => readonly string[];
+}
+
+export function buildGaugeTooltip(input: GaugeTooltipInput): EChartsOption {
+    const { t, styles, getSeries, getPalette } = input;
+
+    const formatter = (params: TooltipParam | TooltipParam[]): string => {
+        const param = Array.isArray(params) ? params[0] : params;
+
+        if (!param) {
+            return '';
+        }
+
+        const series = getSeries();
+        const palette = getPalette();
+        const seriesIndex = param.seriesIndex ?? 0;
+        const s = series[seriesIndex];
+
+        if (!s) {
+            return '';
+        }
+
+        const color = palette[seriesIndex % palette.length];
+        const title = s.name ? t(String(s.name)) : '';
+
+        const items: SharedTooltipItem[] = [
+            { name: '', value: s.value, color, icon: s.icon }
+        ];
+
+        return renderTooltip(t, styles, title, items);
+    };
+
+    return {
+        tooltip: {
+            show: true,
+            trigger: 'item',
+            formatter: formatter as never
+        }
+    };
+}

package/src/util/tooltips/buildHeatmapTooltip.ts

@@ -0,0 +1,57 @@
+import type { EChartsOption } from '~flux/statistics/composable';
+import { renderTooltip } from './render';
+import type { SharedTooltipItem, TooltipParam, TooltipStyleClasses, Translator } from './types';
+
+export interface HeatmapTooltipPoint {
+    readonly x: string | number;
+    readonly y: string | number;
+    readonly value: number;
+    readonly formatted?: string;
+}
+
+export interface HeatmapTooltipInput {
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly getSeries: () => readonly { readonly name?: string; readonly data: readonly HeatmapTooltipPoint[] }[];
+}
+
+export function buildHeatmapTooltip(input: HeatmapTooltipInput): 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 seriesName = s.name ? t(String(s.name)) : '';
+        const xLabel = t(String(point.x));
+        const yLabel = t(String(point.y));
+        const title = [seriesName, `${xLabel} · ${yLabel}`].filter(Boolean).join(' — ');
+
+        const items: SharedTooltipItem[] = [
+            { name: '', value: point.formatted ?? point.value, color: 'var(--primary-600)' }
+        ];
+
+        return renderTooltip(t, styles, title, items);
+    };
+
+    return {
+        tooltip: {
+            show: true,
+            trigger: 'item',
+            formatter: formatter as never
+        }
+    };
+}

package/src/util/tooltips/buildRadarTooltip.ts

@@ -0,0 +1,53 @@
+import type { FluxStatisticsChartRadarIndicator, FluxStatisticsChartRadarSeries } from '@flux-ui/types';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { renderTooltip } from './render';
+import type { SharedTooltipItem, TooltipParam, TooltipStyleClasses, Translator } from './types';
+
+export interface RadarTooltipInput {
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly getSeries: () => readonly FluxStatisticsChartRadarSeries[];
+    readonly getIndicators: () => readonly FluxStatisticsChartRadarIndicator[];
+    readonly getPalette: () => readonly string[];
+}
+
+export function buildRadarTooltip(input: RadarTooltipInput): EChartsOption {
+    const { t, styles, getSeries, getIndicators, getPalette } = input;
+
+    const formatter = (params: TooltipParam | TooltipParam[]): string => {
+        const param = Array.isArray(params) ? params[0] : params;
+
+        if (!param) {
+            return '';
+        }
+
+        const series = getSeries();
+        const indicators = getIndicators();
+        const palette = getPalette();
+        const ringIndex = param.dataIndex ?? 0;
+        const ring = series[ringIndex];
+
+        if (!ring) {
+            return '';
+        }
+
+        const color = palette[ringIndex % palette.length];
+        const title = ring.name ? t(String(ring.name)) : '';
+
+        const items: SharedTooltipItem[] = indicators.map((indicator, idx) => ({
+            name: indicator.name,
+            value: ring.values[idx] ?? '',
+            color
+        }));
+
+        return renderTooltip(t, styles, title, items);
+    };
+
+    return {
+        tooltip: {
+            show: true,
+            trigger: 'item',
+            formatter: formatter as never
+        }
+    };
+}

package/src/util/tooltips/buildSharedItemTooltip.ts

@@ -0,0 +1,38 @@
+import type { EChartsOption } from '~flux/statistics/composable';
+import { renderTooltip } from './render';
+import type { ChartTooltipValueFormatter, SharedTooltipItem, TooltipParam, TooltipStyleClasses, Translator } from './types';
+
+export interface SharedItemTooltipInput {
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly getItems: () => readonly SharedTooltipItem[];
+    readonly getTitle?: () => string | undefined;
+    readonly valueFormatter?: ChartTooltipValueFormatter;
+}
+
+export function buildSharedItemTooltip(input: SharedItemTooltipInput): EChartsOption {
+    const { t, styles, getItems, getTitle, valueFormatter } = input;
+
+    const formatter = (params: TooltipParam | TooltipParam[]): string => {
+        const param = Array.isArray(params) ? params[0] : params;
+
+        if (!param) {
+            return '';
+        }
+
+        const items = getItems();
+        const activeIndex = param.dataIndex ?? -1;
+        const rawTitle = getTitle?.() ?? '';
+        const title = rawTitle ? t(String(rawTitle)) : '';
+
+        return renderTooltip(t, styles, title, items, activeIndex, valueFormatter);
+    };
+
+    return {
+        tooltip: {
+            show: true,
+            trigger: 'item',
+            formatter: formatter as never
+        }
+    };
+}

package/src/util/tooltips/buildTreemapTooltip.ts

@@ -0,0 +1,49 @@
+import type { EChartsOption } from '~flux/statistics/composable';
+import { renderTooltip } from './render';
+import type { SharedTooltipItem, TooltipParam, TooltipStyleClasses, Translator } from './types';
+
+export interface TreemapTooltipNode {
+    readonly name: string;
+    readonly value?: number;
+    readonly color?: string;
+}
+
+export interface TreemapTooltipInput {
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+}
+
+export function buildTreemapTooltip(input: TreemapTooltipInput): EChartsOption {
+    const { t, styles } = input;
+
+    const formatter = (params: TooltipParam | TooltipParam[]): string => {
+        const param = Array.isArray(params) ? params[0] : params;
+
+        if (!param) {
+            return '';
+        }
+
+        const data = param.data as TreemapTooltipNode | undefined;
+
+        if (!data) {
+            return '';
+        }
+
+        const color = data.color ?? 'var(--primary-600)';
+        const title = data.name ? t(String(data.name)) : '';
+
+        const items: SharedTooltipItem[] = [
+            { name: '', value: data.value ?? '', color }
+        ];
+
+        return renderTooltip(t, styles, title, items);
+    };
+
+    return {
+        tooltip: {
+            show: true,
+            trigger: 'item',
+            formatter: formatter as never
+        }
+    };
+}

package/src/util/tooltips/index.ts

@@ -0,0 +1,15 @@
+export type { BoxPlotTooltipInput, BoxPlotTooltipPoint } from './buildBoxPlotTooltip';
+export { buildBoxPlotTooltip } from './buildBoxPlotTooltip';
+export type { CartesianTooltipInput } from './buildCartesianTooltip';
+export { buildCartesianTooltip } from './buildCartesianTooltip';
+export type { GaugeTooltipInput } from './buildGaugeTooltip';
+export { buildGaugeTooltip } from './buildGaugeTooltip';
+export type { HeatmapTooltipInput, HeatmapTooltipPoint } from './buildHeatmapTooltip';
+export { buildHeatmapTooltip } from './buildHeatmapTooltip';
+export type { RadarTooltipInput } from './buildRadarTooltip';
+export { buildRadarTooltip } from './buildRadarTooltip';
+export type { SharedItemTooltipInput } from './buildSharedItemTooltip';
+export { buildSharedItemTooltip } from './buildSharedItemTooltip';
+export type { TreemapTooltipInput, TreemapTooltipNode } from './buildTreemapTooltip';
+export { buildTreemapTooltip } from './buildTreemapTooltip';
+export type { ChartTooltipValueFormatter, SharedTooltipItem, TooltipParam, TooltipStyleClasses, Translator } from './types';