@flux-ui/statistics 3.0.0-next.28

package/src/component/FluxStatisticsLegend.vue

@@ -0,0 +1,11 @@
+<template>
+    <div :class="$style.statisticsLegend">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$fluxStatistics/css/Legend.module.scss';
+</script>

package/src/component/FluxStatisticsLegendItem.vue

@@ -0,0 +1,59 @@
+<template>
+    <div
+        :class="$style.statisticsLegendItem"
+        :style="{
+            '--color': colorValue
+        }">
+        <FluxIcon
+            v-if="icon"
+            :class="$style.statisticsLegendItemIcon"
+            :name="icon"
+            :size="16"/>
+
+        <div
+            v-else
+            :class="$style.statisticsLegendItemColor"/>
+
+        <span
+            v-if="label"
+            :class="$style.statisticsLegendItemLabel">
+            {{ label }}
+        </span>
+
+        <span
+            v-if="value"
+            :class="$style.statisticsLegendItemValue">
+            {{ value }}
+        </span>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { FluxIcon } from '@flux-ui/components';
+    import type { FluxColor, FluxIconName } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import $style from '$fluxStatistics/css/Legend.module.scss';
+
+    const {
+        color
+    } = defineProps<{
+        readonly color?: FluxColor | `#${string}`;
+        readonly icon?: FluxIconName;
+        readonly label: string;
+        readonly value?: string | number;
+    }>();
+
+    const colorValue = computed(() => {
+        if (!color) {
+            return;
+        }
+
+        if (['gray', 'primary', 'danger', 'info', 'success', 'warning'].includes(color)) {
+            return `var(--${color}-600)`;
+        }
+
+        return color;
+    });
+</script>

package/src/component/FluxStatisticsLineChart.vue

@@ -0,0 +1,59 @@
+<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"/>
+</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/FluxStatisticsMeter.vue

@@ -0,0 +1,83 @@
+<template>
+    <div
+        :class="isSmall ? $style.statisticsMeterSmall : $style.statisticsMeter"
+        :style="{
+            '--color': colorValue,
+            '--percentage': `${value * 100}%`
+        }">
+        <div :class="$style.statisticsMeterHeader">
+            <FluxIcon
+                v-if="icon"
+                :class="$style.statisticsMeterHeaderIcon"
+                :name="icon"
+                :size="16"/>
+
+            <span
+                v-if="title"
+                :class="$style.statisticsMeterHeaderTitle">
+                {{ title }}
+            </span>
+
+            <span
+                v-if="subTitle"
+                :class="$style.statisticsMeterHeaderSubTitle">
+                {{ subTitle }}
+            </span>
+
+            <span :class="$style.statisticsMeterHeaderValue">
+                {{ formatPercentage(value) }}
+            </span>
+
+            <span
+                v-if="tip"
+                :class="$style.statisticsMeterHeaderTip">
+                {{ tip }}
+            </span>
+        </div>
+
+        <div :class="$style.statisticsMeterBar">
+            <div :class="$style.statisticsMeterBarValue"/>
+        </div>
+
+        <div
+            v-if="footer"
+            :class="$style.statisticsMeterFooter">
+            {{ footer }}
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { formatPercentage } from '@basmilius/utils';
+    import { FluxIcon } from '@flux-ui/components';
+    import type { FluxColor, FluxIconName } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import $style from '$fluxStatistics/css/Meter.module.scss';
+
+    const {
+        color
+    } = defineProps<{
+        readonly color?: FluxColor | `#${string}`;
+        readonly icon?: FluxIconName;
+        readonly isSmall?: boolean;
+        readonly footer?: string;
+        readonly subTitle?: string;
+        readonly tip?: string;
+        readonly title?: string;
+        readonly value: number;
+    }>();
+
+    const colorValue = computed(() => {
+        if (!color) {
+            return;
+        }
+
+        if (['gray', 'primary', 'danger', 'info', 'success', 'warning'].includes(color)) {
+            return `var(--${color}-600)`
+        }
+
+        return color;
+    });
+</script>

package/src/component/FluxStatisticsMetric.vue

@@ -0,0 +1,59 @@
+<template>
+    <Base
+        :icon="icon"
+        :title="title">
+        <div :class="$style.statisticsMetricLabel">
+            {{ label }}
+        </div>
+
+        <div
+            v-if="value"
+            :class="$style.statisticsMetricValue">
+            {{ value }}
+        </div>
+
+        <div
+            v-if="slots.default"
+            :class="$style.statisticsMetricContent">
+            <slot/>
+        </div>
+
+        <div
+            v-if="change || footer"
+            :class="$style.statisticsMetricBottom">
+            <Change
+                v-if="change"
+                :color="change.color"
+                :icon="change.icon"
+                :value="change.value"/>
+
+            <span
+                v-if="footer"
+                :class="$style.statisticsMetricFooter">
+                {{ 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/Metric.module.scss';
+
+    defineProps<{
+        readonly footer?: string;
+        readonly change?: FluxStatisticsChange;
+        readonly icon?: FluxIconName;
+        readonly label?: string;
+        readonly title: string;
+        readonly value?: string | number;
+    }>();
+
+    const slots = defineSlots<{
+        default?(): any;
+    }>();
+</script>

package/src/component/FluxStatisticsPieChart.vue

@@ -0,0 +1,32 @@
+<template>
+    <Chart
+        :aspectRatio="aspectRatio"
+        :options="merge({
+            chart: {
+                type: 'pie'
+            },
+            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/index.ts

@@ -0,0 +1,17 @@
+export { default as FluxStatisticsAreaChart } from './FluxStatisticsAreaChart.vue';
+export { default as FluxStatisticsBarChart } from './FluxStatisticsBarChart.vue';
+export { default as FluxStatisticsBase } from './FluxStatisticsBase.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 FluxStatisticsDetailsTable } from './FluxStatisticsDetailsTable.vue';
+export { default as FluxStatisticsDetailsTableRow } from './FluxStatisticsDetailsTableRow.vue';
+export { default as FluxStatisticsDonutChart } from './FluxStatisticsDonutChart.vue';
+export { default as FluxStatisticsGrid } from './FluxStatisticsGrid.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 FluxStatisticsPieChart } from './FluxStatisticsPieChart.vue';

package/src/css/Base.module.scss

@@ -0,0 +1,46 @@
+.statisticsBase {
+    display: flex;
+    height: 100%;
+    flex-flow: column;
+}
+
+.statisticsBaseSmall {
+    composes: statisticsBase;
+}
+
+.statisticsBaseContent {
+    position: relative;
+    display: flex;
+    padding: 21px;
+    flex-flow: column;
+}
+
+.statisticsBaseHeader {
+    display: flex;
+    padding: 21px 21px 0;
+    align-items: flex-start;
+}
+
+.statisticsBaseHeaderTitle {
+    color: var(--foreground-prominent);
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 24px;
+    word-break: break-word;
+}
+
+.statisticsBaseHeaderIcon {
+    margin-left: auto;
+    color: var(--primary-600);
+    font-size: 20px;
+}
+
+.statisticsBaseSmall .statisticsBaseHeaderTitle {
+    color: var(--foreground);
+    font-size: 14px;
+    line-height: 18px;
+}
+
+.statisticsBaseSmall .statisticsBaseHeaderIcon {
+    font-size: 18px;
+}

package/src/css/Change.module.scss

@@ -0,0 +1,42 @@
+.statisticsChange {
+    display: inline-flex;
+    align-items: baseline;
+    flex-flow: row nowrap;
+    gap: 6px;
+
+    &.isGray {
+        --color: var(--foreground-prominent);
+    }
+
+    &.isPrimary {
+        --color: var(--primary-600);
+    }
+
+    &.isDanger {
+        --color: var(--danger-600);
+    }
+
+    &.isInfo {
+        --color: var(--info-600);
+    }
+
+    &.isSuccess {
+        --color: var(--success-600);
+    }
+
+    &.isWarning {
+        --color: var(--warning-600);
+    }
+}
+
+.statisticsChangeIcon {
+    color: var(--color);
+    font-size: 12px;
+    translate: 0 1px;
+}
+
+.statisticsChangeValue {
+    color: var(--color);
+    font-size: 12px;
+    font-weight: 500;
+}

package/src/css/Chart.module.scss

@@ -0,0 +1,93 @@
+:root {
+    --chart-primary: var(--primary-700);
+    --chart-positive: var(--success-500);
+    --chart-negative: var(--danger-500);
+    --chart-1: var(--chart-primary);
+    --chart-2: var(--primary-500);
+    --chart-3: var(--primary-300);
+    --chart-4: var(--primary-100);
+    --chart-secondary-1: var(--gray-300);
+    --chart-secondary-2: var(--gray-200);
+}
+
+:local(.pane):has(.statisticsChart) {
+    display: flex;
+    min-width: 0;
+    flex-flow: column;
+}
+
+.statisticsChart {
+    position: absolute;
+    display: block;
+    inset: 0;
+    //inset: -3px -2px -4px -2px;
+    height: unset;
+    width: unset;
+
+    :global(svg) {
+        overflow: hidden;
+    }
+
+    --stroke: rgb(from var(--surface-stroke) r g b / .5);
+
+    :global(.apexcharts-canvas) {
+        :global(.apexcharts-grid-borders) {
+            display: none;
+        }
+
+        :global(.apexcharts-yaxis-texts-g) {
+            display: none;
+        }
+
+        :global(.apexcharts-tooltip) {
+            background: rgb(from var(--gray-25) r g b / .85);
+            background-clip: padding-box;
+            backdrop-filter: blur(6px) saturate(180%);
+            border: 1px solid var(--surface-stroke-out-hover);
+            border-radius: var(--radius-double);
+            box-shadow: var(--shadow-lg);
+            color: var(--foreground);
+            contain: paint;
+        }
+    }
+}
+
+.statisticsChartElement {
+    position: absolute;
+    display: block;
+    inset: 0;
+}
+
+.statisticsChartTooltipTitle {
+    padding: 18px 18px 0;
+    color: var(--foreground-prominent);
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.statisticsChartTooltipBody {
+    display: grid;
+    padding: 12px 18px 15px;
+    align-items: center;
+    gap: 6px 15px;
+    grid-template-columns: repeat(3, auto);
+}
+
+.statisticsChartTooltipSeriesColor {
+    height: 12px;
+    width: 12px;
+    background: var(--danger-600);
+    border-radius: 6px;
+}
+
+.statisticsChartTooltipSeriesName {
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.statisticsChartTooltipSeriesValue {
+    font-size: 14px;
+    font-weight: 500;
+    text-align: right;
+}

package/src/css/ChartPane.module.scss

@@ -0,0 +1,38 @@
+@use '$flux/css/mixin';
+
+.statisticsChartPane {
+    --aspect-ratio: unset;
+
+    max-width: 100%;
+    aspect-ratio: var(--aspect-ratio);
+}
+
+.statisticsChartPaneBody {
+    display: grid;
+    flex-grow: 1;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+
+    &:has(.statisticsLegend) {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+.statisticsChartPaneContainer {
+    position: relative;
+    display: block;
+
+    &:first-child :global(svg) {
+        border-top-left-radius: var(--radius);
+        border-top-right-radius: var(--radius);
+    }
+
+    &:last-child :global(svg) {
+        border-bottom-left-radius: var(--radius);
+        border-bottom-right-radius: var(--radius);
+    }
+}
+
+:local(.paneHeader) + .statisticsChartPaneContainer {
+    margin-top: 21px;
+}

package/src/css/Core.module.scss

@@ -0,0 +1,3 @@
+:local(.statisticsBaseContent) .statisticsStackable + .statisticsStackable {
+    margin-top: 21px;
+}

package/src/css/DetailsTable.module.scss

@@ -0,0 +1,43 @@
+@use '$flux/css/mixin';
+
+.detailsTable {
+    composes: statisticsStackable from './Core.module.scss';
+
+    display: flex;
+    flex-flow: column;
+    gap: 6px;
+}
+
+.detailsTableRow {
+    display: flex;
+    margin: -3px -6px;
+    padding: 3px 6px;
+    color: var(--foreground-secondary);
+    font-size: 14px;
+    line-height: 24px;
+    border-radius: var(--radius-half);
+
+    @include mixin.hover {
+        background: var(--gray-50);
+    }
+}
+
+.detailsTableRowLabel {
+    flex-grow: 1;
+    font-weight: 500;
+}
+
+.detailsTableRowValue {
+    text-align: right;
+}
+
+.detailsTableRows {
+    display: flex;
+    flex-flow: column;
+    gap: 3px;
+}
+
+.detailsTableTitle {
+    font-size: 15px;
+    font-weight: 600;
+}

package/src/css/Grid.module.scss

@@ -0,0 +1,26 @@
+@use '$flux/css/mixin';
+
+.statisticsGrid {
+    --columns: 1;
+    --gap: 21px;
+
+    position: relative;
+    container: grid / inline-size;
+}
+
+.statisticsGridContent {
+    display: grid;
+    gap: var(--gap);
+    grid-template-columns: repeat(var(--columns), 1fr);
+}
+
+$-breakpoints: xl, lg, md, sm, xs;
+//$-breakpoints: xs, sm, md, lg, xl;
+
+@each $-breakpoint in $-breakpoints {
+    @include mixin.container-breakpoint-down(grid, $-breakpoint) {
+        .statisticsGridContent {
+            --columns: var(--#{$-breakpoint});
+        }
+    }
+}

package/src/css/Kpi.module.scss

@@ -0,0 +1,21 @@
+.statisticsKpiBottom {
+    margin-top: 3px;
+    line-height: 18px;
+
+    :local(.statisticsChange) {
+        margin-right: .3em;
+    }
+}
+
+.statisticsKpiFooter {
+    color: var(--foreground-secondary);
+    font-size: 14px;
+}
+
+.statisticsKpiValue {
+    padding-top: 21px;
+    color: var(--foreground-prominent);
+    font-size: 21px;
+    font-weight: 800;
+    line-height: 36px;
+}

package/src/css/Legend.module.scss

@@ -0,0 +1,53 @@
+@use '$flux/css/mixin';
+
+.statisticsLegend {
+    display: flex;
+    min-width: 0;
+    padding: 15px 21px 15px;
+    align-self: center;
+    flex-flow: column;
+    flex-grow: 1;
+    gap: 3px;
+}
+
+.statisticsLegendItem {
+    --color: var(--primary-600);
+
+    display: flex;
+    padding: 6px 0;
+    align-items: flex-start;
+    flex-flow: row nowrap;
+    gap: 9px;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: nowrap;
+}
+
+.statisticsLegendItemColor {
+    height: 12px;
+    width: 12px;
+    margin: 4px;
+    flex-shrink: 0;
+    background: var(--color);
+    border-radius: calc(var(--radius-half) / 2);
+}
+
+.statisticsLegendItemIcon {
+    margin: 2px;
+    color: var(--color);
+}
+
+.statisticsLegendItemLabel {
+    flex-grow: 1;
+    color: var(--foreground);
+    font-weight: 600;
+}
+
+.statisticsLegendItemValue {
+    margin-left: 15px;
+    text-align: right;
+}
+
+.statisticsLegendItem + .statisticsLegendItem {
+    border-top: 1px dashed var(--surface-stroke);
+}