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

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/series/converters.ts

@@ -0,0 +1,318 @@
+import type {
+    FluxStatisticsChartAreaSeries,
+    FluxStatisticsChartBarSeries,
+    FluxStatisticsChartBoxPlotSeries,
+    FluxStatisticsChartBubbleSeries,
+    FluxStatisticsChartCandlestickSeries,
+    FluxStatisticsChartCategoryPoint,
+    FluxStatisticsChartGaugeSeries,
+    FluxStatisticsChartHeatmapSeries,
+    FluxStatisticsChartLineSeries,
+    FluxStatisticsChartMixedSeries,
+    FluxStatisticsChartPieSlice,
+    FluxStatisticsChartRadarSeries,
+    FluxStatisticsChartScatterSeries,
+    FluxStatisticsChartTreemapNode
+} from '@flux-ui/types';
+import type {
+    BarSeriesOption,
+    BoxplotSeriesOption,
+    CandlestickSeriesOption,
+    GaugeSeriesOption,
+    HeatmapSeriesOption,
+    LineSeriesOption,
+    PieSeriesOption,
+    RadarSeriesOption,
+    ScatterSeriesOption,
+    TreemapSeriesOption
+} from 'echarts/charts';
+import { resolveChartColor } from './chartColors';
+import {
+    AREA_SERIES_DEFAULTS,
+    BAR_SERIES_DEFAULTS,
+    BOXPLOT_SERIES_DEFAULTS,
+    BUBBLE_SERIES_DEFAULTS,
+    CANDLESTICK_SERIES_DEFAULTS,
+    DONUT_SERIES_DEFAULTS,
+    GAUGE_SERIES_DEFAULTS,
+    HEATMAP_SERIES_DEFAULTS,
+    LINE_SERIES_DEFAULTS,
+    PIE_SERIES_DEFAULTS,
+    POLAR_AREA_SERIES_DEFAULTS,
+    RADAR_SERIES_DEFAULTS,
+    SCATTER_SERIES_DEFAULTS,
+    TREEMAP_SERIES_DEFAULTS
+} from './defaults';
+
+function extractValues(data: readonly (number | FluxStatisticsChartCategoryPoint)[]): number[] {
+    return data.map(point => typeof point === 'number' ? point : point.value);
+}
+
+export function toLineSeries(s: FluxStatisticsChartLineSeries, fallbackColor: string): LineSeriesOption {
+    return {
+        ...LINE_SERIES_DEFAULTS,
+        name: s.name,
+        data: extractValues(s.data),
+        color: resolveChartColor(s.color) ?? fallbackColor
+    };
+}
+
+export function toAreaSeries(s: FluxStatisticsChartAreaSeries, fallbackColor: string): LineSeriesOption {
+    return {
+        ...AREA_SERIES_DEFAULTS,
+        name: s.name,
+        data: extractValues(s.data),
+        color: resolveChartColor(s.color) ?? fallbackColor
+    };
+}
+
+export function toBarSeries(s: FluxStatisticsChartBarSeries, fallbackColor: string): BarSeriesOption {
+    return {
+        ...BAR_SERIES_DEFAULTS,
+        name: s.name,
+        data: extractValues(s.data),
+        color: resolveChartColor(s.color) ?? fallbackColor
+    };
+}
+
+export function toMixedSeries(s: FluxStatisticsChartMixedSeries, fallbackColor: string): LineSeriesOption | BarSeriesOption {
+    const color = resolveChartColor(s.color) ?? fallbackColor;
+    const values = extractValues(s.data);
+
+    if (s.type === 'bar') {
+        return {
+            ...BAR_SERIES_DEFAULTS,
+            barCategoryGap: '55%',
+            name: s.name,
+            data: values,
+            color
+        };
+    }
+
+    if (s.type === 'area') {
+        return {
+            ...AREA_SERIES_DEFAULTS,
+            name: s.name,
+            data: values,
+            color
+        };
+    }
+
+    return {
+        ...LINE_SERIES_DEFAULTS,
+        lineStyle: { width: 2 },
+        name: s.name,
+        data: values,
+        color
+    };
+}
+
+interface PieDataItem {
+    readonly name: string;
+    readonly value: number;
+    readonly itemStyle?: { readonly color: string };
+}
+
+function buildPieData(slices: readonly FluxStatisticsChartPieSlice[], palette: readonly string[]): PieDataItem[] {
+    return slices.map((slice, idx) => {
+        const color = resolveChartColor(slice.color) ?? palette[idx % palette.length];
+
+        return {
+            name: slice.label,
+            value: slice.value,
+            itemStyle: { color }
+        };
+    });
+}
+
+export function toPieSeries(slices: readonly FluxStatisticsChartPieSlice[], palette: readonly string[]): PieSeriesOption {
+    return {
+        ...PIE_SERIES_DEFAULTS,
+        data: buildPieData(slices, palette)
+    };
+}
+
+export function toDonutSeries(slices: readonly FluxStatisticsChartPieSlice[], palette: readonly string[]): PieSeriesOption {
+    return {
+        ...DONUT_SERIES_DEFAULTS,
+        data: buildPieData(slices, palette)
+    };
+}
+
+export function toPolarAreaSeries(slices: readonly FluxStatisticsChartPieSlice[], palette: readonly string[]): PieSeriesOption {
+    return {
+        ...POLAR_AREA_SERIES_DEFAULTS,
+        data: buildPieData(slices, palette)
+    };
+}
+
+interface RadarRing {
+    readonly value: readonly number[];
+    readonly name?: string;
+}
+
+export function toRadarSeries(series: readonly FluxStatisticsChartRadarSeries[], palette: readonly string[]): RadarSeriesOption {
+    const data: RadarRing[] = series.map(ring => ({
+        value: ring.values,
+        name: ring.name
+    }));
+
+    return {
+        ...RADAR_SERIES_DEFAULTS,
+        data,
+        color: palette as string[]
+    } as RadarSeriesOption;
+}
+
+export function toScatterSeries(s: FluxStatisticsChartScatterSeries, fallbackColor: string): ScatterSeriesOption {
+    return {
+        ...SCATTER_SERIES_DEFAULTS,
+        name: s.name,
+        data: s.data.map(point => [point.x, point.y]),
+        color: resolveChartColor(s.color) ?? fallbackColor
+    };
+}
+
+export function toBubbleSeries(s: FluxStatisticsChartBubbleSeries, fallbackColor: string): ScatterSeriesOption {
+    const sizes = s.data.map(p => p.size);
+    const maxSize = Math.max(1, ...sizes);
+
+    return {
+        ...BUBBLE_SERIES_DEFAULTS,
+        name: s.name,
+        data: s.data.map(point => [point.x, point.y, point.size]),
+        symbolSize: (val: unknown) => {
+            const size = Array.isArray(val) ? (val[2] as number) : 0;
+            return 14 + (size / maxSize) * 30;
+        },
+        color: resolveChartColor(s.color) ?? fallbackColor
+    };
+}
+
+export function toCandlestickSeries(s: FluxStatisticsChartCandlestickSeries): CandlestickSeriesOption {
+    const positive = resolveChartColor(s.positiveColor) ?? 'var(--success-500)';
+    const negative = resolveChartColor(s.negativeColor) ?? 'var(--danger-500)';
+
+    return {
+        ...CANDLESTICK_SERIES_DEFAULTS,
+        name: s.name,
+        data: s.data.map(point => [point.open, point.close, point.low, point.high]),
+        itemStyle: {
+            color: positive,
+            color0: negative,
+            borderColor: positive,
+            borderColor0: negative
+        }
+    };
+}
+
+export function toBoxPlotSeries(s: FluxStatisticsChartBoxPlotSeries, fallbackColor: string): BoxplotSeriesOption {
+    const color = resolveChartColor(s.color) ?? fallbackColor;
+
+    return {
+        ...BOXPLOT_SERIES_DEFAULTS,
+        name: s.name,
+        data: s.data.map(point => [point.min, point.q1, point.median, point.q3, point.max]),
+        itemStyle: {
+            color,
+            borderColor: 'var(--foreground-prominent)',
+            borderWidth: 1
+        }
+    };
+}
+
+export function toHeatmapSeries(
+    s: FluxStatisticsChartHeatmapSeries,
+    xLabels: readonly (string | number)[],
+    yLabels: readonly (string | number)[]
+): HeatmapSeriesOption {
+    const data = s.data.map(point => {
+        const xIdx = typeof point.x === 'number' ? point.x : xLabels.indexOf(point.x);
+        const yIdx = typeof point.y === 'number' ? point.y : yLabels.indexOf(point.y);
+
+        return [xIdx, yIdx, point.value];
+    });
+
+    return {
+        ...HEATMAP_SERIES_DEFAULTS,
+        name: s.name,
+        data
+    };
+}
+
+interface TreemapDataItem {
+    readonly name: string;
+    readonly value?: number;
+    readonly itemStyle?: { readonly color: string };
+    readonly children?: TreemapDataItem[];
+}
+
+function mapTreemapNode(node: FluxStatisticsChartTreemapNode, palette: readonly string[], index: number): TreemapDataItem {
+    const resolved = resolveChartColor(node.color);
+    const color = resolved ?? palette[index % palette.length];
+
+    return {
+        name: node.name,
+        value: node.value,
+        itemStyle: { color },
+        children: node.children?.map((child, idx) => mapTreemapNode(child, palette, idx))
+    };
+}
+
+export function toTreemapSeries(
+    nodes: readonly FluxStatisticsChartTreemapNode[],
+    palette: readonly string[]
+): TreemapSeriesOption {
+    return {
+        ...TREEMAP_SERIES_DEFAULTS,
+        data: nodes.map((node, idx) => mapTreemapNode(node, palette, idx)),
+        levels: [{
+            itemStyle: { borderColor: 'var(--surface)', borderWidth: 3, gapWidth: 0 }
+        }, {
+            itemStyle: { gapWidth: 1 }
+        }, {
+            itemStyle: { gapWidth: 1 }
+        }]
+    } as TreemapSeriesOption;
+}
+
+export function toGaugeSeries(
+    s: FluxStatisticsChartGaugeSeries,
+    fallbackColor: string,
+    index: number,
+    total: number
+): GaugeSeriesOption {
+    const color = resolveChartColor(s.color) ?? fallbackColor;
+    const ringStep = total > 1 ? 30 : 0;
+    const baseRadius = s.radius ?? (90 - index * ringStep);
+    const labelOffset = (total - 1 - index) * 22 - 30;
+
+    return {
+        ...GAUGE_SERIES_DEFAULTS,
+        radius: `${baseRadius}%`,
+        data: [{ value: s.value, name: s.name, itemStyle: { color } }],
+        progress: {
+            show: true,
+            width: 14,
+            roundCap: true,
+            itemStyle: { color }
+        },
+        title: {
+            show: true,
+            color: 'var(--foreground-secondary)',
+            fontSize: 12,
+            fontWeight: 500,
+            fontFamily: 'inherit',
+            offsetCenter: [0, `${labelOffset}%`]
+        },
+        detail: {
+            show: total === 1,
+            color: 'var(--foreground-prominent)',
+            fontSize: 28,
+            fontWeight: 800,
+            fontFamily: 'inherit',
+            offsetCenter: [0, '10%'],
+            formatter: '{value}%'
+        }
+    } as GaugeSeriesOption;
+}