@flux-ui/statistics 3.0.0-next.28

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+declare module '*.module.css' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.module.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.svg' {
+    export = string;
+}

package/package.json

@@ -0,0 +1,77 @@
+{
+    "name": "@flux-ui/statistics",
+    "description": "Statistics components for the Flux UI library.",
+    "version": "3.0.0-next.28",
+    "type": "module",
+    "license": "MIT",
+    "funding": "https://github.com/sponsors/basmilius",
+    "homepage": "https://flux.bas.dev",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/basmilius/flux.git",
+        "directory": "packages/statistics"
+    },
+    "keywords": [
+        "ui library",
+        "component library",
+        "design system",
+        "vue",
+        "vue 3",
+        "ui",
+        "components",
+        "flux",
+        "statistics"
+    ],
+    "scripts": {
+        "build": "vue-tsc && vite build",
+        "dev": "vite build --watch"
+    },
+    "engines": {
+        "node": ">=23"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./style.css": "./dist/index.css"
+    },
+    "publishConfig": {
+        "access": "public",
+        "provenance": true
+    },
+    "files": [
+        "dist",
+        "src",
+        "tsconfig.json"
+    ],
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "typings": "./dist/index.d.ts",
+    "sideEffects": false,
+    "dependencies": {
+        "@basmilius/common": "^3.8.0",
+        "@basmilius/utils": "^3.8.0",
+        "@flux-ui/components": "3.0.0-next.28",
+        "@flux-ui/internals": "3.0.0-next.28",
+        "apexcharts": "^5.6.0",
+        "clsx": "^2.1.1",
+        "lodash-es": "^4.17.23",
+        "vue": "^3.6.0-beta.6",
+        "vue-i18n": "^11.2.8",
+        "vue3-apexcharts": "^1.10.0"
+    },
+    "devDependencies": {
+        "@basmilius/vite-preset": "^3.8.0",
+        "@flux-ui/types": "3.0.0-next.28",
+        "@types/lodash-es": "^4.17.12",
+        "@types/node": "^25.3.1",
+        "@vitejs/plugin-vue": "^6.0.4",
+        "@vue/tsconfig": "^0.8.1",
+        "sass-embedded": "^1.97.3",
+        "typescript": "^5.9.3",
+        "vite": "^8.0.0-beta.15",
+        "vue-tsc": "^3.2.5"
+    }
+}

package/src/component/FluxStatisticsAreaChart.vue

@@ -0,0 +1,59 @@
+<template>
+    <Chart
+        :aspectRatio="aspectRatio"
+        :options="merge({
+            chart: {
+                type: 'area',
+                sparkline: {
+                    enabled: true
+                }
+            },
+            fill: {
+                gradient: {
+                    enabled: true,
+                    opacityFrom: 0.5,
+                    opacityTo: 0
+                }
+            },
+            grid: {
+                show: true,
+                clipMarkers: false
+            },
+            legend: {
+                show: false
+            },
+            stroke: {
+                curve: 'smooth',
+                width: 2
+            }
+        }, options)"
+        :series="translatedSeries"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { ApexOptions } from 'apexcharts';
+    import { merge } from 'lodash-es';
+    import { computed } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import Chart from './FluxStatisticsChart.vue';
+
+    const {
+        options = {},
+        series
+    } = defineProps<{
+        readonly aspectRatio?: number;
+        readonly options?: ApexOptions;
+        readonly series: ApexOptions['series'];
+    }>();
+
+    const {t} = useI18n({useScope: 'parent'});
+
+    const translatedSeries = computed(() => {
+        return (series as any).map((seriesItem: any) => ({
+            ...seriesItem,
+            name: t(seriesItem.name as string)
+        }));
+    });
+</script>

package/src/component/FluxStatisticsBarChart.vue

@@ -0,0 +1,51 @@
+<template>
+    <Chart
+        :aspectRatio="aspectRatio"
+        :options="merge({
+            chart: {
+                type: 'bar'
+            },
+            grid: {
+                show: true,
+                clipMarkers: false,
+                padding: {
+                    top: 21,
+                    left: 9,
+                    right: 9
+                }
+            },
+            tooltip: {
+                shared: true,
+                intersect: false
+            }
+        }, options)"
+        :series="translatedSeries"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { ApexOptions } from 'apexcharts';
+    import { merge } from 'lodash-es';
+    import { computed } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import Chart from './FluxStatisticsChart.vue';
+
+    const {
+        options = {},
+        series
+    } = defineProps<{
+        readonly aspectRatio?: number;
+        readonly options?: ApexOptions;
+        readonly series: ApexOptions['series'];
+    }>();
+
+    const {t} = useI18n({useScope: 'parent'});
+
+    const translatedSeries = computed(() => {
+        return (series as any).map((seriesItem: any) => ({
+            ...seriesItem,
+            name: t(seriesItem.name as string)
+        }));
+    });
+</script>

package/src/component/FluxStatisticsBase.vue

@@ -0,0 +1,43 @@
+<template>
+    <FluxPane :class="isSmall ? $style.statisticsBaseSmall : $style.statisticsBase">
+        <div
+            v-if="title"
+            :class="$style.statisticsBaseHeader">
+            <span :class="$style.statisticsBaseHeaderTitle">
+                {{ title }}
+            </span>
+
+            <FluxIcon
+                v-if="icon"
+                :class="$style.statisticsBaseHeaderIcon"
+                :name="icon"/>
+        </div>
+
+        <div
+            v-if="slots.default"
+            :class="$style.statisticsBaseContent">
+            <slot/>
+        </div>
+
+        <slot name="content"/>
+    </FluxPane>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { FluxIcon, FluxPane } from '@flux-ui/components';
+    import type { FluxIconName } from '@flux-ui/types';
+    import $style from '$fluxStatistics/css/Base.module.scss';
+
+    defineProps<{
+        readonly icon?: FluxIconName;
+        readonly isSmall?: boolean;
+        readonly title?: string;
+    }>();
+
+    const slots = defineSlots<{
+        content?(): any;
+        default?(): any;
+    }>();
+</script>

package/src/component/FluxStatisticsChange.vue

@@ -0,0 +1,37 @@
+<template>
+    <div
+        :class="clsx(
+            $style.statisticsChange,
+            color === 'gray' && $style.isGray,
+            color === 'primary' && $style.isPrimary,
+            color === 'danger' && $style.isDanger,
+            color === 'info' && $style.isInfo,
+            color === 'success' && $style.isSuccess,
+            color === 'warning' && $style.isWarning
+        )"
+        role="presentation">
+        <FluxIcon
+            v-if="icon"
+            :class="$style.statisticsChangeIcon"
+            :name="icon"/>
+
+        <span :class="$style.statisticsChangeValue">
+            {{ value }}
+        </span>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { FluxIcon } from '@flux-ui/components';
+    import type { FluxColor, FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import $style from '$fluxStatistics/css/Change.module.scss';
+
+    defineProps<{
+        readonly color?: FluxColor;
+        readonly icon?: FluxIconName;
+        readonly value: string | number;
+    }>();
+</script>

package/src/component/FluxStatisticsChart.vue

@@ -0,0 +1,193 @@
+<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>
+</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 $style from '$fluxStatistics/css/Chart.module.scss';
+
+    const {
+        options = {}
+    } = defineProps<{
+        readonly options?: ApexOptions;
+        readonly series: ApexOptions['series'];
+    }>();
+
+    const chart = useTemplateRef('chart');
+    const {t} = useI18n({useScope: 'parent'});
+
+    useResizeObserver(chart, () => {
+        const _chart = unref(chart);
+
+        if (!_chart) {
+            return;
+        }
+
+        // @ts-ignore Update exists.
+        _chart.chart?.update();
+    });
+
+    function generateTooltip({dataPointIndex, w}: { dataPointIndex: number | null; w: any; }): string {
+        w = toRaw(w);
+
+        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;
+        }
+
+        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 (Number.isInteger(value)) {
+            return formatNumber(value);
+        }
+
+        return value;
+    }
+</script>

package/src/component/FluxStatisticsChartPane.vue

@@ -0,0 +1,47 @@
+<template>
+    <Base
+        :class="$style.statisticsChartPane"
+        :icon="icon"
+        :title="title"
+        :style="{
+            '--aspect-ratio': aspectRatio,
+            '--max-height': maxHeight && `${maxHeight}px`,
+            '--min-height': minHeight && `${minHeight}px`
+        }"
+        #content>
+        <div :class="$style.statisticsChartPaneBody">
+            <div :class="$style.statisticsChartPaneContainer">
+                <slot/>
+            </div>
+
+            <slot name="legend"/>
+        </div>
+
+        <FluxToolbar v-if="slots.toolbar">
+            <slot name="toolbar"/>
+        </FluxToolbar>
+    </Base>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { FluxToolbar } from '@flux-ui/components';
+    import type { FluxIconName } from '@flux-ui/types';
+    import Base from './FluxStatisticsBase.vue';
+    import $style from '$fluxStatistics/css/ChartPane.module.scss';
+
+    defineProps<{
+        readonly aspectRatio?: number;
+        readonly maxHeight?: number;
+        readonly minHeight?: number;
+        readonly icon?: FluxIconName;
+        readonly title?: string;
+    }>();
+
+    const slots = defineSlots<{
+        default(): any;
+        legend?(): any;
+        toolbar?(): any;
+    }>();
+</script>

package/src/component/FluxStatisticsDetailsTable.vue

@@ -0,0 +1,25 @@
+<template>
+    <div :class="$style.detailsTable">
+        <div :class="$style.detailsTableTitle">
+            {{ title }}
+        </div>
+
+        <div :class="$style.detailsTableRows">
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$fluxStatistics/css/DetailsTable.module.scss';
+
+    defineProps<{
+        readonly title: string;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxStatisticsDetailsTableRow.vue

@@ -0,0 +1,22 @@
+<template>
+    <div :class="$style.detailsTableRow">
+        <span :class="$style.detailsTableRowLabel">
+            {{ label }}
+        </span>
+
+        <span :class="$style.detailsTableRowValue">
+            {{ value }}
+        </span>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$fluxStatistics/css/DetailsTable.module.scss';
+
+    defineProps<{
+        readonly label: string;
+        readonly value: string;
+    }>();
+</script>

package/src/component/FluxStatisticsDonutChart.vue

@@ -0,0 +1,32 @@
+<template>
+    <Chart
+        :aspectRatio="aspectRatio"
+        :options="merge({
+            chart: {
+                type: 'donut'
+            },
+            legend: {
+                show: false
+            },
+            tooltip: {
+                enabled: false
+            }
+        }, options)"
+        :series="series"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { ApexOptions } from 'apexcharts';
+    import { merge } from 'lodash-es';
+    import Chart from './FluxStatisticsChart.vue';
+
+    const {
+        options = {}
+    } = defineProps<{
+        readonly aspectRatio?: number;
+        readonly options?: ApexOptions;
+        readonly series: ApexOptions['series'];
+    }>();
+</script>

package/src/component/FluxStatisticsGrid.vue

@@ -0,0 +1,31 @@
+<template>
+    <div
+        :class="$style.statisticsGrid"
+        :style="{
+            '--gap': gap && `${gap}px`,
+            '--xs': xs ?? 1,
+            '--sm': sm ?? xs ?? 1,
+            '--md': md ?? sm ?? xs ?? 2,
+            '--lg': lg ?? md ?? sm ?? xs ?? 3,
+            '--xl': xl ?? lg ?? md ?? sm ?? xs ?? 4
+        }">
+        <div :class="$style.statisticsGridContent">
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$fluxStatistics/css/Grid.module.scss';
+
+    defineProps<{
+        readonly gap?: number;
+        readonly xs?: number;
+        readonly sm?: number;
+        readonly md?: number;
+        readonly lg?: number;
+        readonly xl?: number;
+    }>();
+</script>

package/src/component/FluxStatisticsKpi.vue

@@ -0,0 +1,43 @@
+<template>
+    <Base
+        is-small
+        :icon="icon"
+        :title="title">
+        <div :class="$style.statisticsKpiValue">
+            {{ value }}
+        </div>
+
+        <div
+            v-if="change || footer"
+            :class="$style.statisticsKpiBottom">
+            <Change
+                v-if="change"
+                :color="change.color"
+                :icon="change.icon"
+                :value="change.value"/>
+
+            <span
+                v-if="footer"
+                :class="$style.statisticsKpiFooter">
+                {{ footer }}
+            </span>
+        </div>
+    </Base>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName, FluxStatisticsChange } from '@flux-ui/types';
+    import Base from './FluxStatisticsBase.vue';
+    import Change from './FluxStatisticsChange.vue';
+    import $style from '$fluxStatistics/css/Kpi.module.scss';
+
+    defineProps<{
+        readonly footer?: string;
+        readonly change?: FluxStatisticsChange;
+        readonly icon?: FluxIconName;
+        readonly title: string;
+        readonly value: string | number;
+    }>();
+</script>