FilterBus Dashboard Demo

<!-- Region Filter publishes to FilterBus -->
<div data-rsl-filter data-filter-key="region">
    <button data-filter-value="All">All</button>
    <button data-filter-value="North">North</button>
    <button data-filter-value="South">South</button>
</div>

<!-- Date Picker publishes date range -->
<input type="text"
       data-rsl-date-picker
       data-mode="range"
       data-filterbus-publish="dateFilter"
       placeholder="Select date range...">

<!-- Time Picker publishes selected time -->
<input type="text"
       data-rsl-time-picker
       data-format="12"
       data-step="15"
       data-show-presets="true"
       data-filterbus-publish="timeFilter"
       data-placeholder="Select time...">

<!-- Smart Table subscribes to all filters -->
<table data-rsl-smart-table
       data-filter-subscribe="region,dateFilter"
       data-filter-map="region:region"
       data-filterbus-date-field="date">
    <thead>
        <tr>
            <th data-col="date" data-type="date">Date</th>
            <th data-col="name">Name</th>
            <th data-col="region">Region</th>
            <th data-col="revenue" data-type="currency">Revenue</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>2025-12-03</td><td>John</td><td>North</td><td>$125,000</td></tr>
    </tbody>
</table>

<!-- KPI Card with visibility + date filtering -->
<div data-rsl-kpi
     data-filter-subscribe="region"
     data-filter-value="North"
     data-filterbus-date-field="date"
     data-aggregate="sum"
     data-label="North Revenue"
     data-value="$0"
     data-prefix="$"
     data-icon="fa-map-marker-alt"
     data-color-scheme="info">
</div>

<script>
// Set data array for date filtering
var revenueData = [
    { date: "2025-12-01", value: 15000 },
    { date: "2025-12-02", value: 18500 },
    { date: "2025-12-03", value: 12300 }
];
var kpiCard = document.querySelector('[data-rsl-kpi]');
kpiCard.setAttribute('data-values', JSON.stringify(revenueData));

// Re-initialize to pick up data
RSL.KPICards.instances.delete(kpiCard);
RSL.KPICards.create(kpiCard);
</script>

<!-- Stat with FilterBus visibility filtering -->
<div class="rsl-stat"
     data-value="847"
     data-label="North Customers"
     data-icon="fa-map-marker-alt"
     data-color-scheme="info"
     data-variant="card"
     data-animate
     data-filter-subscribe="region"
     data-filter-value="North">
</div>

<!-- When FilterBus publishes region="North", this stat shows -->
<!-- When FilterBus publishes region="South", this stat hides -->
<!-- When FilterBus publishes region="all", all stats show -->

<script>
// Publish region filter programmatically
RSL.FilterBus.publish('region', 'North');
</script>

<!-- Chart with visibility + date filtering -->
<div id="revenue-chart"
     data-rsl-chart
     data-filter-subscribe="region"
     data-filter-value="North"
     data-filterbus-date-field="date"
     data-type="line"
     data-title="North Region Trend"
     data-color-scheme="info"
     data-height="250"
     data-curved>
</div>

<script>
// Set time series data for date filtering
var chartData = [
    { date: "2025-12-01", value: 15000 },
    { date: "2025-12-02", value: 18500 },
    { date: "2025-12-03", value: 12300 }
];
var chart = document.getElementById('revenue-chart');
chart.setAttribute('data-time-series-data', JSON.stringify(chartData));

// Re-initialize to pick up data
if (RSL.Charts.destroy) RSL.Charts.destroy(chart);
RSL.Charts.create(chart);
</script>

<!-- Gallery with date filtering enabled -->
<div class="rsl-gallery"
     data-cols="4"
     data-filterbus-date-field="date">

    <!-- Item with visibility + date filtering -->
    <article class="rsl-gallery-item"
             data-filter-subscribe="region"
             data-filter-value="North"
             data-date="2025-12-01">
        <div class="rsl-gallery-image">
            <img src="photo.jpg" alt="North HQ">
        </div>
        <div class="rsl-gallery-overlay">
            <div class="rsl-gallery-info">
                <h3 class="rsl-gallery-title">North HQ</h3>
                <p class="rsl-gallery-meta">Dec 1, 2025</p>
            </div>
        </div>
    </article>

    <!-- More gallery items... -->
</div>

<!-- Container with date filtering enabled -->
<div class="slot-layout"
     data-cols-xs="1"
     data-cols-md="4"
     data-filterbus-date-field="date">

    <!-- Card with visibility + date filtering -->
    <div class="slot-item">
        <div class="card"
             data-filter-subscribe="region"
             data-filter-value="North"
             data-date="2025-12-02">
            <div class="card-header">
                <strong>North HQ</strong>
            </div>
            <div class="card-body">
                <p>Minneapolis, MN</p>
                <p>Dec 2, 2025</p>
                <p>$340,800</p>
            </div>
        </div>
    </div>

    <!-- More cards... -->
</div>

// Create a star rating filter using JSON API V2
RSL.JSONLayout.renderLayout('#filter-container', {
    version: 2,
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "star-rating-filter",
            field: "product_rating",   // FilterBus field name
            max: 5,
            showCounts: true,
            counts: { 5: 12, 4: 28, 3: 15, 2: 8, 1: 3 },
            upAndAbove: true           // Shows "4+ stars" format
        }
    }]
});

// Subscribe to filter changes
RSL.FilterBus.subscribe('my-products', function(state) {
    // state.product_rating is 0 for "All", or 1-5 for star filters
    const minRating = state.product_rating || 0;
    const filtered = products.filter(p =>
        minRating === 0 || p.rating >= minRating
    );
    renderProducts(filtered);
}, { keys: ['product_rating'] });

<!-- Select publishes AND subscribes to FilterBus -->
<div data-rsl-select
     data-rsl-select-placeholder="Select a Region..."
     data-filterbus-publish="region"
     data-filterbus-subscribe="region"
     data-rsl-select-clearable="true">
    <option value="All">All Regions</option>
    <option value="North">North Region</option>
    <option value="South">South Region</option>
    <option value="East">East Region</option>
    <option value="West">West Region</option>
</div>

<!-- Other components subscribe to "region" -->
<div data-rsl-kpi-card
     data-filterbus-subscribe="region"
     data-filter-value="North">
    <!-- This card shows when Select is "North" or "All" -->
</div>

<!-- Tab group with visibility + date filtering -->
<div class="tabs-display"
     data-filter-subscribe="region"
     data-filter-value="North"
     data-date="2025-12-05">

    <div class="slot-layout tabs" data-cols-xs="3">
        <a class="slot-item tab-link" data-tab="overview">Overview</a>
        <a class="slot-item tab-link" data-tab="sales">Sales</a>
        <a class="slot-item tab-link" data-tab="team">Team</a>
    </div>

    <div class="slot-item tab-content" data-tab="overview">
        <p>Overview content...</p>
    </div>
    <div class="slot-item tab-content" data-tab="sales">
        <p>Sales content...</p>
    </div>
    <div class="slot-item tab-content" data-tab="team">
        <p>Team content...</p>
    </div>

</div>

<!-- Regular table (NOT Smart Table) -->
<table class="rsl-table" data-paginate="5">
    <thead>...</thead>
    <tbody>
        <tr data-region="North">...</tr>
        <tr data-region="South">...</tr>
    </tbody>
</table>

<!-- Pagination subscribes to "region" filter changes -->
<!-- Auto-resets to page 1 when any subscribed filter changes -->
<ul class="rsl-pagination" data-filter-subscribe="region">
    <li><a href="javascript:void(0)">Previous</a></li>
    <li class="active"><a href="javascript:void(0)">1</a></li>
    <li><a href="javascript:void(0)">2</a></li>
    <li><a href="javascript:void(0)">3</a></li>
    <li><a href="javascript:void(0)">Next</a></li>
</ul>

<!-- Subscribe to multiple filters -->
<ul class="rsl-pagination" data-filter-subscribe="region,status,dateRange">
    ...
</ul>

<!-- Filter control (publishes to FilterBus on change) -->
<select id="category-filter">
    <option value="">All Categories</option>
    <option value="general">General</option>
    <option value="billing">Billing</option>
    <option value="technical">Technical</option>
</select>

<script>
document.getElementById('category-filter').addEventListener('change', function() {
    RSL.FilterBus.publish('category', this.value);
});
</script>

<!-- Accordion subscribes to "category" filter key -->
<div class="slot-layout classic-accordion"
     data-single-open="true"
     data-filterbus-key="category">

    <!-- Items have data-category attributes matching the filter key -->
    <div class="accordion-item" data-category="general">
        <div id="faq-1" tabindex="0" class="accordion-title" role="button">
            How do I get started?
        </div>
        <div class="accordion-content" aria-labelledby="faq-1">
            <p>Content here...</p>
        </div>
    </div>

    <div class="accordion-item" data-category="billing">
        <div id="faq-2" tabindex="0" class="accordion-title" role="button">
            What payment methods?
        </div>
        <div class="accordion-content" aria-labelledby="faq-2">
            <p>Content here...</p>
        </div>
    </div>
</div>

<!-- Timeline subscribes to FilterBus -->
<ol data-rsl-timeline
    data-timeline-variant="card"
    data-filter-subscribe="timeline-status"
    aria-label="Project Roadmap">

    <li class="rsl-timeline-event" data-status="completed">
        <div class="rsl-timeline-marker"><i class="fas fa-check"></i></div>
        <div class="rsl-timeline-content">
            <time class="rsl-timeline-date">Q1 2025</time>
            <h3 class="rsl-timeline-title">Project Kickoff</h3>
            <div class="rsl-timeline-details">
                <p class="rsl-timeline-description">...</p>
            </div>
        </div>
    </li>

    <li class="rsl-timeline-event" data-status="current">
        <!-- Current event -->
    </li>

    <li class="rsl-timeline-event" data-status="upcoming">
        <!-- Upcoming event -->
    </li>
</ol>

<!-- JavaScript: Publish filter on button click -->
<script>
document.querySelectorAll('.timeline-filter-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const status = this.dataset.status;
        RSL.FilterBus.publish('timeline-status', status);
    });
});
</script>

<!-- Announcements subscribes to FilterBus via data-filter-key -->
<div class="rsl-announcements"
     data-rsl-announcements
     data-auto-rotate="true"
     data-interval="5000"
     data-filter-key="region"
     data-variant="info">

    <!-- Each item has data-category matching the filter values -->
    <div class="rsl-announcement-item" data-category="North" data-priority="high" data-new>
        <strong>North:</strong> Q4 sales exceeded targets!
    </div>
    <div class="rsl-announcement-item" data-category="South" data-priority="normal">
        <strong>South:</strong> Miami office renovation complete.
    </div>
    <div class="rsl-announcement-item" data-category="East" data-priority="high">
        <strong>East:</strong> NYC shareholder meeting Dec 15th.
    </div>
    <div class="rsl-announcement-item" data-category="West" data-priority="normal">
        <strong>West:</strong> Seattle team won innovation award!
    </div>
</div>

<!-- The Region filter (already on page) publishes to FilterBus -->
<div data-rsl-filter data-filter-key="region">
    <button data-filter-value="All">All</button>
    <button data-filter-value="North">North</button>
    <button data-filter-value="South">South</button>
    <button data-filter-value="East">East</button>
    <button data-filter-value="West">West</button>
</div>

<!-- Sticky header that publishes stuck state -->
<header data-rsl-sticky
        data-sticky-position="top"
        data-sticky-offset="0"
        data-filterbus-publish="header-sticky-state">
    Dashboard Header
</header>

<!-- Subscribe to show/hide Back to Top button -->
<script>
    // When header becomes stuck, show the button
    RSL.FilterBus.subscribe('back-to-top-subscriber', function(state) {
        var isStuck = state['header-sticky-state'];
        var button = document.getElementById('back-to-top');
        button.style.display = isStuck ? 'block' : 'none';
    }, { keys: ['header-sticky-state'] });
</script>

<!-- Filter controls (publisher) -->
<div data-rsl-filter data-filter-key="region">
    <button data-filter-value="All">All</button>
    <button data-filter-value="North">North</button>
    <button data-filter-value="South">South</button>
</div>

<!-- Sticky notifications (subscribers) -->
<div data-rsl-sticky
     data-filter-subscribe="region"
     data-filter-value="North">
    North Region: Important announcement...
</div>

<div data-rsl-sticky
     data-filter-subscribe="region"
     data-filter-value="South">
    South Region: Regional update...
</div>

<!-- When "North" is selected, only the North notification shows -->
<!-- When "All" is selected, all notifications show -->