How to add a Dynamic Range Filter for multi-value property?

Question

The DynamicRangeFilter in Searchkit is a nice and easy solution to e.g. filter years. You would just save a year field in Elasticsearch and use the filter:

<DynamicRangeFilter
    field="year"
    id="year"
    title="Year"
/>

So far I didn't find out how it could be used to filter a multi-value property, e.g. a range of years. Imagine you have a duration property with a start and end:

[
  {
    "id": 123,
    "title": "Foo",
    "duration": {
      "start": 2013,
      "end": 2016
    }
  },
  {
    "id": 234,
    "title": "Bar",
    "duration": {
      "start": 2015,
      "end": 2015
    }
  },
  {
    "id": 345,
    "title": "Baz",
    "duration": {
      "start": 2017,
      "end": 2020
    }
  }
]

Now, the filter should respect the duration and display all items within range. I'm not sure if and how fieldOptions could be used to achieve this.

Answer 1

You can achieve this if you use date filter component for Searchkit like follows:

A calendar-style date filter component for Searchkit

This Searchkit filter lets users filter start-end date ranges based on a chosen start time and an optional end time.

See demo directory for a working example.

The Searchkit components needed for date range filtering were originally published here under the MIT license.

Install

npm install --save-dev searchkit-datefilter

Example

import { SearchkitComponent } from "searchkit";
import { DateRangeFilter, DateRangeCalendar } from "searchkit-datefilter"

class App extends SearchkitComponent
{
    render()
    {
        <div>
            <DateRangeFilter
                id="event_date"
                title="Date range"
                fromDateField="event_date.from"
                toDateField="event_date.to"
                calendarComponent={DateRangeCalendar}
                fieldOptions={{
                    type: 'embedded',
                    options: {
                        path: 'event_date'
                    }
                }}
            />
        </div>
    }
}

Properties

• fromDateField (ESField): Required. An elasticsearch date field to use as the beginning.
• toDateField (ESField): Required. An elasticsearch date field to use as the end.
• id (string): Required. id of component. Must be unique. Used as key for url serialisation
• title (string): Required. Title used for component and for selected filters component

• calendarComponent (ReactComponent): Calendar component to use when rendering

  • Compatible with DateRangeCalendar
  • Defaults to DateRangeFilterInput which just shows two date math input fields

• fieldOptions ({type:"embedded|nested|children", options:Object}) Configures the type field that is stored in ElasticSearch, can be embedded or nested or children

  • type:nested requires options.path provided
  • type:children requires options.childType provided
  • see Field Options in Searchkit documentation

• rangeFormatter ((count:number)=> string|number) A formatter function used to convert numbers into more readable display values. E.g. long number formatting or prefixing currencies.`

The full description you can find in date filter code repositories: here and here.

The full example from the part of code above you can find here.

I hope it helps you. Good luck!