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

package/src/component/FluxStatisticsPolarAreaChart.vue

@@ -0,0 +1,44 @@
+<template>
+    <Chart
+        ref="chartRef"
+        :options="mergedOptions"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import { useChartSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildPolarAreaChartOptions, type ChartTooltipValueFormatter } 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 } = useChartSlicesSetup(() => slices);
+
+    const mergedOptions = computed(() => buildPolarAreaChartOptions({
+        slices,
+        palette: palette.value,
+        tooltipItems: tooltipItems.value,
+        title,
+        t,
+        styles: $style,
+        tooltip,
+        tooltipValueFormatter,
+        advancedOptions
+    }));
+</script>

package/src/component/FluxStatisticsRadarChart.vue

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

package/src/component/FluxStatisticsRadialBar.vue

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

package/src/component/FluxStatisticsScatterChart.vue

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

package/src/component/index.ts

@@ -1,17 +1,32 @@
 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 FluxStatisticsLegendScope } from './FluxStatisticsLegendScope.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 FluxStatisticsPercentageBar } from './FluxStatisticsPercentageBar.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,12 @@
+export type { UseChartBaseSetupReturn } from './useChartBaseSetup';
+export { useChartBaseSetup } from './useChartBaseSetup';
+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 { UseChartSlicesSetupReturn } from './useChartSlicesSetup';
+export { useChartSlicesSetup } from './useChartSlicesSetup';
+export type { EChartsInstance, EChartsOption, UseEChartsReturn } from './useECharts';
+export { useECharts } from './useECharts';

package/src/composable/useChartBaseSetup.ts

@@ -0,0 +1,16 @@
+import { computed, useTemplateRef, type ComputedRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { EChartsInstance } from './useECharts';
+
+export interface UseChartBaseSetupReturn {
+    readonly t: ReturnType<typeof useI18n>['t'];
+    readonly chartInstance: ComputedRef<EChartsInstance | null>;
+}
+
+export function useChartBaseSetup(): UseChartBaseSetupReturn {
+    const { t } = useI18n({ useScope: 'parent' });
+    const chartRef = useTemplateRef<{ chartInstance: EChartsInstance | null } | null>('chartRef');
+    const chartInstance = computed<EChartsInstance | null>(() => chartRef.value?.chartInstance ?? null);
+
+    return { t, chartInstance };
+}

package/src/composable/useChartHoverSync.ts

@@ -0,0 +1,92 @@
+import { onBeforeUnmount, watch, type Ref } from 'vue';
+import type { ChartLegendContext } from './useChartLegend';
+import type { EChartsInstance } from './useECharts';
+
+export type ChartHoverSyncMode = 'series' | 'data';
+
+export interface UseChartHoverSyncOptions {
+    readonly mode: ChartHoverSyncMode;
+    readonly seriesIndex?: number;
+}
+
+export function useChartHoverSync(
+    chartInstance: Ref<EChartsInstance | null>,
+    legendContext: ChartLegendContext | null,
+    options: UseChartHoverSyncOptions
+): void {
+    if (!legendContext) {
+        return;
+    }
+
+    const { mode, seriesIndex: forcedSeriesIndex = 0 } = options;
+
+    let attached: EChartsInstance | null = null;
+    let syncing = false;
+
+    const onMouseOver = (params: { seriesIndex?: number; dataIndex?: number }) => {
+        if (syncing) {
+            return;
+        }
+
+        const index = mode === 'series'
+            ? params.seriesIndex ?? null
+            : params.dataIndex ?? null;
+
+        legendContext.hoveredIndex.value = index;
+    };
+
+    const onMouseOut = () => {
+        if (syncing) {
+            return;
+        }
+
+        legendContext.hoveredIndex.value = null;
+    };
+
+    const dispatchHighlight = (instance: EChartsInstance, index: number | null) => {
+        syncing = true;
+
+        try {
+            instance.dispatchAction({ type: 'downplay' });
+
+            if (index !== null) {
+                if (mode === 'series') {
+                    instance.dispatchAction({ type: 'highlight', seriesIndex: index });
+                } else {
+                    instance.dispatchAction({ type: 'highlight', seriesIndex: forcedSeriesIndex, dataIndex: index });
+                }
+            }
+        } finally {
+            syncing = false;
+        }
+    };
+
+    watch(chartInstance, instance => {
+        if (attached) {
+            attached.off('mouseover', onMouseOver as never);
+            attached.off('mouseout', onMouseOut as never);
+            attached = null;
+        }
+
+        if (instance) {
+            instance.on('mouseover', onMouseOver as never);
+            instance.on('mouseout', onMouseOut as never);
+            attached = instance;
+            dispatchHighlight(instance, legendContext.hoveredIndex.value);
+        }
+    }, { immediate: true });
+
+    watch(() => legendContext.hoveredIndex.value, index => {
+        if (chartInstance.value) {
+            dispatchHighlight(chartInstance.value, index);
+        }
+    });
+
+    onBeforeUnmount(() => {
+        if (attached) {
+            attached.off('mouseover', onMouseOver as never);
+            attached.off('mouseout', onMouseOut as never);
+            attached = null;
+        }
+    });
+}

package/src/composable/useChartLegend.ts

@@ -0,0 +1,23 @@
+import type { FluxIconName } from '@flux-ui/types';
+import { ref, type InjectionKey, type Ref } from 'vue';
+
+export interface ChartLegendItem {
+    readonly color?: string;
+    readonly icon?: FluxIconName;
+    readonly label: string;
+    readonly value?: string | number;
+}
+
+export interface ChartLegendContext {
+    readonly items: Ref<readonly ChartLegendItem[]>;
+    readonly hoveredIndex: Ref<number | null>;
+}
+
+export const FluxStatisticsChartLegendInjectionKey: InjectionKey<ChartLegendContext> = Symbol('flux-statistics-chart-legend');
+
+export function createChartLegendContext(): ChartLegendContext {
+    return {
+        items: ref<readonly ChartLegendItem[]>([]),
+        hoveredIndex: ref<number | null>(null)
+    };
+}

package/src/composable/useChartSeriesSetup.ts

@@ -0,0 +1,75 @@
+import type { FluxIconName, FluxStatisticsChartColor } from '@flux-ui/types';
+import { computed, inject, useTemplateRef, watchEffect, type ComputedRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { CHART_DEFAULT_COLORS, resolveChartColor } from '~flux/statistics/util';
+import { type ChartHoverSyncMode, useChartHoverSync } from './useChartHoverSync';
+import { type ChartLegendContext, type ChartLegendItem, FluxStatisticsChartLegendInjectionKey } from './useChartLegend';
+import type { EChartsInstance } from './useECharts';
+
+export interface ChartSeriesShape {
+    readonly name?: string;
+    readonly icon?: FluxIconName;
+    readonly color?: FluxStatisticsChartColor;
+}
+
+export type ChartLegendItemBuilder<S> = (
+    series: S,
+    color: string,
+    index: number,
+    t: ReturnType<typeof useI18n>['t']
+) => ChartLegendItem | readonly ChartLegendItem[];
+
+export interface UseChartSeriesSetupOptions<S extends ChartSeriesShape> {
+    readonly mode?: ChartHoverSyncMode;
+    readonly getLegendItem?: ChartLegendItemBuilder<S>;
+}
+
+export interface UseChartSeriesSetupReturn {
+    readonly t: ReturnType<typeof useI18n>['t'];
+    readonly palette: ComputedRef<readonly string[]>;
+    readonly legendContext: ChartLegendContext | null;
+    readonly chartInstance: ComputedRef<EChartsInstance | null>;
+}
+
+const defaultLegendItem = <S extends ChartSeriesShape>(
+    s: S,
+    color: string,
+    _index: number,
+    t: ReturnType<typeof useI18n>['t']
+): ChartLegendItem => ({
+    color,
+    icon: s.icon,
+    label: s.name ? t(String(s.name)) : ''
+});
+
+export function useChartSeriesSetup<S extends ChartSeriesShape>(
+    seriesGetter: () => readonly S[],
+    options: UseChartSeriesSetupOptions<S> = {}
+): UseChartSeriesSetupReturn {
+    const { mode = 'series', getLegendItem = defaultLegendItem } = options;
+    const { t } = useI18n({ useScope: 'parent' });
+    const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
+    const chartRef = useTemplateRef<{ chartInstance: EChartsInstance | null } | null>('chartRef');
+    const chartInstance = computed<EChartsInstance | null>(() => chartRef.value?.chartInstance ?? null);
+
+    useChartHoverSync(chartInstance, legendContext, { mode });
+
+    const palette = computed<readonly string[]>(() =>
+        seriesGetter().map((s, i) => resolveChartColor(s.color) ?? CHART_DEFAULT_COLORS[i % CHART_DEFAULT_COLORS.length])
+    );
+
+    const legendItems = computed<readonly ChartLegendItem[]>(() =>
+        seriesGetter().flatMap((s, i) => {
+            const item = getLegendItem(s, palette.value[i], i, t);
+            return Array.isArray(item) ? item : [item as ChartLegendItem];
+        })
+    );
+
+    watchEffect(() => {
+        if (legendContext) {
+            legendContext.items.value = legendItems.value;
+        }
+    });
+
+    return { t, palette, legendContext, chartInstance };
+}

package/src/composable/useChartSlicesSetup.ts

@@ -0,0 +1,58 @@
+import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
+import { computed, inject, useTemplateRef, watchEffect, type ComputedRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { CHART_DEFAULT_COLORS, resolveChartColor, type SharedTooltipItem } from '~flux/statistics/util';
+import { useChartHoverSync } from './useChartHoverSync';
+import { type ChartLegendContext, type ChartLegendItem, FluxStatisticsChartLegendInjectionKey } from './useChartLegend';
+import type { EChartsInstance } from './useECharts';
+
+export interface UseChartSlicesSetupReturn {
+    readonly t: ReturnType<typeof useI18n>['t'];
+    readonly palette: ComputedRef<readonly string[]>;
+    readonly tooltipItems: ComputedRef<readonly SharedTooltipItem[]>;
+    readonly legendContext: ChartLegendContext | null;
+    readonly chartInstance: ComputedRef<EChartsInstance | null>;
+}
+
+export function useChartSlicesSetup(
+    slicesGetter: () => readonly FluxStatisticsChartPieSlice[]
+): UseChartSlicesSetupReturn {
+    const { t } = useI18n({ useScope: 'parent' });
+    const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
+    const chartRef = useTemplateRef<{ chartInstance: EChartsInstance | null } | null>('chartRef');
+    const chartInstance = computed<EChartsInstance | null>(() => chartRef.value?.chartInstance ?? null);
+
+    useChartHoverSync(chartInstance, legendContext, { mode: 'data' });
+
+    const palette = computed<readonly string[]>(() =>
+        slicesGetter().map((slice, i) => resolveChartColor(slice.color) ?? CHART_DEFAULT_COLORS[i % CHART_DEFAULT_COLORS.length])
+    );
+
+    const tooltipItems = computed<readonly SharedTooltipItem[]>(() =>
+        slicesGetter().map((slice, i) => ({
+            name: slice.label,
+            value: slice.formatted ?? slice.value,
+            color: palette.value[i],
+            icon: slice.icon,
+            seriesIndex: 0,
+            dataIndex: i
+        }))
+    );
+
+    const legendItems = computed<readonly ChartLegendItem[]>(() =>
+        slicesGetter().map((slice, i) => ({
+            color: palette.value[i],
+            icon: slice.icon,
+            label: slice.label ? t(String(slice.label)) : '',
+            value: slice.formatted ?? slice.value
+        }))
+    );
+
+    watchEffect(() => {
+        if (legendContext) {
+            legendContext.items.value = legendItems.value;
+        }
+    });
+
+    return { t, palette, tooltipItems, legendContext, chartInstance };
+}

package/src/composable/useECharts.ts

@@ -0,0 +1,55 @@
+import { useResizeObserver } from '@basmilius/common';
+import { init, type EChartsCoreOption } from 'echarts/core';
+import { markRaw, onBeforeUnmount, onMounted, ref, toValue, type MaybeRefOrGetter, type Ref } from 'vue';
+import '~flux/statistics/echarts';
+
+export type EChartsOption = EChartsCoreOption;
+export type EChartsInstance = ReturnType<typeof init>;
+
+export interface UseEChartsReturn {
+    readonly chartInstance: Ref<EChartsInstance | null>;
+    resize(): void;
+}
+
+export function useECharts(
+    target: Ref<HTMLElement | null>,
+    options: MaybeRefOrGetter<EChartsOption>
+): UseEChartsReturn {
+    const chartInstance = ref<EChartsInstance | null>(null);
+    let pendingResize: number | null = null;
+
+    onMounted(() => {
+        if (!target.value) {
+            return;
+        }
+
+        chartInstance.value = markRaw(init(target.value));
+        chartInstance.value.setOption(toValue(options));
+    });
+
+    onBeforeUnmount(() => {
+        if (pendingResize !== null) {
+            cancelAnimationFrame(pendingResize);
+            pendingResize = null;
+        }
+
+        chartInstance.value?.dispose();
+        chartInstance.value = null;
+    });
+
+    useResizeObserver(target as any, () => {
+        if (pendingResize !== null) {
+            return;
+        }
+
+        pendingResize = requestAnimationFrame(() => {
+            pendingResize = null;
+            chartInstance.value?.resize();
+        });
+    });
+
+    return {
+        chartInstance: chartInstance as Ref<EChartsInstance | null>,
+        resize: () => chartInstance.value?.resize()
+    };
+}