如何为多值属性添加动态范围过滤器？

Question

The DynamicRangeFilter in Searchkit is a nice and easy solution to eg 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, eg 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. Eg 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!