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

package/src/css/Meter.module.scss

@@ -19,6 +19,7 @@
     height: 6px;
     background: var(--gray-100);
     border-radius: var(--radius);
+    contain: paint;
 }
 
 .statisticsMeterBarValue {

package/src/css/PercentageBar.module.scss

@@ -0,0 +1,36 @@
+.statisticsPercentageBar {
+    display: flex;
+    flex-flow: column;
+    gap: 12px;
+}
+
+.statisticsPercentageBarTrack {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 3px;
+}
+
+.statisticsPercentageBarSegment {
+    height: 12px;
+    border-radius: calc(var(--radius) / 3);
+    transition: var(--transition-default);
+    transition-property: height, margin, flex-grow, opacity;
+}
+
+.statisticsPercentageBarSegment:hover,
+.statisticsPercentageBarSegment.isHovered {
+    height: 16px;
+    margin-top: -2px;
+    margin-bottom: -2px;
+}
+
+.statisticsPercentageBarTrack.isHoverActive .statisticsPercentageBarSegment:not(.isHovered):not(:hover) {
+    opacity: 0.5;
+}
+
+.statisticsPercentageBarTooltip {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    gap: 9px;
+}

package/src/util/index.ts

@@ -1,7 +1,6 @@
-export * from './baseOptions';
 export * from './colors';
-export * from './convert';
-export * from './defaultOptions';
-export * from './iconSvg';
-export * from './seriesDefaults';
-export * from './sparklineOptions';
+export * from './icons';
+export * from './options';
+export * from './series';
+export * from './sparkline';
+export * from './tooltips';

package/src/util/options/buildBaseOptions.ts

@@ -0,0 +1,31 @@
+import type { EChartsOption } from '~flux/statistics/composable';
+
+export function buildBaseOptions(): EChartsOption {
+    return {
+        color: [
+            'var(--chart-1)',
+            'var(--chart-2)',
+            'var(--chart-3)',
+            'var(--chart-4)'
+        ],
+        animation: true,
+        animationDuration: 1000,
+        animationDurationUpdate: 400,
+        animationEasing: 'cubicOut',
+        animationEasingUpdate: 'cubicInOut',
+        tooltip: {
+            show: false,
+            backgroundColor: 'transparent',
+            borderWidth: 0,
+            padding: 0,
+            extraCssText: 'box-shadow: none;',
+            axisPointer: {
+                appendTo: 'body',
+                snap: true
+            }
+        },
+        legend: {
+            show: false
+        }
+    };
+}

package/src/util/{baseOptions.ts → options/buildCartesianBaseOptions.ts}

@@ -4,7 +4,7 @@ const FOREGROUND_LABEL = { show: true, color: 'var(--foreground-secondary)' } as
 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 {
+export interface CartesianBaseConfig {
     readonly xAxisType?: 'category' | 'value';
     readonly yAxisType?: 'value' | 'category';
     readonly scale?: boolean;
@@ -12,18 +12,19 @@ interface CartesianBaseConfig {
     readonly xAxisLabels?: boolean;
     readonly yAxisLabels?: boolean;
     readonly splitLines?: boolean;
+    readonly minPadding?: number;
 }
 
-export function buildCartesianGrid(xAxisLabels: boolean, yAxisLabels: boolean): EChartsOption['grid'] {
+export function buildCartesianGrid(xAxisLabels: boolean, yAxisLabels: boolean, minPadding: number = 0): EChartsOption['grid'] {
     if (!xAxisLabels && !yAxisLabels) {
-        return { left: 0, right: 0, top: 0, bottom: 0, containLabel: false };
+        return { left: minPadding, right: minPadding, top: minPadding, bottom: minPadding, containLabel: false };
     }
 
     return {
-        left: yAxisLabels ? 9 : 0,
-        right: 9,
-        top: 9,
-        bottom: xAxisLabels ? 9 : 0,
+        left: yAxisLabels ? 21 : minPadding,
+        right: 21,
+        top: 21,
+        bottom: xAxisLabels ? 21 : minPadding,
         containLabel: true
     };
 }
@@ -32,13 +33,18 @@ export function buildCartesianBaseOptions(config: CartesianBaseConfig = {}): ECh
     const xAxisLabels = config.xAxisLabels ?? false;
     const yAxisLabels = config.yAxisLabels ?? false;
     const showSplitLines = config.splitLines ?? false;
+    const minPadding = config.minPadding ?? 0;
 
     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' },
+        grid: buildCartesianGrid(xAxisLabels, yAxisLabels, minPadding),
+        tooltip: {
+            appendTo: 'body',
+            snap: true,
+            trigger: config.tooltipTrigger ?? 'item'
+        },
         xAxis: {
             type: config.xAxisType ?? 'category',
             show: true,
@@ -59,16 +65,3 @@ export function buildCartesianBaseOptions(config: CartesianBaseConfig = {}): ECh
         }
     };
 }
-
-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/options/buildCircularBaseOptions.ts

@@ -0,0 +1,10 @@
+import type { EChartsOption } from '~flux/statistics/composable';
+
+export function buildCircularBaseOptions(): EChartsOption {
+    return {
+        tooltip: { show: false },
+        xAxis: { show: false },
+        yAxis: { show: false },
+        grid: { show: false }
+    };
+}

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

@@ -0,0 +1,44 @@
+import type { FluxStatisticsChartAreaSeries } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { cartesianFallbackLabels, extractLabels, toAreaSeries } from '../../series';
+import type { ChartTooltipValueFormatter, TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildCartesianTooltip } from '../../tooltips';
+import { buildCartesianBaseOptions } from '../buildCartesianBaseOptions';
+
+export interface AreaChartOptionsInput {
+    readonly series: readonly FluxStatisticsChartAreaSeries[];
+    readonly labels?: readonly string[];
+    readonly palette: readonly string[];
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
+    readonly xAxisLabels?: boolean;
+    readonly yAxisLabels?: boolean;
+    readonly splitLines?: boolean;
+    readonly advancedOptions?: EChartsOption;
+}
+
+export function buildAreaChartOptions(input: AreaChartOptionsInput): EChartsOption {
+    const {
+        series, labels, palette, t, styles,
+        tooltip = false, tooltipValueFormatter,
+        xAxisLabels = false, yAxisLabels = false, splitLines = false,
+        advancedOptions = {}
+    } = input;
+
+    const xLabels = labels ?? extractLabels(series) ?? cartesianFallbackLabels(series);
+    const base = buildCartesianBaseOptions({ xAxisLabels, yAxisLabels, splitLines });
+    const xAxisOverride: EChartsOption = { xAxis: { type: 'category', data: xLabels as string[], boundaryGap: false } };
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildCartesianTooltip({ t, styles, getSeriesIcons: () => series.map(s => s.icon), valueFormatter: tooltipValueFormatter })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = series.map((s, i) =>
+        toAreaSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette[i])
+    );
+
+    return merge({}, base, xAxisOverride, tooltipOptions, advancedOptions, { series: echartsSeries, color: palette });
+}

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

@@ -0,0 +1,44 @@
+import type { FluxStatisticsChartBarSeries } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { cartesianFallbackLabels, extractLabels, toBarSeries } from '../../series';
+import type { ChartTooltipValueFormatter, TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildCartesianTooltip } from '../../tooltips';
+import { buildCartesianBaseOptions } from '../buildCartesianBaseOptions';
+
+export interface BarChartOptionsInput {
+    readonly series: readonly FluxStatisticsChartBarSeries[];
+    readonly labels?: readonly string[];
+    readonly palette: readonly string[];
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
+    readonly xAxisLabels?: boolean;
+    readonly yAxisLabels?: boolean;
+    readonly splitLines?: boolean;
+    readonly advancedOptions?: EChartsOption;
+}
+
+export function buildBarChartOptions(input: BarChartOptionsInput): EChartsOption {
+    const {
+        series, labels, palette, t, styles,
+        tooltip = false, tooltipValueFormatter,
+        xAxisLabels = false, yAxisLabels = false, splitLines = false,
+        advancedOptions = {}
+    } = input;
+
+    const xLabels = labels ?? extractLabels(series) ?? cartesianFallbackLabels(series);
+    const base = buildCartesianBaseOptions({ xAxisLabels, yAxisLabels, splitLines, minPadding: 12 });
+    const xAxisOverride: EChartsOption = { xAxis: { type: 'category', data: xLabels as string[] } };
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildCartesianTooltip({ t, styles, getSeriesIcons: () => series.map(s => s.icon), valueFormatter: tooltipValueFormatter })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = series.map((s, i) =>
+        toBarSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette[i])
+    );
+
+    return merge({}, base, xAxisOverride, tooltipOptions, advancedOptions, { series: echartsSeries, color: palette });
+}

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

@@ -0,0 +1,63 @@
+import type { FluxStatisticsChartBoxPlotSeries } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { toBoxPlotSeries } from '../../series';
+import type { TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildBoxPlotTooltip } from '../../tooltips';
+import { buildCartesianBaseOptions } from '../buildCartesianBaseOptions';
+
+export interface BoxPlotChartOptionsInput {
+    readonly series: readonly FluxStatisticsChartBoxPlotSeries[];
+    readonly labels?: readonly string[];
+    readonly palette: readonly string[];
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly xAxisLabels?: boolean;
+    readonly yAxisLabels?: boolean;
+    readonly splitLines?: boolean;
+    readonly advancedOptions?: EChartsOption;
+}
+
+function resolveBoxPlotLabels(
+    series: readonly FluxStatisticsChartBoxPlotSeries[],
+    labels?: readonly string[]
+): 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;
+}
+
+export function buildBoxPlotChartOptions(input: BoxPlotChartOptionsInput): EChartsOption {
+    const {
+        series, labels, palette, t, styles,
+        tooltip = false,
+        xAxisLabels = false, yAxisLabels = false, splitLines = false,
+        advancedOptions = {}
+    } = input;
+
+    const xLabels = resolveBoxPlotLabels(series, labels);
+    const base = buildCartesianBaseOptions({ xAxisLabels, yAxisLabels, splitLines, minPadding: 12 });
+    const xAxisOverride: EChartsOption | undefined = xLabels
+        ? { xAxis: { type: 'category', data: xLabels as string[] } }
+        : undefined;
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildBoxPlotTooltip({ t, styles, getSeries: () => series, getPalette: () => palette })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = series.map((s, i) =>
+        toBoxPlotSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette[i])
+    );
+
+    return merge({}, base, xAxisOverride ?? {}, tooltipOptions, advancedOptions, { series: echartsSeries, color: palette });
+}

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

@@ -0,0 +1,48 @@
+import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { toBubbleSeries } from '../../series';
+import type { TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildCartesianTooltip } from '../../tooltips';
+import { buildCartesianBaseOptions } from '../buildCartesianBaseOptions';
+
+export interface BubbleChartOptionsInput {
+    readonly series: readonly FluxStatisticsChartBubbleSeries[];
+    readonly palette: readonly string[];
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly xAxisLabels?: boolean;
+    readonly yAxisLabels?: boolean;
+    readonly splitLines?: boolean;
+    readonly advancedOptions?: EChartsOption;
+}
+
+export function buildBubbleChartOptions(input: BubbleChartOptionsInput): EChartsOption {
+    const {
+        series, palette, t, styles,
+        tooltip = false,
+        xAxisLabels = false, yAxisLabels = false, splitLines = false,
+        advancedOptions = {}
+    } = input;
+
+    const base = buildCartesianBaseOptions({
+        xAxisType: 'value',
+        yAxisType: 'value',
+        scale: true,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        minPadding: 12
+    });
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildCartesianTooltip({ t, styles, getSeriesIcons: () => series.map(s => s.icon) })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = series.map((s, i) =>
+        toBubbleSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette[i])
+    );
+
+    return merge({}, base, tooltipOptions, advancedOptions, { series: echartsSeries, color: palette });
+}

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

@@ -0,0 +1,77 @@
+import type { FluxStatisticsChartCandlestickSeries } 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 { resolveChartColor, toCandlestickSeries } from '../../series';
+import type { TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildCartesianTooltip } from '../../tooltips';
+import { buildCartesianBaseOptions } from '../buildCartesianBaseOptions';
+
+export interface CandlestickChartOptionsInput {
+    readonly series: readonly FluxStatisticsChartCandlestickSeries[];
+    readonly labels?: readonly string[];
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly xAxisLabels?: boolean;
+    readonly yAxisLabels?: boolean;
+    readonly splitLines?: boolean;
+    readonly advancedOptions?: EChartsOption;
+}
+
+function resolveCandlestickLabels(
+    series: readonly FluxStatisticsChartCandlestickSeries[],
+    labels?: readonly string[]
+): 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;
+}
+
+export function candlestickLegendItemBuilder(s: FluxStatisticsChartCandlestickSeries): readonly ChartLegendItem[] {
+    return [
+        {
+            color: resolveChartColor(s.positiveColor) ?? 'var(--success-500)',
+            icon: s.icon,
+            label: 'Up'
+        },
+        {
+            color: resolveChartColor(s.negativeColor) ?? 'var(--danger-500)',
+            label: 'Down'
+        }
+    ];
+}
+
+export function buildCandlestickChartOptions(input: CandlestickChartOptionsInput): EChartsOption {
+    const {
+        series, labels, t, styles,
+        tooltip = false,
+        xAxisLabels = false, yAxisLabels = false, splitLines = false,
+        advancedOptions = {}
+    } = input;
+
+    const xLabels = resolveCandlestickLabels(series, labels);
+    const base = buildCartesianBaseOptions({ scale: true, xAxisLabels, yAxisLabels, splitLines, minPadding: 12 });
+    const xAxisOverride: EChartsOption | undefined = xLabels
+        ? { xAxis: { type: 'category', data: xLabels as string[] } }
+        : undefined;
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildCartesianTooltip({ t, styles, getSeriesIcons: () => series.map(s => s.icon) })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = series.map(s =>
+        toCandlestickSeries({ ...s, name: s.name ? t(String(s.name)) : undefined })
+    );
+
+    return merge({}, base, xAxisOverride ?? {}, tooltipOptions, advancedOptions, { series: echartsSeries });
+}

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

@@ -0,0 +1,72 @@
+import { blue100, blue300, blue500, blue700 } from '@flux-ui/internals';
+import type { FluxStatisticsChartHeatmapSeries } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { toHeatmapSeries } from '../../series';
+import type { TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildHeatmapTooltip } from '../../tooltips';
+import { buildCartesianGrid } from '../buildCartesianBaseOptions';
+
+export interface HeatmapChartOptionsInput {
+    readonly series: readonly FluxStatisticsChartHeatmapSeries[];
+    readonly xLabels: readonly string[];
+    readonly yLabels: readonly string[];
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly xAxisLabels?: boolean;
+    readonly yAxisLabels?: boolean;
+    readonly advancedOptions?: EChartsOption;
+}
+
+const HIDDEN = { show: false } as const;
+const labelStyle = (show: boolean) => ({ show, color: 'var(--foreground-secondary)' });
+
+export function buildHeatmapChartOptions(input: HeatmapChartOptionsInput): EChartsOption {
+    const {
+        series, xLabels, yLabels, t, styles,
+        tooltip = false,
+        xAxisLabels = false, yAxisLabels = false,
+        advancedOptions = {}
+    } = input;
+
+    const translatedXLabels = xLabels.map(label => t(String(label)));
+    const translatedYLabels = yLabels.map(label => t(String(label)));
+
+    const base: EChartsOption = {
+        grid: buildCartesianGrid(xAxisLabels, yAxisLabels, 12),
+        color: [blue500],
+        visualMap: {
+            show: false,
+            min: 0,
+            max: 100,
+            inRange: { color: [blue100, blue300, blue500, blue700] }
+        },
+        xAxis: {
+            type: 'category',
+            data: translatedXLabels as string[],
+            axisLabel: labelStyle(xAxisLabels),
+            axisLine: HIDDEN,
+            axisTick: HIDDEN,
+            splitLine: HIDDEN
+        },
+        yAxis: {
+            type: 'category',
+            data: translatedYLabels as string[],
+            axisLabel: labelStyle(yAxisLabels),
+            axisLine: HIDDEN,
+            axisTick: HIDDEN,
+            splitLine: HIDDEN
+        }
+    };
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildHeatmapTooltip({ t, styles, getSeries: () => series })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = series.map(s =>
+        toHeatmapSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, xLabels, yLabels)
+    );
+
+    return merge({}, base, tooltipOptions, advancedOptions, { series: echartsSeries });
+}

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

@@ -0,0 +1,44 @@
+import type { FluxStatisticsChartLineSeries } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { cartesianFallbackLabels, extractLabels, toLineSeries } from '../../series';
+import type { ChartTooltipValueFormatter, TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildCartesianTooltip } from '../../tooltips';
+import { buildCartesianBaseOptions } from '../buildCartesianBaseOptions';
+
+export interface LineChartOptionsInput {
+    readonly series: readonly FluxStatisticsChartLineSeries[];
+    readonly labels?: readonly string[];
+    readonly palette: readonly string[];
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
+    readonly xAxisLabels?: boolean;
+    readonly yAxisLabels?: boolean;
+    readonly splitLines?: boolean;
+    readonly advancedOptions?: EChartsOption;
+}
+
+export function buildLineChartOptions(input: LineChartOptionsInput): EChartsOption {
+    const {
+        series, labels, palette, t, styles,
+        tooltip = false, tooltipValueFormatter,
+        xAxisLabels = false, yAxisLabels = false, splitLines = false,
+        advancedOptions = {}
+    } = input;
+
+    const xLabels = labels ?? extractLabels(series) ?? cartesianFallbackLabels(series);
+    const base = buildCartesianBaseOptions({ xAxisLabels, yAxisLabels, splitLines });
+    const xAxisOverride: EChartsOption = { xAxis: { type: 'category', data: xLabels as string[], boundaryGap: false } };
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildCartesianTooltip({ t, styles, getSeriesIcons: () => series.map(s => s.icon), valueFormatter: tooltipValueFormatter })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = series.map((s, i) =>
+        toLineSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette[i])
+    );
+
+    return merge({}, base, xAxisOverride, tooltipOptions, advancedOptions, { series: echartsSeries, color: palette });
+}

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

@@ -0,0 +1,44 @@
+import type { FluxStatisticsChartMixedSeries } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { cartesianFallbackLabels, extractLabels, toMixedSeries } from '../../series';
+import type { ChartTooltipValueFormatter, TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildCartesianTooltip } from '../../tooltips';
+import { buildCartesianBaseOptions } from '../buildCartesianBaseOptions';
+
+export interface MixedChartOptionsInput {
+    readonly series: readonly FluxStatisticsChartMixedSeries[];
+    readonly labels?: readonly string[];
+    readonly palette: readonly string[];
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
+    readonly xAxisLabels?: boolean;
+    readonly yAxisLabels?: boolean;
+    readonly splitLines?: boolean;
+    readonly advancedOptions?: EChartsOption;
+}
+
+export function buildMixedChartOptions(input: MixedChartOptionsInput): EChartsOption {
+    const {
+        series, labels, palette, t, styles,
+        tooltip = false, tooltipValueFormatter,
+        xAxisLabels = false, yAxisLabels = false, splitLines = false,
+        advancedOptions = {}
+    } = input;
+
+    const xLabels = labels ?? extractLabels(series) ?? cartesianFallbackLabels(series);
+    const base = buildCartesianBaseOptions({ tooltipTrigger: 'axis', xAxisLabels, yAxisLabels, splitLines, minPadding: 12 });
+    const xAxisOverride: EChartsOption = { xAxis: { type: 'category', data: xLabels as string[] } };
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildCartesianTooltip({ t, styles, getSeriesIcons: () => series.map(s => s.icon), valueFormatter: tooltipValueFormatter })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = series.map((s, i) =>
+        toMixedSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette[i])
+    );
+
+    return merge({}, base, xAxisOverride, tooltipOptions, advancedOptions, { series: echartsSeries, color: palette });
+}

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

@@ -0,0 +1,48 @@
+import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
+import { merge } from 'lodash-es';
+import type { EChartsOption } from '~flux/statistics/composable';
+import { toScatterSeries } from '../../series';
+import type { TooltipStyleClasses, Translator } from '../../tooltips';
+import { buildCartesianTooltip } from '../../tooltips';
+import { buildCartesianBaseOptions } from '../buildCartesianBaseOptions';
+
+export interface ScatterChartOptionsInput {
+    readonly series: readonly FluxStatisticsChartScatterSeries[];
+    readonly palette: readonly string[];
+    readonly t: Translator;
+    readonly styles: TooltipStyleClasses;
+    readonly tooltip?: boolean;
+    readonly xAxisLabels?: boolean;
+    readonly yAxisLabels?: boolean;
+    readonly splitLines?: boolean;
+    readonly advancedOptions?: EChartsOption;
+}
+
+export function buildScatterChartOptions(input: ScatterChartOptionsInput): EChartsOption {
+    const {
+        series, palette, t, styles,
+        tooltip = false,
+        xAxisLabels = false, yAxisLabels = false, splitLines = false,
+        advancedOptions = {}
+    } = input;
+
+    const base = buildCartesianBaseOptions({
+        xAxisType: 'value',
+        yAxisType: 'value',
+        scale: true,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        minPadding: 12
+    });
+
+    const tooltipOptions: EChartsOption = tooltip
+        ? buildCartesianTooltip({ t, styles, getSeriesIcons: () => series.map(s => s.icon) })
+        : { tooltip: { show: false } };
+
+    const echartsSeries = series.map((s, i) =>
+        toScatterSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette[i])
+    );
+
+    return merge({}, base, tooltipOptions, advancedOptions, { series: echartsSeries, color: palette });
+}