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

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 { buildDefaultOptions, 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 = buildDefaultOptions();
 
-        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,26 @@
             '--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>
+
+        <template #content>
+            <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>
+        </template>
     </Base>
 </template>
 
@@ -28,6 +35,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 $style from '~flux/statistics/css/ChartPane.module.scss';
 
@@ -41,7 +50,10 @@
 
     const slots = defineSlots<{
         default(): any;
+        info?(): any;
         legend?(): any;
         toolbar?(): any;
     }>();
+
+    provide(FluxStatisticsChartLegendInjectionKey, createChartLegendContext());
 </script>

package/src/component/FluxStatisticsComparison.vue

@@ -0,0 +1,113 @@
+<template>
+    <Base
+        is-small
+        :icon="icon"
+        :title="title">
+        <div :class="$style.statisticsComparison">
+            <div :class="$style.statisticsComparisonItem">
+                <div :class="$style.statisticsComparisonItemLabel">
+                    {{ currentLabel ?? 'Current' }}
+                </div>
+
+                <div :class="$style.statisticsComparisonItemValue">
+                    {{ formattedCurrent }}
+                </div>
+            </div>
+
+            <div :class="$style.statisticsComparisonDivider"/>
+
+            <div :class="$style.statisticsComparisonItem">
+                <div :class="$style.statisticsComparisonItemLabel">
+                    {{ previousLabel ?? 'Previous' }}
+                </div>
+
+                <div :class="$style.statisticsComparisonItemValueMuted">
+                    {{ formattedPrevious }}
+                </div>
+            </div>
+        </div>
+
+        <div
+            v-if="showDelta"
+            :class="$style.statisticsComparisonBottom">
+            <Change
+                :color="deltaColor"
+                :icon="deltaIcon"
+                :value="formattedDelta"/>
+
+            <span
+                v-if="footer"
+                :class="$style.statisticsComparisonFooter">
+                {{ footer }}
+            </span>
+        </div>
+    </Base>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxColor, FluxIconName } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import Base from './FluxStatisticsBase.vue';
+    import Change from './FluxStatisticsChange.vue';
+    import $style from '~flux/statistics/css/Comparison.module.scss';
+
+    const {
+        current,
+        format,
+        previous,
+        showDelta = true
+    } = defineProps<{
+        readonly current: number;
+        readonly currentLabel?: string;
+        readonly footer?: string;
+        readonly format?: (value: number) => string;
+        readonly icon?: FluxIconName;
+        readonly previous: number;
+        readonly previousLabel?: string;
+        readonly showDelta?: boolean;
+        readonly title: string;
+    }>();
+
+    const formattedCurrent = computed(() => format ? format(current) : current);
+    const formattedPrevious = computed(() => format ? format(previous) : previous);
+
+    const deltaValue = computed(() => {
+        if (previous === 0) {
+            return 0;
+        }
+
+        return ((current - previous) / Math.abs(previous)) * 100;
+    });
+
+    const deltaColor = computed<FluxColor>(() => {
+        if (deltaValue.value > 0) {
+            return 'success';
+        }
+
+        if (deltaValue.value < 0) {
+            return 'danger';
+        }
+
+        return 'gray';
+    });
+
+    const deltaIcon = computed<FluxIconName | undefined>(() => {
+        if (deltaValue.value > 0) {
+            return 'arrow-trend-up';
+        }
+
+        if (deltaValue.value < 0) {
+            return 'arrow-trend-down';
+        }
+
+        return undefined;
+    });
+
+    const formattedDelta = computed(() => {
+        const sign = deltaValue.value > 0 ? '+' : '';
+
+        return `${sign}${deltaValue.value.toFixed(1)}%`;
+    });
+</script>

package/src/component/FluxStatisticsDonutChart.vue

@@ -1,32 +1,53 @@
 <template>
     <Chart
-        :aspectRatio="aspectRatio"
-        :options="merge({
-            chart: {
-                type: 'donut'
-            },
-            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, toDonutSeries } 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(() => [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 })
+    );
 </script>

package/src/component/FluxStatisticsEmpty.vue

@@ -0,0 +1,44 @@
+<template>
+    <div :class="$style.statisticsEmpty">
+        <FluxIcon
+            v-if="icon"
+            :class="$style.statisticsEmptyIcon"
+            :name="icon"/>
+
+        <div
+            v-if="title"
+            :class="$style.statisticsEmptyTitle">
+            {{ title }}
+        </div>
+
+        <div
+            v-if="description"
+            :class="$style.statisticsEmptyDescription">
+            {{ description }}
+        </div>
+
+        <div
+            v-if="slots.default"
+            :class="$style.statisticsEmptyActions">
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { FluxIcon } from '@flux-ui/components';
+    import type { FluxIconName } from '@flux-ui/types';
+    import $style from '~flux/statistics/css/Empty.module.scss';
+
+    defineProps<{
+        readonly description?: string;
+        readonly icon?: FluxIconName;
+        readonly title?: string;
+    }>();
+
+    const slots = defineSlots<{
+        default?(): any;
+    }>();
+</script>

package/src/component/FluxStatisticsHeatmapChart.vue

@@ -0,0 +1,80 @@
+<template>
+    <Chart
+        :options="mergedOptions"/>
+</template>
+
+<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 Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
+
+    const {
+        advancedOptions = {},
+        series,
+        tooltip = false,
+        xAxisLabels = false,
+        xLabels = [],
+        yAxisLabels = false,
+        yLabels = []
+    } = defineProps<{
+        readonly advancedOptions?: EChartsOption;
+        readonly series: readonly FluxStatisticsChartHeatmapSeries[];
+        readonly tooltip?: boolean;
+        readonly xAxisLabels?: boolean;
+        readonly xLabels?: readonly string[];
+        readonly yAxisLabels?: boolean;
+        readonly yLabels?: readonly string[];
+    }>();
+
+    const {t} = useI18n({useScope: 'parent'});
+
+    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 });
+    });
+</script>

package/src/component/FluxStatisticsLegend.vue

@@ -1,11 +1,43 @@
 <template>
     <div :class="$style.statisticsLegend">
-        <slot/>
+        <slot v-if="hasSlot"/>
+        <FluxStatisticsLegendItem
+            v-else
+            v-for="(item, index) in autoItems"
+            :key="item.label"
+            :color="item.color as `#${string}` | undefined"
+            :icon="item.icon"
+            :is-hovered="legendContext?.hoveredIndex.value === index"
+            :label="item.label"
+            :value="item.value"
+            @mouseenter="onItemMouseEnter(index)"
+            @mouseleave="onItemMouseLeave"/>
     </div>
 </template>
 
 <script
     lang="ts"
     setup>
+    import { computed, inject, useSlots } from 'vue';
+    import { FluxStatisticsChartLegendInjectionKey } from '~flux/statistics/composable';
+    import FluxStatisticsLegendItem from './FluxStatisticsLegendItem.vue';
     import $style from '~flux/statistics/css/Legend.module.scss';
+
+    const slots = useSlots();
+    const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
+
+    const hasSlot = computed(() => !!slots.default);
+    const autoItems = computed(() => legendContext?.items.value ?? []);
+
+    function onItemMouseEnter(index: number): void {
+        if (legendContext) {
+            legendContext.hoveredIndex.value = index;
+        }
+    }
+
+    function onItemMouseLeave(): void {
+        if (legendContext) {
+            legendContext.hoveredIndex.value = null;
+        }
+    }
 </script>

package/src/component/FluxStatisticsLegendItem.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        :class="$style.statisticsLegendItem"
+        :class="clsx($style.statisticsLegendItem, isHovered && $style.isHovered)"
         :style="{
             '--color': colorValue
         }">
@@ -33,6 +33,7 @@
     setup>
     import { FluxIcon } from '@flux-ui/components';
     import type { FluxColor, FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
     import { computed } from 'vue';
     import $style from '~flux/statistics/css/Legend.module.scss';
 
@@ -41,6 +42,7 @@
     } = defineProps<{
         readonly color?: FluxColor | `#${string}`;
         readonly icon?: FluxIconName;
+        readonly isHovered?: boolean;
         readonly label: string;
         readonly value?: string | number;
     }>();