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

package/src/component/FluxStatisticsAreaChart.vue

@@ -1,59 +1,52 @@
 <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 { merge } from 'lodash-es';
+    import type { FluxStatisticsChartAreaSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useI18n } from 'vue-i18n';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildAreaChartOptions, type ChartTooltipValueFormatter } 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 mergedOptions = computed(() => buildAreaChartOptions({
+        series,
+        labels,
+        palette: palette.value,
+        t,
+        styles: $style,
+        tooltip,
+        tooltipValueFormatter,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsBarChart.vue

@@ -1,51 +1,52 @@
 <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 { merge } from 'lodash-es';
+    import type { FluxStatisticsChartBarSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useI18n } from 'vue-i18n';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildBarChartOptions, type ChartTooltipValueFormatter } 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 mergedOptions = computed(() => buildBarChartOptions({
+        series,
+        labels,
+        palette: palette.value,
+        t,
+        styles: $style,
+        tooltip,
+        tooltipValueFormatter,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        advancedOptions
+    }));
 </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,49 @@
+<template>
+    <Chart
+        ref="chartRef"
+        :options="mergedOptions"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxStatisticsChartBoxPlotSeries } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildBoxPlotChartOptions } 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 mergedOptions = computed(() => buildBoxPlotChartOptions({
+        series,
+        labels,
+        palette: palette.value,
+        t,
+        styles: $style,
+        tooltip,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        advancedOptions
+    }));
+</script>

package/src/component/FluxStatisticsBubbleChart.vue

@@ -0,0 +1,46 @@
+<template>
+    <Chart
+        ref="chartRef"
+        :options="mergedOptions"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildBubbleChartOptions } 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 mergedOptions = computed(() => buildBubbleChartOptions({
+        series,
+        palette: palette.value,
+        t,
+        styles: $style,
+        tooltip,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        advancedOptions
+    }));
+</script>

package/src/component/FluxStatisticsCandlestickChart.vue

@@ -0,0 +1,50 @@
+<template>
+    <Chart
+        ref="chartRef"
+        :options="mergedOptions"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxStatisticsChartCandlestickSeries } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildCandlestickChartOptions, candlestickLegendItemBuilder } 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: candlestickLegendItemBuilder
+    });
+
+    const mergedOptions = computed(() => buildCandlestickChartOptions({
+        series,
+        labels,
+        t,
+        styles: $style,
+        tooltip,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        advancedOptions
+    }));
+</script>

package/src/component/FluxStatisticsChart.vue

@@ -1,193 +1,43 @@
 <template>
-    <div :class="$style.statisticsChart">
-        <ApexCharts
-            ref="chart"
-            :class="$style.statisticsChartElement"
-            width="100%"
-            height="100%"
-            :options="merge({
-                chart: {
-                    height: '100%',
-                    width: '100%',
-                    offsetX: 0,
-                    offsetY: 0,
-                    parentHeightOffset: 0,
-                    redrawOnParentResize: false,
-                    redrawOnWindowResize: false,
-                    animations: {
-                        enabled: true,
-                        speed: 300,
-                        animateGradually: {
-                            enabled: false,
-                            delay: 150
-                        },
-                        dynamicAnimation: {
-                            enabled: true,
-                            speed: 150
-                        }
-                    },
-                    toolbar: {
-                        show: false
-                    },
-                    zoom: {
-                        enabled: false
-                    },
-                    events: {
-                        mounted: (context: any) => {
-                            const svg = context.el.querySelector('svg');
-                            svg?.querySelectorAll('title').forEach((t: HTMLTitleElement) => t.remove());
-                        },
-                        updated: (context: any) => {
-                            const svg = context.el.querySelector('svg');
-                            svg?.querySelectorAll('title').forEach((t: HTMLTitleElement) => t.remove());
-                        }
-                    }
-                },
-                colors: [
-                    'var(--chart-1)',
-                    'var(--chart-2)',
-                    'var(--chart-3)',
-                    'var(--chart-4)'
-                ],
-                dataLabels: {
-                    enabled: false
-                },
-                grid: {
-                    borderColor: 'var(--stroke)',
-                    padding: {
-                        top: 0,
-                        left: -3,
-                        right: -3,
-                        bottom: 0
-                    }
-                },
-                legend: {
-                    show: false
-                },
-                plotOptions: {
-                    bar: {
-                        borderRadius: 6,
-                        columnWidth: '75%'
-                    },
-                    donut: {
-                        expandOnClick: false
-                    },
-                    pie: {
-                        expandOnClick: false
-                    }
-                },
-                states: {
-                    hover: {
-                        filter: {
-                            type: 'none'
-                        }
-                    }
-                },
-                title: {
-                    text: undefined
-                },
-                tooltip: {
-                    custom: generateTooltip,
-                    followCursor: false,
-                    hideEmptySeries: true,
-                    onDatasetHover: {
-                        highlightDataSeries: true
-                    }
-                },
-                xaxis: {
-                    labels: { show: false },
-                    axisBorder: { show: false },
-                    axisTicks: { show: false },
-                    crosshairs: { show: true },
-                    tooltip: { enabled: false }
-                },
-                yaxis: {
-                    show: false,
-                    labels: { show: false }
-                }
-            }, options, {series})"
-            :series="series"/>
-    </div>
+    <div
+        ref="chart"
+        :class="$style.statisticsChart"/>
 </template>
 
 <script
     lang="ts"
     setup>
-    import { useResizeObserver } from '@basmilius/common';
-    import { formatNumber } from '@basmilius/utils';
-    import type { ApexOptions } from 'apexcharts';
     import { merge } from 'lodash-es';
-    import { toRaw, unref, useTemplateRef } from 'vue';
-    import { useI18n } from 'vue-i18n';
-    import ApexCharts from 'vue3-apexcharts';
+    import { computed, useTemplateRef } from 'vue';
+    import { type EChartsOption, useECharts } from '~flux/statistics/composable';
+    import { buildBaseOptions, deepResolveCssVars } from '~flux/statistics/util';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
         options = {}
     } = defineProps<{
-        readonly options?: ApexOptions;
-        readonly series: ApexOptions['series'];
+        readonly options?: EChartsOption;
     }>();
 
     const chart = useTemplateRef('chart');
-    const {t} = useI18n({useScope: 'parent'});
 
-    useResizeObserver(chart as any, () => {
-        const _chart = unref(chart);
+    const defaults = buildBaseOptions();
 
-        if (!_chart) {
-            return;
-        }
-
-        // @ts-ignore Update exists.
-        _chart.chart?.update();
-    });
-
-    function generateTooltip({dataPointIndex, w}: { dataPointIndex: number | null; w: any; }): string {
-        w = toRaw(w);
+    const mergedOptions = computed<EChartsOption>(() => {
+        const merged = merge({}, defaults, options) as EChartsOption & { color?: unknown; series?: unknown };
 
-        let labels: string[];
-
-        if (w.globals.categoryLabels && w.globals.categoryLabels.length > 0) {
-            labels = w.globals.categoryLabels;
-        } else if (w.globals.labels && w.globals.labels.length > 0) {
-            labels = w.globals.labels;
+        if (options && (options as { color?: unknown }).color !== undefined) {
+            merged.color = (options as { color: unknown }).color;
         }
 
-        return `${labels && dataPointIndex !== null && labels[dataPointIndex] ? `
-                    <div class="${$style.statisticsChartTooltipTitle}">
-                        ${t(labels[dataPointIndex])}
-                    </div>
-                ` : ''}
-
-                <div class="${$style.statisticsChartTooltipBody}">
-                    ${w.globals.series.map((_: any, index: number) => `
-                        <div class="${$style.statisticsChartTooltipSeriesColor}" style="background: ${w.globals.seriesColors[index] ?? w.globals.colors[index]}"></div>
-
-                        <div class="${$style.statisticsChartTooltipSeriesName}">
-                            ${w.globals.seriesNames[index]}
-                        </div>
-
-                        <div class="${$style.statisticsChartTooltipSeriesValue}">
-                            ${formatSeriesValue(w, dataPointIndex, index)}
-                        </div>
-                    `).join('')}
-                </div>`;
-    }
-
-    function formatSeriesValue(w: any, dataPointIndex: number | null, seriesIndex: number): string {
-        const value = dataPointIndex !== null
-            ? w.globals.series[seriesIndex][dataPointIndex]
-            : w.globals.series[seriesIndex];
-
-        if (w.config.tooltip.y.formatter) {
-            return w.config.tooltip.y.formatter(value, {dataPointIndex, seriesIndex});
+        if (options && (options as { series?: unknown }).series !== undefined) {
+            merged.series = (options as { series: unknown }).series;
         }
 
-        if (Number.isInteger(value)) {
-            return formatNumber(value);
-        }
+        return deepResolveCssVars(merged);
+    });
+
+    const {chartInstance} = useECharts(chart, mergedOptions);
 
-        return value;
-    }
+    defineExpose({chartInstance});
 </script>

package/src/component/FluxStatisticsChartPane.vue

@@ -7,19 +7,28 @@
             '--aspect-ratio': aspectRatio,
             '--max-height': maxHeight && `${maxHeight}px`,
             '--min-height': minHeight && `${minHeight}px`
-        }"
-        #content>
-        <div :class="$style.statisticsChartPaneBody">
-            <div :class="$style.statisticsChartPaneContainer">
-                <slot/>
-            </div>
+        }">
+        <template
+            v-if="slots.info"
+            #info>
+            <slot name="info"/>
+        </template>
 
-            <slot name="legend"/>
-        </div>
+        <template #content>
+            <FluxStatisticsLegendScope>
+                <div :class="$style.statisticsChartPaneBody">
+                    <div :class="$style.statisticsChartPaneContainer">
+                        <slot/>
+                    </div>
 
-        <FluxToolbar v-if="slots.toolbar">
-            <slot name="toolbar"/>
-        </FluxToolbar>
+                    <slot name="legend"/>
+                </div>
+
+                <FluxToolbar v-if="slots.toolbar">
+                    <slot name="toolbar"/>
+                </FluxToolbar>
+            </FluxStatisticsLegendScope>
+        </template>
     </Base>
 </template>
 
@@ -29,6 +38,7 @@
     import { FluxToolbar } from '@flux-ui/components';
     import type { FluxIconName } from '@flux-ui/types';
     import Base from './FluxStatisticsBase.vue';
+    import FluxStatisticsLegendScope from './FluxStatisticsLegendScope.vue';
     import $style from '~flux/statistics/css/ChartPane.module.scss';
 
     defineProps<{
@@ -41,6 +51,7 @@
 
     const slots = defineSlots<{
         default(): any;
+        info?(): any;
         legend?(): any;
         toolbar?(): any;
     }>();