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

package/dist/util/baseOptions.d.ts

@@ -0,0 +1,15 @@
+import { EChartsOption } from '../composable';
+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 declare function buildCartesianGrid(xAxisLabels: boolean, yAxisLabels: boolean): EChartsOption['grid'];
+export declare function buildCartesianBaseOptions(config?: CartesianBaseConfig): EChartsOption;
+export declare const POLAR_BASE_OPTIONS: EChartsOption;
+export declare const SPARKLINE_AXIS_BASE: EChartsOption;
+export {};

package/dist/util/colors.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+export declare function useCssVarVersion(): Ref<number, number>;
+export declare function resolveCssVar(input: string, root?: HTMLElement): string;
+export declare function deepResolveCssVars<T>(value: T, root?: HTMLElement): T;

package/dist/util/convert.d.ts

@@ -0,0 +1,22 @@
+import { FluxStatisticsChartAreaSeries, FluxStatisticsChartBarSeries, FluxStatisticsChartBoxPlotSeries, FluxStatisticsChartBubbleSeries, FluxStatisticsChartCandlestickSeries, FluxStatisticsChartCartesianSeries, FluxStatisticsChartCategoryPoint, FluxStatisticsChartColor, FluxStatisticsChartGaugeSeries, FluxStatisticsChartHeatmapSeries, FluxStatisticsChartLineSeries, FluxStatisticsChartMixedSeries, FluxStatisticsChartPieSlice, FluxStatisticsChartRadarSeries, FluxStatisticsChartScatterSeries, FluxStatisticsChartTreemapNode } from '@flux-ui/types';
+import { BarSeriesOption, BoxplotSeriesOption, CandlestickSeriesOption, GaugeSeriesOption, HeatmapSeriesOption, LineSeriesOption, PieSeriesOption, RadarSeriesOption, ScatterSeriesOption, TreemapSeriesOption } from 'echarts/charts';
+export declare function resolveChartColor(color?: FluxStatisticsChartColor): string | undefined;
+export declare function extractLabels(series: readonly {
+    readonly data: readonly (number | FluxStatisticsChartCategoryPoint)[];
+}[]): readonly string[] | undefined;
+export declare function toLineSeries(s: FluxStatisticsChartLineSeries, fallbackColor: string): LineSeriesOption;
+export declare function toAreaSeries(s: FluxStatisticsChartAreaSeries, fallbackColor: string): LineSeriesOption;
+export declare function toBarSeries(s: FluxStatisticsChartBarSeries, fallbackColor: string): BarSeriesOption;
+export declare function toMixedSeries(s: FluxStatisticsChartMixedSeries, fallbackColor: string): LineSeriesOption | BarSeriesOption;
+export declare function toPieSeries(slices: readonly FluxStatisticsChartPieSlice[], palette: readonly string[]): PieSeriesOption;
+export declare function toDonutSeries(slices: readonly FluxStatisticsChartPieSlice[], palette: readonly string[]): PieSeriesOption;
+export declare function toPolarAreaSeries(slices: readonly FluxStatisticsChartPieSlice[], palette: readonly string[]): PieSeriesOption;
+export declare function toRadarSeries(series: readonly FluxStatisticsChartRadarSeries[], palette: readonly string[]): RadarSeriesOption;
+export declare function toScatterSeries(s: FluxStatisticsChartScatterSeries, fallbackColor: string): ScatterSeriesOption;
+export declare function toBubbleSeries(s: FluxStatisticsChartBubbleSeries, fallbackColor: string): ScatterSeriesOption;
+export declare function toCandlestickSeries(s: FluxStatisticsChartCandlestickSeries): CandlestickSeriesOption;
+export declare function toBoxPlotSeries(s: FluxStatisticsChartBoxPlotSeries, fallbackColor: string): BoxplotSeriesOption;
+export declare function toHeatmapSeries(s: FluxStatisticsChartHeatmapSeries, xLabels: readonly (string | number)[], yLabels: readonly (string | number)[]): HeatmapSeriesOption;
+export declare function toTreemapSeries(nodes: readonly FluxStatisticsChartTreemapNode[], palette: readonly string[]): TreemapSeriesOption;
+export declare function toGaugeSeries(s: FluxStatisticsChartGaugeSeries, fallbackColor: string, index: number, total: number): GaugeSeriesOption;
+export declare function cartesianFallbackLabels(series: readonly FluxStatisticsChartCartesianSeries[]): string[];

package/dist/util/defaultOptions.d.ts

@@ -0,0 +1,76 @@
+import { FluxIconName } from '@flux-ui/types';
+import { EChartsOption } from '../composable';
+export interface TooltipParam {
+    readonly seriesName?: string;
+    readonly seriesIndex: number;
+    readonly color: string;
+    readonly value: number | string | (number | string)[];
+    readonly name: string;
+    readonly dataIndex?: number;
+    readonly axisValue?: string;
+    readonly axisValueLabel?: string;
+    readonly data?: unknown;
+    readonly marker?: string;
+}
+export type TooltipStyleClasses = {
+    readonly statisticsChartTooltipTitle: string;
+    readonly statisticsChartTooltipBody: string;
+    readonly statisticsChartTooltipSection: string;
+    readonly statisticsChartTooltipSectionTitle: string;
+    readonly statisticsChartTooltipSectionBody: string;
+    readonly statisticsChartTooltipSeriesColor: string;
+    readonly statisticsChartTooltipSeriesIcon: string;
+    readonly statisticsChartTooltipSeriesName: string;
+    readonly statisticsChartTooltipSeriesValue: string;
+    readonly isActive: string;
+    readonly isDimmed: string;
+};
+export type Translator = (key: string) => string;
+export interface SharedTooltipItem {
+    readonly name: string;
+    readonly value: number | string;
+    readonly color: string;
+    readonly icon?: FluxIconName;
+    readonly seriesIndex?: number;
+    readonly dataIndex?: number;
+}
+export type ChartTooltipValueFormatter = (value: number | string, item: SharedTooltipItem) => string;
+export declare const CHART_DEFAULT_COLORS: readonly ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)"];
+export declare function buildTooltipFormatter(t: Translator, styles: TooltipStyleClasses, getSeriesIcons?: () => readonly (FluxIconName | undefined)[], valueFormatter?: ChartTooltipValueFormatter): (params: TooltipParam | TooltipParam[]) => string;
+export declare function buildCartesianTooltipOptions(t: Translator, styles: TooltipStyleClasses, getSeriesIcons: () => readonly (FluxIconName | undefined)[], valueFormatter?: ChartTooltipValueFormatter): EChartsOption;
+export declare function buildSharedItemTooltipFormatter(t: Translator, styles: TooltipStyleClasses, getItems: () => readonly SharedTooltipItem[], getTitle?: () => string | undefined, valueFormatter?: ChartTooltipValueFormatter): (params: TooltipParam | TooltipParam[]) => string;
+export interface BoxPlotTooltipPoint {
+    readonly label?: string;
+    readonly min: number;
+    readonly q1: number;
+    readonly median: number;
+    readonly q3: number;
+    readonly max: number;
+}
+export declare function buildBoxPlotTooltipOptions(t: Translator, styles: TooltipStyleClasses, getSeries: () => readonly {
+    readonly name?: string;
+    readonly icon?: FluxIconName;
+    readonly data: readonly BoxPlotTooltipPoint[];
+}[], getPalette: () => readonly string[]): EChartsOption;
+export interface HeatmapTooltipPoint {
+    readonly x: string | number;
+    readonly y: string | number;
+    readonly value: number;
+    readonly formatted?: string;
+}
+export declare function buildHeatmapTooltipOptions(t: Translator, styles: TooltipStyleClasses, getSeries: () => readonly {
+    readonly name?: string;
+    readonly data: readonly HeatmapTooltipPoint[];
+}[]): EChartsOption;
+export interface TreemapTooltipNode {
+    readonly name: string;
+    readonly value?: number;
+    readonly color?: string;
+}
+export declare function buildTreemapTooltipOptions(t: Translator, styles: TooltipStyleClasses): EChartsOption;
+export declare function buildGaugeTooltipOptions(t: Translator, styles: TooltipStyleClasses, getSeries: () => readonly {
+    readonly name?: string;
+    readonly value: number;
+    readonly icon?: FluxIconName;
+}[], getPalette: () => readonly string[]): EChartsOption;
+export declare function buildDefaultOptions(): EChartsOption;

package/dist/util/iconSvg.d.ts

@@ -0,0 +1,2 @@
+import { FluxIconName } from '@flux-ui/types';
+export declare function renderIconSvg(name: FluxIconName | undefined, color: string, size?: number): string;

package/dist/util/index.d.ts

@@ -0,0 +1,7 @@
+export * from './baseOptions';
+export * from './colors';
+export * from './convert';
+export * from './defaultOptions';
+export * from './iconSvg';
+export * from './seriesDefaults';
+export * from './sparklineOptions';

package/dist/util/seriesDefaults.d.ts

@@ -0,0 +1,15 @@
+import { BarSeriesOption, BoxplotSeriesOption, CandlestickSeriesOption, GaugeSeriesOption, HeatmapSeriesOption, LineSeriesOption, PieSeriesOption, RadarSeriesOption, ScatterSeriesOption, TreemapSeriesOption } from 'echarts/charts';
+export declare const LINE_SERIES_DEFAULTS: Partial<LineSeriesOption>;
+export declare const AREA_SERIES_DEFAULTS: Partial<LineSeriesOption>;
+export declare const BAR_SERIES_DEFAULTS: Partial<BarSeriesOption>;
+export declare const PIE_SERIES_DEFAULTS: Partial<PieSeriesOption>;
+export declare const DONUT_SERIES_DEFAULTS: Partial<PieSeriesOption>;
+export declare const POLAR_AREA_SERIES_DEFAULTS: Partial<PieSeriesOption>;
+export declare const RADAR_SERIES_DEFAULTS: Partial<RadarSeriesOption>;
+export declare const HEATMAP_SERIES_DEFAULTS: Partial<HeatmapSeriesOption>;
+export declare const SCATTER_SERIES_DEFAULTS: Partial<ScatterSeriesOption>;
+export declare const BUBBLE_SERIES_DEFAULTS: Partial<ScatterSeriesOption>;
+export declare const BOXPLOT_SERIES_DEFAULTS: Partial<BoxplotSeriesOption>;
+export declare const CANDLESTICK_SERIES_DEFAULTS: Partial<CandlestickSeriesOption>;
+export declare const TREEMAP_SERIES_DEFAULTS: Partial<TreemapSeriesOption>;
+export declare const GAUGE_SERIES_DEFAULTS: Partial<GaugeSeriesOption>;

package/dist/util/sparklineOptions.d.ts

@@ -0,0 +1,7 @@
+import { EChartsOption } from '../composable';
+export type SparklineVariant = 'line' | 'bar' | 'area';
+export interface SparklineSeriesItem {
+    readonly name?: string;
+    readonly data: (number | string | null)[];
+}
+export declare function buildSparklineOptions(variant: SparklineVariant, color: string, series: readonly SparklineSeriesItem[]): EChartsOption;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/statistics",
     "description": "Statistics components for the Flux UI library.",
-    "version": "3.0.0-next.66",
+    "version": "3.0.0-next.68",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -49,29 +49,28 @@
     "types": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/common": "^3.25.0",
-        "@basmilius/utils": "^3.25.0",
-        "@flux-ui/components": "3.0.0-next.66",
-        "@flux-ui/internals": "3.0.0-next.66",
-        "@flux-ui/types": "3.0.0-next.66",
+        "@basmilius/common": "^3.33.0",
+        "@basmilius/utils": "^3.33.0",
+        "@flux-ui/components": "3.0.0-next.68",
+        "@flux-ui/internals": "3.0.0-next.68",
+        "@flux-ui/types": "3.0.0-next.68",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {
-        "apexcharts": "^5.10.6",
+        "echarts": "^6.0.0",
         "lodash-es": "^4.18.1",
-        "vue": "^3.6.0-beta.10",
-        "vue-i18n": "^11.4.0",
-        "vue3-apexcharts": "^1.11.1"
+        "vue": "^3.6.0-beta.12",
+        "vue-i18n": "^11.4.2"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.25.0",
+        "@basmilius/vite-preset": "^3.33.0",
         "@types/lodash-es": "^4.17.12",
-        "@types/node": "^25.6.0",
-        "@vitejs/plugin-vue": "^6.0.6",
+        "@types/node": "^25.8.0",
+        "@vitejs/plugin-vue": "^6.0.7",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.99.0",
         "typescript": "^6.0.3",
-        "vite": "^8.0.10",
-        "vue-tsc": "^3.2.8"
+        "vite": "^8.0.13",
+        "vue-tsc": "^3.2.9"
     }
 }

package/src/component/FluxStatisticsAreaChart.vue

@@ -1,59 +1,56 @@
 <template>
     <Chart
-        :aspectRatio="aspectRatio"
-        :options="merge({
-            chart: {
-                type: 'area',
-                sparkline: {
-                    enabled: true
-                }
-            },
-            fill: {
-                gradient: {
-                    enabled: true,
-                    opacityFrom: 0.5,
-                    opacityTo: 0
-                }
-            },
-            grid: {
-                show: true,
-                clipMarkers: false
-            },
-            legend: {
-                show: false
-            },
-            stroke: {
-                curve: 'smooth',
-                width: 2
-            }
-        }, options)"
-        :series="translatedSeries"/>
+        ref="chartRef"
+        :options="mergedOptions"/>
 </template>
 
 <script
     lang="ts"
     setup>
-    import type { ApexOptions } from 'apexcharts';
+    import type { FluxStatisticsChartAreaSeries } from '@flux-ui/types';
     import { merge } from 'lodash-es';
     import { computed } from 'vue';
-    import { useI18n } from 'vue-i18n';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildCartesianBaseOptions, buildCartesianTooltipOptions, cartesianFallbackLabels, type ChartTooltipValueFormatter, extractLabels, toAreaSeries } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        options = {},
-        series
+        advancedOptions = {},
+        labels,
+        series,
+        splitLines = false,
+        tooltip = false,
+        tooltipValueFormatter,
+        xAxisLabels = false,
+        yAxisLabels = false
     } = defineProps<{
-        readonly aspectRatio?: number;
-        readonly options?: ApexOptions;
-        readonly series: ApexOptions['series'];
+        readonly advancedOptions?: EChartsOption;
+        readonly labels?: readonly string[];
+        readonly series: readonly FluxStatisticsChartAreaSeries[];
+        readonly splitLines?: boolean;
+        readonly tooltip?: boolean;
+        readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
+        readonly xAxisLabels?: boolean;
+        readonly yAxisLabels?: boolean;
     }>();
 
-    const {t} = useI18n({useScope: 'parent'});
+    const { t, palette } = useChartSeriesSetup(() => series);
 
-    const translatedSeries = computed(() => {
-        return (series as any).map((seriesItem: any) => ({
-            ...seriesItem,
-            name: t(seriesItem.name as string)
-        }));
+    const xLabels = computed<readonly string[]>(() => labels ?? extractLabels(series) ?? cartesianFallbackLabels(series));
+
+    const echartsSeries = computed(() => series.map((s, i) =>
+        toAreaSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette.value[i])
+    ));
+
+    const mergedOptions = computed<EChartsOption>(() => {
+        const base = buildCartesianBaseOptions({ xAxisLabels, yAxisLabels, splitLines });
+        const xAxisOverride: EChartsOption = { xAxis: { type: 'category', data: xLabels.value as string[], boundaryGap: false } };
+
+        const tooltipOptions: EChartsOption = tooltip
+            ? buildCartesianTooltipOptions(t, $style as never, () => series.map(s => s.icon), tooltipValueFormatter)
+            : { tooltip: { show: false } };
+
+        return merge({}, base, xAxisOverride, tooltipOptions, advancedOptions, { series: echartsSeries.value, color: palette.value });
     });
 </script>

package/src/component/FluxStatisticsBarChart.vue

@@ -1,51 +1,56 @@
 <template>
     <Chart
-        :aspectRatio="aspectRatio"
-        :options="merge({
-            chart: {
-                type: 'bar'
-            },
-            grid: {
-                show: true,
-                clipMarkers: false,
-                padding: {
-                    top: 18,
-                    left: 9,
-                    right: 9
-                }
-            },
-            tooltip: {
-                shared: true,
-                intersect: false
-            }
-        }, options)"
-        :series="translatedSeries"/>
+        ref="chartRef"
+        :options="mergedOptions"/>
 </template>
 
 <script
     lang="ts"
     setup>
-    import type { ApexOptions } from 'apexcharts';
+    import type { FluxStatisticsChartBarSeries } from '@flux-ui/types';
     import { merge } from 'lodash-es';
     import { computed } from 'vue';
-    import { useI18n } from 'vue-i18n';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildCartesianBaseOptions, buildCartesianTooltipOptions, cartesianFallbackLabels, type ChartTooltipValueFormatter, extractLabels, toBarSeries } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        options = {},
-        series
+        advancedOptions = {},
+        labels,
+        series,
+        splitLines = false,
+        tooltip = false,
+        tooltipValueFormatter,
+        xAxisLabels = false,
+        yAxisLabels = false
     } = defineProps<{
-        readonly aspectRatio?: number;
-        readonly options?: ApexOptions;
-        readonly series: ApexOptions['series'];
+        readonly advancedOptions?: EChartsOption;
+        readonly labels?: readonly string[];
+        readonly series: readonly FluxStatisticsChartBarSeries[];
+        readonly splitLines?: boolean;
+        readonly tooltip?: boolean;
+        readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
+        readonly xAxisLabels?: boolean;
+        readonly yAxisLabels?: boolean;
     }>();
 
-    const {t} = useI18n({useScope: 'parent'});
+    const { t, palette } = useChartSeriesSetup(() => series);
 
-    const translatedSeries = computed(() => {
-        return (series as any).map((seriesItem: any) => ({
-            ...seriesItem,
-            name: t(seriesItem.name as string)
-        }));
+    const xLabels = computed<readonly string[]>(() => labels ?? extractLabels(series) ?? cartesianFallbackLabels(series));
+
+    const echartsSeries = computed(() => series.map((s, i) =>
+        toBarSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette.value[i])
+    ));
+
+    const mergedOptions = computed<EChartsOption>(() => {
+        const base = buildCartesianBaseOptions({ xAxisLabels, yAxisLabels, splitLines });
+        const xAxisOverride: EChartsOption = { xAxis: { type: 'category', data: xLabels.value as string[] } };
+
+        const tooltipOptions: EChartsOption = tooltip
+            ? buildCartesianTooltipOptions(t, $style as never, () => series.map(s => s.icon), tooltipValueFormatter)
+            : { tooltip: { show: false } };
+
+        return merge({}, base, xAxisOverride, tooltipOptions, advancedOptions, { series: echartsSeries.value, color: palette.value });
     });
 </script>

package/src/component/FluxStatisticsBase.vue

@@ -7,6 +7,18 @@
                 {{ title }}
             </span>
 
+            <FluxTooltip
+                v-if="slots.info"
+                direction="vertical">
+                <template #content>
+                    <slot name="info"/>
+                </template>
+
+                <FluxIcon
+                    :class="$style.statisticsBaseHeaderInfo"
+                    name="circle-info"/>
+            </FluxTooltip>
+
             <FluxIcon
                 v-if="icon"
                 :class="$style.statisticsBaseHeaderIcon"
@@ -26,7 +38,7 @@
 <script
     lang="ts"
     setup>
-    import { FluxIcon, FluxPane } from '@flux-ui/components';
+    import { FluxIcon, FluxPane, FluxTooltip } from '@flux-ui/components';
     import type { FluxIconName } from '@flux-ui/types';
     import $style from '~flux/statistics/css/Base.module.scss';
 
@@ -39,5 +51,6 @@
     const slots = defineSlots<{
         content?(): any;
         default?(): any;
+        info?(): any;
     }>();
 </script>

package/src/component/FluxStatisticsBoxPlotChart.vue

@@ -0,0 +1,69 @@
+<template>
+    <Chart
+        ref="chartRef"
+        :options="mergedOptions"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxStatisticsChartBoxPlotSeries } from '@flux-ui/types';
+    import { merge } from 'lodash-es';
+    import { computed } from 'vue';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildBoxPlotTooltipOptions, buildCartesianBaseOptions, toBoxPlotSeries } from '~flux/statistics/util';
+    import Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
+
+    const {
+        advancedOptions = {},
+        labels,
+        series,
+        splitLines = false,
+        tooltip = false,
+        xAxisLabels = false,
+        yAxisLabels = false
+    } = defineProps<{
+        readonly advancedOptions?: EChartsOption;
+        readonly labels?: readonly string[];
+        readonly series: readonly FluxStatisticsChartBoxPlotSeries[];
+        readonly splitLines?: boolean;
+        readonly tooltip?: boolean;
+        readonly xAxisLabels?: boolean;
+        readonly yAxisLabels?: boolean;
+    }>();
+
+    const { t, palette } = useChartSeriesSetup(() => series);
+
+    const xLabels = computed<readonly string[] | undefined>(() => {
+        if (labels) {
+            return labels;
+        }
+
+        for (const s of series) {
+            const fromPoints = s.data.map(p => p.label ?? '').filter(Boolean);
+            if (fromPoints.length > 0) {
+                return s.data.map(p => p.label ?? '');
+            }
+        }
+
+        return undefined;
+    });
+
+    const echartsSeries = computed(() => series.map((s, i) =>
+        toBoxPlotSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette.value[i])
+    ));
+
+    const mergedOptions = computed<EChartsOption>(() => {
+        const base = buildCartesianBaseOptions({ xAxisLabels, yAxisLabels, splitLines });
+        const xAxisOverride: EChartsOption | undefined = xLabels.value
+            ? { xAxis: { type: 'category', data: xLabels.value as string[] } }
+            : undefined;
+
+        const tooltipOptions: EChartsOption = tooltip
+            ? buildBoxPlotTooltipOptions(t, $style as never, () => series, () => palette.value)
+            : { tooltip: { show: false } };
+
+        return merge({}, base, xAxisOverride ?? {}, tooltipOptions, advancedOptions, { series: echartsSeries.value, color: palette.value });
+    });
+</script>

package/src/component/FluxStatisticsBubbleChart.vue

@@ -0,0 +1,56 @@
+<template>
+    <Chart
+        ref="chartRef"
+        :options="mergedOptions"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
+    import { merge } from 'lodash-es';
+    import { computed } from 'vue';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildCartesianBaseOptions, buildCartesianTooltipOptions, toBubbleSeries } from '~flux/statistics/util';
+    import Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
+
+    const {
+        advancedOptions = {},
+        series,
+        splitLines = false,
+        tooltip = false,
+        xAxisLabels = false,
+        yAxisLabels = false
+    } = defineProps<{
+        readonly advancedOptions?: EChartsOption;
+        readonly series: readonly FluxStatisticsChartBubbleSeries[];
+        readonly splitLines?: boolean;
+        readonly tooltip?: boolean;
+        readonly xAxisLabels?: boolean;
+        readonly yAxisLabels?: boolean;
+    }>();
+
+    const { t, palette } = useChartSeriesSetup(() => series);
+
+    const echartsSeries = computed(() => series.map((s, i) =>
+        toBubbleSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette.value[i])
+    ));
+
+    const mergedOptions = computed<EChartsOption>(() => {
+        const base = buildCartesianBaseOptions({
+            xAxisType: 'value',
+            yAxisType: 'value',
+            scale: true,
+            xAxisLabels,
+            yAxisLabels,
+            splitLines
+        });
+
+        const tooltipOptions: EChartsOption = tooltip
+            ? buildCartesianTooltipOptions(t, $style as never, () => series.map(s => s.icon))
+            : { tooltip: { show: false } };
+
+        return merge({}, base, tooltipOptions, advancedOptions, { series: echartsSeries.value, color: palette.value });
+    });
+</script>

package/src/component/FluxStatisticsCandlestickChart.vue

@@ -0,0 +1,81 @@
+<template>
+    <Chart
+        ref="chartRef"
+        :options="mergedOptions"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxStatisticsChartCandlestickSeries } from '@flux-ui/types';
+    import { merge } from 'lodash-es';
+    import { computed } from 'vue';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildCartesianBaseOptions, buildCartesianTooltipOptions, resolveChartColor, toCandlestickSeries } from '~flux/statistics/util';
+    import Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
+
+    const {
+        advancedOptions = {},
+        labels,
+        series,
+        splitLines = false,
+        tooltip = false,
+        xAxisLabels = false,
+        yAxisLabels = false
+    } = defineProps<{
+        readonly advancedOptions?: EChartsOption;
+        readonly labels?: readonly string[];
+        readonly series: readonly FluxStatisticsChartCandlestickSeries[];
+        readonly splitLines?: boolean;
+        readonly tooltip?: boolean;
+        readonly xAxisLabels?: boolean;
+        readonly yAxisLabels?: boolean;
+    }>();
+
+    const { t } = useChartSeriesSetup(() => series, {
+        getLegendItem: s => [
+            {
+                color: resolveChartColor(s.positiveColor) ?? 'var(--success-500)',
+                icon: s.icon,
+                label: 'Up'
+            },
+            {
+                color: resolveChartColor(s.negativeColor) ?? 'var(--danger-500)',
+                label: 'Down'
+            }
+        ]
+    });
+
+    const xLabels = computed<readonly string[] | undefined>(() => {
+        if (labels) {
+            return labels;
+        }
+
+        for (const s of series) {
+            const fromPoints = s.data.map(p => p.label ?? '').filter(Boolean);
+            if (fromPoints.length > 0) {
+                return s.data.map(p => p.label ?? '');
+            }
+        }
+
+        return undefined;
+    });
+
+    const echartsSeries = computed(() => series.map(s =>
+        toCandlestickSeries({ ...s, name: s.name ? t(String(s.name)) : undefined })
+    ));
+
+    const mergedOptions = computed<EChartsOption>(() => {
+        const base = buildCartesianBaseOptions({ scale: true, xAxisLabels, yAxisLabels, splitLines });
+        const xAxisOverride: EChartsOption | undefined = xLabels.value
+            ? { xAxis: { type: 'category', data: xLabels.value as string[] } }
+            : undefined;
+
+        const tooltipOptions: EChartsOption = tooltip
+            ? buildCartesianTooltipOptions(t, $style as never, () => series.map(s => s.icon))
+            : { tooltip: { show: false } };
+
+        return merge({}, base, xAxisOverride ?? {}, tooltipOptions, advancedOptions, { series: echartsSeries.value });
+    });
+</script>