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

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,44 @@
 <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 { merge } from 'lodash-es';
+    import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import { useChartSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildDonutChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        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 } = useChartSlicesSetup(() => slices);
+
+    const mergedOptions = computed(() => buildDonutChartOptions({
+        slices,
+        palette: palette.value,
+        tooltipItems: tooltipItems.value,
+        title,
+        t,
+        styles: $style,
+        tooltip,
+        tooltipValueFormatter,
+        advancedOptions
+    }));
 </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,47 @@
+<template>
+    <Chart
+        :options="mergedOptions"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxStatisticsChartHeatmapSeries } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import { useChartBaseSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildHeatmapChartOptions } from '~flux/statistics/util';
+    import Chart from './FluxStatisticsChart.vue';
+    import $style from '~flux/statistics/css/Chart.module.scss';
+
+    const {
+        advancedOptions,
+        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 } = useChartBaseSetup();
+
+    const mergedOptions = computed(() => buildHeatmapChartOptions({
+        series,
+        xLabels,
+        yLabels,
+        t,
+        styles: $style,
+        tooltip,
+        xAxisLabels,
+        yAxisLabels,
+        advancedOptions
+    }));
+</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;
     }>();

package/src/component/FluxStatisticsLegendScope.vue

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

package/src/component/FluxStatisticsLineChart.vue

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

package/src/component/FluxStatisticsMixedChart.vue

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

package/src/component/FluxStatisticsPercentageBar.vue

@@ -0,0 +1,90 @@
+<template>
+    <div :class="$style.statisticsPercentageBar">
+        <div :class="clsx($style.statisticsPercentageBarTrack, hoveredIndex !== null && $style.isHoverActive)">
+            <FluxTooltip
+                v-for="(item, index) of items"
+                :key="index">
+                <template #content>
+                    <div :class="$style.statisticsPercentageBarTooltip">
+                        <FluxIcon
+                            v-if="item.icon"
+                            :name="item.icon"
+                            :size="16"/>
+
+                        <span>{{ formatPercentage(item.value) }} {{ item.label }}</span>
+                    </div>
+                </template>
+
+                <div
+                    :class="clsx($style.statisticsPercentageBarSegment, hoveredIndex === index && $style.isHovered)"
+                    :style="{
+                        backgroundColor: resolveColor(item.color),
+                        flexGrow: item.value
+                    }"
+                    @mouseenter="onSegmentEnter(index)"
+                    @mouseleave="onSegmentLeave"/>
+            </FluxTooltip>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { formatPercentage } from '@basmilius/utils';
+    import { FluxIcon, FluxTooltip } from '@flux-ui/components';
+    import type { FluxStatisticsChartColor, FluxStatisticsPercentageBarItemObject } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, inject, watchEffect } from 'vue';
+    import { FluxStatisticsChartLegendInjectionKey, type ChartLegendItem } from '~flux/statistics/composable';
+    import $style from '~flux/statistics/css/PercentageBar.module.scss';
+
+    const SEMANTIC_COLORS = ['gray', 'primary', 'danger', 'info', 'success', 'warning'] as const;
+
+    const props = defineProps<{
+        readonly items: FluxStatisticsPercentageBarItemObject[];
+    }>();
+
+    const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
+
+    const legendItems = computed<ChartLegendItem[]>(() =>
+        props.items.map(item => ({
+            color: resolveColor(item.color),
+            icon: item.icon,
+            label: item.label,
+            value: item.displayValue
+        }))
+    );
+
+    const hoveredIndex = computed<number | null>(() => legendContext?.hoveredIndex.value ?? null);
+
+    watchEffect(() => {
+        if (legendContext) {
+            legendContext.items.value = legendItems.value;
+        }
+    });
+
+    function resolveColor(color?: FluxStatisticsChartColor): string | undefined {
+        if (!color) {
+            return;
+        }
+
+        if (SEMANTIC_COLORS.includes(color as typeof SEMANTIC_COLORS[number])) {
+            return `var(--${color}-600)`;
+        }
+
+        return color;
+    }
+
+    function onSegmentEnter(index: number): void {
+        if (legendContext) {
+            legendContext.hoveredIndex.value = index;
+        }
+    }
+
+    function onSegmentLeave(): void {
+        if (legendContext) {
+            legendContext.hoveredIndex.value = null;
+        }
+    }
+</script>

package/src/component/FluxStatisticsPieChart.vue

@@ -1,32 +1,44 @@
 <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 { merge } from 'lodash-es';
+    import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import { useChartSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildPieChartOptions, type ChartTooltipValueFormatter } 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 } = useChartSlicesSetup(() => slices);
+
+    const mergedOptions = computed(() => buildPieChartOptions({
+        slices,
+        palette: palette.value,
+        tooltipItems: tooltipItems.value,
+        title,
+        t,
+        styles: $style,
+        tooltip,
+        tooltipValueFormatter,
+        advancedOptions
+    }));
 </script>