Как добавить фильтр динамического диапазона для многозначного свойства? - PullRequest
Новая
       49

Как добавить фильтр динамического диапазона для многозначного свойства?

0 голосов
/ 11 декабря 2018

DynamicRangeFilter в Searchkit - хорошее и простое решение, например, для фильтрации по годам.Вы бы просто сохранили поле года в Elasticsearch и использовали фильтр: 

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

До сих пор я не выяснил, как его можно использовать для фильтрации многозначного свойства, например, диапазона лет.Представьте, что у вас есть свойство длительности с start и 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
    }
  }
]

Теперь фильтр должен учитывать продолжительность и отображать все элементы в пределах диапазона.Я не уверен, что и как fieldOptions может быть использовано для достижения этой цели.

1 Ответ

0 голосов
/ 14 декабря 2018

Этого можно достичь, если использовать компонент фильтра даты для Searchkit следующим образом:

Компонент фильтра даты в календарном стиле для Searchkit

This SearchkitФильтр позволяет пользователям фильтровать диапазоны дат начала и окончания на основе выбранного времени начала и необязательного времени окончания.

См. демонстрационный каталог для рабочего примера.

enter image description here

Компоненты Searchkit, необходимые для фильтрации по диапазону дат, были первоначально опубликованы здесь по лицензии MIT.

Установка 

npm install --save-dev searchkit-datefilter

Пример 

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>
    }
}

Свойства

  • fromDateField (ESField) : Обязательно .Поле даты эластичного поиска, используемое в качестве начала.
  • toDateField (ESField) : Обязательно .Поле даты поиска эластичного поиска для использования в качестве конца.
  • id (строка) : Обязательно .идентификатор компонента.Должно быть уникальным.Используется в качестве ключа для сериализации URL
  • title (строка) : Обязательно .Заголовок, используемый для компонента и для выбранного фильтра.

  • calendarComponent (ReactComponent): компонент календаря, используемый при рендеринге

    • Совместимо с DateRangeCalendar
    • По умолчанию DateRangeFilterInput, в котором просто отображаются два поля ввода даты математики

  • fieldOptions ({тип: "внедренный | вложенный | дочерний элемент", параметры: объект}) Конфигурирует поле типа, которое хранится в ElasticSearch, может быть встроено или вложено, или дочернее *

    • тип: вложенное требует options.path предоставлено
    • type: children требует options.childType предоставляется
    • см. Параметры поля в документации Searchkit

  • rangeFormatter ((count: number) =>string | number) Функция форматирования, используемая для преобразования чисел в более читаемые отображаемые значения.Например, длинные числовые форматы или префиксы валют.

Полное описание, которое вы можете найти в хранилищах кодов фильтра даты: здесь и здесь .

Полный пример приведенной выше части кода вы можете найти здесь .

Надеюсь, это поможет вам.Удачи!

...