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

package/src/css/Base.module.scss

@@ -18,6 +18,7 @@
 .statisticsBaseHeader {
     display: flex;
     padding: 18px 18px 0;
+    gap: 9px;
     align-items: flex-start;
 }
 
@@ -29,10 +30,31 @@
     word-break: break-word;
 }
 
+.statisticsBaseHeaderIcon,
+.statisticsBaseHeaderInfo {
+    font-size: 20px;
+    line-height: 24px;
+}
+
+.statisticsBaseHeaderInfo {
+    margin-left: auto;
+    color: var(--foreground-secondary);
+    cursor: help;
+    scale: .75;
+    transition: color .2s var(--swift-out);
+
+    &:hover {
+        color: var(--foreground-prominent);
+    }
+}
+
+.statisticsBaseHeaderInfo + .statisticsBaseHeaderIcon {
+    margin-left: 6px;
+}
+
 .statisticsBaseHeaderIcon {
     margin-left: auto;
     color: var(--primary-600);
-    font-size: 20px;
 }
 
 .statisticsBaseSmall .statisticsBaseHeaderTitle {
@@ -41,6 +63,11 @@
     line-height: 18px;
 }
 
+.statisticsBaseSmall .statisticsBaseHeaderInfo {
+    font-size: 14px;
+    line-height: 18px;
+}
+
 .statisticsBaseSmall .statisticsBaseHeaderIcon {
     font-size: 18px;
 }

package/src/css/Chart.module.scss

@@ -20,42 +20,20 @@
     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(--surface) r g b / .975);
-            background-clip: padding-box;
-            backdrop-filter: blur(3px) 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;
+.statisticsChartTooltip {
+    background: rgb(from var(--surface) r g b / .975);
+    background-clip: padding-box;
+    backdrop-filter: blur(3px) saturate(180%);
+    border: 1px solid var(--surface-stroke-out-hover);
+    border-radius: var(--radius-double);
+    box-shadow: var(--shadow-lg);
+    color: var(--foreground);
 }
 
 .statisticsChartTooltipTitle {
@@ -81,13 +59,64 @@
     border-radius: 6px;
 }
 
+.statisticsChartTooltipSeriesIcon {
+    display: flex;
+    height: 14px;
+    width: 14px;
+    color: var(--danger-600);
+    align-items: center;
+    justify-content: center;
+
+    & > svg {
+        height: 100%;
+        width: 100%;
+    }
+}
+
 .statisticsChartTooltipSeriesName {
+    color: var(--foreground-secondary);
     font-size: 14px;
     font-weight: 700;
+    transition: color .15s ease-out;
 }
 
 .statisticsChartTooltipSeriesValue {
+    color: var(--foreground-secondary);
     font-size: 14px;
     font-weight: 500;
     text-align: right;
+    transition: color .15s ease-out;
+}
+
+.statisticsChartTooltipSeriesName.isActive,
+.statisticsChartTooltipSeriesValue.isActive {
+    color: var(--foreground-prominent);
+}
+
+.statisticsChartTooltipSection {
+    padding: 12px 18px;
+    transition: opacity .15s ease-out;
+
+    & + & {
+        border-top: 1px solid var(--surface-stroke);
+    }
+}
+
+.statisticsChartTooltipSection.isDimmed {
+    opacity: .55;
+}
+
+.statisticsChartTooltipSectionTitle {
+    color: var(--foreground-prominent);
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: 9px;
+}
+
+.statisticsChartTooltipSectionBody {
+    display: grid;
+    align-items: center;
+    gap: 6px 15px;
+    grid-template-columns: repeat(3, auto);
 }

package/src/css/ChartPane.module.scss

@@ -3,34 +3,42 @@
 .statisticsChartPane {
     --aspect-ratio: unset;
 
+    container: chart-pane / inline-size;
     max-width: 100%;
-    aspect-ratio: var(--aspect-ratio);
+    contain: paint;
 }
 
 .statisticsChartPaneBody {
     display: grid;
+    align-content: start;
     flex-grow: 1;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
 
+    .statisticsChartPaneContainer {
+        height: calc(100cqw / var(--aspect-ratio, 1));
+    }
+
     &:has(.statisticsLegend) {
-        grid-template-columns: 1fr 1fr;
+        align-items: center;
+        grid-template-columns: .4fr .6fr;
+
+        @container chart-pane (max-width: 390px) {
+            align-items: stretch;
+            grid-template-columns: 1fr;
+            grid-template-rows: auto auto;
+        }
+
+        .statisticsChartPaneContainer {
+            height: calc(40cqw / var(--aspect-ratio, 1));
+        }
     }
 }
 
 .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);
-    }
+    align-self: center;
 }
 
 :local(.paneHeader) + .statisticsChartPaneContainer {

package/src/css/Comparison.module.scss

@@ -0,0 +1,52 @@
+.statisticsComparison {
+    display: grid;
+    margin-top: 18px;
+    gap: 12px;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+}
+
+.statisticsComparisonDivider {
+    width: 1px;
+    height: 36px;
+    background: var(--stroke);
+}
+
+.statisticsComparisonItem {
+    display: flex;
+    flex-flow: column;
+    gap: 3px;
+}
+
+.statisticsComparisonItemLabel {
+    color: var(--foreground-secondary);
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.statisticsComparisonItemValue {
+    color: var(--foreground-prominent);
+    font-size: 21px;
+    font-weight: 800;
+    line-height: 28px;
+}
+
+.statisticsComparisonItemValueMuted {
+    color: var(--foreground-secondary);
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px;
+}
+
+.statisticsComparisonBottom {
+    display: flex;
+    margin-top: 9px;
+    align-items: center;
+    gap: 9px;
+    line-height: 18px;
+}
+
+.statisticsComparisonFooter {
+    color: var(--foreground-secondary);
+    font-size: 14px;
+}

package/src/css/Empty.module.scss

@@ -0,0 +1,39 @@
+.statisticsEmpty {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: 24px 18px;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 9px;
+}
+
+.statisticsEmptyIcon {
+    color: var(--foreground-secondary);
+    font-size: 32px;
+    opacity: 0.5;
+}
+
+.statisticsEmptyTitle {
+    color: var(--foreground-prominent);
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+}
+
+.statisticsEmptyDescription {
+    max-width: 320px;
+    color: var(--foreground-secondary);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+}
+
+.statisticsEmptyActions {
+    display: flex;
+    margin-top: 9px;
+    align-items: center;
+    gap: 9px;
+}

package/src/css/Grid.module.scss

@@ -10,6 +10,7 @@
 
 .statisticsGridContent {
     display: grid;
+    align-items: start;
     gap: var(--gap);
     grid-template-columns: repeat(var(--columns), 1fr);
 }

package/src/css/Legend.module.scss

@@ -3,23 +3,36 @@
 .statisticsLegend {
     display: flex;
     min-width: 0;
-    padding: 15px 18px 15px;
-    align-self: center;
+    padding: 0 9px;
     flex-flow: column;
     flex-grow: 1;
+    gap: 3px;
+    user-select: none;
+}
+
+:local(.statisticsChartPaneBody) .statisticsLegend {
+    padding: 9px 36px 9px 18px;
 }
 
 .statisticsLegendItem {
     --color: var(--primary-600);
 
+    position: relative;
     display: flex;
-    padding: 6px 0;
+    padding: 6px;
+    margin: 0 -9px;
     align-items: flex-start;
     flex-flow: row nowrap;
     gap: 9px;
     font-size: 14px;
     line-height: 20px;
     white-space: nowrap;
+    border-radius: var(--radius-half);
+    transition: background 120ms var(--swift-out);
+}
+
+.statisticsLegendItem.isHovered {
+    background: var(--surface-active);
 }
 
 .statisticsLegendItemColor {
@@ -47,6 +60,11 @@
     text-align: right;
 }
 
-.statisticsLegendItem + .statisticsLegendItem {
+.statisticsLegendItem + .statisticsLegendItem::before {
+    position: absolute;
+    top: -2px;
+    left: 0;
+    right: 0;
+    content: '';
     border-top: 1px dashed var(--surface-stroke);
 }

package/src/css/Meter.module.scss

@@ -19,6 +19,7 @@
     height: 6px;
     background: var(--gray-100);
     border-radius: var(--radius);
+    contain: paint;
 }
 
 .statisticsMeterBarValue {

package/src/css/Metric.module.scss

@@ -39,6 +39,12 @@
     :global(small):not(:first-child) {
         margin-top: 15px;
     }
+
+    :global([data-sparkline]) {
+        margin-inline: -18px;
+        width: calc(100% + 36px);
+        max-width: none;
+    }
 }
 
 .statisticsMetricFooter {

package/src/css/PercentageBar.module.scss

@@ -0,0 +1,36 @@
+.statisticsPercentageBar {
+    display: flex;
+    flex-flow: column;
+    gap: 12px;
+}
+
+.statisticsPercentageBarTrack {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 3px;
+}
+
+.statisticsPercentageBarSegment {
+    height: 12px;
+    border-radius: calc(var(--radius) / 3);
+    transition: var(--transition-default);
+    transition-property: height, margin, flex-grow, opacity;
+}
+
+.statisticsPercentageBarSegment:hover,
+.statisticsPercentageBarSegment.isHovered {
+    height: 16px;
+    margin-top: -2px;
+    margin-bottom: -2px;
+}
+
+.statisticsPercentageBarTrack.isHoverActive .statisticsPercentageBarSegment:not(.isHovered):not(:hover) {
+    opacity: 0.5;
+}
+
+.statisticsPercentageBarTooltip {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    gap: 9px;
+}

package/src/css/Sparkline.module.scss

@@ -0,0 +1,13 @@
+.statisticsSparkline {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 40px;
+    min-width: 60px;
+}
+
+.statisticsSparklineChart {
+    position: absolute;
+    display: block;
+    inset: 0;
+}

package/src/echarts.ts

@@ -0,0 +1,47 @@
+import {
+    BarChart,
+    BoxplotChart,
+    CandlestickChart,
+    GaugeChart,
+    HeatmapChart,
+    LineChart,
+    PieChart,
+    RadarChart,
+    ScatterChart,
+    TreemapChart
+} from 'echarts/charts';
+import {
+    AxisPointerComponent,
+    GridComponent,
+    LegendComponent,
+    RadarComponent,
+    TitleComponent,
+    TooltipComponent,
+    VisualMapComponent
+} from 'echarts/components';
+import { use } from 'echarts/core';
+import { LabelLayout, LegacyGridContainLabel } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+use([
+    BarChart,
+    BoxplotChart,
+    CandlestickChart,
+    GaugeChart,
+    HeatmapChart,
+    LineChart,
+    PieChart,
+    RadarChart,
+    ScatterChart,
+    TreemapChart,
+    AxisPointerComponent,
+    GridComponent,
+    LegendComponent,
+    RadarComponent,
+    TitleComponent,
+    TooltipComponent,
+    VisualMapComponent,
+    LabelLayout,
+    LegacyGridContainLabel,
+    CanvasRenderer
+]);

package/src/index.ts

@@ -1,15 +1,19 @@
 import { amber500, blue500, cyan500, emerald500, fuchsia500, green500, indigo500, lime500, orange500, pink500, purple500, red500, rose50, sky500, teal500, violet500, yellow500 } from '@flux-ui/internals';
+import type { FluxStatisticsChartColor } from '@flux-ui/types';
 
 export * from './component';
+export * from './composable';
 
-export const CHART_COLORS = [
+export type { ChartTooltipValueFormatter, SharedTooltipItem, Translator } from './util';
+
+export const CHART_COLORS: readonly FluxStatisticsChartColor[] = [
     'var(--chart-1)',
     'var(--chart-2)',
     'var(--chart-3)',
     'var(--chart-4)'
 ];
 
-export const CHART_COLORFUL_COLORS = [
+export const CHART_COLORFUL_COLORS: readonly FluxStatisticsChartColor[] = [
     red500,
     orange500,
     amber500,
@@ -27,4 +31,4 @@ export const CHART_COLORFUL_COLORS = [
     fuchsia500,
     pink500,
     rose50
-];
+] as FluxStatisticsChartColor[];

package/src/util/colors.ts

@@ -0,0 +1,86 @@
+import { ref } from 'vue';
+
+const CSS_VAR_PATTERN = /var\((--[^,)]+)(?:,\s*([^)]+))?\)/g;
+
+const themeVersion = ref(0);
+
+if (typeof document !== 'undefined') {
+    new MutationObserver(() => themeVersion.value++).observe(
+        document.documentElement,
+        { attributes: true, attributeFilter: ['class', 'data-theme'] }
+    );
+}
+
+export function useCssVarVersion() {
+    return themeVersion;
+}
+
+export function resolveCssVar(input: string, root?: HTMLElement): string {
+    if (typeof document === 'undefined' || !input.includes('var(')) {
+        return input;
+    }
+
+    const target = root ?? document.documentElement;
+
+    return input.replace(CSS_VAR_PATTERN, (match, name: string, fallback?: string) => {
+        const value = getComputedStyle(target).getPropertyValue(name).trim();
+
+        if (value) {
+            return value;
+        }
+
+        return fallback ? resolveCssVar(fallback.trim(), target) : match;
+    });
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+    if (value === null || typeof value !== 'object') {
+        return false;
+    }
+
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+}
+
+export function deepResolveCssVars<T>(value: T, root?: HTMLElement): T {
+    if (typeof value === 'string') {
+        return (value.includes('var(') ? resolveCssVar(value, root) : value) as T;
+    }
+
+    if (Array.isArray(value)) {
+        let changed = false;
+        const out: unknown[] = new Array(value.length);
+
+        for (let i = 0; i < value.length; i++) {
+            const resolved = deepResolveCssVars(value[i], root);
+
+            if (resolved !== value[i]) {
+                changed = true;
+            }
+
+            out[i] = resolved;
+        }
+
+        return (changed ? out : value) as T;
+    }
+
+    if (!isPlainObject(value)) {
+        return value;
+    }
+
+    let changed = false;
+    const out: Record<string, unknown> = {};
+
+    for (const key of Object.keys(value)) {
+        const original = value[key];
+        const resolved = deepResolveCssVars(original, root);
+
+        if (resolved !== original) {
+            changed = true;
+        }
+
+        out[key] = resolved;
+    }
+
+    return (changed ? out : value) as T;
+}

package/src/util/icons.ts

@@ -0,0 +1,20 @@
+import { iconRegistry } from '@flux-ui/components';
+import type { FluxIconName } from '@flux-ui/types';
+
+export function renderIconSvg(name: FluxIconName | undefined, color: string, size: number = 14): string {
+    if (!name) {
+        return '';
+    }
+
+    const icon = iconRegistry[name];
+
+    if (!icon) {
+        return '';
+    }
+
+    const [width, height, , , pathData] = icon;
+    const paths = Array.isArray(pathData) ? pathData : [pathData];
+    const pathElements = paths.map(d => `<path d="${d}" fill="${color}"/>`).join('');
+
+    return `<svg viewBox="0 0 ${width} ${height}" width="${size}" height="${size}" focusable="false" aria-hidden="true">${pathElements}</svg>`;
+}

package/src/util/index.ts

@@ -0,0 +1,6 @@
+export * from './colors';
+export * from './icons';
+export * from './options';
+export * from './series';
+export * from './sparkline';
+export * from './tooltips';

package/src/util/options/buildBaseOptions.ts

@@ -0,0 +1,31 @@
+import type { EChartsOption } from '~flux/statistics/composable';
+
+export function buildBaseOptions(): EChartsOption {
+    return {
+        color: [
+            'var(--chart-1)',
+            'var(--chart-2)',
+            'var(--chart-3)',
+            'var(--chart-4)'
+        ],
+        animation: true,
+        animationDuration: 1000,
+        animationDurationUpdate: 400,
+        animationEasing: 'cubicOut',
+        animationEasingUpdate: 'cubicInOut',
+        tooltip: {
+            show: false,
+            backgroundColor: 'transparent',
+            borderWidth: 0,
+            padding: 0,
+            extraCssText: 'box-shadow: none;',
+            axisPointer: {
+                appendTo: 'body',
+                snap: true
+            }
+        },
+        legend: {
+            show: false
+        }
+    };
+}