Show Facets Data in a specific order

Elastic Search
1

I am using the reference UI react project to display the search results and facets.
But here the facets are being displayed in either descending order or in ascending order.
But I need to display the results in a specific order.

This is how it is currently being displayed ( Ascending )
Status:
Active
Closed
Pending
Warning

I need this data in custom order like
Status:
Warning
Active
Pending
Closed

Please help and advise.

2

Hello, you can use this snippet:

<Facet
  mapContextToProps={context => {
    if (!context.facets.states) return context;
    return {
      ...context,
      facets: {
        ...(context.facets || {}),
        states: context.facets.states.map(s => ({
          ...s,
          data: s.data.sort((a, b) => {
            if (a.value > b.value) return 1;
            if (a.value < b.value) return -1;
            return 0;
          })
        }))
      }
    };
  }}
  field="states"
  label="States"
  show={10}
/>

And replace the logic with something like this :

  const order = [
    "Warning",
    "Active",
    "Pending",
    "Closed",
  ];

  s.data.sort(
    (a, b) => order.indexOf(a.value) - order.indexOf(b.value)
3

Thanks @Gustavo_Llermaly, this works for me. Just one more small help. How we can mark any field on loading the page ( as default checked ). Previously, I was using the initialState in which I have set the default checked status as Active and Warning.
After adding this logic the data output is correct but the values on Facet are not checked.

4

Thats right, using searchQuery: {filters} property will not affect the app state. Not sure what's the best way to do it but you should put the filter actions on your app start

addFilter("status", "Warning", "any") 
addFilter("status", "Active", "any")

If you need more help I recommend you to fork the default sandbox and create a new ticket reproducing your problem.

Best,

5

Thanks, @Gustavo_Llermaly for your help. Appreciated !