Filters Component Documentation

File: src/pages/private/admin/analytics/partial/filters.svelte

Overview

The Filters component provides a user interface for filtering dashboard data by date range and dashboard selection. It integrates with a form system to manage filter state and emit change events.

Props

export let filterData: {
  startDate: string | null;
  endDate: string | null;  
  dashboard: string | null;  // Selected dashboard value
};

export let dashboards: Array<{
  label: string;            // Display text for the option
  value: string;            // Underlying value for the option
}>;

Events

Event Name	Description	Payload
change	Emitted when any filter value changes	Current filter values object
submit	Emitted when the form is submitted	Current filter values object

UI Structure

<fieldset class="border-green-200 border bg-green-50 rounded-[5px] px-4 py-1.5">
  <legend class="bg-green-100 text-green-500 tracking-wide px-2 text-sm border rounded-[5px]">
    Filters
  </legend>
  
  <Form initialValues={filterData} on:change={handleChange} on:submit>
    <!-- Filter controls row -->
    <div class="flex flex-col lg:flex-row lg:justify-between gap-4">
      <!-- Filter inputs container -->
      <div class="flex flex-col lg:flex-row gap-4 w-full lg:max-w-5xl">
        <!-- Start Date input -->
        <div class="w-full">
          <DateInput name="startDate" label="Start Date" />
        </div>
        
        <!-- End Date input -->
        <div class="w-full">
          <DateInput name="endDate" label="End Date" />
        </div>
        
        <!-- Dashboard dropdown -->
        <div class="w-full lg:max-w-sm">
          <Select name="dashboard" label="Dashboard" options={dashboards} />
        </div>
        
        <!-- Refresh button -->
        <div class="lg:pt-9">
          <button
            type="submit"
            class="bg-blue-600 text-white px-4 py-[5.5px] rounded hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center gap-2"
            disabled={!filterData.startDate || !filterData.endDate}
          >
            <Icon src={Refresh} size="16" />
            Refresh
          </button>
        </div>
      </div>
    </div>
  </Form>
</fieldset>

Key Features

1. Responsive Design:

   • Stacked layout on mobile (flex-col)
   • Side-by-side layout on larger screens (lg:flex-row)
   • Constrained maximum width for the filter inputs container

2. Form Integration:

   • Uses a custom Form component to manage state
   • Includes DateInput and Select form controls
   • Disables refresh button when required fields are empty

3. Visual Design:

   • Green-themed fieldset with rounded corners
   • Blue refresh button with hover state
   • Refresh icon from Remix Icons
   • Disabled state for refresh button when dates aren't selected

4. Event Handling:

   • Emits changes immediately when any filter updates
   • Emits submit event when refresh button is clicked

Usage Example

<script>
  import Filters from "./filters.svelte";
  
  let dashboards = [
    { label: "Sales", value: "sales" },
    { label: "Marketing", value: "marketing" }
  ];
  
  let filterData = {
    startDate: null,
    endDate: null,
    dashboard: "sales"
  };
  
  function handleFilterChange({ detail }) {
    console.log("Filters changed:", detail);
    // Update your data fetching logic here
  }
</script>

<Filters 
  {filterData} 
  {dashboards} 
  on:change={handleFilterChange}
/>

Dependencies

• Custom form components:
  • Form
  • DateInput
  • Select
• Icon system:
  • @steeze-ui/svelte-icon
  • @steeze-ui/remix-icons (Refresh icon)

Accessibility Features

1. Form Labels:

   • All inputs have proper label associations
   • Clear visual hierarchy

2. Button States:

   • Visual feedback on hover
   • Disabled state when required fields are empty

3. Fieldset/Legend:

   • Properly groups related form controls
   • Provides context for the filter section

Notes

• The refresh button is disabled until both date fields have values
• The component maintains its own internal state through the Form component while also accepting initial values via props