Stats

await import('/components/data-display/stats.js');
const { tags, $ } = Lightview;
const { Stats } = tags;

const stats = Stats({ style: 'box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);' },
    Stats.Stat({},
        Stats.Title({}, 'Total Users'),
        Stats.Value({}, '89,400'),
        Stats.Desc({}, '↗︎ 21% from last month')
    ),
    Stats.Stat({},
        Stats.Title({}, 'Page Views'),
        Stats.Value({ style: 'color: oklch(var(--p));' }, '2.6M'),
        Stats.Desc({}, '↗︎ 14% from last month')
    ),
    Stats.Stat({},
        Stats.Title({}, 'Conversion'),
        Stats.Value({ style: 'color: oklch(var(--s));' }, '4.2%'),
        Stats.Desc({}, '↘︎ 2% from last month')
    )
);

$('#example').content(stats);

await import('/components/data-display/stats.js');
const { $, tags } = Lightview;
const { Stats } = tags;

const stats = {
    tag: Stats,
    attributes: { style: 'box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);' },
    children: [
        {
            tag: Stats.Stat,
            children: [
                { tag: Stats.Title, children: ['Total Users'] },
                { tag: Stats.Value, children: ['89,400'] },
                { tag: Stats.Desc, children: ['↗︎ 21% from last month'] }
            ]
        },
        {
            tag: Stats.Stat,
            children: [
                { tag: Stats.Title, children: ['Page Views'] },
                { tag: Stats.Value, attributes: { style: 'color: oklch(var(--p));' }, children: ['2.6M'] },
                { tag: Stats.Desc, children: ['↗︎ 14% from last month'] }
            ]
        },
        {
            tag: Stats.Stat,
            children: [
                { tag: Stats.Title, children: ['Conversion'] },
                { tag: Stats.Value, attributes: { style: 'color: oklch(var(--s));' }, children: ['4.2%'] },
                { tag: Stats.Desc, children: ['↘︎ 2% from last month'] }
            ]
        }
    ]
};

$('#example').content(stats);

await import('/components/data-display/stats.js');
const { $ } = Lightview;

const stats = {
    Stats: {
        style: 'box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);',
        children: [
            {
                'Stats.Stat': {
                    children: [
                        { 'Stats.Title': { children: ['Total Users'] } },
                        { 'Stats.Value': { children: ['89,400'] } },
                        { 'Stats.Desc': { children: ['↗︎ 21% from last month'] } }
                    ]
                }
            },
            {
                'Stats.Stat': {
                    children: [
                        { 'Stats.Title': { children: ['Page Views'] } },
                        { 'Stats.Value': { style: 'color: oklch(var(--p));', children: ['2.6M'] } },
                        { 'Stats.Desc': { children: ['↗︎ 14% from last month'] } }
                    ]
                }
            },
            {
                'Stats.Stat': {
                    children: [
                        { 'Stats.Title': { children: ['Conversion'] } },
                        { 'Stats.Value': { style: 'color: oklch(var(--s));', children: ['4.2%'] } },
                        { 'Stats.Desc': { children: ['↘︎ 2% from last month'] } }
                    ]
                }
            }
        ]
    }
};

$('#example').content(stats);

await import('/components/data-display/stats.js');
const { signal, tags, $ } = Lightview;
const { Stats } = tags;

const visitors = signal(1234);
const sessions = signal(567);

// Simulate live updates
setInterval(() => {
    visitors.value += Math.floor(Math.random() * 10);
    sessions.value += Math.floor(Math.random() * 3);
}, 2000);

const stats = Stats({ style: 'box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);' },
    Stats.Stat({},
        Stats.Title({}, '🟢 Live Visitors'),
        Stats.Value({ style: 'color: oklch(var(--su));' }, () => visitors.value.toLocaleString()),
        Stats.Desc({}, 'Currently online')
    ),
    Stats.Stat({},
        Stats.Title({}, '📊 Active Sessions'),
        Stats.Value({}, () => sessions.value.toLocaleString()),
        Stats.Desc({}, 'Last 5 minutes')
    )
);

$('#example').content(stats);

await import('/components/data-display/stats.js');
const { signal, $, tags } = Lightview;
const { Stats } = tags;

const visitors = signal(1234);
const sessions = signal(567);

// Simulate live updates
setInterval(() => {
    visitors.value += Math.floor(Math.random() * 10);
    sessions.value += Math.floor(Math.random() * 3);
}, 2000);

const stats = {
    tag: Stats,
    attributes: { style: 'box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);' },
    children: [
        {
            tag: Stats.Stat,
            children: [
                { tag: Stats.Title, children: ['🟢 Live Visitors'] },
                { tag: Stats.Value, attributes: { style: 'color: oklch(var(--su));' }, children: [() => visitors.value.toLocaleString()] },
                { tag: Stats.Desc, children: ['Currently online'] }
            ]
        },
        {
            tag: Stats.Stat,
            children: [
                { tag: Stats.Title, children: ['📊 Active Sessions'] },
                { tag: Stats.Value, children: [() => sessions.value.toLocaleString()] },
                { tag: Stats.Desc, children: ['Last 5 minutes'] }
            ]
        }
    ]
};

$('#example').content(stats);

await import('/components/data-display/stats.js');
const { signal, $ } = Lightview;

const visitors = signal(1234);
const sessions = signal(567);

// Simulate live updates
setInterval(() => {
    visitors.value += Math.floor(Math.random() * 10);
    sessions.value += Math.floor(Math.random() * 3);
}, 2000);

const stats = {
    Stats: {
        style: 'box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);',
        children: [
            {
                'Stats.Stat': {
                    children: [
                        { 'Stats.Title': { children: ['🟢 Live Visitors'] } },
                        { 'Stats.Value': { style: 'color: oklch(var(--su));', children: [() => visitors.value.toLocaleString()] } },
                        { 'Stats.Desc': { children: ['Currently online'] } }
                    ]
                }
            },
            {
                'Stats.Stat': {
                    children: [
                        { 'Stats.Title': { children: ['📊 Active Sessions'] } },
                        { 'Stats.Value': { children: [() => sessions.value.toLocaleString()] } },
                        { 'Stats.Desc': { children: ['Last 5 minutes'] } }
                    ]
                }
            }
        ]
    }
};

$('#example').content(stats);