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

package/src/component/FluxStatisticsLineChart.vue

@@ -1,59 +1,56 @@
 <template>
     <Chart
-        :aspectRatio="aspectRatio"
-        :options="merge({
-            chart: {
-                type: 'line',
-                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 { FluxStatisticsChartLineSeries } 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, toLineSeries } 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 FluxStatisticsChartLineSeries[];
+        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) =>
+        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 });
     });
 </script>

package/src/component/FluxStatisticsMixedChart.vue

@@ -0,0 +1,55 @@
+<template>
+    <Chart
+        ref="chartRef"
+        :options="mergedOptions"/>
+</template>
+
+<script
+    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 Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
+
+    const {
+        advancedOptions = {},
+        labels,
+        series,
+        splitLines = false,
+        tooltip = false,
+        tooltipValueFormatter,
+        xAxisLabels = false,
+        yAxisLabels = false
+    } = defineProps<{
+        readonly advancedOptions?: EChartsOption;
+        readonly labels?: readonly string[];
+        readonly series: readonly FluxStatisticsChartMixedSeries[];
+        readonly splitLines?: boolean;
+        readonly tooltip?: boolean;
+        readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
+        readonly xAxisLabels?: boolean;
+        readonly yAxisLabels?: boolean;
+    }>();
+
+    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 });
+    });
+</script>

package/src/component/FluxStatisticsPieChart.vue

@@ -1,32 +1,53 @@
 <template>
     <Chart
-        :aspectRatio="aspectRatio"
-        :options="merge({
-            chart: {
-                type: 'pie'
-            },
-            legend: {
-                show: false
-            },
-            tooltip: {
-                enabled: false
-            }
-        }, options)"
-        :series="series"/>
+        ref="chartRef"
+        :options="mergedOptions"/>
 </template>
 
 <script
     lang="ts"
     setup>
-    import type { ApexOptions } from 'apexcharts';
+    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, toPieSeries } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        options = {}
+        advancedOptions = {},
+        slices,
+        title,
+        tooltip = false,
+        tooltipValueFormatter
     } = defineProps<{
-        readonly aspectRatio?: number;
-        readonly options?: ApexOptions;
-        readonly series: ApexOptions['series'];
+        readonly advancedOptions?: EChartsOption;
+        readonly slices: readonly FluxStatisticsChartPieSlice[];
+        readonly title?: string;
+        readonly tooltip?: boolean;
+        readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
     }>();
+
+    const { t, palette, tooltipItems } = usePieSlicesSetup(() => slices);
+
+    const echartsSeries = computed(() => [toPieSeries(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 })
+    );
 </script>

package/src/component/FluxStatisticsPolarAreaChart.vue

@@ -0,0 +1,53 @@
+<template>
+    <Chart
+        ref="chartRef"
+        :options="mergedOptions"/>
+</template>
+
+<script
+    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, toPolarAreaSeries } from '~flux/statistics/util';
+    import Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
+
+    const {
+        advancedOptions = {},
+        slices,
+        title,
+        tooltip = false,
+        tooltipValueFormatter
+    } = defineProps<{
+        readonly advancedOptions?: EChartsOption;
+        readonly slices: readonly FluxStatisticsChartPieSlice[];
+        readonly title?: string;
+        readonly tooltip?: boolean;
+        readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
+    }>();
+
+    const { t, palette, tooltipItems } = usePieSlicesSetup(() => slices);
+
+    const echartsSeries = computed(() => [toPolarAreaSeries(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 })
+    );
+</script>

package/src/component/FluxStatisticsRadarChart.vue

@@ -0,0 +1,108 @@
+<template>
+    <Chart
+        ref="chartRef"
+        :options="mergedOptions"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxStatisticsChartRadarIndicator, FluxStatisticsChartRadarSeries } from '@flux-ui/types';
+    import { merge } from 'lodash-es';
+    import { computed } from 'vue';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { POLAR_BASE_OPTIONS, type SharedTooltipItem, toRadarSeries, type TooltipParam, type TooltipStyleClasses } from '~flux/statistics/util';
+    import Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
+
+    const {
+        advancedOptions = {},
+        indicators,
+        series,
+        tooltip = false
+    } = defineProps<{
+        readonly advancedOptions?: EChartsOption;
+        readonly indicators: readonly FluxStatisticsChartRadarIndicator[];
+        readonly series: readonly FluxStatisticsChartRadarSeries[];
+        readonly tooltip?: boolean;
+    }>();
+
+    const { t, palette } = useChartSeriesSetup(() => series, { mode: 'data' });
+
+    const echartsSeries = computed(() => [toRadarSeries(
+        series.map(s => ({ ...s, name: s.name ? t(String(s.name)) : undefined })),
+        palette.value
+    )]);
+
+    const radarConfig = computed(() => ({
+        radar: {
+            indicator: indicators.map(i => ({ name: t(String(i.name)), max: i.max })),
+            splitLine: { lineStyle: { color: 'var(--gray-200)' } },
+            splitArea: { show: false },
+            axisLine: { lineStyle: { color: 'var(--gray-200)' } },
+            axisName: {
+                color: 'var(--foreground-secondary)',
+                fontSize: 12,
+                fontWeight: 500
+            }
+        }
+    } as EChartsOption));
+
+    const tooltipFormatter = (params: TooltipParam | TooltipParam[]): string => {
+        const param = Array.isArray(params) ? params[0] : params;
+
+        if (!param) {
+            return '';
+        }
+
+        const ringIndex = param.dataIndex ?? 0;
+        const ring = series[ringIndex];
+
+        if (!ring) {
+            return '';
+        }
+
+        const styles = $style as unknown as TooltipStyleClasses;
+        const color = palette.value[ringIndex % palette.value.length];
+        const title = ring.name ? t(String(ring.name)) : '';
+
+        const tooltipItems: SharedTooltipItem[] = indicators.map((indicator, idx) => ({
+            name: indicator.name,
+            value: ring.values[idx] ?? '',
+            color
+        }));
+
+        const titleHtml = title
+            ? `<div class="${styles.statisticsChartTooltipTitle}">${title}</div>`
+            : '';
+
+        const body = tooltipItems.map(item => {
+            const translatedName = item.name ? t(String(item.name)) : '';
+            return `
+                <div class="${styles.statisticsChartTooltipSeriesColor} ${styles.isActive}" style="background: ${item.color}"></div>
+                <div class="${styles.statisticsChartTooltipSeriesName} ${styles.isActive}">${translatedName}</div>
+                <div class="${styles.statisticsChartTooltipSeriesValue} ${styles.isActive}">${item.value}</div>
+            `;
+        }).join('');
+
+        return `${titleHtml}<div class="${styles.statisticsChartTooltipBody}">${body}</div>`;
+    };
+
+    const tooltipOptions = computed<EChartsOption>(() => {
+        if (!tooltip) {
+            return { tooltip: { show: false } };
+        }
+
+        return {
+            tooltip: {
+                show: true,
+                trigger: 'item',
+                formatter: tooltipFormatter as never
+            }
+        };
+    });
+
+    const mergedOptions = computed<EChartsOption>(() =>
+        merge({}, POLAR_BASE_OPTIONS, radarConfig.value, tooltipOptions.value, advancedOptions, { series: echartsSeries.value, color: palette.value })
+    );
+</script>

package/src/component/FluxStatisticsRadialBar.vue

@@ -0,0 +1,48 @@
+<template>
+    <Chart
+        ref="chartRef"
+        :options="mergedOptions"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
+    import { merge } from 'lodash-es';
+    import { computed } from 'vue';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildGaugeTooltipOptions, POLAR_BASE_OPTIONS, toGaugeSeries } from '~flux/statistics/util';
+    import Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
+
+    const {
+        advancedOptions = {},
+        series,
+        tooltip = false
+    } = defineProps<{
+        readonly advancedOptions?: EChartsOption;
+        readonly series: readonly FluxStatisticsChartGaugeSeries[];
+        readonly tooltip?: boolean;
+    }>();
+
+    const { t, palette } = useChartSeriesSetup(() => series, {
+        getLegendItem: (s, color, _, translate) => ({
+            color,
+            icon: s.icon,
+            label: s.name ? translate(String(s.name)) : '',
+            value: s.value
+        })
+    });
+
+    const echartsSeries = computed(() => series.map((s, i) =>
+        toGaugeSeries({ ...s, name: s.name ? t(String(s.name)) : s.name }, palette.value[i], i, series.length)
+    ));
+
+    const mergedOptions = computed<EChartsOption>(() => {
+        const tooltipOptions: EChartsOption = tooltip
+            ? buildGaugeTooltipOptions(t, $style as never, () => series, () => palette.value)
+            : { tooltip: { show: false } };
+
+        return merge({}, POLAR_BASE_OPTIONS, tooltipOptions, advancedOptions, { series: echartsSeries.value, color: palette.value });
+    });
+</script>

package/src/component/FluxStatisticsScatterChart.vue

@@ -0,0 +1,56 @@
+<template>
+    <Chart
+        ref="chartRef"
+        :options="mergedOptions"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
+    import { merge } from 'lodash-es';
+    import { computed } from 'vue';
+    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildCartesianBaseOptions, buildCartesianTooltipOptions, toScatterSeries } 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 FluxStatisticsChartScatterSeries[];
+        readonly splitLines?: boolean;
+        readonly tooltip?: boolean;
+        readonly xAxisLabels?: boolean;
+        readonly yAxisLabels?: boolean;
+    }>();
+
+    const { t, palette } = useChartSeriesSetup(() => series);
+
+    const echartsSeries = computed(() => series.map((s, i) =>
+        toScatterSeries({ ...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/FluxStatisticsSparkline.vue

@@ -0,0 +1,67 @@
+<template>
+    <div
+        data-sparkline
+        :class="$style.statisticsSparkline"
+        :style="{
+            '--color': resolvedColor
+        }">
+        <div
+            ref="chart"
+            :class="$style.statisticsSparklineChart"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxColor } from '@flux-ui/types';
+    import { merge } from 'lodash-es';
+    import { computed, useTemplateRef } from 'vue';
+    import { type EChartsOption, useECharts } from '~flux/statistics/composable';
+    import { buildSparklineOptions, deepResolveCssVars, type SparklineSeriesItem, useCssVarVersion } from '~flux/statistics/util';
+    import $style from '~flux/statistics/css/Sparkline.module.scss';
+
+    const FLUX_COLORS: FluxColor[] = ['gray', 'primary', 'danger', 'info', 'success', 'warning'];
+
+    const {
+        color,
+        options = {},
+        series,
+        variant = 'line'
+    } = defineProps<{
+        readonly color?: FluxColor | `#${string}`;
+        readonly options?: EChartsOption;
+        readonly series: readonly SparklineSeriesItem[];
+        readonly variant?: 'line' | 'bar' | 'area';
+    }>();
+
+    const chart = useTemplateRef('chart');
+
+    const resolvedColor = computed(() => {
+        if (!color) {
+            return undefined;
+        }
+
+        if (FLUX_COLORS.includes(color as FluxColor)) {
+            return `var(--${color}-600)`;
+        }
+
+        return color;
+    });
+
+    const themeVersion = useCssVarVersion();
+
+    const mergedOptions = computed<EChartsOption>(() => {
+        themeVersion.value;
+
+        const merged = merge(
+            {},
+            buildSparklineOptions(variant, resolvedColor.value ?? 'var(--chart-1)', series),
+            options
+        );
+
+        return deepResolveCssVars(merged);
+    });
+
+    useECharts(chart, mergedOptions);
+</script>

package/src/component/FluxStatisticsTreemapChart.vue

@@ -0,0 +1,39 @@
+<template>
+    <Chart
+        :options="mergedOptions"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxStatisticsChartTreemapNode } 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 { buildTreemapTooltipOptions, CHART_DEFAULT_COLORS, POLAR_BASE_OPTIONS, toTreemapSeries } from '~flux/statistics/util';
+    import Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
+
+    const {
+        advancedOptions = {},
+        nodes,
+        tooltip = false
+    } = defineProps<{
+        readonly advancedOptions?: EChartsOption;
+        readonly nodes: readonly FluxStatisticsChartTreemapNode[];
+        readonly tooltip?: boolean;
+    }>();
+
+    const {t} = useI18n({useScope: 'parent'});
+
+    const echartsSeries = computed(() => [toTreemapSeries(nodes, CHART_DEFAULT_COLORS)]);
+
+    const mergedOptions = computed<EChartsOption>(() => {
+        const tooltipOptions: EChartsOption = tooltip
+            ? buildTreemapTooltipOptions(t, $style as never)
+            : { tooltip: { show: false } };
+
+        return merge({}, POLAR_BASE_OPTIONS, tooltipOptions, advancedOptions, { series: echartsSeries.value });
+    });
+</script>

package/src/component/index.ts

@@ -1,17 +1,30 @@
 export { default as FluxStatisticsAreaChart } from './FluxStatisticsAreaChart.vue';
 export { default as FluxStatisticsBarChart } from './FluxStatisticsBarChart.vue';
 export { default as FluxStatisticsBase } from './FluxStatisticsBase.vue';
+export { default as FluxStatisticsBoxPlotChart } from './FluxStatisticsBoxPlotChart.vue';
+export { default as FluxStatisticsBubbleChart } from './FluxStatisticsBubbleChart.vue';
+export { default as FluxStatisticsCandlestickChart } from './FluxStatisticsCandlestickChart.vue';
 export { default as FluxStatisticsChange } from './FluxStatisticsChange.vue';
 export { default as FluxStatisticsChart } from './FluxStatisticsChart.vue';
 export { default as FluxStatisticsChartPane } from './FluxStatisticsChartPane.vue';
+export { default as FluxStatisticsComparison } from './FluxStatisticsComparison.vue';
 export { default as FluxStatisticsDetailsTable } from './FluxStatisticsDetailsTable.vue';
 export { default as FluxStatisticsDetailsTableRow } from './FluxStatisticsDetailsTableRow.vue';
 export { default as FluxStatisticsDonutChart } from './FluxStatisticsDonutChart.vue';
+export { default as FluxStatisticsEmpty } from './FluxStatisticsEmpty.vue';
 export { default as FluxStatisticsGrid } from './FluxStatisticsGrid.vue';
+export { default as FluxStatisticsHeatmapChart } from './FluxStatisticsHeatmapChart.vue';
 export { default as FluxStatisticsLineChart } from './FluxStatisticsLineChart.vue';
 export { default as FluxStatisticsKpi } from './FluxStatisticsKpi.vue';
 export { default as FluxStatisticsLegend } from './FluxStatisticsLegend.vue';
 export { default as FluxStatisticsLegendItem } from './FluxStatisticsLegendItem.vue';
 export { default as FluxStatisticsMeter } from './FluxStatisticsMeter.vue';
 export { default as FluxStatisticsMetric } from './FluxStatisticsMetric.vue';
+export { default as FluxStatisticsMixedChart } from './FluxStatisticsMixedChart.vue';
 export { default as FluxStatisticsPieChart } from './FluxStatisticsPieChart.vue';
+export { default as FluxStatisticsPolarAreaChart } from './FluxStatisticsPolarAreaChart.vue';
+export { default as FluxStatisticsRadarChart } from './FluxStatisticsRadarChart.vue';
+export { default as FluxStatisticsRadialBar } from './FluxStatisticsRadialBar.vue';
+export { default as FluxStatisticsScatterChart } from './FluxStatisticsScatterChart.vue';
+export { default as FluxStatisticsSparkline } from './FluxStatisticsSparkline.vue';
+export { default as FluxStatisticsTreemapChart } from './FluxStatisticsTreemapChart.vue';

package/src/composable/index.ts

@@ -0,0 +1,10 @@
+export type { ChartLegendContext, ChartLegendItem } from './useChartLegend';
+export { createChartLegendContext, FluxStatisticsChartLegendInjectionKey } from './useChartLegend';
+export type { ChartHoverSyncMode, UseChartHoverSyncOptions } from './useChartHoverSync';
+export { useChartHoverSync } from './useChartHoverSync';
+export type { ChartLegendItemBuilder, ChartSeriesShape, UseChartSeriesSetupOptions, UseChartSeriesSetupReturn } from './useChartSeriesSetup';
+export { useChartSeriesSetup } from './useChartSeriesSetup';
+export type { UsePieSlicesSetupReturn } from './usePieSlicesSetup';
+export { usePieSlicesSetup } from './usePieSlicesSetup';
+export type { EChartsInstance, EChartsOption, UseEChartsReturn } from './useECharts';
+export { useECharts } from './useECharts';