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

package/src/css/Sparkline.module.scss

@@ -0,0 +1,13 @@
+.statisticsSparkline {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 40px;
+    min-width: 60px;
+}
+
+.statisticsSparklineChart {
+    position: absolute;
+    display: block;
+    inset: 0;
+}

package/src/echarts.ts

@@ -0,0 +1,47 @@
+import {
+    BarChart,
+    BoxplotChart,
+    CandlestickChart,
+    GaugeChart,
+    HeatmapChart,
+    LineChart,
+    PieChart,
+    RadarChart,
+    ScatterChart,
+    TreemapChart
+} from 'echarts/charts';
+import {
+    AxisPointerComponent,
+    GridComponent,
+    LegendComponent,
+    RadarComponent,
+    TitleComponent,
+    TooltipComponent,
+    VisualMapComponent
+} from 'echarts/components';
+import { use } from 'echarts/core';
+import { LabelLayout, LegacyGridContainLabel } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+use([
+    BarChart,
+    BoxplotChart,
+    CandlestickChart,
+    GaugeChart,
+    HeatmapChart,
+    LineChart,
+    PieChart,
+    RadarChart,
+    ScatterChart,
+    TreemapChart,
+    AxisPointerComponent,
+    GridComponent,
+    LegendComponent,
+    RadarComponent,
+    TitleComponent,
+    TooltipComponent,
+    VisualMapComponent,
+    LabelLayout,
+    LegacyGridContainLabel,
+    CanvasRenderer
+]);

package/src/index.ts

@@ -1,15 +1,19 @@
 import { amber500, blue500, cyan500, emerald500, fuchsia500, green500, indigo500, lime500, orange500, pink500, purple500, red500, rose50, sky500, teal500, violet500, yellow500 } from '@flux-ui/internals';
+import type { FluxStatisticsChartColor } from '@flux-ui/types';
 
 export * from './component';
+export * from './composable';
 
-export const CHART_COLORS = [
+export type { ChartTooltipValueFormatter, SharedTooltipItem, Translator } from './util';
+
+export const CHART_COLORS: readonly FluxStatisticsChartColor[] = [
     'var(--chart-1)',
     'var(--chart-2)',
     'var(--chart-3)',
     'var(--chart-4)'
 ];
 
-export const CHART_COLORFUL_COLORS = [
+export const CHART_COLORFUL_COLORS: readonly FluxStatisticsChartColor[] = [
     red500,
     orange500,
     amber500,
@@ -27,4 +31,4 @@ export const CHART_COLORFUL_COLORS = [
     fuchsia500,
     pink500,
     rose50
-];
+] as FluxStatisticsChartColor[];

package/src/util/baseOptions.ts

@@ -0,0 +1,74 @@
+import type { EChartsOption } from '~flux/statistics/composable';
+
+const FOREGROUND_LABEL = { show: true, color: 'var(--foreground-secondary)' } as const;
+const HIDDEN_AXIS = { show: false } as const;
+const DASHED_SPLIT_LINE = { show: true, lineStyle: { type: 'dashed' as const, color: 'var(--gray-200)' } } as const;
+
+interface CartesianBaseConfig {
+    readonly xAxisType?: 'category' | 'value';
+    readonly yAxisType?: 'value' | 'category';
+    readonly scale?: boolean;
+    readonly tooltipTrigger?: 'axis' | 'item';
+    readonly xAxisLabels?: boolean;
+    readonly yAxisLabels?: boolean;
+    readonly splitLines?: boolean;
+}
+
+export function buildCartesianGrid(xAxisLabels: boolean, yAxisLabels: boolean): EChartsOption['grid'] {
+    if (!xAxisLabels && !yAxisLabels) {
+        return { left: 0, right: 0, top: 0, bottom: 0, containLabel: false };
+    }
+
+    return {
+        left: yAxisLabels ? 9 : 0,
+        right: 9,
+        top: 9,
+        bottom: xAxisLabels ? 9 : 0,
+        containLabel: true
+    };
+}
+
+export function buildCartesianBaseOptions(config: CartesianBaseConfig = {}): EChartsOption {
+    const xAxisLabels = config.xAxisLabels ?? false;
+    const yAxisLabels = config.yAxisLabels ?? false;
+    const showSplitLines = config.splitLines ?? false;
+
+    const xSplitLine = showSplitLines && config.xAxisType === 'value' ? DASHED_SPLIT_LINE : HIDDEN_AXIS;
+    const ySplitLine = showSplitLines && config.yAxisType !== 'category' ? DASHED_SPLIT_LINE : HIDDEN_AXIS;
+
+    return {
+        grid: buildCartesianGrid(xAxisLabels, yAxisLabels),
+        tooltip: { trigger: config.tooltipTrigger ?? 'item' },
+        xAxis: {
+            type: config.xAxisType ?? 'category',
+            show: true,
+            scale: config.scale && config.xAxisType === 'value',
+            splitLine: xSplitLine,
+            axisLabel: xAxisLabels ? FOREGROUND_LABEL : HIDDEN_AXIS,
+            axisLine: HIDDEN_AXIS,
+            axisTick: HIDDEN_AXIS
+        },
+        yAxis: {
+            type: config.yAxisType ?? 'value',
+            show: true,
+            scale: config.scale && config.yAxisType !== 'category',
+            splitLine: ySplitLine,
+            axisLabel: yAxisLabels ? FOREGROUND_LABEL : HIDDEN_AXIS,
+            axisLine: HIDDEN_AXIS,
+            axisTick: HIDDEN_AXIS
+        }
+    };
+}
+
+export const POLAR_BASE_OPTIONS: EChartsOption = {
+    tooltip: { show: false },
+    xAxis: { show: false },
+    yAxis: { show: false },
+    grid: { show: false }
+};
+
+export const SPARKLINE_AXIS_BASE: EChartsOption = {
+    tooltip: { trigger: 'axis' },
+    xAxis: { show: false, boundaryGap: false },
+    yAxis: { show: false, min: 'dataMin', max: 'dataMax' }
+};

package/src/util/colors.ts

@@ -0,0 +1,86 @@
+import { ref } from 'vue';
+
+const CSS_VAR_PATTERN = /var\((--[^,)]+)(?:,\s*([^)]+))?\)/g;
+
+const themeVersion = ref(0);
+
+if (typeof document !== 'undefined') {
+    new MutationObserver(() => themeVersion.value++).observe(
+        document.documentElement,
+        { attributes: true, attributeFilter: ['class', 'data-theme'] }
+    );
+}
+
+export function useCssVarVersion() {
+    return themeVersion;
+}
+
+export function resolveCssVar(input: string, root?: HTMLElement): string {
+    if (typeof document === 'undefined' || !input.includes('var(')) {
+        return input;
+    }
+
+    const target = root ?? document.documentElement;
+
+    return input.replace(CSS_VAR_PATTERN, (match, name: string, fallback?: string) => {
+        const value = getComputedStyle(target).getPropertyValue(name).trim();
+
+        if (value) {
+            return value;
+        }
+
+        return fallback ? resolveCssVar(fallback.trim(), target) : match;
+    });
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+    if (value === null || typeof value !== 'object') {
+        return false;
+    }
+
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+}
+
+export function deepResolveCssVars<T>(value: T, root?: HTMLElement): T {
+    if (typeof value === 'string') {
+        return (value.includes('var(') ? resolveCssVar(value, root) : value) as T;
+    }
+
+    if (Array.isArray(value)) {
+        let changed = false;
+        const out: unknown[] = new Array(value.length);
+
+        for (let i = 0; i < value.length; i++) {
+            const resolved = deepResolveCssVars(value[i], root);
+
+            if (resolved !== value[i]) {
+                changed = true;
+            }
+
+            out[i] = resolved;
+        }
+
+        return (changed ? out : value) as T;
+    }
+
+    if (!isPlainObject(value)) {
+        return value;
+    }
+
+    let changed = false;
+    const out: Record<string, unknown> = {};
+
+    for (const key of Object.keys(value)) {
+        const original = value[key];
+        const resolved = deepResolveCssVars(original, root);
+
+        if (resolved !== original) {
+            changed = true;
+        }
+
+        out[key] = resolved;
+    }
+
+    return (changed ? out : value) as T;
+}

package/src/util/convert.ts

@@ -0,0 +1,360 @@
+import type {
+    FluxStatisticsChartAreaSeries,
+    FluxStatisticsChartBarSeries,
+    FluxStatisticsChartBoxPlotSeries,
+    FluxStatisticsChartBubbleSeries,
+    FluxStatisticsChartCandlestickSeries,
+    FluxStatisticsChartCartesianSeries,
+    FluxStatisticsChartCategoryPoint,
+    FluxStatisticsChartColor,
+    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 {
+    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 './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;
+}
+
+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;
+}
+
+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));
+}