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

package/src/component/FluxStatisticsBarChart.vue

@@ -8,15 +8,14 @@
     lang="ts"
     setup>
     import type { FluxStatisticsChartBarSeries } from '@flux-ui/types';
-    import { merge } from 'lodash-es';
     import { computed } from 'vue';
     import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
-    import { buildCartesianBaseOptions, buildCartesianTooltipOptions, cartesianFallbackLabels, type ChartTooltipValueFormatter, extractLabels, toBarSeries } from '~flux/statistics/util';
+    import { buildBarChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         labels,
         series,
         splitLines = false,
@@ -37,20 +36,17 @@
 
     const { t, palette } = useChartSeriesSetup(() => series);
 
-    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 });
-    });
+    const mergedOptions = computed(() => buildBarChartOptions({
+        series,
+        labels,
+        palette: palette.value,
+        t,
+        styles: $style,
+        tooltip,
+        tooltipValueFormatter,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsBoxPlotChart.vue

@@ -8,15 +8,14 @@
     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 { buildBoxPlotChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         labels,
         series,
         splitLines = false,
@@ -35,35 +34,16 @@
 
     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 });
-    });
+    const mergedOptions = computed(() => buildBoxPlotChartOptions({
+        series,
+        labels,
+        palette: palette.value,
+        t,
+        styles: $style,
+        tooltip,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsBubbleChart.vue

@@ -8,15 +8,14 @@
     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 { buildBubbleChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         series,
         splitLines = false,
         tooltip = false,
@@ -33,24 +32,15 @@
 
     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 });
-    });
+    const mergedOptions = computed(() => buildBubbleChartOptions({
+        series,
+        palette: palette.value,
+        t,
+        styles: $style,
+        tooltip,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsCandlestickChart.vue

@@ -8,15 +8,14 @@
     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 { buildCandlestickChartOptions, candlestickLegendItemBuilder } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         labels,
         series,
         splitLines = false,
@@ -34,48 +33,18 @@
     }>();
 
     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'
-            }
-        ]
+        getLegendItem: candlestickLegendItemBuilder
     });
 
-    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 });
-    });
+    const mergedOptions = computed(() => buildCandlestickChartOptions({
+        series,
+        labels,
+        t,
+        styles: $style,
+        tooltip,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsChart.vue

@@ -10,7 +10,7 @@
     import { merge } from 'lodash-es';
     import { computed, useTemplateRef } from 'vue';
     import { type EChartsOption, useECharts } from '~flux/statistics/composable';
-    import { buildDefaultOptions, deepResolveCssVars } from '~flux/statistics/util';
+    import { buildBaseOptions, deepResolveCssVars } from '~flux/statistics/util';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
@@ -21,7 +21,7 @@
 
     const chart = useTemplateRef('chart');
 
-    const defaults = buildDefaultOptions();
+    const defaults = buildBaseOptions();
 
     const mergedOptions = computed<EChartsOption>(() => {
         const merged = merge({}, defaults, options) as EChartsOption & { color?: unknown; series?: unknown };

package/src/component/FluxStatisticsChartPane.vue

@@ -15,17 +15,19 @@
         </template>
 
         <template #content>
-            <div :class="$style.statisticsChartPaneBody">
-                <div :class="$style.statisticsChartPaneContainer">
-                    <slot/>
-                </div>
+            <FluxStatisticsLegendScope>
+                <div :class="$style.statisticsChartPaneBody">
+                    <div :class="$style.statisticsChartPaneContainer">
+                        <slot/>
+                    </div>
 
-                <slot name="legend"/>
-            </div>
+                    <slot name="legend"/>
+                </div>
 
-            <FluxToolbar v-if="slots.toolbar">
-                <slot name="toolbar"/>
-            </FluxToolbar>
+                <FluxToolbar v-if="slots.toolbar">
+                    <slot name="toolbar"/>
+                </FluxToolbar>
+            </FluxStatisticsLegendScope>
         </template>
     </Base>
 </template>
@@ -35,9 +37,8 @@
     setup>
     import { FluxToolbar } from '@flux-ui/components';
     import type { FluxIconName } from '@flux-ui/types';
-    import { provide } from 'vue';
-    import { createChartLegendContext, FluxStatisticsChartLegendInjectionKey } from '~flux/statistics/composable';
     import Base from './FluxStatisticsBase.vue';
+    import FluxStatisticsLegendScope from './FluxStatisticsLegendScope.vue';
     import $style from '~flux/statistics/css/ChartPane.module.scss';
 
     defineProps<{
@@ -54,6 +55,4 @@
         legend?(): any;
         toolbar?(): any;
     }>();
-
-    provide(FluxStatisticsChartLegendInjectionKey, createChartLegendContext());
 </script>

package/src/component/FluxStatisticsDonutChart.vue

@@ -8,15 +8,14 @@
     lang="ts"
     setup>
     import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
-    import { merge } from 'lodash-es';
     import { computed } from 'vue';
-    import { usePieSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
-    import { buildSharedItemTooltipFormatter, type ChartTooltipValueFormatter, POLAR_BASE_OPTIONS, toDonutSeries } from '~flux/statistics/util';
+    import { useChartSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildDonutChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         slices,
         title,
         tooltip = false,
@@ -29,25 +28,17 @@
         readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
     }>();
 
-    const { t, palette, tooltipItems } = usePieSlicesSetup(() => slices);
+    const { t, palette, tooltipItems } = useChartSlicesSetup(() => slices);
 
-    const echartsSeries = computed(() => [toDonutSeries(slices, palette.value)]);
-
-    const tooltipOptions = computed<EChartsOption>(() => {
-        if (!tooltip) {
-            return { tooltip: { show: false } };
-        }
-
-        return {
-            tooltip: {
-                show: true,
-                trigger: 'item',
-                formatter: buildSharedItemTooltipFormatter(t, $style as never, () => tooltipItems.value, () => title, tooltipValueFormatter) as never
-            }
-        };
-    });
-
-    const mergedOptions = computed<EChartsOption>(() =>
-        merge({}, POLAR_BASE_OPTIONS, tooltipOptions.value, advancedOptions, { series: echartsSeries.value, color: palette.value })
-    );
+    const mergedOptions = computed(() => buildDonutChartOptions({
+        slices,
+        palette: palette.value,
+        tooltipItems: tooltipItems.value,
+        title,
+        t,
+        styles: $style,
+        tooltip,
+        tooltipValueFormatter,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsHeatmapChart.vue

@@ -6,18 +6,15 @@
 <script
     lang="ts"
     setup>
-    import { blue100, blue300, blue500, blue700 } from '@flux-ui/internals';
     import type { FluxStatisticsChartHeatmapSeries } from '@flux-ui/types';
-    import { merge } from 'lodash-es';
     import { computed } from 'vue';
-    import { useI18n } from 'vue-i18n';
-    import type { EChartsOption } from '~flux/statistics/composable';
-    import { buildCartesianBaseOptions, buildHeatmapTooltipOptions, toHeatmapSeries } from '~flux/statistics/util';
+    import { useChartBaseSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildHeatmapChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         series,
         tooltip = false,
         xAxisLabels = false,
@@ -34,47 +31,17 @@
         readonly yLabels?: readonly string[];
     }>();
 
-    const {t} = useI18n({useScope: 'parent'});
+    const { t } = useChartBaseSetup();
 
-    const translatedXLabels = computed(() => xLabels.map(label => t(String(label))));
-    const translatedYLabels = computed(() => yLabels.map(label => t(String(label))));
-
-    const echartsSeries = computed(() => series.map(s =>
-        toHeatmapSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, xLabels, yLabels)
-    ));
-
-    const mergedOptions = computed<EChartsOption>(() => {
-        const base: EChartsOption = {
-            ...buildCartesianBaseOptions({ yAxisType: 'category', xAxisLabels, yAxisLabels }),
-            color: [blue500],
-            visualMap: {
-                show: false,
-                min: 0,
-                max: 100,
-                inRange: { color: [blue100, blue300, blue500, blue700] }
-            },
-            xAxis: {
-                type: 'category',
-                data: translatedXLabels.value as string[],
-                axisLabel: { show: xAxisLabels, color: 'var(--foreground-secondary)' },
-                axisLine: { show: false },
-                axisTick: { show: false },
-                splitLine: { show: false }
-            },
-            yAxis: {
-                type: 'category',
-                data: translatedYLabels.value as string[],
-                axisLabel: { show: yAxisLabels, color: 'var(--foreground-secondary)' },
-                axisLine: { show: false },
-                axisTick: { show: false },
-                splitLine: { show: false }
-            }
-        };
-
-        const tooltipOptions: EChartsOption = tooltip
-            ? buildHeatmapTooltipOptions(t, $style as never, () => series)
-            : { tooltip: { show: false } };
-
-        return merge({}, base, tooltipOptions, advancedOptions, { series: echartsSeries.value });
-    });
+    const mergedOptions = computed(() => buildHeatmapChartOptions({
+        series,
+        xLabels,
+        yLabels,
+        t,
+        styles: $style,
+        tooltip,
+        xAxisLabels,
+        yAxisLabels,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsLegendScope.vue

@@ -0,0 +1,16 @@
+<template>
+    <slot/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { provide } from 'vue';
+    import { createChartLegendContext, FluxStatisticsChartLegendInjectionKey } from '~flux/statistics/composable';
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    provide(FluxStatisticsChartLegendInjectionKey, createChartLegendContext());
+</script>

package/src/component/FluxStatisticsLineChart.vue

@@ -8,15 +8,14 @@
     lang="ts"
     setup>
     import type { FluxStatisticsChartLineSeries } from '@flux-ui/types';
-    import { merge } from 'lodash-es';
     import { computed } from 'vue';
     import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
-    import { buildCartesianBaseOptions, buildCartesianTooltipOptions, cartesianFallbackLabels, type ChartTooltipValueFormatter, extractLabels, toLineSeries } from '~flux/statistics/util';
+    import { buildLineChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         labels,
         series,
         splitLines = false,
@@ -37,20 +36,17 @@
 
     const { t, palette } = useChartSeriesSetup(() => series);
 
-    const xLabels = computed<readonly string[]>(() => labels ?? extractLabels(series) ?? cartesianFallbackLabels(series));
-
-    const echartsSeries = computed(() => series.map((s, i) =>
-        toLineSeries({ ...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 });
-    });
+    const mergedOptions = computed(() => buildLineChartOptions({
+        series,
+        labels,
+        palette: palette.value,
+        t,
+        styles: $style,
+        tooltip,
+        tooltipValueFormatter,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsMixedChart.vue

@@ -8,15 +8,14 @@
     lang="ts"
     setup>
     import type { FluxStatisticsChartMixedSeries } from '@flux-ui/types';
-    import { merge } from 'lodash-es';
     import { computed } from 'vue';
     import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
-    import { buildCartesianBaseOptions, buildCartesianTooltipOptions, cartesianFallbackLabels, type ChartTooltipValueFormatter, extractLabels, toMixedSeries } from '~flux/statistics/util';
+    import { buildMixedChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         labels,
         series,
         splitLines = false,
@@ -37,19 +36,17 @@
 
     const { t, palette } = useChartSeriesSetup(() => series);
 
-    const xLabels = computed<readonly string[]>(() => labels ?? extractLabels(series) ?? cartesianFallbackLabels(series));
-
-    const echartsSeries = computed(() => series.map((s, i) =>
-        toMixedSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette.value[i])
-    ));
-
-    const mergedOptions = computed<EChartsOption>(() => {
-        const base = buildCartesianBaseOptions({ tooltipTrigger: 'axis', 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 });
-    });
+    const mergedOptions = computed(() => buildMixedChartOptions({
+        series,
+        labels,
+        palette: palette.value,
+        t,
+        styles: $style,
+        tooltip,
+        tooltipValueFormatter,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        advancedOptions
+    }));
 </script>