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

Question

该DynamicRangeFilter在Searchkit是一个很好的和简单的解决方案如滤波器年.您只需在Elasticsearch中保存一年字段并使用过滤器:

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

到目前为止,我还没有找到如何使用它来过滤多值属性,例如一系列年份.想象一下,你有一个持续时间属性a 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来实现这一目标.

Answer 1

如果您使用 Searchkit 的日期过滤器组件，则可以实现此目的，如下所示：

Searchkit 的日历式日期过滤器组件

此 Searchkit 过滤器允许用户根据选择的开始时间和可选的结束时间过滤开始结束日期范围。

请参阅演示目录以获取工作示例。

日期范围过滤所需的 Searchkit 组件最初是在 MIT 许可下发布的。

安装

npm install --save-dev searchkit-datefilter

例子

npm install --save-dev searchkit-datefilter

特性

• fromDateField (ESField)：必填。用作开头的 Elasticsearch 日期字段。
• toDateField (ESField)：必填。用作结束的 Elasticsearch 日期字段。
• id （字符串）：必需。组件的 id。必须是独一无二的。用作 url 序列化的键
• title （字符串）：必需。用于组件和选定过滤器组件的标题

• calendarComponent(ReactComponent)：渲染时使用的日历组件

  • 兼容于DateRangeCalendar
  • 默认DateRangeFilterInput仅显示两个日期数学输入字段

• fieldOptions ({type:"embedded|nested|children", options:Object})配置存储在ElasticSearch中的类型字段，可以嵌入或嵌套或子项

  • type:nested 需要提供 options.path
  • type:children 需要提供 options.childType
  • 请参阅Searchkit 文档中的字段选项

• rangeFormatter ((count:number)=> string|number)格式化函数，用于将数字转换为更易读的显示值。例如长数字格式或前缀货币。`

您可以在日期过滤器代码存储库中找到完整的描述：此处和此处。

您可以在此处找到上面代码部分的完整示例。

我希望它对你有帮助。祝你好运！