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

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

@@ -0,0 +1,18 @@
+export type { AreaChartOptionsInput } from './buildAreaChartOptions';
+export { buildAreaChartOptions } from './buildAreaChartOptions';
+export type { BarChartOptionsInput } from './buildBarChartOptions';
+export { buildBarChartOptions } from './buildBarChartOptions';
+export type { BoxPlotChartOptionsInput } from './buildBoxPlotChartOptions';
+export { buildBoxPlotChartOptions } from './buildBoxPlotChartOptions';
+export type { BubbleChartOptionsInput } from './buildBubbleChartOptions';
+export { buildBubbleChartOptions } from './buildBubbleChartOptions';
+export type { CandlestickChartOptionsInput } from './buildCandlestickChartOptions';
+export { buildCandlestickChartOptions, candlestickLegendItemBuilder } from './buildCandlestickChartOptions';
+export type { HeatmapChartOptionsInput } from './buildHeatmapChartOptions';
+export { buildHeatmapChartOptions } from './buildHeatmapChartOptions';
+export type { LineChartOptionsInput } from './buildLineChartOptions';
+export { buildLineChartOptions } from './buildLineChartOptions';
+export type { MixedChartOptionsInput } from './buildMixedChartOptions';
+export { buildMixedChartOptions } from './buildMixedChartOptions';
+export type { ScatterChartOptionsInput } from './buildScatterChartOptions';
+export { buildScatterChartOptions } from './buildScatterChartOptions';

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

@@ -0,0 +1,31 @@
+import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { toDonutSeries } from '../../series';
+import type { ChartTooltipValueFormatter, SharedTooltipItem, TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildSharedItemTooltip } from '../../tooltips';
+import { buildCircularBaseOptions } from '../buildCircularBaseOptions';
+
+export interface DonutChartOptionsInput {
+    readonly slices: readonly FluxStatisticsChartPieSlice[];
+    readonly palette: readonly string[];
+    readonly tooltipItems: readonly SharedTooltipItem[];
+    readonly title?: string;
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
+    readonly advancedOptions?: EChartsOption;
+}
+
+export function buildDonutChartOptions(input: DonutChartOptionsInput): EChartsOption {
+    const { slices, palette, tooltipItems, title, t, styles, tooltip = false, tooltipValueFormatter, advancedOptions = {} } = input;
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildSharedItemTooltip({ t, styles, getItems: () => tooltipItems, getTitle: () => title, valueFormatter: tooltipValueFormatter })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = [toDonutSeries(slices, palette)];
+
+    return merge({}, buildCircularBaseOptions(), tooltipOptions, advancedOptions, { series: echartsSeries, color: palette });
+}

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

@@ -0,0 +1,45 @@
+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 { toGaugeSeries } from '../../series';
+import type { TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildGaugeTooltip } from '../../tooltips';
+import { buildCircularBaseOptions } from '../buildCircularBaseOptions';
+
+export interface GaugeChartOptionsInput {
+    readonly series: readonly FluxStatisticsChartGaugeSeries[];
+    readonly palette: readonly string[];
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly advancedOptions?: EChartsOption;
+}
+
+export function gaugeLegendItemBuilder(
+    s: FluxStatisticsChartGaugeSeries,
+    color: string,
+    _index: number,
+    t: Translator
+): ChartLegendItem {
+    return {
+        color,
+        icon: s.icon,
+        label: s.name ? t(String(s.name)) : '',
+        value: s.value
+    };
+}
+
+export function buildGaugeChartOptions(input: GaugeChartOptionsInput): EChartsOption {
+    const { series, palette, t, styles, tooltip = false, advancedOptions = {} } = input;
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildGaugeTooltip({ t, styles, getSeries: () => series, getPalette: () => palette })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = series.map((s, i) =>
+        toGaugeSeries({ ...s, name: s.name ? t(String(s.name)) : s.name }, palette[i], i, series.length)
+    );
+
+    return merge({}, buildCircularBaseOptions(), tooltipOptions, advancedOptions, { series: echartsSeries, color: palette });
+}

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

@@ -0,0 +1,31 @@
+import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { toPieSeries } from '../../series';
+import type { ChartTooltipValueFormatter, SharedTooltipItem, TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildSharedItemTooltip } from '../../tooltips';
+import { buildCircularBaseOptions } from '../buildCircularBaseOptions';
+
+export interface PieChartOptionsInput {
+    readonly slices: readonly FluxStatisticsChartPieSlice[];
+    readonly palette: readonly string[];
+    readonly tooltipItems: readonly SharedTooltipItem[];
+    readonly title?: string;
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
+    readonly advancedOptions?: EChartsOption;
+}
+
+export function buildPieChartOptions(input: PieChartOptionsInput): EChartsOption {
+    const { slices, palette, tooltipItems, title, t, styles, tooltip = false, tooltipValueFormatter, advancedOptions = {} } = input;
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildSharedItemTooltip({ t, styles, getItems: () => tooltipItems, getTitle: () => title, valueFormatter: tooltipValueFormatter })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = [toPieSeries(slices, palette)];
+
+    return merge({}, buildCircularBaseOptions(), tooltipOptions, advancedOptions, { series: echartsSeries, color: palette });
+}

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

@@ -0,0 +1,31 @@
+import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { toPolarAreaSeries } from '../../series';
+import type { ChartTooltipValueFormatter, SharedTooltipItem, TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildSharedItemTooltip } from '../../tooltips';
+import { buildCircularBaseOptions } from '../buildCircularBaseOptions';
+
+export interface PolarAreaChartOptionsInput {
+    readonly slices: readonly FluxStatisticsChartPieSlice[];
+    readonly palette: readonly string[];
+    readonly tooltipItems: readonly SharedTooltipItem[];
+    readonly title?: string;
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
+    readonly advancedOptions?: EChartsOption;
+}
+
+export function buildPolarAreaChartOptions(input: PolarAreaChartOptionsInput): EChartsOption {
+    const { slices, palette, tooltipItems, title, t, styles, tooltip = false, tooltipValueFormatter, advancedOptions = {} } = input;
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildSharedItemTooltip({ t, styles, getItems: () => tooltipItems, getTitle: () => title, valueFormatter: tooltipValueFormatter })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = [toPolarAreaSeries(slices, palette)];
+
+    return merge({}, buildCircularBaseOptions(), tooltipOptions, advancedOptions, { series: echartsSeries, color: palette });
+}

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

@@ -0,0 +1,52 @@
+import type { FluxStatisticsChartRadarIndicator, FluxStatisticsChartRadarSeries } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { toRadarSeries } from '../../series';
+import type { TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildRadarTooltip } from '../../tooltips';
+import { buildCircularBaseOptions } from '../buildCircularBaseOptions';
+
+export interface RadarChartOptionsInput {
+    readonly series: readonly FluxStatisticsChartRadarSeries[];
+    readonly indicators: readonly FluxStatisticsChartRadarIndicator[];
+    readonly palette: readonly string[];
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly advancedOptions?: EChartsOption;
+}
+
+export function buildRadarChartOptions(input: RadarChartOptionsInput): EChartsOption {
+    const { series, indicators, palette, t, styles, tooltip = false, advancedOptions = {} } = input;
+
+    const radarConfig: EChartsOption = {
+        radar: {
+            indicator: indicators.map(i => ({ name: t(String(i.name)), max: i.max })),
+            splitLine: { lineStyle: { color: 'var(--gray-200)' } },
+            splitArea: { show: false },
+            axisLine: { lineStyle: { color: 'var(--gray-200)' } },
+            axisName: {
+                color: 'var(--foreground-secondary)',
+                fontSize: 12,
+                fontWeight: 500
+            }
+        }
+    };
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildRadarTooltip({
+            t,
+            styles,
+            getSeries: () => series,
+            getIndicators: () => indicators,
+            getPalette: () => palette
+        })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = [toRadarSeries(
+        series.map(s => ({ ...s, name: s.name ? t(String(s.name)) : undefined })),
+        palette
+    )];
+
+    return merge({}, buildCircularBaseOptions(), radarConfig, tooltipOptions, advancedOptions, { series: echartsSeries, color: palette });
+}

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

@@ -0,0 +1,28 @@
+import type { FluxStatisticsChartTreemapNode } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { CHART_DEFAULT_COLORS, toTreemapSeries } from '../../series';
+import type { TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildTreemapTooltip } from '../../tooltips';
+import { buildCircularBaseOptions } from '../buildCircularBaseOptions';
+
+export interface TreemapChartOptionsInput {
+    readonly nodes: readonly FluxStatisticsChartTreemapNode[];
+    readonly palette?: readonly string[];
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly advancedOptions?: EChartsOption;
+}
+
+export function buildTreemapChartOptions(input: TreemapChartOptionsInput): EChartsOption {
+    const { nodes, palette = CHART_DEFAULT_COLORS, t, styles, tooltip = false, advancedOptions = {} } = input;
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildTreemapTooltip({ t, styles })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = [toTreemapSeries(nodes, palette)];
+
+    return merge({}, buildCircularBaseOptions(), tooltipOptions, advancedOptions, { series: echartsSeries });
+}

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

@@ -0,0 +1,12 @@
+export type { DonutChartOptionsInput } from './buildDonutChartOptions';
+export { buildDonutChartOptions } from './buildDonutChartOptions';
+export type { GaugeChartOptionsInput } from './buildGaugeChartOptions';
+export { buildGaugeChartOptions, gaugeLegendItemBuilder } from './buildGaugeChartOptions';
+export type { PieChartOptionsInput } from './buildPieChartOptions';
+export { buildPieChartOptions } from './buildPieChartOptions';
+export type { PolarAreaChartOptionsInput } from './buildPolarAreaChartOptions';
+export { buildPolarAreaChartOptions } from './buildPolarAreaChartOptions';
+export type { RadarChartOptionsInput } from './buildRadarChartOptions';
+export { buildRadarChartOptions } from './buildRadarChartOptions';
+export type { TreemapChartOptionsInput } from './buildTreemapChartOptions';
+export { buildTreemapChartOptions } from './buildTreemapChartOptions';

package/src/util/options/index.ts

@@ -0,0 +1,6 @@
+export * from './cartesian';
+export * from './circular';
+export { buildBaseOptions } from './buildBaseOptions';
+export type { CartesianBaseConfig } from './buildCartesianBaseOptions';
+export { buildCartesianBaseOptions, buildCartesianGrid } from './buildCartesianBaseOptions';
+export { buildCircularBaseOptions } from './buildCircularBaseOptions';

package/src/util/series/chartColors.ts

@@ -0,0 +1,20 @@
+import type { FluxStatisticsChartColor } from '@flux-ui/types';
+
+export const CHART_DEFAULT_COLORS = [
+    'var(--chart-1)',
+    'var(--chart-2)',
+    'var(--chart-3)',
+    'var(--chart-4)'
+] as const;
+
+export function resolveChartColor(color?: FluxStatisticsChartColor): string | undefined {
+    if (!color) {
+        return undefined;
+    }
+
+    if (color.startsWith('#') || color.startsWith('var(')) {
+        return color;
+    }
+
+    return `var(--${color}-600)`;
+}

package/src/util/{convert.ts → series/converters.ts}

@@ -4,9 +4,7 @@ import type {
     FluxStatisticsChartBoxPlotSeries,
     FluxStatisticsChartBubbleSeries,
     FluxStatisticsChartCandlestickSeries,
-    FluxStatisticsChartCartesianSeries,
     FluxStatisticsChartCategoryPoint,
-    FluxStatisticsChartColor,
     FluxStatisticsChartGaugeSeries,
     FluxStatisticsChartHeatmapSeries,
     FluxStatisticsChartLineSeries,
@@ -28,6 +26,7 @@ import type {
     ScatterSeriesOption,
     TreemapSeriesOption
 } from 'echarts/charts';
+import { resolveChartColor } from './chartColors';
 import {
     AREA_SERIES_DEFAULTS,
     BAR_SERIES_DEFAULTS,
@@ -43,43 +42,7 @@ import {
     RADAR_SERIES_DEFAULTS,
     SCATTER_SERIES_DEFAULTS,
     TREEMAP_SERIES_DEFAULTS
-} from './seriesDefaults';
-
-export function resolveChartColor(color?: FluxStatisticsChartColor): string | undefined {
-    if (!color) {
-        return undefined;
-    }
-
-    if (color.startsWith('#') || color.startsWith('var(')) {
-        return color;
-    }
-
-    return `var(--${color}-600)`;
-}
-
-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;
-}
+} from './defaults';
 
 function extractValues(data: readonly (number | FluxStatisticsChartCategoryPoint)[]): number[] {
     return data.map(point => typeof point === 'number' ? point : point.value);
@@ -353,8 +316,3 @@ export function toGaugeSeries(
         }
     } as GaugeSeriesOption;
 }
-
-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/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/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
+        }
+    };
+}