Filters

Introduction

luzmo-filters lets end users build and edit filters or filter groups for charts. Filters can be combined with AND/OR logic and nested into groups, giving users fine-grained control over the data they see.

The component outputs filters in the standard Luzmo filter format, so you can pass them directly to embedded visualizations or store them on items inside luzmo-item-grid .

Use the <luzmo-filters> element in your HTML.

Interactive example

Properties

Use HTML attributes for primitive values in markup, and JS properties for objects, arrays, and programmatic updates.

Events

Types

The component entrypoint exports two component-owned types used by the internal filter editor. The shared type ItemFilterGroup is the external format consumed by Luzmo visualizations.

import '@luzmo/analytics-components-kit/filters';

import type { FilterCondition, FilterGroup } from '@luzmo/analytics-components-kit/filters';
import type { ItemFilterGroup } from '@luzmo/analytics-components-kit/types';

FilterGroup and FilterCondition are useful when you need to inspect or transform the editor's internal state, but they are not the format consumed by Luzmo visualizations -- use ItemFilterGroup for that.

The luzmo-filters-changed event does not currently have a named exported interface. Its payload shape is CustomEvent<{ filters: ItemFilterGroup[] }> .

CSS Variables

All CSS variables in this list can be set on luzmo-filters { ... } .

Code examples

<luzmo-filters
  id="filtersEditor"
  language="en"
  size="m"
  api-url="https://api.luzmo.com"
  auth-key="your-auth-key"
  auth-token="your-auth-token"
></luzmo-filters>

<script type="module">
  import '@luzmo/analytics-components-kit/filters';

  let filters = [
    {
      condition: 'and',
      filters: [
        {
          expression: '? in ?',
          parameters: [
            { columnId: '8ad1be07-cd5f-4170-b9c7-de1f0a2b4c78', datasetId: '6f2f9f80-3d80-4f45-9d5c-6d1b2e4a8c11' },
            ['Belgium']
          ]
        }
      ],
      subGroups: []
    }
  ];

  const filtersEditor = document.getElementById('filtersEditor');

  filtersEditor.datasetIds = ['6f2f9f80-3d80-4f45-9d5c-6d1b2e4a8c11'];
  filtersEditor.filters = filters;

  filtersEditor.addEventListener('luzmo-filters-changed', (event) => {
    filters = event.detail.filters;
    filtersEditor.filters = filters;
  });
</script>